non scrollable div - Softwareontwikkeling

maandag 12 februari 2007 18:20

Acties:

Verwijderd

Topicstarter

Ik heb een contentgedeelte dat ik wil centreren op het scherm, maar ik wil links en rechts daarvan een achtergrondafbeelding plaatsen. Deze afbeeldingen zijn echter zo groot (width) dat ze bij sommige beeldschermresoluties ‘buiten’ het scherm vallen. Links heb ik dit weten te onderdrukken (met een div en een negatieve left-waarde) maar de rechterafbeelding veroorzaakt altijd een (horizontale) scrollbar (in FF).

Ik probeer dit nu met div’s op te lossen: een center div en vanuit die positie er een linker en rechterdiv aan hangen. De eis is wel dat de afbeeldingen niet kleiner mogen worden en overflow heb ik ook al geprobeerd maar uiteindelijk wil ik wel dat de pagina in zn geheel verticaal kan scrollen. Alleen de rechterdiv een overflow:hidden geven, had bij mij geen effect.

Weet iemand hoe dit op te lossen, moet ik mijn div structuur veranderen en zoja hoe of moet ik misschien wel helemaal niet met div’s werken?

Zie hieronder de code (zover) en voor de werking ervan ga naar
http://www.v8.nl/projecten/test2:

code:

<style type="text/css">

<!--

html{
   margin:0;
   padding:0;
  }

body {
    background: #8c040a url(../images/back_gradient.gif) top center repeat-x;
        }
    
#center {
    position: absolute;
    background: #464646 url(../images/content_gradient.gif) top center repeat-x;
    margin: 0 0 0 -455px;
    left: 50%;
    top: 0px;
    width: 910px;
    height: 100%;
    z-index: 2;
    }

#back_left {
    position: absolute;
    left: -606px;
    width: 605px;
    height: 100%;
    top: 0px;
    background: url(../images/back_left.jpg);
    z-index:1;
    }

#back_right {
    position:relative; */ absolute ook al geprobeerd /*
                left: 909px;
    height: 100%;
    width: 605px; */ wel of niet?, daardoor gaat ie scrollen juist! /*
    top: 0px;
    background: url(../images/back_right.jpg);
    overflow: hidden;
    z-index: 10;
    }

-->

</style>

En de code van html bestand:

code:

<body>

<div id=center>

    <div id=back_left>
        </div>

        <div id=back_right>
            </div>
    </div>

</body>

[ Voor 56% gewijzigd door Verwijderd op 13-02-2007 10:33 . Reden: update ]

maandag 12 februari 2007 18:22

Acties:

BasieP

ik ben na 5 regels al verdwaalt in je verhaal.
heb je misschien een tekening? (plaatje) die wat verduidelijkt? ah linkje gevonden..

en je kan je code tussen [code][/code] tags plaatsen, dat leest wat makkelijker

een divje non scrollable maken is simpel:

Cascading Stylesheet:

1	overflow: hidden;

de reden dat je horizontaal een scrollbar krijgt is omdat je divjes gewoon te breed zijn (bij elkaar)
DAAROM krijg je dan (door de hoogte van de scrollbar + de 100% height in je css) een verticale scrollbar.

wat je dus moet doen is je (rechter) divje kleiner maken of anders plaatsen.
Ikzelf heb hier (op 1600x1280) nog steeds scroll bars, dus die 'lagere reso' verhaal is beetje krom

even samengevat:
fix dit in je #right_back class en het werkt

Cascading Stylesheet:

1 2	position:absolute; right: 0px;

mocht je dan nog probs hebben bij lagere reso's (lager dan de breedte van je plaatjes) moet je in je left_back class nog een overflow: hidden; zetten

[ Voor 76% gewijzigd door BasieP op 12-02-2007 18:41 ]

This message was sent on 100% recyclable electrons.

maandag 12 februari 2007 19:55

Acties:

Rowanov

Kop eens wat anders...

Je loopt wel een onwijs te mutsen. Je kan een achtergrond centreren met css, waardoor al die andere noodgrepen onnodig worden. Aangezien je je achtergronden toch wel inlaadt, maakt het ook niet uit als het 1 plaatje is. Je denkt volgens mij in tabellen

maandag 12 februari 2007 22:12

Acties:

BasieP

Rowanov schreef op maandag 12 februari 2007 @ 19:55:
Je loopt wel een onwijs te mutsen. Je kan een achtergrond centreren met css, waardoor al die andere noodgrepen onnodig worden. Aangezien je je achtergronden toch wel inlaadt, maakt het ook niet uit als het 1 plaatje is. Je denkt volgens mij in tabellen

hij wil rechts en links een ander plaatje..
wanneer je op hoge reso kijkt moet plaatje links links blijven staan, en plaatje rechts rechts.
wat dus zorgt dat er een 'gat' in het midden komt (wat niet erg is want daar zit de content overheen)

This message was sent on 100% recyclable electrons.

dinsdag 13 februari 2007 10:26

Acties:

Verwijderd

Topicstarter

heren dank, heb mijn vraag iets aangepast om het duidelijker te maken en de juiste afbeeldingen bij de link ingevoegd - zie jullie commentaar/feedback graaaaag tegemoet :-)

dinsdag 13 februari 2007 10:30

Acties:

Verwijderd

Waarom niet gewoon float:right en float:left?

dinsdag 13 februari 2007 10:51

Acties:

Verwijderd

Topicstarter

dan plaats je m toch 'binnen' het scherm? Ik wil juist dat de rechterachtergrondafbeelding rechts uit het scherm verdwijnt maar in praktijk wel weer zichtbaar wordt als je de schermresolutie (iets) vergroot

dinsdag 13 februari 2007 13:22

Acties:

Verwijderd

Topicstarter

ik heb het probleem opgelost met behulp van tabellen ! dank voor feedback

dinsdag 13 februari 2007 14:34

Acties:

Verwijderd

Verwijderd schreef op dinsdag 13 februari 2007 @ 13:22:
ik heb het probleem opgelost met behulp van tabellen ! dank voor feedback

Dat is niet echt een oplossing. Tabellen voor design is zo 2002

dinsdag 13 februari 2007 16:09

Acties:

BasieP

Verwijderd schreef op dinsdag 13 februari 2007 @ 14:34:
[...]

Dat is niet echt een oplossing. Tabellen voor design is zo 2002

als het werkt is het een oplossing. of het mooi en netjes is is een tweede vraag.

trouwens heb ik nog steeds een horizontale scrollbar.. op je site (http://www.v8.nl/projecten/test2/)

[ Voor 16% gewijzigd door BasieP op 13-02-2007 16:10 ]

This message was sent on 100% recyclable electrons.

dinsdag 13 februari 2007 17:51

Acties:

Rowanov

Kop eens wat anders...

BasieP schreef op maandag 12 februari 2007 @ 22:12:
[...]

hij wil rechts en links een ander plaatje..
wanneer je op hoge reso kijkt moet plaatje links links blijven staan, en plaatje rechts rechts.
wat dus zorgt dat er een 'gat' in het midden komt (wat niet erg is want daar zit de content overheen)

Dan nog zie ik het probleem niet; je maakt van de hele achtergrond 1 groot plaatje en dat mik je op center. Zolang je gecentreerde deel niet dynamisch in breedte is werkt het gewoon prima.Ik maak wel ff een voorbeeld

Edit:

HTML:

<body>
    <div id="container">
        <h1>Jeeeeeeeeeeeeh!</h1>
        <p>Het werkt zoals het hoort, totdat je besluit op 2000+ pixels breedte besluit te gaan surfen.</p>
    </div>
</body>

Cascading Stylesheet:

body {
    text-align: center;
    background: #8c040a url('back.jpg') top center fixed no-repeat;
}
#container {
    text-align: left;
    width: 910px;
    margin: 0 auto;
}

Meer dan dit is het niet; zie hier een live voorbeeld.

Zoals je ziet heb ik je gradient een beetje vernaggeld, maar het gaat om het idee en je kan het zelf vast mooier. Als je een gat laat in de achtergrond en je middelste kolom een achtergrond geeft dan werkt het misschien nog fijner.

[ Voor 38% gewijzigd door Rowanov op 13-02-2007 18:09 ]

dinsdag 13 februari 2007 18:10

Acties:

BasieP

zoals ik het begreep waren de plaatjes links en rechts gekoppelt aan de linker en rechter border van je window.
wanneer je de pagina dan resized zal de linkerkant van het linker plaatje en de rechterkant van het rechter plaatje altijd zichtbaar zijn.

jouw manier werkt vanuit het midden, en wanneer je resized val de rechterkant van het rechter plaatje er als eerste af. (zelfde voor links)

This message was sent on 100% recyclable electrons.

dinsdag 13 februari 2007 18:14

Acties:

Rowanov

Kop eens wat anders...

Dat kan ik niet afleiden uit zijn posts, ik zie helemaal geen enkele zin die daar op wijst. Sowieso werkt hij met een fixed width container dus dan kan dat idee overboord

Altijd zichtbaar zie ik echt nergens staan en dit is altijd beter dan een tabel.

dinsdag 13 februari 2007 20:29

Acties:

BasieP

ik maakte het ook op uit zijn huidige (inmiddels oude) code

This message was sent on 100% recyclable electrons.

dinsdag 13 februari 2007 23:26

Acties:

Rowanov

Kop eens wat anders...

Die code was omslachtig en gewoon een tabel-structuur omgeschreven naar html, daar heb ik verder niet naar gekeken. De kans dat de TS ooit nog reageert lijkt me vrij klein helaas.

woensdag 21 februari 2007 10:15

Acties:

Verwijderd

Ik heb denk ik een aanverwant probleem, ik heb een design waarbij ik op een gradient background content wil plaatsen in een wit vlak met schaduw. Ik zie grote gelijkenissen met het bovengenoemde design, echter ik loop tegen het volgende probleem aan..
In IE6 zit er een pixel (of meer) verschil de background van de body en de background van de container div..

http://80.57.49.158/test/senzys/

Wat ik me afvraag is dus: hoe kan ik er voor zorgen dat het geheel in verticale richting variabel blijft (afhankelijk van de content) en in de horizontale richting correct op elkaar blijft afgestemd. Is de gegeven oplossing van Rowanov hier geschikt voor?

Mijn css:

code:

body {
    padding: 0;
    margin: 0;
    font-family:"Trebuchet MS", sans-serif;
    font-size: 11px;
    background: #cadb2a url(images/2.gif) repeat-y top center;
}


#container {
    padding: 0;
    margin: 0;
    position:relative;
    margin-right:auto;
    margin-left:auto;
    text-align: left;
    width: 808px;
    background: url(images/4.gif) no-repeat;    
}

#outer {
    position:relative;
    margin-right:auto;
    margin-left:auto;
    background: url(images/3.gif) repeat-x; 
}

Mijn html:

code:

<body>
    <div id="outer">
        <div id="container"></div>
                </div>
</body>