Zum Inhalt springen

Menü mit CSS steuern und ausrichten

Erstellt am 25. März 2007 · 1 Antwort · letzte Antwort am 25. März 2007

Tags: HTML & CSS, Frage

via ·

Hallo ich überarbeite gerade die Seite von meinem Vater mit CSS als Einstieg in das Thema CSS.

http://www.viv-it.de/

Nur schaffe ich es noch nicht, dass die Navigation in der roten Box horizontal zentriert ist.

Kann mir jemand sagen was ich hier noch nicht korrekt mache?

Viele Grüße,
Oliver

Mein HTML Template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>viv-it.de</title>

</head>
<body topmargin="0" leftmargin="0" marginleft="0" marginright="0">
<!--###DOCUMENT_BODY###  start-->

<div id="HEAD"><img src="fileadmin/templates/viv-it/images/background_960x140.jpg" height="140" width="960" alt="" /></div>
<div id="MENU"><!--###MENU### start-->Menu<!--###MENU### stop--></div>
<div id="TITLE"><!--###HEADER### start-->Header<!--###HEADER### end--></div>
<div id="CONTENT"><!--###CONTENT###  start-->Content hier<!--###CONTENT###  stop--></div>
<div id="CONTENT_RIGHT"><!--###CONTENT_RIGHT###  start-->Content Right hier<!--###CONTENT_RIGHT###  stop--></div>

<div id="BOTTOM_MENU"><!--###BOTTOM_MENU### start-->Bottom Menu<!--###BOTTOM_MENU### end--></div>


<!--###DOCUMENT_BODY###  stop-->

</body>
</html>

Hier mein Typoscriptauszug

# Menu top level navigation

     subparts.MENU = HMENU 
     subparts.entrylevel = 0

     subparts.MENU.1 = TMENU 
     subparts.MENU.1.NO { 
     allWrap = <img src="fileadmin/images/square_red.gif" alt="" />|<img src="fileadmin/images/square_red.gif" alt="" />
     CUR = 1 
     CUR.linkWrap = <img src="fileadmin/images/square_red.gif" alt="" />|<img src="fileadmin/images/square_red.gif" alt="" />
     } 

     subparts.MENU.1.CUR < subparts.MENU.1.NO 
     subparts.MENU.1.CUR = 1 
     subparts.MENU.1.CUR.allWrap = <img src="fileadmin/images/square_logo.gif" alt="" />|<img src="fileadmin/images/square_logo.gif" alt="" />
     subparts.MENU.1.CUR.doNotLinkIt = 1 
     subparts.MENU.1.CUR.ATagBeforeWrap = 1


# Bottom menu

    subparts.BOTTOM_MENU = HMENU
    subparts.BOTTOM_MENU.special = directory
    subparts.BOTTOM_MENU.special.value = 15
    subparts.BOTTOM_MENU.1 = TMENU
    subparts.BOTTOM_MENU.1.wrap =  |
    subparts.BOTTOM_MENU.1.NO {
    before =  | 
    after =   |*| |
  }

Das stehe in meinem CSS

BODY {
        font-family: Arial, Helvetica;
        font-size: 12px;
        color: #333333;
}


#HEAD{
	position:absolute;
	top: 0px;
	left: 0px;
}

#MENU{
	font-family:Arial, Helvetica;
        font-size: 12px;
        color: #FFFFFF;
	position:absolute;
	top: 140px;
	left: 0px;
        width: 960px;
        height: 40px;
        background-color: #CC3300;
        [b]vertical-align:middle;[/b]
}


#TITLE{
	font-family:Arial, Helvetica;
        font-size: 16px;
        color: #FFFFFF;
	position:absolute;
	top: 210px;
	left: 20px;
        background-color: #006699;
	width: 440px;
	border: 1px solid #006699;
        padding-left:10px;
}


#CONTENT{
	font-family:Arial, Helvetica;
        font-size: 12px;
        color: #FFFFFF;
	position:absolute;
	top: 245px;
	left: 20px;
        width: 440px;
}

#CONTENT_RIGHT{
	font-family:Arial, Helvetica;
        font-size: 12px;
        color: #FFFFFF;
	position:absolute;
	top: 245px;
	left: 500px;
        width: 440px;
}


#BOTTOM_MENU{
	font-family:Arial, Helvetica;
        font-size: 12px;
        color: #FFFFFF;
	position:absolute;
	top: 700px;
	left: 0px;
        width: 960px;
        height: 30px;
        background-color: #006699;
	border: 1px solid #006699;
        text-align:center;
}


a:visited { color: #ffffff; text-decoration: none;}
a:link  { color: #ffffff; text-decoration: none;}
a:hover{ color: #ffffff; text-decoration: none;}
via ·

Nachdem ich nun viel herumprobiert habe, habe ich folgenden Workaround gewählt indem ich die CSS-Box des Menüs in ein weiteres div (MENUBOX) eingebettet. Keine Ahnung ob das der übliche Weg ist, aber funktioniert hat es so wie ich es sehen wollte. Woran ich jetzt noch arbeiten muss ist, dass jeder Menüpunkt in einem eigenen "Kasten" und bei Mouse-Over unterschiedlich dargestellt wird.

HTML Template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>viv-it.de</title>

</head>
<body topmargin="0" leftmargin="0" marginleft="0" marginright="0" >
<!--###DOCUMENT_BODY###  start-->

<div id="HEAD"><img src="fileadmin/templates/viv-it/images/background_960x140.jpg" height="140" width="960"></div>
<div id="MENUBOX">
      <div id="MENU"><!--###MENU### start-->Menu<!--###MENU### stop--></div>
</div>

<div id="TITLE"><!--###HEADER### start-->Header<!--###HEADER### end--></div>
<div id="CONTENT"><!--###CONTENT###  start-->Content hier<!--###CONTENT###  stop--></div>
<div id="CONTENT_RIGHT"><!--###CONTENT_RIGHT###  start-->Content Right hier<!--###CONTENT_RIGHT###  stop--></div>

<div id="BOTTOM_MENU"><!--###BOTTOM_MENU### start-->Bottom Menu<!--###BOTTOM_MENU### end--></div>


<!--###DOCUMENT_BODY###  stop-->

</body>
</html>

CSS

	/* General styles */
BODY {
        font-family: Arial, Helvetica;
        font-size: 12px;
        color: #333333;
}


#HEAD{
	position:absolute;
	top: 0px;
	left: 0px;
}

#MENUBOX{
	position:absolute;
	top: 140px;
	left: 0px;
        width: 960px;
        height: 40px;
        background-color: #CC3300;
}

#MENU{
	font-family:Arial, Helvetica;
        font-size: 14px;
        color: #FFFFFF;
	position:absolute;
	top: 10px;
	left: 0px;
        width: 960px;
        height: 20px;
        background-color: #CC3300;
}

#TITLE{
	font-family:Arial, Helvetica;
        font-size: 16px;
        font-weight: bold;
        color: #006699;
	position:absolute;
	top: 210px;
	left: 20px;
	width: 440px;
	border-bottom: 1px solid #006699;
}


#CONTENT{
	font-family:Arial, Helvetica;
        font-size: 12px;
        color: #FFFFFF;
	position:absolute;
	top: 245px;
	left: 20px;
        width: 440px;
}

#CONTENT_RIGHT{
	font-family:Arial, Helvetica;
        font-size: 12px;
        color: #FFFFFF;
	position:absolute;
	top: 245px;
	left: 500px;
        width: 440px;
}


#BOTTOM_MENU{
	font-family:Arial, Helvetica;
        font-size: 12px;
        color: #FFFFFF;
	position:absolute;
	top: 700px;
	left: 0px;
        width: 960px;
        height: 30px;
        background-color: #006699;
	border: 1px solid #006699;
        text-align:center;
}


a:visited { color: #ffffff; text-decoration: none;}
a:link  { color: #ffffff; text-decoration: none;}
a:hover{ color: #ffffff; text-decoration: underline;}