Du befindest Dich im Archiv vom ABAKUS Online Marketing Forum. Hier kannst Du Dich für das Forum mit den aktuellen Beiträgen registrieren.

CSS 3-Spalten layout: Probleme mit Float bzw. clear

Ajax, Hijax, Microformats, RDF, Markup, HTML, PHP, CSS, MySQL, htaccess, robots.txt, CGI, Java, Javascript usw.
Neues Thema Antworten
Synonym
PostRank 10
PostRank 10
Beiträge: 3708
Registriert: 09.08.2008, 02:55

Beitrag von Synonym » 07.10.2009, 11:09

Hallo zusammen,

gestern gab es ja schon einen Thread zu dem Thema, aber mein Problem trifft das leider nicht.

Derzeit verwende ich eigentlich das Grundgerüst von https://de.selfhtml.org/css/layouts/meh ... #kopf_fuss

Soweit funktioniert das auch mit nur einer Ausnahme.

Im mittleren Bereich (Content) gibt es teilweise kleine Container die floaten (z.B. Bilder mit Text). Das funktioniert auch noch. Innerhalb dieser kleinen Boxen, unterhalb des Bilder soll jedoch eine extra Zeile Text stehen. Damit die extra Zeile nicht eventuell durch das Float neben das Bild rutsch verwende ich daher ein clear:left. Soweit so gut. Aber das ist genau das Problem das sich nur schwer erklären lässt.

Sobald in der mittleren Spalte ein "clear" kommt (egal welches), dann wird das zwar durchgeführt, aber der weitere Inhalt erscheint dann erst genau auf Höhe vom Ende der linken Spalte, aber dennoch in der Mitte. Also so in etwa als ob da ein padding-top:400px vorhanden wäre, ist es aber nicht.

Danach ist dann alles normal. Diese Problem mit dem Clear gibt es nur im Bereich zwischen Anfang und Ende der linken Spalte.

So, viel geschrieben und doch nicht viel gesagt :roll: Hat einer einen Tipp? Nach 3 Tagen hin und her weiß ich nun echt nicht mehr weiter.

Anzeige von ABAKUS

von Anzeige von ABAKUS »


Hochwertiger Linkaufbau bei ABAKUS:
  • Google-konformer Linkaufbau
  • nachhaltiges Ranking
  • Linkbuilding Angebote zu fairen Preisen
  • internationale Backlinks
Wir bieten Beratung und Umsetzung.
Jetzt anfragen: 0511 / 300325-0

mgutt
PostRank 10
PostRank 10
Beiträge: 3206
Registriert: 08.03.2005, 13:13

Beitrag von mgutt » 07.10.2009, 11:10

Da kann man nur helfen, wenn Du den Code auf das Minimum komprimierst und hier zum Anschauen / selber testen bereitstellst.
Ich kaufe Dein Forum!
Kontaktdaten

Lord Lommel
PostRank 10
PostRank 10
Beiträge: 3227
Registriert: 18.02.2008, 02:43
Wohnort: Halle / Saale

Beitrag von Lord Lommel » 07.10.2009, 11:24

Hast du vielleicht das Doctype vergessen ?

Anzeige von ABAKUS

von Anzeige von ABAKUS »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:
  • einzigartige Texte
  • suchmaschinenoptimierte Inhalte
  • eine sinnvolle Content-Strategie
  • Beratung und Umsetzung
Jetzt anfragen: 0511 / 300325-0

Synonym
PostRank 10
PostRank 10
Beiträge: 3708
Registriert: 09.08.2008, 02:55

Beitrag von Synonym » 07.10.2009, 11:25

Hi,
also den ganzen Code mal in Kurzfassung mache ich gerade fertig. Doctype ist vorhanden.

turgay
PostRank 4
PostRank 4
Beiträge: 196
Registriert: 02.04.2005, 01:17

Beitrag von turgay » 07.10.2009, 11:30

Versuch mal ein

Code: Alles auswählen

overflow: hidden
einzubauen.

Hat schon so manch verzwickte float-Konstruktion gerettet.

mano_negra
PostRank 9
PostRank 9
Beiträge: 2812
Registriert: 23.07.2009, 15:29
Wohnort: la luna

Beitrag von mano_negra » 07.10.2009, 11:40

deshalb liebe ich tabellen :lol:

Synonym
PostRank 10
PostRank 10
Beiträge: 3708
Registriert: 09.08.2008, 02:55

Beitrag von Synonym » 07.10.2009, 11:46

So, der Code ist gekürzt, hoffe nur kurz genug. Hatte nun schon viele verschiedene Versionen und immer das gleiche Problem. Auch das Bild samt den Text in einen extra Container zu packen und die extra Zeile darunter bringt nichts.

P.S. das mit dem overflow versuche ich gleich mal, denn das hatte ich noch nicht...

Also hier mal der Code

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style media="screen" type="text/css">
body &#123;
width&#58; 100%;
margin&#58; 0;
&#125;

#main &#123;
min-width&#58; 760px;
max-width&#58; 1024px;
height&#58; 100%;
border-right&#58;1px solid #aaa;
border-bottom&#58;1px solid #aaa;
background-color&#58;#ddd;
position&#58;relative;
&#125;


#header &#123;
padding&#58; 0;
height&#58; 95px;
background-color&#58;#FFF;
&#125;
   
#topline, #footer &#123;
background-color&#58; #aaa;
padding&#58; 0;
height&#58; 18px;
clear&#58;both;
&#125;

#inhalt &#123;
margin-left&#58; 190px;
margin-right&#58; 180px;
padding&#58; 10px;
background-color&#58;#FFF;
border&#58;1px solid #000;
position&#58;relative;
&#125;

#content &#123;
width&#58; 100%;
position&#58;relative;
&#125;

#links &#123;
background-color&#58;#ddd;
width&#58; 180px;
float&#58; left;
margin-top&#58; 10px;
margin-left&#58; 5px;
margin-right&#58; 5px;
&#125;

#rechts &#123;
background-color&#58;#ddd;
width&#58; 170px;
float&#58; right;
margin-top&#58; 10px;
margin-right&#58; 3px;
&#125;

.ukliste &#123;
background-color&#58; #FFFFFF;
line-height&#58;18px;
border-bottom&#58; 1px solid #000;
padding-bottom&#58; 10px;
padding-top&#58; 5px;
position&#58; relative;
&#125;

.ukliste&#58;hover &#123;
background-color&#58;#E6E6E6 !important;
&#125;

.thumb &#123;
border&#58; 1px solid #000;
float&#58; left;
padding&#58; 3px;
margin&#58; 5px 5px 5px 0px;
position&#58; relative;
background&#58; #FFFFFF;
&#125;
</style>

</head>


<body>
<div id="main"> <!-- für Breitenanpassung -->
<div id="header"></div>
<div id="topline">Inhalt von Topline</div>


<div id="links">
Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte
</div> <!-- !links -->


<div id="rechts">
Inhalt der rechten Spalte
</div> <!-- !rechts -->


<div id="inhalt">
  <div id="content">
  <h1>Überschrift</h1>
  
  <div class="ukliste"><img class="thumb" src="http&#58;//www.google.de/logos/chinanatlday60.gif" width="100" height="75" />

  <h3>Überschift H3</h3><p>Dieser Text umläuft das Bild. Die Länge ist variabel. Von sehr lang bis sehr kurz.</p><div style="clear&#58;left;"></div>Die Zeile muss unter das Bild - nicht floaten</div>
  
  <div class="ukliste"><img class="thumb" src="http&#58;//www.google.de/logos/chinanatlday60.gif" width="100" height="75" />
  <h3>Überschift H3</h3><p>Dieser Text umläuft das Bild. Die Länge ist variabel. Von sehr lang bis sehr kurz.</p><div style="clear&#58;left;"></div>Die Zeile muss unter das Bild - nicht floaten</div>
  
  <div class="ukliste"><img class="thumb" src="http&#58;//www.google.de/logos/chinanatlday60.gif" width="100" height="75" />
  <h3>Überschift H3</h3><p>Dieser Text umläuft das Bild. Die Länge ist variabel. Von sehr lang bis sehr kurz.</p><div style="clear&#58;left;"></div>Die Zeile muss unter das Bild - nicht floaten</div>

  </div> <!-- !content -->
</div> <!-- !inhalt -->


<div id="footer">
Inhalt vom Footer
</div><!-- !footer -->

</div> <!-- !main -->

</body>
</html>

Synonym
PostRank 10
PostRank 10
Beiträge: 3708
Registriert: 09.08.2008, 02:55

Beitrag von Synonym » 07.10.2009, 11:51

@turgay

Also wenn ich dem #inhalt ein "overflow: hidden;" mitgebe, dann scheint es soweit zu funktionieren. Den Rest muss ich mir nun mal ansehen. Habe leider schon sehr viel geändert die letzten Tage :(

mgutt
PostRank 10
PostRank 10
Beiträge: 3206
Registriert: 08.03.2005, 13:13

Beitrag von mgutt » 07.10.2009, 12:00

Ich hatte jetzt ukliste das overflow:hidden; gegeben. Dann gehts auch ;)
Ich kaufe Dein Forum!
Kontaktdaten

Synonym
PostRank 10
PostRank 10
Beiträge: 3708
Registriert: 09.08.2008, 02:55

Beitrag von Synonym » 07.10.2009, 12:07

@mgutt
Stimmt, geht auch in dem Fall. Muss das nun mal durchtesten.

Im Container Inhalt gibt es noch mehr Elemente, die ukliste war nur eine als Beispiel, daher das overflow erst mal direkt für #inhalt.

Danke euch allen!

turgay
PostRank 4
PostRank 4
Beiträge: 196
Registriert: 02.04.2005, 01:17

Beitrag von turgay » 07.10.2009, 12:38

Ich verwende in letzter Zeit immer öfter sogenannte CSS-Frameworks. Mein Favorit: Blueprint.
Hat man sich einmal reingefuchst, erspart es einiges an Ingenieursarbeit.

Nullpointer
PostRank 10
PostRank 10
Beiträge: 4790
Registriert: 22.04.2005, 19:14
Wohnort: West Berlin

Beitrag von Nullpointer » 07.10.2009, 12:48


Synonym
PostRank 10
PostRank 10
Beiträge: 3708
Registriert: 09.08.2008, 02:55

Beitrag von Synonym » 07.10.2009, 13:09

Ja, das YAML habe ich schon gesehen und auch mal getestet. Im Einsatz habe ich es allerdings noch nicht. Für neue Projekte sicherlich interessant, aber mein aktuelles sollte eigentlich nur eine kleine Anpassung werden ;-)

tryout
PostRank 2
PostRank 2
Beiträge: 63
Registriert: 04.09.2009, 16:47

Beitrag von tryout » 08.10.2009, 09:36

Wie wär`s damit?...

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style media="screen" type="text/css">
body &#123;
width&#58; 100%;
margin&#58; 0;
&#125;

#main &#123;
min-width&#58; 760px;
max-width&#58; 1024px;
height&#58; 100%;
border-right&#58;1px solid #aaa;
border-bottom&#58;1px solid #aaa;
background-color&#58;#ddd;
position&#58;relative;
&#125;


#header &#123;
padding&#58; 0;
height&#58; 95px;
background-color&#58;#FFF;
&#125;
   
#topline, #footer &#123;
background-color&#58; #aaa;
padding&#58; 0;
height&#58; 18px;
clear&#58;both;
&#125;

#inhalt &#123;
margin-left&#58; 190px;
margin-right&#58; 180px;
padding&#58; 10px;
background-color&#58;#FFF;
border&#58;1px solid #000;
position&#58;relative;
&#125;

#content &#123;
width&#58; 100%;
position&#58;relative;
&#125;

#links &#123;
background-color&#58;#ddd;
width&#58; 180px;
float&#58; left;
margin-top&#58; 10px;
margin-left&#58; 5px;
margin-right&#58; 5px;
&#125;

#rechts &#123;
background-color&#58;#ddd;
width&#58; 170px;
float&#58; right;
margin-top&#58; 10px;
margin-right&#58; 3px;
&#125;

.ukliste &#123;
background-color&#58; #FFFFFF;
line-height&#58;18px;
border-bottom&#58; 1px solid #000;
padding-bottom&#58; 10px;
padding-top&#58; 5px;
float&#58; left;
width&#58; 100%;
&#125;

.ukliste&#58;hover &#123;
background-color&#58;#E6E6E6 !important;
&#125;

.ukliste .left &#123;
	float&#58; left;
	width&#58; 30%;
&#125;

.ukliste .right &#123;
	float&#58; right;
	width&#58; 70%;
&#125;

.img_title &#123;
	font-size&#58; 7pt;
	line-height&#58; 120%;
&#125;

.thumb &#123;
border&#58; 1px solid #000;
padding&#58; 3px;
margin&#58; 5px 5px 5px 0px;
background&#58; #FFFFFF;
&#125;

.clear &#123;
	clear&#58; both;
&#125;
</style>

</head>


<body>
<div id="main"> <!-- für Breitenanpassung -->
	<div id="header"></div>
	<div id="topline">
		Inhalt von Topline
	</div>


    <div id="links">
    	Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte
    </div> <!-- !links -->


    <div id="rechts">
    	Inhalt der rechten Spalte
    </div> <!-- !rechts -->


<div id="inhalt">
  <div id="content">
  	<h1>Überschrift</h1>
 
    <div class="ukliste">
        <div class="left">
        	<img class="thumb" src="http&#58;//www.google.de/logos/chinanatlday60.gif" width="100" height="75" />
        	<p class="img_title">Die Zeile muss unter das Bild - nicht floaten</p>
        </div>
        <div class="right">
        	<h3>Überschift H3</h3><p>Dieser Text umläuft das Bild. Die Länge ist variabel. Von sehr lang bis sehr kurz.</p>
        </div>
    </div>
	
	<div class="ukliste">
        <div class="left">
        	<img class="thumb" src="http&#58;//www.google.de/logos/chinanatlday60.gif" width="100" height="75" />
        	<p class="img_title">Die Zeile muss unter das Bild - nicht floaten</p>
        </div>
        <div class="right">
        	<h3>Überschift H3</h3><p>Dieser Text umläuft das Bild. Die Länge ist variabel. Von sehr lang bis sehr kurz.</p>
        </div>
    </div>
	
	<div class="ukliste">
        <div class="left">
        	<img class="thumb" src="http&#58;//www.google.de/logos/chinanatlday60.gif" width="100" height="75" />
        	<p class="img_title">Die Zeile muss unter das Bild - nicht floaten</p>
        </div>
        <div class="right">
        	<h3>Überschift H3</h3><p>Dieser Text umläuft das Bild. Die Länge ist variabel. Von sehr lang bis sehr kurz.</p>
        </div>
    </div>
 	
	<div class="clear"></div>
	
	</div>
</div> <!-- !inhalt -->


<div id="footer">
Inhalt vom Footer
</div><!-- !footer -->

</div> <!-- !main -->

</body>
</html>

nerd
PostRank 10
PostRank 10
Beiträge: 4023
Registriert: 15.02.2005, 04:02

Beitrag von nerd » 10.10.2009, 22:05

www.960.gs ist als css framework sehr leicht verdaulich um die grids hinzubekommen. oder bei wordpress template seiten ein layout suchen und anpassen.

Antworten
  • Vergleichbare Themen
    Antworten
    Zugriffe
    Letzter Beitrag