[CSS] Onoplosbaar CSS-probleem?

vrijdag 22 januari 2010 17:46

Acties:

0 Henk 'm!

Topicstarter

Ik moet een pagina maken waarvan ik me afvraag of de eisen (in CSS) niet in tegenspraak met elkaar zijn:

1) Een wrapper die gecentreerd is en geen vaste hoogte en breedte heeft;
2) Daarin een linker- en rechterpanel;
3) Beiden geen vaste hoogte;
4) Rechterpanel geen vaste breedte (linker wel).

Oftewel: De inhoud van het rechterpanel bepaalt ook de totale breedte van de wrapper. En als de inhoud (incl linkerpanel) niet breder is dan het beeldscherm moet de wrapper gecentreerd staan.

Is dat mogelijk? (En zo ja natuurlijk, hoe:)?!)

Of kan ik beredeneren dat het niet mogelijk is?!

Ik heb met float:left; en overflow:visible en alles lopen klooien, maar er gaat elke keer wel weer één van de vier eisen de mist in. Vraag me dus af of het uberhaupt wel kan!

vrijdag 22 januari 2010 18:00

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Javascript
Css

Dit lijkt me zonder javascript inderdaad redelijk onmogelijk om te maken xbrowser.

vrijdag 22 januari 2010 18:18

Acties:

0 Henk 'm!

Lye

Volgens mij wel te doen, alleen weet ik niet of IE6 ook mee werkt.

Misschien moet je hier even kijken:
http://www.dynamicdrive.c...id-layout-21-fixed-fluid/

Hoef je alleen een fluid width wrapper omheen te gooien en klaar.

vrijdag 22 januari 2010 19:36

Acties:

0 Henk 'm!

Verwijderd

Zijn de twee panelen het enige erin? Dan kan het natuurlijk niet, als de ene een vaste breedte heeft heeft de andere dat automatisch ook.

vrijdag 22 januari 2010 19:58

Acties:

0 Henk 'm!

JefSnare

Het is misschien wel te doen op de volgende manier (correct me if I'm wrong)

Allereerst de wrapper width is dus een waarde, dat is de breedte van het rechterpaneel in de wrapper.
Dan moet het linkerpaneel een fixed width waarde hebben en dit moet allemaal gecentreerd worden.

Wrapper
Linkerpaneel(200px)	Rechterpaneel([x]px)

Dan kun je met javascript de breedte van het rechterpaneel verkrijgen en deze toepassen op de wrapper met de som toepassen: (linkerpaneel.width + rechterpaneel.width) = total.width.

Het kan volgens mij niet alleen CSS only zijn of je moet in je CSS vars gaan definen etc...

Twitter Flickr

zaterdag 23 januari 2010 12:58

Acties:

0 Henk 'm!

Herko_ter_Horst

Als bij "3) Beiden geen vast hoogte", wel acceptabel is dat beiden dezelfde hoogte zijn, heb ik de volgende oplossing (werkt in FF3.x en IE8, verder niet getest):

HTML:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>CSS solution</title>

    <link title="Basic" rel="stylesheet" type="text/css" href="all.css" media="all" />
</head>

<body>
    <div class="wrapper">
        <div class="left">
            <p>Hello World!</p>
        </div>
        <div class="right">
            <p>CSS solution for GoT.</p>
            <p>Isn't this nice?</p>
        </div>
    </div>
</body>

</html>

Cascading Stylesheet:

html, body {
    margin: 0;
}

.wrapper {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.left {
    display: table-cell;
    width: 200px;

    background-color: #999;
}

.right {
    display: table-cell;
    background-color: #CCC;
}

"Any sufficiently advanced technology is indistinguishable from magic."

zaterdag 23 januari 2010 17:54

Acties:

0 Henk 'm!

Lye

Herko_ter_Horst schreef op zaterdag 23 januari 2010 @ 12:58:
Als bij "3) Beiden geen vast hoogte", wel acceptabel is dat beiden dezelfde hoogte zijn, heb ik de volgende oplossing (werkt in FF3.x en IE8, verder niet getest):

(Bult code)

Dan kun je net zo goed direct tables gebruiken, met andere woorden niet gebruiken voor layout.

[ Voor 53% gewijzigd door Lye op 23-01-2010 17:55 ]

zaterdag 23 januari 2010 19:10

Acties:

0 Henk 'm!

Herko_ter_Horst

Lye schreef op zaterdag 23 januari 2010 @ 17:54:
[...]

Dan kun je net zo goed direct tables gebruiken, met andere woorden niet gebruiken voor layout.

Hoezo niet gebruiken voor layout?

Het is geen tabulaire data, dus een table is niet het juiste (semantische) HTML element. De gewenste layout komt m.i. echter overeen met de CSS table/table-cell rendering. Dus ik zie niet in waarom je dit niet zou gebruiken.

"Any sufficiently advanced technology is indistinguishable from magic."

zaterdag 23 januari 2010 22:48

Acties:

0 Henk 'm!

beesting

Hierbij nog een alternatieve oplossing.

Werkt overigens niet per se beter, maar wel anders, dus afhankelijk van de situatie meer of minder geschikt. Overigens ook alleen even vlug in Fx3.6 en IE8 getest:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Center auto-width wrapper with static-width side panel</title>
        <style type="text/css">
            body{text-align:center}
            #wrapper{text-align:center;overflow:hidden;background-color:#ddf;display:inline-block}
            #left{float:left;width:90px;background-color:#dfd}
            #right{margin-left:100px;background-color:#fdd}
        </style>
    </head>
    <body>
        <div id="wrapper">
            <p id="left">left</p>
            <p id="right">right met iets meer tekst</p>
        </div>
    </body>
</html>

maandag 25 januari 2010 10:28

Acties:

0 Henk 'm!

Jiggle

Topicstarter

Damn, beide oplossingen van Herko en beesting komen heel erg in de buurt!
Erg cool, want ik had zowel de tabel-opmaak als de text-align:center oplossing nog niet geprobeerd. Maar helaas, beiden werken in IE7 al niet...

Waardoor zou dat veroorzaakt kunnen worden?! Zou daar nog een fix voor kunnen zijn?!
Het is wel exact wat ik bedoel namelijk, zou mooi zijn als het echt zou kunnen!
De oplossing met Javascript van JefSnare is wat ik er nu al in had hangen, maar het doel was juist CSS-only!

Thanks, jullie helpen me echt!

maandag 25 januari 2010 11:10

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Misschien dat je met een IE7 specific stylesheet iets kan bereiken om het te fixen. Verder kan ik me zo ook niet iets bedenken.

Anyone who gets in between me and my morning coffee should be insecure.

maandag 25 januari 2010 11:16

Acties:

0 Henk 'm!

MBV

inderdaad een IE7-specific stylesheet. En als je dat op de nette manier niet lukt: http://msdn.microsoft.com.../ms537634%28VS.85%29.aspx

maandag 25 januari 2010 15:54

Acties:

0 Henk 'm!

Jiggle

Topicstarter

Mja een "uitzonderings"-stylesheet is iets wat ik liever niet wil natuurlijk. Ik hoop eigenlijk op nog een briljante toevoeging van Herko of beestings op hun beider oplossingen. Ik kom er zelf niet uit, maar ik was ook al niet eens op het idee gekomen...

maandag 25 januari 2010 16:08

Acties:

0 Henk 'm!

harrald

Lye schreef op zaterdag 23 januari 2010 @ 17:54:
[...]

Dan kun je net zo goed direct tables gebruiken, met andere woorden niet gebruiken voor layout.

Wat een onzin.
Als je dit probleem wilt oplossen met pure css dan kan ik ook alleen maar display:table bedenken.

En dit is semantisch helemaal niet fout. Worden er elementen misbruikt voor dingen waar ze niet voor bedoeld zijn?

Niet meteen beginnen te roepen als je het woord css en table in 1 zin ziet

Ik denk niet dat je dit en css only kan doen en in IE werkend kan krijgen. Wat je kan doen is in je css een vaste breedte opgeven die voor de meeste gevallen voldoet. En dan met javascript de boel variabel maken.

[ Voor 16% gewijzigd door harrald op 25-01-2010 16:10 ]

maandag 25 januari 2010 16:30

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Jiggle schreef op maandag 25 januari 2010 @ 15:54:
Mja een "uitzonderings"-stylesheet is iets wat ik liever niet wil natuurlijk. Ik hoop eigenlijk op nog een briljante toevoeging van Herko of beestings op hun beider oplossingen. Ik kom er zelf niet uit, maar ik was ook al niet eens op het idee gekomen...

Hoezo "wil je dat liever niet"? Het is vrij normaal om voor IE een tweede stylesheet te hebben waarin je allerlei kleine correcties kan toepassen, voornamelijk omdat IE zoveel eigenaardigheden heeft.

Verder eens met:

harrald schreef op maandag 25 januari 2010 @ 16:08:
Ik denk niet dat je dit en css only kan doen en in IE werkend kan krijgen. Wat je kan doen is in je css een vaste breedte opgeven die voor de meeste gevallen voldoet. En dan met javascript de boel variabel maken.

[ Voor 23% gewijzigd door MueR op 25-01-2010 16:30 ]

Anyone who gets in between me and my morning coffee should be insecure.

maandag 25 januari 2010 16:31

Acties:

0 Henk 'm!

TJHeuvel

Herko_ter_Horst schreef op zaterdag 23 januari 2010 @ 12:58:
Als bij "3) Beiden geen vast hoogte", wel acceptabel is dat beiden dezelfde hoogte zijn, heb ik de volgende oplossing (werkt in FF3.x en IE8, verder niet getest):

HTML:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>CSS solution</title>

    <link title="Basic" rel="stylesheet" type="text/css" href="all.css" media="all" />
</head>

<body>
    <div class="wrapper">
        <div class="left">
            <p>Hello World!</p>
        </div>
        <div class="right">
            <p>CSS solution for GoT.</p>
            <p>Isn't this nice?</p>
        </div>
    </div>
</body>

</html>

Cascading Stylesheet:

html, body {
    margin: 0;
}

.wrapper {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.left {
    display: table-cell;
    width: 200px;

    background-color: #999;
}

.right {
    display: table-cell;
    background-color: #CCC;
}

Als ik het vragen mag, waarom gebruik je niet gewoon tables, in plaats van je divs als tables renderen?

Freelance Unity3D developer

maandag 25 januari 2010 16:37

Acties:

0 Henk 'm!

Herko_ter_Horst

offtopic:
Moest je voor die vraag al die code quoten?

Zoals ik al eerder zei, is dit omdat tables hier geen semantisch doel hebben: er wordt geen tabulaire data gerendered. De layout komt daar echter wel mee overeen.

@TS ik zal vanavond nog even kijken of ik nog een list kan verzinnen.

[ Voor 22% gewijzigd door Herko_ter_Horst op 25-01-2010 16:40 ]

"Any sufficiently advanced technology is indistinguishable from magic."

maandag 25 januari 2010 17:07

Acties:

0 Henk 'm!

MBV

Jiggle schreef op maandag 25 januari 2010 @ 15:54:
Mja een "uitzonderings"-stylesheet is iets wat ik liever niet wil natuurlijk. Ik hoop eigenlijk op nog een briljante toevoeging van Herko of beestings op hun beider oplossingen. Ik kom er zelf niet uit, maar ik was ook al niet eens op het idee gekomen...

Ik wil heel graag een uitzonderings-stylesheet, desnoods een voor IE6/7 en een speciaal voor IE6 voor de laatste quirks. Dan heb ik een nette stylesheet voor normale browsers, en de hacks apart. Dan is ook direct duidelijk waarom bepaalde rare dingen in de css staan.
En als ik nou mag kiezen qua duidelijkheid:

Cascading Stylesheet:

#wrapper {
  margin: 0 auto;
  padding: 79px 0 0;
  width: 760px;
  border: 1px solid #888;
  text-align: left;
  background: #fffaee url(images/flyoutbanner.gif) no-repeat;
  }

/* Box model hack \*/
* html #wrapper {
  width: 762px;
  w\idth: 760px;
  }
/* */

Of:

HTML:

1
2
3

  <link rel="stylesheet" type="text/css" src="layout.css">
  <!--[if IE 6]><link rel="stylesheet" type= "text/css" href="ie6.css" /><![endif]-->
  <!--[if IE 7]><link rel="stylesheet" type= "text/css" href="ie7.css" /><![endif]-->

Cascading Stylesheet:

/*layout.css*/
#wrapper {
  margin: 0 auto;
  padding: 79px 0 0;
  width: 760px;
  border: 1px solid #888;
  text-align: left;
  background: #fffaee url(images/flyoutbanner.gif) no-repeat;
  }

Cascading Stylesheet:

/*ie6.css*/
#wrapper{
  width: 762px;
}

Welke vind jij duidelijker?

dinsdag 26 januari 2010 10:26

Acties:

0 Henk 'm!

Jiggle

Topicstarter

Je hebt helemaal gelijk. Ik bedoel alleen dat ik liever een universele oplossing hebt, maar misschien is dat wel een utopie. Als het met een hack lukt is dat helemaal prima.

Met de kennis die ik nu heb zou ik een van beide oplossingen gebruiken zodat het in IE8 en FF werkt, en voor IE7 en IE6 de JavaScript-oplossing gebruiken die ik nu heb. Dus een CSS-hack is sowieso beter

.

@Herko: toevallig toch nog gelukt

?!

Overigens, mijn dank is echt groot aan jullie allen, alleen maar behulpzame reacties gehad!

dinsdag 26 januari 2010 17:26

Acties:

0 Henk 'm!

Herko_ter_Horst

Heb niet veel tijd meer gehad en heb ook niets kunnen bedenken, helaas.

"Any sufficiently advanced technology is indistinguishable from magic."

woensdag 27 januari 2010 01:17

Acties:

0 Henk 'm!

R4gnax

Javascript

Jiggle's requirements zijn toch helemaal niet zo moeilijk te vervullen als je inline-block (en de 'hasLayout' fallback in IE6 / IE7) goed gebruikt?

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <style type="text/css">
        body
        {
            text-align: center;
        }

        #wrapper, #links, #rechts
        {
            white-space: normal;
            vertical-align: top;
            display: inline-block;
            text-align: left;

            /* Inline-block in IE6 en IE7 */
            _display: inline;
            zoom: 1;
        }

        #wrapper
        {
            white-space: nowrap;

            /* Voor demo */
            border: 1px solid blue;
        }

        #links
        {
            /* Gekozen breedte */
            width: 200px;

            /* Voor demo */
            border: 1px solid red;
        }

        #rechts
        {
            /* Voor demo */
            border: 1px solid green;
        }

    </style>
    <body>
        <div id="wrapper">
            <div>Wrapper</div>
            <div id="links">
                <span>200px breed, flexibele hoogte</span>
                <ul><li>LINKS</li><li>LINKS</li></ul>
            </div><div id="rechts">
                <span>Flexibele breedte en hoogte</span>
                <ul><li>RECHTS</li></ul>
            </div>
        </div>
    </body>
</html>

woensdag 27 januari 2010 11:56

Acties:

0 Henk 'm!

Jiggle

Topicstarter

Thanks!

... maar helaas....

Werkt niet in IE7. De CSS gaat mijn petje een beetje te boven, is uitleg over wat de oplossing zou moeten zijn misschien mogelijk?!

donderdag 28 januari 2010 10:06

Acties:

0 Henk 'm!

Verwijderd

http://rudolfbos.nl/projecten/fluid/

Doet dit het truucje niet voor je? Nu heb je weliswaar geen div in de tweede kolom maar hier kan je wel alle elementen in plaatsen die je maar wilt omdat de linkerkolom vast staat in breedte en er niks onder kan. Deze oplossing is volledig cross-browser, werkt zelfs nog in IE5.5.

HTML:

<div id="container">

    <div id="side">
        <h2>Side</h2>
        <p>Nulla facilisi. Suspendisse cursus auctor purus sit amet suscipit. Nulla convallis cursus adipiscing. Mauris odio arcu, rhoncus non porttitor non, aliquam ut elit. Integer pretium bibendum lacinia. Mauris id odio vel augue pretium auctor. Nulla tristique dignissim mauris, sit amet aliquam augue varius eu. Sed sed sollicitudin lacus. Curabitur rhoncus neque sed orci dictum ac luctus orci dignissim. Cras sed eleifend diam. Integer scelerisque, erat vel tempor aliquet, nunc urna suscipit justo, ac pharetra lorem mi quis augue. Suspendisse quam orci, lacinia in sollicitudin non, hendrerit sed velit. In pellentesque ipsum quis felis placerat scelerisque. Suspendisse aliquet volutpat urna sed rhoncus. In hac habitasse platea dictumst. Pellentesque ac leo augue, eu ornare enim. Duis vehicula viverra orci.</p>
    </div>

    <h1>Main</h1>
    <p>Phasellus et luctus diam. Sed vel cursus eros. Phasellus ut ante metus, non mollis sem. Integer tristique tellus ac nisi pellentesque in laoreet lectus sagittis. Aenean pellentesque ullamcorper molestie. Nullam facilisis bibendum ultrices. In a metus enim. Phasellus ornare, augue sed porttitor fringilla, metus mauris ultrices sem, at iaculis metus orci in lacus. Vestibulum convallis tempus condimentum. Fusce dictum est et neque bibendum dignissim id vitae leo. Donec ac ligula est. Suspendisse potenti. Nunc tempor, urna a ullamcorper egestas, felis diam elementum felis, vitae consequat ligula quam eleifend orci. Nullam rhoncus suscipit arcu in placerat. Vivamus venenatis euismod diam quis ultrices. Donec auctor neque in eros placerat varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at leo arcu.</p>

</div>

Cascading Stylesheet:

body, html { height: 100%; }
body { margin: 0; font: 12px Arial, Helvetica, sans-serif; line-height: 20px; background: #ddd; }
#container { width: 100%; height: 100%; overflow: hidden; }
#side { width: 300px; min-height: 100%; height: auto !important; height: 100%; padding: 20px; margin: 0 20px 0 0; background: #bbb; float: left; }

EDIT: Ik zie dat de code niet werkt als de content hoger is dan de verticale resolutie van het beeldscherm. Er komt dan geen scrollbalk. Misschien dat iemand hier een word-around voor weet?

[ Voor 4% gewijzigd door Verwijderd op 28-01-2010 10:25 ]

donderdag 28 januari 2010 10:53

Acties:

0 Henk 'm!

MBV

in #container de overflow op auto zetten?
De oplossing van R4genax werkt door 2 dingen: doordat white-space op nowrap staat, en doordat </div> en <div id="rechts"> tegen elkaar aan staan

[/gok]

donderdag 28 januari 2010 11:16

Acties:

0 Henk 'm!

Jiggle

Topicstarter

[b][message=33364289,noline]
De oplossing van R4genax werkt door 2 dingen: doordat white-space op nowrap staat, en doordat </div> en <div id="rechts"> tegen elkaar aan staan [/gok]

Dat lost alleen op dat er geen witruimte tussen linker- en rechterpanel ontstaat toch? Dat is eigenlijk weer een ander probleem.

Het gaat er mij vooral om dat ik een object moet centreren met een variabele breedte. Oplossingsrichting is hetzelfde als die van beesting. Geef de body "Text-align: center" mee, en geef vervolgens de wrapper "display:inline-block" mee. Doodeenvoudig en logisch eigenlijk:)!!! Begrijp ik toch goed he?!
Nu nog een hack voor IE7 en IE6 en ik ben een gelukkig mens!

donderdag 28 januari 2010 11:38

Acties:

0 Henk 'm!

Verwijderd

Volgens mij heb ik de oplossing:

http://rudolfbos.nl/projecten/fluid/

Heb het getest vanaf IE6 en werkt goed.

HTML:

<div id="container">

    <div id="side">
        <h2>Side</h2>
        <p>Nulla facilisi. Suspendisse cursus auctor purus sit amet suscipit. Nulla convallis cursus adipiscing. Mauris odio arcu, rhoncus non porttitor non, aliquam ut elit. Integer pretium bibendum lacinia. Mauris id odio vel augue pretium auctor. Nulla tristique dignissim mauris, sit amet aliquam augue varius eu. Sed sed sollicitudin lacus. Curabitur rhoncus neque sed orci dictum ac luctus orci dignissim. Cras sed eleifend diam. Integer scelerisque, erat vel tempor aliquet, nunc urna suscipit justo, ac pharetra lorem mi quis augue. Suspendisse quam orci, lacinia in sollicitudin non, hendrerit sed velit. In pellentesque ipsum quis felis placerat scelerisque. Suspendisse aliquet volutpat urna sed rhoncus. In hac habitasse platea dictumst. Pellentesque ac leo augue, eu ornare enim. Duis vehicula viverra orci.</p>
    </div>

    <div id="main">

        <h1>Fluid layout with one fixed column</h1>
        <p>Phasellus et luctus diam. Sed vel cursus eros. Phasellus ut ante metus, non mollis sem. Integer tristique tellus ac nisi pellentesque in laoreet lectus sagittis. Aenean pellentesque ullamcorper molestie. Nullam facilisis bibendum ultrices. In a metus enim. Phasellus ornare, augue sed porttitor fringilla, metus mauris ultrices sem, at iaculis metus orci in lacus. Vestibulum convallis tempus condimentum. Fusce dictum est et neque bibendum dignissim id vitae leo. Donec ac ligula est. Suspendisse potenti. Nunc tempor, urna a ullamcorper egestas, felis diam elementum felis, vitae consequat ligula quam eleifend orci. Nullam rhoncus suscipit arcu in placerat. Vivamus venenatis euismod diam quis ultrices. Donec auctor neque in eros placerat varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at leo arcu.</p>
        
        <div id="inset">
            <h3>Inset</h3>
            <p>Phasellus et luctus diam. Sed vel cursus eros. Phasellus ut ante metus, non mollis sem. Integer tristique tellus ac nisi pellentesque in laoreet lectus sagittis. Aenean pellentesque ullamcorper molestie. Nullam facilisis bibendum ultrices. In a metus enim. Phasellus ornare, augue sed porttitor fringilla, metus mauris ultrices sem, at iaculis metus orci in lacus. Vestibulum convallis tempus condimentum. Fusce dictum est et neque bibendum dignissim id vitae leo. Donec ac ligula est. Suspendisse potenti. Nunc tempor, urna a ullamcorper egestas, felis diam elementum felis, vitae consequat ligula quam eleifend orci. Nullam rhoncus suscipit arcu in placerat. Vivamus venenatis euismod diam quis ultrices. Donec auctor neque in eros placerat varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at leo arcu.</p>
        </div>
        
        <h2>Heading</h2>
        <p>Phasellus et luctus diam. Sed vel cursus eros. Phasellus ut ante metus, non mollis sem. Integer tristique tellus ac nisi pellentesque in laoreet lectus sagittis. Aenean pellentesque ullamcorper molestie. Nullam facilisis bibendum ultrices. In a metus enim. Phasellus ornare, augue sed porttitor fringilla, metus mauris ultrices sem, at iaculis metus orci in lacus. Vestibulum convallis tempus condimentum. Fusce dictum est et neque bibendum dignissim id vitae leo. Donec ac ligula est. Suspendisse potenti. Nunc tempor, urna a ullamcorper egestas, felis diam elementum felis, vitae consequat ligula quam eleifend orci. Nullam rhoncus suscipit arcu in placerat. Vivamus venenatis euismod diam quis ultrices. Donec auctor neque in eros placerat varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at leo arcu.</p>
        
        <h2>Heading</h2>
        <p>Phasellus et luctus diam. Sed vel cursus eros. Phasellus ut ante metus, non mollis sem. Integer tristique tellus ac nisi pellentesque in laoreet lectus sagittis. Aenean pellentesque ullamcorper molestie. Nullam facilisis bibendum ultrices. In a metus enim. Phasellus ornare, augue sed porttitor fringilla, metus mauris ultrices sem, at iaculis metus orci in lacus. Vestibulum convallis tempus condimentum. Fusce dictum est et neque bibendum dignissim id vitae leo. Donec ac ligula est. Suspendisse potenti. Nunc tempor, urna a ullamcorper egestas, felis diam elementum felis, vitae consequat ligula quam eleifend orci. Nullam rhoncus suscipit arcu in placerat. Vivamus venenatis euismod diam quis ultrices. Donec auctor neque in eros placerat varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at leo arcu.</p>
        
        <div id="inset-float">
            <h3>Inset</h3>
            <p>Phasellus et luctus diam. Sed vel cursus eros. Phasellus ut ante metus, non mollis sem. Integer tristique tellus ac nisi pellentesque in laoreet lectus sagittis. Aenean pellentesque ullamcorper molestie. Nullam facilisis bibendum ultrices. In a metus enim. Phasellus ornare, augue sed porttitor fringilla, metus mauris ultrices sem, at iaculis metus orci in lacus. Vestibulum convallis tempus condimentum. Fusce dictum est et neque bibendum dignissim id vitae leo. Donec ac ligula est. Suspendisse potenti. Nunc tempor, urna a ullamcorper egestas.</p>
        </div>
        
        <h2>Heading</h2>
        <p>Phasellus et luctus diam. Sed vel cursus eros. Phasellus ut ante metus, non mollis sem. Integer tristique tellus ac nisi pellentesque in laoreet lectus sagittis. Aenean pellentesque ullamcorper molestie. Nullam facilisis bibendum ultrices. In a metus enim. Phasellus ornare, augue sed porttitor fringilla, metus mauris ultrices sem, at iaculis metus orci in lacus. Vestibulum convallis tempus condimentum. Fusce dictum est et neque bibendum dignissim id vitae leo. Donec ac ligula est. Suspendisse potenti. Nunc tempor, urna a ullamcorper egestas, felis diam elementum felis, vitae consequat ligula quam eleifend orci. Nullam rhoncus suscipit arcu in placerat. Vivamus venenatis euismod diam quis ultrices. Donec auctor neque in eros placerat varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at leo arcu.</p>
        
        <h2>Heading</h2>
        <p>Phasellus et luctus diam. Sed vel cursus eros. Phasellus ut ante metus, non mollis sem. Integer tristique tellus ac nisi pellentesque in laoreet lectus sagittis. Aenean pellentesque ullamcorper molestie. Nullam facilisis bibendum ultrices. In a metus enim. Phasellus ornare, augue sed porttitor fringilla, metus mauris ultrices sem, at iaculis metus orci in lacus. Vestibulum convallis tempus condimentum. Fusce dictum est et neque bibendum dignissim id vitae leo. Donec ac ligula est. Suspendisse potenti. Nunc tempor, urna a ullamcorper egestas, felis diam elementum felis, vitae consequat ligula quam eleifend orci. Nullam rhoncus suscipit arcu in placerat. Vivamus venenatis euismod diam quis ultrices. Donec auctor neque in eros placerat varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at leo arcu.</p>
        
        <h2>Heading</h2>
        <p>Phasellus et luctus diam. Sed vel cursus eros. Phasellus ut ante metus, non mollis sem. Integer tristique tellus ac nisi pellentesque in laoreet lectus sagittis. Aenean pellentesque ullamcorper molestie. Nullam facilisis bibendum ultrices. In a metus enim. Phasellus ornare, augue sed porttitor fringilla, metus mauris ultrices sem, at iaculis metus orci in lacus. Vestibulum convallis tempus condimentum. Fusce dictum est et neque bibendum dignissim id vitae leo. Donec ac ligula est. Suspendisse potenti. Nunc tempor, urna a ullamcorper egestas, felis diam elementum felis, vitae consequat ligula quam eleifend orci. Nullam rhoncus suscipit arcu in placerat. Vivamus venenatis euismod diam quis ultrices. Donec auctor neque in eros placerat varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at leo arcu.</p>
        
        <h2>Heading</h2>
        <p>Phasellus et luctus diam. Sed vel cursus eros. Phasellus ut ante metus, non mollis sem. Integer tristique tellus ac nisi pellentesque in laoreet lectus sagittis. Aenean pellentesque ullamcorper molestie. Nullam facilisis bibendum ultrices. In a metus enim. Phasellus ornare, augue sed porttitor fringilla, metus mauris ultrices sem, at iaculis metus orci in lacus. Vestibulum convallis tempus condimentum. Fusce dictum est et neque bibendum dignissim id vitae leo. Donec ac ligula est. Suspendisse potenti. Nunc tempor, urna a ullamcorper egestas, felis diam elementum felis, vitae consequat ligula quam eleifend orci. Nullam rhoncus suscipit arcu in placerat. Vivamus venenatis euismod diam quis ultrices. Donec auctor neque in eros placerat varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at leo arcu.</p>
    
    </div>

</div>

Cascading Stylesheet:

body { margin: 20px; background: #ddd; font: 12px Arial; text-align: justify; }
#container { line-height: 22px; overflow: hidden; }
#side { width: 300px; padding: 20px; background: #09f; color: #fff; float: left; }
#main { margin: 0 0 0 360px; }
#inset { padding: 20px; background: #fff; }
#inset-float { width: 300px; padding: 20px; margin: 0 0 0 20px; background: #f90; color: #fff; float: right; }

donderdag 28 januari 2010 11:44

Acties:

0 Henk 'm!

MBV

Ik zie overflow op hidden staan. Krijg je dan niet weer het probleem dat hij geen scrollbalk geeft als het niet past?

zondag 31 januari 2010 11:57

Acties:

0 Henk 'm!

R4gnax

Javascript

Jiggle schreef op woensdag 27 januari 2010 @ 11:56:
Thanks!

... maar helaas....

Werkt niet in IE7. De CSS gaat mijn petje een beetje te boven, is uitleg over wat de oplossing zou moeten zijn misschien mogelijk?!

Sorry: mijn fout. Vervang _display door *display, zodat ook IE7 hem leest. Beter nog: plaats deze samen met de zoom property netjes in een IE6/7 only stylesheet. (De CSS hack is er eigenlijk alleen om even snel inline alles te kunnen neer zetten, zonder al in het voorbeeld met conditional comments te moeten gaan morellen.)

De reden voor de display: inline, zoom: 1 combinatie is dat dit het element voor IE6/7 inline maakt, en vervolgens 'layout' geeft, waardoor het zich gaat gedragen als inline-block.

maandag 1 februari 2010 01:13

Acties:

0 Henk 'm!

beesting

Ik word misschien een beetje spuit11 zo, maar kon helaas niet eerder reageren. Maar voor het volledige antwoord post ik dit toch nog maar.

In feite is de juiste oplossing al aangedragen om het IE6&7-compatible te maken: in IE6 & IE7 gedragen elementen met display: inline; (afhankelijk van een aantal voorwaarden) zich net zoals display: inline-block in andere browsers. Dat is dus in feite de enige regel die extra nodig is hiervoor.

Om dit te bereiken, zou ik je echter wel sterk aanraden om geen hacks te gebruiken. Je hebt daarmee namelijk altijd kans op onbedoelde bij-effecten (eventueel zelfs in browsers die nu nog bestaan). Een IE-conditional stylesheet is in mijn ogen echter geen hack. Volgens de officiele specificaties (W3C HTML recommendations) is dit namelijk simpelweg commentaar en geen code. Daarnaast geef je expliciet een bereik aan wat alleen voor oudere (< IE8) browsers geldt, dus zal je nooit problemen kunnen krijgen met toekomstige browsers die ofwel de standaarden correct ondersteunen (dan is het commentaar), ofwel IE zijn (maar dan hebben ze een hoger versie-nummer, dus negeren het ook). In feite heb je met deze oplossing de rest van je leven (of iig IE6/7's leven

) genoeg aan een (of meerdere) normale stylesheets met daarbij slechts 1 extra stylesheet, specifiek voor IE6 en/of 7.

Ok, dan nu nog even de complete oplossing (puur voor het gemak hier als internal stylesheet, afhankelijk van je site kun je er met een <link> tag een externe stylesheet van maken):

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Center auto-width wrapper with static-width side panel</title>
        <style>
            body{text-align:center}
            #wrapper{text-align:center;overflow:hidden;background-color:#ddf;display:inline-block}
            #left{float:left;width:90px;background-color:#dfd}
            #right{margin-left:100px;background-color:#fdd}
        </style>
        <!--[if lt IE 8]>
        <style>
            #wrapper{display:inline;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="wrapper">
            <p id="left">left</p>
            <p id="right">right met iets meer tekst</p>
        </div>
    </body>
</html>

Let wel op: op de een of andere manier 'vergeet' IE6/7 in dit geval de margins op de p-elementen. Maar goed, als je die zelf instelt of andere elementen gebruikt maakt dat niets uit. Maar let altijd wel even op vreemde bij-effecten in IE6/7.

Disclaimer: heb het alleen even in IE8 met compatibility mode (=IE7) kunnen testen, dus niet met IE6, maar weer vrij zeker dat het in beide het probleem op moet lossen.

[ Voor 4% gewijzigd door beesting op 01-02-2010 12:36 ]

maandag 1 februari 2010 23:27

Acties:

0 Henk 'm!

R4gnax

Javascript

beesting schreef op maandag 01 februari 2010 @ 01:13:
Ok, dan nu nog even de complete oplossing (puur voor het gemak hier als internal stylesheet, afhankelijk van je site kun je er met een <link> tag een externe stylesheet van maken):

Ten eerste mis je een speciaal daarvoor bestemde, consistente layout trigger voor het wrapper element. Zoom: 1 is daar zeer geschikt voor. Er zijn anderen, maar deze zijn vrij onvoorspelbaar, eisen dat je een fixed width/height instelt, of hebben bijwerkingen. Overflow: hidden die jij gebruikt kapt bijvoorbeeld in Gecko een print van je website af aan het einde v/d eerste pagina. Die wil je zo dus nooit op (top-level) site containers gebruiken waar (al de) belangrijke content van je website in hangt. Op dat gebruik lijkt een fixed sidebar met een flexibel content blok nou net wel ge-ent te zijn...

Ten tweede gebruik je een float, wat hier een non-oplossing is: dat zorgt er voor dat het rechterblok naar onderen schuift wanneer je pagina te smal wordt om het rechterblok de minimale breedte te bieden die het nodig heeft. Enige manier om dat te voorkomen is je wrapper een vaste breedte geven, en dat kun je in dit voorbeeld nou weer net niet, omdat het rechter blok (wat in je wrapper zit) flexibele breedte moet hebben.

De enige manier om dit te tackelen zonder tables is inline-block op zowel de wrapper als de linker en rechter blokken, in combinatie met no-wrap, om te forceren dat het linker en rechter blok op één lijn naast elkaar blijven staan.

Die oplossing had ik een aantal posts terug al gegeven, maar ik had een foutje in de underscore/star hack zitten, waarvan ik in mijn latere post al zei dat deze puur was om het even snel werkend te krijgen: uiteraard dien je in productie een conditional stylesheet te gebruiken.

[ Voor 26% gewijzigd door R4gnax op 01-02-2010 23:35 ]

Onderwerpen