[HTML/CSS] problemen met DIV-minimumbreedtes

[BalusC]

edit:
Final note het probleem is min of meer opgelost door deels tabellen te gebruiken; sommige testlinks richting mijn website zullen ook niet meer werken.

Ik ben een webdevver van de oude garde, ik gebruikte altijd al tabellen om vorm aan de layout te geven, ook al waren er DIV's hiervoor beschikbaar. De voornaamste reden was de incompatibiliteit met de sindsdien door mij veelgebruikte browser: Netscape Communicator. Gisteren had ik besloten om alle tabellen uit de basislayout van mijn website te slopen en vervangen door DIV's en hier en daar finetunen. Tot zover is dit aardig gelukt:

Oude tabellayout: http://balusc.xs4all.nl (css: http://balusc.xs4all.nl/css.css)
Nieuwe divlayout: http://balusc.xs4all.nl/tst/welll.html (css: http://balusc.xs4all.nl/csss.css)

Noot: de nieuwe divlayout betreft alleen de welll.html, doorklikken naar andere pagina's heeft geen zin.

Enkelen van jullie zullen vast wel hebben gemerkt dat ik vanmorgen zat te stoeien met het probleem dat de rechterkolom over de middelste kolom met het content-gedeelte heen zweeft wanneer je de browservenster verkleint naar minder dan 800px: [rml][ XHTML] rechtste DIV zweeft over middelste DIV in IE6/OP7[/rml] Dit werd dus direct door mijzelf opgelost Echter hier zitten haken aan vast ..


Haak #1: mijn website is ook voorzien van een aantal flinke CPU/chipset-info tabellen (onder de link Hardware). Ze zijn allemaal breder dan 434px, de minimumbreedte van de content-DIV om aan de 800px eis te voldoen. Dit heeft tot gevolg dat de hele content-DIV met de tabel doorloopt tot achter de rechterkolom wanneer de browservenster wordt verkleind. Het volgende plaatje geeft een idee:


Dit is hier met eigen ogen te oordelen. Dat doet zich hier in alle browsers voor: IE6/FF.9/OP7.

Nu kan ik dit wel herstellen door bijvoorbeeld specifiek

Cascading Stylesheet:

.main2 {position:relative;
        min-width:1024px;
        width:expression(document.body.clientWidth<1024?'1024px':'100%');
}

in zulke webpagina's te gebruiken in plaats van de huidige 800px limiet. Echter dat vind ik vanuit developersoogpunt niet echt een nette (consistente) oplossing. Ik wil gewoon een basislayout waarbij je qua styling helemaal geen rekening hoeft te houden met randfactoren. Zijn er andere, nettere, CSS-based oplossingen mogelijk?


Haak #2: wanneer ik width="100%" aan die tabellen mee geef, wat vanuit designers oogpunt veel netter is (sommige pagina's hebben meerdere tabellen onder elkaar), dan doet zich in IE6 het probleem voor dat de tabel de content-DIV een paar pixels doordrukt richting het rechter kolom, ook al zit het ruim buiten de minimumbreedte van 800px. Dat doet zich niet voor in FF.9 en OP7. Ik heb geen online voorbeeld, maar wel een screenshotje:


Dit was te oplossen door

Cascading Stylesheet:

.content {float:left;}

aan csss.css toe te voegen.

Echter dit had tot gevolg dat alle links binnen het content-DIV in FireFox 0.9 en Opera 7.53 niet meer werkten. In IE6 werken de links prima. Dat is te oordelen via deze link. Klik op de blauwe [info] linkjes, althans, probeer het ..

Is hier een CSS-based oplossing/workaround voor? Edit: opgelost, zie ook [rml]BalusC in "[ HTML/CSS] problemen met DIV-minimumbree..."[/rml]

[ Voor 8% gewijzigd door BalusC op 29-07-2004 16:44 ]

[Verwijderd]

offtopic:
Dit heeft niks met XHTML te maken. Maar dan ook niks. Beter, switch gewoon terug naar HTML aangezien je toch niet aan de mime type "issues" kunt voldoen.

edit:
Wat dacht je ervan om er CSS van te maken, daar ligt het probleem toch? Of lukt de semantiek niet helemaal?

[ Voor 30% gewijzigd door Verwijderd op 27-07-2004 22:46 ]

[BalusC]

offtopic:
OK, titel aangepast

edit:
CSS added

[ Voor 29% gewijzigd door BalusC op 28-07-2004 08:47 ]

[Verwijderd]

code:

overflow:auto

Comes to mind...

Dat met die 'float' heb ik eerder gezien. Geen idee wat de oplossing ervoor was helaas, maar ik denk dat je ergens 'clear' moet neerzetten.

Verder denk ik dat je qua semantiek, zoals hierboven genoemd nog tich dingen kan verbeteren, maar wellicht kun je beter een apart topic openen daarvoor.

[BalusC]

code:

overflow:auto

Comes to mind...

Dat is helaas geen optie. Ik wens geen schuifbalken binnen een DIV. Het in .main zetten werkt ook niet: de hele inhoud verdwijnt dan (hoe kan dit eigenlijk?).

Dat met die 'float' heb ik eerder gezien. Geen idee wat de oplossing ervoor was helaas, maar ik denk dat je ergens 'clear' moet neerzetten.

Dat was ook mijn eerste gedachte (niet vermeld in topicstart, zie ik nu), maar dat werkte niet. Nu heb ik zojuist gegoogled naar [u]css float links not clickable[/] en een aantal suggesties uitgeprobeerd.

1) float:left; en clear:both; aan .contenttop toevoegen. Nu werken de links van .content wel weer in Gecko/Opera, echter die van .contenttop niet meer. Ook werd het layout verneukt: de breedte werd ingedrukt. Wanneer ik dan width:100% aan .contenttop toevoeg, dan ziet de layout er prima uit, maar werken de links van .content niet meer. Hetzelfde verhaal geldt voor het toevoegen van float/clear aan .middletop en .middle.

2) Alle <br />'s verwijderen. Dit was de oplossing (hoe kan dit!?), maar al het tekst stortte in elkaar. Ook het volgende

Cascading Stylesheet:

br {float:left; clear:both;}

in csss.css was de oplossing, echter al het tekst stortte ook hier in elkaar. Alsof de breaks niet meer functioneel zijn.

Een betere oplossing zou zijn om dat hele float:left; uit .content te halen en een andere oplossing zoeken voor dat IE6-trekje zoals beschreven in de topicstart.

Verder denk ik dat je qua semantiek, zoals hierboven genoemd nog tich dingen kan verbeteren

Wat bedoel je precies met semantiek? Ik heb niet eerder van dat woord gehoord en vandale.nl kent het woord ook niet.

[André]

BalusC schreef op 28 juli 2004 @ 08:46:
Wat bedoel je precies met semantiek? Ik heb niet eerder van dat woord gehoord en vandale.nl kent het woord ook niet.

quote: http://www.vandale.nl/opz...boek/?zoekwoord=semantiek

se·man·tiek (de ~ (v.))
1 leer van de betekenis van de woorden en woordgroepen => betekenisleer
2 [fil.] leer van de interpretatie van formele systemen

Het houdt simpelweg in dat de juiste tags voor de juiste dingen gebruikt worden in een goede volgorde

[BalusC]

Oh, ik zocht in het Taalweb, zie ik nu Voor de layoutverandering van Vandale.nl was het zoekveldje voor de online woordenboek beter zichtbaar.

Semantiek, in welk opzicht dan? CSS-layout van website? DIV-layout van website? Layout van het CSS bestand? Layout van de HTML bestanden?

[ Voor 7% gewijzigd door BalusC op 28-07-2004 09:16 ]

[Verwijderd]

HTML opzicht uiteraard. Daar draait HTML om, dat is het enige waarvoor je HTML nodig hebt. Blaat blaat blaat... Maar daarvoor kun je beter een nieuw topic openen, zoals hierboven genoemd.

[drm]

BalusC:
2) Alle <br />'s verwijderen. Dit was de oplossing (hoe kan dit!?), maar al het tekst stortte in elkaar. Ook het volgende

Cascading Stylesheet:

br {float:left; clear:both;}

in csss.css was de oplossing, echter al het tekst stortte ook hier in elkaar. Alsof de breaks niet meer functioneel zijn.

Break's zou je (in theorie) niet nodig moeten hebben binnen tekst. Als ik zo even vluchtig kijk kun je dingen als

HTML:

Voor meer informatie over BalusC hemzelf.<br />- Wat?<br />- Wie?<br />- Waar?<br />- Hobbies?

Gewoon met een <p> en <ul>-element oplossen. Dat is ook meteen wat Anne bedoelt met semantiek, wat simpelweg gewoon inhoudt: gebruik elementen waar ze voor zijn (lists, paragrafen, etc) en gebruik divs, spans en brs als laatste redmiddel.

Zo ook bijvoorbeeld het overmatig gebruik van classes:

Nu	Suggestie
code: <div class="middletop">The BalusC Server</div>	code: <h1>The BalusC Server</h1>
code: <p class="head">Welkom</p>	code: <h2>Welkom</h2>
code: <div class="menu"> <div class="menu1active">Welkom</div> <div class="menu1"><a href="bls-wat.html">BalusC</a></div> <div class="menu1"><a href="156-int.html">Alfa 156</a></div> ... </div>	code: <dl> <dt>Welkom</dt> <dd><a href="bls-wat.html">BalusC</a></dd> <dd><a href="156-int.html">Alfa 156</a></dd> ... </dl>

Tot slot denk ik dat je nog niet op de hoogte bent van contextual selectors. Dat wil zeggen dat je styles opgeeft voor elementen in een bepaalde context. Bijvoorbeeld:

Cascading Stylesheet:

br {
   /* some rules for br */
}

div.content br {
   /* more specific rules for br's in div.content */
}

Daarbij moet opgemerkt worden dat: hoe specifieker de selector (het gedeelte voor de { dus ), hoe hoger de prioriteit van die rule. Anders gezegd: als je de selector specifieker maakt, override je minder specifieke selectors.

volgens mij moet je zo wel een eind komen

[BalusC]

drm: dank je voor de uitleg

Maar wanneer ik de <br />'s vervang door <ul><li>'s, dan blijven de links in .content nog steeds onklikbaar in Gecko/Opera, tenzij ik float:left; uit de .content css óf alle <li>'s uit de HTML verwijder .. Het probleem is dus onveranderd tov de <br />'s.

De rest van de suggesties wat betreft semantiek zal ik in mijn achterhoofd houden bij het verder finetunen van de layout. Nu wil ik eerst de breedte en floating problemen oplossen.

[ Voor 27% gewijzigd door BalusC op 28-07-2004 10:59 ]

[drm]

BalusC:
drm: dank je voor de uitleg

Maar wanneer ik de <br />'s vervang door <ul><li>'s, dan blijven de links in .content nog steeds onklikbaar in Gecko/Opera, tenzij ik float:left; uit de .content css óf alle <li>'s uit de HTML verwijder .. Het probleem is dus onveranderd tov de <br />'s.

Ik had er even bij moeten zeggen dat ik 't meer in het algemeen bedoelde dan dat het een oplossing voor je probleem zou zijn

De rest van de suggesties wat betreft semantiek zal ik in mijn achterhoofd houden bij het verder finetunen van de layout. Nu wil ik eerst de breedte en floating problemen oplossen.

Ik denk dat de enige oplossing is geen floats te gebruiken. Floats leveren zo vaak problemen op, dat ik ze zoveel mogelijk probeer te vermijden.

Probeer eens wat grove opzetjes met je layout op de volgende manier:

HTML:

<!-- snip -->
<style type="text/css">
   html,body {
      margin:0;
   }
   div { border:1px solid #f00; }
   div#left {
      position:absolute;
      left:5px;
      top:5px;
      width:120px;
   }
   div#right {
      position:absolute;
      right:5px;
      top:5px;
      width:120px;
   }
   
   div#content {
      margin:5px 140px 0 140px;
      border-color:#0f0;
   }
   </style>
<!-- snip -->
<body>
<div id="left">
   <p>left</p>
   <p>left</p>
   <p>left</p>
   <p>left</p>
   <p>left</p>
</div> 
<div id="right">
   <p>right</p>
   <p>right</p>
   <p>right</p>
   <p>right</p>
   <p>right</p>
</div>  
<div id="content">
   <p>content</p>
   <p>content</p>
   <p>content</p>
   <p>content</p>
   <p>content</p>
</div>
</body>

Ik denk dat je dan een wat solider uitgangspunt hebt dan de manier die je nu gebruikt, en ik kan me niet voorstellen dat je dan dezelfde problemen tegenkomt.

[BalusC]

Alleen met dat stukje code al schuift de rechterkolom over de andere koloms heen wanneer je de browservenster verkleint. En wanneer je een table met width=100% in die content-DIV stopt, dan is de layout al verneukt

Deze twee punten zijn juist mijn hele probleem.

[drm]

BalusC:
Alleen met dat stukje code al schuift de rechterkolom over de andere koloms heen wanneer je de browservenster verkleint.

Mja, idd. Een oplossing die in IE wel werkt is dan voor body het volgende opgeven:

code:

body {
   position:absolute;
   width:auto;
}

en Mozilla en consorten kun je tevreden houden met een min-width voor de body

En wanneer je een table met width=100% in die content-DIV stopt, dan is de layout al verneukt

Daarvoor moet IE in strict rendermode zitten, dan heb je dat probleem niet. D.w.z., niet in IE6.

Deze twee punten zijn juist mijn hele probleem.

Ik moet je bekennen dat ik voor een layout als deze in het echie ook gewoon een tabel zou gebruiken. Sommige dingen zijn gewoon niet makkelijk op te lossen met "net" css, puur omdat de ondersteuning ervan nog niet toereikend is.

[BalusC]

drm schreef op 28 juli 2004 @ 13:00:
[...]
Mja, idd. Een oplossing die in IE wel werkt is dan voor body het volgende opgeven:

code:

body {
   position:absolute;
   width:auto;
}

en Mozilla en consorten kun je tevreden houden met een min-width voor de body

Deze heb ik reeds toegepast in vorm van een 800px-minimum. Ik kan wel meerdere styles definieren voor bijv 800px, 1024px, 1280px en dan alle pagina's afscannen naar de juiste breedte. Maar da's dus niet mijn wens, zie ook de startpost.

Daarvoor moet IE in strict rendermode zitten, dan heb je dat probleem niet. D.w.z., niet in IE6.

En da's dus niet crossbrowser compatible ..

Ik moet je bekennen dat ik voor een layout als deze in het echie ook gewoon een tabel zou gebruiken. Sommige dingen zijn gewoon niet makkelijk op te lossen met "net" css, puur omdat de ondersteuning ervan nog niet toereikend is.

Daar was ik al bang voor.

Tussendoor: dat floating/links probleem heb ik zojuist ik ogenschijnlijk simpel opgelost door in .content width:100%; te gebruiken in plaats van float:left;

[ Voor 12% gewijzigd door BalusC op 28-07-2004 13:23 ]

[Verwijderd]

Je kunt wel in de middelste div een relative div toevoegen met width:100%; en daarin je tabel op 100% width

[BalusC]

Die zit er al in

code:

<div class="middle"> (absolute)
  <div class="content"> (relative, width=100%)
    <table with="100%">

[Amras]

Misschien dat je hier wat aan hebt?

3 columns, the holy grail

[BalusC]

Deze had ik vanmorgen al van iemand doorgesluisd gekregen. Helaas, dat is het ook niet.

Voor de duidelijkheid: er rest dus nog het probleem dat de middelste div-kolom wordt uitgerekt wanneer je een table met width=100% (of een té brede tabel) erin propt, terwijl de rechtse div-kolom gewoon blijft staan (erboven zweeft). Hier zoek ik dus een oplossing naar

[Verwijderd]

Die zit er al in

code:

<div class="middle"> (absolute)
  <div class="content"> (relative, width=100%)
    <table with="100%">

En dit is een letterlijke quote uit de broncode of niet?

[BalusC]

Nee, niet letterlijk

Deze is wel letterlijk:

Cascading Stylesheet:

.middle {position:absolute; 
         left:183px; 
         right:183px; 
         margin-top:5px; 
         font-size:0pt;
}
.content {position:relative; 
          background:#fff; 
          border:#c42 2px solid; 
          width:100%; 
          margin-bottom:13px; 
          padding:2px; 
          padding-bottom:13px; 
          font-family:verdana,helvetica,arial,sans-serif; 
          font-size:8pt;
}

HTML:

      <div class="middle">
        *snip* 
        <div class="content">
          *snip*
          <table width="100%" border="0" cellspacing="2" cellpadding="2">
          *snip*
        </div>
        *snip*
      </div>

Uit http://balusc.xs4all.nl/tst/har-cpu-int-p33.html

[BalusC]

OK, het breedte-probleem is min of meer opgelost. IE6-only welteverstaan.

Oud:

Cascading Stylesheet:

div#left {position:absolute;
          top:5px; 
          left:5px;
          width:165px; 
          font-size:0pt;
}
div#middle {position:absolute; 
            top:5px; 
            left:183px; 
            right:183px; 
            font-size:0pt;
}
div#content {position:relative; 
             background:#fff; 
             border:#c42 2px solid; 
             width:100%; 
             margin-bottom:13px; 
             padding:2px; 
             padding-bottom:13px; 
             font-family:verdana,helvetica,arial,sans-serif; 
             font-size:8pt;
}
div#right {position:absolute; 
           top:5px;
           right:5px;
           width:165px;
           font-size:0pt;
}

HTML:

<div id="left">
</div>
<div id="middle">
  <div id="content">
    <table width="100%">
    </table>
  </div>
</div>
<div id="right">
</div>

Nieuw:

Cascading Stylesheet:

div#left {position:absolute;
          top:5px; 
          left:5px;
          width:165px; 
          font-size:0pt;
}
div#test {position:absolute; 
          left:183px;
}
div#middle {position:relative; 
            margin-top:5px; 
            margin-right:183px; 
            font-size:0pt;
}
div#content {position:relative; 
             background:#fff; 
             border:#c42 2px solid; 
             width:100%; 
             margin-bottom:13px; 
             padding:2px; 
             padding-bottom:13px; 
             font-family:verdana,helvetica,arial,sans-serif; 
             font-size:8pt;
}
div#right {position:absolute; 
           top:5px;
           right:5px;
           width:165px;
           font-size:0pt;
}

HTML:

<div id="left">
</div>
<div id="test">
  <div id="middle">
    <div id="content">
      <table width="100%">
      </table>
    </div>
  </div>
  <div id="right">
  </div>
</div>

Dat het "min of meer" in IE6 werkt komt omdat de margin-bottom en padding-bottom van div#content volledig worden genegeerd door IE6.. En dat het niet werkt in Gecko/Opera is vergelijkbaar met dit: http://www.quirksmode.org/css/mozilla_table.html

Voorlopig blijft mijn website maar tabellenwerk, lijkt me. Wel ga ik hier en daar meer elementen ver-CSS'eren, zoals de spans, br's en lists

[Verwijderd]

Dankzij IE werkt het niet. Er zijn namelijk properties als 'display:table' e.d. die hierbij hadden kunnen helpen, maar niet ondersteund worden.

Wat je kunt doen is 1 tabel gebruiken met 3 kolommen (paar bytes, niet veel) en de rest gewoon "perfect" oplossen met lijsten, en andere semantische markup. Dus in plaats van '<td><b>Table header</b></td>', '<th>Table header</th>' en geen <br/> maar lijstjes.

In het midden zul je af en toe voor een overzicht nog een tabel nodig hebben, maar dat is puur semantisch en heeft niks met layout te maken.

[BalusC]

Verwijderd schreef op 29 juli 2004 @ 12:41:
Wat je kunt doen is 1 tabel gebruiken met 3 kolommen (paar bytes, niet veel) en de rest gewoon "perfect" oplossen met lijsten, en andere semantische markup.

Hiernaar ben ik toevallig ook aan het kijken

edit:
Werkt perfect Op bijvoorbeeld de Intel Pentium!!! CPU specpagina bereik ik een besparing van 146KB » 116KB = 30KB, oftewel dik 20%

[ Voor 20% gewijzigd door BalusC op 29-07-2004 13:17 ]