Überschrift bekommt keinen Rahmen

Corraggiouno · 4. Januar 2010 um 11:29

hi,

mein CSS-Code:

html {
height: 100.3%;
}

body {
font-family: Verdana, sans-serif;
font-size:12px;
background:#eeeeee;
}

* {
margin: 0;
padding: 0;
}

div#wrapper {
width: 810px;
margin:15px auto;
}

h1 {
background: url(../images/logo.gif) no-repeat;
height:155px;
text-indent: -999em;
}

div#nav {
background: url(../images/nav_bg.gif) repeat-x;
width:800px;
height:35px;
margin-left:6px;
line-height:35px;
}

div#nav ul {
list-style-type:none;
}

div#nav li {
float:left;
width:160px;
text-align:center;
}

div#nav a {
display:block;
clear:left;
text-decoration: none;
color:#ffffff;
border-right-style: solid;
border-width: 1px;
border-color: #ffffff;
}

div#nav a.noborder {
border: none;
}

div#nav a:hover {
background: url(../images/nav_hover.gif) repeat-x;
text-decoration:underline;
}

div#nav a.enabled {
background: url(../images/nav_enabled.gif) repeat-x;
font-size:1.2em;
font-weight:bold;
color:#086be6;
text-decoration:none;

}

div#maintext {
background: url(../images/maintext_bg.gif) repeat-y;
margin-left:6px;
width:900px;
height:650px;
}

div#box1 {
width:240px;
float:left;
margin-top:10px;
margin-left:6px;
}

h3 {
font-size:14px;
}
.underline {
border-bottom: 2px solid;
border-color: #000000;
}



.head {
background: url(../images/box1_head.gif) no-repeat;
width:240px;
height:30px;
padding-top:10px;
padding-left:15px;
}

.middle {
background: url(../images/box1_middle.gif) repeat-y;
width:240px;
margin-top:-10px;
padding-top:5px;
padding-left:15px;
}

.bottom {
background: url(../images/box1_bottom.gif) no-repeat;
width:240px;
height:30px;
padding-left:15px;
}

Mein HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NET</title>
<link href="css/mh.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>NET</h1>
  <div id="nav">
    <ul>
     <li><a href="home.php">Home</a></li>
     <li><a href="dienstleistung.php">Dienstleistung</a></li>
     <li><a href="aktuelles.php">Aktulles</a></li>
     <li><a href="kontakt.php" class="enabled">Kontakt</a></li>
     <li><a href="login.php" class="noborder">Login</a></li>
    </ul> 
  </div>
  <div id="maintext">
   <div id="box1">
    <div class="head"><h3 class="underline">Kontakt</h3></div>
    <div class="middle">
    NEbr />
    Coik<br />
    Bu <br />
    7l
    </div>
    <div class="bottom"></div>
   </div>
  </div>  
</div>
</body>
</html>

Warum wird hier meine Überschrift nicht mit einem unteren Rahmen versehen?

_Thor · 4. Januar 2010 um 11:36

Weil du der h1 keinen Rahmen zugewiesen hast.

h1 {
  background: url(../images/logo.gif) no-repeat;
  height:155px;
  text-indent: -999em;
}

Ich seh da nix von nem border. Wo sollte also der Rahmen herkommen?

Corraggiouno · 4. Januar 2010 um 11:59

warum denn h1? h1 soll keinen Rahmen bekommen. Ich habe der h3 eine Klasse zugewiesen in der definiert ist, dass h3 einen border-bottom bekommen soll!

_Thor · 4. Januar 2010 um 12:06

Aso, da ist noch eine h3 in einem div versteckt, die hab ich nicht gesehen, sind zuviele unnötige divs da. Schmeiß die mal raus, dann könnte sich der Fehler von selbst beheben.

Wenn nicht, musst du das Element spezifischer ansprechen.

h3.underline {...}
oder
div h3.underline {...} //wäre aber falsch, da das div nichts gruppiert

Corraggiouno · 4. Januar 2010 um 12:18

hallo thor,

danke für den Tipp. …aber ich benötige doch an den entsprechenden Stellen die div’s. Kannst du mir vielleicht sagen, welche divs explizit unwichtig sind?
mein aktuelles ergebnis NET

_Thor · 4. Januar 2010 um 12:25

Wozu brauchst du die divs?

Die können alle weg, bis auf den Wrapper.

Corraggiouno · 4. Januar 2010 um 12:29

…ok, aber wie definiere ich dann die Navigation, mit Klassen? Wie setze ich dann die Breite für die div#maintext fest.
Kannst du mir vielleicht einen Code-Schnipsel liefern bzw. einen Tipp geben wie ich das ganze besser machen kann?

Gilles · 4. Januar 2010 um 12:38

Du kannst fast alle HTMl Elemente stylen.
Auch Listen

ul#maintext zum Beispiel.

maintext ist sogar noch ok als Div, da du dort mehrere Unterelemente hast.
Nur du musst kein Div für die Überschrift machen. Mach doch underline und head dafür

Im Grunde genommen solltest du zuerst den inhalt auszeichnen mit HTML und dich dann um das Design kümmern
So verhinderst du einen überfluss an Divs.
Solltest du noch zusätzliche Design Elemente im Endeffekt brauchen, kannst du sie als Div hinzufügen (Design Element im Sinne von: Ohne jeglichen Inhalt)

_Thor · 4. Januar 2010 um 12:54

[html]

[/html] [code]ul#navigation {...}[/code]

Wie setze ich dann die Breite für die div#maintext fest.

Nagut, dieses div macht vielleicht noch sinn, wenn es mehrere Elemente beinhaltet.

Corraggiouno · 5. Januar 2010 um 15:23

wow, vielen dank für den Tipp Thor.
Kann ich auch bei

div#box1 {
width:240px;
float:left;
margin-top:10px;
margin-left:6px;
}

h3 {
font-size:14px;
border-bottom: 2px solid;
border-color: #000000;
}

.head {
background: url(../images/box1_head.gif) no-repeat;
width:240px;
height:30px;
padding-top:10px;
padding-left:15px;
}

.middle {
background: url(../images/box1_middle.gif) repeat-y;
width:240px;
margin-top:-10px;
padding-top:5px;
padding-left:15px;
}

.bottom {
background: url(../images/box1_bottom.gif) no-repeat;
width:240px;
height:30px;
padding-left:15px;
}

…bei meiner Box das div weglassen. Wie kann ich dies im HTML besser machen? Geht das hier überhaupt? Oder muss da auf divs zurückgreifen, wie ich es bereits schon habe!

_Thor · 5. Januar 2010 um 15:33

Für die Box brauchst du ein div, in dieses kommen alle anderen Tags. Allerdings dann die, die dem Inhalt auch eine Bedeutung geben, keine weiteren div.

Corraggiouno · 5. Januar 2010 um 15:43

wie soll ich dann die Elemente per HTML bezeichnen. Also für den head - Teil könnte ich ja h3 nehmen. Aber was mach ich mit dem .middle bzw. .bottom Teil?
Der .middle Teil soll ja noch variable zum wachsenden Inhalt sein!

_Thor · 5. Januar 2010 um 15:58

Natürlich nach ihrer Bedeutung. Listen als

, textabsätze als

, Überschriften als

bis

, tabellarische Daten als …

Also für den head - Teil könnte ich ja h3 nehmen.

wäre die richtige Wahl, denn eine Überschrift 3. Ebene kann es nicht ohne eine Überschrift 2. Ebene geben.

Aber was mach ich mit dem .middle bzw. .bottom Teil?
Der .middle Teil soll ja noch variable zum wachsenden Inhalt sein!

Die Elemente wachsen mit dem Inhalt mit, solange man ihnen nichts anderes sagt.

Corraggiouno · 5. Januar 2010 um 19:35

ok den Head-Teil innerhalb der Box definiere ich mit h2.

Die Elemente wachsen mit dem Inhalt mit, solange man ihnen nichts anderes sagt

Aber wie definiere ich den „Middle“-Teil, also mit welchem HTML-Element?

_Thor · 5. Januar 2010 um 19:37

Das kommt drauf an, welche Bedeutung der Inhalt hat.

Corraggiouno · 5. Januar 2010 um 20:07

Der Inhalt soll einfach die Adresse Telefon - Nr. Email etc sein

_Thor · 5. Januar 2010 um 20:42

Dann würde wohl zutreffen.

Corraggiouno · 5. Januar 2010 um 21:39

habe in css text-decoration:underline; für das Unterstreichen der Überschrift definiert. Ist es eigentlich möglich auch möglich das Unterstreichen in unterschiedlicher Dicke zu definieren?

_Thor · 5. Januar 2010 um 21:43

Das kannst du mit der Eigenschaft border erreichen.

Corraggiouno · 5. Januar 2010 um 21:59

habe folgendes definiert:

div#box1 {
width:240px;
float:left;
margin-top:10px;
margin-left:6px;
}

h2 {
background: url(../images/box1_head.gif) no-repeat;
font-size:14px;
width:240px;
height:30px;
padding-top:10px;
padding-left:15px;
border-bottom: 1px solid;
}

xhtml-code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NET</title>
<link href="css/mh.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1>NET</h1>
  <ul id="navigation">
     <li><a href="home.php">Home</a></li>
     <li><a href="dienstleistung.php">Dienstleistung</a></li>
     <li><a href="aktuelles.php">Aktulles</a></li>
     <li><a href="kontakt.php" class="enabled">Kontakt</a></li>
     <li><a href="login.php" class="noborder">Login</a></li>
  </ul> 
  <div id="maintext">
   <div id="box1">
    <h2>Kontakt</h2>
    <address>
    NETCN<br />
    Co<br />
    Bu<br />
    9
    </address>
    <div class="bottom"></div>
   </div>
  </div>  
</div>
</body>
</html>

Also der div bottom mache ich noch weg. Nun bekomme ich folgendes Ergebnis: NET
Der Unterstrich wird neben bzw. zwischen h2 und address eingefügt, so hat es zumindest den Anschein.

Überschrift bekommt keinen Rahmen

bis

, tabellarische Daten als … Also für den head - Teil könnte ich ja h3 nehmen.

, tabellarische Daten als …

Also für den head - Teil könnte ich ja h3 nehmen.