nicht angemeldet
Abstand vom unteren rand
Hallo ich habe eine Seite gemacht mit 2 css Rahmen (Links ein kleiner für die Links .. und rechts für den Inhalt.
Im Linken rahmen habe ich wieder 3 kleinere der 1. Für den seitennamen der 2. für die links und der 3. für noch ein paar sachen
das sieht dann so aus im Quelltext
<span id="menue">
<span id="oben"></span>
<span id="links"></span>
<span id="unten></span>
</span>
der untere rahmen in menü soll jezt aber nicht mit einem abstand nach oben ausgerichtet werden sonder er soll 10px vom unteren rand des Menü rahmens entfernt sein wie kann ich das machen??
Und wie kann ich dann einstellen dass der mitlere rahmen -also der links rahmen - genau 10px abstand nach oben und nach unten hat? Also so dass die höhe von den oben und unten Rahmen abhängig ist
mfg
Alex
-
Hi Alex,
Ein <div> statt eines <span> halte ich für geeigneter, da ohne CSS sonst alles in einer Wurst steht.
<div id="menue">
<div id="oben"></div>
<div id="links"></div>
<div id="unten></div>
</div>der untere rahmen in menü soll jezt aber nicht mit einem abstand nach oben ausgerichtet werden sonder er soll 10px vom unteren rand des Menü rahmens entfernt sein wie kann ich das machen??
Wenn du ein Element unten ausrichten willst, musst du es absolut und mit bottom: positionieren. Opera 6 will dann noch ein height:, damit das funktioniert. Ich glaube aber nicht, dass du das willst, siehe unten.
Und wie kann ich dann einstellen dass der mitlere rahmen -also der links rahmen - genau 10px abstand nach oben und nach unten hat?
#links { margin:10px 0 }
Mit absoluter Positionierung entfernst du ein Element aus dem Fluss, ein irgendwo definierter Außenabstand wirkt dann *auf dieses* nicht mehr. Ich würde an dieser Stelle nichts absolut positionieren.
Also so dass die höhe von den oben und unten Rahmen abhängig ist
Willst du jetzt die Höhe des Menüs von dessen Inhalt abhängig machen und nur die Abstände zwischen den IDs definieren? Dazu benötigst du nur margin:, die Höhe von #menue passt sich dem Inhalt von alleine an. Vielleicht erklärst du nochmal, was du erreichen willst, damit wir dir besser helfen können.
Grüße,
Roland--
SELFTREFFEN 2003 - http://selftreffen.kuemmi.ch/-
Hallo
also hier mal der Quelltext:
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head><body bgcolor="#FFFFFF" text="#000000" background="bg.gif">
<span id="menue">
<div id="menue_oben">
<center style="margin-bottom:3px; margin-top:3px;">
<b>Seiten<br>name</b>
</center>
</div><div id="menue_links">
hier sollen links rein</div>
<div id="menue_unten"><center>hier kommt noch etwas rein</center>
</div></span>
<span id="linie_1"></span> <span id="oben">
<center>
<b>- Home -</b>
</center>
</span>
<hr id="linie_2">
<span id="main">
</span></body>
</html>und hier der vom Style.css:
#menue{margin-left:0.5%; border-width:1px; border-style:solid; width:15%; height:99.7%;
background-image: url(gitter_bg.gif);}
#menue_oben{margin:10px; width:100%; border-width:1px; border-style:solid; height:0px;
background-image: url(bg_heller.gif); }
#menue_links{margin:10px;width:100%; border-width:1px; border-style:solid; height:0%;
background-image: url(bg_heller.gif); }
#menue_unten{margin:10px; top:1130px; width:100%; border-width:1px; border-style:solid;
height:40px; background-image: url(bg_heller.gif); }
#linie_1{margin-top:-0.5%; margin-left:1%; border-width:1px; border-style:solid; width:0.1%;
height:96.5%; position:absolute}
#oben{margin-right:0%; border-width:1px; margin-left:2%; border-style:solid; width:82%; height:3%;
position:absolute; background-image: url(bg_heller.gif);}
#linie_2{margin-top:3%; margin-right:0%; border:1px; margin-left:1%; border-style:solid;
width:83.5%; height:2px; position:absolute; color:black;}
#main{margin-right:0%; margin-top:4%; margin-left:2%; border-width:1px; border-style:solid;
width:82%; height:88.5%; position:absolute; background-image: url(bg_heller.gif);}
a {text-decoration:none; color:black;}
a:hover {text-decoration:none; color:blue;}
a.flipl:hover span.flipsp {padding:10px;}also: der untere rahmen soll vom unteren rand von dem rahmen der menü heist 10px entfernt sein der ober soll vom oberen rand 10px entfernt sein und dazwischen kommt dann die linkliste die soll auch auch je 10 px nach oben und unten entfernt sein.
das heist dann dass wenn im rahmen oben oder unten viel steht die linkliste kleiner wird und wenn wenig drinnen ist wird sie grösser also so dass die höhe von den andern rahmen abhängig ist geht das???mfg
Alex
-
hi Alex,
also das:
<center style="margin-bottom:3px; margin-top:3px;">
sieht ja wirklich sehr lustig aus..;-)
Nicht nur, daß Du diesen veralteten Tag überhaupt verwendest, sondern daß Du ihn dann auch noch per CSS formatieren willst.
Gruß
Ingo-
Ist aber doch nicht falsch oder?
Kannst du mir auch auf meine Fragge eine Antwort geben??
mfg
Alex-
Ist aber doch nicht falsch oder?
hi alex,
falsch zwar nicht, aber wenn ich mal aus selfhtml zitieren darf:
Es ist mittlerweile eigentlich überflüssig und sollte nur noch in begründeten Ausnahmefällen (z.B. Abwärtskompatibilität zu Netscape 1.1) benutzt werden.
und diese kombination mit css von dir könnte schon probleme bereiten, denn die frage ist, wie der/die browser <center> eigentlich exakt interpretieren, was m.e. durchaus einfluß auf die css-formatierung haben könnte.
gruß
Ingo
-
-
-
Hi Alex,
<body bgcolor="#FFFFFF" text="#000000" background="bg.gif">
-> body { color:#000; background:#fff url(bg.gif); }
<div id="menue_oben">
<center style="margin-bottom:3px; margin-top:3px;">
<b>Seiten<br>name</b>
</center>
</div>Das ist umständlich, hier ein Vorschlag:
h1 { text-align:center; font-weight:bold; margin:3px 0; }
<h1 id="menue_oben">Seitenname<h1>
<div id="menue_links">
hier sollen links rein
</div>Ok, das passt so.
<div id="menue_unten"><center>hier kommt noch etwas rein</center>
</div><center> ist veraltet, löse das besser per CSS:
#menue_unten { text-align:center; }
<span id="linie_1"></span>
<hr />?
<span id="oben">
<center>
<b>- Home -</b>
</center>
</span>#oben { text-align:center; font-weight:bold; }
<hr id="linie_2">
Ok.
<span id="main">
</span><div>?
Dein Stylesheet jage bitte zunächst ein paar Mal durch den Validator, er zeigt dir relativ viele Fehler und einen Haufen Warnungen.
also: der untere rahmen soll vom unteren rand von dem rahmen der menü heist 10px entfernt sein der ober soll vom oberen rand 10px entfernt sein und dazwischen kommt dann die linkliste die soll auch auch
je 10 px nach oben und unten entfernt sein.
#menue_oben, #menue_unten { margin-bottom:10px; }
<body>
<div id="menue">
<h1 id="menue_oben">Seiten<br />name</h1>
<div id="menue_links">hier sollen links rein</div>
<div id="menue_unten">hier kommt noch etwas rein</div>
</div><hr />
<p id="oben">- Home -</p>
<hr id="linie_2" /><div id="main">
<h2>Überschrift<h2>
<p>Inhalt...</p>
</div>
</body>Ich denke, das wolltest du.
Grüße,
Roland--
SELFTREFFEN 2003 - http://selftreffen.kuemmi.ch/-
Hallo
danke erstmal
aber der untere rahmen #menue_unten soll doch nur 10px vom untern menürahmen #menue entfernt sein. Jezt sieht es jedenfalls bei mir genau so aus wie vorher. Oder kannst du mal den ganzen Quelltext mit den styles posten wenns bei dir so ist wie ich es gerne hätte?
mfg
Alex
-
-
-