| Autor |
Nachricht |
clickmari
Threadersteller
Dabei seit: 17.10.2007
Ort: Berlin
Alter: -
Geschlecht: 
|
Verfasst Do 10.09.2009 20:10
Titel CSS -Inhalt geht über mein DIV hinaus... warum? |
  |
|
Hallo,
vorab: sollte die Lösung des Problems hier irgendwo schon im Forum aufgetaucht sein, entschuldige ich mich, ich weiß nicht genau, wie man das Problem benennt und finde wahrscheinlich deswegen nichts 
Also: Habe ein 3-Spalten Layout mit einem links-floatenden Div, einem rechts-floatenden und einer Spalte in der Mitte.
Das funktioniert soweit, bis auf dass der Inhalt in der rechten Spalte das DIV dazu bringt, einfach breiter zu werden, anstatt dass der Text umgebrochen wird und das DIV in die Länge geht.
...ich habe mich an das Beispiel hier gehalten: http://www.manisheriar.com/holygrail/index.htm , allerdings habe
ich feste Weiten.
Ich habe alle möglichen Sachen probiert..display,overflow,width:auto und min-width ... Hab ich mich irgendwo verrechnet oder verstehe ich grundsätzlich irgendwas falsch?? Also das DIV floated und ich kann mir den Grund nicht erklären, weshalb der Inhalt nicht auch drinne bleiben sollte..
Das ist jetz auch schon der zweite Anlauf für die Seite und es wäre super, wenn mir jemand erklären könnte, was da vor sich geht.
CSS:
| Code: | #wrapper1 {
position:relative;
text-align:left;
width:956px;
border-left:11px solid #f9fbfa;
}
#wrapper2 {
position:relative;
text-align:left;
width:956px;
border-right:9px solid #f9fbfa;
}
#header {
width:956px;
position:absolute;
top:0;left:0;
margin-left:0px;
background-color:#f9fbfa;
height:128px;
z-index:130; border-left:19px solid #f9fbfa;border-right:9px solid #f9fbfa;
}
#maincol {
position:relative;
}
#leftcol {
position:relative;
float:left;
width:144px;
z-index:100;
padding-top:135px;
background-image:url("../img/rot.gif");
background-repeat:repeat-y;
}
#rightcol {
position:relative;
float:right;
width:126px;
padding-top:135px;
padding-right:35px
}
#centercol {
position:relative;
padding-left:171px;padding-right:242px;
padding-top:140px;
} |
html:
| Code: | <body>
<div id="header"><!-- begin header -->
<p>zugs.....</p>
</div><!-- end header -->
<div id="wrapper1" ><begin wrapper1-->
<div id="wrapper2"><begin wrapper2>
<div id="maincol" class="hellgruen bg_gruen"><!-- begin main content area -->
<div id="leftcol"><!-- begin leftcol -->
<ul class="third_level ">
<li><a href="#name">....</a></li>
<li><a href="#name">....</a></li>
<li><a href="#name">....</a></li>
</ul>
</div><!-- end leftcol -->
<div id="rightcol"> <!-- begin rightcol -->
<p>HIER STEHT DER TEXT NACH RECHTS ÜBERtetesttesttesttetesttesttesttetesttesttesttetesttesttestte</p>
</div><!-- end righttcol -->
<div id="centercol"><!-- begin centercol -->
<h1 >BLABLABLA</h1>
<p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.t</p>
</div><!-- end centercol -->
</div><!-- end main content area -->
</div><!-- end wrapper1 -->
</div><!-- end wrapper2 -->
</body> |
|
|
| |
  |
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: 
|
Verfasst Do 10.09.2009 20:24
Titel Re: CSS -Inhalt geht über mein DIV hinaus... warum? |
|
|
| clickmari hat geschrieben: | | allerdings habe ich feste Weiten. |
Dann brauchst Du die verlinkte Methode auch nicht (sie ist für ein Liquid-Design gedacht). Gib einfach allen 3 Spalten die gewünschte Breite und floate sie dann (Vorteil: Du kannst dann auch innerhalb der mittleren Spalte beliebig clearen). Wenn Du das Boxmodell (Google) beachtest, kann im Prinzip nicht viel schiefgehen 
Zuletzt bearbeitet von heiko_rs am Do 10.09.2009 20:26, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
clickmari
Threadersteller
Dabei seit: 17.10.2007
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 10.09.2009 20:35
Titel
|
|
|
hmmm... ok. ich habe mir das beispiel halt rausgesucht, weil mal die eine, mal die andere spalte die längste sein kann und sich der rest dann dementsprechend verhalten sollte. deswegen gibs da halt die beiden divs drumherum undn hintergrund...
wenn ich dem center-col eine feste weite gebe, ändert sich an der rechten spalte nix.
kann das denn sein, dass sich die beiden äußeren divs irgendwie auf das verhalten des inhalts im rechten divs auswirken oder ist eigentlich nur möglich, dass ich mit dem rechten div irgendwas machen muss?
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 10.09.2009 20:50
Titel
|
|
|
| clickmari hat geschrieben: | | weil mal die eine, mal die andere spalte die längste sein kann |
Das passiert per Grafik und kann bei Deiner geänderten Variante genauso passieren
| clickmari hat geschrieben: | | wenn ich dem center-col eine feste weite gebe, ändert sich an der rechten spalte nix. |
Poste mal Deinen geänderten Code, noch angenehmer wäre ein Link.
|
|
| |
|
|
clickmari
Threadersteller
Dabei seit: 17.10.2007
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 10.09.2009 20:56
Titel
|
|
|
http://mars.iuk.hdm-stuttgart.de/~ms178/Neuer%20Ordner/bauunternehmer2.htm
... funktionieren nicht alle links.
Ich hab ein paar Änderungen versucht, haben aber alle nichts gebracht.
Jetz habe ich dem #centercol einfach mal 100 px weite verpasst...jetz haben also alle eine feste weite,
ändert halt nichts an dem überstand.
alle nach links zu floaten tut auch nicht
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 10.09.2009 21:06
Titel
|
|
|
| clickmari hat geschrieben: | | jetz haben also alle eine feste weite, ändert halt nichts an dem überstand. |
Meinst Du damit dieses ewig lange Wort? Natürlich steht das über, wo sollte es denn auch getrennt werden? (word-wrap ist CSS 3 und noch nicht so viele Browser verstehen es). Und der IE 6 (sowie neuere Versionen im Quirksmode) dehnt Dir das umgebende div dann sogar noch aus.
Übrigens solltest Du noch validieren (du öffnest html nicht und schließt img & hr nicht korrekt), und in Zeile 80 steht ein verlorener Kommentar-Anfang
|
|
| |
|
|
clickmari
Threadersteller
Dabei seit: 17.10.2007
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 10.09.2009 21:11
Titel
|
|
|
Ich bin so doof !!!!!!!! soory 
Vielen Dank...man sollte zwischendurch och ma spaziern gehn...Kof lüften und so.
Also besten Dank.
Danke auch, dass Du mich ans validieren erinnert hast
Einen schönen Abend dann noch!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Text geht über die Div hinaus
[CSS] Bild ragt über <div> hinaus
Text geht über Rand hinaus
Text läuft im IE 7 über footer hinaus
Border springt über's Ziel hinaus
Inhalt autorun.inf
|
|
Willkommen auf dem Portal für Mediengestalter
