|
|||
dreispaltiges layout, footer soll immer mitwandern
es geht um folgende seite:
homöophatische praxis, zweiter versuch die seite soll also wie gehabt das bild als kopfleiste haben, darunter eine bildleiste (ein bild wird eingefügt, ich habe es jetzt als eingefärbten div-container drin, um zu zeigen, wie und wo das stehen soll, das bild steht noch nicht zur verfügung) und dann drei spalten, links #hauptnavi, dann in der mitte #inhalt und rechts #infoblock. drumherum gibt es den container #aussen, um das ganze zu zentrieren in 760px breite. dann kommt unten der fussbereich, #unternavi. da sie eine navigation enthält sollte sie immer unten auftauchen. die farben der drei spalten sind durch eine hintergrundgrafik gegeben. trotzdem habe ich die einzelnen blöcke nochmal mit einer hintergrundfarbe versehen um jetzt im teststadium zu sehen, wo die blöcke überhaupt wirklich stehen, diese farben kommen später natürlich weg. probleme: - ich kann die schrift in #unternavi nicht zentrieren, sobald ich versuche mit "auto"anstelle oder auch einer pixelangabe erscheint rechts ein stück scrollbalken (was ja nicht sein soll), irgendwie schiebt sich da was zu weit nach unten. im momentanen zustand ist es schön ohne scrollbalken, aber eben nicht zentriert. - im internet explorer verschieben sich die blöcke #bildleiste und #inhalt nach rechts-unten. warum? wie schaffe ich abhilfe? bitte seid nicht böse, dass ich nicht alle vorschläge von euch übernommen habe, ich meine damit, die schrift ist noch in pt angegeben und die unternavi habe ich noch in einen div-container gepackt. bitte versteht, da ich noch am anfang stehe, ist es für mioch(gewohnheitsmässig) erstmal übersichtlicher so, auch wenn es nciht dem allerallerschlanksten code entspricht. könntet ihr mir das problem trotzdem am vorhandenen beispiel von mir erklären? das wäre toll. die css-datei: html, body { height: 100%; margin: 0; padding: 0; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; text-align: center; color: #17226c; } a { text-decoration: underline } a:hover { text-decoration: none; color: #550000; } #aussen { width: 760px; min-height: 100%; margin: 0 auto; background-image: url(../bilder/hintergrundfarben.gif); } * html #aussen { height: 100%; } #kopf { display: block; } #hauptnavi { width: 150px; float: left; background-color: #cc1111; } #bildleiste { width: 485px; height: 50px; margin-left: 150px; background-color: #ccaaaa; } #infoblock { width: 125px; float: right; background-color: #cc1111; } #inhalt { width: 485px; margin-left: 150px; background-color: #bbbbdd; } #unternavi { width: 760px; height: 30px; margin: -30px auto 0; background-color: #ccaacc; } #unternavi ul { margin: auto 0; list-style: none; } #unternavi li { float: left; margin: auto 25px; } ps bitte auch ned böse sein, wenn ich durchgängi alles kelinschreibe, uich mache diese arbeit neben kleinem kind, sprich, ich habe zeitweilig die kleene auf dem schoss und tippe einhändig, ich schreib dann lieber durchgängig klein als auch noch zu wechseln. danke für verständnis und hilfe!
__________________
liebe grüsse von sirrpa |
Sponsored Links |
|
||||
Re: dreispaltiges layout, footer soll immer mitwandern
Zitat:
Zitat:
Lass bei #inhalt und der #bildleiste die Breitenangabe weg und arbeite nur mit margin-left/-right. Die (dann entstehende) 3px-Lücke im IE dürfte ja nicht stören, da diese bei durchgehenden Hintergrundbildern nicht sichtbar ist. Zitat:
Zitat:
Grüße fricca PS: bitte benutz die [ code ]-Funktion, wenn du solchen hier einstellst! |
Sponsored Links |
|
|||
danke fricca!
mit Code:
text-align: center; ich hatte im ersten posting leider nicht klar genug gefragt, aber ich wollte es auch vertikal zentrieren. ich habe ein Code:
vertical-align: middle;
__________________
liebe grüsse von sirrpa |
|
|||
Zitat:
Die Suchfunktion kann dir mehr zum Thema vertical-align sagen. |
|
|||
Re: dreispaltiges layout, footer soll immer mitwandern
jetzt hat es sich wieder anders verschoben.
Zitat:
hier zu sehen
__________________
liebe grüsse von sirrpa |
|
|||||
Re: dreispaltiges layout, footer soll immer mitwandern
Zitat:
Code:
margin-left:150px; margin-right: 125px; Zitat:
__________________
liebe grüsse von sirrpa |
|
|||
nun habe ich ein bild in die bildleiste (#bildleiste) eingefügt und es sieht im firefox ok aus, im internet explorer dagegen nicht. die bildleiste wird nach unten verschoben und ein kleiner abstand zum nächsten container #inhalt entsteht.
zu sehen hier nicht schön. der html-code bis jetzt: Code:
<body> <div id="aussen"> [img]bilder/kopf.gif[/img] <div id="hauptnavi"></div> <div id="infoblock"></div> <div id="bildleiste">[img]bilder/kopf_bilderleiste.jpg[/img]</div> <div id="inhalt"></div> </div> <div id="unternavi"> <ul>[*]Über mich [*]Kontakt[*]Anfahrt[*]Preise[*]Impressum[/list] </div> </body> </html> Code:
html, body { height: 100%; margin: 0; padding: 0; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; text-align: center; color: #17226c; } a { text-decoration: underline } a:hover { text-decoration: none; color: #550000; } #aussen { width: 760px; min-height: 100%; margin: 0 auto; background-image: url(../bilder/hintergrundfarben.gif); } * html #aussen { height: 100%; } #kopf { display: block; } #hauptnavi { width: 150px; float: left; background-color: #cc1111; } #bildleiste { height: 50px; margin-left: 150px; margin-right: 125px; } #infoblock { width: 125px; float: right; background-color: #cc1111; } #inhalt { margin-left: 150px; margin-right: 125px; background-color: #bbbbdd; } #unternavi { width: 760px; height: 30px; vertical-align:middle; text-align: center; margin: -30px auto 0; background-color: #ccaacc; } #unternavi ul { margin: auto 0; list-style: none; } #unternavi li { display: inline; margin: auto 25px; }
__________________
liebe grüsse von sirrpa |
|
|||
Zitat:
Das sieht mir aber stark nach einem Hintergrundbild aus. Ein eigenes Element ist dafür dann auch nicht nötig - du kannst es in #inhalt mit einsetzen. Zitat:
|
Sponsored Links |
|
|||
Zitat:
puh, ist das alles kompliziert. also diese schwierigkeiten mit dem ie scheinen ja nicht wenige zu sein. Zitat:
Code:
<div id="bildleiste">[img]bilder/kopf_bilderleiste.jpg[/img]</div>
__________________
liebe grüsse von sirrpa |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Tabellenloses Layout mit dreispaltigen Kopf, dreispaltigen Hauptteil und Footer | www.VG-company.com | CSS | 5 | 02.11.2013 15:29 |
Untermenü im IE | nici | CSS | 10 | 22.06.2009 21:19 |
Layout - footer und layer[links] - Probleme - (CSS-Anfänger) | Basti_LRT | CSS | 1 | 08.10.2007 22:03 |
Footer Problem (3 spaltiges Layout, variable Höhe) | Lofesto | CSS | 2 | 23.07.2007 16:13 |
Problem mit dreispaltigem Layout mit Hintergrundmuster und Footer | G321 | CSS | 2 | 09.07.2007 00:13 |