zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menü vertikal zentrieren und Headerpic statisch machen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.05.2015, 01:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.05.2015
Beiträge: 2
Joyful Food befindet sich auf einem aufstrebenden Ast
Standard 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
Angehängte Grafiken
Dateityp: jpg Menü1.jpg (291,7 KB, 3x aufgerufen)

Geändert von Joyful Food (03.05.2015 um 01:59 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.05.2015, 02:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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:
dass ich gerne im vorgesehenen Feld vertikal zentrieren möchte.
Dazu habe ich mal eine Beispieldatei erstellt. Der Text auf den Links wird immer vertical zentriert, egal in wie viele Zeilen er umbricht:

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 funk­tioniert die Web­site</a></li>
         <li><a href="#">Kosten und Zahlungs­arten</a></li>
         <li><a href="#">Neu­an­meldung</a></li>
         <li><a href="#">Meine Web­site</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:
Ich hätte gerne ein neues Headerpic statisch, das dann vom Body überscrollt wird.
Dann solltest du dich mit "background-attachment" beschäftigen:

CSS/Eigenschaften/Hintergrundfarben und -bilder/background-attachment

Gruss

MrMurphy

Geändert von MrMurphy (03.05.2015 um 02:25 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.05.2015, 03:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.05.2015
Beiträge: 2
Joyful Food befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank, ich werd mich mal weiter spielen, ansonsten werde ich den Seitenlink noch posten

mfg
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:57 Uhr.