PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS Ausrichtungsproblem mit float Attribut

Henrik
2006-01-29, 19:45:56
Hi

habe mit diesem CSS Layout Probleme:
www.brede10c.userhost.de/torwart

kopiere ich den Content, crasht das ganze Layout
www.brede10c.userhost.de/torwart/index2.html

Durch rumprobieren habe ich herausgefunden, dass das auf die Ausrichtung mittels CSS zurück geht:


.content_header {
background-image:url(img/linie_cont.png);
width:512px;
height:30px;
}

.content_pic {
width:100px;
padding:10px;
float:left;
}

.content_text {
float:right;
padding-top:10px;
width:375px;
font-size:0.8em;
text-align:justify;
}

Klammere ich die fett markierten Sachen werden alle Container schön sauber untereinander angeordnet.
Ich möchte aber, dass der Beschreibungstext rechts neben dem Bild floatet wie hier (http://www.brede10c.userhost.de/torwart)

Wie kriege ich das hin?

THX
Henrik
Nase
2006-01-30, 00:43:19
Jup, sieht ganz danach aus, als ob du float benutzt, ohne hinterher ein clear einzusetzen. Hab mir das jetzt mal ein wenig angeschaut ... meine Tipps für dich:

1. Es ist eigentlich recht hilfreich, am Anfang in den CSS-Anweisung ein * {
margin: 0;
padding: 0;
} einzufügen. Damit werden alle vorformatierten Abstände der Elemente eliminiert. Hilft hinterher ungemein.

2. Es ist zwar schön, eine Seite mit CSS zu designen. Das heißt aber nicht, dass man seinen ganzen Quelltext mit <div>s zupflastern sollte. Gerade bei diesem Newsteil sieht man das sehr schön. Du hast drei Boxen, wo du eigentlich mit einer auskommen könntest.

Ich hab mal ein wenig daran rumgefummelt. Ist zwar auch alles andere als optimal, aber naja ... Vielleicht gefällts ja.

CSS-Part#content_main {
width: 512px;
margin-left:180px;
margin-top:50px;
}

.content_header {
background-image:url(img/linie_cont.png);
height:30px;
}

.content_text {
padding-top:10px;
font-size:0.8em;
text-align:justify;
}HTML-Part
<div class="content_header"><h2 style="">Überschrift</h2></div>
<div class="content_text">
<img style="float: left;" src="spieler_optimiert3_02.jpg" alt="">
Und hier erscheint (dann hoffentlich passend zum Bild) dann ein netter kleiner Teaser, gerne auch mit weiter-Button.<br>Zeilenumbrüche sind hier übrigens auch kein Problem.
<br style="clear: left;">
</div>Das, was du als content_header bezeichnest, kannst du dir im Grunde auch schenken, wenn du die Anweisungen direkt auf das <h2> beziehst und am besten noch in die content_text-Box eipflegst. Die CSS-Anweisungen habe ich jetzt direkt in den Code geschrieben. Die sollte man dann noch auslagern.
Henrik
2006-01-30, 17:44:51
Funktioniert besser, aber auch nicht richtig:

hab's jetzt durch Trickserei (margin-top:-150px; bei der 2. Contentbox) richtig ausgerichtet, aber das kann ja nicht Sinn der Sache sein
www.brede10c.userhost.de/torwart/index3.html

/edit: es gibt noch weitere Fehler: der Hintergrund (grauer Balken rechts) soll auf Höhe Navi/des Contents beginnen und nicht in den Header reinlaufen.

/edit2: mein Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>Torwart.de - Newsletter</title>
<meta name="author" content="Henrik Hagedorn (c) 2006">
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}


body {
font-family:Verdana, sans-serif;
}

h2 {
padding-left:40px;
padding-top:10px;
font-size:1em;
}

#hauptcontainer {
width:800px;
margin:0px auto;
background-image:url(img/bg.png);
background-repeat:repeat-y;
background-position: 15px 50%;
}

#header {
background-image:url(img/header.png);
width:800px;
height: 126px;
}

#header_h1 {
display:none;
}

#trlinie {
margin-top:20px;"
}

#trlinie_li {
background-image:url(img/linie_li_eck.png);
width:79px;
height:29px;
float:left;
}

#trlinie_mi {
background-image:url(img/linie_mitte.png);
width:*px;
height:29px;
text-align:right;
color:#666;
font-size:0.7em;
font-weight:bold;
}

a:link, a:visited, a:active, a:hover {
text-decoration:none;
font-weight:bold;
color:#666;
font-size:0.55em;
text-transform:uppercase;
/*margin-left:10px;*/
}

#navi_haupt {
float:left;
margin-top:15px;
height:400px;
}

#navi_top {
background-image:url(img/navi_top.png);
width:150px;
height:17px;
}

#navi_mid {
background-image:url(img/navi_mid.png);
width: 150px;
height:100%;
}

hr {
margin-top:7px;
margin-bottom:7px;
}

#navi_end {
background-image:url(img/navi_end.png);
width: 150px; height:39px;
margin-top:-10px;

}

.navi_link {padding-left:10px;}

#content_main {
width: 512px;
margin-left:180px;
margin-top:50px;
}

.content_header {
background-image:url(img/linie_cont.png);
height:30px;
/*margin-top: 50px;*/
}

.content_text {
padding-top:10px;
font-size:0.8em;
text-align:justify;
}

//-->
</style>
</head>
<body>

<!-- Hauptcontainer -->
<div id="hauptcontainer">

<!-- Header Grafik -->
<div id="header"><h1 id="header_h1">Torwart.de - Newsletter</h1></div>
<!-- gelbe Trennlinie -->
<div id="trlinie">
<div id="trlinie_li"></div>
<div id="trlinie_mi">Ausgabe 02: Februar 2006</div>
<!--<div style="background-image:url(img/linie_re_eck.png); width:17px; height:29px; float:right;"></div>-->
</div>

<!-- Navigation -->
<div id="navi_haupt">
<div id="navi_top"></div>
<div id="navi_mid">
<!-- hier Navigationspunkte einsetzen -->
<div class="navi_link"><a href="http://www.torwart.de">aktuelle Torwartnews</a></div><hr>
<div class="navi_link"><a href="http://www.torwart.de">torwart.de-Forum</a></div><hr>
<div class="navi_link"><a href="http://www.torwart.de">Grundtechniken des Torwarts</a></div><hr>
<div class="navi_link"><a href="http://www.torwart.de">Torwarttraining</a></div><hr>
<div class="navi_link"><a href="http://www.torwart.de">Bundesligatorhüter</a></div><hr>
<div class="navi_link"><a href="http://www.torwart.de">Produkttechnologien</a></div><hr>
<div class="navi_link"><a href="http://www.torwart.de">Torwart.de-Shop</a></div><hr>
</div>
<div id="navi_end"></div>
</div> <!-- Ende Navigation -->

<!-- Content -->
<div id="content_main">
<div class="content_header"><h2 style="">Überschrift</h2></div>
<div class="content_text"><img style="float: left; padding-right:10px;" src="http://img25.imageshack.us/img25/5219/blind8nx.gif" alt="">Und hier erscheint (dann hoffentlich passend zum Bild) dann ein netter kleiner Teaser, gerne auch mit weiter-Button.<br>Zeilenumbrüche sind hier übrigens auch kein Problem. <br style="clear: left;"></div>

<div class="content_header"><h2 style="">Überschrift</h2></div>
<div class="content_text"><img style="float: left; padding-right:10px;" src="http://img25.imageshack.us/img25/5219/blind8nx.gif" alt="">Und hier erscheint (dann hoffentlich passend zum Bild) dann ein netter kleiner Teaser, gerne auch mit weiter-Button.<br>Zeilenumbrüche sind hier übrigens auch kein Problem. <br style="clear: left;"></div>

<div class="content_header"><h2 style="">Überschrift</h2></div>
<div class="content_text"><img style="float: left; padding-right:10px; " src="http://img25.imageshack.us/img25/5219/blind8nx.gif" alt="">Und hier erscheint (dann hoffentlich passend zum Bild) dann ein netter kleiner Teaser, gerne auch mit weiter-Button.<br>Zeilenumbrüche sind hier übrigens auch kein Problem. <br style="clear: left;"></div>

<div class="content_header"><h2 style="">Überschrift</h2></div>
<div class="content_text"><img style="float: left; padding-right:10px;" src="http://img25.imageshack.us/img25/5219/blind8nx.gif" alt="">Und hier erscheint (dann hoffentlich passend zum Bild) dann ein netter kleiner Teaser, gerne auch mit weiter-Button.<br>Zeilenumbrüche sind hier übrigens auch kein Problem. <br style="clear: left;"></div>

<div class="content_header"><h2 style="">Überschrift</h2></div>
<div class="content_text"><img style="float: left; padding-right:10px;" src="http://img25.imageshack.us/img25/5219/blind8nx.gif" alt="">Und hier erscheint (dann hoffentlich passend zum Bild) dann ein netter kleiner Teaser, gerne auch mit weiter-Button.<br>Zeilenumbrüche sind hier übrigens auch kein Problem. <br style="clear: left;"></div>

<div class="content_header"><h2 style="">Überschrift</h2></div>
<div class="content_text"><img style="float: left; padding-right:10px;" src="http://img25.imageshack.us/img25/5219/blind8nx.gif" alt="">Und hier erscheint (dann hoffentlich passend zum Bild) dann ein netter kleiner Teaser, gerne auch mit weiter-Button.<br>Zeilenumbrüche sind hier übrigens auch kein Problem. <br style="clear: left;"></div>
</div> <!-- ende content-main -->

</div> <!-- Ende Hauptcontainer -->
</body>
</html>
Henrik
2006-01-30, 19:19:28
Ich habe die Seite gerade im Internetexplorer geöffnet, das gibt ja einen Totalschaden :eek:

OMG ich werd noch wahnsinning... ich schreib das ganze gleich neu in Tabellen :D oder frames... HAHA :D ;(
Nase
2006-01-30, 23:05:38
Ich habe die Seite gerade im Internetexplorer geöffnet, das gibt ja einen Totalschaden :eek:

OMG ich werd noch wahnsinning... ich schreib das ganze gleich neu in Tabellen :D oder frames... HAHA :D ;(
Eine überdachtere Struktur wäre vielleicht besser. Sorry, dass ich das jetzt so platt sage. Aber du kannst dir viele Probleme ersparen, indem du einen Haufen der divs weglässt und auf die richtigen HTML-Tags zurückgreifst. Z.B. kannst du das Menü komplett aus einer Liste machen. Wenn ich Zeit finde, geb ich dir dazu mal ein Beispiel.
Henrik
2006-02-01, 19:47:04
Ich habe es nach deinen Tips kurzerhand neugeschrieben:

http://www.brede10c.userhost.de/torwart/index_neu.html

Funktioniert jetzt auch auf IE6 und Firefox, bei letztem allerdings mit ein paar Einschränkungen: in der Navigation rücken die Trennlinien falsch auseinander (der Hintergrund sollte durchgehend sein)

Zudem funktioniert der Hintergrund - der graue Balken rechts, der auf http://www.brede10c.userhost.de/torwart/index_3.html noch zu sehen ist (da aber auch falsch), wird jetzt gar nicht angezeigt.

Ein weiteres Problem: die Höhe der Navigation muss fest angegeben werden, wenn das Hintergrundmuster bis zum Ende der Seite fortgesetzt werden soll.
Ich möchte aber, dass die Höhe automatisch mit dem Content mitzieht und umgekehrt die Navigation nicht zerstört wird, wenn die Höhe des Contents niedriger ist als die Navigation.

Danke schonmal für eure Hilfe!
Henrik
Nase
2006-02-03, 18:49:31
Ok, hab mal ein bisschen was probiert. Leider kann ich nicht testen, wie es sich im IE6 verhält. Im Firefox und IE7 sieht es aber gleich aus. Was noch fehlt: Die Überschrift über dem Menü, die Überschrift über den Nachrichten. Kleiner Bug, der in den meisten Fällen auftreten wird: Die Abschlussgrafik des Menüs (Menüleiste ganz unten) wird ein versetztes Hintergrundmuster aufweisen, was aber aufgrund der sehr hellen Farbe nicht auffallen dürfte. Die Bilder - ohne das Logo - findest du im Anhang.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>torwart.de</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--

* {
margin: 0;
padding: 0;
}

html {
font-size: 101%;
}

#logo {
background: url(gfx/logo.png) no-repeat;
height: 129px;
margin: 0 auto;
width: 800px;
}

#logo span {
display: none;
}

.zentriert {
margin: 0 auto;
width: 800px;
}

#hauptteil {
background: url(gfx/menue_hintergrund.png) repeat-y;
}

ul {
float: left;
list-style-type: none;
width: 150px;
}

li {
border-bottom: 1px #969594 solid;
}

ul li a {
background: url(gfx/menue_pfeil.png) no-repeat left 50%;
display: block;
font-size: 0.8em;
margin-left: 4px;
padding: 5px 0px 5px 24px;
text-decoration: none;
}

ul li a:link, ul li a:visited {
color: #383f8d;
}

ul li a:hover {
color: #000;
}

#inhalt {
border-right: 30px #f4f2ee solid;
float: right;
padding: 10px 10px 10px 0px;
width: 580px;
}

.nachrichtenbox {
margin-bottom: 20px;
margin-right: 30px;
text-align: justify;
}

.nachrichtenbox h1 {
background: url(gfx/nachrichtenbox_ueberschrift_pfeil.png) no-repeat left bottom;
border-bottom: 1px #a6aebe solid;
font-size: 0.9em;
height: 30px;
padding-left: 30px;
}

.nachrichtenbox img {
float: left;
}

p#hinweis {
border-top: 1px #f6c42f solid;
}

.ausrichten_links {
clear: left;
}

#ausrichten_beide {
clear: both;
}

#fuss {
background: url(gfx/menue_abschluss.png) repeat-y;
height: 30px;
}

-->
</style>

</head>

<body>

<div id="logo"><span>torwart.de - Blablabla</span></div>

<div class="zentriert" id="hauptteil">

<ul>
<li><a href="#">Menue</a></li>
<li><a href="#">Menue</a></li>
<li><a href="#">Menue</a></li>
<li><a href="#">zweizeiliger Menuepunkt</a></li>
<li><a href="#">Menue</a></li>
</ul>

<div id="inhalt">

<div class="nachrichtenbox">
<h1>Ueberschrift</h1>
<img src="gfx/nachrichtenbox_beispielbild.png" alt="Beispielbild" title="Beispielbild">
<p>Die Eröffnung des WM-Jahres beginnt mit einem Paukenschlag. Die neuen Handschuhe der Puma-Kollektion
2006 sind ab sofort ...</p>
<p><a href="#">mehr >></a></p>
<br class="ausrichten_links">
</div>

<div class="nachrichtenbox">
<h1>Ueberschrift</h1>
<img src="gfx/nachrichtenbox_beispielbild.png" alt="Beispielbild" title="Beispielbild">
<p>Die Eröffnung des WM-Jahres beginnt mit einem Paukenschlag. Die neuen Handschuhe der Puma-Kollektion
2006 sind ab sofort ...</p>
<p><a href="#">mehr >></a></p>
<br class="ausrichten_links">
</div>

<div class="nachrichtenbox">
<h1>Ueberschrift</h1>
<img src="gfx/nachrichtenbox_beispielbild.png" alt="Beispielbild" title="Beispielbild">
<p>Die Eröffnung des WM-Jahres beginnt mit einem Paukenschlag. Die neuen Handschuhe der Puma-Kollektion
2006 sind ab sofort ...</p>
<p><a href="#">mehr >></a></p>
<br class="ausrichten_links">
</div>

<div class="nachrichtenbox">
<h1>Ueberschrift</h1>
<img src="gfx/nachrichtenbox_beispielbild.png" alt="Beispielbild" title="Beispielbild">
<p>Die Eröffnung des WM-Jahres beginnt mit einem Paukenschlag. Die neuen Handschuhe der Puma-Kollektion
2006 sind ab sofort ...</p>
<p><a href="#">mehr >></a></p>
<br class="ausrichten_links">
</div>

<div class="nachrichtenbox">
<p id="hinweis">Falls ihr euch vom Newsletter abmelden möchtet, sendet bitte eine E-Mail an ...</p>
</div>

</div>

<br id="ausrichten_beide">

</div>

<div class="zentriert" id="fuss"></div>

</body>
</html>