Probleem met width:100%

**Bram Lodens** · 21-03-2007, 18:56

Ik heb volgende code

Code:

<!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>Untitled Page</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" border="1">
	<td width="300px">MAKESURETHISSTAYSWIDEENOUGH</td>
	<td>
		<div style="width:100%;overflow:auto;height:210px;">
			BLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLA
		</div>
	</td>
	<td width="200px">MAKESURETHISSTAYSWIDEENOUGH</td>
</table>
</body>
</html>

Wanneer u dit bekijkt in FF en de browser even resized dan zie je een horizontale scrollbalk verschijnen in het middenste deel.

Wanneer je dit in IE 7.0 doet dan zie je er geen verschijnen ...

Zoals u ook ziet in er gebruikt gemaakt van een table. Kan ik het gewenste resultaat bekomen door gebruik te maken van divkes?

Dus de linkse div moet 300px zijn, de middenste moet 100% zijn met een scrolbalk bij het resizen en de rechtse moet 200px zijn.

Heeft iemand een oplossing?

**Cédric Siroux** · 21-03-2007, 20:20

een div is standaard 100% van de grootte die hij kan innemen, denk dat dit bij IE een error geeft (zowel 6 als 7)

ik wil trouwens niet irritant doen ofzo he, maar u linkse "MAKESURETHISSTAYSWIDEENOUGH" is 80px groter geworden (enkel omdat de text te lang is, ik vermoed dat je bij gewone sites geen even lange woorden zal gebruiken), *edit: dit is wel op te lossen zijn door in die td's een div van de juiste breedte te zetten*

zie niet direct een oplossing

**Bavo Ketels** · 22-03-2007, 09:18

Cédric

Dat is toch een veel voorkomend probleem. Hoe lossen andere mensen dat op?
Kan je dat met enkel DIVS oplossen?

Een drastische methode is met javascript, maar dat doe ik liever niet.

Groeten
Bavo

**gast25** · 22-03-2007, 09:37

Oplossing is wellicht om alles in DIVjes te doen.

**Cédric Siroux** · 22-03-2007, 10:38

Origineel gepost door Bavo Ketels

Cédric

Dat is toch een veel voorkomend probleem. Hoe lossen andere mensen dat op?
Kan je dat met enkel DIVS oplossen?

Een drastische methode is met javascript, maar dat doe ik liever niet.

Groeten
Bavo

een tabel rekt de cel uit als het woord te lang is, wat dus niet goed is voor de structuur van je site,
bij een div komt het te lange woord gewoon uit de <div> zonder dat deze mee uitrekt

alles in divs doen lukt niet zo goed,(probeer ook eens wat met de width:; te spelen, 100% geeft dat hij de hele paginabreedte inneemt en de andere 2 op een andere regel komen

Code:

<!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>Untitled Page</title>
</head>
<body>
    <div style="width:300px;float:left;border:1px solid black;">MAKESURETHISSTAYSWIDEENOUGH</div>
    <div style="overflow:auto;height:210px;float:left;">
        BLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLA
    </div>
    <div style="width:200px;float:left;border:1px solid black;">MAKESURETHISSTAYSWIDEENOUGH</div>
</body>
</html>

je kan ook nog position:absolute gebruiken, maar dan vrees ik dat je middelste div onder de gepositioneerde divs komt en dat je de breedte alsnog niet kan instellen

**Bavo Ketels** · 22-03-2007, 13:16

Origineel gepost door Cédric Siroux

een tabel rekt de cel uit als het woord te lang is, wat dus niet goed is voor de structuur van je site,
bij een div komt het te lange woord gewoon uit de <div> zonder dat deze mee uitrekt

Ja, maar als ik je code op IE uitvoer en mijn pagina resize, dan springt mijn rechtse DIV naar onder. Met tables heb je dat probleem nooit. Alles blijft strikt in zijn grid staan.

Ik geloof dat de enige oplossing javascript onresize zal zijn ...

**Cédric Siroux** · 22-03-2007, 14:05

Origineel gepost door Bavo Ketels

Ja, maar als ik je code op IE uitvoer en mijn pagina resize, dan springt mijn rechtse DIV naar onder.

is ook in andere browsers zo.
daarom moet je rond divs best een div instellen met een vaste breedte (niet in% maar in px) dan krijg je dat niet
kijk vb naar http://www.pvmultimedia.nl/ die is zo gesliced :)

**Bavo Ketels** · 22-03-2007, 14:17

Ik heb het opgelost met Javascript.
Ik probeer er nu een .net control van te maken die zelf de scripts registreert en waar je de data met properties kan instellen.

Code:

<!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>Untitled Page</title>
</head>
<script type="text/javascript">
    function resizeDiv(divName)
    {
        var bodyMargins = document.body.style.marginLeft + document.body.style.marginRight;
        var tdWidths = 500;
        var minWidth = 100;    
        if(document.documentElement.clientWidth - tdWidths > minWidth)
        {
            document.getElementById(divName).style.width = document.documentElement.clientWidth - tdWidths;
        }
        else
        {
            document.getElementById(divName).style.width = minWidth;
        }
        
        resizeText.innerHTML ='ClientWidth = ' + document.documentElement.clientWidth;
    }
</script>
<body onload="resizeDiv('divNorms')" onresize="resizeDiv('divNorms')" style="margin:0;">
    <table cellpadding="0" cellspacing="0" width="100%" border="0">
        <tr>
            <td width="300px"><div style="width:300px;">MENU</div></td>
            <td>
                <div id="divNorms" style="overflow:auto;height:210px;">
                    BLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLA
                    <div id="resizeText"></div>
                </div>                
            </td>
            <td width="200px"><div style="width:200px;">LEGENDA</div></td>            
        </tr>
    </table>
</body>
</html>

**Cédric Siroux** · 22-03-2007, 15:28

idd, maar in IE (7) komt er een tekstje bij 'client resize= xxx'
en javascript is niet zo goed (google, langere laadtijd,...)

**Frank Broersen** · 22-03-2007, 20:29

Met java dat probleem oplossen vind ik persoonlijk echt te dom voor woorden :P

Ten eerste; ik merk zelf dat sommige mensen nog wel eens java disabled hebbe, god mag weten waarom.

Ten tweede; je kan het gewoon netjes met divjes doen, als je leest wat er in de bovenstaande comments staat.

Succes ermee!

**K. Hobbelt** · 25-03-2007, 18:36

horizontale scrollbars, gewoon html, body 100% hoogte geven. en dan moet het lukken.

**Bavo Ketels** · 26-03-2007, 16:36

Origineel gepost door Cédric Siroux

daarom moet je rond divs best een div instellen met een vaste breedte (niet in% maar in px) dan krijg je dat niet

Mijn website moet width=100% zijn omdat er te veel data moet weergegeven worden (tabellen en zo)

Ik ben nu ook al wat aan het proberen om met DIVS te designen, maar blijkbaar is het niet mogelijk om met DIVS het width=100% effect te krijgen als je enkel de binnenste div procentueel wil laten groter worden

Ik zou het heel leuk vinden moest iemand mij een oplossing kunnen geven voor het bovenstaande probleem (niets wijzigen aan de fixed height en width waarden)

Een andere uitdaging is dan weer de volgende code perfect in DIVs krijgen. Ik geraak er niet uit:

Code:

<table width="100%">
   <tr>
      <td colspan="3">HEADER</td>
   </tr>
   <tr>
      <td width="300px">MENU</td>
      <td>CONTENT</td>
      <td width="200px">Other stuff</td>
   </tr>
   <tr>
      <td colspan="3">FOOTER</td>
   </tr>
</table>

Greetz

**Cédric Siroux** · 26-03-2007, 22:11

ik kan het in div's zetten maar niet met de scrollbar
zeg maar of het helpt of niet

**Bavo Ketels** · 27-03-2007, 07:23

Wat ik ook wou weten, en wat waarschijnlijk ook zal uitgelegd worden als je die code maakt, is hoe je voorkomt dat divs die float:left; staan onder elkaar getoond worden als je de browser resizet. Ze moeten blijven naast elkaar staan (zoals de <td>'s)

Alvast bedankt!

PS: Ik heb ondertussen iets gevonden dat erop lijkt: http://www.ssi-developer.net/main/te...hd-ft-flex.htm
Ik controleer of er geen nadelen zijn...

**Bavo Ketels** · 27-03-2007, 09:05

Ik geloof dat ik de oplossing voor mijn probleem gevonden heb.
Aan de hand van de vorige link van ssi-developer heb ik wat aanpassingen gedaan en tot het volgende resultaat gekomen:
http://www.sportportal.be/ReCreateXW...hd-ft-flex.htm

volledig te downloaden op http://www.sportportal.be/ReCreateXW...hd-ft-flex.rar
(blijft niet eeuwig op de server)

Hopelijk is het voor jullie ook nuttig

Als ik dit design implementeer in ASP.net, dan zullen er zich volgens mij wel nog wat problemen voordoen. Dan kom ik weer eens aankloppen!

Alvast bedankt voor jullie hulp! Zonder de tips was ik nooit op het idee gekomen.

Groeten
Bavo

Probleem met width:100%