02.09.2004, 21:58
|
|||
|
|||
Für die Überschrift mit h1 gibt es schon mal einen Pluspunkt!
 Wo genau ist denn das Problem mit dem Floaten? Ich hab vorgestern mal ne kurze Testseite gepostet, dort ist eigentlich alles zu finden, was Du brauchst. Die 3 px vom IE stören in diesem Layout nicht weiter, da brauchst Du dann keinen wilden Extra-Hack...... Du mußt dann nur noch ein padding-top dazugeben, damit man das Menü auch sieht.....  : http://www.xhtmlforum.de/viewtopic.php?p=8669#8669
|
| Sponsored Links |
|
03.09.2004, 21:29
|
|||
|
|||
|
Okay, hab das Menü mal eingebunden mit Floating - ich muss allerdings gestehn, dass mir nicht hundertprozentig klar ist, warum und ob ich das Menü überhaupt im "navioben-Div" verschachteln darf - außerdem reicht mir der padding-top allein nicht aus, da der Container nicht bis zum linken Rand des linken Balkens geht, sondern früher aufhört!?
Hab einige Zeit lang drüber nachgegrübelt aber es ergibt sich mir nix draus - wegen der Positionierung des Inhalts-divs ist mir bis jetzt auch noch kein Geistesblitz gekommen  Lieber Gruß, Blacky Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Musikverein Herlikofen 1930 e.V.</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
<!--
#linkenavi {list-style-type:none; float:left; padding-top:80px; }
#navioben {position:absolute; top:50px; width:100%; }
h1 {margin:0 60% 0 40%; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; }
body {background-color:#FFFFFF;}
#bigdiv { position:relative;
margin:5% 10% 0 10%;
background:#fff url(Bilder/streifenh.gif) repeat-x top; }
.ol { display:block; position:absolute; top:-16px; left:-66px; }
.or { display:block; position:absolute; top:-16px; right:-57px; }
/* Tan Hack */
* html #bigdiv /* dies wird nur von den IEs interpretiert*/
{
width: 100%; /*Wert für den IE5*/
w\idth: 80%; /*Wert für den IE6*/
font-family: Arial, Helvetica, sans-serif;
}
#leftdiv {
background:url(Bilder/streifenv.gif) repeat-y left;
height:100%; /*braucht der IE*/
}
#rightdiv {
background:url(Bilder/streifenv.gif) repeat-y right;
height:100%; /*braucht der IE*/
}
#inhalt {
padding-top:100px;
margin:0 190px;
min-height: 400px;
}
*html #inhalt { height:400px; } /*nur für den IE*/
-->
</style>
</head>
<body>
<div id="bigdiv"> [img]Bilder/ol.gif[/img] [img]Bilder/or.gif[/img]
<div id="navioben">
<div>
<ul id="linkenavi">[*]<a href=#>Menüpunkt[*]<a href=#>Menüpunkt[/list] </div>
<h1>Überschrift</h1>
</div>
<div id="leftdiv">
<div id="rightdiv">
<div id="inhalt"> und hier der Inhalt hin</div>
</div>
</div>
</div>
</body>
</html>
|
| Sponsored Links |
|
03.09.2004, 21:44
|
|||
|
|||
|
Zitat:
Außerdem solltest Du Dir (und mir ) einen Gefallen tun und den Code noch mal besser ordnen - toscho hatte das hier mal schön beispielhaft dargestellt, wie man das machen kann: http://www.xhtmlforum.de/viewtopic.php?p=8617#8617
|
|
04.09.2004, 21:20
|
|||
|
|||
|
Okay - die schlechte Nachricht zuerst - ich bin mir immer noch nicht im Klaren darüber, wie ich die Liste verschachteln soll,
die gute: Hier der neu strukturierte Quelltext :Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Musikverein Herlikofen 1930 e.V.</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
<!--
#linkenavi { list-style-type:none;
float:left;
padding-top:180px;
}
#navioben { position:absolute;
top:50px;
width:100%;
}
h1 { margin:0 60% 0 40%;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
}
body { background-color:#FFFFFF;
}
#bigdiv { position:relative;
margin:5% 10% 0 10%;
background:#fff url(Bilder/streifenh.gif) repeat-x top;
}
.ol { display:block;
position:absolute;
top:-16px;
left:-66px;
}
.or { display:block;
position:absolute;
top:-16px;
right:-57px;
}
/* Tan Hack */
* html #bigdiv /* dies wird nur von den IEs interpretiert*/
{
width: 100%; /*Wert für den IE5*/
w\idth: 80%; /*Wert für den IE6*/
font-family: Arial, Helvetica, sans-serif;
}
#leftdiv { background:url(Bilder/streifenv.gif) repeat-y left;
height:100%; /*braucht der IE*/
}
#rightdiv { background:url(Bilder/streifenv.gif) repeat-y right;
height:100%; /*braucht der IE*/
}
#inhalt { padding-top:100px;
margin:0 190px;
min-height: 400px;
}
*html #inhalt { height:400px; /*nur für den IE*/
}
-->
</style>
</head>
<body>
<div id="bigdiv">
<div>
<ul id="linkenavi">[*]<a href=#>Menüpunkt[*]<a href=#>Menüpunkt[/list] </div>
[img]Bilder/ol.gif[/img] [img]Bilder/or.gif[/img]
<div id="navioben">
<h1>Überschrift</h1>
</div>
<div id="leftdiv">
<div id="rightdiv">
<div id="inhalt"> und hier der Inhalt hin</div>
</div>
</div>
</div>
</body>
</html>
Jetzt zu meiner Frage... die Liste ist grad direkt im Bigdiv-Container verschachtelt - der müsste ja alles umfassen - und insbesondere ja auch beide Balkengrafiken umfassen, da die ja wiederum in ihm verschachtelt sind - warum aber wird bei float:left; die Liste nicht ganz links am Balken, sondern scheinbar "mitten in der Landschaft" platziert? Ich kann mir keinen Reim drauf machen, dass ein anderer Div dafür verantwortlich ist und vor allem kann das ja nicht sein, da der #linkenavi-Div ja vor allen anderen, also auch vor den Balkengrafiken, notiert ist (siehe Quelltext oder http://mv-herlikofen.de/testindex5/index.htm
|
|
05.09.2004, 13:28
|
|||
|
|||
|
Ist schon besser und nicht mehr ganz so "ullesiert"
.Trotzdem wäre es schön, wenn es noch strukturierter wäre - hilft Dir und mir (oder jedem anderen, der sich einmischen will - aber anscheinend traut sich das keiner...) Mal ein Vorschlag von mir: /*allgemeine Eigenschaften*/ body {..hier Anweisungen für den Body..} h1 {....} h2 {.....} ... p {.....} a:link {....} .. /*Layoutcontainer*/ #bigdiv {.....} #leftdiv {würde ich noch in higruli für Hintergrundlinks umbenennen} #rightdiv {umbenennen in higrure } #navioben {.....} #menulinks {.Bezeichnung für den Menücontainer, der hat bei Dir noch keine Bezeichnung.} #inhalt {......} .ol {...} .ul {...} /*Menü*/ #menu ul {.ich würde der Liste keine eigene id zuweisen, sondern es so schreiben...} #menu li {...} #menu li a {....} /*weitere Klassen*/ gibts noch nicht.... Und dann wird vielleicht auch klarer, was ich mit diesem Satz gemeint hab: "Betrachte die drei Container #bigdiv, #leftdiv und #rightdiv mal als einen einzigen. Ich habe drei machen müssen, weil man pro Container nur einen Hintergrund definieren darf." Du hast jetzt Dein Menü "dazwischen" gesetzt - da es floatet und sowieso aus der normalen Positionierung raus ist, ist es egal, aber ist so sehr unübersichtlich - setze es in die drei Container rein und laß die drei draußen - die sind nur fürs Layout und "zur Zierde", ebenso wie die Bilder oben (bei denen es aufgrund der absoluten Positionierung auch egal ist, wo Du sie hinschreibst, nur irgendwann nach dem Elternelement #bigdiv halt). Du solltest dem umgebenden Container eine id zuweisen und den floaten lassen, nicht die Liste selber. Noch ein Tipp: wenn Du bei den Containern nicht mehr genau weißt, wo die sitzen, dann markiere sie - gib Ihnen einen Rahmen oder eine Hintergrundfarbe zum testen. Dann wirst Du sehen, dass die Liste schon korrekt sitzt - aber es ist eben eine Liste und damit "von Natur aus" eingerückt. Du mußt padding und margin von ul auf 0 setzen, damit das weg ist. Auch der #navioben kann in die drei Container rein - und muß die absolute Positionierung wirklich sein? - ein einfaches padding-top würde reichen, denke ich. Tja, und dann muß nur noch der Inhaltscontainer noch ein wenig besser platziert werden - das schaffst Du schon - eigentlich mußt Du nur noch mit margin und padding etwas rumspielen. Tutorialende. Viele Grüße, Terry
|
|
05.09.2004, 14:30
|
|||
|
|||
|
Abschließendes Dankwort ^^"
Hinter einem Forum stehen immer Personen. Nicht nur Mods und Admins, die oft "nur ihre Pflicht" tun, sondern egal ob priviligiert durch einen Status oder als ganz normaler User, trägt man Verantwortung für das Image eines Forums. Bei der Masse an Foren, die es heute gibt, ist es alles andere als eine Selbstverständlichkeit, dass es Leute gibt, die "Noobies" trotzdem unterstützen und sich daran zurückerinnern, dass sie ja eigentlich auch mal angefangen haben und genauso auf die Hilfe anderer angewiesen waren. Leute wie Terry, und ich bin überzeugt, dass es von "dieser Sorte" *g* noch mehr Engel gibt , sind es, auf die ich mich beziehe - auch wenn du's weniger wegen mir (im Prinzip kennt man sich ja auch nicht), sondern viel mehr wegen der Gemeinschaft getan hast, so soll es umso mehr ein gutes Beispiel für andere sein.Allzu oft hast du wohl vorm Monitor gesessen und diesen da ufgesetzt:  . Trotzdem hast du Geduld gezeigt und mir bei meinen Probs weitergeholfen und mir auch nicht alles nur vorgeworfen, sondern sogar spezielle pädagogische Fähigkeiten bewiesen und mich erst selber ne Weile rumtüfteln und aufregen lassen *g*Dafür möchte ich dir vielmals danken und dass ich diesem Forum treu bleiben werde, so weit das meine Zeit zulässt, ist hauptsächlich dir zu verdanken. Kurz gesagt: Danke Terry Ich hoffe, man "begegnet sich noch oft" und hat Spaß an früchtetragenden Diskussionen. So nun is ausphilosophiert, thx für die Leutz, die's überhaupt gelesen ham und sich net bei der Hälfte gelangweilt fühlten *g* Euer Fladdy
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Linear-Darstellung
