• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

div mittig positionieren

A

anne85

New member
Ich bin noch in den Anfängen, was das entwickeln von webseiten betrifft...
...hier mein erstes großes Problem:

Ich habe eine horizontale hauptnavigationsleiste, die aus gifs besteht. Nun habe ich ein Untermenü, dass mit einem div festgelegt ist. die einzelnen unterpunkte sollen ebenfalls horizontal hintereinander angeordnet sein. nun das problem...die untermenüpunkte, die sich pro übermenüpunkt in einem div befinden, sollen mittig unter diesem angeordnet werden....wie bekomme ich heraus, wie lang mein div ist, um dessen mitte berechnen zu können?
Nachvollziehbar?
 
Nachvollziehbar!
Ein text-align:center; und ein margin:0px auto; dürfte eventuell Abhilfe schaffen.
Ansonsten wäre es für eine weitere 'Diagnose' hilfreich,
wenn Du etwas Quelltext vorlegen würdest.
 
Ich kann nicht ganz nachvollziehen wie du das gebastelt hast, aber arbeite bei Menus generell mit Listen, die du dann am besten alle entweder in ein <div> tust oder so lässt. Indem du dem body die Eigenschaft margin: 0 auto; gibst oder einen entsprechenden anderen margin Wert. Oder du gibst dem Eltern-Element eine Breite dann kannst du dem gewünschten Element auch text-align:center zuweisen.
 
hm, eigentlich brauchst Du die Breite des Haupnavigationspunkt nicht um die Subnavi darunter mittig zu setzen. Wie dkdenz schon schrieb mit margin padding und text-align geht das auch so schon.

Hier ein Beisipiel.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS-Positionierung</title>
<meta name="author" content="Sabine Freyer"></meta>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul	{
margin:0; padding:0;
list-style-type:none;
}

.toplink	{
float:left;
width:120px;
text-align:center;
background-color:#FFBBDD;
}

ul.sub	{
background-color:#FFFFCE;
}

a:link, a:visited	{
text-decoration:none;
font: bold 10px Arial, Verdana, Helvetica, Sans-Serif;
color:#00007F;
}

a:hover, a:active	{
color:#FF0000;
}

</style>
</head>
<body>
<div id="aussen">
<div id="navi">
<ul>

<li class="toplink"><a href="#">Erster Toplink</a></li>
	<ul class="sub">
         	<li><a href="#">Link1</a></li>
	         <li><a href="#">Link2</a></li>
	         <li><a href="#">Link3</a></li>
	</ul>

<li class="toplink"><a href="#">Toplink</a></li>
	<ul class="sub">
	                 <li><a href="#">Sub1</a></li>
	                  <li><a href="#">Sub2</a></li>
	                  <li><a href="#">Sub3</a></li>
	</ul>


<li class="toplink"><a href="#">dritter Toplink</a></li>
	<ul class="sub">
         	<li><a href="#">link1</a></li>
	         <li><a href="#">link2</a></li>
	         <li><a href="#">link3</a></li>
	</ul>
</ul>

</div>
</div>
</body>
</html>

Aber gib mal deinen Quelltext an, dann kann man speziell schauen. Der Wege gibt es nämlich immer viele.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben