CSS positionering, hoe speel ik dit klaar - Softwareontwikkeling

dinsdag 20 mei 2003 09:12

Acties:

$ondertitel

Topicstarter

Na een vorig topic van mij ([rml][ HTML] meerdere koppen naast elkaar[/rml])

Heb ik een vraagje over css.

Ik wil graag een verdeling maken van drie koppen voor m'n website. En ipv tables ben ik nu met css aan de gang gegaan.

Ik wil eigenlijk drie koppen hebben.

Afbeeldingslocatie: http://www.tesla.nl/gerben/reut.JPG

Afbeeldingslocatie: http://www.tesla.nl/gerben/reut.JPG

Zoiets

Nu heb ik de volgende code:

PHP:

<html>
    <head>
        <title>Zo mot het</title>
        <style type="text/css">
            #topcontent {
                position: absolute;
                left:1%;
                width:90%;
                top:1%;
                background:#fff;
                overflow:none;
            }

            #leftcontent {
                position: absolute;
                left:1%;
                width:40%;
                top:30%;
                background:#fff;
            }

            #rightcontent {
                position: absolute;
                left:50%;
                width:40%;
                top:30%;
                background:#fff;
            }
            
            #rightcontent, #leftcontent, #topcontent {
                border:1px solid #000;
            }
        </style>
    </head>
    <body>
        <div id="topcontent">
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
            Dummy tekst<br>
        </div>
        <div id="leftcontent">
            leftcontent
        </div>
        <div id="rightcontent">
            rightcontent
        </div>
    </body>
</html>

Dat ziet er alsvolgt uit: http://www.tesla.nl/gerben/site/test.html

Het probleem is dat niet weet hoeveel content er in 'topcontent' komt. Dat moet namelijk uit een database gaan komen.

En in css kan je voor zover ik weet niet met variables werken, dus kan je ook niet zeggen ga eens 10 pixels onder de bovenste (div) staan.

Hoe kan er ervoor zorgen dat de onderste twee 'layers' een x aantal pixels onder de bovenste moeten staan?

[ Voor 26% gewijzigd door me1299 op 20-05-2003 09:14 ]

Het maakt eigenlijk niet uit wat je bewuste geest doet, omdat je onderbewuste automatisch precies dat doet wat het moet doen

dinsdag 20 mei 2003 09:18

Acties:

Hoppie

CSS kan inderdaad geen variabelen aan, maar je kunt natuurlijk wel dynamisch (met PHP bijvoorbeeld) een stylesheet genereren waarin je afhankelijk van de hoeveelheid tekst bepaalde posities aanpast.
Overigens gebruik ik zelf geen percentages, maar absolute postionering met px.
Dus left= 100px, bijvoorbeeld.

dinsdag 20 mei 2003 09:19

Acties:

me1299

$ondertitel

Topicstarter

Hoppie schreef op 20 mei 2003 @ 09:18:
CSS kan inderdaad geen variabelen aan, maar je kunt natuurlijk wel dynamisch (met PHP bijvoorbeeld) een stylesheet genereren waarin je afhankelijk van de hoeveelheid tekst bepaalde posities aanpast.
Overigens gebruik ik zelf geen percentages, maar absolute postionering met px.
Dus left= 100px, bijvoorbeeld.

Het is nogal moeilijk te berekenen aangezien er ook plaatjes in kunnen als content en ik dus met php niet kan uitrekenen hoe lang dat moet worden.

Ik kan wel absolute pixels aangeven, maar dat maakt ook niet veel uit.

In mijn vorige topic kreeg ik allemaal reacties dat ik met css moet gaan werken, maar tot zover kom ik wel van een koude kermis thuis

Het maakt eigenlijk niet uit wat je bewuste geest doet, omdat je onderbewuste automatisch precies dat doet wat het moet doen

dinsdag 20 mei 2003 09:22

Acties:

DeverauX

Focus is everything

Met absolute positioning gaat dit afaik niet werken. Maar waarom maak je gebruik van layers en niet gewoon van tables? Dit is namelijk ook goed mogelijk voor hetgeen wat jij wilt.

Wat iig ook niet gaat werken is PHP te laten kijken wat de grote van je content is. Aangezien je werkt met percentages is de beschikbare ruimte voor content per resolutie verschillend en is het dus zinloos dit te doen.

...whatever was distasteful or unpleasant or uncomfortable or painful - music could always soothe that.
All you have to do is reach out to beauty.
Quincy Jones

dinsdag 20 mei 2003 09:23

Acties:

Hoppie

Je kunt de diverse div's vaste groottes geven en je content div scrollbaar maken. Zodoende kun je meer content kwijt, zonder dat je je layout hoeft te wijzigen.
Voorbeeld: http://hw63.betuwe.net/new_site/index.php?page=gastenboek (let niet op de zooi, ben nog bezig met de site

). Deze site is ook volledig met div'jes opgebouwd (zie source).

[ Voor 6% gewijzigd door Hoppie op 22-05-2003 21:29 . Reden: IP2URL ]

dinsdag 20 mei 2003 09:24

Acties:

esf

Misschien toch een combinatie van een tabel met CSS. Dan maak je een tabel met alleen twee rijen en de onderste rij deel je in mbv CSS.. Ik weet niet of dit misschien een optie is, maar het kan wel in mijn ogen..

The hardest thing in the world to understand is the income tax. - Albert Einstein

dinsdag 20 mei 2003 09:25

Acties:

Hoppie

Er worden weer suggesties gegeven voor het bruik van tabellen, maar div'jes werken makkelijker. Je kunt er eenvoudiger mee schuiven of formaten wijzigen dan bij tabellen.

dinsdag 20 mei 2003 09:28

Acties:

Bosmonster

*zucht*

Sorry dat ik het zeg... tables zijn er niet voor bedoeld.. maar als je een enorme berg CSS en workarounds moet schrijven en ook nog een berg compatibiliteit in moet leveren om hetzelfde te bereiken in 'mooiere html want we gebruiken divs', dan is voor mij al niet meer nodig.

Misschien leuk voor de toekomst, als alle gebruikte browsers netjes de zelfde boxmodels gebruiken (of aan te zetten zijn tot) en alle GEBRUIKTE browsers volledig CSS2 ondersteunen.

[ Voor 25% gewijzigd door Bosmonster op 20-05-2003 09:29 ]

dinsdag 20 mei 2003 09:28

Acties:

Ramon

volgens mij werkt het wel gewoon als je die twee onderste vakken niet absoluut positioneerd

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/

dinsdag 20 mei 2003 09:29

Acties:

Verwijderd

Waarom absoluut positioneren als het heel makkelijk met float: left kan?

Of snap ik het probleem niet

dinsdag 20 mei 2003 09:30

Acties:

DeverauX

Focus is everything

Er worden weer suggesties gegeven voor het bruik van tabellen, maar div'jes werken makkelijker. Je kunt er eenvoudiger mee schuiven of formaten wijzigen dan bij tabellen.

Klopt! En dit is dan ook zeker een sterk voordeel van layers t.o.v. tabellen.
Maar aan de andere kant zitten er toch ook enkele nadelen aan die het gebruik van layers minder plezierig maken.
Ben je er zeker van dat de content die in de layer geplaatst gaat worden nooit buiten de afmetingen van deze layer zal komen dan is het geen probleem, en zelfs aan te raden gebruik te maken van layers.
Is dit echter niet het geval dan wordt het allemaal wat lastiger en maak ik persoonlijk dan ook liever gebruik van tabellen

...whatever was distasteful or unpleasant or uncomfortable or painful - music could always soothe that.
All you have to do is reach out to beauty.
Quincy Jones

dinsdag 20 mei 2003 09:32

Acties:

Bosmonster

*zucht*

DeverauX schreef op 20 May 2003 @ 09:30:
[...]

Klopt! En dit is dan ook zeker een sterk voordeel van layers t.o.v. tabellen.
Maar aan de andere kant zitten er toch ook enkele nadelen aan die het gebruik van layers minder plezierig maken.
Ben je er zeker van dat de content die in de layer geplaatst gaat worden nooit buiten de afmetingen van deze layer zal komen dan is het geen probleem, en zelfs aan te raden gebruik te maken van layers.
Is dit echter niet het geval dan wordt het allemaal wat lastiger en maak ik persoonlijk dan ook liever gebruik van tabellen

Dat is onzin.. divs en gelijken hebben net als tables geen problemen met overlopende content.

dinsdag 20 mei 2003 09:32

Acties:

me1299

$ondertitel

Topicstarter

Verwijderd schreef op 20 May 2003 @ 09:29:
Waarom absoluut positioneren als het heel makkelijk met float: left kan?

Of snap ik het probleem niet

Sorry maar mijn css kennis rijkt niet zover. Maar moet ik met float left helemaal geen top meer op te geven?

Het maakt eigenlijk niet uit wat je bewuste geest doet, omdat je onderbewuste automatisch precies dat doet wat het moet doen

dinsdag 20 mei 2003 09:40

Acties:

Verwijderd

Ik heb even een voorbeeldje online gezet, aan de hand van jouw pagina.

Hope this helps

dinsdag 20 mei 2003 09:41

Acties:

crisp

Devver

Pixelated

opzetje

HTML:

<html>
<head>
<title>divjes</title>
<style type="text/css">

#div_content {
  width: 100%;
  height: 200px;
  border: 1px solid #000;
}

#div_onder {
  position: relative;
  margin-top: 20px;
  width: 100%;
}

#div_linksonder {
  float: left;
  width: 48%;
  height: 100px;
  border: 1px solid #000;
}

#div_rechtsonder {
  float: right;
  width: 48%;
  height: 100px;
  border: 1px solid #000;
}

</style>
</head>
<body>
<div id="div_content">content</div>
<div id="div_onder">
  <div id="div_linksonder">linksonder</div>
  <div id="div_rechtsonder">rechtsonder</div>
</div>
</body>
</html>

Verwijderd schreef op 20 May 2003 @ 09:40:
Ik heb even een voorbeeldje online gezet, aan de hand van jouw pagina.

Hope this helps

hehe, bijna zelfde idee

[ Voor 31% gewijzigd door crisp op 20-05-2003 09:42 ]

Intentionally left blank

dinsdag 20 mei 2003 09:55

Acties:

DeverauX

Focus is everything

Bosmonster schreef op 20 May 2003 @ 09:32:
[...]

Dat is onzin.. divs en gelijken hebben net als tables geen problemen met overlopende content.

Wanneer je een layer hebt met een hoogte van 100px en je plaatst hier een image of content van 150px hoog in, dan is het niet zoals met tables dat deze verticaal mee-geresized wordt. MSIE heeft hier echter geen problemen mee die doet het wel, maar Mozilla aan de andere kant niet . (die gaat gewoon uit van de 100px en trekt zich niks aan van de overlopende content )

...whatever was distasteful or unpleasant or uncomfortable or painful - music could always soothe that.
All you have to do is reach out to beauty.
Quincy Jones

dinsdag 20 mei 2003 09:58

Acties:

Bosmonster

*zucht*

overflow: visible (hoewel iets anders in Mozilla als in Explorer blijkbaar)

Of ander gewoon geen hoogte zetten, maar deze afhankelijkhouden van de content.

De Mozilla implementatie van overflow:visible is nog extreem nutteloos blijkt

Wat heb je er in hemelsnaam aan als de overflow als een vreemde lap over de rest komt te vallen

[ Voor 115% gewijzigd door Bosmonster op 20-05-2003 10:05 ]

dinsdag 20 mei 2003 10:04

Acties:

me1299

$ondertitel

Topicstarter

crisp schreef op 20 mei 2003 @ 09:41:
opzetje

HTML:

<html>
<head>
<title>divjes</title>
<style type="text/css">

#div_content {
  width: 100%;
  height: 200px;
  border: 1px solid #000;
}

#div_onder {
  position: relative;
  margin-top: 20px;
  width: 100%;
}

#div_linksonder {
  float: left;
  width: 48%;
  height: 100px;
  border: 1px solid #000;
}

#div_rechtsonder {
  float: right;
  width: 48%;
  height: 100px;
  border: 1px solid #000;
}

</style>
</head>
<body>
<div id="div_content">content</div>
<div id="div_onder">
  <div id="div_linksonder">linksonder</div>
  <div id="div_rechtsonder">rechtsonder</div>
</div>
</body>
</html>

[...]

hehe, bijna zelfde idee

Dank u $_/-\o_$

Afbeeldingslocatie: http://www.unjunk.com/pie.gif

Het maakt eigenlijk niet uit wat je bewuste geest doet, omdat je onderbewuste automatisch precies dat doet wat het moet doen

dinsdag 20 mei 2003 10:08

Acties:

DeverauX

Focus is everything

overflow op visible zetten heeft in mozilla geen effect. Wanneer je geen hoogte aangeeft werkt het inderdaad wel, maar geeft ook problemen wanneer er bijvoorbeeld geen content aanwezig is

Bekijk het volgende voorbeeld maar eens met Mozilla:

...whatever was distasteful or unpleasant or uncomfortable or painful - music could always soothe that.
All you have to do is reach out to beauty.
Quincy Jones

dinsdag 20 mei 2003 12:31

Acties:

Eärendil

Mozilla doet wat het moet doen volgens de specs van w3: alles wat niet in de box past daarbuiten weergeven. De default value van overflow is visible, daarom veranderd er niets in Mozilla. Om alles in de box te krijgen moet je de height van de box op auto zetten, eventueel met 'min-height' op 100px

zie:
http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

dinsdag 20 mei 2003 13:17

Acties:

Bosmonster

*zucht*

height:auto is ook default voor zover ik weet. En min-height is helaas CSS2.

dinsdag 20 mei 2003 16:02

Acties:

Eärendil

De CSS2 Recommendation is ook al 5 jaar oud en in Mozilla werkt min-height iig wel, heb geen IE bijdehand om te testen.

dinsdag 20 mei 2003 16:08

Acties:

crisp

Devver

Pixelated

Eärendil schreef op 20 May 2003 @ 16:02:
De CSS2 Recommendation is ook al 5 jaar oud en in Mozilla werkt min-height iig wel, heb geen IE bijdehand om te testen.

Neem van mij aan dat het in IE (onder windows) nog niet werkt

Intentionally left blank

dinsdag 20 mei 2003 16:57

Acties:

Johnny

ondergewaardeerde internetguru

crisp schreef op 20 mei 2003 @ 16:08:
[...]

Neem van mij aan dat het in IE (onder windows) nog niet werkt

Nee, die negeert min-height, min-width, max-height en max-width gewoon

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

dinsdag 20 mei 2003 22:01

Acties:

Eärendil

Is dat wat anders dan niet werken dan

dinsdag 20 mei 2003 22:12

Acties:

crisp

Devver

Pixelated

Eärendil schreef op 20 May 2003 @ 22:01:
Is dat wat anders dan niet werken dan

negeren wat je niet kent is gewoon goed en volgens de specificaties. Als je echter negeert wat volgens dezelfde specificaties wel bestaat, dan staat dat idd gelijk aan 'niet werken'

Intentionally left blank

dinsdag 20 mei 2003 22:16

Acties:

2

Hier een overzicht van oplossingen voor tal van dit soort problemen:

http://www.thenoodleincid...als/box_lesson/boxes.html