kostenloser Webspace werbefrei: lima-city


Seiteninhalt mit Rücksicht auf Navi zentrieren

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    kamel91b

    Kostenloser Webspace von kamel91b

    kamel91b hat kostenlosen Webspace.

    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? :wink: ).

    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. 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. 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

    Kostenloser Webspace von ole-reglitzki

    ole-reglitzki hat kostenlosen Webspace.

    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?

Über lima-city

Login zum Webhosting ohne Werbung!