Antworten auf deine Fragen:
Neues Thema erstellen

Zentrierte Seite mit fester Breite, aber Navigation über ganzen Bildschrim?

the_b3ast

DarkPoet

Hallo,

es ist schon eine Weile her, dass ich mich an eigenen Gehversuchen mit HTML und CSS versucht habe (von der Arbeit her bin ich mit CMS "verwöhnt"...)

Ich versuche schon seit mehreren Tagen ein Problem zu lösen, kann aber beim besten Willen keine Lösung finden - oder ich steh einfach mächtig aufem Schlauch. Dabei geht es um folgendes:

Ich möchte den Hauptteil meiner Seite mit einer Breite von 960px zentrieren. Sie beginnt mit einer oberen Sektion, in die später ein Logo und andere eingefügt werden soll. Darauf folgt die Navigationsleiste und schließlich der Hauptteil. Die Leiste mit der Navigation soll aber eben nicht auf diese 960px beschränkt sein, sondern sich über die gesamte Fensterbreite erstrecken. Die Navigation selbst soll aber weiterhin zentriert in der Mitte der Seite erscheinen. Nur leider kriege ich es einfach nicht hin. Bislang sieht das alles wie folgt aus:

HTML:
Code:
<body>
  
  <div id="wrap">  	
  	
  	<div id="top-content">
  		<p>Hier kommen Logo etc. hin... </br> zweite Zeile </br> dritte Zeile</p> 
  	</div>
  	
  	<div id="navcontainer">
		<!-- hier soll die Navigation eingepasst werden -->
        </div>
    
    <div id="main-content">
    	<h1>Hauptteil</h1>
    </div>
    
    <div id="bottom-content">
	<p>Impressum etc.</p>
    </div>
  </div>

</body>

CSS:
Code:
* {
    margin: 0;
    padding: 0;
}

body {
    background: none repeat scroll 0 0 #545454;
    font-family: Georgia,serif;
    font-size: 62.5%;
}

#wrap {
    background: none repeat scroll 0 0 #e3e3e3;
    margin: 0 auto;
    width: 960px;
}

#topcontainer {
	height: 130px;
}

#navcontainer {
    background: none repeat scroll 0 0 black;
    border-bottom: 2px solid white;
    border-top: 2px solid white;
    left: 0;
    height: 40px;
}

Ich hoffe jemand von Euch kann mir weiterhelfen und mir wenigstens einen Schubs in die richtige Richtung geben ^^

Grüße
b3ast
 

AW: Zentrierte Seite mit fester Breite, aber Navigation über ganzen Bildschrim?

Hi,
mach einfach aus dem #wrap eine Klasse und nimm die Navi aus dem Wrapper raus, dann hast du quasi über der Navi und unter der Navi einen Wrapper.

Die Navigation wäre da nicht drin, dann kannst du sie auch über die gesamte Seite laufen lassen.

Und wenn du den Inhalt der Navi auch wieder zentrieren willst dann kommt in den Navi Container auch noch mal ein Wrapper (nur nicht außen rum).

Dann sollte das eigentlich ganz einfach klappen oder habe ich etwas missverstanden!?

Grüße
Pascal
 

DrEddison

Nicht mehr ganz neu hier

AW: Zentrierte Seite mit fester Breite, aber Navigation über ganzen Bildschrim?

Du kannst auch jedes beliebige Element aus dem "normalen" Darstellungsfluss herausholen und frei positionieren, wenn Du dem Element die CSS-Eigenschaft "position:absolute" gibst. Da ist der Aufbau innerhalb der (X)HTML-Struktur egal.

Also so:
#navcontainer {
position:absolute;
/*hier deine restlichen css-anweisungen*/
}
 

eye4moments

Noch nicht viel geschrieben

AW: Zentrierte Seite mit fester Breite, aber Navigation über ganzen Bildschrim?

Die Navigation darf halt nicht in ein 960px breites div "gezwängt" werden.

So sollte das gehen:

HTML:
<body>
<div id="header">
</div>
<div id="navileiste">
</div>
<div id="seite">
</div>
</body>

Das CSS:
Code:
#header{
    width:960px;
    margin:auto;
}
#navileiste{
    text-align:center;
}
#seite{
    width:960px;
    margin:auto;
}
 

the_b3ast

DarkPoet

AW: Zentrierte Seite mit fester Breite, aber Navigation über ganzen Bildschrim?

Klasse, danke...!

Ich weiß auch nicht, wie ich auf die Idee kam, das in das umschließende div zu packen. Ich vermute mal, dass das irgendwann mal beim rumprobieren passiert ist und ich dann einfach den Fehler nicht mehr gefunden habe.

Vielen Dank jedenfalls!
 
E

Emilia789

Guest

AW: Zentrierte Seite mit fester Breite, aber Navigation über ganzen Bildschrim?

Hallo
ich als neuling möchte wissen, warum man das nicht auch mit den ifram lösen könnte anstatt div?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben