Position bestimmen

[rest0ck]

Hey, bin mich seit paar Tagen mit css am beschäftigen und will nun auf meiner kleinen Seite zum Üben ein Menü einbauen:
Referenzen

So was ich bisher getan habe:

.html (wie gesagt das Menü dient vorerst nur dem Testzweck, also die Menüpunkte sich frei gewählt ^^)

<h1 id="header">
	<ul>
    	<li><a href="index.html">Referenzen</a></li>
        <li>About</li>
        <li>Freeware</li>
        <li>Impressum</li>
	</ul>
</h1>

.css

#header ul {
	text-align:center;
	background-image:url(Bilder/menu.gif);
	margin:auto;
	width:562px;
	height:26px;
	padding-top:10px;
}

#header li {
	color:black;
	font-size:13px;
	display:inline;
	padding-right:22px;
	padding-left:22px;
}

#header li a:hover {
	color:white;
}

So, jetzt hängt das eben über dem Header (dem Bild) - ich kenne zur Positionsbestimmung nur float:right oder left, aber es ist nunmal mittig, also wie kann ich jetzt theoretisch mitten in einen Div, ein anderen platzieren?

rest0ck

/e ich habs jetzt durch float:right und eben margin gelöst, aber meine Frage besteht immernoch: Gibt es keine Andere Möglichkeit? Sowas wie ehm ..SetPoint:Bottom ..oder Top, oder sonstwas?

 

[Fisker31]

Ich kann nicht ganz nachvollziehen was du meinst, ich denke es gibt eine einfache Antwort darauf. Dennoch, kannst du mir etwas genauer beschreiben was du mit dem Menu machen willst?

 

[rest0ck]

Na das Menü soll genau dort hin, wo es jetzt ist.
Allerdings will ich wissen, ob es nicht eine andere Variante als das float:right und dann margin-right?
Wenn ich ein div in einem div z.b. zentrieren will, wie mache ich das denn dann?
Ich kann ja nicht sagen float:bottom z.B.
Jetzt verstanden? Ist schwer zu beschrieben, ich will wissen wie ich Sachen einfacher/richtig/anders positioniere, als den Weg den ich gehe :s?

 

[Fisker31]

Hab mir mal den Code angesehen, ich DENKE ich verstehe nun den Sachverhalt. Um dies anders zu realisieren musst du folgendes Ändern:

#header ul {
	text-align:center;
	background-image:url(Bilder/menu.gif);
	margin-top:211px;
	margin-left:auto;
	margin-right:auto;
	width:562px;
	height:26px;
	padding-top:10px;
}

Die Liste (<ul>) braucht eine definierte Breite, dann kannst du mit margin-left und margin-right auto den abstand rechts und links automatisch festlegen.

Ich denke das ist die Lösung? Entschuldige falls ich es komplett anders verstanden habe...hab gestern zu sehr gefeiert

 

[Elroy]

Hallo.

Tut mir leid aber dein HTML Code ist fehlerhaft.

Ein <h1> darf kein <ul> enthalten.
Versuche das anders zu lösen. Schliese erst dein <h1> und setzte dann deine Navigation.

Noch mal zu Verdeutlichung: HTML dient zum semantischen Auszeichnen deines Inhalts.

Gruss
Elroy

 

[rest0ck]

Hm leider spinnt dropbox grad, es wird nichts hochgeladen.
Also ohne float kann das doch nicht funktionieren, oder? Dann sitzen die ja quasi nebeneinder? (sollen ja 2 ineinander)

Und wegen dem h1, soll ich das <ul> dann vor das h1 setzen? (sollte zwar eigentlich dahinter, aber so funktioniert es irgendwie nicht? ._.)

<div id="menu">
	<ul> 
		<li class="menuborder"><a href="#">Referenzen</a></li>
		<li class="menuborder"><a href="#">About</a></li>
		<li class="menuborder"><a href="#">Freeware</a></li>
		<li><a href="#">Impressum</a></li>
	</ul>
</div>
<h1 id="header"></h1>

/e
http://dl.dropbox.com/u/7066359/hp/test.html

/e Okay, also dadurch das ich "ul" und menu die selbe Breite gegeben habe, ist das menu jetzt ja trotz float:right mittig, aber der menu div steht über dem h1, das ist eig nicht richtig, oder?

 

[devilseye]

für was das h1 zuständig ist weisst du aber?

h = header = überschrift (das sagt eigentlich auch schon aus wesshalb du ein header tag nicht vor eine ul setzt denn dieser zeichnet Text als wichtig aus. Eine ausnahme bilden Bilder welche als h1 bezeichnet werden können, bringt jedoch nur etwas wenn für das Bild auch ein alt bestimmt wurde.)
1-6 bezeichnen die wichtigkeit

desshalb macht es auch keinen Sinn ein h1-h6 in eine Liste packst denn in eine Liste kommen keine überschriften sondern nur listen punkte.

mfg devilseye

 

[rest0ck]

Jetzt bin ich verwirrt, .. ist der von mir gewählte Weg 2 Posts höher nun korrekt, oder nicht? ._.
Hab nun auch der header id text-indent: -9999px beigefügt und ins h1 den Titel der HP gesetzt, sozusagen die "alt".

 

[devilseye]

rein grundsätzlich kannst du deinem h1 tag schon eine id vergeben du kannst allerdings auch dein h1 direkt per css bearbeiten

.means

h1 { color: #00ff00;}

wenn du nun dem body jeweils noch eine id vergibst z.B. #home oder #about usw dann kannst du den h1 auf den jeweiligen seiten per

#home h1 { color: #FFF; }
#about h1 { color: #0FF; }

ich finde die id vergabe an body um einiges sinnvoller als dem h1 direkt eine id zu geben.

mfg devilseye

 

[rapid10]

ich finde die id vergabe an body um einiges sinnvoller als dem h1 direkt eine id zu geben.

Geschmackssache ... und semantisch ist beides korrekt.