|
|||
Hilfe beim Layout
Hallo!
Ich versuche mich gerade an meinem ersten Layout mit CSS, habe da jedoch einige Probleme. Erstmal klappt die Darstellung im IE nicht. Das zweite Problem ist, dass die Menü-Spalte die Größe der Inhalt-Spalte annehmen soll, ist das realisierbar? Danke! Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>xxxx</title> <style type="text/css"> /*<![CDATA[*/ body { margin: 0px; padding: 0px; background-image: URL(images/background.jpg); } .padding { float: left; width: 20%; height: 300px; } #content { float: left; width: 60%; margin: 0px; } .clear { clear: both; } #menu { position:absolute; width: 130px; background-color: #ffcc00; } #inhalt { margin-left:130px; background-color: #ffffc6; } #logo { width:100%; background-color: #ffffff; } #leiste { width:100%; background-color: #00f000; } /*]]>*/ </style> </head> <body> <div class="padding"></div> <div id="content"> <div id="logo">Logo</div> <div id="menu">Menü</div> <div id="inhalt">Inhalt </div> <div id="leiste">kleine Leiste</div> </div> <div class="padding"></div> <div class="clear"></div> </body> </html> |
Sponsored Links |
|
|||
Zu 1.:
Code:
#menu { float:left; width: 130px; background-color: #ffcc00; } #inhalt { width:xxx; float:left; background-color: #ffffc6; } Außerdem gibt es bessere Methoden, ein div zu zentrieren! Code:
#content {margin:0 auto; } zu 2.: Such nach "faux columns"! |
Sponsored Links |
|
|||
|
|
|||
Hm, dass mit den faux columns ist ja ganz schön, doch hat es nicht soweit seine Grenzen, dass bei Seiten, die "nicht in px , sondern mit % gestaltet sind", dass nicht so funktioniert?
Bei mir sollte ja das Ganze zentriert sein, die Menübreite und Content immer relativ (20 bzw. 80%). Wie ließe sich das mit faux columns lösen? |
|
|||
Was ist eine "statische" Breite?
Es muss eine Breitenangabe vorhanden sein, denn 100% breite Container lassen sich schwerlich zentrieren... Diese Breite kann auch 60% sein. Bei dir kann das auch heißen: margin:0 20%; Dann geht's ohne Breitenangabe. Die "faux columns" brauchst du für #menu und #inhalt. Für #menu hast du doch eine feste Pixelbreite angegeben - also was spricht gegen die Hintergrundbild-Lösung? |
|
|||
Zitat:
Ich sehe da 2 Probleme: 1. Ich möchte einen gekachelten Hintergrund haben (von der gesamten Website) 2. der linke Abstand ist variabel, man kann also nicht sagen, dass das Menü immer 50px von links ist... Lässt sich das dennoch lösen? |
|
|||
Zitat:
Bei dir wäre vermutlich #content das geeignete Element für das faux columns Hintergrundbild. Der body kann ein weiteres BG-Bild bekommen. Benutz mal die Suchfunktion des Forums. Da wirst du viele umgesetzte Beispiele von "faux columns" finden. |
|
|||
Hm, hab jetzt noch ein wenig rumgesucht, bin immer noch nicht weiter...
Ich habe jetzt noch einen Footer dazugenommen: Wenn der Inhalt der Seite kleiner als das Browserfenster ist, soll der Footer ganz unten angezeigt werden und die Spalten entsprechend verlängert werden. Geht der Inhalt über eine Seite, soll der Footer einfach angehangen werden. Tut mir echt leid, dass ich soviel frage, aber für mich ist das noch nicht allzu durchschaubar.. Code:
body { padding: 0px; background-image: URL(images/background.jpg); margin: 2px 15%; height: 100%; } html{ height: 100%; } #nonfooter{ position:relative; height:100%; } #logo { background-color: #ffffff; width: 100%; height:50px; } #menu { float:left; width: 20%; height: 90%; background: #ccc url(images/background_menu.jpg) repeat-y 0 0; } #content { float:left; width:80%; height: 90%; background-color: #ffffc6; } #footer { position:relative; height:30px; margin-top:-10px; width:100%; background-color: #00f000; } Code:
<html> <body> <div id="nonfooter"> <div id="logo">Logo</div> <div id="menu">Menü</div> <div id="content">Inhalt </div> <div style="clear: both;"/> </div> <div id="footer">kleine Leiste</div> </body> </html> |
Sponsored Links |
|
|||
Zitat:
Zum Thema "footer immer unten": http://www.themaninblue.com/writing/...ve/2005/08/29/ |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe! Layout komplett verschoben | emkaythree | CSS | 17 | 30.12.2010 19:33 |
Hilfe beim Layout | claude | CSS | 10 | 22.11.2006 22:16 |
Brauche Hilfe - Suchmaschinen optimierung, Layout | psq | Site- und Layoutcheck | 2 | 18.10.2006 18:20 |
Hilfe bei Umsetzung von Layout... | darvida | CSS | 8 | 29.04.2005 12:32 |
brauche hilfe bei layout | schaf | CSS | 18 | 07.03.2005 15:41 |