kostenloser Webspace werbefrei: lima-city

Seiteninhalt mit Rücksicht auf Navi zentrieren

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   kamel91b

   

   kamel91b hat kostenlosen Webspace.

   16:31, 6.10.2010

   Hallo,
   ich habe das Problem, dass ich einige verschiedene Seiteninhalte meiner Webseite zwar zentrieren will,
   dabei aber sicherstellen möchte, dass ca. 250px am linken Seitenrand immer frei bleiben.
   Die Seiteninhalte sind verschieden Groß, weshalb ich diese nicht links +Xpx platzieren kann.
   
   Wege, die über den JavaScript-Befehl "screen.width" führen sind mir bekannt und funktionieren auch,
   trotzdem will ich das Design meiner Seite micht von den Browsereinstellungen des Benutzers abhängig machen
   (verständlich, oder? ).
   
   Letztendlich suche ich also CSS oder HTML Befehle mit denen sich soetwas realisieren lässt.
   
   thx im Vorraus,
   kamel91

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. dustboy

   

   dustboy hat kostenlosen Webspace.

   17:59, 6.10.2010

   Soll der Content wirklich exakt mittig auf dem Bildschirm zentriert werden? Ich kann mir nicht vorstellen, dass das gut aussehen würde, wenn da dann links noch ne navigationsleiste hinkommt (hört sich zwar doof an, aber das sieht dann wirklich aus, als wärs nach links verschoben )
   In dem Fall wäre eine +Xpx lösung auch plötzlich schon wieder möglich

4. ai-tenshi

   ai-tenshi hat kostenlosen Webspace.

   11:58, 7.10.2010

   Hi!
   
   Mal schauen, ob ich das noch hin bekomme:
   
   Ich habe mal ein Layout gemacht, das war ähnlich aufgebaut: Mittlere Spalte variabel und links und rechts feste Breiten. Der HTMLcode:
   

   <div id="content_strict">
       <div id="left_side"></div>
       <div id="right_side"></div>
       <div id="content"></div>
   </div>

   
   
   Das CSS dazu:
   

   #left_side {
       float: left;
       width: 200px;
   }
   
   #content {
       margin:0 260px 0 210px;
   }
   
   #right_side {
   	float: right;
   	width: 250px;
   }

   
   
   Wichtig ist, dass im HTML der mittlere Bereich als letztes steht und durch das Margin des mittleren Bereiches wird der Abstand nach links und rechts definiert.
   
   Hilft dir das weiter?
   
   Grüße
   Ai
   
   Beitrag zuletzt geändert: 7.10.2010 11:59:06 von ai-tenshi

5. ole-reglitzki

   

   ole-reglitzki hat kostenlosen Webspace.

   13:23, 9.10.2010

   müsste dann nicht bei #left_side und #right_side ein position: absolute; sein, und #content wird zentriert?
   Dann wäre das float: left; überflüssig und
   <div id="left_side"></div>
   <div id="right_side"></div>
   müssen vor
   <div id="content"></div>
   kommen, damit diese vor den content kommen (wäre auch durch z-index realisierbar).
   zumindest kann ich mir das Prinzip so besser vorstellen ;)
   
   Zusammengefasst:
   
   

   <div id="content"></div>
   <div id="left_side"></div>
   <div id="right_side"></div>

   
   und
   

   #left_side {
       width: 200px;
       position: absolute;
       left: 0px;
   }
   
   #content {
       margin:0 260px 0 210px;
   }
   
   #right_side {
       width: 250px;
       position: absolute;
       right: 250px;
   }

   
   
   #content muss dann noch zentriert werden und dann sollte es klappen (ungetestet)
   
   wie gesagt: wenn ai-tenshi's Ansatz klappt, auch ok, doch ich kann seins nicht richtig nachvollziehen...
   
   EDIT:
   Wenn du die Navigationen an dem content kleben haben willst, sollte es so funktionieren:
   
   

   <div id="content">
       <div id="left_side"></div>
       <div id="right_side"></div>
   </div>

   
   und
   

   #left_side {
       width: 200px;
       position: absolute;
       left: -200px;
   }
   
   #content {
       margin:0 260px 0 210px;
   }
   
   #right_side {
       width: 250px;
       position: absolute;
       right: 0px;
   }

   
   wobei ich jetzt nicht weiß, ob sich left und right auf die Randpunkte des Rahmens, oder des Inhalts bezieht.
   Beim Rahmen müsste es dann halt:
   left: 0px;
   und
   right: 250px
   heißen.
   
   lg Ole
   
   Beitrag zuletzt geändert: 9.10.2010 13:37:49 von ole-reglitzki

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?