Fullscreen omlijsting, die meeresized met window

donderdag 23 februari 2012 23:52

Acties:

0 Henk 'm!

Topicstarter

Na totaal >5 uur spelen met css en nog geen tevredenstellend resultaat te hebben bereikt ben ik toe aan advies.

code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <style type="text/css">
            #inner {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    width: 99%;
                    height: 99%;
                    margin: auto;
                    background-color: white;
                    } 
        </style>
    </head>
    
    <body bgcolor="grey">
    
        <div id="inner">
        
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            
        </div>
        
    </body>
    
</html>

Ik probeer een simpele omlijsting te bouwen. Fullscreen, wanneer je niet hoeft te scrollen ziet het er prima uit. Maar wanneer je wel moet scrollen of het window resized is, valt de tekst buiten de omlijsting.

Alternatieve css code voor #inner:

code:

            #inner {
                    position:absolute;
                    top:0;
                    left:25%;
                    width:50%;
                    background-color:white;
                    padding:0
                    }

Geen gek gedrag bij resizes, maar nu loopt de witte binnenkant natuurlijk niet tot onder als er weinig content is. Zet er 'bottom: 0px' in en we zijn weer terug bij af.

De code ben ik kwijt, maar gister had ik nog een resultaat waarbij de inner mee resizede, maar net te klein was, kunstmatig groot houden lukte niet netjes en is uberhaupt niet mooi.

Gespeeld met heights/widths op body. Body een 'border: solid 10px #FF0000' geven, klonk leuk, maar faalt ook.

Mis ik een belangrijke code of is het niet mogelijk?

vrijdag 24 februari 2012 11:09

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Html
Css

en met min-height ipv height?

vrijdag 24 februari 2012 21:58

Acties:

0 Henk 'm!

Copyman

Dode muis

Simpelweg zo: http://jsfiddle.net/ETNGC/?

Zeer belangrijke informatie: Inventaris

zaterdag 25 februari 2012 14:35

Acties:

0 Henk 'm!

NiteSpeed

Code van Copyman aangepast om te laten zien wat er tegenwoordig mogelijk is met box-sizing: border-box

http://jsfiddle.net/Lk3NJ/

zaterdag 25 februari 2012 16:00

Acties:

0 Henk 'm!

Saturnus

Topicstarter

@Bosmonster
Helpt helaas niet.
Werkt wel bij de alternatieve code.

@Copyman
Dat komt erg in de buurt. Het liefst zou ik hebben dat de content niet in de box scrollt, maar dat het een enkel geheel is. Ik heb wat gespeeld met overflow (te meer omdat ik die niet kende), maar alleen daarmee lijk je dat niet te kunnen bereiken.

@NiteSpeed
Ik zie geen verschil, verkeerde code gepaste denk ik?

Wat doet de ">" uit de code van Copyman? Via google zou je het moeten kunnen zoeken met [>] maar dat werkt niet.

[ Voor 4% gewijzigd door Saturnus op 25-02-2012 22:42 ]

zaterdag 25 februari 2012 17:10

Acties:

0 Henk 'm!

geert1

De ">" gebruikt in css selectors heet een child selector of descendant selector. Wat er achter het teken staat moet een direct kind-element zijn van wat ervoor staat. In dit geval selecteert de regel dus een element met de class "inner", alleen waar die een direct kind is van "body". In het geval dat er maar één element is met de class "inner" heeft het niet heel veel toegevoegde waarde (afgezien van misschien een snelheidsverschil), maar in complexere situaties is het een erg handig hulpmiddel. Dieper gelegen elementen met dezelfde class "inner" zouden hiermee niet worden geselecteerd.

Voor meer over css-selectors check je bijvoorbeeld dit. Let wel dat niet alle css3-selectors goed worden ondersteund door oudere browsers. Selectors zijn van groot belang als je je css-kennis verder wilt uitbreiden.

Over je probleem: De oplossing van Copyman lijkt me niet verkeerd. Als je kader een variabele breedte moet hebben (mee moet groeien met het browservenster qua breedte) dan is het best een nette oplossing. Er zijn vast ook mogelijkheden om 4 elementen te maken, voor elk van de 4 zijden van het kader, en die dan absoluut te positioneren ofzo. Maar dan zit je met veel onnodige html en alsnog wordt het lastig om het goed te krijgen.

NiteSpeeds link lijkt inderdaad niet helemaal te doen wat hij bedoelt. Hij heeft het in elk geval over de enorm handige css-eigenschap box-sizing, die ondersteund wordt vanaf IE8 en in alle moderne browsers. Box-sizing zou inderdaad ook gebruikt kunnen worden als deel van een oplossing. Je zou een border en een padding op de body kunnen zetten, samen met een min-height van 100% en een box-sizing: border-box. Dan dat verder aanvullen. Misschien kan NiteSpeed zijn voorbeeld alsnog uit de doeken doen

[ Voor 7% gewijzigd door geert1 op 25-02-2012 17:18 ]

zaterdag 25 februari 2012 18:14

Acties:

0 Henk 'm!

Copyman

Dode muis

NiteSpeed schreef op zaterdag 25 februari 2012 @ 14:35:
Code van Copyman aangepast om te laten zien wat er tegenwoordig mogelijk is met box-sizing: border-box

http://jsfiddle.net/Lk3NJ/

geert1 schreef op zaterdag 25 februari 2012 @ 17:10:
[...]

NiteSpeeds link lijkt inderdaad niet helemaal te doen wat hij bedoelt. Hij heeft het in elk geval over de enorm handige css-eigenschap box-sizing, die ondersteund wordt vanaf IE8 en in alle moderne browsers. Box-sizing zou inderdaad ook gebruikt kunnen worden als deel van een oplossing. Je zou een border en een padding op de body kunnen zetten, samen met een min-height van 100% en een box-sizing: border-box. Dan dat verder aanvullen. Misschien kan NiteSpeed zijn voorbeeld alsnog uit de doeken doen

Helaas werkt Firefox niet lekker mee als je min-height en box-sizing:border-box combineert.

Zeer belangrijke informatie: Inventaris

zaterdag 25 februari 2012 22:37

Acties:

0 Henk 'm!

Saturnus

Topicstarter

Ik heb net ingelezen over border-box enz, het maakt de boel wat netter, maar met deze code

code:

  position: absolute;
  width: 100%;
  height: 100%;
  margin: auto;
  background-color: black;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 8px solid red;

in de css blijft het probleem precies hetzelfde.

zaterdag 25 februari 2012 23:59

Acties:

0 Henk 'm!

Copyman

Dode muis

Wat border-box betreft heb je het volgende nodig:

Cascading Stylesheet:

html,
body {
    height: 100%;
}

body {
    margin: 0;
}

body > .inner {
    min-height: 100%;
    border: 10px solid #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Alleen is dat dus buggy in Firefox...

Al sinds 2005 overigens.

Zeer belangrijke informatie: Inventaris

zondag 26 februari 2012 00:59

Acties:

0 Henk 'm!

Saturnus

Topicstarter

Dat werkt bijna. Zonder content verschijnt er nu een verticale scrollbar, omdat de onderste border buiten het scherm wordt gerenderd ofzo.

En zodra in de 'inner' div nog een div komt om content positie te geven is het weer mis.
Dat snap ik niet want die content is toch relatief aan 'inner?' Hoe kan het er nou buiten schuiven?
Beter gezegd: Waarom wordt de 'inner' div in dat geval niet uitgerekt?

[ Voor 9% gewijzigd door Saturnus op 26-02-2012 01:05 ]

zondag 26 februari 2012 13:55

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Html
Css

box-sizing:border-box werkt in Firefox helaas niet met (min/max-)height..

[ Voor 8% gewijzigd door Bosmonster op 26-02-2012 13:55 ]

dinsdag 28 februari 2012 14:57

Acties:

0 Henk 'm!

Saturnus

Topicstarter

Ik heb gekozen voor het alternatieve design, wat betekent dat ik op dit moment geen border nodig heb. Echter...wanneer ik een div die in id="inner" staat een positie probeer te geven dan valt deze bij resizen buiten id="inner"...precies het oorspronkelijke probleem.

Nog even alles zodat het duidelijk is:
Code:

code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>css fail</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <style type="text/css">

body {
position:absolute;
height:100%;
width:100%;
margin:0;
background-color:grey;
}


#inner {
position:relative;
min-height:100%;
top:0;
margin:auto;
width:760px;
background-color:black;
}

        </style>
    </head>

    <body>
        <div id="inner">
            
            <div style="position: relative; left: 0px; top: 80px; right: 0px;">

            <font color="white">
            asdf1<br />
            asdf2<br />
            asdf3<br />
            asdf4<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf<br />
            asdf4<br />
            asdf3<br />
            asdf2<br />
            asdf1<br />
            </font>

            </div>
            
        </div>
    </body>
</html>

top: 0px; ..Fullscreen goed, resizen goed.
top: 80px; Fullscreen goed, resizen fout.

Screenshot van de fout:

Afbeeldingslocatie: http://i43.tinypic.com/1eqf6p.png

asdf nummering boven en onder heeft geen verband met deze fout, dat is er enkel om te zien of er geen tekst verdwijnt achter een object etc.

Wie weet hoe dit op te lossen? Of überhaupt uit te leggen waarom dit zo is?

dinsdag 28 februari 2012 17:01

Acties:

0 Henk 'm!

NiteSpeed

Ik zie dat mijn vorige link niet goed werkt en de oude code laat zien.
Hierbij opnieuw het voorbeeld wat border-box gebruikt in plaats van een .innerdiv.

http://jsfiddle.net/Qx7Qz/2/

dinsdag 28 februari 2012 19:57

Acties:

0 Henk 'm!

R4gnax

Valt me tegen dat deze thread al zo lang loopt en er nog niemand eerder position: fixed genoemd heeft als oplossing.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Viewport demo</title>
  </head>
  <body>
    <div class="viewport">
      <!-- CONTENT HERE -->
    </div>
  </body>
</html>

Cascading Stylesheet:

.viewport {
  position: fixed;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;

  overflow: auto;
}

IE6 ondersteunt weliswaar position:fixed niet, maar die kun je met z'n ca. 1% marktaandeel onderhand toch echt wel laten vallen. Mobile browsers ondersteunen het ook allemaal niet even goed, maar voor mobile moet je toch aan een ander site design denken dan een rijk kader; screen real-estate is daar erg duur.

dinsdag 28 februari 2012 23:35

Acties:

0 Henk 'm!

Saturnus

Topicstarter

@NiteSpeed en R4gnax
Thanks, werkt aardig en goed om van te leren, maar ik wil geen border die bij scrollen ook blijft zitten of een v-scrollbar op het midden van de pagina.

Ik denk dat ik de oplossing gevonden heb voor wat ik omschrijf in Saturnus in "Fullscreen omlijsting, die meeresized met window".

Mijn content wil ik een aantal pixels naar beneden zetten. Genomen bovenstaande code, en daar voor afgaande aan de 'asdf' reeks een stuk of 8x <br /> terwijl de top: px; ingesteld is op 0 is een workaround.

Maar toen bedacht ik dat ik padding als spacer kan gebruiken. In de omsluitende div van de content heb ik nu

code:

1	padding-top: 80px;

toegevoegd. De rest van de style code van die div is niet meer nodig.

Border-top daarvoor gebruiken had dus ook gekund...blijkbaar iets te ver out of the box gedacht.

[ Voor 9% gewijzigd door Saturnus op 28-02-2012 23:44 ]

Onderwerpen