Veröffentlicht 7. September 200718 j Hallo, ich habe leider ein kleines Problem weiss auch nicht so wirklich wie es dazu kommt ist mein erstes dieser art (Bin wahrscheinlich einfach noch zu müde). Darf leider keinen Quelltext rausgeben (Bin auf Arbeit) also hab ich mal so eine Art Beispiel geschrieben Also das Problem: Ich habe 3 <div> - header - main - footer Der header soll halt ganz nach oben und hat eine feste Grösse, das gleiche mit dem footer nur halt ganz unten. Der main soll halt zwischen den beiden sein und hat keine feste grösse der er sich ja dem inhalt anpassen soll ich der höhe, soll aber bündig sein mit dem header und dem footer. Am header klappt alles nur hab ich grade Probleme mit dem Footer der wird entweder nicht angezeigt oder an einer total falschen Stelle. Hier habt ihr mal den bsp Quellcode: .header { top: 0px; left: 0px; position: absolute; height: 176px; } .main { top: 176px; left: 0px; position: absolute; height: 100%; } .footer { bottom: 0px; left: 0px; position: absolute; height: 150px; } <div class="header"> header </div> <div class="main"> main </div> <div class="footer"> footer </div> Wäre euch sehr dankbar wenn Ihr mir helfen könntet. Gruss Seth
7. September 200718 j meinst du so <div id="page"> <div id="header">Header </div> <div id="content">Content </div> <div id="footer">Footer </div> </div> * { margin: 0px; padding: 0px;} #page { width: auto; max-width: 90em;} #header { height: 176px; background-color:green; } #content { background-color:red; } #footer { height: 50px; background-color:blue; } wobei du den page-div eigentlich nicht unbedingt brauchst. und hinterher halt die farben rausnehmen
7. September 200718 j das ganze könnte funktionieren muss ma gleich ein bisschen rumbasteln. hoffe es funktioniert. danke dir schonmal
7. September 200718 j leider funktioniert es nicht 100% habe natürlich im content ja auch inhalt drinne unteranderem ein <span> wo ich die position mittels margin regel. Dadurch ist der footer nicht mehr bündig zum content sondern bündig mit den span die innerhalb des contents sind
7. September 200718 j also grade ein bisschen weiter geforscht.. damit das problem nicht mehr kommt muss ich innerhalb des content div mit div arbeiten und nicht mit span. Dadurch entsteht bei mir schon wieder ein problem die beiden div sollen neben einander sein. jedoch wenn ich sie positioniere sind sie zwar links und rechts jedoch ist der rechte weiter unten auf der höhe wo das linke aufhört.
7. September 200718 j naja du benutzt auch überall position:absolute somit musst du wie es auch schon heisst die position absolute angeben (left- right ect) hinzu solltest du besser mit floats arbeiten. und schaum mal in deinen quelltext ob du in deinem div nen tag drinne hast! allerdings besser wäre es wenn man mal den code sehen würde. aus welchem grund darfst ihn nicht posten?? werden ja keine sensitiven daten like kontonummern mit pins drinnestehen oder so. also richtig helfen kann man dir nur wenn man das problem sieht. aber schau erstmal was ich da oben geschrieben hab nach und dann meld dich nochmal ;-) lg
7. September 200718 j So bin schon ein Stück weiter... nur gibts ein paar unterschiede im ff und ie. Naja das ding wegen dem posten ist ich weiss nichtmal ob ich hier im Forum angemeldet sein darf deswegen wollte ich auch nicht noch den quelltext rausgeben. aber hab es mal modifiziert dann kann ich es auch raus geben. das problem ist die 2 boxen in der mitte machen nicht was sie eigetnlich machen sollten. im ie sind die beiden bei ein ander und zu weit rechts. im ff scheint es bisher zu funktionieren. hier der quelltext: <html> <head> <base href="http://www.oswald-foerdertechnik.de/"> <style> body { font: normal 12px Arial, sans-serif, verdana, helvetica; color: #000000; background-color:white; border: none; margin: 0px; padding: 0px; } .page { width: auto; } .header { height: 176px; background: #ffffff url(images/top-bg.png) repeat-x; } .content { background-color:white; } .footer { height: 50px; background-color: black; clear: both; } .left { background-color: #D7D7D8; width: 957px; float: left; } .right { background-color: white; width: 300px; height: 100%; margin-right: 0px; margin-top: 0px; float: right; } .leftleft { background: #f2f2f2; width: 550px; border: 1px solid #e19390; border-top: 4px solid #de4f49; margin-top: 20px; margin-left: 20px; float: left; } .leftright { background: #f2f2f2; width: 300px; height: 100%; border-left: 4px solid #999999; border-top: 1px solid #999999; margin-top: 20px; margin-right: 67px; margin-bottom: 20px; float: right; } #mini-menu { margin-left: 65px; top: 0px; position: absolute; display: inline; height: 25px; background: url(images/mini-menu-center.png) repeat-x; color: #ffffff; } .minimenuright { margin-left: 0px; top: 0px; position: absolute; height: 25px; display: inline; } .mini-links { font-size:11px; font-weight:bold; margin: 0 0 0 20px; } .minilinks { padding: 0px; } a:link, a:visited { text-decoration:none; font-weight:standard; color: #333333; } a:active, a:hover { color:#de4f49; } a.mini:link { color: #cccccc; background: none; text-decoration: none; border-style: none; } a.mini:Visited { color: #cccccc; background: none; text-decoration: none; border-style: none; } a.mini:Hover { color: #de4f49; background: none; } .flag { margin: 0 0 0 15px; } .flag-right { margin: 0 20px 0 15px; } </style> </head> <body> <div class="header"> <img src="images/logo.png" alt="" width="319" height="78" border="0" style="margin-top: 12px; margin-left: 40px;"> <div id="mini-menu"> <table cellspacing="0" cellpadding="0" height="25" valign="top" align="left" style="margin-left: 0px;"> <tr> <td height="25"><img src="images/mini-menu-left.png"></td> <td valign="top" height="25" class="minilinks"> <span class="mini-links"><a class="mini" href="#">Suche</a></span> <span class="mini-links"><a class="mini" href="callback-service.html">Callback-Service</a></span> <span class="mini-links"><a class="mini" href="sitemap.html">Sitemap</a></span> <span class="mini-links"><a class="mini" href="impressum.html">Impressum</a></span> <span class="flag"><img style="margin-top: 2px;" src="images/flagge-de.png" alt="Deutsche Version" width="17" height="11" border="0"></span> <span class="flag-right"><img src="images/flagge-gb.png" alt="English version" width="17" height="11" border="0"></span> </td> <td height="25"><img src="images/mini-menu-right.png" height="25" width="11"></td> </tr> </table> </div> </div> <div class="content"> <div class="left"> <div class="leftleft"></div> <div class="leftright"></div> </div> <div class="right"> </div> </div> <div class="footer"> footer </div> </body> </html>
7. September 200718 j meine fresse is das chaotisch ;-) warum übergibst du eigentlich alle werte über klassen?? naja ich schau mal
7. September 200718 j der original quelltext ist noch schlimmer... der typ der seite vor mir gemacht hat, hat derben mist gebaut ein wunder das die überhaupt mehr oder weniger angezeigt wird. soll die halt neue machen
7. September 200718 j kleiner tip machse komplett neu. tu dir den gefallen ;-) der grund warum der abstand nicht angezeit wurde ect liegt an deinen größenangaben. setz mal deine klasse .left auf width:auto; und gib deiner klasse .leftright noch n margin-left: 27px; aber wie gesagt ich würde die seite noch mal komplett neu struckturieren und das css komplett sauber neumachen lg
7. September 200718 j ne hat nicht geklappt aber neu schreiben tu ich ja mehr oder weniger hier im moment... werd den teufel tun seinen quelltext zu bearbeiten da sitz ich ja noch länger dran. aber eben die lösung gefunden. für die beiden boxen anstatt mit margin zu arbeiten einfach dem übergeordneten div nen padding verpassen schon hats geklappt
7. September 200718 j dann hattest bei meinem script was falsche verstanden denn alle browser haben das umgesetzt. naja falls du noch mal hilfe brauchst
7. September 200718 j es klappt hab anstatt der beiden inneren divs jetzt einfach ne tabelle benutzt hatte keine lust mehr fertiges werk ist Hier auffindbar Danke nochmal für die Hilfe
Archiv
Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.