css -> helft dem anfänger

Spezial · Beitrag von **Spezial** » 31.05.2006 18:39

Moin!

Vorallem: Das ist meine erste CSS-Site und ich habe sie mit Hilfe von www.css4you.de erstellt :p
Aber ich nehme an, der Quelltext der CSS-Datei ist sehr unsauber, weil ja wie gesagt, das meine erste Seite mit CSS ist (Vorher habe ich immer Tabellen benuzt) ^^

Und jetzt wollte ich euch ma fragen, ob ihr evtl. Verbesserungen des Codes habt und außerdem habe ich noch die Frage: Wie schaffe ich es, dass die .titleline den Text Vertikal in der Mitte schreibt? Also das nicht ganz oben ist, sondern zentriert. vertical-align:middle; funzt irgendwie nicht ^^

Hier die Site:

index.php:

Code: Alles auswählen

<!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=iso-8859-1" />
<link rel="stylesheet" href="style.css" />
<title>Planet-Spezial.de</title>
</head>
<body>

<div style="width:717px; margin:5px auto; text-align:left;">
 <div id="title">
  <img src="design/banner.gif" style="width:717px; height:332px;" alt="Logo" />
</div>

 <div id="left">
  <div class="menucontainer">
   <p class="titleline">Menu</p>
   &nbsp;&raquo;&nbsp;<a class="menu" href="#">Hyperlink 1</a><br />
   &nbsp;&raquo;&nbsp;<a class="menu" href="#">Hyperlink 2</a><br />
   &nbsp;&raquo;&nbsp;<a class="menu" href="#">Hyperlink 3</a><br />
   &nbsp;&raquo;&nbsp;<a class="menu" href="#">Hyperlink 4</a><br />
   &nbsp;&raquo;&nbsp;<a class="menu" href="#">Hyperlink 5</a><br />
  </div>
 </div>

 <div class="contentcontainer">
  <p class="titleline">Content</p>
  Hier kommt dann später der Content :)
 </div>

 <div class="copyright">
  &copy; 2006 by Planet-Spezial.de
 </div>

</div>

</body>
</html>

style.css:

Code: Alles auswählen

/* CSS Document */

<!--
body 
{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:10px;
 background-color:#FFFFFF;
 color:#000000;
 text-align:center;
 margin:0px;
}

/*für die komplette css-datei, siehe website*/

#title {
height:332px;
padding:0px;
}
#left {
width:150px;
float:left;
}

.menucontainer {
border:#e89d5c 2px solid;
border-top:none;
width:150px;
margin:1px;
float:left;
}
.contentcontainer {
border:#e89d5c 2px solid;
border-top:none;
width:553px;
margin:1px;
float:right;
}
.titleline{
height:20px;
width:100%;
border-bottom:#e89d5c 2px solid;
background-image:url(design/verlauf.gif);
font-size:12px;
font-weight:bold;
text-align:center;
margin:0px;
}
.copyright {
height:20px;
width:712px;
border:#e89d5c 2px solid;
background-image:url(design/verlauf.gif);
font-weight:bold;
text-align:center;
margin:1px;
float:left;
}
//-->

Die Website: (zur Veranschaulichung) http://www.planet-spezial.de/new/

fanrpg · Beitrag von **fanrpg** » 31.05.2006 19:54

Code: Alles auswählen

.titleline{ 
height:20px; 
width:100%; 
border-bottom:#e89d5c 2px solid; 
background-image:url(design/verlauf.gif); 
font-size:12px; 
font-weight:bold; 
text-align:center; 
margin:0px;
text-align:center;
}

Zentriert dir den Text.

Spezial · Beitrag von **Spezial** » 31.05.2006 19:57

.titleline{
height:20px;
width:100%;
border-bottom:#e89d5c 2px solid;
background-image:url(design/verlauf.gif);
font-size:12px;
font-weight:bold;
text-align:center;
margin:0px;
text-align:center;
}

Ja, horizontale Zentrierung habe ich bereits

Ich möchte allerdings auch gerne vertikale (senkrechte) Zentrierung. Das es perfekt Gleichvielabstand von allen Rändern hat quasi.

John the Ripper · Beitrag von **John the Ripper** » 31.05.2006 20:19

Code: Alles auswählen

text-valign: center

damit könntest du es mal probieren. Das müsste gehen. Das v steht übrigens für vertical.

Spezial · Beitrag von **Spezial** » 31.05.2006 20:32

Ne, den Befehl gibt es leider nicht, geschweige denn, dass es funktioniert. - trotzdem Danke...

roum · Beitrag von **roum** » 31.05.2006 20:48

Das ist halt das Problem an der ganzen Sache.
Mit DIVs eine Seite zu bauen ist schön und gut kostet allerdings Nerven ohne Ende.
Vertical-align gibts nur bei Tabellen und es gibt nix vergleichbar simples um etwas in einem Block Element auszurichten.
Da kannst du dich dann schön mit Margin, Padding und Postition rumschlagen.
Ganz schlimm wirds, wenn du eine Seite mit flexibler Breite/Höhe basteln willst.
Ich hab letztens den Index von meinem phpBB nur mit DIVs "gestaltet".
Nach ewigem Rumprobieren war ich recht zufrieden, hab mir mal erlaubt die Seite im IE statt im Feuerfuchs anzusehen und dann alles wieder gelöscht (katastrophal).
Jetzt mach ich das Ganze wieder mit Tabellen.

Spezial · Beitrag von **Spezial** » 31.05.2006 21:13

jo, ich hab ca. 20 mins gebraucht für die site und dann nomma 5-10 damits im ie auch funzt...für das ganze hätte ich mit tables maximal 5 minuten gebraucht...
aber das mit dem rumprobieren wusste ich nicht ^^ so hab ichs zwar gemacht, aber gerade deshalb dachte ich is es unsauber...hab gedacht wenn man das alles ganz logisch angeht wirds richtig toll und genauso wie mans will...
aber du hast mich auf eine idee gebracht! danke

edit: habs geschafft!

.titleline{
height:14px;
width:100%;
border-bottom:#e89d5c 2px solid;
background-image:url(design/verlauf.gif);
font-size:12px;
font-weight:bold;
text-align:center;
text-valign:center;
margin:0px;
padding:3px 0px;
}

das fette hab ich verändert udn schon passt es perfekt...erst wollte ich height mit 12 px machen und padding mit 4 px, aba da hat der ie mal wieder rumgesuckt...
viele dank auch

nuunuu · Beitrag von **nuunuu** » 11.06.2006 21:54

Hi, ich hab da ma ne Frage: warum erstellst du deine datei als index.php???? du hastdoch, wenn ich des richtig gesehn habt kein bisschen php benutzt...

und das mit dem

 am ende der CSS Datei brauchst du meines wissens nach auch nicht!

Des wars glaubi ch...

Bye Invisible

Spezial · Beitrag von **Spezial** » 12.06.2006 15:08

nuunuu hat geschrieben:Hi, ich hab da ma ne Frage: warum erstellst du deine datei als index.php???? du hastdoch, wenn ich des richtig gesehn habt kein bisschen php benutzt...

und das mit dem

 am ende der CSS Datei brauchst du meines wissens nach auch nicht!

Des wars glaubi ch...

Bye Invisible

PHP -> ist nur eine Vorlage, ich mache automatisch PHP, weil ich HTML nie benutze...Arbeite mit einem tpl-system, mittlerweile haben die design-datein schon die endung *.tpl

brauch ich ja nur wenn ich nicht möchte, das vorhandene css-styles überschrieben werden

das möchte ich in dem fall nicht, da im tpl-system noch so einiges weiteres css dazukommt xD

greetz