Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag10.10.2009 um 14:08 (UTC)    
Titel: Ich suche hilfe bei meinem design

Hallo ich habe ein neues design wen ich etwas schreibe kommt es nicht dahin wo ich es möchte sondern ganzs unten wer kann mir helfen?

mfg

Der cod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Beispiel-Design</title> <style type="text/css">

<!-- /*Und los gehts.. Wir fangen an die Container anzulegen und somit den "Grundriss" zu machen. Ich habe, wie auch später nochmal angemerkt, 2 oder 3 Mal das Attribut hight and Stellen benutzt wo es eigentlich nicht nötig bzw. nicht sinnvoll ist. Allerdings kann ich so das leere Design etwas anschaulicher gestalten und ihr seht besser wie es später aussehen könnte. */ -->

body {
background-color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin: 0px;

}

#div_container {
text-align: left;
margin: auto;
width: 800px;
margin-top:20px;
border: solid 1px #000000;

}

#welcome_container {
height: 20px;
background: #339900;
background:url(http://www.viruz-design.de/images/vdesign/catpic.gif) repeat-x;
text-align: left;
font-size:11px;
line-height:20px;
padding-left:10px;

}

#menu_container {
height: 25px;
background: #339900;
background:url(http://www.viruz-design.de/images/vdesign/catpic.gif) repeat-x;
text-align: center;

}


#top_container {
height: 140px;
padding: 0px;
/*background:(url) (img/header.png);*/
background-color: #7b7d8e; /*die Höhe ist hier natürlich egal, da ihr am Ende ehh die Höhe eures Headers nehmt*/
padding-left:10px; /*total unwichtig, ist nur damit es in der Vorschau besser aussieht =)*/

}

#content_container {
width: 800px;
height: auto;
/*background:url (img/background.jpg; */
background:#FFFFFF;
}

#bottom_container {
width: 800px;
padding: 0px;
background-color: #CCCCCC;
height: 180px;
/* Wie eingangs angesprochen habe ich hier extra eine Höhe eingesetzt. Normalerweise könntet ihr hier auch hight:auto; einstellen*/

}

#footer_container {
clear: both;
width: 800px;
height: 25px;
line-height:25px;
background-color:#999999;

}

/*Die Container sind nun alle festgelegt, machen wir also mit den anderen DIVs weiter*/

#logo { /*das Logo braucht ihr natürlich nicht, wenn ihr es schon in den header eingebaut habt.*/
right: 40%;
width: 20%;
height: 140px;
position:absolute;
z-index: 0;
text-align:center; /*die Zeile kann natürlich wieder raus später, ist nur da, damit es jetzt nicht unsauber aussieht*/

}

.menu a{
float: left;
width: 100px;
height: 25px;
line-height:25px;


}

.menu a:hover {
background:#0d0d0d; /*Da wir nur den background festlegen wird die Schriftfarbe der Links sich automatisch so verhalten wie etwas weiter unten angepasst. In unserem Fall wird sie also Dunkelgrün.*/
}


#content {
height: 220px; /* Wie eingangs angesprochen habe ich hier extra eine Höhe eingesetzt. Normalerweise könntet ihr hier auch hight:auto; einstellen*/
padding-left:10px;
border-bottom:dotted #000000 1px;

}

#profil {
float: left;
width: 288px;
vertical-align: top;
padding-left:10px;

}

#links {
width: 300px;
float: left;
vertical-align: top;

}

#partner {
width: 202px;
float: right;
vertical-align: top;

}

.footer_left {
width: auto;
float:left;
text-align:left;
padding-left:10px;

}

.footer_right a {
width:auto;
float:right;
padding-right:10px;


}

/*Jetzt müssen wir noch die Links formatieren. Insofern die Links nicht innerhalb der entsprechenden DIVs anders definiert sind, gilt die folgende Formatierung für die ganze Seite */

a {
color:#FFFFFF;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;

}

a:hover {
color:#006600;

}

/*Mit den Vorbereitungen sind wir nun fertig, machen wir uns also daran alles zusammenzufügen */ --!>

</style>
</head>
<body>
<div id="div_container">
<div id="welcome_container">Herzlich Willkommen auf domoko.de.tl</div>
<div id="top_container">
<div id="logo"> Hier könnte euer Logo sein </div> Header </div>
<div id="menu_container">
<div class="menu"><a href="#"> Punkt1 </a> </div>
<div class="menu"><a href="#"> Punkt2 </a></div>
<div class="menu"><a href="#"> Punkt3 </a></div>
<div class="menu"><a href="#"> Punkt4 </a></div>
<div class="menu"><a href="#"> Punkt5 </a></div>
<div class="menu"><a href="#"> Punkt6 </a></div>
<div class="menu"><a href="#"> Punkt7 </a></div>
<div class="menu"><a href="#"> Punkt8 </a></div>
</div>
<div id="content_container">
<div id="content"> Hallo wie geht’s euch?</div>
<div id="bottom_container">
<div id="profil">Profil:<br /><br />Hier könnte euer Profil drinstehen</div>
<div id="links">Links:<br /><br />Hier könntet ihr Links o.ä. reinschreiben.. </div>
<div id="partner"> Partner:<br /><br /> Hier könnten die Banner<br />eurer Partner rein oder<br />natürlich andere Werbung </div>
</div>
<div id="footer_container">
<span class="footer_left">Hier könnt ihr zB euren Copyright-Hinweis hinschreiben </span>
<span class="footer_right"><a href="#">Impressum</a><a href="#">Kontakt</a></span>

</div> </div> </div>
</body>
</html>
Beitrag10.10.2009 um 14:14 (UTC)    
Titel:

Warscheinlich hast du alle in ein Feld eigefügt ich zeig dir mal in welche Felder welche Teile kommen:


CSS Code ohne Style Tags:
Zitat:


body {
background-color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin: 0px;

}

#div_container {
text-align: left;
margin: auto;
width: 800px;
margin-top:20px;
border: solid 1px #000000;

}

#welcome_container {
height: 20px;
background: #339900;
background:url(http://www.viruz-design.de/images/vdesign/catpic.gif) repeat-x;
text-align: left;
font-size:11px;
line-height:20px;
padding-left:10px;

}

#menu_container {
height: 25px;
background: #339900;
background:url(http://www.viruz-design.de/images/vdesign/catpic.gif) repeat-x;
text-align: center;

}


#top_container {
height: 140px;
padding: 0px;
/*background:(url) (img/header.png);*/
background-color: #7b7d8e; /*die Höhe ist hier natürlich egal, da ihr am Ende ehh die Höhe eures Headers nehmt*/
padding-left:10px; /*total unwichtig, ist nur damit es in der Vorschau besser aussieht =)*/

}

#content_container {
width: 800px;
height: auto;
/*background:url (img/background.jpg; */
background:#FFFFFF;
}

#bottom_container {
width: 800px;
padding: 0px;
background-color: #CCCCCC;
height: 180px;
/* Wie eingangs angesprochen habe ich hier extra eine Höhe eingesetzt. Normalerweise könntet ihr hier auch hight:auto; einstellen*/

}

#footer_container {
clear: both;
width: 800px;
height: 25px;
line-height:25px;
background-color:#999999;

}

/*Die Container sind nun alle festgelegt, machen wir also mit den anderen DIVs weiter*/

#logo { /*das Logo braucht ihr natürlich nicht, wenn ihr es schon in den header eingebaut habt.*/
right: 40%;
width: 20%;
height: 140px;
position:absolute;
z-index: 0;
text-align:center; /*die Zeile kann natürlich wieder raus später, ist nur da, damit es jetzt nicht unsauber aussieht*/

}

.menu a{
float: left;
width: 100px;
height: 25px;
line-height:25px;


}

.menu a:hover {
background:#0d0d0d; /*Da wir nur den background festlegen wird die Schriftfarbe der Links sich automatisch so verhalten wie etwas weiter unten angepasst. In unserem Fall wird sie also Dunkelgrün.*/
}


#content {
height: 220px; /* Wie eingangs angesprochen habe ich hier extra eine Höhe eingesetzt. Normalerweise könntet ihr hier auch hight:auto; einstellen*/
padding-left:10px;
border-bottom:dotted #000000 1px;

}

#profil {
float: left;
width: 288px;
vertical-align: top;
padding-left:10px;

}

#links {
width: 300px;
float: left;
vertical-align: top;

}

#partner {
width: 202px;
float: right;
vertical-align: top;

}

.footer_left {
width: auto;
float:left;
text-align:left;
padding-left:10px;

}

.footer_right a {
width:auto;
float:right;
padding-right:10px;


}

/*Jetzt müssen wir noch die Links formatieren. Insofern die Links nicht innerhalb der entsprechenden DIVs anders definiert sind, gilt die folgende Formatierung für die ganze Seite */

a {
color:#FFFFFF;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;

}

a:hover {
color:#006600;

}

/*Mit den Vorbereitungen sind wir nun fertig, machen wir uns also daran alles zusammenzufügen */ --!>




Text über Design:

Zitat:


<div id="div_container">
<div id="welcome_container">Herzlich Willkommen auf domoko.de.tl</div>
<div id="top_container">
<div id="logo"> Hier könnte euer Logo sein </div> Header </div>
<div id="menu_container">
<div class="menu"><a href="#"> Punkt1 </a> </div>
<div class="menu"><a href="#"> Punkt2 </a></div>
<div class="menu"><a href="#"> Punkt3 </a></div>
<div class="menu"><a href="#"> Punkt4 </a></div>
<div class="menu"><a href="#"> Punkt5 </a></div>
<div class="menu"><a href="#"> Punkt6 </a></div>
<div class="menu"><a href="#"> Punkt7 </a></div>
<div class="menu"><a href="#"> Punkt8 </a></div>
</div>



Text unter dem Design:

Zitat:



<div id="bottom_container">
<div id="profil">Profil:<br /><br />Hier könnte euer Profil drinstehen</div>
<div id="links">Links:<br /><br />Hier könntet ihr Links o.ä. reinschreiben.. </div>
<div id="partner"> Partner:<br /><br /> Hier könnten die Banner<br />eurer Partner rein oder<br />natürlich andere Werbung </div>
</div>
<div id="footer_container">
<span class="footer_left">Hier könnt ihr zB euren Copyright-Hinweis hinschreiben </span>
<span class="footer_right"><a href="#">Impressum</a><a href="#">Kontakt</a></span>

</div> </div> </div>





So müsste es beim HPBK klappen, den Inhalt usw. kannst du dann über den Seiteneditor einfügen!

mfg max
______________
Du hast eine Frage? Ich stehe dir selbstverständlich jeder Zeit zur Verfügung!
Beitrag10.10.2009 um 14:19 (UTC)    
Titel: Vielen dank

Vielen dank:) es klappt mfg der trhead kann geschloßen werden
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de