[CSS] box model troubles - Softwareontwikkeling

woensdag 3 december 2003 02:27

Acties:

Verwijderd

Topicstarter

nou, zit er nu al aardig wat uren mee te prutsen, maar het wil maar niet lukken..

het probleem:

Op http://www.webpro.nl/1ib.nl/ is te zien hoe ik het zo'n beetje wil hebben, maar daar is een groot stuk pagina leeg aan de onderkant (na verticaal scrollen), doordat ik met position:relative en dan negatieve waarden voor top:-...px de boel juist heb weten te positioneren.

Cascading Stylesheet:

body {
    width:98%;
    margin-top:10px;
    background-color:#FFEAB7;
    text-align:center;
    }
.surround {
    width:760px;
    background-color:#CC0000;
    }
.page-div {
    width:754px;
    margin-top:3px;
    text-align:left;
    background-color:#FFEAB7;
    }
.logo {
    position:relative;
    left:0px;
    top:0px;
    width:270px;
    height:105px;
    background:url(images/logo.gif) no-repeat;
    }
.nav {
    position:relative;
    left:270px;
    top:-105px;
    width:484px;
    height:87px;
    background:url(images/line.gif) bottom repeat-x;
    }
.left {
    position:relative;
    top:-87px;
    width:208px;
    height:350px;
    padding-right:2px;
    background: url(images/line.gif) right repeat-y;
    }
.content {
    position:relative;
    left:230px;
    top:-430px;
    width:560px;
    }
.content p {
    margin-right:40px;
    text-align:left;
    font: 12px Arial, Helvetica, sans-serif;
    }
.banner {
    float:right;
    width:268px;
    height:166px;
    background:url(images/banner.gif) no-repeat;
    }

Op http://www.webpro.nl/2ib.nl/ is alles goed gepositioneerd (dmv 'floats'), behalve dan dat gedraaide blok, die krijg ik dan met geen mogelijkheid iets buiten de rechterkant (zoals in .../1ib.nl). met een position:absolute werken is geen optie, omdat-ie dan maar op 1 resolutie correct wordt weergegeven.

Cascading Stylesheet:

body {
    width:98%;
    margin-top:10px;
    background-color:#FFEAB7;
    text-align:center;
    }
.surround {
    width:760px;
    background-color:#CC0000;
    }
.page-div {
    width:754px;
    margin-top:3px;
    text-align:left;
    background-color:#FFEAB7;
    }
.logo {
    float:left;
    width:270px;
    height:105px;
    background:url(images/logo.gif) no-repeat;
    }
.nav {
    float:right;
    width:484px;
    height:87px;
    background:url(images/line.gif) bottom repeat-x;
    }
.left {
    float:left;
    clear:left;
    height:350px;
    padding-right:2px;
    background: url(images/line.gif) right repeat-y;
    }
.content {
    float:right;
    width:500px;
    }
.content p {
    margin-right:40px;
    text-align:left;
    font: 12px Arial, Helvetica, sans-serif;
    }
.banner {
    float:right;
    width:268px;
    height:166px;
    background:url(images/banner.gif) no-repeat;
    }

In ../2ib.nl zou ik ook nog graag de surround-div tot onderen door laten lopen (zodat de lijnen tot het onderste frame doorlopen), maar dat is geen prioriteit.

Concluderend denk ik dat het oplossen van de bovenste mogelijkheid (../1ib.nl) de eenvoudigste is (dus het "weg" zien te krijgen van de lege ruimte). Om ruimte in dit topic te besparen kan de html evt. wel makkelijk geript worden...

PS Vraag me niet waarom die width:98% daar staat, anders krijg ik een horizontale scrollbalk - en als ik IETS irritant vind..

woensdag 3 december 2003 09:40

Acties:

bakakaizoku

ja

volgens mij was die horizontale scrollbalk in frames op te lossen door xhtml1.1 te gebruiken..

HTML:

1
2
3

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

edit:
linkje erbij gezocht

http://www.torn.be/kazza/...r_scrlbar_results_en.html

[ Voor 43% gewijzigd door bakakaizoku op 03-12-2003 09:46 ]

rm -rf ~/.signature

woensdag 3 december 2003 10:56

Acties:

Verwijderd

Topicstarter

hey bedankt! da's duidelijk.. alleen in mijn geval moest ik toch die hack (overflow-x/y) gebruiken (>> XHTML 1.0 Frameset)
volgens de tabel op die pagina zou ik met XHTML1.1 geen scrollbars moeten krijgen (ik heb WinXP IE6), maar goed, frames zijn niet mijn doel.. (alleen in dit geval noodzakelijk vrees ik om dat blok daar onderaan vast te zetten)

[ Voor 17% gewijzigd door Verwijderd op 03-12-2003 11:03 ]

woensdag 3 december 2003 13:50

Acties:

crisp

Devver

Pixelated

je kan ook binnen een container absoluut positioneren ten opzichte van die container; dat lijkt mij de mooiste oplossing voor dat gedraaide blok in dit geval (en mogelijk ook voor andere elementen). In ieder geval vind ik de oplossing met floats al een stuk mooier dan met relatieve verplaatsingen, maar ik denk dat het nog een stuk eenvoudiger kan allemaal.

[ Voor 39% gewijzigd door crisp op 03-12-2003 13:52 ]

Intentionally left blank

woensdag 3 december 2003 14:20

Acties:

Verwijderd

Topicstarter

ja dat dacht ik ook, maar als ik een

Cascading Stylesheet:

1
2
3

position:absolute;
left:0px;
top:0px;

meegeef aan de DIV van dat gedraaide blok (.banner), terwijl deze als containing DIV die DIV met tekst (.content) heeft, wordt-ie toch absoluut gepositioneerd t.o.v. de "document window" (?), oftewel helemaal linksbovenin de pagina.

HTML:

1	<div class="content"><div class="banner"></div>...blabla....</div>

of heeft dat misschien te maken met het feit dat .content een "floating" DIV is?

[ Voor 20% gewijzigd door Verwijderd op 03-12-2003 14:23 ]

woensdag 3 december 2003 16:05

Acties:

Genoil

is het niet zo dat als een element absoluut wilt positioneren t.o.v. z'n container, die container (, en evt alle 'hoger gelegen' containers) ook absoluut gepositioneerd moet(en) zijn?

woensdag 3 december 2003 16:15

Acties:

crisp

Devver

Pixelated

Genoil schreef op 03 december 2003 @ 16:05:
is het niet zo dat als een element absoluut wilt positioneren t.o.v. z'n container, die container (, en evt alle 'hoger gelegen' containers) ook absoluut gepositioneerd moet(en) zijn?

hij moet een of andere vorm van positioning hebben, voor een float kan je een position:relative gebruiken.

Intentionally left blank

woensdag 3 december 2003 17:08

Acties:

Verwijderd

Topicstarter

aha! dat was het dus.. tnx! hopelijk bespaart dit anderen ook een boel tijd.

jammer dat-ie nu de tekst binnen de .content DIV gewoon door laat lopen, maar ik gooi er voor ongeveer de eerste paragraaf wel een margin-right in. (dit bedoel ik dus: http://www.webpro.nl/2ib.nl/ - t/m vandaag woensdag 3-12 laat ik het zo staan)