Überschrift bekommt keinen Rahmen

Corraggiouno · 4 Januar 2010

hi,

mein CSS-Code:

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:

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

Weil du der h1 keinen Rahmen zugewiesen hast.

Code:

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

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

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.

Code:

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

Corraggiouno · 4 Januar 2010

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

Corraggiouno schrieb:
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

Wozu brauchst du die divs?

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

Corraggiouno · 4 Januar 2010

...........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

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

Corraggiouno schrieb:
...........ok, aber wie definiere ich dann die Navigation, mit Klassen?

HTML:

<ul id="navigation">
  <li></li>
  <li></li>
  <li></li>
</ul>

Code:

ul#navigation {...}

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

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

Code:

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

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

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

Corraggiouno schrieb:
wie soll ich dann die Elemente per HTML bezeichnen.

Natürlich nach ihrer Bedeutung. Listen als <ul>, <ol> oder <dl>, textabsätze als <p>, Überschriften als <h1> bis <h6>, tabellarische Daten als <table>...

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

<h2> 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

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

Das kommt drauf an, welche Bedeutung der Inhalt hat.

Corraggiouno · 5 Januar 2010

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

_Thor_ · 5 Januar 2010

Dann würde wohl <address> zutreffen.

Corraggiouno · 5 Januar 2010

habe in css

Code:

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

Das kannst du mit der Eigenschaft border erreichen.

Corraggiouno · 5 Januar 2010

habe folgendes definiert:

Code:

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:

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

Mitglied

Aktives Mitglied

Mitglied

Aktives Mitglied

Mitglied

Aktives Mitglied

Mitglied

Blogger

Aktives Mitglied

Mitglied

Aktives Mitglied

Mitglied

Aktives Mitglied

Mitglied

Aktives Mitglied

Mitglied

Aktives Mitglied

Mitglied

Aktives Mitglied

Mitglied