• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

div Position rechts

Status
Für weitere Antworten geschlossen.
edi

edi

Neues Mitglied
wie bekomme ich ein Div auf die rechte Seite?

Schaffe gerade meine Frames ab.

Dazu lege ich mehrere div container an um die Grafiken zu positionieren.

Da viele User unterschiedliche Bildschirmbreiten haben, moechte ich die Grafiken fuer die rechte Seite nicht mit left:...px; festlegen. Habe jetzt versucht mit "right" geht garnicht und mit 100% aber da lade ich ausserhalb des Bildschirms und muss rueberscrollen.
Hab versucht div in ein div zu legen, hilft auch nicht weiter.

Was nun?
 
Punkt 1: absolute Positionierung als Grundlage für das Design einer Webseite ist ungünstig da jeder Browser das anders anzeigen könnte. Nutze lieber float um die einzelnen Elemente nebeneinander zu positionieren.

Punkt 2: mit "right" lagst du schon richtig. Dein Problem wird ein anders sein - da du keinen Quellcode zeigst kann ich auch nichts genaueres sagen.
 
CSS:
Code: 
DIV{
float:left
width:200px; /*eine feste breite ist notwendig, da der Container sonst 100% breite hätte*/
}
HTML:
Code: 
...
<div>content1</div>
<div>content2</div>
<br clear="all" />
...

...so in etwa
 
Also ich hab mal meine Rudimente ins Netz gestellt.
auf webhosting24 - Login ist die Seite mit Frame und schon fast komplett.
auf immobilien in griechenland ist die div-version. Ich hab aus Verzweiflung jetzt mal ne absolute Gesamtbreite festgelegt.

Der Seitenkopf ist ein Container mit mehreren innenliegenden Containern, wobei div.logo nach rechts muss. Dann gibts den Cont. navi da muss der innenliegende div.eckre dahin
und rechts der senkrechte Balken soll auch direkt rechts.

Alles in einer standart.css hinterlegt. Da ihr auf der Web-Site nicht die css seht hier der Code. Den Befehl float (samt syntax) kannte ich bis eben nicht.

Code: 
body { background:white;
       color:rgb(16, 31, 138);
       background-attachemant:fixed;
       background-repeat:no-repeat;
       font-family: Arial;
       font-size: 12pt;
}

p { font-family:Arial; font-size:12pt;
}

h1 { font-family:Arial;
     font-size:12pt;
     color: rgb(16, 31, 138);
}

A: { text-decoration:none;
}

A:link { color:powderblue;
}

A:active { color:skyblue;
}

A:visited { color:indigo;
}

A:hover { color:skyblue;
}

div.kopf {position: absolute;
       top:0px;
       left:0px;
       height:140px;
       width:100%;
       background-repeat:repeat-x;
       background-attachement:fixed;
       background-image:url(bilder/bgko.gif);
}

div.logo {position: absolute;
                top:0px;
                left:858px;
                height:140px;
                width:166px;
}

div.button {position: absolute;
                 top:15px;
                 left:650px;
                 height:15px;
                 width:315px;
}

div.land {position: absolute;
                 top:0px;
                 left:0px;
                 height:140px;
                 width: auto;
}

div.navi {position: absolute;
       top:140px;
       left:0px;
       height:30px;
       width:884px;
       background-repeat:repeat-x;
       background-attachement:fixed;
       background-image:url(bilder/bgnv.gif);
}

div.eckl {position: absolute;
        top:0px;
        left:0px;
        height:30px;
        width:140px;
}
div.eckr {position: absolute;
        top:0px;
        left:884px;
        height:30px;
        width:140px;
}

div.navili {position: absolute;
        top:170px;
        left:0px;
        height:500px;
        width:140px;
        background-repeat:repeat-y;
        background-attachement:fixed;
        background-image:url(bilder/bgin.gif);
}

div.navire {position: absolute;
        top:170px;
        left:884px;
        height:500px;
        width:140px;
        background-repeat:repeat-y;
        background-attachement:fixed;
        background-image:url(bilder/bgwe.gif);
}

div.inhalt {position: absolute;
        top:170px;
        left:140px;
        height:500px;
        width:744px;
}

Danke fuer soviel Muehe
 
Zuletzt bearbeitet:
Gib html und body noch ein "height: 100%;" und "width: 100%;", ansonsten nutzt er nur die Breite die die in ihm enthaltenen Elemente benötigen.
 
Danke, der float-Befehl und danach positionieren von rechts hat gut funktioniert.
Habe auch den body auf 100% gesetzt. Leider weis ich nicht wie man html auf 100% setzt.
Ein Problem steht im Moment noch. Ich habe Scrollbalken obwohl ich die Seite nicht ueberschreite (ist ja immer auf 100%), und der Scrollbetrag scheint den Balken zu entsprechen.

Kann man auf o.g. Web-Site sehen.

Ich habe zwischendurch mal probiert die Festlegung der Groessen mit 100%-100px zu programmieren. Scheint manchmal zu funktionieren, ist aber bestimmt nicht korrekt?


Code: 
 body { background:white;
       color:rgb(16, 31, 138);
       background-attachemant:fixed;
       background-repeat:no-repeat;
       font-family: Arial;
       font-size: 12pt;
       width:100%;
       height:100%;
}

p { font-family:Arial; font-size:12pt;
}

h1 { font-family:Arial;
     font-size:12pt;
     color: rgb(16, 31, 138);
}

A: { text-decoration:none;
}

A:link { color:powderblue;
}

A:active { color:skyblue;
}

A:visited { color:indigo;
}

A:hover { color:skyblue;
}

div.navili {position: absolute;
        top:0px;
        left:0px;
        height:100%;
        width:140px;
        background-repeat:repeat-y;
        background-attachement:fixed;
        background-image:url(bilder/bgin.gif);
}

div.navire {position: absolute;
        float:left;
        top:0px;
        right:0px;
        height:100%;
        width:140px;
        background-repeat:repeat-y;
        background-attachement:fixed;
        background-image:url(bilder/bgwe.gif);
}

div.kopf {position: absolute;
       top:0px;
       left:0px;
       height:140px;
       width:100%;
       background-repeat:repeat-x;
       background-attachement:fixed;
       background-image:url(bilder/bgko.gif);
}

div.logo {position: absolute;
                float:left;
                top:0px;
                right:0px;
                height:140px;
                width:auto;
}

div.button {position: absolute;
                 top:15px;
                 left:650px;
                 height:15px;
                 width:315px;
}

div.land {position: absolute;
                 top:0px;
                 left:0px;
                 height:140px;
                 width:auto;
}

div.navi {position: absolute;
       top:140px;
       left:0px;
       height:30px;
       width:100%;
       background-repeat:repeat-x;
       background-attachement:fixed;
       background-image:url(bilder/bgnv.gif);
}

div.eckl {position: absolute;
        top:0px;
        left:0px;
        height:30px;
        width:140px;
}
div.eckr {position: absolute;
        float:left;
        top:0px;
        right:0px;
        height:30px;
        width:140px;
}


div.inhalt {position: absolute;
        top:170px;
        left:140px;
        height:auto;
        width:70%;
}
 
Einfach angeben:

Code: 
html { width: 100%; }

Btw. kommt es in deinem Fall eher auf die Breitenangabe an. Wobei dann wiederum das Problem besteht, dass auf sehr kleinen Auflösungen der Contentbereich winzig wird zwischen dem linken und rechten Rand :-|
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben