zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Logo über Navigation und Header bei Template

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.11.2015, 16:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.05.2008
Beiträge: 94
Empy befindet sich auf einem aufstrebenden Ast
Frage 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;
		}
- wie ist hier die grundsätzliche Vorgehensweise?

Vielen Dank im Voraus
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.11.2015, 17:07
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.11.2015, 17:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.05.2008
Beiträge: 94
Empy befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von dazzle89 Beitrag anzeigen
Und was genau ist dein Problem dabei?
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?
Mit Zitat antworten
  #4 (permalink)  
Alt 25.11.2015, 17:18
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 25.11.2015, 17:24
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.05.2008
Beiträge: 94
Empy befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von dazzle89 Beitrag anzeigen
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.

- 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").
Mit Zitat antworten
  #6 (permalink)  
Alt 25.11.2015, 17:34
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 29.11.2015, 20:11
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.05.2008
Beiträge: 94
Empy befindet sich auf einem aufstrebenden Ast
Standard

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>
CSS:
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;
}
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:46 Uhr.