Div in Div
1 
Der Martin
0 0 
at
Div in Div
Hallo erstmal,
also ich bin gerade dabei meine Homepage total in CSS zu "bauen/schreiben". Und jetzt hänge ich bei der Navi! UNd zwar möchte ich meine Navigation in dem Div "Header" unten "liegen" haben. Ich habe bloß keine Ahnung wie ich das machen soll. Ich kann auch nicht den div "mainnav" unter den div "header" legen da der untere Teil des Hintergrundbildes auch zur mainanv gehört! Und dieses möchte ich nciht teilen! Hier mal mein HTML-CODE:
<style type="text/css" media="screen">
body
{
margin:0;
padding:0;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
background-image:url(Material/background.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#666666;
}
a:link { color:#666666; text-decoration:underline; font-family:Verdana, Arial, Helvetica, sans-serif; }
a:visited { color:#666666; text-decoration:underline; font-family:Verdana, Arial, Helvetica, sans-serif; }
a:active { color:#666666; text-decoration:underline; font-family:Verdana, Arial, Helvetica, sans-serif; }
a:hover { color:#666666; text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; }
h1 { font-size:10px }
h2 { font-size:12px }
#container
{
margin:10px auto;
width:682px;
text-align:left;
background-color:#ffffff;
}
#header
{
height:82px;
background-image:url(Material/header_background.gif);
background-repeat:no-repeat;
background-position:top;
}
#mainnav
{
height:22px;
}
#content
{
float:right;
height:291px;
width:505px;
background-image:url(Material/content_background.gif);
background-repeat:no-repeat;
background-position:top;
}
#contenttext
{
float:left;
width:400px;
margin:10px;
}
#menuright
{
float:right;
height:291px;
width:177px;
background-image:url(Material/menurigth_background.gif);
background-repeat:no-repeat;
background-position:top;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="mainnav">
<img src="Gästebuch.gif" />
</div>
</div>
<div id="menuright"></div>
<div id="content">
<div id="contenttext">
<h1>Herzlich Willkommen auf Myperfectsite.de</h1>
<p>Schaut euch einfach mal um. Es gibt hier vieles zu entdecken: seht euch meine Arbeiten an, schreibt ins Gästebuch,...
<br /><br />
Apropos, nur so nebenbei, es sind noch <b>
<script type="text/javascript">
var eventdate = new Date("December 24, 2006 00:00:00 GMT");
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
count=Math.floor(count/(60*60*24));
document.write(count);
</script></b> Tage bis Weihnachten.
</p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>
</p>
</div>
</div>
</div>
</body>
</html>
Ach noch was: Leide ich denn an DIVITIS (oder wie das auch immer heißt)???
Mfg Lukas
-
Hi Lukas,
also ich bin gerade dabei meine Homepage total in CSS zu "bauen/schreiben".
ein guter Vorsatz. :-)
Und jetzt hänge ich bei der Navi! UNd zwar möchte ich meine Navigation in dem Div "Header" unten "liegen" haben. Ich habe bloß keine Ahnung wie ich das machen soll. Ich kann auch nicht den div "mainnav" unter den div "header" legen da der untere Teil des Hintergrundbildes auch zur mainanv gehört! Und dieses möchte ich nciht teilen!
Puh, das liest sich reichlich konfus. Ich musste den Absatz zweimal lesen, um ihn zu begreifen.
font-size:10px;
Aua. Schriftgrößen in px sind nicht anwenderfreundlich, da sie sich nur schlecht skalieren lassen (in einem sehr verbreiteten Browser gar überhaupt nicht). Besser: Angaben in % oder em.
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
background-image:url(Material/background.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;Warum zweimal font-family?
font-size:10px;
Und zweimal font-size?
a:link { color:#666666; text-decoration:underline; font-family:Verdana, Arial, Helvetica, sans-serif; }
a:visited { color:#666666; text-decoration:underline; font-family:Verdana, Arial, Helvetica, sans-serif; }
a:active { color:#666666; text-decoration:underline; font-family:Verdana, Arial, Helvetica, sans-serif; }
a:hover { color:#666666; text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; }Das kann man übersichtlicher zusammenfassen.
h1 { font-size:10px }
h2 { font-size:12px }Siehe oben: Schriftgröße in px.
#container
{
margin:10px auto;
width:682px;
text-align:left;
background-color:#ffffff;
}Welchen Sinn hat dieses Container-div? Erstens fällt es von der Dokumentstruktur her mit dem body-Element zusammen, zweitens sind auch hier die festen px-Angaben nicht schön. Ist das Browserfenster schmaler als 702px (682px Breite plus 2*10px margin, padding dürfte beim div-Element den Defaultwert 0 haben), muss man horizontal scrollen.
#header
{
height:82px;
background-image:url(Material/header_background.gif);
background-repeat:no-repeat;
background-position:top;
}Hier mag die Maßeinheit px ausnahmsweise angebracht sein, weil das Bild die größenbestimmende Komponente ist.
#mainnav
{
height:22px;
}Und die Position? Ich dachte, div#mainnav sollte am unteren Rand von div#header liegen?
<div id="mainnav">
<img src="Gästebuch.gif" />
</div>Oh, du schreibst XHTML? Okay, meinetwegen. ;-)
<br /><br />
Ein einzelnes <br> oder <br /> mag hier und da angebracht sein - aber wenn sie in Rudeln auftreten, ist das meistens ein Zeichen dafür, dass der Autor eigentlich margins oder paddings einsetzen sollte.
Apropos, nur so nebenbei, es sind noch <b>
<script type="text/javascript">
var eventdate = new Date("December 24, 2006 00:00:00 GMT");
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
count=Math.floor(count/(60*60*24));
document.write(count);
</script></b> Tage bis Weihnachten.Erstens:
"Apropos, nur so nebenbei, es sind noch Tage bis Weihnachten.
Merkst du was? Bei deaktiviertem JS sieht die Ausgabe merkwürdig aus.
Zweitens:
Was soll denn das <b>...</b> hier? Ich dachte, du wolltest CSS nutzen?Ach noch was: Leide ich denn an DIVITIS (oder wie das auch immer heißt)???
Ja, ein wenig. Aber ich nehme an, es ist noch heilbar. Die anderen beiden Fragen sind aber so klein geschrieben, dass ich sie nicht entziffern kann. ;-)
Schönes Wochenende noch,
Martin--
Faulheit ist, mit dem Cocktailshaker in der Hand auf das nächste Erdbeben zu warten.-
Puh, das liest sich reichlich konfus. Ich musste den Absatz zweimal lesen, um ihn zu begreifen.
Ja hab ich dann auch geamerkt als es schon im Forum war! :-(
Warum zweimal font-family?
Und zweimal font-size?War keine Absicht!
a:link { color:#666666; text-decoration:underline; font-family:Verdana, Arial, Helvetica, sans-serif; }
a:visited { color:#666666; text-decoration:underline; font-family:Verdana, Arial, Helvetica, sans-serif; }
a:active { color:#666666; text-decoration:underline; font-family:Verdana, Arial, Helvetica, sans-serif; }
a:hover { color:#666666; text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; }Das kann man übersichtlicher zusammenfassen.
Und wie?
Welchen Sinn hat dieses Container-div? Erstens fällt es von der Dokumentstruktur her mit dem body-Element zusammen, zweitens sind auch hier die festen px-Angaben nicht schön. Ist das Browserfenster schmaler als 702px (682px Breite plus 2*10px margin, padding dürfte beim div-Element den Defaultwert 0 haben), muss man horizontal scrollen.
Ich möchte gerne dass meine ganze Seite
1. zentriert sein soll
2. soll es ein "festes Seitenlayaout" sein»
Und die Position? Ich dachte, div#mainnav sollte am unteren Rand von div#header liegen?
Das Problem war ja das ich nciht den Befehl dazu weiß!!!!
<div id="mainnav">
<img src="Gästebuch.gif" />
</div>Oh, du schreibst XHTML? Okay, meinetwegen. ;-)
Was?? Warum XHTML???
Ein einzelnes <br> oder <br /> mag hier und da angebracht sein - aber wenn sie in Rudeln auftreten, ist das meistens ein Zeichen dafür, dass der Autor eigentlich margins oder paddings einsetzen sollte.
OK, werde ich beachten!
Erstens:
"Apropos, nur so nebenbei, es sind noch Tage bis Weihnachten.
Merkst du was? Bei deaktiviertem JS sieht die Ausgabe merkwürdig aus.Ich weiß schon! Wollte es noch mit <no script> ein Paar</no script> erweitern!
Zweitens:
Was soll denn das <b>...</b> hier? Ich dachte, du wolltest CSS nutzen?Oh tut mir leid!!! Blöde Frage doch wie kann ich den mit CSS etwas "fett" machen????
Ja, ein wenig. Aber ich nehme an, es ist noch heilbar. Die anderen beiden Fragen sind aber so klein geschrieben, dass ich sie nicht entziffern kann. ;-)
Welche andern Fragen????
Mfg Lukas
-
Hallo Lukas,
Das kann man übersichtlicher zusammenfassen.
Und wie?Indem man die übereinstimmenden Eigenschaften nur einmal angibt:
a:link, a:visited, a:hover, a:active
{ color:#666666; text-decoration:underline; font-family:Verdana, Arial, Helvetica, sans-serif; }
a:hover
{ text-decoration:none; }Ich möchte gerne dass meine ganze Seite
- zentriert sein soll
- soll es ein "festes Seitenlayaout" sein
Gerade Punkt 2. ist normalerweise nicht empfehlenswert. Starre Layouts sind zwar meist einfacher zu erstellen, aber aus Anwendersicht nicht so elegant und praktisch. Die hohe Kunst des Webdesigns besteht darin, Layouts so zu gestalten, dass sie sich der Fenstergröße anpassen ("liquid designs" oder "fließende Layouts"). Aber fangen wir ruhig mal mit den einfacheren Beispielen an.
Und die Position? Ich dachte, div#mainnav sollte am unteren Rand von div#header liegen?
Das Problem war ja das ich nciht den Befehl dazu weiß!!!!Hehe. :-)
Ist auch nicht ganz trivial, wenn man die Kniffe nicht kennt. Ich empfehle als Einstieg mal die Lektüre von http://de.selfhtml.org/css/eigenschaften/positionierung.htm.Um ein Element überhaupt zu positionieren, bietet sich die Eigenschaft position an. Für deine Zwecke bietet sich position:absolute in Verbindung mit bottom:0 für div#mainnav an, damit das Element mit einem Abstand von 0 am unteren Rand des Elternelements zu liegen kommt.
Aber bitte höllisch aufpassen, worauf sich die Positionsangabe bezieht! Man ist geneigt anzunehmen, dass es einfach das umgebende Element ist - aber ganz so einfach ist es eben leider nicht. Das gilt nur dann, wenn das umgebende Element seinerseits nicht static (Defaultwert) positioniert ist.
Das heißt, du musst div#header auch noch positionieren. Auch absolut? Wäre möglich, aber dann hast du die Überlegung für das nächste umgebende Element wieder. Besser ist hier position:relative. Damit wird das Element nur relativ zu seiner Position verschoben, die es normalerweise hätte. Macht man dann keine weiteren Angaben zur Position, bleibt das Element de facto an seiner gewohnten Stelle, ist aber formal um 0px gegenüber seiner Normalposition verschoben.
Und scho ham mer's!Oh, du schreibst XHTML? Okay, meinetwegen. ;-)
Was?? Warum XHTML???Dir ist der Unterschied zwischen HTML und XHTML nicht bekannt? Dann solltest du dich darüber informieren. Dein Quellcode sieht zwar, soweit ich das auf den ersten Blick sehe, auch als XHTML korrekt aus, aber es ist ungewöhnlich, dass ein Einsteiger gleich mit XHTML anfängt (mir ist die Art aufgefallen, wie du leere Elemente schließt: mit "/>").
"Apropos, nur so nebenbei, es sind noch Tage bis Weihnachten.
Merkst du was? Bei deaktiviertem JS sieht die Ausgabe merkwürdig aus.
Ich weiß schon! Wollte es noch mit <no script> ein Paar</no script> erweitern!Gute Idee! Aber dann schreib <noscript> bitte richtig.
Was soll denn das <b>...</b> hier? Ich dachte, du wolltest CSS nutzen?
Oh tut mir leid!!! Blöde Frage doch wie kann ich den mit CSS etwas "fett" machen????Es gibt einerseits die HTML-Elemente <strong> und <em>, um Textabschnitte als "besonders wichtig" auszuzeichnen. Abgesehen davon kann die Schriftstärke mit der CSS-Eigenschaft font-weight justiert werden.
Ja, ein wenig. Aber ich nehme an, es ist noch heilbar. Die anderen beiden Fragen sind aber so klein geschrieben, dass ich sie nicht entziffern kann. ;-)
Welche andern Fragen????Na, die vor den übrigen Fragezeichen. Und die anderen drei Fragen lauten ...?
So long,
Martin--
Der Bäcker schlägt die Fliegen tot
Und macht daraus Rosinenbrot.-
Hallo Martin,
danke erstaml für deine Antworten!Also das mit dem festen Layout werde ich mir noch mal überlegen, aber zum üben denke lass ich erstmal noch so. Mit dem positionieren war/bin ich ich wirklich nicht so fit :-( Aber das hole ich noch auf!
Das mit " />" fand ich auch komisch als ich mit Dreamwaever angefangen habe!! Ich habe früher meine Tags immer ganz normal abgeschlossen, aber mein Dreamwaever hat mir das einfach so gemacht! Und da dachte ich das ist vielleicht irgendwas neues oder webkomformeres. Deshalb habe ich es übernommen!
<no script>!!!!!!!! Hmmmm da hab ich mich wohl verschrieben! ;-)
Ja und das mit dem Textformatieren muss ich auch ncoh mal wieder holen!
Also danke noch mal!!
Lukas
-
Hallo.
Das mit " />" fand ich auch komisch als ich mit Dreamwaever angefangen habe!! Ich habe früher meine Tags immer ganz normal abgeschlossen, aber mein Dreamwaever hat mir das einfach so gemacht! Und da dachte ich das ist vielleicht irgendwas neues oder webkomformeres. Deshalb habe ich es übernommen!
dann http://de.selfhtml.org/html/xhtml/unterschiede.htm#leere_elementetitle=informiere dich bitte. Der Rest der Seite ist in diesem Zusammenhang übrigens auch recht interessant.
MfG, at-
Hallo.
Besser.
MfG, at -
»»Der Rest der Seite ist in diesem Zusammenhang übrigens auch recht interessant.
Was meinst du mit interessant??? Fehler??
-
Hallo.
»»Der Rest der Seite ist in diesem Zusammenhang übrigens auch recht interessant.
Was meinst du mit interessant??? Fehler??
Die Frage müsste offenbar eher lauten: Welche Seite meinst du? Und ich meine nicht deine, sondern die von mir referenzierte, welche weitestgehend fehlerfrei sein dürfte.
MfG, at-
Die Frage müsste offenbar eher lauten: Welche Seite meinst du? Und ich meine nicht deine, sondern die von mir referenzierte, welche weitestgehend fehlerfrei sein dürfte.
MfG, atOK, Ich dachte das MEINE Seite total "flasch/kaputt" sei!
Aber ich habe jetzt alles auf HTML 4.01 Transitional umgestellt! Also fast alles neu geschrieben. Das Problem war dass ich am Anfang beim Dreamweaver nicht HTML 4.01 Transitional sondern XHTML 1.0 eingestellt habe. Naja jetzt ist alles wieder im alten :-P und ohne " />"
Aber trotzdem danke für deine Links.Mfg Lukas
-
-
-
-
-
-
Hallo.
<div id="mainnav">
<img src="Gästebuch.gif" />
</div>Oh, du schreibst XHTML? Okay, meinetwegen. ;-)
Aber bitte valide.
MfG, at-
Hallo,
<img src="Gästebuch.gif" />
Oh, du schreibst XHTML? Okay, meinetwegen. ;-)Aber bitte valide.
oh, da war ich aber unaufmerksam! Offensichtlich habe ich mich so auf andere Aspekte der Fragestellung konzentriert, dass mir dieses Detail untypischerweise durch die Lappen ging. Das ist ja nicht einmal eine spezielle XHTML-Sünde ...
Schönen Abend noch,
Martin--
Denken ist wohl die schwerste Arbeit, die es gibt. Deshalb beschäftigen sich auch nur wenige damit.
(Henry Ford, amerikanischer Industriepionier)
-
-