• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

border streicht überschrift durch

C

Corraggiouno

Mitglied
hallo,

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>JK</title>
<link href="css/jk.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

<div id="header">
<img src="images/logo.gif">
</div>

<div id="central">
<div id="nav">
<ul>
<li><a href="unternehmen.php"><span>Unternehmen</span></a></li>
<li><a href="leistungen.php"><span>Leistungen</span></a></li>
<li><a href="partner.php"><span>Partner</span></a></li>
<li><a href="stellenangebote"><span>Stellenangebote</span></a></li>
<li><a href="kontaktformular.php"><span>Kontaktformular</span></a></li>
</ul>
</div>
<div id="maintext">
klaöjdsfklja adkljf 
</div>
</div>


<div id="footer">

</div>

</div>
</body>
</html>

mein css-code:
Code: 
html {
height: 100.3%;

}

body{
font-family: Verdana, sans-serif;
font-size:0.8em;
color: #000000;
}

div#wrapper {
width: 850px;
margin:0 auto;
}

div#header {
background: url(../images/header.gif) no-repeat;
height: 50px;
padding:30px;
}



div#central {
background: url(../images/central.gif) repeat-y;
padding-top:50px;
padding-left: 60px;
}


div#nav {
padding-right: 60px;
float:right;
}


div#nav li {
display: inline;
list-style-type: none;
}

div#nav a {
float:left;	
text-decoration: none;
padding-left:1.0em;
margin-left:0.4em;
background: url(../images/tab_normal.gif) no-repeat left top;
}

div#nav a span {
display: block;
padding:0.5em 1.4em 0.3em 0.5em;
background: url(../images/tab_normal.gif) no-repeat right top;
}

div#maintext {
clear:right;
width: 710px;
height: 400px;
border-style:solid;
border-color: #dddddd;
border-width: 2px;
padding: 15px;
line-height:0.4em;
}

div#footer {
background: url(../images/footer.gif) no-repeat;
height:180px;
}


a {color: #fe0101; text-decoration: none;
}
a:link {}
a:visited {}
a:hover {}
a:active {}

h3 {
border-bottom: 2px solid #000000;
}

Warum wird meine Überschrift durchgestrichen und nicht der border darunter gesetzt?
 

Anhänge

  • teste.gif
    teste.gif
    1,6 KB · Aufrufe: 9
Werbung:
Zum einen sehe ich in Deinem Code nirgendwo den Text "Unsere Partner", der im Bild vorkommt.
Zum anderen hast Du in Deinem Code auch definitiv keine Überschrift!

Und ein Link würde die Fehlersuche deutlich einfacher machen.
 
oh, sorry
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>JK</title>
<link href="css/jk.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

<div id="header">
<img src="http://www.html.de/images/logo.gif">
</div>

<div id="central">
<div id="nav">
<ul>
<li><a href="unternehmen.php"><span>Unternehmen</span></a></li>
<li><a href="leistungen.php"><span>Leistungen</span></a></li>
<li><a href="partner.php"><span>Partner</span></a></li>
<li><a href="stellenangebote.php"><span>Stellenangebote</span></a></li>
<li><a href="kontaktformular.php"><span>Kontaktformular</span></a></li>
</ul>
</div>
<div id="maintext">
<h3>Unsere Partner</h3> 
</div>
</div>


<div id="footer">

</div>
</body>
</html>
css-code:
Code: 
html {
height: 100.3%;

}

body{
font-family: Verdana, sans-serif;
font-size:0.8em;
color: #000000;
}

div#wrapper {
width: 850px;
margin:0 auto;
}

div#header {
background: url(../images/header.gif) no-repeat;
height: 50px;
padding:30px;
}



div#central {
background: url(../images/central.gif) repeat-y;
padding-top:50px;
padding-left: 60px;
}


div#nav {
padding-right: 60px;
float:right;
}


div#nav li {
display: inline;
list-style-type: none;
}

div#nav a {
float:left;	
text-decoration: none;
padding-left:1.0em;
margin-left:0.4em;
background: url(../images/tab_normal.gif) no-repeat left top;
}

div#nav a span {
display: block;
padding:0.5em 1.4em 0.3em 0.5em;
background: url(../images/tab_normal.gif) no-repeat right top;
}

div#maintext {
clear:right;
width: 710px;
height: 400px;
border-style:solid;
border-color: #dddddd;
border-width: 2px;
padding: 15px;
line-height:0.4em;
}

div#footer {
background: url(../images/footer.gif) no-repeat;
height:180px;
}


a {color: #fe0101; text-decoration: none;
}
a:link {}
a:visited {}
a:hover {}
a:active {}

h3 {
border-bottom: 2px solid #000000;
}
hier der link JK
 
Werbung:
Du erbst von #maintext die line-height von 0.4em. Wenn Du die line-height für h3 z.B. auf 1.4em setzt, dann ist "Unsere Partner" unterstrichen.

Gruß thuemmy
 
prima, das hat funktioniert. Aber warum ist der Border über die ganze #maintext gezogen?
Kann ich den border auch so definieren, das dieser nur so lange wie auch die Überschrift ist?
 
Wenn es der border der Überschrift ist, sollte er das eigentlich automatisch sein, ansonsten musst du der Überschrift eine feste Breite geben.
 
Werbung:
Überschirften sind Blockelemente, und die erstrecken sich wohl, wenn nichts anderes gesagt wird, über die ganze zur Verfügung stehende Breite. Gib dem <h3> in der CSS-Datei ein
Code: 
display: inline;
und dann sollte das wunschgemäß klappen.

Gruß thuemmy
 
ich habe noch ein weiteres Problem. Wenn ich nun eine Tabelle erstelle, wird in der ersten Zelle ein roter Rahmen erstellt.
Kann mir jemand sagen warum?
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>JK</title>
<link href="css/jk.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

<div id="header">
<img src="images/logo.gif">
</div>

<div id="central">
<div id="nav">
<ul>
<li><a href="unternehmen.php"><span>Unternehmen</span></a></li>
<li><a href="leistungen.php"><span>Leistungen</span></a></li>
<li><a href="partner.php"><span>Partner</span></a></li>
<li><a href="stellenangebote.php"><span>Stellenangebote</span></a></li>
<li><a href="kontaktformular.php"><span>Kontaktformular</span></a></li>
</ul>
</div>
<div id="maintext">
<h4>Unsere Partner</h4><p>
<table border="1">
<tr>
<td><a href="http://www.arbonia.de/Deutsch/"<img src="../images/danfoss.gif"</a></td>
<td>test1</td> 
</table>
</div>
</div>


<div id="footer">

</div>

</div>
</body>
</html>


Code: 
html {
height: 100.3%;

}

body{
font-family: Verdana, sans-serif;
font-size:0.8em;
color: #000000;

}

div#wrapper {
width: 850px;
margin:0 auto;
}

div#header {
background: url(../images/header.gif) no-repeat;
height: 50px;
padding:30px;
}



div#central {
background: url(../images/central.gif) repeat-y;
padding-top:50px;
padding-left: 60px;
}


div#nav {
padding-right: 60px;
float:right;
}


div#nav li {
display: inline;
list-style-type: none;
}

div#nav a {
float:left;	
text-decoration: none;
padding-left:1.0em;
margin-left:0.4em;
background: url(../images/tab_normal.gif) no-repeat left top;
}

div#nav a span {
display: block;
padding:0.5em 1.4em 0.3em 0.5em;
background: url(../images/tab_normal.gif) no-repeat right top;
}

div#maintext {
clear:right;
width: 710px;
height: 400px;
border-style:solid;
border-color: #dddddd;
border-width: 2px;
padding: 15px;
line-height:0.4em;
}

div#footer {
background: url(../images/footer.gif) no-repeat;
height:180px;
}


a {color: #fe0101; text-decoration: none;
}
a:link {}
a:visited {}
a:hover {}
a:active {}

h4 {
color: #a0a0a0;
border-bottom: 1px solid #fe0101;
line-height:1.4em;
display:inline;
}

table {
border:none;
}
der link JK
 
Corraggiouno schrieb:
Wenn ich nun eine Tabelle erstelle, wird in der ersten Zelle ein roter Rahmen erstellt.
Kann mir jemand sagen warum?
Zum Vergrößern anklicken....
Weil Dein Bild ein Link ist. Da wird dann "border" gesetzt.
Wenn Du etwas nicht willst, musst Du es abschalten.

Übrigens solltest Du Dir Deinen HTML-Code nochmal zur Brust nehmen, Du scheinst ja sehr verliebt in <div> zu sein und streust sie ein, wo sie völlig überflüssig oder gar fehl am Platz sind. Auch zu Lasten der Semantik, die ja das eigentliche ist, was mit HTML festgelegt wird.
Und ob die Tabelle an der Stelle richtig ist, wird sich bei mehr Inhalt noch zeigen...wie es im Moment aussieht, wäre eine Definitionsliste wahrscheinlich richtiger.
 
Werbung:
ich habe jetzt in der Zeile
Code: 
<td><a href="http://www.arbonia.de/Deutsch/"<img border="0" src="../jk/images/danfoss.gif"</a></td>
border auf Null gesetzt. Ist das auch in CSS möglich, weil sonst muss ich ja bei jedem Link den border setzen!
 
Werbung:
Corraggiouno schrieb:
vielen dank für den Tipp!
kannst du mir sagen wo z.B. meine Div-Container fehl am Platz sind, damit ich es besser machen kann?
Zum Vergrößern anklicken....
Dazu überlegst Du Dir, was die Bedeutung von <div> ist.
Die ist: Gruppe von Elementen.

Eine Gruppe besteht immer aus mindestens zwei Elementen.
div#nav ist daher überflüssig.

div#header ist semantisch falsch, weil Du da ein Image hast, dem Du keine Bedeutung gibst. Dein Image enthält aber Content, nämlich die Überschrift, also ersetze das <div> durch <h1>. Deinem Image fehlt außerdem das Pflicht-Attribut "alt". Setze dort also den Text ein, der im Image steht, damit dieser angezeigt/vorgelesen wird, wenn keine Grafiken zum Einsatz kommen (abgestellt/Text-/Vorlesebrowser).

Corraggiouno schrieb:
würdet ihr sage, das man solche verlinkten Firmenlogos besser in einer Liste darstellen sollte, als in einer Tabelle?
Zum Vergrößern anklicken....
Eine Tabelle zeichnet zweidimensionale, tabellarische Daten aus. D.h. es gibt bestimmte Zeilen und bestimmte Spalten. Wenn es nur eine Spalte oder Zeile mit mehreren Zeilen oder Spalten gibt, dann ist die Tabelle oft auch schon verkehrt, denn dann hat man ja eine Liste. Wenn Du hier eine Auflistung von Firmen (allein der Name impliziert ja, dass es eine Liste ist, denn es ist ja keine "Firmen-Tabelle") hast, die immer aus Logo und Bezeichnung besteht, dann würde sich eine Definitionsliste (<dl>) anbieten.
 
Werbung:
Vielen Dank für die Anregungen.
es werden ca. 16 Firmen also 4 x 4 sein. Soll ich dann immer noch eine Definitionsliste machen oder doch ne Tabelle?
 
aber ich kann doch den header nicht einfach weglassen. Dieser beinhaltet doch eine Graphik.
Code: 
div#header {
background: url(../images/header.gif) no-repeat;
height: 50px;
padding:30px;
}
 
Corraggiouno schrieb:
Vielen Dank für die Anregungen.
es werden ca. 16 Firmen also 4 x 4 sein. Soll ich dann immer noch eine Definitionsliste machen oder doch ne Tabelle?
Zum Vergrößern anklicken....
Was meinst Du mit "4x4"? Denkst Du schon wieder ans Layout? Wenn Du etwas in HTML auszeichnest, denkst Du nicht ans Layout.

Und, wenn Du an Layout denkst bei "4x4", wie kommst Du dann auf Tabelle? Du weißt doch jetzt, dass man Layout nicht mit HTML (insb. Tabellen oder divs) macht, da kannst Du doch nicht auf eine Layoutfrage mit Tabellen antworten! :-)

"Trennung von Inhalt und Layout", das ist zum einen, dass man alle CSS-Angaben in ein externes Sylesheet auslagert. Das ist aber auch dass man im Kopf Inhalt und Layout voneinander trennt. Wenn Du das mal begriffen hast und umsetzen kannst, dann ist es für Dich total easy. Das ist die Hürde, die es zu überwinden gilt. Aber es ist wirklich so einfach. Für viele leider zu einfach, sie sehen Schwierigkeiten, die nicht da sind.

Also: Wenn Du nicht jeweils 4 Firmen in eine bestimmte Gruppe packen willst, also "Maschinenbaufirmen", "Kosmetikfirmen", usw. dann ist es natürlich immer noch eine Liste. Wie Du die später anordnen willst, ist Sache von CSS und hat nichts mit der Wahl des Tags zu tun. Ein Tag steht für die Bedeutung des Inhalts. Die Bedeutung ändert sich aber nicht durch das Layout. Beides hat nichts miteinander zu tun!

Corraggiouno schrieb:
aber ich kann doch den header nicht einfach weglassen. Dieser beinhaltet doch eine Graphik.
Zum Vergrößern anklicken....
Ich hab nie gesagt, dass Du etwas weglassen sollst. Du sollst etwas austauschen. Etwas bedeutungsloses durch etwas mit Bedeutung. Und Hintergundbilder kann man jedem(!) Element zuweisen, nicht nur divs, auch <address>, <h1> oder <em> können Hintergrundbilder bekommen!
 
Werbung:
Efchen schrieb:
Was meinst Du mit "4x4"? Denkst Du schon wieder ans Layout? Wenn Du etwas in HTML auszeichnest, denkst Du nicht ans Layout.
Zum Vergrößern anklicken....
nein, ich wollte mit 4 x 4 nur verdeutlichen, das die Firmen in 4 Zeilen und 4 Spalten anzuordnen sind!....
Kann ich dies mit einer Liste realisieren?
Und, wenn Du an Layout denkst bei "4x4", wie kommst Du dann auf Tabelle? Du weißt doch jetzt, dass man Layout nicht mit HTML (insb. Tabellen oder divs) macht, da kannst Du doch nicht auf eine Layoutfrage mit Tabellen antworten!
Zum Vergrößern anklicken....
Sorry, aber wie die Tabelle auszusehen hat, wie breit, hoch, mit oder ohne Rand........das gebe ich doch dann im CSS an!..und das ist doch dann das Layout, oder etwa nicht?.......................
z.B. ....hier wird doch auch eine Tabelle verwendet
http://www.steck-haustechnik.de/index_2.php?mn=3&id=partner&ct=partner
 
Zuletzt bearbeitet:
Corraggiouno schrieb:
nein, ich wollte mit 4 x 4 nur verdeutlichen, das die Firmen in 4 Zeilen und 4 Spalten anzuordnen sind!
Zum Vergrößern anklicken....
Das dachte ich mir, und das ist falsches Denken. Bei der Wahl des richtigen Tags ist es primär irrelevant, wie das anzuordnen ist.

Kann ich dies mit einer Liste realisieren?
Zum Vergrößern anklicken....
Natürlich. Gib der Liste eine feste Breite, ordne die einzelnen Listenelemente nebeneinander an, wenn der Platz nicht ausreicht, rutschen die nachfolgenden Elemtene in die nächste Zeile.

Sorry, aber wie die Tabelle auszusehen hat, wie breit, hoch, mit oder ohne Rand........das gebe ich doch dann im CSS an!..und das ist doch dann das Layout, oder etwa nicht?.
Zum Vergrößern anklicken....
Ich seh gerade den Zusammenhang nicht, aber wie eine Tabelle aussehen soll, das ist "Design", aber nicht "Layout". Aber das Aussehen oder "Design" gibst Du in CSS an, ja. Aber Layout mit Tabellen ist sinnfrei.

hier wird doch auch eine Tabelle verwendet
Steck & Partner GmbH Haustechnik
Zum Vergrößern anklicken....
Ja, und Du armer Kerl bist nun in der Zwickmühle, einen von uns beiden, mich oder den Webmaster dieser Site, als Experten, den anderen als Nichtskönner hinzustellen :-)

Und meine Antwort dazu dürfte auch klar sein.

Aber sieh Dir die Seite an. Sind das tabellarische Daten? Tabellarische Daten sind sowas wie die Tabellen einer Fußballiga. Das ist doch auf den ersten Blick schon was völlig anderes, als das hier. Das auf der verlinkten Seite ist eine Auflistung von Firmen, also eine Liste. Alles andere ist semantisch falsch.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben