Plaatjes verschuiven bij minimaliseren van de website

**Ronnie Koestering** · 06-11-2009, 19:53

Hallo,
Voor een schoolopdracht moet ik een regionale website maken.
Het ontwerp is af (Klik hier)!
Alleen als ik het nu online wil gaan zetten gaat het een beetje mis. (Klik hier) zoals jullie misschien kunnen zien staan sommige dingen wel op de goede plaats maar wanneer ik mijn venster minimaliseer dan gaat alles verschuiven!

Ik hoop dat jullie me kunnen en willen helpen, ook hoor ik graag wat ik beter kan doen (hiermee bedoel ik o.a het nieuws gebeuren)

Met vriendelijke groet,
Ronnie Koestering

**juul.k** · 06-11-2009, 20:03

Ik zou wel die 2 buttons weghalen van jongeren en bejaarden Jongeren kan nog maar bejaarden tjaa ieder zijn eigen mening.

**jhaagmans** · 06-11-2009, 20:05

Maak een container aan waar de divs zich fysiek in bevinden.

**Ronnie Koestering** · 06-11-2009, 20:07

Juul K het gaat niet om de inhoud dit moet gewoon volgens de opdracht ;)

jhaagmans, is dit op dit moment dan niet juist? ik heb voor elk apart vak een container aangemaakt.

**Jeroen Kamphuis** · 06-11-2009, 20:12

hmm heb je hem al in firefox bekeken?

**Ronnie Koestering** · 06-11-2009, 20:13

Bij mij in firefox is hij goed op de 2 onderste tekstvakken na niet, maar ga ik mijn pagina minimaliseren dan verschuift alles.

Graag alleen reacties die een nuttige bijdragen leveren, dus niet zoiets als heb je dit gezien maar wel iets dat een bijdrage levert.

**Jeroen Kamphuis** · 07-11-2009, 13:47

De plaatjes verschuiven omdat de width van je wrapper op auto staat geloof ik. Het kan ook komen omdat je heel veel dingen een margin 0 auto mee geeft wat je het beste kan doen is een div om je site heen doen dus echt de container div die om je hele site staat. Dus <body><div id="container"> en het isook weer de laatste div die jafsluit dus </div></body> deze container div geef je dan de margin 0 auto en geef je een bepaalde breedte, de breedte van je website. En dan zou het niet meer moeten gebeuren.

**Ronnie Koestering** · 07-11-2009, 16:19

voor zover ik kan zien is het nu al iets beter, alleen vraag ik me nog af hoe ik dat het beste kan doen met het "Het laatste nieuws"

<div id="nieuws-container">
<div class="nieuws" id="boven">Het laaste nieuws</div>
<div class="nieuws-1" id="midden">Lorem Ipsum is simply dummy text of the printing and typesetting. - <a href="#">59 keer gelezen</a></div>
<div class="nieuws-2" id="midden">Lorem Ipsum is simply dummy text of the printing and typesetting. - <a href="#">59 keer gelezen</a></div>
<div class="nieuws-3" id="midden">Lorem Ipsum is simply dummy text of the printing and typesetting. - <a href="#">59 keer gelezen</a></div>
<div class="nieuws-4" id="midden">Lorem Ipsum is simply dummy text of the printing and typesetting. - <a href="#">59 keer gelezen</a></div>
<div class="nieuws-5" id="midden">Lorem Ipsum is simply dummy text of the printing and typesetting. - <a href="#">59 keer gelezen</a></div>
<div class="nieuws-6" id="midden">Lorem Ipsum is simply dummy text of the printing and typesetting. - <a href="#">59 keer gelezen</a></div>
<div class="nieuws-7" id="midden">Lorem Ipsum is simply dummy text of the printing and typesetting. - <a href="#">59 keer gelezen</a></div>
<div class="nieuws-8" id="midden">Lorem Ipsum is simply dummy text of the printing and typesetting. - <a href="#">59 keer gelezen</a></div>
<div class="nieuws-9" id="midden">Lorem Ipsum is simply dummy text of the printing and typesetting. - <a href="#">59 keer gelezen</a></div>
<div class="nieuws-10" id="midden">Lorem Ipsum is simply dummy text of the printing and typesetting. - <a href="#">59 keer gelezen</a></div>
<div class="nieuws-11" id="onder">Lorem Ipsum is simply dummy text of the printing and typesetting. - <a href="#">59 keer gelezen</a></div>
<div class="clear"> </div>
</div>

#nieuws-container {
font: Arial;
font-size: 11px;
color: #878787;
padding: 5px;
display:block;
width:444px;
height:232px;
margin:0px auto 0px;
}
.nieuws {
float: left;
margin: -699px 0 0 249px;
}
.nieuws-1 {
float: left;
margin: -676px 0 0 249px;
}
.nieuws-2 {
float: left;
margin: -657px 0 0 249px;
}
.nieuws-3 {
float: left;
margin: -638px 0 0 249px;
}
.nieuws-4 {
float: left;
margin: -619px 0 0 249px;
}
.nieuws-5 {
float: left;
margin: -600px 0 0 249px;
}
.nieuws-6 {
float: left;
margin: -581px 0 0 249px;
}
.nieuws-7 {
float: left;
margin: -562px 0 0 249px;
}
.nieuws-8 {
float: left;
margin: -543px 0 0 249px;
}
.nieuws-9 {
float: left;
margin: -524px 0 0 249px;
}
.nieuws-10 {
float: left;
margin: -505px 0 0 249px;
}
.nieuws-11 {
float: left;
margin: -486px 0 0 249px;
}
#boven {
background: url(../images/nieuws_titel.png) no-repeat;
height: 18px;
width: 444px;
font-weight: bold;
padding: 5px 0 0 10px;
}
#midden {
background: url(../images/nieuws_balk.jpg) no-repeat;
height: 16px;
width: 444px;
padding: 3px 0 0 10px;
}
#onder {
background: url(../images/nieuws_onderstebalk.png) no-repeat;
height: 22px;
width: 444px;
padding: 2px 0 0 10px;
}

Ik weet zeker dat het veel makkelijker kan, maar hoe

**Jeroen Kamphuis** · 07-11-2009, 18:41

Een list gebruikendus:
<ul>
<li></li>
etc...
</ul>

**Ronnie Koestering** · 07-11-2009, 19:29

Ik heb echt geen idee hoe ik dat kan doen, want dan krijg je toch je menu? En aangezien mijn onderste balk rond is bestaat het laatste nieuws uit drie verschillende plaatjes.

**Jeroen Kamphuis** · 07-11-2009, 19:45

wil je dan dat die balk breder kan worden? als je dat niet wil kan je toch gewoon zeggen ik wil hem helemaal als een achtergrond dus dan maak je 1 standaard li item die de meeste ngebruiken en eentje .onder en die geef je dan <li class="onder></li> en li is geen menu maar een list een lijst met dingen die alles makkelijk voor jerangschikt, maar als ik jouw was zou ik kijken of je dit niet uit kunt besteden aan een hobbyist of iemand die het voor gratis wil doen;)

**Ronnie Koestering** · 07-11-2009, 20:27

Ja natuurlijk kan ik dit wel laten doen, maar dan leer ik er zelf ook niks van

**Jeroen Kamphuis** · 07-11-2009, 20:34

Dan zou ik leren slicen;)

Plaatjes verschuiven bij minimaliseren van de website