Archief - xHTML/CSS: Div stretchen

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
h

humanrobot

Legacy Member
Ik heb een website met divs gemaakt.

Alles goed behalve dat de achtergrond van
#linksschaduw
#menutitel
#rechtsschaduw

zich niet willen aanpassen aan de grootte van container 2.
Weet iemand de oplossing?

Code: 
BODY {
	background-color: #758293;
	margin: 0px;
}
#container
{
	width: 776px;
	margin: 10px auto;
	color: #333;
	line-height: 130%;
	background-position: center;	
}

#top
{
height: 147px;
width: 776px;
background-image: url(../img/banner.gif);

}
#linksshaduw
{
float: left;
background-image: url(../img/linksshaduw.gif);
width: 16px;
background-repeat: repeat-y;
display: table-cell;


}
#rechtsshaduw
{
float: right;
background-image: url(../img/rechtsshaduw.gif);
width: 16px;
display: table-cell;
}
#titelbalk
{
float: left;
background-image: url(../img/titelbalk.gif);
width: 93px;
display: table-cell;
}
#container2
{
float: left;
background-image: url(../img/content.gif);
width: 651px;
display: table-cell;
}
#footer
{
float: left;
background-image: url(../img/footer.gif);
clear: both;
width: 776px;
height: 52px;
}
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">
  <head>
    <title>&bull; The Lighthouse Hosting &bull; The light in your search for hosting</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="robots" content="{FOLLOW}" />
    <meta name="description" content="{DESCRIPTION}" />
    <meta name="keywords" content="{KEYWORDS}" />
    <meta name="author" content="The Lighthouse" />
    <link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
  <body>
    <div id="container">
      <div id="top">
      </div>
	  <div id="linksshaduw">

	  </div>
	  <div id="titelbalk">

	  </div>
	  <div id="container2">
	    test<br /><br /><br /><br /><br /><br /><br /><br />
	  </div>
	  <div id="rechtsshaduw">

	  </div>
	  <div id="footer">
	  
	  </div>
	  
    </div>
  </body>
</html>
Q

Quilombo

Legacy Member
k zie ni in wat container2 daarmee te maken heeft, als die drie nu in container2 zouden steken.. jah, ma da is nie zo, ik snap nie waar ge naartoe wilt

en normaal zet ge best toch IETS in elken div, al is het maar &nbsp;

zet het anders eens online das imo gemakkelijker
h

humanrobot

Legacy Member
Je kan het probleem bekijken op:
http://www.fragfun.be/test/result.jpg

De derde div is groter dan de rest en daardoor valt layout slecht. Ik zou dus een minimun hoogte aan de andere divs willen geven en als ze groter worden dat ze gewoon verder gaan.
o

orez

Legacy Member
humanrobot .... zet eens je HTML online, dus de WEBPAGINA online zetten als je deftige hulp wilt, op deze manier kunnen wij echt moeilijk gaan helpen hoor...
R

RpR

Legacy Member
Ik ben zelf ook divs aan het leren en ik versta mij hier dus ook niet uit hopelijk iemand anders
o

orez

Legacy Member
om uw links/rechts schaduw op te lossen, zou ik dat veel simpeler doen, 1 div maken namelijk #content.

En die div (de middelste dus, tss header & footer) een bg-image meegeven, die 1px hoog is, maar dan vanaf uw linkerschaduw tot uw rechter.

En de elementen die binnen die div komen, deze een margin meegeven om deze te plaatsen binnen de contentdiv.

Dit is veel eenvoudiger om te beginnen, en correcter ook trouwens... Je mag het niet te ver gaan zoeken.

Waarom uw shadowdivs niet worden weergegeven is in feite ook redelijk simpel, ze bevatten niets van content, maar in uw css wordt er ook geen "height" meegegeven, als er geen height wordt meegegeven, zal die div ook niet verschijnen.

Maar das even ter verklaring... Beste manier is volgens de manier die ik u beschreven heb, door maar met 1 div te gaan werken ipv 3 naast elkaar :)
h

humanrobot

Legacy Member
Dat gaat niet echt doordat mijn tweede kolom een verticale tekst zal hebben (image) die dan verder gaat in een balk dus ik zou echt het op deze manier moeten doen.

Wat ik raar vind is dat iedereen divs aanraad en dat je dit dan nog niet zou kunnen doen met divs.
R

RpR

Legacy Member
humanrobot zei:
Dat gaat niet echt doordat mijn tweede kolom een verticale tekst zal hebben (image) die dan verder gaat in een balk dus ik zou echt het op deze manier moeten doen.

Wat ik raar vind is dat iedereen divs aanraad en dat je dit dan nog niet zou kunnen doen met divs.
Klik om te vergroten...
Kvind dat dus ook.
Tabels geven op geen enkele browser problemen terwijl met divs moet ge hacks toepassen voor IE.
o

orez

Legacy Member
toch niet humanrobot... de contentdiv maken zoals ik zeg, en dan IN die content div je onderverdeling gaan maken (dus je verticale tekst in een 2de kolom)

Dus je maakt je main content div, en binnen die div maak je dan een onderverdeling aan de hand van 2 divs

En je hebt helemaal geen hacks nodig RpR als je deftig met CSS kan werken ;)
h

humanrobot

Legacy Member
Dit is het resultaat dat ik wens te bekomen:
http://www.fragfun.be/test/site.jpg

Hoe zou jij deze dan opdelen want de letter S komt door de menu en tekst vervaagt in een lijn.

Alvast bedankt voor de hulp want ik probeer mijn best te doen om iets nieuws te leren want met tabellen is hij af op 2 minuten.
s

servi

Legacy Member
De korte uitleg is dat je de linkerdiv niet even groot kan maken als de contentdiv.

Een oplossing is er echter wel voor : je kan hier best gebruik maken van zogenaamde faux-columns ( zoek maar eens op google css faux columns ) om de indruk te geven dat linkerdiv even groot is als contentdiv.
R

RpR

Legacy Member
servi zei:
De korte uitleg is dat je de linkerdiv niet even groot kan maken als de contentdiv.

Een oplossing is er echter wel voor : je kan hier best gebruik maken van zogenaamde faux-columns ( zoek maar eens op google css faux columns ) om de indruk te geven dat linkerdiv even groot is als contentdiv.
Klik om te vergroten...
Kvolg dit nu ook op de voet.

Maar is het voor zo layouts dan niet beter om gewoon tabellen te gebruiken?
o

orez

Legacy Member
neen helemaal niet.

tables enkel voor tabulaire date ! en niets anders.
Je moet gewoon divs en positionering en hoe ze reageren tegenover elkaar onder de knie hebben (en dat duurt idd een tijdje ..) En dan moet je logisch gaan nadenken met de kennis die je vergaart hebt over divs.

Deze layout is zelfs nog redelijk simpel in een div structuur te gooien hoor.

4 divs zijn hier nodig ;)

Kzal als ik tijd heb morgen het eens onder handen nemen, maar momenteel heb ik er de tijd niet voor :)
R

RpR

Legacy Member
orez zei:
neen helemaal niet.

tables enkel voor tabulaire date ! en niets anders.
Je moet gewoon divs en positionering en hoe ze reageren tegenover elkaar onder de knie hebben (en dat duurt idd een tijdje ..) En dan moet je logisch gaan nadenken met de kennis die je vergaart hebt over divs.

Deze layout is zelfs nog redelijk simpel in een div structuur te gooien hoor.

4 divs zijn hier nodig ;)

Kzal als ik tijd heb morgen het eens onder handen nemen, maar momenteel heb ik er de tijd niet voor :)
Klik om te vergroten...

Ik dacht aan een minimun van 6 divs.
header + footer
die links + rechts schaduw
dan content + die balk.
o

orez

Legacy Member
4 :

Header, content, footer & een div die het NEWS onderdeel (vertical ding) bevat, en die binnen de content div goed wordt uitgelijnd.

Om dit te bekomen, moet je layout natuurlijk er ook wel goed voor gesliced zijn zoals het moet :)
h

humanrobot

Legacy Member
orez zei:
neen helemaal niet.

tables enkel voor tabulaire date ! en niets anders.
Je moet gewoon divs en positionering en hoe ze reageren tegenover elkaar onder de knie hebben (en dat duurt idd een tijdje ..) En dan moet je logisch gaan nadenken met de kennis die je vergaart hebt over divs.

Deze layout is zelfs nog redelijk simpel in een div structuur te gooien hoor.

4 divs zijn hier nodig ;)

Kzal als ik tijd heb morgen het eens onder handen nemen, maar momenteel heb ik er de tijd niet voor :)
Klik om te vergroten...
Kijk er naar uit want ik vind het maar niet.
h

humanrobot

Legacy Member
Orez heeft mij dus precies een beetje in de steek gelaten.
Vandaar deze oproep of iemand anders dit zou kunnen zodat ik eruit kan leren.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan