[xHTML] Breedte van container meerekken met content 100% - Softwareontwikkeling

woensdag 15 april 2009 14:31

Acties:

0 Henk 'm!

Topicstarter

Hey,

Ik ben bezig met een website (http://www.voorruit-vervangen.nl) en daar heb ik het probleem dat als de browser kleiner is dan een x aantal px breed de div van bijv de content niet meerekt.

Omdat daar wat meer in zit dan alleen een paar divjes en omdat er ook position absolute in zit ben ik gaan testen met gewoon 2 divjes.

De code:

HTML:

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CSS TEST</title>
        <style type="text/css">
        <!--
            body {
                margin: 0;  
                color: #FFF;
                font-family: Verdana, Geneva, sans-serif;
            }
            .all {
                height: 100px;
                background-color:#F00;
            }
            .menu {
                width: 1100px;
                height: 30px;
                background-color: #00F;
            }
        -->
        </style>
    </head>
    <body>
        <div class="all">
            <div class="menu">
                Dit is een vaste breedte, bijvoorbeeld het menu!
            </div>
            Deze div moet meerekken in de breedte met het menu en altijd 100% zijn. Want deze verzorgd de achtergrond.
        </div>
    </body>
</html>

Dit is ook te bekijken op:

http://voorruit-vervangen.nl/test.html

Heeft iemand suggesties hoe ik het rode vlak mee kan laten rekken?

[ Voor 0% gewijzigd door BtM909 op 15-04-2009 14:35 ]

woensdag 15 april 2009 14:34

Acties:

0 Henk 'm!

disjfa

be

Cascading Stylesheet:

1	width:100%;

Wat gaat er precies mis dan? Zo te zien geef je gewoon een vaste breedte op. Dan rekt het niet he.

En absoluut gepositioneerde zaken zijn 99% van de keren zeker niet nodig. Dus daar zou ik wat anders voor verzinnen.

[ Voor 31% gewijzigd door disjfa op 15-04-2009 14:34 ]

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 15 april 2009 14:36

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Het rode vlak rekt toch mee (qua breedte dan)?

Je menu is fixed en als je je scherm kleiner maakt dan 1100px, dan krijg je een scrollbar ja

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 15 april 2009 14:56

Acties:

0 Henk 'm!

Scr33x0r

Topicstarter

BtM909 schreef op woensdag 15 april 2009 @ 14:36:
Het rode vlak rekt toch mee (qua breedte dan)?

Je menu is fixed en als je je scherm kleiner maakt dan 1100px, dan krijg je een scrollbar ja

Dat klopt, maar het rode vlak moet dan net zo breed zijn als het blauwe vlak, ik wil dus dat het blauwevlak de minimale breedte van het rode vlak bepaalt.

Zie:

Afbeeldingslocatie: http://voorruit-vervangen.nl/voorbeeld_breedte.jpg

Afbeeldingslocatie: http://voorruit-vervangen.nl/voorbeeld_breedte.jpg

Het rode vlak moet dus eigenlijk tot rechts komen.

[ Voor 13% gewijzigd door Scr33x0r op 15-04-2009 14:59 ]

woensdag 15 april 2009 15:13

Acties:

0 Henk 'm!

Ook al Bezet

Ik zie hier, Opera, het rode vlak helemaal tot rechts komen terwijl het blauwe vlak niet helemaal tot de rand komt (ca 80%).

woensdag 15 april 2009 15:13

Acties:

0 Henk 'm!

Maranello

Cascading Stylesheet:

body {
 margin: 0; 
 color: #FFF;
 font-family: Verdana, Geneva, sans-serif;
}
.all {
 height: 100px;
 width: 100%;
 background-color:#F00;
}
.menu {
 width: 100%;
 min-width: 500px;
 height: 30px;
 background-color: #00F;
}

Ik denk dat dit meer is wat je bedoeld? Die min-width draait het dan allemaal om

óf je moet menu en all "wrappen" dus een div eromheen en dan die een vaste grootte geven en alle onderliggende divs op 100% witdh

woensdag 15 april 2009 15:22

Acties:

0 Henk 'm!

Scr33x0r

Topicstarter

Volgens mij is het niet helemaal duidelijk wat ik wil:

Ik wil dat de blauwe altijd 1100px is.
Ik wil dat de rode altijd 100% is.

Ik wil dat als de resolutie kleiner is dan 1100px (dus bijv 1024x786) het blauwe vlak 1100px is en het rodevlak 100%, dus ook 1100px.

Wat ik zou kunnen doen is volgens mij een minimum breedte meegeven aan het rode vlak?

woensdag 15 april 2009 15:25

Acties:

0 Henk 'm!

TheTransporter

Wat je dus eigenlijk wil is dat het rode vlak altijd even lang is als het blauwe vlak?

Dan kan je toch ook gewoon het rode vlak een width van 1100px mee geven?

woensdag 15 april 2009 15:29

Acties:

0 Henk 'm!

disjfa

be

Maar je weet dat als je verder gaat zoeken je met een variabele breedte altijd problemen krijgt bij lage resoluties hé. Dan hou je altijd content wat inelkaar schuivt of onder elkaar floept aangezien dit zo werkt met liquid designs.

Dan moet je gewoon tegen je gebruiker zeggen dat ze hun browser wat groter moeten zetten, of je website wat logischer inelkaar zetten.

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 15 april 2009 15:30

Acties:

0 Henk 'm!

Scr33x0r

Topicstarter

TheTransporter schreef op woensdag 15 april 2009 @ 15:25:
Wat je dus eigenlijk wil is dat het rode vlak altijd even lang is als het blauwe vlak?

Dan kan je toch ook gewoon het rode vlak een width van 1100px mee geven?

Nee, want als het scherm groter is (bijv mijn 24 inch is 1920px breed), dan moet het rode over de hele breedte zijn, maar het blauwe maar 1100px.

Maar, min-width: 1100px is opzich de oplossing voor FF3 en IE7/8. Hoe het met IE6 zit weet ik niet, maar dat boeit me ook niet echt meer, wij stappen nml ook af van IE6 ondersteuning.

disjfa schreef op woensdag 15 april 2009 @ 15:29:
Maar je weet dat als je verder gaat zoeken je met een variabele breedte altijd problemen krijgt bij lage resoluties hé. Dan hou je altijd content wat inelkaar schuivt of onder elkaar floept aangezien dit zo werkt met liquid designs.

Dan moet je gewoon tegen je gebruiker zeggen dat ze hun browser wat groter moeten zetten, of je website wat logischer inelkaar zetten.

Wat hier gewoon altijd rottig aan is, is dat je een design van een bureau aangeleverd krijg en ik hem vervolgens in HTML om mag zetten, als ze dan een variabele breedte in gedachten hebben dan is dat best rottig.

Mijn eigen designs hebben ook altijd een vaste breedte, behalve dat het fijner coden is, vind ik het ook fijner lezen..

[ Voor 40% gewijzigd door Scr33x0r op 15-04-2009 15:32 ]

woensdag 15 april 2009 15:30

Acties:

0 Henk 'm!

Patriot

Fulltime #whatpulsert

TheTransporter schreef op woensdag 15 april 2009 @ 15:25:
Wat je dus eigenlijk wil is dat het rode vlak altijd even lang is als het blauwe vlak?

Dan kan je toch ook gewoon het rode vlak een width van 1100px mee geven?

Nee, want als het scherm van de gebruiker breder is dan 1100 pixels, dan moet het rode vlak meerekken.

Scr33x0r schreef op woensdag 15 april 2009 @ 15:30:
[...]

Nee, want als het scherm groter is (bijv mijn 24 inch is 1920px breed), dan moet het rode over de hele breedte zijn, maar het blauwe maar 1100px.

Maar, min-width: 1100px is opzich de oplossing voor FF3 en IE7/8. Hoe het met IE6 zit weet ik niet, maar dat boeit me ook niet echt meer, wij stappen nml ook af van IE6 ondersteuning.

Hier werkt het overigens al op die manier hoor. Ik heb het getest met IE8 en Fx 3.0.8 onder Vista 64-bit SP2.

EDIT: In een VM (MS Virtual PC) met XP SP3 en IE7 werkt het ook.
EDIT: In een VM met XP SP3 en IE6 werkt het óók al. Hoe heb jij het in hemelsnaam getest

[ Voor 49% gewijzigd door Patriot op 15-04-2009 15:35 ]

woensdag 15 april 2009 15:32

Acties:

0 Henk 'm!

TheTransporter

ah ok dan zou je inderdaad een min-width van 1100px mee moeten geven. Hoe dat met IE6 gaat dan zou ik je ook niet kunnen vertellen

woensdag 15 april 2009 15:40

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

een div is een block element en neemt daarom de volledige breedte van z'n parent (onder bepaalde voorwaarden) element in. Ga aub niet klooien met min-width

Hetgeen je als print screen toont. In welke versie van IE is dat?

[ Voor 8% gewijzigd door BtM909 op 15-04-2009 15:41 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 15 april 2009 16:08

Acties:

0 Henk 'm!

Scr33x0r

Topicstarter

BtM909 schreef op woensdag 15 april 2009 @ 15:40:
een div is een block element en neemt daarom de volledige breedte van z'n parent (onder bepaalde voorwaarden) element in. Ga aub niet klooien met min-width

Hetgeen je als print screen toont. In welke versie van IE is dat?

Dat is in ie8, maar ook in IE7 en FF3 heb ik het zelfde als ik geen min-width toepas.

woensdag 15 april 2009 16:12

Acties:

0 Henk 'm!

disjfa

be

Scr33x0r schreef op woensdag 15 april 2009 @ 15:30:
[...]
Wat hier gewoon altijd rottig aan is, is dat je een design van een bureau aangeleverd krijg en ik hem vervolgens in HTML om mag zetten, als ze dan een variabele breedte in gedachten hebben dan is dat best rottig.

Mijn eigen designs hebben ook altijd een vaste breedte, behalve dat het fijner coden is, vind ik het ook fijner lezen..

Maar dan kan je deze beperkingen toch voorleggen aan de designer. Als die er dan een probleem mee heeft dat ligt het punt bij hem en kanje hem de zaken laten regelen. Je kan moeilijk toveren voor die mensen. Html heeft beperkingen en die mogen er gewoon zijn. Die hoeven het probleem niet te zijn alleen.

[ Voor 3% gewijzigd door disjfa op 15-04-2009 16:12 ]

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 15 april 2009 18:23

Acties:

0 Henk 'm!

Gersomvg

disjfa schreef op woensdag 15 april 2009 @ 14:34:
En absoluut gepositioneerde zaken zijn 99% van de keren zeker niet nodig. Dus daar zou ik wat anders voor verzinnen.

Misschien niet altijd nodig maar in sommige onnodige gevallen wel makkelijker (en SEO-vriendelijker omdat je de volgorde van absolute elementen in de htmlcode volledig zelf kan verzinnen)

[ Voor 3% gewijzigd door Gersomvg op 15-04-2009 18:23 ]

donderdag 16 april 2009 13:44

Acties:

0 Henk 'm!

Gommers

Kun je dit niet fixen met js? Het werkt in IE7.. ik zit op school en heb hier geen andere browsers

HTML:

<!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> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>CSS TEST</title> 
        <style type="text/css"> 
            body { 
                margin: 0;     
                color: #FFF; 
                font-family: Verdana, Geneva, sans-serif; 
            } 
            #holder { 
                height: 60px; 
                background-color:#F00; 
            } 
            .menu { 
                width: 1100px; 
                height: 30px; 
                background-color: #00F; 
            } 
        </style>
    </head> 
    <body>
        <div id="holder">
            <div class="menu">Dit is een vaste breedte, bijvoorbeeld het menu!</div>
            Deze div moet meerekken in de breedte met het menu en altijd 100% zijn. Want deze verzorgd de achtergrond.
        </div>
        <script type="text/javascript">
        function check()
        {
            if(document.body.clientWidth < 1100)
            {
                document.getElementById('holder').style.width=1100;
            }
        }
        window.onresize = check;
        </script>
    </body> 
</html>

[ Voor 1% gewijzigd door Gommers op 16-04-2009 13:47 . Reden: Effetjes verbeteren ]