nicht angemeldet
CSS Menü formatieren
Hallo zusammen,
ich mache momentan eine kleine Page für meine kleine Schwester und habe
ein kleines Problem. Zu allererst hier mal die Screenshots von dem Menü:
Wie man schon erkennen kann, sieht das "Menü" unterschiedlich aus.
Folgende Fragen habe ich:
1. Wie bekomme ich es hin, dass auch im IE alle 4 bzw. 3 sichtbaren Ränder um den Text angezeigt werden?
2. Wie kann ich die größe festlegen, sodass der Rahmen des ersten und letzten Menüpunktes mit dem Headerbild abschließen? weight ist es nicht...
3.Wie bekomme ich es hin, dass meine Menütexte (z.B. About me) die Ausrichtung zentriert und unten im Rahmen hat? Mit vertical-align klappt es nicht...
Wäre klasse, wenn mir jemand helfen könnte. Hier noch die Codes:
CSS:
body {
background:#FF99FF;
color:#9900CC;
font-family:Tahoma;
font-size:12px;
padding-top:5px;
}
#menu a, #menu a:visited {
text-align:center, bottom;
text-decoration:none;
padding-bottom:20px;
padding-top:1px;
padding-left:30px;
padding-right:30px;
border-left: solid 2px #ff74d9;
border-right:solid 2px #ff74d9;
border-bottom:solid 2px #ff74d9;
color:#FF0099;
line-height:15px;
}
#menu a:hover {
text-align:center, bottom;
color:#CC33CC;
background-color:#f9c1e9;
padding-bottom:20px;
padding-top:0.4px;
padding-left:30px;
padding-right:30px;
border-left: solid 2px #ff74d9;
border-right:solid 2px #ff74d9;
border-bottom:solid 2px #ff74d9;
line-height:15px;
}
HTML:
<!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" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<center><img src="images/header.jpg"/></center>
<div id="menu" align="center">
<a href="#nogo">Home</a>
<a href="#nogo">About me</a>
<a href="#nogo">Bilder</a>
<a href="#nogo">Lustiges</a>
<a href="#nogo">Impressum</a>
</div>
</body>
</html>
VIELEN DANK!!!
-
- Wie bekomme ich es hin, dass auch im IE alle 4 bzw. 3 sichtbaren Ränder um den Text angezeigt werden?
...
- Wie kann ich die größe festlegen, sodass der Rahmen des ersten und letzten Menüpunktes mit dem Headerbild abschließen? weight ist es nicht...
gar nicht. Die breite der <a> Elemente ist derzeit von der Schriftgrösse abhängig. Das <img> Element hat aber eine intrinsische absolute Grösse.
Du müsstest wenn schon den Rahmen um das <div id="menu" > setzen, welchem du ebenfalls eine absolute width in der Grösse des Bildes abzuüglich der breite des Borders gibst.
Die inneren Borders (vertikal) setzt du dann auf die <a> Elemente3.Wie bekomme ich es hin, dass meine Menütexte (z.B. About me) die Ausrichtung zentriert und unten im Rahmen hat? Mit vertical-align klappt es nicht...
Indem du die assymetrischen Angaben für padding-top/padding-bottom entfernst.
[code lang=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Warum verwendest du XHTML statt HTML?
mfg Beat
-
gar nicht. Die breite der <a> Elemente ist derzeit von der Schriftgrösse abhängig. Das <img> Element hat aber eine intrinsische absolute Grösse.
intrinsische? -> das heißt? bin ein newbie :( Versteh das nicht.Du müsstest wenn schon den Rahmen um das <div id="menu" > setzen, welchem du ebenfalls eine absolute width in der Grösse des Bildes abzuüglich der breite des Borders gibst.
Das heißt, dass ich den Border nicht im Stylesheet festleg, sondern direkt im HTML bereich nach <div id="menu" align="center">? Das wäre dann quasi ein Rahmen um alle Menüpunkte?
Die inneren Borders (vertikal) setzt du dann auf die <a> Elemente
Und hiermit trenne ich die also in mehrere? Indem ich immer nach:
<a href="#nogo">Home</a> noch ein border hinzufüge?3.Wie bekomme ich es hin, dass meine Menütexte (z.B. About me) die Ausrichtung zentriert und unten im Rahmen hat? Mit vertical-align klappt es nicht...
Indem du die assymetrischen Angaben für padding-top/padding-bottom entfernst.
Ok, da stand ich mir selbst im Weg... :o) Danke!!!
[code lang=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Warum verwendest du XHTML statt HTML?
Weiß ned, des macht mein Dreamweaver automatisch irgendwie, wenn ich ein leeres HTML Dokument öffne :o/
DANke nochmal..
mfg Beat
-
Indem du die assymetrischen Angaben für padding-top/padding-bottom entfernst.
Nein, das war es doch nicht. Ich möchte ja, dass der Rahmen höher wie breiter ist (komische formulierung)... z.b. höhe 20 px, breite 10 px, und die schrift soll kurz vorm unteren rand stehen, also vielleicht bei 16 px oder so.
Weißt du, wie ich meine?-
Indem du die assymetrischen Angaben für padding-top/padding-bottom entfernst.
Nein, das war es doch nicht. Ich möchte ja, dass der Rahmen höher wie breiter ist (komische formulierung)... z.b. höhe 20 px, breite 10 px, und die schrift soll kurz vorm unteren rand stehen, also vielleicht bei 16 px oder so.
Weißt du, wie ich meine?Schlechtes Beispiel (default font-size ist meist 15px). Aber assymetrisches padding ist wohl richtig.
Deine Frage war:
3.Wie bekomme ich es hin, dass meine Menütexte (z.B. About me) die Ausrichtung zentriert und unten im Rahmen hat? Mit vertical-align klappt es nicht...Die ich leider missverstanden habe.
Inlineelemente haben eine intrinsische Breite, hervorgerufen durch den Textinhalt. text-align ist nicht anwendbar.
Willst du die text-align Eigenschaft, so musst du das inline element via CSS in ein block Element konvertieren. Somit kannst du ihm eine width und ein text-align Zuweisen.
Natürlich erzeugt dies Umbrüche, die man wiederum mit float:left entfernen kann. Somit hat man dann aber das Problem, die Gesamtbreite der gefloateten Elemente zu kontrollieren.
In der Verzweiflung greift man dann entweder zu Alkohol oder Tabellen.
Oder man überlegt sich überhaupt ein Design, das sich bezüglich der verfügbaren Viewportgrössen anmassend verhält.Damit möchte ich andeuten. Layoutprobleme sind lösbar, aber nicht geradlinig und mit einfachen Mitteln.
mfg Beat
-
:D ich glaub ich mach mich an ein einfacheres zur Übung :D
Trotzdem vielen Dank!!
-
-