|
|||
content nicht im flow; position: absolute
hallo,
folgendes problem: ich habe ein menü erstellt, welches IMMER oben, über dem content stehen soll. dadrunter soll der content dargestellt werden. der beginnt jedoch leider schon 'unter' dem menü bzw. das menü liegt über dem content.. Zudem besteht das Problem, dass wenn ich das browserfenster kleiner mache und die menüpunkte untereinander dargestellt werden, rückt der content auch nicht automatisch weiter nach unten.. kann mir da jmd helfen?! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>title</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> body { margin: 0; } #navbar { position: absolute; top: 0; left: 0; width: 100%; border-bottom: 2px solid #ccc; background: #000000; font: 12px Arial,sans-serif; } #navbar ul { list-style: none; margin: 0; padding: 0; } #navbar li { float: left; white-space:nowrap; } #navbar li a { display: block; background-color: #000000; color: #666666; padding: .5em; text-decoration: none; } #navbar li a:hover { background-color: #333333; color: #cccccc; } #content_box { display: block; align: center; } #content { width: 500px; margin:auto; background: #ffffff; font: 14px Arial,sans-serif; } </style> </head> <body> <div id="navbar"> <ul> <li> <a href="/">Startseite</a> </li> <li> <a href="/aktionen">Aktionen</a> </li> <li> <a href="/bilder-videos">Bilder & Videos</a> </li> <li> <a href="/oeffnungszeiten">Anfahrt & Öffnungszeiten</a> </li> <li> <a href="/reservierung">Kontakt & Reservierung</a> </li> </ul> </div> <div id="content_box"> <div id="content"> wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü </div> </div> </body> </html> |
Sponsored Links |
Sponsored Links |
|
|||
margin-top hilft..
allerdings nicht, wenn ich das browser-fenster kleiner ziehe und die menüpunkte untereinander angeordnet werden.. ich hätte den abstand gerne (immer gleich)/ relativ zum menü nicht zum browser-top.. |
|
||||
Nimm für #navbar die position-Angaben
HTML-Code:
position: absolute; top: 0; left: 0; Edit: align: center; ist meines Wissen nach kein gültiges CSS Edit 2: Habe das immer überlesen. Mit float bleibt das Menü natürlich nicht immer oben. Mit absoluter Positionierung allerdings auch nicht. position:fixed evtl. Aber wie du das margin relativ machen kannst, wüsste ich so im Moment auch nicht.
__________________
#m { f : g } /* jnv */ Geändert von jnv (22.12.2011 um 18:01 Uhr) |
|
|||
wenn ich die position absolute rausnehme, bekomme ich das menü nicht mehr auf 100% breite und die border-bottom verschwindet auch zur hälfte:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>title</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> body { margin: 0; } #navbar { display: block; border-bottom: 2px solid #ccc; background: #000000; font: 12px Arial,sans-serif; } #navbar ul { list-style: none; margin: 0; padding: 0; } #navbar li { float: left; white-space:nowrap; } #navbar li a { display: block; background-color: #000000; color: #666666; padding: .5em; text-decoration: none; } #navbar li a:hover { background-color: #333333; color: #cccccc; } #content_box { margin-top: 3em; display: block; align: center; } #content { width: 500px; margin:auto; background: #ffffff; font: 14px Arial,sans-serif; } </style> </head> <body> <div id="navbar"> <ul> <li> <a href="/">Startseite</a> </li> <li> <a href="/aktionen">Aktionen</a> </li> <li> <a href="/bilder-videos">Bilder & Videos</a> </li> <li> <a href="/oeffnungszeiten">Anfahrt & Öffnungszeiten</a> </li> <li> <a href="/reservierung">Kontakt & Reservierung</a> </li> </ul> </div> <div id="content_box"> <div id="content"> wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü </div> </div> </body> </html> |
|
|||
ich dachte, dass mit display: block; automatisch eine breite von 100% erzeugt wird!?
und dass div elemente grundsätzlich display: block; sind und daher nie nebeneinander stehen.. mit float: left; bzw float: right; gehts, aber ich verstehe nicht warum und was der unterschied ist. nun greift allerdings der margin-top von container_box nicht mehr.. !? *? |
|
|||
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>title</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> body { margin: 0; } #navbar { float: left; width: 100%; border-bottom: 2px solid #ccc; background: #000000; font: 12px Arial,sans-serif; } #navbar ul { list-style: none; margin: 0; padding: 0; } #navbar li { float: left; white-space:nowrap; } #navbar li a { display: block; background-color: #000000; color: #666666; padding: .5em; text-decoration: none; } #navbar li a:hover { background-color: #333333; color: #cccccc; } #content_box { display: block; align: center; } #content { margin-top: 2em; width: 500px; margin:auto; background: #ffffff; font: 14px Arial,sans-serif; } </style> </head> <body> <div id="navbar"> <ul> <li> <a href="/">Startseite</a> </li> <li> <a href="/aktionen">Aktionen</a> </li> <li> <a href="/bilder-videos">Bilder & Videos</a> </li> <li> <a href="/oeffnungszeiten">Anfahrt & Öffnungszeiten</a> </li> <li> <a href="/reservierung">Kontakt & Reservierung</a> </li> </ul> </div> <div id="content_box"> <div id="content"> wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü </div> </div> </body> </html> |
|
||||
Damit sagst du nur, dass das Element die Breite bekommt die es benötigt. Hier musst du explizit eine Breite angeben.
#content_box erfüllt momentan keinen Sinn. Somit kannst du diese löschen, da du ja #content bereits zentriert hast. Auf #content kannst du dann auch ein margin-top anwenden.
__________________
#m { f : g } /* jnv */ |
Sponsored Links |
|
|||
danke dir!
habe die container_box weggenommen und es funktioniert, allerdings wirkt das margin-top nicht.. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>title</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> body { margin: 0; } #navbar { float: left; width: 100%; border-bottom: 2px solid #ccc; background: #000000; font: 12px Arial,sans-serif; } #navbar ul { list-style: none; margin: 0; padding: 0; } #navbar li { float: left; white-space:nowrap; } #navbar li a { display: block; background-color: #000000; color: #666666; padding: .5em; text-decoration: none; } #navbar li a:hover { background-color: #333333; color: #cccccc; } #content { margin-top: 6em; width: 500px; margin:auto; background: #ffffff; font: 14px Arial,sans-serif; } </style> </head> <body> <div id="navbar"> <ul> <li> <a href="/">Startseite</a> </li> <li> <a href="/aktionen">Aktionen</a> </li> <li> <a href="/bilder-videos">Bilder & Videos</a> </li> <li> <a href="/oeffnungszeiten">Anfahrt & Öffnungszeiten</a> </li> <li> <a href="/reservierung">Kontakt & Reservierung</a> </li> </ul> </div> <div id="content"> 1wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü wefiwf owef wdoivw vvbo9vwd hsvopsidnvo pyvnsoypvn vfv s dvowüdv südv svü </div> </body> </html> EDIT: *css konform geschrieben?! |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Tabellen als Div Container | SpecialFighter | (X)HTML | 7 | 12.10.2010 18:40 |
Ungewöhnlicher abstand beim clearen von floats | adrianno | CSS | 14 | 16.09.2009 15:20 |
prblemme mit mein inhalt div | carlos587261 | CSS | 3 | 23.04.2008 15:07 |
DIV Länge automatisch anpassen | judicious | CSS | 10 | 08.05.2006 17:30 |
Seitenaufbau mit DIVs und 100% Höhe | vespasquire | CSS | 6 | 12.09.2004 16:21 |