ABAKUS

Verfasst: **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

Hat einer einen Tipp? Nach 3 Tagen hin und her weiß ich nun echt nicht mehr weiter.

Verfasst: **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.

Verfasst: **07.10.2009, 11:24**

Hast du vielleicht das Doctype vergessen ?

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Verfasst: **07.10.2009, 11:25**

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

Verfasst: **07.10.2009, 11:30**

Versuch mal ein

Code: Alles auswählen

overflow&#58; hidden

einzubauen.

Hat schon so manch verzwickte float-Konstruktion gerettet.

Verfasst: **07.10.2009, 11:40**

deshalb liebe ich tabellen

Verfasst: **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>

Verfasst: **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

Verfasst: **07.10.2009, 12:00**

Ich hatte jetzt ukliste das overflow:hidden; gegeben. Dann gehts auch

Verfasst: **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!

Verfasst: **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.

Verfasst: **07.10.2009, 12:48**

https://de.wikipedia.org/wiki/YAML_%28Framework%29

Verfasst: **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

Verfasst: **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>

Verfasst: **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.

ABAKUS

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

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