Div 100% in andere div.

Status
Niet open voor verdere reacties.
S

samcappelle05

Gebruiker
Lid geworden
8 aug 2007
Berichten
43
Hallo,

Ik heb ongeveer volgende layout voor m'n site, maar ik krijg hem maar niet goed.
Het is de bedoeling dat div1 de volledige breedte en hoogte inneemt. Dit lukt met:
Code: 
min-height: 100%;
Maar nu wil ik nog een div namelijk div2 die daarin gecentreerd staat en die ook die volledige hoogte heeft. Ik heb al:
Code: 
width: 820px;
margin: auto;
Maar alles wat ik probeer om hem 100% hoogte te geven lukt niet. Kan iemand me helpen?

Alvast bedankt

Sam
 
Laatst bewerkt:
.1{
border: 2px solid;
height: 100%;
}

.2{
border: 2px solid;
height: 100%;
width: 820px;
margin-left: 17%;
margin-right: 17%;
}

dat ziet er bij mij gecentreerd uit
ik weet niet of je de waarden van de marges moet veranderen voor andere beeld resoluties?
maar dat lijkt me juist het voordeel van procenten
zo zou het dus goed moeten zijn.

MvG
tiran818
 
Bedankt voor je reactie. Het centreren lukt idd met jouw code, maar dat ging met mijn margin:auto; even goed. Het probleem zit hem echter in de 100% hoogte van de 2e div.
 
bij mij is de 2e div ook 100% in de hoogte hoor
en de margin: auto; werkte bij mij niet XD
misschien zit het probleem elders in je site
 
Kheb gevonden waarom de jouwe bij mij niet werkte. Ik werk standaard in de XHTML1.0 Strict doctype.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Om een bizarre reden werken die heights niet in XHTML1.0 Strict. Ik zou m'n site wel graag in die doctype maken, bestaat hiervoor een oplossing?

Alvast bedankt
 
standaard hoogtes geven denk ik
misschien kan je werken met maten in Em, al s het goed is zijn die maten gebaseerd op hoe groot je letters zijn dus heb je op een kleiner beeldscherm kleinere letters dus als het goed is ook kleinereomgeving
weet k niet zeker echter

vel suc6
MvG
tiran818
 
Laatst bewerkt:
K'heb m'n probleem eens herwerkt. Zo ziet de layout van m'n site er dus uit.

De gele footer zou dus altijd tegen de onderkant van het browser moeten liggen. Maar wanneer er geresized wordt moet de footer stoppen tegen de cyaankleurige dummy (waar hij nu staat).
Ik heb al wat met height en position geprobeerd, maar ik krijg het maar niet goed.

Alvast bedankt
 
Laatst bewerkt:
@ Tiran818:
De nattigheid is, dat je niet alleen van tevoren niet weet welke lettergrootte de bezoeker heeft ingesteld, maar ook niet of deze bij zijn/haar resolutie het venster niet verkleind heeft, of een extra toolbar in z'n/h'r browser heeft staan e.d. Daarom lijkt me een em-oplossing niet te kunnen werken.
  • Even terzijde: als je een vaste paginabreedte in px hebt, kunnen niet de l/r margins op een percentage (bv. 17%) gezet worden om de pagina altijd horizontaal te centreren (kijk maar), die moeten dan op "auto" staan. Met voor de oudere Internet Explorers de body op { text-align: center; } en de #wrapper op { text-align: left; }.
Maar weer terzake!
Ik heb een 6-tal testpagina's gemaakt in XHTML Strict met verschillende varianten voor de { height: 100%}.
  • Daarbij de 1e div weggelaten, want die styles kunnen ook direct in de body.
  • De 2e div heb ik "wrapper" genoemd.
Ze beginnen op fullpage_test-1.htm.

Testen maar met verschillende resoluties, vensters en lettergrootten! :)
Maar afhankelijk van het doel van samcappelle05 met de 100% hoogte (en de verdere layout / inhoud van de pagina) zijn er misschien ook andere mogelijke oplossingen. Sam?

Succes!
CSS-hunter

Edit
O, al doende het bericht van Sam hierboven niet gezien: duidelijk een kruispost! ;)
Ik ga zo even kijken.
 
Laatst bewerkt:
Hoi Sam,
Ik verwachtte al min of meer zoiets als je gele footer-layout, en had deze test-7 alvast in het parkeervak gezet. :D

Voor een subtielere versie moet je eens kijken bij de FooterStickAlt van de Man in het Blauw.
Komt die niet warm in de buurt?

Groetjes,
CSS-hunter
 
Laatst bewerkt:
Mooi toch? :D

Eventueel kan je nog #slideshow { clear: left;} toevoegen, om te verhinderen dat de #slideshow onder de #contentbottom schuift, als er heel weinig content mocht zijn (maar dat zal in de praktijk waarschijnlijk niet gebeuren).

Toegankelijkheidsopmerking: ik zie dat je de :focus stippeltjes hebt weggehaald bij hoveren over het menu. Mensen met verminderde handfunctie (maar met prima ogen) die geen muis kunnen gebruiken en op de Tab-toets zijn aangewezen om van link naar link te springen, kunnen nu niet zien waar ze zitten. :(
Met toevoegen van a:focus in de nav-css waar al a:hover staat, kunnen zij ook Tabberend genieten van het fraaie oplichten van de menu-items. :) In de #content kan je denk ik de stippeltjes gewoon herstellen.

Met vriendelijke groet,
CSS-hunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan