#container verschiebt sich nach clear:both; nach unten

[gal...]

Hallo,

habe mich nun mal ein bisschen mit TYPOlight auseinandergesetzt und bin bisher sehr positiv überrascht!

Nur habe ich jetzt ein Problem mit dem CSS.
Ich habe das Standard-Template so eingestellt, dass nur der Header, die Main-Spalte und der Footer angezeigt werden. Im Header befindet sich das Logo und die Navigation die mit float: left; und float: right; nebeneinander positioniert werden. Allerdings ist dann der Bereich .mod_article ein Stück nach rechts verschoben. Gebe ich bei #container clear: both; an verschwindet dies zwar, jedoch verschiebt sich der div #container ein ganzes Stück nach unten.
Wie könnte ich dieses Problem beheben?

Habe CSS angefügt:

body{background-color:#151515;font-family:Arial, Helvetica, sans-serif;font-size:0.8em;color:#eeeeee;}
#header .logo{width:88px;height:270px;float:left;}
#header .mod_navigation{float:right;}
#header .mod_navigation .level_1{margin:28px 0;list-style-type:none;}
#header .mod_navigation .level_1 li{float:left;margin:0 3px;font-size:0.8em;}
#header .mod_navigation .level_1 li span.active{display:block;padding:10px 5px;background-color:#eeeeee;text-decoration:none;color:#151515;}
#header .mod_navigation .level_1 li a{display:block;padding:10px 5px;text-decoration:none;color:#eeeeee;}
#header .mod_navigation .level_1 li a:hover{background-color:#eeeeee;color:#151515;}
.ce_text h1{margin:0;padding:0;text-align:right;font-size:3.5em;}

[schman]

hast du zufällig ein Link dann könnte man das einfacher testen?

Normalerweise musst du gar nichts clearen das übernimmt die Klasse block (overflow:hidden).

[gal...]

leider net, hab das lokal getestet...

also wenn ich net cleare, dann verschiebt sich #container ca. 100px nach rechts, warum auch immer...

hoffe man kann mir trotzdem helfen

mfg,
galant

[schman]

wie sieht denn der generierte HTML Code aus?

[gal...]

<div id="wrapper">

<div id="header">
<div class="inside">

<div class="logo">
  <a href="index.php" title="ЯQ | reqlam .web .design .print">
    <img src="tl_files/layout/logo.png" alt="ЯQ | reqlam .web .design .print" />

  </a>
</div>
<!-- indexer::stop -->
<div class="mod_navigation block">

<a href="#skipNavigation1" class="invisible">Navigation überspringen</a>

<ul class="level_1">
<li class="active first"><span class="active first">.STARTSEITE</span></li>
<li><a href="index.php/agentur.html" title=".AGENTUR">.AGENTUR</a></li>
<li><a href="index.php/leistungen.html" title=".LEISTUNGEN">.LEISTUNGEN</a></li>
<li><a href="index.php/referenzen.html" title=".REFERENZEN">.REFERENZEN</a></li>

<li class="last"><a href="index.php/kontakt.html" title=".KONTAKT" class="last">.KONTAKT</a></li>
</ul>
 
<a name="skipNavigation1" id="skipNavigation1" class="invisible">&nbsp;</a>

</div>
<!-- indexer::continue -->
 
</div>
</div>

<div id="container">

<div id="main">
<div class="inside">

<div class="mod_article block" id="startseite">

<div class="ce_text block">

<h1>.STARTSEITE</h1>

<p>Herzlich Willkommen bei reqlam!</p>

</div>

</div>
 
</div>
 
<div id="clear"></div>

</div>

</div>

<div id="footer">
<div class="inside">
&nbsp; 
</div>
</div>

<!-- indexer::stop -->
<img src="http://localhost/typolight/cron.php" alt="" class="invisible" />
<!-- indexer::continue -->

</div>

[gal...]

sry, dass ich nochmal pushe...

[Juke]

Hallo Galant,

Wenn du dem #container ein clear:both; gibst, legt er sich unter div.logo weil das 270px hoch ist.
Gibst du ihm kein clear: both; legt sich #container neben div.logo und weil das 88px breit ist, erscheint der Text 88px nach rechts versetzt.

Gibt mal deinen divs eine Hintergrundfarbe, dann siehst du genauer was los ist.

Beste Grüße
Jutta

[neueplaneten]

Floats sind immer schwebende Elemente, alle folgenden richten sich dann nach dem Platz aus, der übrig ist. Jeder Text usw. befindet sich dann neben dem Float und fließen dann unterhalb des Floats weiter (Höhe des Floats). Floats werden ja auch aus dem vertikalen Fluss herausgenommen, ähnlihc wie bei position:absolute;, nur halt, dass alle anderen Elemente um ihm herum fließen.

Cleart man floats, richtet sich das geclearte Element unterhalb an dem längsten vorangegangen Float aus, würdest Du aber dem #header .inside noch ein overflow:hidden geben, umschließt dieser dein Logo und die Navi und der Text/Inhalt aus dem #container würde dort nicht hineinschlüpfern.

#header .inside{
overflow:hidden;
}

Oder du wählst die clearfix-Methode für #header .inside und gibts den Div die Klasse clearfix.

<div id="header">
    <div class="inside clearfix">

http://www.positioniseverything.net/easyclearing.html

http://perishablepress.com/press/200...rfix-css-hack/

Wenn es sich um ein Logo handelt, solltest du es lober folgend machen.

<!-- Information zum Seitenbetreiber für Suchmaschinen und Screenreader -->
<h1 id="site">{{env::website_title}} - {{env::page_name}}</h1>
<!-- Logo -->
<img id="logo" src="Qulle" alt="Website - Logo" width="88" height="270" />

Siehe Inserttags "{{env::website_title}} - {{env:age_name}}" http://www.contao.org/inserttags.html

<!-- Information zum Seitenbetreiber für Bildschirm ausblenden -->
#site{
display:none;
}
#logo{
 float:left;
}

Das Beispiel ist auch im Sinne der Barrierfreiheit, zumindest ein Ansatz und der größte blinde Besucher ist die Suchmaschine

[MacKP]

<!-- Information zum Seitenbetreiber für Bildschirm ausblenden -->
#site{
display:none;
}
#logo{
 float:left;
}

Das Beispiel ist auch im Sinne der Barrierfreiheit, zumindest ein Ansatz und der größte blinde Besucher ist die Suchmaschine

Äh, genau das ist für Barrierefreiheit nicht richtig so und auch für Suchmaschinen nicht, da diese beiden Nutzergruppen alles was display:none bekommt gar nicht 'zu sehen' bekokmmt.

Genau deswegen ist bei der music-academy (Beispielinstall von Contao) das ganze Ausblenden so gemacht:

.invisible{width:0px;height:0px;left:-1000px;top:-1000px;position:absolute;overflow:hidden;display:inline;}

Alles was nicht sichtbar sein soll wird aus dem Sichtbaren Bereich gerückt.
Das wird dann für Screenreader wieder angezeigt.

Viele Grüße