Html Seite Menü

grinsen · 14.03.2011

Hallo,

ich wage mich an meine erste Html Seite und bekomme schon anfangs viele Probleme mit einem ordentlichen, sehr simplen, Menü.

So sieht es bisher aus:

Problem 1: Der Link Rahmen (Rahmen bei gedrückter Maustauste) passt nicht direkt auf den Button.

Problem 2: Durch List Style Type: none; geht zwar der Punkt vor der Liste weg, jedoch der Abstand des Link Rahmens bleibt nach Links.

3. Wie bekomme ich es in der Zukunft hin ein anderen Button für gedrückte Buttons einzufügen. Ich weiss das dies mit a:hover geht und einfach anderes Image einfügen, aber ich bekomme es nie hin das der gespresste Button ordentlich über der Menüleiste liegt.

Hier mein bisheriger Code:

HTML:

<body>
<ul id="menu">
   <li> <a href="deineseite1.html">About</a> </li>
   <li> <a href="deineseite2.html">Projects</a> </li>
</ul>
</body>

CSS:

Code:

body {
    background: url(images/background.png) repeat-x center top;
    height:600px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#menu {
    background: url(images/menue.png) no-repeat center top;
    float:left;
    list-style-type:none;
    heigth: 30.5px;
    margin-top:0px;
    margin-left: 380px;
}

#menu li {
    float:left;
}

#menu a {
    display: block;
    padding: 20px 40px 0px 90px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #000000;
    border: none;
    width: 119px;
    height: 43px;
}

#menu a:hover {
    color: #FFFFFF;
}

Wie kann ich es verbessern, sodass ich oben ein schön zentriertes Menü habe mit einem Hover Button der genau draufpasst?

Vielen Dank für die Hilfe.

Mit freundlichen Grüßen

Bleccer · 14.03.2011

AW: Html Seite Menü

das mit dem Button liegt nicht an Css sondern im Normal fall das vielleicht der eine Button größer etc. ist. Das liegt halt dann daran wie du es in Photoshop oder eben in deinem Programm machst. Du musst natürlich schauen das die Buttons von der größe gleich sind und sonst sagst du ja mit css einfach

#div a:hover {
background: url(Pfad) no-repeat;
}

du änderst ja nur den Hintergrund da kann eigentlich nichts verschoben sein wenn du die Buttons gleich groß gemacht hast

fexx · 14.03.2011

AW: Html Seite Menü

Die weiße Linie ist die "Outline".

Setze mal die margin werte deiner List-Elemente auf "0", damit du die Browserstandards überschreibst.

Was meinst du mit "gedrückter" button?
Im normal Fall könntest du den Klick mit :active ansteuern (z.B. der Button verschiebt sich um 1px nach unten ...).
Wenn du einen aktiven Button haben willst, für die jeweilige Seite auf der du dich befindest, müsstest du das mit einer extra Klasse lösen (z.B. "active"). In dieser definierst du dann die entsprechenden Styles für deinen Aktiv-Button.

grinsen · 14.03.2011

AW: Html Seite Menü

Habe das nun halbwegs hingeschoben bekommen. An den Margin Werten lag es jedoch nicht. Habe mir in Photoshop einen Hover Button gebaut. Jedoch stoße ich dabei auf 2 Probleme. Hier 2 Screenshots:

Beim linken Button funktioniert alles. Passt genau drauf. Der Mauszeiger ist leider nicht zu sehen.

1. Hier ist der Button nach rechts verschoben, weil dort irgendwoher der Abstand kommt. Ich denke der kommt von dem "Punkt der Liste", den man mit List-Style-Type:none zwar unsichtbar macht, der Platz bleibt jedoch vorgemerkt. Wie ändere ich das?
2. Probleme: Wie sage ich in Html das er für den rechten hover Effekt ein anderes Bild, also den gespiegelten Button nehmen soll?

Hier mein Code:

body {
background: url(images/background.png) repeat-x center top;
height:600px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#menu {
background: url(images/menue.png) no-repeat center top;
float:left;
list-style-type:none;
margin-top:0px;
margin-left: 380px;

}

#menu li {
float:left;
margin: 0 auto;
width: 268px;
height: 100px;
padding: 0px 0px 0px 0px;
}

#menu a {
display: block;
padding: 20px 40px 0px 90px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
border: none;
width: 119px;
height: 43px;
}

#menu a:hover {
background: url(images/leftbuttonpressed.png) no-repeat center top;
color: #FFFFFF;
}

--

<body>

<ul id="menu">
<li> <a href="deineseite1.html">About</a> </li>
<li> <a href="deineseite2.html">Projects</a> </li>
</ul>

</body>

Vielen Dank für Hilfe

Ich habe auch daran gedacht die Button gleich groß zu machen ^^

€ eben erst die Editierung gesehen, wird beim nächsten mal geändert mit dem Code und den Bildern.

fexx · 14.03.2011

AW: Html Seite Menü

setz mal das padding der ul auf 0 ...

grinsen · 15.03.2011

AW: Html Seite Menü

So, habe es endlich geschafft. Alles nochmal von vorne gemacht und step by step menue,ul, li,a definiert. Hab ich es wenigstens verstanden

Danke für Eure Hilfe.

grinsen · 15.03.2011

AW: Html Seite Menü

Morgen

Neue Frage bei mir. Habe 2 verschiedene Hover Klassen, wo die Images jeweils angenommen wurden. Jedoch ändert sich die Schriftfarbe nicht.

Maus ist gerade auf About. Button ändert sich, Schriftfarbe aber nicht.

Code:

<div id="menu">
<ul>
       <li><a class="verw1" href="deineseite1.html"><p>About</p></a></li>
    <li><a class="verw2" href="deineseite2.html"><p>Projects</p></a></li>
</ul>
</div>

Code:

#menu {
    background: url(images/menue.png) no-repeat center top;
    list-style-type:none;
    width:1300px;
    height:63px;
}

#menu ul {
    margin-left:406px;
}

#menu li {
    float:left;
    display: block;
    margin-left:-2px;
    margin-right:2px;
}

#menu a {
    display: block;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #000000;
    border: none;
    width:246px;
    height:63px;
}

#menu p{
    padding:25px 0px 25px 100px;
}

a.verw1:hover {
    background: url(images/leftbuttonpressed.png) no-repeat center top;
    color: #FFFFFF;
}

a.verw2:hover {
    background: url(images/rightbuttonpressed.png) no-repeat center top;
    color: #FFFFFF;
}

An dem Tag liegt es nicht. Weiss da jmd genaueres?

Grüße

amelander · 15.03.2011

AW: Html Seite Menü

mal hier schauen: jQuery UI - ThemeRoller

grinsen · 15.03.2011

AW: Html Seite Menü

Was bringt mir jQuery bei meinem Problem? Hatte vorerst nicht vor dies einzubinden. Geht ja nur um einen Hover Effekt ^^

sokie · 15.03.2011

AW: Html Seite Menü

ein ist innerhalb von <a> nicht valide.
wenn du da ein Element mit der eigenschaft display:block undbedingt brauchst notier dort zB ein und setze die eigenschaft per css.
Es macht keinen Sinn Fehler in der Ansicht zu korrigieren, wenn der Code schon nicht valide ist.
Bitte bei weiteren Anfragen der gesamten Code (inkl. Doctype) posten (oder besser: Seite komplett uploaden, und hier den Link posten.)

Myhar · 15.03.2011

AW: Html Seite Menü

Prinzipiell bist du auf dem richtigen Weg mit dem a:hover. Jedoch weiß ich auch nicht, wo genau dein Fehler liegt, das ist mir beim überfliegen deiner Stylesheets nicht ins Auge gesprungen. Eine Vermutung habe ich jedoch: Die Reihenfolgen, nach der die Regeln von einem Stylesheet genommen werden sind nicht nur von der notierten Reihenfolge sondern auch von der Wertigkeit der Selektoren abhängig (so ich hoffe das war so kompliziert formuliert wie möglich und keiner versteht mich jetzt *g* )
Ein ID-Selektor ist höherwertig als ein anderer Selektor, und du definierst deine Standard Menüfarbe mit dem #-Selektor. (#menu a) Damit der :hover Effekt das überschreiben kann, würde ich mal #menu a:hover ausprobieren.

Du kannst mit Firebug übrigens auch sehr genau anschauen, welche Styles ein einzelnes Element gerade hat und welche Styles von anderen überschrieben werden.

Und ja, jQuery brauchst du dafür auf alle Fälle nicht, das ist komplett übertrieben

grinsen · 15.03.2011

AW: Html Seite Menü

Myhar danke, an dem #Menu a:hover lag es. Vielen Dank für die Hilfe hier

Ich komme gut voran.

Myhar · 15.03.2011

AW: Html Seite Menü

Trotzdem solltest du, wie von sokie schon angemerkt, deine Seite valide aufbauen. Der von ihm angesprochene Tag im <a> hat nämlich wirklich keinen Sinn.
Dann geht es nämlich auch leichter, Fehler in der Anzeige auszubessern

grinsen · 15.03.2011

AW: Html Seite Menü

Das Tag habe ich extra hineingenommen, um die Schrift ordentlich ins Menü mittels Padding zu bekommen. Wenn ich padding auf mein a anwende, verrutschen sogleich meine PressedButton Animationen

Ich habe mir nun mein Projekt auf einen anderen Bildschirm mit anderen Maßen angeschaut und gemerkt das ich meine Seite nur auf meinen jetzigen Bildschirm perfekt ausgerichtet habe.

Problem 1: Das Menü soll immer mittig liegen. Mit align:center geht da nichts.
Problem 2: die #blackbox und die #greybox sollen 30%/70% ausmachen. Wenn ich die Werte anstatt der px Werte eintrage tut sich nichts und es wird mir gar nichts mehr angezeigt. Wie kann ich das realisieren?

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Untitled Document</title>
<link href="MyStyle.css" rel="stylesheet" type="text/css" media="screen" />
</head>
    <body>

        <div id="menu">
            <ul>
                   <li><a class="verw1" href="about.html"><p>About</p></a></li>
                <li><a class="verw2" href="projects.html"><p>Projects</p></a></li>
            </ul>
        </div>

        <div id="content">
            <ul>
                <li>
                    <div id="blackbox">

                    </div>
                   </li>
                <li>
                    <div id="greybox">

                    </div>
                  </li>
            </ul>
        </div>



        <div id="bodyextended">
        </div>


    </body>
</html>

CSS:

HTML:

@charset "utf-8";
/* CSS Document */

* {
margin: 0;
padding: 0;
}


body {
    background: url(images/background.png) repeat-x center top;
    height:600px;
    width:1300px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#menu {
    background: url(images/menue.png) no-repeat center top;
    list-style-type:none;
    width:100%;
    height:63px;
}

#menu ul {
    margin-left:382px;
}

#menu li {
    float:left;
    display: block;
    margin-left:22px;
    margin-right:-22px;
}

#menu a {
    display: block;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #000000;
    border: none;
    width:246px;
    height:63px;
    
}

#menu p{
    padding:23px 0px 25px 100px;
}

#menu a.verw1:hover {
    background: url(images/leftbuttonpressed.png) no-repeat center top;
    color: #FFFFFF;
}

#menu a.verw2:hover {
    background: url(images/rightbuttonpressed.png) no-repeat center top;
    color: #FFFFFF;
}

#content{
    background: url(images/content.png) no-repeat center top;
    margin-left:0 auto;
    margin-top:105px;
    height:500px;
    width:1330px;
    list-style-type:none;
}

#content li{
    float:left;
    display: block;
    margin-right:-25px;
    margin-left:10px;
}

#blackbox{
    background: url(images/black_block.png) no-repeat center top;
    width:451px;
    height:472px;
}

#greybox{
    background: url(images/grey_block.png) no-repeat center top;
    height:472px;
    width:900px;
}

#bodyextended{
    background: url(images/backgroundextended.png) repeat center top;
}

sokie · 15.03.2011

AW: Html Seite Menü

wie gesagt, ein p muss es ja nicht sein, ein span (mit display: block) tuts auch, und wäre wenigstens valide.
noch einfacher und weniger markup ist es allerdings, wenn du das a-element selbst per display:block und entsprechenden angaben für height, width; und paddings ausstattest.

Myhar · 16.03.2011

AW: Html Seite Menü

grinsen schrieb:
Ich habe mir nun mein Projekt auf einen anderen Bildschirm mit anderen Maßen angeschaut und gemerkt das ich meine Seite nur auf meinen jetzigen Bildschirm perfekt ausgerichtet habe.

Ehrlich gesagt wundert mich das nicht sonderlich. Du solltest wirklich erst einmal deinen Quelltext in Ordnung bringen bevor du dir weitere Gedanken um die Anpassung der Darstellung machst.

L. G.