josDesign
Erfahrenes Mitglied
Hallo!
Ich habefolgendes Problem.
Ich bastle mir gerade meine Homepage, diesmal aber vorwiegend css-styled. Nun habe ich das Problem das ich das Hauptmenü rechts haben möchte, jedoch jedes <a> mit der Klasse MENUbutton belegt habe.
Jetzt wird mir aber die Reihenfolge verkehrt angezeigt (! Wie kann ich das Menü trotzallem rechtsbündig halten aber auch mit richtiger Reihenfolge und warum stellt vertical-align die Schrift im Menü nicht tatsächlich in die vertikale Mitte?)
HAbe es auch schon mit einem Menu-DIV probiert welches text-align nach rechts stellt. Ohne Erfolg, leider...
Ich habefolgendes Problem.
Ich bastle mir gerade meine Homepage, diesmal aber vorwiegend css-styled. Nun habe ich das Problem das ich das Hauptmenü rechts haben möchte, jedoch jedes <a> mit der Klasse MENUbutton belegt habe.
Jetzt wird mir aber die Reihenfolge verkehrt angezeigt (! Wie kann ich das Menü trotzallem rechtsbündig halten aber auch mit richtiger Reihenfolge und warum stellt vertical-align die Schrift im Menü nicht tatsächlich in die vertikale Mitte?)
HAbe es auch schon mit einem Menu-DIV probiert welches text-align nach rechts stellt. Ohne Erfolg, leider...
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Templatebuilding: Develop01</title>
<style>
<!--
/* Standard Stile */
body {
background-color: white;
font-family: Verdana, Arial, Helvetica, san-serif;
font-size: 11px;
color: black;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center; /* Zwecks Hack */
}
/* Grundgeruest */
#wholesite { /* Wrapper für Seitendesign */
width: 801px; /* Gesamte Seitenbreite */
height: 100%; /*Höhe des Wrappers */
margin: 55px auto 0px auto; /*Standart: margin: 0px auto 0px auto; */
padding: 10px 10px 10px 10px; /*Abstand zu evtl. Rahmen */
background-color: white; /*Hintergrundseite für Wrapper=Websitebereich */
border: #000000; /*Rahmen Farbe */
border-style: dashed; /*Rahmen Art */
border-width: 1px; /*Rahmen Dicke */
}
#wholetop { /* Header */
width: 801px;
height: 100px;
margin: 0px 0px 5px 0px;
padding: 0px;
background-color: magenta;
}
#wholemenu { /* Menue */
width: 801px;
height: 20px;
margin: 0px 0px 5px 0px;
padding: 0px;
background-color: inherit;
/* text-align: right; */ /* Versuch das Menü rechts zu halten trotz richtiger reihenfolge */
}
#wholecontent { /* quasi der Hauptteil: Content */
color: inherit;
background-color: inherit;
margin: 0px 0px 0px 0px;
padding: 0px 10px 20px 10px;
height: 250px;
}
#wholebottom { /*Footer-Bereich*/
width: 801px;
height: 90px;
float: left;
margin: 5px 0px 5px 0px;
background-color: white;
color: inherit;
position: absolut;
bottom: 0px;
}
.clear { /* Um den Textfluss danach wiederherzustellen */
clear: both;
}
/*Sekundaere Elemente (dauerhaft) */
.topHeaderPic {
text-align: right;
}
#bottomLogo {
color: inherit;
background-color: inherit;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 90px;
float: right;
}
#menuMenuWrapper { /* Menüwrapper - Div um das Menü in richtiger Reihenfolge rechts zu alignen */
width: 100%;
height: 100%;
margin: 0px 0px;
padding: 0px 0px;
background-color: inherit;
float: right;
text-align: right;
}
/* Menü Design */
.MENUbutton { /* Zustand: NO */
display: block;
color: black;
width: 80px;
font-size: 11px;
font-family: inherit;
text-decoration: none;
text-align: center;
float: right;
height: 16px;
vertical-align: middle;
background-color: inherit;
}
.MENUbutton:hover {
background-color: #e1e1e1;
color: inherit;
}
.MENUbuttonAct { /* Zustand: ACT */
display: block;
color: black;
width: 80px;
font-size: 11px;
font-family: inherit;
text-decoration: none;
text-align: center;
font-weight: bold;
float: right;
height: 16px;
vertical-align: middle;
}
-->
</style>
</head>
<body>
<div id="wholesite">
<div id="wholetop"><img src="fileadmin/template/grafiken/header1.jpg" alt="Fotos: Josef Florian Glatz" height="100" width="801" border="0"></div>
<div id="wholemenu">
<div id="menuMenuWrapper">
<!-- ###MENU### start --><a href="#" class="MENUbuttonAct">Über</a><a href="#" class="MENUbutton">Feinstes</a><a href="#" class="MENUbutton">Augenblicke</a><a href="#" class="MENUbutton">Specials</a><a href="#" class="MENUbutton">Events</a><a href="#" class="MENUbutton">Tutorials</a><a href="#" class="MENUbutton">Links</a><!-- ###MENUE### start -->
</div>
</div>
<div id="wholecontent"></div>
<div id="wholebottom">
<div id="bottomLogo"><a href="index.php?id=home"><img src="fileadmin/template/grafiken/bottomLogo1.jpg" alt="Logo made by KromOne" height="90" width="300" border="0"></a></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
