|
|||
Logo über Navigation und Header bei Template
Liebe Gemeinschaft,
ich style gerade dieses Template von HTML5 UP um. Bin auch soweit fertig, allerdings muss ich ein Logo platzieren, dass über die zwei obigen Zeilen (grau und schwarz) geht (und ebenfalls responsive ist). Ich vermute, es handelt sich (auch) um folgende Stellen: HTML-Code:
<div id="header"> <!-- Logo --> <h1><a href="index.html" id="logo">Arcana <em>by HTML5 UP</em></a></h1> <!-- Nav --> <nav id="nav"> <ul> <!-- Navi-Liste--> </ul> </nav> </div> HTML-Code:
header p { color: #999; font-size: 1.25em; position: relative; margin-top: -1.25em; margin-bottom: 2.25em; } header.major { text-align: center; margin: 0 0 2em 0; } header.major h2 { font-size: 2.25em; } header.major p { position: relative; border-top: solid 1px #e0e0e0; padding: 1em 0 0 0; margin: 0; top: -1em; font-size: 1.5em; letter-spacing: -0.025em; } Vielen Dank im Voraus |
Sponsored Links |
|
|||
Und was genau ist dein Problem dabei?
Wenn ich dich richtig verstehe, könntest du das mit position: absolute; machen, auch wenn hier im Forum immer viele davon abraten. |
Sponsored Links |
|
|||
Mein Problem? Ich bin zwar kein Anfänger, aber mache nur hin und wieder Homepages. Vieles, was ich mal konnte, habe ich auch bereits wieder vergessen.
Also ein gesondertes DIV im HTML anlegen und im CSS mit margin und padding rumschieben? Und das für verschiedene Auflösungen wegen responsive? |
|
|||
Da gibt es sehr viele Möglichkeiten...
Aber erstmal noch zum Verständnis: Das Logo soll über dem hellgrauen Bereich UND der schwarzen Leiste darunter sitzen? Dann würde es ja die Menüpunkte überdecken. |
|
|||
Zitat:
- das es bei einer bestimmten Auflösung die Menüpunkte überdecken würde, ist klar. Deshalb soll das Logo sich immer mitverkleinern. Eine andere Möglichkeit wäre (vermutlich ist das die bessere Variante!), dass es zwei Versionen gibt: Eine wie in dem Bild oben - und eine, bei der das Logo nur als Miniatur im weißen Bereich vorkommt (neben "Arcana by HTML5 UP"). |
|
|||
Du könntest das Logo absolut positionieren und eine prozentuale max-width vergeben. Es wäre aber auch noch die Frage, ob du das Logo als img-Element oder z.B. als background-image einbaust. Da es sich aber proportional verkleinern soll, würde ich zum <img> raten.
|
|
|||
Vielen Dank, habe es geschafft! Aber:
Es wäre wohl besser, wenn das Logo immer in einem bestimmten Abstand zur Überschrift stehen würde. Wie realisiere ich das? Es hängt wohl mit den DIVs zusammen und wie diese verschachtelt sind. HTML: HTML-Code:
<div id="mylogo" style="height: 150px;"> <img src="images/logo.jpg" alt="logo"/></div> <div id="header"> <h1><a href="index.html" id="logo">Überschrift</a></h1> </div> HTML-Code:
#mylogo { z-index: 2; position: relative; max-width: 100%; box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); float: right; } @media only screen and (max-width: 840px) { #mylogo { display:none; } } /* Header */ #header { text-align: center; padding: 1em 0 0 0; background-color: #fff; background-position: top left, top left, top left; background-size: 100% 6em, 100% 6em, auto; background-repeat: no-repeat, no-repeat, repeat; } |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 14:32 |
Navigation ist nicht mittig | Schokokrapfen | CSS | 29 | 20.09.2011 00:19 |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
Problem mit MacIE / Opera - Schrift viel zu klein, Formulare | Boris | CSS | 32 | 30.08.2005 13:37 |