zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Zentrierter Content + Navigation links daneben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.04.2011, 23:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2011
Beiträge: 11
CreativeGeekDesigns befindet sich auf einem aufstrebenden Ast
Standard Zentrierter Content + Navigation links daneben

Hallo erstmal,

ich möchte ein Layout wie folgt aufbauen:
Content soll zentriert sein und links daneben eine Navigation.

Ich habe mal eine Zeichnung erstellt, die verdeutlichen soll wie ich das meine:

Zitat:
Als Lösungsansatz bin ich darauf gekommen, rechts neben dem Content ein unsichtbares DIV zu erstellen, welches die selbe Breite wie die Navigation hat, dann wäre das zentrieren kein Problem mehr. Allerdings würde dann, sobald das Browserfenster so klein wird, dass das unsichtbare DIV hinausragen würde, die Horizontale Scrollbar erscheinen, welche aber erst erscheinen soll, wenn das Browserfenster kleiner ist als Navigation+Content.

Ich hoffe jemand von euch hat ne geniale Idee oder kann meine Gedanken in die richtige Richtung stupsen falls ich gerade einfach auf dem falschen Dampfer bin!

Freundliche Grüße
CreativeGeek
Angehängte Grafiken
Dateityp: jpg konstruktion.jpg (50,0 KB, 52x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.04.2011, 08:54
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Das einfachste dürfte sein, die Navigation als Unterteil des Contents zu begreifen und so ins HTML einzubauen. Dann kannst Du leicht horizontal zentrieren ( 50% und um die Hälfte der Breite oder dem gewünschten Wert mit negativem Margin nach links verschieben.)
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.04.2011, 11:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2011
Beiträge: 11
CreativeGeekDesigns befindet sich auf einem aufstrebenden Ast
Standard

Insofern ich dich richtig verstanden habe, würde die Navigation beim verkleinern des Browserfensters aber irgendwann links aus dem Browser in den nicht sichbaren Bereich wandern (was bei Netbooks etc. natürlich sehr unpassend wäre)!
Mit Zitat antworten
  #4 (permalink)  
Alt 08.04.2011, 11:46
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Nein. Probiers aus:

Du kannst Dir mal friccas Beispiel ansehen, das es gut darstellt:

CSS vertical center using float and clear

aus:

Vertikale und horizontale Zentrierung
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #5 (permalink)  
Alt 08.04.2011, 12:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2011
Beiträge: 11
CreativeGeekDesigns befindet sich auf einem aufstrebenden Ast
Standard

Dann versteh ich dich einfach nur falsch, kannst du, falls du Zeit hast mal eben das HTML-Gerüst mit CSS aufsetzen?

Friccas Beispiel ist ja komplett zentriert, das will ich ja eben nicht, der Content soll zentriert sein und die Navigation außerhalb der Zentrierung rechts oder links neben dem zentrierten Content.
Mit Zitat antworten
  #6 (permalink)  
Alt 08.04.2011, 12:53
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.138
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hmm, wenn ich das richtig verstehe:

nimm einen wrapper --> zentrieren
darin 3 Spalten: navi, Inhalt (zentriert), leere Fläche (gleiche Breite wie navi)
ergibt zusammen halt 200px+700px+200px = 1100px

Würde es so gehen?

Manfred

Geändert von Manfred62 (08.04.2011 um 12:56 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 08.04.2011, 12:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.782
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von CreativeGeekDesigns Beitrag anzeigen
kannst du, falls du Zeit hast mal eben das HTML-Gerüst mit CSS aufsetzen?
Wenn du deinen Code aufgesetzt und gezeigt hättest, wäre das Potential für Missverständnisse ganz sicher sehr viel geringer.
Siehe auch die Hinweise für Fragende.
[Ich kann im Moment auch nicht nachvollziehen, worauf andir hinaus will.]

Ich habe vor langer Zeit mal so einen asymmetrischen Zentrier-Versuch gemacht. Außer im IE6 sollte es keinen verfrühten Scrollbalken geben, ich weiß nicht, ob du damit leben kannst.
Browserkompatibilität musst du testen, ist schon älter und ich hab's nie gebraucht.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
* {
    margin:0;
    padding:0;
    }

body {
    margin-right:200px; /* Einschraenkung Body-Breite gemaess Mass der Asymmetrie; kein Padding, sonst verfruehter Scrollbalken in IE7; IE6 immer */
    }

#wrap {
    margin:0 50% 0 auto;
    }

#wrap2 {
    margin-right: -400px; /* 300 (Haelfte der Breite des zentr. Elements) + 100 (Haelfte der Breite des ueberstehenden Elements) */
    margin-left:auto;
    background:red;
    width:600px;
    border-left:200px solid green; /* Simuliertes asymmetrisches Element */
    height:400px;
    }
</style>
</head>
<body>
    <div id="wrap">
        <div id="wrap2">
        </div>
    </div>
</body>
</html>
@Manfred62: Dann hätte man wieder den unerwünschten/-schönen verfrühten Scrollbalken.
Mit Zitat antworten
  #8 (permalink)  
Alt 08.04.2011, 13:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2011
Beiträge: 11
CreativeGeekDesigns befindet sich auf einem aufstrebenden Ast
Standard

Das ist exakt das, was ich wollte! Vielen Dank für deine Hilfe und natürlich auch ein dickes Danke an alle anderen die ihr Hirn für mich angestrengt haben

Jetzt würde ich das ganze gerne noch ein wenig erweitern/verkomplizieren:
In deinem Beispiel soll wrap2 immer 300px hoch sein und am unteren Rand des Browsers kleben (selbst wenn ein vertikaler Scrollbalken da ist).

Ursprünglich wollte ich das div (in deinem Fall wrap2) im Body-Tag haben, da man es so leicht an den unteren Rand des Browsers bekommt.

Also wenn ihr dafür auch noch ne Lösung findet... das wär klasse
Mit Zitat antworten
  #9 (permalink)  
Alt 08.04.2011, 13:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.782
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ich versteh kein Wort, tut mir leid.
Bitte formulier neu, was du willst. Zeig es am besten an deinem Code.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.04.2011, 14:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2011
Beiträge: 11
CreativeGeekDesigns befindet sich auf einem aufstrebenden Ast
Standard

Ich hab noch keinen Code, andernfalls würde ich ja nicht fragen.

Einfach formuliert:
die Navigationsbox so wie sie jetzt ist an dem unteren Browserrand verschieben und fixieren (soll horizontal schon seine Position ändern beim verkleinern des Fensters).
Mit Zitat antworten
Sponsored Links
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
Content richtet sich NICHT nach Navigation poffi CSS 1 15.10.2010 17:23
Falsche Darstellung im Internet Explorer rw1981 CSS 3 06.02.2009 12:51
Unerklärlicher Abstand zwischen Listen im IE6 ven CSS 4 10.06.2008 09:03
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29
Navigation Links Hover child CSS 3 25.02.2005 21:00


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:54 Uhr.