| Autor |
Nachricht |
Jouless
Threadersteller
Dabei seit: 26.09.2007
Ort: Oedheim
Alter: 36
Geschlecht: 
|
Verfasst Mo 25.08.2008 13:14
Titel CSS Menü positionieren und 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ü:
Screenshot
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:
| Code: | 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:
| 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" />
<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>
|
und jetzt habe ich noch Bilder (2 vertikale Linien) eingefügt, die ich jeweils links und rechts haben möchte: (So sollte es aussehen)
Screenshot II
die habe ich folgendermaßen positioniert:
CSS:
| Code: | #lili {
position:fixed;
top: 13px;
left: 360px;
}
#lire {
position:fixed;
top: 13px;
left: 913px;
}
|
HTML:
| Code: | <div id="lili">
<img src="images/ra1.jpg" />
</div>
<div id="lire">
<img src="images/ra2.jpg" />
</div> |
Allerdings sieht das im FF wieder anders aus wie im IE:
Screenshot III
Wie bekomme ich die Linien direkt neben das Headerbild wie oben im Screenshot II, ohne dass die sich verändern wenn ich das Browserfenster verkleinere (im FF+IE)?? Habe es schon mit position fixed, absolute etc. probiert - NICHTS... 
Danke schonmal für eure Hilfe!
|
|
| |
  |
 |
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: 
|
Verfasst Mo 25.08.2008 13:29
Titel Re: CSS Menü positionieren und formatieren |
|
|
| Jouless hat geschrieben: | ................
Wie bekomme ich die Linien direkt neben das Headerbild wie oben im Screenshot II, ohne dass die sich verändern wenn ich das Browserfenster verkleinere (im FF+IE)?? Habe es schon mit position fixed, absolute etc. probiert - NICHTS... |
1) such mal nach "reset styles"
2) umgib deine site mit einem div mit border-left und border-right - dann hast das prob beim resizen nicht
|
|
| |
|
|
|
Anzeige
|
|
|
Jouless
Threadersteller
Dabei seit: 26.09.2007
Ort: Oedheim
Alter: 36
Geschlecht:
|
Verfasst Mo 25.08.2008 13:37
Titel
|
|
|
| Zitat: | | 2) umgib deine site mit einem div mit border-left und border-right - dann hast das prob beim resizen nicht |
Also mach ich im stylesheet z.b. #seitenrand
und definier das dann so, dass mein border unsichtbar ist, oder wie hast du das gemeint?
Und woher weiß "der" dann, dass der border auf den seitenrand bezogen ist und nicht woanders?
Bin noch Anfänger und versteh sowas nicht ganz 
|
|
| |
|
|
Fritz.Stefan
Dabei seit: 23.08.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 25.08.2008 13:37
Titel
|
|
|
Moin,
ich würde den body so aufbauen
<body>
<div id="box">
<div id="kopf"></div>
<div id="hauptteil">
<div class="menu"></div>
<div class="inhalt"></div>
</div>
<div id="fuss"></div>
</div>
- id box positionierst du absolut zentral
- id kopf Hintergrundbild welches bei dir im <center> ist
- id hauptteil Hintergrundbild: schneid einen 1px hohen streifen aus deinem Layout mit Rahmen und wiederhole diesen nur y
- id Fuss Hintergrundbild ähnlich wie hauptteil nur ein bild ohne wiederholung.
- class menü google mal nach css menüs dann bekommst du auch die höhe im ie hin
- class inhalt nach belieben
Gruß
</body>
|
|
| |
|
|
Jouless
Threadersteller
Dabei seit: 26.09.2007
Ort: Oedheim
Alter: 36
Geschlecht:
|
Verfasst Mo 25.08.2008 13:52
Titel
|
|
|
| Fritz.Stefan hat geschrieben: | Moin,
ich würde den body so aufbauen
<body>
<div id="box">
<div id="kopf"></div>
<div id="hauptteil">
<div class="menu"></div>
<div class="inhalt"></div>
</div>
<div id="fuss"></div>
</div>
- id box positionierst du absolut zentral
- id kopf Hintergrundbild welches bei dir im <center> ist
- id hauptteil Hintergrundbild: schneid einen 1px hohen streifen aus deinem Layout mit Rahmen und wiederhole diesen nur y
- id Fuss Hintergrundbild ähnlich wie hauptteil nur ein bild ohne wiederholung.
- class menü google mal nach css menüs dann bekommst du auch die höhe im ie hin
- class inhalt nach belieben
Gruß
</body> |
ui, ok, d.h. ich fang nochmal neu an, oder? 
Aber vielen Dank, ich denke, das hilft mir um einiges weiter.
Nur habe ich nicht ganz verstanden, wozu dann box und kopf ist...
was tu ich dann in mein box-div rein?
und in den hauptteil tu ich dann quasi meine 2 ränder rein? und wiederhole das so:
background-repeat:repeat-y ? Und wie oft wiederholt sich das dann? bis kein text mehr kommt?
und was hat das mit dem fuss auf sich? dass ich unten noch nen rand hab, oder wie?
Also nochmal VIELEN, VIELEN DANK!!!
Mach mich gleich dran....
|
|
| |
|
|
Jouless
Threadersteller
Dabei seit: 26.09.2007
Ort: Oedheim
Alter: 36
Geschlecht:
|
Verfasst Mo 25.08.2008 14:08
Titel
|
|
|
Oh Gott. hab es jetzt folgendermaßen gemacht:
CSS:
#box {
background-position:center;
}
#kopf {
background-image:url(images/header.jpg);
background-repeat:no-repeat;
width:550px;
heigt:324px;
background-position:center;
}
#haupt {
background-image:url(images/pixel.jpg);
background-repeat:repeat-y;
}
#fuss {
background-image:url(images/foot.jpg);
background-repeat:no-repeat;
}
#inhalt {
background:#FF99FF;
color:#9900CC;
font-family:Tahoma;
font-size:12px;
}
#menu a, #menu a:visited {
text-align:center, bottom;
text-decoration:none;
padding-bottom:15px;
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:15px;
padding-top:1px;
padding-left:30px;
padding-right:30px;
border-left: solid 2px #ff74d9;
border-right:solid 2px #ff74d9;
border-bottom:solid 2px #ff74d9;
line-height:15px;
}
[/code]
und HTML dann so:
| 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" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="kopf" align="center">
</div>
<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>
<div id="haupt">
</div>
<div id="inhalt">
Test 123, Test 123, Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123
</div>
<div id="fuss">
</div>
</body>
</html>
|
Aber irgendwas lief gewaltig schief 
HILFEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE!!!!!
|
|
| |
|
|
Fritz.Stefan
Dabei seit: 23.08.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 25.08.2008 14:18
Titel
|
|
|
id box ist nur wie ein container den du dann mittig zentrieren kannst. Dieser container beinhaltet kopf, hauptteil, fuss und sonst keinen Inhalt
id kopf ist als kasten für Dein oberes Bild. Wenn du das Bild als Hintergrund einfügst könntest du als Inhalt texte und weiter Bilder einfügen.
im hauptteil kommt als Hintergrundbild der horizontale streifen rein (richtig mit backgroung-repeat:y-repeat) mach den streifen von anfang linker rand bis ende rechter rand 1px hoch. er wird so oft wiederholt bis dein text, bilder usw. aufhört - richtig erkannt.
ich hoffe du hast mich richtig verstanden und baust nicht extra die streifen ein, da diese sich mit dem horizontalen streifen des Hintergrundbildes ergeben würden.
Gruß
|
|
| |
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst Mo 25.08.2008 14:25
Titel
|
|
|
[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" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="box"">
<div id="kopf" align="center"></div>
<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>
<div id="haupt">
<div id="inhalt">
Test 123, Test 123, Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123
</div>
</div>
<div id="fuss"></div>
</div>
</body>
</html> [/code]
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
wie erstelle ich diesen menü effekt bzw. das gesammte menü?
CSS Menü - Finde nicht das richtige Menü
Positionieren mit CSS
Positionieren mit CSS
Div Positionieren
divs positionieren
|
|
Willkommen auf dem Portal für Mediengestalter
