✔ zeilenumbruch bei Überschrift im falschen <div>

Status
Nicht offen für weitere Antworten.
1

123arne

Mitglied
Hallo,
ich hab ein Seitendesign mit mehreren verschachtelten div.
Das Erste um die Seite zu zentrieren, dann kommen mehrere für den Seiteninhalt. Im Zweiten Div ist eine Überschrift, die ja einen Zeilenumbruch vor und hinter sich haben. Wäre ja auch gewollt, wenn der Zeilenumbruch nicht im übergeordneten div wäre und eine hässliche Lücke hinterlassen würde.
Wie kann ich das ändern?

Gruß Arne

HTML: 
<div id="page">
        
    <div id="header">
    <img class="logo_left" src="img/sonblume.gif" > <h1>Meine Überschrift </h1> <img class="logo_right" src="img/sonblume.gif" >
    </div>    </div>
HTML: 
body {
    text-align: center;
    background-color: #E6EFFF;
}

#page {
    width:800px;
    padding: 0px; 
    border: 1px dashed #b9821a; 
    margin: 5% auto 5% ; 
    height:90%;
    text-align:left;
}

#header {
    background-color:#0066CC;
    position:relative;
    text-align:center;
    height: 80px;
    margin:0px;
}

#content {
    position:relative;
    background-color:#CCCCCC;
    height:500px;
    padding:20px;
}


#header h1 {
    margin:0px;
    padding:0px;
}
 
Hi,

das Einzige, was mir derzeit auffällt, ist, dass der Header wegen seiner festen Höhenangabe nicht alle drei enthaltenden Elemente umschliesst.

Oder von welcher Lücke sprichst du?
 
Zwischen dem Rahmen des page-<div> und dem header-<div> ist eine leere Zeile, dann erst beginnt das header-div und die Überschrift klemmt ganz oben beim Rand.
Allerdings nur beim Firefox, beim IE ist die kein Platz dazwischen.

Gruß
Arne
 
Tut mir leid, aber ich kann da derzeit im FF keine Lücke zwischen dem Header und oberen Rand des DIVs page entdecken. :confused:
 
Bei mir ist da eine Lücke, allerdings nur wenn der Text eine Überschrift ist. Bei normalen Text nicht. Die Überschrift sitzt in dem blauen div, die Lücke ist in dem übergeordneten div.

siehe angehängte Grafik

Gruß
Arne
 

Anhänge

  • screen.jpg
    screen.jpg
    33,4 KB · Aufrufe: 32
Hi,

zeig doch bitte mal den vollständigen Quellcode (HTML + CSS) der Seite, damit man der Ursache auf den Grund gehen kann, denn anhand der gezeigten Code-Schnipsel kann ich die Lücke, wie gestern schon erwähnt, nicht reproduzieren, da ja mit

Code: 
#header h1 {
    margin:0px;
    padding:0px;
}
die Polsterungseigenschaften des h1-Elements auf null gesetzt sind.

Wie lauten denn beispielsweise die CSS-Formatierungen für die Klassen logo_left und logo_right, die schliesslich auch noch im Header eingebunden sind?
 
Hmm, Fehler hat sich erledigt. Hatte ne falsche Bezeichnung in der div-Bezeichnung, so dass
Code: 
#header h1 {
    margin:0px;
    padding:0px;
}
nicht zum Zuge kam.
Bleibt trotzdem die Frage warum der Zeilenumbruch des h1-Elements im übergeordneten div-Container ist?

und zum Nachvollziehen der komplette Quelltext mit Fehler.

HTML: 
<!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" />
<title>H&auml;usliche Krankenpflege Karin K&ouml;hn</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="page">
        
        <div id="head">
                <img class="logo_left" src="img/sonblume.gif" alt="logo" width="80" height="80">
<h1> Meine &Uuml;berschrift </h1> 
<img class="logo_right" src="img/sonblume.gif" alt="logo" width="80" height="80">

             
        </div>
        








<div class="menubar"><span class="menu_item"><a href="start.php">Startseite</a></span>&nbsp;&middot; <span class="menu_item"><a href="ueber_uns.php">Über Uns</a></span>&nbsp;&middot; <span class="current_menu_item">Leistungen</span>&nbsp;&middot; <span class="menu_item"><a href="kontakt.php">Kontakt</a></span>&nbsp;&middot; <span class="menu_item"><a href="index.php?page=seite4">Impressum</a></span></div>
        <div id="content">
            <link href="../style.css" rel="stylesheet" type="text/css" />

<div id="box">
    <a href="#">INFOBOX
        <span>All each tun! Gundherzl ich englück. Wunsch siege "hör enzu" denwen. Igenau ser wähl, Tendie heraus. Gef und enha, Bendass 
        diesk eing ewöhn, li cherbl Indtex tist. Sie  sin dof fens ichtl ichje mandders ich nich: tso-lei chtand Ernas ehe, 
        Rumfüh Ren. Lässt ei nerder mi tal Lenwas sern gew asch: Enis tein alt, er Hase sozu sag. Enund sieha Benwie der ei 
        Nmal Denricht igenrie Cher ge? Habtdenntats ächl ichverb. Irgt si chin (dies Enbel anglo) sersch einend enz. 
        Eilen einebotsch, aftei, negehei, menach richtdiesichnur. Dengew it ztes tenunt, erdenbet racht ern, Beinä he remhin seh en. 
        Ersch liesst: Manmuss scho neinziem li cher trott elsei. Nund nix Gesch ei tes. Mitsei nemle benanzu "fang", en wis senumb lind? 
        Tex tezu le sen.        </span>    </a>

    <a href="#">INFOBOX2
        <span>All each tun! Gundherzl ich englück. Wunsch siege "hör enzu" denwen. Igenau ser wähl, Tendie heraus. Gef und enha, Bendass 
        diesk eing ewöhn, li cherbl Indtex tist. Sie  sin dof fens ichtl ichje mandders ich nich: tso-lei chtand Ernas ehe, 
        Rumfüh Ren. Lässt ei nerder mi tal Lenwas sern gew asch: Enis tein alt, er Hase sozu sag. Enund sieha Benwie der ei 
        Nmal Denricht igenrie Cher ge? Habtdenntats ächl ichverb. Irgt si chin (dies Enbel anglo) sersch einend enz. 
        Eilen einebotsch, aftei, negehei, menach richtdiesichnur. Dengew it ztes tenunt, erdenbet racht ern, Beinä he remhin seh en. 
        Ersch liesst: Manmuss scho neinziem li cher trott elsei. Nund nix Gesch ei tes. Mitsei nemle benanzu "fang", en wis senumb lind? 
        Tex tezu le sen.        </span>    </a>
        
</div>
 
        </div>

        <div id="footer">
            <br />Fussbereich
        </div>        
        
    </div>
</body>
</html>
Code: 
body {
    text-align: center;
    background-color: #E6EFFF;
}

#page {
    width:800px;
    padding: 0px; 
    border: 1px dashed #b9821a; 
    margin: 5% auto 5% ; 
    height:90%;
    text-align:left;
}
/******************** Aussehen des Seitenkopfes ********************/
#header {
    background-color:#0066CC;
    position:relative;
    text-align:center;
    height: 82px;
    margin:0px;
}

#content {
    position:relative;
    background-color:#CCCCCC;
    height:500px;
    padding:20px;
}


#header h1 {
    margin:0px;
    padding:0px;
    display:inline; 
}

.logo_left {
    position:absolute; top:0px; left:0px;
    border:0px;
    margin:0px;
}

.logo_right {
    position:absolute; top:0px; right:0px;
    clear:both;

    border:0px;
    margin:0px;
}


/****************** menüStyle *******************/

.menubar {
    clear:both;
    text-align:right;

    color: #203111;
    font: 700 normal 11pt sans-serif;
    border: 0px solid black;
    padding: 0.1em;
    background-color: #0099FF;
}

.menu_item {
/*    margin: 0.5em 0px;*/
    padding: 0.1em;
    border: none;
}
.menu_item A:link, .menu_item A:visited, .menu_item A:active {
    text-decoration: none;
}
.menu_item A:link { color: #DEE6F7; }
.menu_item A:visited { color: #A5BDDE; }
.menu_item A:active { color: rgb(250, 250, 255); }

.current_menu_item {
    color: rgb(0, 0, 0);
    background-color: #CC3300;
    font-weight: 800;
/*    margin: 0.5em 0px;*/
    padding: 0.1em;
}

/****************** leistungen box infostyle ********************/
#box {
    /*    margin-top:50px;*/
 
    top:50px;
    left:50px;
    border-left-color: #FF0000;
    border-left-width: 5px;
    
}

#box a {
    text-decoration:none;
    display:block;
    width:150px;
    border:1px solid black;
    margin: 2px;
    text-align: right;
}

#box a:hover {
color:black;
background:#ddd8b7;
}

#box a span {display:none;}

#box a:hover span {
position: absolute; top:50px; right:50px; z-index:3;

display:block;
width:400px;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
text-align:justify;
border:1px solid black;
padding:10px;}

#box a:active span {
position: absolute; top:50px; right:50px; z-index:3;

display:block;
width:400px;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
text-align:justify;
border:1px solid black;
padding:10px;}
 
Klar, wenn die ID-Namen nicht übereinstimmen, kann die Kaskade auch nicht greifen.

Warum die Browser nun das umschliessende DIV mit nach unten ziehen, anstelle den unerwünschten Zeilenumbruch innerhalb des DIVs vorzunehmen, kann ich dir auch nicht plausibel erklären.
 
ja, war wohl doof schusselig, die id's zu vertauschen. Sorry ! war wohl etwas lang der Tag.

Der Zeilenumbruch an sich würde mich nicht mal stören, wenn der im richtigen div wäre. In welchen Browsern es wie angezeigt wird würde mich mal interessieren.

Nu gut, vielen Dank jedenfalls für die Mühe
Gruß
Arne
 
Ich kann das Verhalten in allen Browsern, außer im IE, feststellen - also im Firefox, Konqueror, Mozilla, Netscape, Opera, Safari und Sea Monkey.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück