nicht angemeldet
fusszeile nicht ganz unten, navi überschneidet
Wie erreiche ich es, dass im folgenden layout die fußzeile in jedem fall ganz unten ist ( das navi also nicht überschneidet ) Dabei ist zu beachten, dass das dunkelblaue navi rechts nicht immer so lang ist. Das navi soll nach unten gedrückt werden, egal ob das rote, das blaue oder das dunkelblaue div das längste ist. Zudem möchte ich möglichst den quelltext des navi weit hinten/unten notiert haben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<style>html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
html {
height: 100%;
}
body {
height: 100%;
background: #FBEDC1;
font-size: 100.01%;
}
.w100 { width:100%;}
.klein {font-size:50%;}
#kopf { background: #001058; width: 100%; border-width:1px; border-style:solid; border-color:#001058;
}
#kopf h1 { /* formatiert alle Überschriften erster Ordnung, die sich in einem Element mit der id "kopf" befinden */
text-align:left;
font-weight:bolder;
font-size:150%;
letter-spacing:0.2em;
color: #f60;
margin: 0.7em 0 0.3em 10%;
}
#logo { position: absolute; right:5.5em; top:1.5em; height:80; width:263;}
/*definitionen innerhalb der inhaltsbox*/
#inhalt { position:relative; top:0; left:0; width: 100%; color: green; background-color: green; float:left;}
#inhalt p {
font-size: 1em;
line-height: 1.5em;
color: black;
margin: 2em 1.5em 1.5em 1.5em ;
}
#fang {width:85%;}
#zentr {width:80%; margin:0em auto; background-color: white; border:solid; border-color: #FBEDC1; border-width:1px;}
#boxl {width:66%; margin:0em 0em 0em 0em; background-color: red; float:left;}
#boxl img {padding:0 0 0em 0}
#boxr {margin:0em 0em 0em 0em; background-color:blue;}
/* Ab hier formatierung des Elements mit id "navi" inkl. Sub-elemente */
#navi {position:absolute; top:0%; right:0%; background: #001058; width: 15%; height:auto; padding: 0em 0em 0em 0em; }
#navi ul { /* formatiert alle ungeordneten Listen, die sich in einem Element mit der id "navi" befinden */ font-size: 1em;
line-height: 1.25em;
color: #0063CE;
margin: 0em 0em 0.75em 0.5em; list-style-position: inside;}
#navi ul li {/*hier wird u.a. das blaue bullet und mittels padding lage von hr definiert*/
font-size: 0.9em;
line-height: 1.1em;
color: #0063CE;
margin: 0em 0.5em 0em 0em;}
#navi ul li ul li {/*hier wird das leuchtgrüne bullet definiert*/
color: #00FC9B;
margin: 0em 0em 0em 0em;
}
#navi ul a {
font-size: 0.7em;
line-height: 0.8em;
color: red;
margin: 0em 0em 0em 0em ;}
#navi ul li a {
font-size: 0.7em;
line-height: 0.8em;
color: red;
margin: 0em 0em 0em 0em ;
font-weight:small;}
#navi li a:link {
font-size: 0.7em;
line-height: 0.8em;
color: #fff;
margin: 0em 0em 0em 0em ;
font-weight:small}
#navi li a:visited {
color: #167EC6;
text-decoration: none;}
#navi li a:hover, a:active {
text-decoration: none;
color: #FF6600; background-color: transparent;}
#fuss {width:100%; background-color: #001058}
ul#navih {
width: 100%;
height:auto;
margin: 0; padding: 0.3em;
text-align: center;
background-color: #001058;
}
ul#navih li { color: #FBEDC1; display: inline;}
</style>
</head>
<body>
<!--kopf-->
<div id="kopf">
<h1>Hier liegt<br>eine mehrzeilige<br>Überschrift</h1>
<p>
<img id=logo src="./logo.gif" title="ein name" name="logo" alt="logo der namens GMBH"></p>
</div>
<!--ende kopf-->
<!--inhalt-->
<div id="inhalt">
<!--fangbox1-->
<div id="fang">
<!--standartkonform zentrierte box-->
<div id="zentr">
<h1 class="w100">Unser Angebot an <strong>bli bla blub</strong></h1>
<!--linke box-->
<div id="boxl">
<p>Beschreibender text</p>
<p>Beschreibender text</p>
<p>Beschreibender text</p>
<p>beschreibender text</p>
<p><img src="1.jpg" height="137" width="191"><br>
<img src="2.jpg" height="128" width="191"><br>
<img src="3.jpg" height="103" width="191"><br>
<img src="4.jpg" height="122" width="191"></p>
</div>
<!--ende linke box-->
<!--rechte box-->
<div id="boxr">
<p>eine ul-liste</p>
<p>m vnbn nnp9 </p>
<p>o oivn ioj on</p>
<p> ojio odoohio</p>
<p> iohiodfh ioc </p>
<p>oifh ioiofnoh oid oisdnio</p>
<p>miuh hsih iskxhclkx kkxc is i idhc laiha olch ishc ishoiah ishoa isch oaish osh a</p>
</div>
<!--ende rechte box-->
</div>
<!--ende zentrierte box-->
</div>
<!--ende fangbox-->
<!--navi-->
<div id="navi">
<!--<div style="padding: 0 0 0 0.3em">-->
<h2>Thema1</h2>
<ul>
<li></a><span style="font-size: 0.7em; line-height: 0.8em; color: #00FC9B; margin: 0em 0em 0em 0em ; font-weight:bold;">AAA, aktiv</span><br> <span style=" font-size: 75%; color: #00FC9B;">+ xxx</span>
<ul style="border-width:1px; border-style:solid; border-color:#00FC9B; padding:0.5em; margin:0.5em 0 1em 0;">
<li><a href="">01</a></li>
<li><a href="">02</a></li>
<li><a href="">03</a></li>
<li><a href="">04</a></li>
<li><a href="">05</a>
<hr style="width:25%; color: #00FC9B; background-color: #00FC9B; height:0.5px; text-align:center;"></li>
<li><a href="">06</a>
<ul>
<li><a href="">a</a></li>
<li><a href="">a</a></li>
<li><a href="">c</a></li>
</ul>
<hr style="width:25%; color: #00FC9B; background-color: #00FC9B; height:0.5px; text-align:center;"></li>
<li><a href="">07</a></li>
<li><a href="">08</a></li>
<li><a href="">09</a>
<hr style="width:25%; color: #00FC9B; background-color: #00FC9B; height:0.5px; text-align:center;"></li>
<li><a href="">10</a></li>
<li><a href="">11</a></li>
<li><a href="">12<br> + yyy</a></li>
<li><a href="">13<br> + zzz</a></li>
<li><a href="">14</a></li>
<li><a href="">15</a></li>
<li><a href="">16</a></li>
</ul></li>
<li><a href="">BBB</a></li>
<li><a href="">CCC</a></li>
<li><a href="">DDD</a></li>
<li><a href="">EEE</a></li>
</ul>
<h2>Thema2</h2>
<ul>
<li><a href="">AAA</a></li>
<li><a href="">BBB</a></li>
</ul>
<h2>Thema3</h2>
<ul>
<li><a href="">AAA</a></li>
<li><a href="">BBB</a></li>
<li><a href="">CCC</a></li>
<li><a href="">DDD</a></li>
</ul>
<h2>Thema4</h2>
<ul>
<li><a href="">AAA</a></li>
<li><a href="">BBB</a></li>
<li><a href="">CCC</a></li>
</ul>
</div>
<!--ende navi-->
</div>
<!--ende inhalt-->
<div id="fuss"><ul id="navih" class="klein" >
<li>Das | </li><li>ist | </li><li>eine | </li><li>horizontale | </li><li>navigations- | </li><li>leiste | </li><li>mit ul | </li><li>und | </li><li>li | </li><li>inline</li>
</ul></div>
</body>
</html>
-
Woah!
Also wenn Du schon keinen Link anbietest dann vielleicht einen Code der sich auf das wesentliche konzentriert?
Deshalb habe ich mir das auch nicht angeschaut. Aber ich aeussere mal eine wilde Vermutung: Nen clear haste wohl nicht versucht nach Deinem float, oder?
-
Woah!
Also wenn Du schon keinen Link anbietest dann vielleicht einen Code der sich auf das wesentliche konzentriert?
nun, es ist zu viel code? Naja, wenig ists nicht, aber ich wollte eben alle relevanten divs zeigen.
Deshalb habe ich mir das auch nicht angeschaut. Aber ich aeussere mal eine wilde Vermutung: Nen clear haste wohl nicht versucht nach Deinem float, oder?
Schon, aber das problem ist, dass ich ja nicht weiß, welches der drei divs da längste sein wir, bzw, das ist auf allen seiten anders, daher klebt sich die fußzeile meist an das falsche div.
-
nun, es ist zu viel code? Naja, wenig ists nicht, aber ich wollte eben alle relevanten divs zeigen.
das geht auch mit etwas weniger Inhalt.
Schon, aber das problem ist, dass ich ja nicht weiß, welches der drei divs da längste sein wir, bzw, das ist auf allen seiten anders, daher klebt sich die fußzeile meist an das falsche div.
Also bei einem 3 Spaltigem Layout liegt die Fuszeile IMMER unter dem laengsten Div. Solange man sie dort auch plaziert natuerlich.
<div>kopf</div>
<div>spalte 1</div>
<div>spalte 2</div>
<div>apalte 3</div>
<div>fuss</div>Mit dem richtigen CSS ist der Fuss unter dem laengsten DIV.
Mal sehen ob ich mich nochmal aufraffe Deinen code zu durchwuehlen und genau zu verstehen was du machst.
-
Mal sehen ob ich mich nochmal aufraffe Deinen code zu durchwuehlen und genau zu verstehen was du machst.
Auch wenn ich mir mittlerweile dadurch behelfe, dass ich die fusszeile absolut mit bottom:0 plaziere würde ich dennoch gerne verstehen, wie es mit meinem layout auch anders ginge ... :-)
-
mit floats und nem clear.
Was genau ist denn Deine Idee? Ich meine ich habe mal Deien Code kopiert und die Inhalte reduziert. Was dabei rauskommt ist ja total schlimm. Der blaue Bereich rutscht nach unten unter den Test im roten Bereich und IM roten Bereich und garnix sieht aus wie es aussehen soll. Das nehme ich jedenfalls an.
Wie soll den Deine Seite iegentlich aussehen? Soll die Navi wirklich ganz rechts ausserhalb des zentrierten Bereichs stehen? Wozu hast Du all die Divs angelegt? Inhalt, Fangbox und zentriert... Was moechtest Du damit erreichen?
Sehe ich das richtig? Du moechtest einen Rahmen (dunkelblau) aus Header, Navi (rechts) und Footer, worin ein Bereich ist, der wiederum nicht 100% genutzt wird und einen zweispaltigen Inhaltsbereich enthaelt.
----------------------------------
| Kopf |
----------------------------------
| zentrierter |Navi |
| zweispatliger | |
| Inhalt | |
----------------------------------
| Fuss |
----------------------------------Ungefaehr so?
-
mit floats und nem clear.
Sehe ich das richtig? Du moechtest einen Rahmen (dunkelblau) aus Header, Navi (rechts) und Footer, worin ein Bereich ist, der wiederum nicht 100% genutzt wird und einen zweispaltigen Inhaltsbereich enthaelt.
Kopf zentrierter zweispatliger Inhalt
Fuss Ungefaehr so?
Erstmal danke dass du dir diese mühe machst. Was kopf, Navi und Fuss betrifft, so ist das völlig richtig, was den inhalt betrifft, so bin ich da selber noch am ausprobieren. Grundsätzlich soll es auch da so sein wie von dir dargestellt mit einer ausnahme:
Die startseite des webauftritts ist quasi eine art weiche die den ganzen webauftritt in seine bahnen lenkt, weshalb es da ein zweites navi, nun links, gibt, so dass der bereich zwischen kopf und fusz dann so ausssieht:linkes navi | zentrierter zweispaltiger inhalt | rechtes Navi
Dadurch kam es zu diesem um- und einpacken, was wohl mehr verkompliziert als je geklärt hat.
Auf den normalsseiten hat sich der zentralbereich nun so verändert:
linkes div | zentriertes div |<abstand>| navi-div
wobei "linkes div" genauso breit ist wie "<abstand> + navi-div". Dadurch bleibt der zentralbereich im zentrum und die ungleich langen seitenbereiche stören nicht. Das navi will ich nicht breiter machen, und das linke div nur in navi breite wäre zu schmal. So erscheint es mir ein brauchbaren kompromiss.
Aber das geht eben *SO* auf der startseite nicht. Ich glaube der dazu hilfreichste tipp wäre einer der mir einen gangbaren weg für das abweichende grundlayout der startseite aufzeigt unter beibehaltung möglichst großer teile des folgelayouts.
Danke für deine aufmerksamkeit. Hoffentlich habe ich nicht zu spät geantwortet ...
-
2 Fragen:
Ist die Navibreite immer fix?
Brauchst Du das linke Div fuer irgendwas oder is das nur fuer den Abstand?Im Grunde schwebt Dir ja wohl sows vor:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="test.css" media="screen"> <title>divs</title> </head> <body> <div id='head'>HEADER</div> <div id='wrap'>WRAPPER<div id='content'>Content</div></div> <div id='navi'>NAVI</div> <div id='foot'>FOOTER</div> </body> </html>mit diesem CSS:
body { font:0.95em Verdana; } #head { color:#FFFFFF; background-color:#191970; } #wrap { width:80%; float:left; background-color:#66CDAA; } #content { width:50%; margin: auto; background-color:#FFFFFF; } #navi { color:#FFFFFF; width:20%; float:right; background-color:#191970; } #foot { color:#FFFFFF; clear:both; background-color:#191970; }Dabei ist nur der Container fuer den Content wohl zu weit links (im wrapper zentriert und nicht auf der Seite) und damit sich beim kleiner machen des Fensters die Container nicht untereinander schieben koennte man nochwas drumbauen das eine Mindestbreite haelt.
Sicherlich kann man den Container fuer den Content noch nach rechts verschieben dan uberlagen sich aber Content und Navi beim zusammenschieben des Fensters.
So in etwa?
-
2 Fragen:
Ist die Navibreite immer fix?Das Navi rechts ist immer gleich breit
Brauchst Du das linke Div fuer irgendwas oder is das nur fuer den Abstand?
Ich brauche das für inhalt:
Auf der startseite, und *nur* da ist es auch ein navi, genauso schmal wie das rechte navi. Es deutet farblich und inhaltlich einen gesonderten bereich an, der in einer subdomain liegt.
Auf den weiteren seiten ist die linke box *kein* navi, sondern wird als Linksammlung genutzt, muß wegen längerem linktext und lesbarkeit breiter sein als die navis.
Im Grunde schwebt Dir ja wohl sows vor:
Wie gesagt, hat sich mittlerweile etwas verändert, habe hier stqartseite UND folgeseiten in eine seite gebaut, zur demo. Leider gelingt es mir hier nicht, im startseiten demo die rechte contentbox dahin zu setzen wo sie hin soll, sie sitzt zu tief:
Aber das problem sind ja die navis bzw der footer. Wie erreiche ich, dass in jedem fall die längste box ( und das ist auch mal das navi mit mehr als 100% ) den footer nicht überschneidet sondern nach unten drückt, und dies möglichst so, dass der **quelltext** des linken und rechten navis unterhalb des contents plaziert ist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" media="screen">
<title>divs</title>
</head>
<body><div id='head'>HEADER Startseite</div>
<div id='navil1'>Navi L 1</div>
<div id='wrap1'>WRAPPER 1<div id='contentL'>Content L</div><div id='contentR'>Content R</div></div>
<div id='navir'>NAVI R</div>
<div id='foot'>FOOTER Startseite</div>
<br>
<div id='head'>HEADER Alle anderen Seiten</div>
<div id='boxl'>BOX L</div>
<div id='wrap'>WRAPPER<div id='content'>Content</div></div>
<div id='navir'>NAVI R</div>
<div id='foot'>FOOTER Alle anderen Seiten</div></body>
</html>mit diesem css:
body
{
font:0.95em Verdana;
}#head
{
color:#FFFFFF;
background-color:#191970;
}#navil1
{
color:#FFFFFF;
width:15%;
float:left;
background-color:#191970;
}#wrap1
{
width:70%;
float:left;
background-color:#66CDAA;
}#contentL
{
width:45%;
margin-left:1em;
float:left;
background-color:#FFFFFF;
}#contentR
{
width:45%;
margin-right:1em;float:right;
background-color:#FFFFFF;
}#boxl
{
color:#FFFFFF;
width:20%;
float:left;
background-color:#191970;
}#wrap
{
width:60%;
float:left;
background-color:#66CDAA;
}#content
{
width:90%;
margin: auto;background-color:#FFFFFF;
}#navir
{
color:#FFFFFF;
width:15%;
float:right;
background-color:#191970;
}#foot
{
color:#FFFFFF;
clear:both;
background-color:#191970;
}-
Das Grundproblem des Footers hatte ich Dir in meinem Vorschlag geloest. Das war das Hauptanliegen des Layouts. Ein Footer der immer unten ist.
Ne andere Frage: Muss der Inhalt wirklich auf der Seite zentriert sein und sich mit Abstaenden zwischen den beiden Navis befinden?
Ohne dieses kleine 'Feature' waere dein Layout ein Standardlayout mit 3 Spalten, Kopf und Fuss.
Grad hab ich keine Zeit, spaeter schau ich mir den Code nochmal an und seh ob ich was aendere. Vielleicht liest Du bis da ja das hier und kannst die Frage beantworten.
-
-
-
-
-
-
-
Woah!
Also wenn Du schon keinen Link anbietest dann vielleicht einen Code der sich auf das wesentliche konzentriert?
nun, es ist zu viel code? Naja, wenig ists nicht, aber ich wollte eben alle relevanten divs zeigen.
Deshalb habe ich mir das auch nicht angeschaut. Aber ich aeussere mal eine wilde Vermutung: Nen clear haste wohl nicht versucht nach Deinem float, oder?
Schon, aber das problem ist, dass ich ja nicht weiß, welches der drei divs da längste sein wir, bzw, das ist auf allen seiten anders, daher klebt sich die fußzeile meist an das falsche div.
-
des darf getrost ignoriert werden. meine Anbindung hier is so mies dass ich mich wunder, dass sowas nicht oefters passiert. (ja, nach ner Minute warten und der tatsache dass der browser zeigt er wuerde nichts tun druekct man schonmal komische tasten)
-
-
-
-
Hi,
Wie erreiche ich es, dass im folgenden layout die fußzeile in jedem fall ganz unten ist ( das navi also nicht überschneidet ) Dabei ist zu beachten, dass das dunkelblaue navi rechts nicht immer so lang ist. Das navi soll nach unten gedrückt werden, egal ob das rote, das blaue oder das dunkelblaue div das längste ist.
Mit welchem Browser testest du?
Grüße,
Engin
GYRO-
Mit welchem Browser testest du?
Letztlich mit den stqandardbrowsern IE 5.x/6, FF, opera und Konqueror unter linux.
Dein IE screenshot ist abgeschnitten, das wesentliche, die fusszeile nicht sichtbar, der FF screenshot zeigt das problem, das navi ist länger als der inhalt und drückt die fuszzeile nicht nach unten.
Nur mittlerweile habe ich kapiert, dass das eigentlich relativ einfach ist, wenn ich die fuszzeile absolut mit bottom:0 plaziere ...
-
Hi,
Dein IE screenshot ist abgeschnitten, das wesentliche, die fusszeile nicht sichtbar,
der FF screenshot zeigt das problem, das navi ist länger als der inhalt und drückt die fuszzeile nicht nach unten.
Das Rote ist doch die Navi?
Der FF, so zumindest mein Empfinden, stellt auch die Blaue Box
<div id="boxr">falsch dar, oder soll das so sien?Grüße,
Engin
GYRO-
Das Rote ist doch die Navi?
Nee, die navigation ist RECHTS, und so dunkelblau wie kopf und fusz
-
-
-
