[CSS] 780 PX content gecentreerd &amp; doorlopend weergeven

woensdag 22 februari 2006 16:32

Splitting the thaum.

Gewoon zo, en dan de body een zwarte background meegeven, en de container div height: 100%;

.

edit:

Code:

Cascading Stylesheet:

html, body {
  height: 100%;
  width: 100%;
  background-color: black;
}

div#container {
  height: 100%;
  width: 800px;
  background-color: lime;
}

[ Voor 37% gewijzigd door JHS op 22-02-2006 16:32 ]

DM!

Acties:

Verwijderd

Topicstarter

JHS schreef op woensdag 22 februari 2006 @ 16:31:
Gewoon zo, en dan de body een zwarte background meegeven, en de container div height: 100%; .

ja maar dat groene stuk moet dan dus nog tot helemaal onderin het scherm doorlopen zodat je 3 verticaal gesplitste vakken krijgt

woensdag 22 februari 2006 16:34

Acties:

De Parasitaire Capaciteit!

Een van de mogelijke oplossingen hiervoor is de volgende (deze gebruik ik zelf altijd):

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>CSS Only Footer</title>
    <style type="text/css">      
        html {
            margin: 0; 
            height: 100%; 
            background: white;
        } 
        
        body {
            position: relative; 
            min-height: 100%; 
            width: 580px;
            border-left: 1px solid black;
            border-right: 1px solid black;
            padding: 0 10px;
            margin: 0 auto;
            background: #eeeeee;  
        }
              
    </style>
    <!--[if lt IE 7]>
        <style type="text/css">
            body { height: 100%; }
        </style>
        <![endif]-->
</head>
<body>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ut arcu ut eros vulputate luctus. Nullam iaculis nisl sodales purus. Ut magna. Vivamus varius, lacus vitae porta egestas, ante pede volutpat neque, ac laoreet odio felis nec tortor. Praesent lectus eros, auctor at, ultricies eget, laoreet at, mauris. In hac habitasse platea dictumst. Sed lobortis. Aliquam dignissim orci. Mauris iaculis euismod tellus. Nunc id diam. Suspendisse posuere gravida nunc. Vestibulum metus neque, porttitor sit amet, imperdiet nec, adipiscing in, diam. Phasellus id ipsum. Fusce vel mi. In hac habitasse platea dictumst. 
</body>
</html>

De kleurtjes en de breedte mag je zelf ff aanpassen

[ Voor 9% gewijzigd door Sappie op 22-02-2006 16:34 ]

woensdag 22 februari 2006 16:36

Acties:

woensdag 22 februari 2006 16:36

Splitting the thaum.

Verwijderd schreef op woensdag 22 februari 2006 @ 16:32:
[...] ja maar dat groene stuk moet dan dus nog tot helemaal onderin het scherm doorlopen zodat je 3 verticaal gesplitste vakken krijgt

Daarvoor had ik ook een oplossing aangedragen, na de link. Iniedergeval: voorbeeld

.

edit:

Updated en verbeterd, inmiddels.

[ Voor 6% gewijzigd door JHS op 22-02-2006 16:39 ]

DM!

Acties:

Verwijderd

Topicstarter

En vanwaar de body alleen bij IE 7 een hoogte van 100% ?

@ JHS, die manier ben ik onder t posten ook aan t uitproberen, maar is zon gezoek elke keer in mn XSL, word tijd voor weer een uurtje commentaar gaan plaatsen

[ Voor 60% gewijzigd door Verwijderd op 22-02-2006 16:37 ]

woensdag 22 februari 2006 16:38

Acties:

De Parasitaire Capaciteit!

lezen

er staat "if lt IE7".. dat wat in de conditional comment staat wordt geserveerd aan alle IE versies _kleiner_ dan IE7. Verder kent IE6 geen min-height.. height wordt daarentegen geinterpreteerd als zijnde min-height.

woensdag 22 februari 2006 16:45

Acties:

Verwijderd

Topicstarter

De oplossing van JHS werkt, enige waar ik nog mee zit is de padding. Ik wil mijn content niet strak tegen de kantlijn aan hebben. Maar als ik padding toevoeg schuift hij de content niet op maar maakt hij deze groter aan die kant!

woensdag 22 februari 2006 16:47

Acties:

De Parasitaire Capaciteit!

das nou het w3c box-model he...

woensdag 22 februari 2006 16:50

Acties:

woensdag 22 februari 2006 16:52

Splitting the thaum.

Wat bedoel je in vredesnaam met "de content groter maken"

.

DM!

Acties:

Verwijderd

Topicstarter

Ja daar kwam ik idd wat van tegen maar vond t best vaag

Als ik mijn plaatje die 780px breed is en in de content zit, nu eens over de padding kan laten vallen, of zorgen dat de padding alleen voor dat plaatje niet geld lijkt mij het ook opgelost. overflow:visible werkt niet

@JHS:

Het middelste vak, de div dus, die word groter ((huidige grote van div + padding) = width)

edit:

het probleem is opgelost als ik,
de container een width van 775px & padding-left van 5px geef
het plaatje van 780px een margin-left van -5px geef

Lijkt me alleen dat nu het centreren 5 pixels afwijkt

edit:

ff getest met veel hogere waardes dan 5 pixels, het centreren wijkt niet af

[ Voor 47% gewijzigd door Verwijderd op 22-02-2006 16:59 ]

woensdag 22 februari 2006 16:56

Acties:

woensdag 22 februari 2006 16:58

Splitting the thaum.

Verwijderd schreef op woensdag 22 februari 2006 @ 16:52:
Ja daar kwam ik idd wat van tegen maar vond t best vaag Als ik mijn plaatje die 780px breed is en in de content zit, nu eens over de padding kan laten vallen, of zorgen dat de padding alleen voor dat plaatje niet geld lijkt mij het ook opgelost.

Geef de container geen padding mee, zet je plaatje daar direct in, maar een subcontainer, doe daar de rest, en geef die padding mee?

@JHS:
Het middelste vak, de div dus, die word groter ((huidige grote van div + padding) = width)

Dat zou zover ik weet en als ik je goed begrijp, eventueel met uitzondering van replaced content, niet zo moeten zijn

.

DM!

Acties:

De Parasitaire Capaciteit!

Verwijderd schreef op woensdag 22 februari 2006 @ 16:52:
Ja daar kwam ik idd wat van tegen maar vond t best vaag Als ik mijn plaatje die 780px breed is en in de content zit, nu eens over de padding kan laten vallen, of zorgen dat de padding alleen voor dat plaatje niet geld lijkt mij het ook opgelost. overflow:visible werkt niet

Hier snap ik werkelijk niets van

Maar het w3 box-model zegt dat de margins en paddings bij de breedte worden opgeteld. Specificeer je dus een hoogte / breedte van 100% en pas je daar nog paddings op toe dan krijg je te maken met scroll bars. Beter voeg je een subcontainer binnen de container (of in mijn voorbeeld binnen de body) toe en pas je daarop de eventuele paddings toe.

edit:
wellicht zou je je beter eens wat verder verdiepen in CSS en alles wat daarbij komt kijken

[ Voor 9% gewijzigd door Sappie op 22-02-2006 16:59 ]