Pagina-hoogte...

Status
Niet open voor verdere reacties.
zet de background image op de body en haal de 100% height van .bg af.

zet daarna je content in een <div></div> en geeft die een margin: 0 auto; en de breedte die het moet zijn. Dan moet je vervolgens alle position: absolute van de elementen afhalen (footer bv.)


dan kom je al een heel eind
 
Thanks man, daar ga ik mee aan de slag!

Ik dacht dat ik het soort-van in orde had, want op de home-page issie wel goed:
http://www.nathalievisagie.nl/test/index.php

Die verschuiving komt op 1 of andere manier door die thumb-afbeeldingen, want alleen op die pagina's is het. (opleiding, portfolio)

Maar... Ik ga met je comment aan de slag... Thanks again.

Leter!
 
Als je problemen hebt met je divjes,
plaats er een border rond.
Krijg je dus deze style:

.opleiding3 {
width: 460px;
height: 440px;
padding: 5px;
margin-top: 20px;
background-color: #000000;
z-index: 49;
border:solid 2px #dddd00;
}

En dan zie je waar de "fout" zit.

:cool:
 
Hi Peter,

Bedankt voor je reactie, maar ik ben er nog niet uit.
Zodra ik die border eromheen zet, plaatst hij de opl3 ONDER de opl2 (opl2 is het zwarte vlak met de thumbs) Dit komt waarschijnlijk omdat hij met border te breed is voor de div main. Kan ik hem smaller maken, dan blijft hij inderdaad rechts staan, maar nog steeds is er een scroll-balk... And I don't get it! :confused:

Any advise? Anyone? please?

Thanx,

Martijn
 
Kee, ik heb het opgelost.

Er moest een "overflow: hidden" in mijn contentdiv

Toch bedankt voor de hulp!

Martijn
 
Ik heb nog even naar je code gekeken, maar wat me opvalt is dat je een aantal dingen doet die helemaal niet nodig zijn. Dit zijn namelijk css hacks op bepaalde rare onverspelbaar gedragingen van css die je niet had hoeven gebruiken.

Ik gaf volgens mij in een eerdere repy aan dat je je content div "<div class="content">"
moet aan passen zonder een position absolute en zonder hoogte:
.content {style.css (regel 30)
margin: 0 auto;
width:702px;
}
Kijk eens aan dat scheelt nogal ;)

class main heeft een "float: left". waarom? zoals ik het zie hoeven je header, menu, main, footer allemaal geen float: left te hebben.

doordat je geen float zet zullen de divjes de volledige breedte benutten.. dus je hoeft alleen expliciet de breedte te zetten van een element wat kleiner is. en als je alle elementen in het content divje kleiner wilt hebben met 5px aan beide kanten... zet dan een padding op je content div ;)

waarom zet je een letter-spacing?


Ik hoop dat ik je hiermee nog wat meer geholpen heb.

[edit ]
he he... eindelijk ik heb het gevonden. Het niet tonen van een element (fotos in dit geval) doe je met visibility: hidden. Dit haalt het element niet uit de pagina flow. Dit zorgt voor die lange scrollbalk! Wat je moet doen is display: none; gebruiken in bijvoorbeeld dit element: .thumbnail span {

success ermee
[/ edit]
 
Laatst bewerkt:
Thanx. Je hebt me zeker verder geholpen. Sommige dingen begin ik zowaar te snappen...:confused:

Nu alleen nog de foto in het zwarte blok... Ik heb al wat ge-experimenteerd met "position" hier en daar, maar dan gebeuren er heeeele rare dingen :)

En op 1 of andere manier staat de boel niet meer in het midden. Maar daar kijk ik later wel naar. Eerst die foto... Ik kan het niet vinden...
 
daar zou ik nog even naar kijken ik laat het je morgen anders wel even weten
 
Nou heb ik met jullie hulp zo'n beetje alles opgelost en weer wat geleerd. Mijn dank daarvoor!

Maaar.... Ik heb nog steeds een issue met de positie van een afbeelding.

http://www.nathalievisagie.nl/test/opleiding_v.php

De grote afbeelding moet dus gecentreerd in het grote zwarte vlak komen...

Wie helpt me op weg?

Thanx!

HTML: 
<body>
<div class="content">
<div class="header"></div>
<div class="menu"> <? include "menu.php" ?> </div>
<div class="main">
<div class="opleiding1"></div>
<div class="opleiding2">
<a class="thumbnail" href="#thumb"><img src="images/fotos/thumb1.gif" width="65px" height="65px" border="0" alt="-"/><span><img alt="" src="images/fotos/foto1.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/fotos/thumb1.gif" width="65px" height="65px" border="0" alt="-"/><span><img alt="" src="images/fotos/foto1.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/fotos/thumb1.gif" width="65px" height="65px" border="0" alt="-"/><span><img alt="" src="images/fotos/foto1.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/fotos/thumb1.gif" width="65px" height="65px" border="0" alt="-"/><span><img alt="" src="images/fotos/foto1.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/fotos/thumb1.gif" width="65px" height="65px" border="0" alt="-"/><span><img alt="" src="images/fotos/foto1.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/fotos/thumb1.gif" width="65px" height="65px" border="0" alt="-"/><span><img alt="" src="images/fotos/foto1.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/fotos/thumb1.gif" width="65px" height="65px" border="0" alt="-"/><span><img alt="" src="images/fotos/foto1.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/fotos/thumb1.gif" width="65px" height="65px" border="0" alt="-"/><span><img alt="" src="images/fotos/foto1.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/fotos/thumb1.gif" width="65px" height="65px" border="0" alt="-"/><span><img alt="" src="images/fotos/foto1.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/fotos/thumb1.gif" width="65px" height="65px" border="0" alt="-"/><span><img alt="" src="images/fotos/foto1.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/fotos/thumb1.gif" width="65px" height="65px" border="0" alt="-"/><span><img alt="" src="images/fotos/foto1.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/fotos/thumb1.gif" width="65px" height="65px" border="0" alt="-"/><span><img alt="" src="images/fotos/foto1.jpg" /></span></a>
</div>
<div class="opleiding3"></div>
</div>
<div class="footer"></div>
</div>
</body>

CSS:
Code: 
.thumbnail img { margin: 0 5px 5px 0; }
.thumbnail:hover {  }
.thumbnail:hover img {  }
.thumbnail span { position: absolute; visibility: hidden; display: none; }  
.thumbnail span img {  }
.thumbnail:hover span { position: absolute; top: 10px; left: 10px; visibility: visible; z-index: 50; display: block; }

Het komt vast door de "position: absolute". Ik heb al een tijdje zitten experimenteren, maar wat ik ook probeer... no luck...
 
position:absolute betekent dat de coördinaten die je opgeeft ook daadwerkelijk de positie is van je element. Het is alsof je de X en Y coördinaten geeft, alleen heten ze left en top (en een hogere Y/top betekent een lagere positie).

Je hebt hier left:10px en top:10px. Dus het element staat 10 pixels naar rechts (ruimte aan de linkerkant dus het element gaat naar rechts) en 10 pixels naar onder de linkerbovenhoek van de body. Probeer eens left:701px en top:207px.

Overigens is het iets ingewikkelder dan wat ik net zei. De coördinaten van een element wat je absoluut positioneert zijn relatief aan de eerste parent (of parent's parent etc) die absoluut of relatief is gepositioneerd.

Dus als je dit hebt:
[position:relative]
[position:absolute;left:10px;right:10px;]
[/position:relative]

dan staat het absoluut gepositioneerde element 10 pixels van de linkerkant van het relatief gepositioneerde element en 10 pixels van de bovenkant. Dit werkt ook zo met absoluut gepositioneerde elementen in andere absoluut gepositioneerde elementen.

In jouw specifieke geval staan de plaatjes niet in een ander relatief of absoluut gepositioneerd element dus zijn de left en top coördinaten vanaf de links-boven van het hele document (eigenlijk de body om precies te zijn).



(nog even iets wat ook handig is om te weten: )
Als je een element relatief positioneert dan schuift het op vanaf zijn originele positie. "position:relative; left:10px; top10px;" zou het element dus 10 pixels naar beneden schuiven en 10 naar links vanaf de plek waar het element zou staan als je niks emt de positie deed.
 
Laatst bewerkt:
Sorry voor de late reactie, maar...

Thanx all!

Al mijn issues zijn opgelost en ik ben iets wijzer geworden!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan