Wanneer ga ik divs nu wel begrijpen?

Alles over computers, websites en software voor camera en PC.

ModeratorCOLON Global Moderators

Forumregels
In dit (sub)forum gelden aanvullende huisregels.
Gebruikers-avatar
fotojeroen
CanonSuperTrooper
CanonSuperTrooper
BerichtenCOLON 22137
GeregistreerdCOLON 13 Jan 2005 11:57
WoonplaatsCOLON Wolluk

Het is weer eens zo ver.
Ik ben weer bezig met een nieuwe variant op de site, gewoon voor aanvang van het nieuwe voetbalseizoen.

De gewone pagina's gaan wel goed, maar zodra een pagina langer wordt, kom ik in de problemen.
Standaard heeft een pagina een bepaalde hoogte die prima voldoet (zoals hier). Maar zodra die inhoud vele malen hoger wordt dan een enkele foto gaat het mis: zie hier.

Het gaat dan mis omdat er een standaard lege regel bovenkomt. De footer staat niet onder de onderste div, maar er net in. En tot slot loopt de achtergrond ook weer niet door.

Ik ben aan het zoeken geweest en aan het klooien, maar ik snap er iedere keer maar weinig van. Nu heb ik als css op gebied van divs het volgende:

CodeCOLON Alles selecteren

div.container {
background-image:url("http://www.fotojeroen.nl/grafisch/css_achtergrond.png");
position: relative;
width:1000px;
margin:0px auto;
}
 
div.logo {
width:400px;
height: 110px;
position: absolute;
top: 25px;
left: 10px;
} 
 
div.menu {
width: 400px;
height: 110px;
position: absolute;
top: 40px;
right: 10px;
}
 
div.tekst {
width: 960px;
position: relative;
top: 130px;
left: 20px;
}
 
div.footer {
width: 900px;
height: 35px;
text-align: center;
left: 50px;
}
D'r zal ongetwijfeld geen bal van kloppen, maar wie kan me (weer eens) helpen?
Ik ben Commandeur in de orde van de Gulden Snede :D :D
Gebruikers-avatar
van den Berg
Canon shooter+
Canon shooter+
BerichtenCOLON 658
GeregistreerdCOLON 27 Nov 2008 19:25

probeer de footer ook een top: 130px; mee te geven
Gebruikers-avatar
fotojeroen
CanonSuperTrooper
CanonSuperTrooper
BerichtenCOLON 22137
GeregistreerdCOLON 13 Jan 2005 11:57
WoonplaatsCOLON Wolluk

Nee, dat zou niet werken omdat dat de footer 130 pixels van de bovenrand zou zetten
Ik ben Commandeur in de orde van de Gulden Snede :D :D
Gebruikers-avatar
boels069
Redacteur
Redacteur
BerichtenCOLON 20267
GeregistreerdCOLON 04 Dec 2005 09:52
WoonplaatsCOLON Almere

Ik zocht naar het bestaan van een CSS/DIV checker en niet gevonden :shock:
Vreemd, omdat ze wel weelderig aanwezig zijn voor C, C++, C#, enz.

Weet iemand van het bestaan van zo'n checker af?

Kwam wel deze tegen (waarschijnlijk oude koek):
http://www.devarticles.com/c/a/Web-Styl ... -with-CSS/" onclick="window.open(this.href);return false;
Mijn fiets spoort beter dan ik.
infoleo
Canon shooter
Canon shooter
BerichtenCOLON 50
GeregistreerdCOLON 14 Jul 2008 12:49
WoonplaatsCOLON zoetermeer
CONTACTCOLON

Jeroen, waarom staat elke foto in een nieuwe tabel? Dat is toch helemaal niet nodig, tevens heb je in je css geen defenities voor je tabellen staan, waardoor de verschillende brouwsers er elk op hun eigen manier mee om gaan.
infoleo
Canon shooter
Canon shooter
BerichtenCOLON 50
GeregistreerdCOLON 14 Jul 2008 12:49
WoonplaatsCOLON zoetermeer
CONTACTCOLON

p.s. wanneer je "overfow:no" gebruikt in je div dan komt er geen info overheen
Gebruikers-avatar
fotojeroen
CanonSuperTrooper
CanonSuperTrooper
BerichtenCOLON 22137
GeregistreerdCOLON 13 Jan 2005 11:57
WoonplaatsCOLON Wolluk

infoleo schreefCOLONJeroen, waarom staat elke foto in een nieuwe tabel? Dat is toch helemaal niet nodig, tevens heb je in je css geen defenities voor je tabellen staan, waardoor de verschillende brouwsers er elk op hun eigen manier mee om gaan.
1 ding tegelijk.
Eerst maar eens zorgen dat de layout klopt, dan kijken we verder. :wink:
Ik ben Commandeur in de orde van de Gulden Snede :D :D
infoleo
Canon shooter
Canon shooter
BerichtenCOLON 50
GeregistreerdCOLON 14 Jul 2008 12:49
WoonplaatsCOLON zoetermeer
CONTACTCOLON

de lay-out klopt niet mede doordat je elke keer een nieuwe tabel begint, daar krijg je telkens een blanco regel van.
Gebruikers-avatar
fotojeroen
CanonSuperTrooper
CanonSuperTrooper
BerichtenCOLON 22137
GeregistreerdCOLON 13 Jan 2005 11:57
WoonplaatsCOLON Wolluk

Als ik de tables eruit gooi, dan klopt het ook niet.
Ik ben Commandeur in de orde van de Gulden Snede :D :D
infoleo
Canon shooter
Canon shooter
BerichtenCOLON 50
GeregistreerdCOLON 14 Jul 2008 12:49
WoonplaatsCOLON zoetermeer
CONTACTCOLON

je kunt er 1 tabel van maken in plaats van voor elke foto een nieuwe.
infoleo
Canon shooter
Canon shooter
BerichtenCOLON 50
GeregistreerdCOLON 14 Jul 2008 12:49
WoonplaatsCOLON zoetermeer
CONTACTCOLON

Voor wat betreft de rest van de lay-ou:

het logo staat te ver naar links, hij vat net over je omlijning heen.
Net als het eerste stukje tekst.
Dus je margin-left is niet voldoende.
Gebruikers-avatar
fotojeroen
CanonSuperTrooper
CanonSuperTrooper
BerichtenCOLON 22137
GeregistreerdCOLON 13 Jan 2005 11:57
WoonplaatsCOLON Wolluk

Maar ook zonder tabellen, wat straks best moet kunnen, werkt het niet.
Als ik de pagina aanpas dat er alleen wat tekst en 2 foto's tussen staan (dus zonder tabellen) dan klopt er ook geen bal van. Kijk nu maar eens. Ook zwart balkje erboven en een rommeltje onderin: #
Ik ben Commandeur in de orde van de Gulden Snede :D :D
Anakin239
Shooter
Shooter
BerichtenCOLON 15
GeregistreerdCOLON 01 Mrt 2011 21:33

Als ik je laatste pagina als volgt aanpas dan heb je voldoende ruimte voor je footer en ziet het goed uit. Weet niet zeker hoe het gaat met meerdere foto's maar dat kan je dan even bekijken.

div.footer {
width: 900px;
height: 35px;
text-align: center;
left: 50px;
position: relative;
top: -25px;
}

div.tekst {
width: 960px;
position: relative;
top: 130px;
left: 20px;
padding-bottom: 150px;
}
Canon 550D, Sigma 17-70mm 2.8-4 HSM OS, Canon 70-300mm 4-5.6 IS, Canon 50mm 1.8, Metz 48F, Sun-Sniper steel
Gebruikers-avatar
fotojeroen
CanonSuperTrooper
CanonSuperTrooper
BerichtenCOLON 22137
GeregistreerdCOLON 13 Jan 2005 11:57
WoonplaatsCOLON Wolluk

ok, dank je. Dit werkt inderdaad aan de onderkant. Dat stukje zwart eronder boeit me op zich weinig.
Dat ene regeltje zwart bovenin daarentegen....
Ik ben Commandeur in de orde van de Gulden Snede :D :D
Anakin239
Shooter
Shooter
BerichtenCOLON 15
GeregistreerdCOLON 01 Mrt 2011 21:33

In je body
je margin-top:-10px dan is die ook weg.
Canon 550D, Sigma 17-70mm 2.8-4 HSM OS, Canon 70-300mm 4-5.6 IS, Canon 50mm 1.8, Metz 48F, Sun-Sniper steel
infoleo
Canon shooter
Canon shooter
BerichtenCOLON 50
GeregistreerdCOLON 14 Jul 2008 12:49
WoonplaatsCOLON zoetermeer
CONTACTCOLON

als je dit in je css zet?

body{
margin:0;
padding:0;
font-size:13px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
}
Gebruikers-avatar
fotojeroen
CanonSuperTrooper
CanonSuperTrooper
BerichtenCOLON 22137
GeregistreerdCOLON 13 Jan 2005 11:57
WoonplaatsCOLON Wolluk

Margin:0; en padding:0; staan beide al in de body. Margin-top: -10px; veranderd niets aan de zaak
Ik ben Commandeur in de orde van de Gulden Snede :D :D
infoleo
Canon shooter
Canon shooter
BerichtenCOLON 50
GeregistreerdCOLON 14 Jul 2008 12:49
WoonplaatsCOLON zoetermeer
CONTACTCOLON

De body stond niet in je eerste post css als ik dat erin zet doen allebei de pagina's het bij mij op de pc.
Anakin239
Shooter
Shooter
BerichtenCOLON 15
GeregistreerdCOLON 01 Mrt 2011 21:33

Als je je achtergrond plaatje aanpast dat het een dun plaatje van 1 pixel hoog is maar wel de hele breedte van je pagina dan kan je hem in de body zetten en ben je zowel het zwart boven als onder kwijt.
Canon 550D, Sigma 17-70mm 2.8-4 HSM OS, Canon 70-300mm 4-5.6 IS, Canon 50mm 1.8, Metz 48F, Sun-Sniper steel
Gebruikers-avatar
fotojeroen
CanonSuperTrooper
CanonSuperTrooper
BerichtenCOLON 22137
GeregistreerdCOLON 13 Jan 2005 11:57
WoonplaatsCOLON Wolluk

Het enige stukje code wat ik in de openingspost heb gegeven is de css van de divs.
De rest vond ik niet zo relevant (wat maakt het voor dit probleem uit hoe ik mijn links kleur :D)
Ik ben Commandeur in de orde van de Gulden Snede :D :D
BUTTON_POST_REPLY

Terug naar