|
|
Synonym
: 09.08.2008
: 3354
: Würzburg
|
| : 07.10.2009, 11:09 : CSS 3-Spalten layout: Probleme mit Float bzw. clear |
|
|
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 http://de.selfhtml.org/css/layouts/mehrspaltige.htm#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. |
|
| Nach oben |
|
 |
mgutt
: 08.03.2005
: 3135
|
|
| Nach oben |
|
|
Lord Lommel
: 18.02.2008
: 3225
: Halle / Saale
|
| : 07.10.2009, 11:24 : CSS 3-Spalten layout: Probleme mit Float bzw. clear |
|
|
Hast du vielleicht das Doctype vergessen ?
Die Nummer, die Sie gewählt haben, ist imaginär. Bitte drehen Sie Ihr Telefon um 90 Grad und probieren Sie es erneut! |
|
| Nach oben |
|
|
Synonym
: 09.08.2008
: 3354
: Würzburg
|
| : 07.10.2009, 11:25 : CSS 3-Spalten layout: Probleme mit Float bzw. clear |
|
|
Hi,
also den ganzen Code mal in Kurzfassung mache ich gerade fertig. Doctype ist vorhanden. |
|
| Nach oben |
|
|
turgay
: 02.04.2005
: 196
|
| : 07.10.2009, 11:30 : CSS 3-Spalten layout: Probleme mit Float bzw. clear |
|
|
Versuch mal ein
einzubauen.
Hat schon so manch verzwickte float-Konstruktion gerettet. |
|
| Nach oben |
|
|
mano_negra
: 23.07.2009
: 2646
: la luna
|
| : 07.10.2009, 11:40 : CSS 3-Spalten layout: Probleme mit Float bzw. clear |
|
|
deshalb liebe ich tabellen 
achtung ich komme!  |
|
| Nach oben |
|
|
Synonym
: 09.08.2008
: 3354
: Würzburg
|
| : 07.10.2009, 11:46 : CSS 3-Spalten layout: Probleme mit Float bzw. clear |
|
|
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: |
<!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=utf-8" />
<style media="screen" type="text/css">
body {
width: 100%;
margin: 0;
}
#main {
min-width: 760px;
max-width: 1024px;
height: 100%;
border-right:1px solid #aaa;
border-bottom:1px solid #aaa;
background-color:#ddd;
position:relative;
}
#header {
padding: 0;
height: 95px;
background-color:#FFF;
}
#topline, #footer {
background-color: #aaa;
padding: 0;
height: 18px;
clear:both;
}
#inhalt {
margin-left: 190px;
margin-right: 180px;
padding: 10px;
background-color:#FFF;
border:1px solid #000;
position:relative;
}
#content {
width: 100%;
position:relative;
}
#links {
background-color:#ddd;
width: 180px;
float: left;
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
}
#rechts {
background-color:#ddd;
width: 170px;
float: right;
margin-top: 10px;
margin-right: 3px;
}
.ukliste {
background-color: #FFFFFF;
line-height:18px;
border-bottom: 1px solid #000;
padding-bottom: 10px;
padding-top: 5px;
position: relative;
}
.ukliste:hover {
background-color:#E6E6E6 !important;
}
.thumb {
border: 1px solid #000;
float: left;
padding: 3px;
margin: 5px 5px 5px 0px;
position: relative;
background: #FFFFFF;
}
</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://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:left;"></div>Die Zeile muss unter das Bild - nicht floaten</div>
<div class="ukliste"><img class="thumb" src="http://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:left;"></div>Die Zeile muss unter das Bild - nicht floaten</div>
<div class="ukliste"><img class="thumb" src="http://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: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> |
|
|
| Nach oben |
|
|
Synonym
: 09.08.2008
: 3354
: Würzburg
|
| : 07.10.2009, 11:51 : CSS 3-Spalten layout: Probleme mit Float bzw. clear |
|
|
@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  |
|
| Nach oben |
|
|
mgutt
: 08.03.2005
: 3135
|
|
| Nach oben |
|
|
Synonym
: 09.08.2008
: 3354
: Würzburg
|
| : 07.10.2009, 12:07 : CSS 3-Spalten layout: Probleme mit Float bzw. clear |
|
|
@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! |
|
| Nach oben |
|
|
turgay
: 02.04.2005
: 196
|
| : 07.10.2009, 12:38 : CSS 3-Spalten layout: Probleme mit Float bzw. clear |
|
|
Ich verwende in letzter Zeit immer öfter sogenannte CSS-Frameworks. Mein Favorit: Blueprint.
Hat man sich einmal reingefuchst, erspart es einiges an Ingenieursarbeit. |
|
| Nach oben |
|
|
Nullpointer
: 22.04.2005
: 4788
: West Berlin
|
|
| Nach oben |
|
|
Synonym
: 09.08.2008
: 3354
: Würzburg
|
| : 07.10.2009, 13:09 : CSS 3-Spalten layout: Probleme mit Float bzw. clear |
|
|
| 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 |
|
| Nach oben |
|
|
tryout
: 04.09.2009
: 63
|
| : 08.10.2009, 09:36 : CSS 3-Spalten layout: Probleme mit Float bzw. clear |
|
|
Wie wär`s damit?...
| Code: |
<!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=utf-8" />
<style media="screen" type="text/css">
body {
width: 100%;
margin: 0;
}
#main {
min-width: 760px;
max-width: 1024px;
height: 100%;
border-right:1px solid #aaa;
border-bottom:1px solid #aaa;
background-color:#ddd;
position:relative;
}
#header {
padding: 0;
height: 95px;
background-color:#FFF;
}
#topline, #footer {
background-color: #aaa;
padding: 0;
height: 18px;
clear:both;
}
#inhalt {
margin-left: 190px;
margin-right: 180px;
padding: 10px;
background-color:#FFF;
border:1px solid #000;
position:relative;
}
#content {
width: 100%;
position:relative;
}
#links {
background-color:#ddd;
width: 180px;
float: left;
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
}
#rechts {
background-color:#ddd;
width: 170px;
float: right;
margin-top: 10px;
margin-right: 3px;
}
.ukliste {
background-color: #FFFFFF;
line-height:18px;
border-bottom: 1px solid #000;
padding-bottom: 10px;
padding-top: 5px;
float: left;
width: 100%;
}
.ukliste:hover {
background-color:#E6E6E6 !important;
}
.ukliste .left {
float: left;
width: 30%;
}
.ukliste .right {
float: right;
width: 70%;
}
.img_title {
font-size: 7pt;
line-height: 120%;
}
.thumb {
border: 1px solid #000;
padding: 3px;
margin: 5px 5px 5px 0px;
background: #FFFFFF;
}
.clear {
clear: both;
}
</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://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://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://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>
|
|
|
| Nach oben |
|
|
nerd
: 15.02.2005
: 1686
: AKL
|
| : 10.10.2009, 22:05 : CSS 3-Spalten layout: Probleme mit Float bzw. clear |
|
|
www.960.gs ist als css framework sehr leicht verdaulich um die grids hinzubekommen. oder bei wordpress template seiten ein layout suchen und anpassen.
marketing through social media is just like herding cats. and just to make it interesting, many of the cats are drunk and stupid...
blackhat linkkauf und so...  |
|
| Nach oben |
|
|
