[CSS] Vraagje over height - Softwareontwikkeling

maandag 15 oktober 2007 11:22

Acties:

Verwijderd

Topicstarter

Hoi,

Ik heb een vraagje .. Hoe kan ik in CSS zeggen dat hij moet de rest van de scherm breedte moet nemen in't midden... Ik kon dit verwezelijken met tables zie -> klik voor voorbeeld, als daar het scherm groter wordt dan min. value, dan vergroot het midden automatisch ...

Ik heb het volgende in mekaar gestoken -> Klik hier

U kunt duidelijk verschil zien tsn de twee pagina's .. De tweede neemt screen-width en houdt geen rek. met de menubalk enzo ...

Je kan naar de source zien voor de code ik gebruik .. Ik wil overschakelen naar CSS omdat die tabellen echt onoverzichtelijk zijn

code:

            .topScreen
            {
                height:21px;
                background-color:#CCFF33;
                width:100%;
                float:left;
                margin:0 0 0 0;
            }

            .title
            {
                height:63px;
                background-color:#ffffff;
                width:100%;
                float:left;
                border-top:1px solid green;
                border-bottom:1px solid green;
                margin:0 0 0 0;
            }

            .content
            {
                height:100%;
                background-color:#CCFF33;
                width:100%;
                float:left;
                margin:0 0 0 0;
            }

            .footer
            {
                height:63px;
                background-color:#ffffff;
                width:100%;
                float:left;
                border-top:1px solid green;
                border-bottom:1px solid green;
                margin:0 0 0 0;
            }

            .bottomScreen
            {
                height:21px;
                background-color:#CCFF33;
                width:100%;
                float:left;
            }
            body, html
            {
                margin:0px;
                padding:0px;
            }

De content moet dus rest van screen hebben.. Met de tabellen was dat easy

mvg,
Frederic

[ Voor 4% gewijzigd door Verwijderd op 15-10-2007 11:59 ]

maandag 15 oktober 2007 12:13

Acties:

Janoz

Moderator Devschuur®

!litemod

Wanneer je de content een margin te geven en dan de header en footer absoluut te positioneren.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

maandag 15 oktober 2007 12:17

Acties:

SanderTje!

Ja inderdaad, wat Janoz zegt. Even ter verduidelijking: je zorgt ervoor dat je bovenin de pagina een DIV tovert die absoluut is gepositioneerd. Daaronder tover je een of meerdere DIV's die je content vasthouden en een eventueel menu. Vervolgens positioneer je onderaan de laatste DIV, die een aansluiting heeft met de laagste kant van de browser. Dan 'push' je met de content de onderste DIV automatisch naar beneden zodra dat nodig is.

[ Voor 3% gewijzigd door SanderTje! op 15-10-2007 12:17 ]

i7 10700, 32GB RAM, RTX 3080

maandag 15 oktober 2007 12:48

Acties:

Verwijderd

Topicstarter

SanderTje! schreef op maandag 15 oktober 2007 @ 12:17:
Ja inderdaad, wat Janoz zegt. Even ter verduidelijking: je zorgt ervoor dat je bovenin de pagina een DIV tovert die absoluut is gepositioneerd. Daaronder tover je een of meerdere DIV's die je content vasthouden en een eventueel menu. Vervolgens positioneer je onderaan de laatste DIV, die een aansluiting heeft met de laagste kant van de browser. Dan 'push' je met de content de onderste DIV automatisch naar beneden zodra dat nodig is.

Ik begrijp niet echt wat je bedoelt .. Ik krijg de effectief resoluties van heel het browser-scherm (incl. Menu-balk, statusbalk, etc...). Je moet es zien naar links ik gaf .. Maar ik snap ni via jullie uitleg hoe ik hetzelfde in CSS kan bekomen als ik had via tabellen.

Bestaan er daar geen voorbeelden van ? Het midden (.content class) moet telkens naar gelang grote die vrij is in pagina aangepast worden, zodat vanboven en vanonderen het altijd goed gepositioneerd is en midden zich aanpast (tot bepaalde grens -> min-height ofzo)..

Kijk es naar mijn voorbeelden

ik ben effe de weg kwijt met jullie uitleg..

mvg
frederic

Mijn code :

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
        <style type="text/css">
            .title
            {
                height:63px;
                background-color:#ffffff;
                width:100%;
                float:left;
                border-top:1px solid green;
                border-bottom:1px solid green;
                margin-top:21px;
            }

            .content
            {
                height:100%;
                background-color:#CCFF33;
                width:100%;
                float:left;
            }

            .footer
            {
                height:63px;
                background-color:#ffffff;
                width:100%;
                float:left;
                border-top:1px solid green;
                border-bottom:1px solid green;
                margin-bottom:21px;
            }


            body {
                margin:0px;
                padding:0px;
                height: 100%;
                background-color:#CCFF33;
            }


        </style>
    </head>
    <body>
            <div class="title">&nbsp;</div>
            <div class="content">&nbsp;</div>
            <div class="footer">&nbsp;</div>
    </body>
</html>

[ Voor 30% gewijzigd door Verwijderd op 15-10-2007 12:54 ]

maandag 15 oktober 2007 13:28

Acties:

Verwijderd

Topicstarter

Hoi,

Alsook moet in die witte stroken de tekst of het menuutje (vanboven en vanonderen, naast het logo) gecentreerd worden (het deel waar het logo staat heeft een vaste waarde, alles wat rechts komt moet rest van de strook nemen en daarin gecentreerd worden) ...

Dus ongeveer hetzelfde probleem als in't midden (waar hij ook rest van pagina moet nemen)..

---> Klik hier voor wat ik momenteel heb<---

ben redelijk nieuw in CSS dus weetk ni altijd wat ik moet doen (als je de bron neemt zieje alle code ik doe).. Man man .. al die problemen

mvg,
frederic

maandag 15 oktober 2007 13:49

Acties:

Cartman!

freeetje, ik mis een beetje de informatie met wat je allemaal geprobeerd hebt en ik wil graag even kwijt dat je een post kunt editten en dat je niet 'Hoi' en de groeten hoeft te doen onder je post. Lees nog even de FAQ door van GoT als niet alles duidelijk is.

maandag 15 oktober 2007 14:13

Acties:

Verwijderd

Topicstarter

Cartman! schreef op maandag 15 oktober 2007 @ 13:49:
freeetje, ik mis een beetje de informatie met wat je allemaal geprobeerd hebt en ik wil graag even kwijt dat je een post kunt editten en dat je niet 'Hoi' en de groeten hoeft te doen onder je post. Lees nog even de FAQ door van GoT als niet alles duidelijk is.

Dus een paar jaar terug heb ik het volgende in mekaar gestoken met tabellen -> Klik Om te zien -> Als je de broncode bekijkt, zie je dat het een hele warboel is en niet goed leesbaar is.

Dus tracht ik nu de tabellen-code om te zetten naar "CSS"-code (div's & span's, etc...), wat het geheel leesbaarder maakt en de code ook gemakkelijker aan te passen is.

Maar het lukt me niet om dezelfde lay-out te krijgen als mijn oude versie met tabellen. Zoals je ziet in mijn nieuwe try-out -> Klik hier om try-out te zien, wordt het midden niet automatisch aangepast naar de grootte van het scherm (excl. Statusbalk, menu, ...). Alsook wordt de witte balken niet goed opgemaakt, links moet het log komen en rechts moet er tekst komen die moet gecentreerd worden met de overige width van het browser scherm. (dit zowel in de balk boven als beneden).

Ik heb hieronder vlug geschetst wat ik ongeveer wil bereiken, hopelijk dat het nu wat duidelijker is ... Sorry als ik bepaalde dingen verkeerd post of typ, maar ik vraag normaal gezien niet snel hulp, maar mss weten jullie wel raad met dit probleem..

Afbeeldingslocatie: http://www.bowlingstones.be/watikwil.JPG

Afbeeldingslocatie: http://www.bowlingstones.be/watikwil.JPG

Pagina: 1

Reageer