|
|||
Menü vertikal zentrieren und Headerpic statisch machen
Hallo zusammen,
ich bin neu hier und meine HTML Kenntnisse sind im absoluten Anfängerbereich Ich habe eine Bloggertheme online erworben und schon auf eigene Faust viel im HTML verändert und für meine Verhältnisse nach vielem Lernen und nächtelangen herumprobieren schon gute Ergebnisse erzielt. Jetzt hätte ich noch zwei Probleme, bei denen ihr mir sicherlich mit "links" helfen könnt. Nr1: Ich habe ein Menü, float: left, dass ich gerne im vorgesehenen Feld vertikal zentrieren möchte. Ich habe das hier schon probiert: http://xhtmlforum.de/58062-ul-li-tex...entrieren.html hat nur leider nichts geholfen, oder ich stell mich einfach. Denn genau das ist mein Problem. Siehe Bild Menü 1 im Anhang. Hier mein CSS dazu: #menu{padding-top: 0px;color:#fff;height:60px;background:#fff;} #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none;} #menu ul{height:30px;width:1100px} #menu li{float:left;left:23%;display:inline;position:rel ative;font:16px Arial;text-transform:uppercase;} #menu a{display:block;line-height:35px;padding:0 20px;text-decoration:none;color:#777777;} #menu li a:hover{color:#b6d7a8} #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursorointer} #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:12px;position:absolute;left:35px} #menu ul.menus{height:auto;overflow:hidden;width:180px;b ackground:#f1eeed url(http://3.bp.blogspot.com/-TVSgEiymYKA/UQs6COkgULI/AAAAAAAABik/0djyvpPgHEM/s1600/bg_body.gif);position:absolute;z-index:99;display:none;} #menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;text-shadow:none} #menu ul.menus a{color:#333} #menu li:hover ul.menus{display:block} #menu a.prett{padding:0 27px 0 14px} #menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ddd transparent transparent transparent;position:absolute;top:14px;right:9px} #menu ul.menus a:hover{background:#ddd;color:#333} .page-menu{width:70%;margin:18px auto;padding:0;float:right;text-shadow:0 1px 0 rgba(0,0,0,0.5)} .page-menu ul{list-style:none;color:#ddd;width:700px;margin:0 auto;padding:0} .page-menu ul li{list-style:none;line-height:32px;display:inline-block} .page-menu li a{color:#ddd;display:block;font-size:14px;font-family:Arial;position:relative;text-decoration:none;text-transform:capitalize;padding:0 10px} .page-menu li a:hover,.page-menu .selected{color:#fff;text-decoration:none;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset} Nr 2: Ich hätte gerne ein neues Headerpic statisch, das dann vom Body überscrollt wird. Mit position: fixed habe ich es probiert, aber die Posts sind alle nach oben gerutscht und verschwinden hinter dem Header (möchte es aber anders herum). Wie kann ich das ändern, dass diese die gleiche Position behalten wie in der Anfangsposition und nach oben, bzw. nach unten scrollen und der Header bleibt? Wie hier: http://testseitenprivat.blogspot.de/# Bitte habt ein wenig Nachsicht mit mir, ich hab echt schon viel gegoogelt, aber ich dreh mich irgendwie im Kreis. LG Geändert von Joyful Food (03.05.2015 um 01:59 Uhr) |
Sponsored Links |
|
|||
Hallo
ohne Link zur Seite werden wir dir kaum helfen können, deine Quellcodeschnipsel helfen uns leider nicht. Deshalb kann ich nur allgemein antworten. Zitat:
Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>Navigation mehrzeilig vertical zentriert</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script> <![endif]--> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 100%; } body { padding: 0; } nav { width: 90%; margin: 0 auto; } nav ul { display: block; padding-left: 0; display: flex; flex-wrap: wrap; } nav ul li { background-color:#4b6a7c; color:#FFF; font-size: 0.6rem; font-weight: bold; list-style-type: none; text-align: center; text-transform: uppercase; min-width: 5rem; border-radius: 5px; margin: 0.2rem 0.5rem; flex: 1; display: flex; align-items: center; } nav ul li a { color:#FFF; display: block; width: 100%; padding: 1rem; border-radius: 5px; margin: 0; } nav ul li:hover, nav ul li a:hover { background-color:#0099cc; color:#FFF; } </style> </head> <body> <nav> <ul> <li><a href="#">So funktioniert die Website</a></li> <li><a href="#">Kosten und Zahlungsarten</a></li> <li><a href="#">Neuanmeldung</a></li> <li><a href="#">Meine Website</a></li> <li><a href="#">Tipps und Tricks und mehr</a></li> <li><a href="#">FAQ und Hilfe</a></li> </ul> </nav> </body> </html> Zitat:
CSS/Eigenschaften/Hintergrundfarben und -bilder/background-attachment Gruss MrMurphy Geändert von MrMurphy (03.05.2015 um 02:25 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
Hintergrundbild vertikal UND horizontal zentrieren? | yggdrasil | CSS | 3 | 06.07.2008 11:19 |
Vertikal zentrieren in Box | wandler | CSS | 5 | 01.08.2006 20:01 |
Bild vertikal zentrieren in Blockelement in IE nur m. TABLE | AndreasB | CSS | 11 | 13.03.2006 18:05 |