CSS hulp nodig. Kolom rechtsboven positioneren

Hallo allemaal, Eindelijk heb ik dan de stap gezet en heb me in de CSS gedrenkt. Met wat knip en plakwerk, de nodige tutorials en heel wat uurtjes trial&error begint het er aardig op te lijken. De tabellen & frames (:D ) zijn al bijna uit mijn hoofd verdwenen.

Een dingetje lukt me niet en daarom roep ik jullie hulp in; ik heb een site met een header, een menu, een contentgedeelte en een kolom rechts in dat contentgedeelte. Maar nu wil ik graag dat die kolom rechtsboven tegen het menu aansluit. Dat lukt me niet. Er zitten nu een paar pixels tussen het menu en de header van de kolom, dat is niet mooi. Heeft iemand misschien een idee? Ik heb al alle mogelijke top-margins/paddings etc. op 0 gezet. Maar niets…

Dit is de site: http://www.esthermols.net/clients/steef/
en de stylesheet: http://www.esthermols.net/clients/steef/steef.css

Alleen de eerste 2 pagina’s doen het nog maar; home en houtsoorten.

O ja, nu ik toch bezig ben. Ook zou ik graag het menu ietsje naar links willen, dus dat het menu gecentreerd is maar dan t.o.v. het contentgedeelte. Nu staat de button “Contact” halverwege boven de rechterkolom. Dat vind ik niet zo mooi. Heeft iemand daar misschien ook een tip voor?

Verder zie je bij de houtsoorten een pagina met thumbnails. De bedoeling is dat je daar straks op klikt en dat er dan een grotere foto verschijnt met meer info (prijs, houtsoort etc.). Ik zou dat uit gewoonte in Flash of met Javascript (popup) doen. Maar is er ook een CSS mogelijkheid? Ik heb er eentje gevonden maar dan krijg je gewoon een nieuw browserwindow met een grotere foto. Dat vind ik lelijk. Het liefst zou ik er een layer overheen hebben ofzo. Maar dan krijg ik waarschijnlijk browser moeilijkheden, of niet? Iemand?

Alvast veel dank!

en je emailadres :P

als ik je een tip mag geven? Bekijk onze showroom is mooier als daar helemaal zo'n kadertje omheen komt. Dit komt me namelijk nogal raar over. Verder een prachtige site.

peitsnot: Hoe bedoel je e-mailadres?

En formulefan: ik zie geen kadertje in jou showroom? Maar bedoel je een kadertje om die kolom heen? Ik zou die kolom inderdaad het liefst 100% hoog willen met een border eromheen, maar ook dat lukt me niet…

dit ziet er helemaal niet slecht uit :D in tegendeel zelfs: hijs mooi :D

e-mail adres zou ik nooit als echte link inbouwen. Dat is vragen om spam. Plaatje van maken. Misschien het bekijken waard voor onze andere sitecheck vandaag. Nog een met parket :D, en deze is wel netjes.

[quote:42dc98676f="Martiniman"]e-mail adres zou ik nooit als echte link inbouwen. Dat is vragen om spam. Plaatje van maken. Misschien het bekijken waard voor onze andere sitecheck vandaag. Nog een met parket :D, en deze is wel netjes.[/quote:42dc98676f]

Dit allen was niet haar vraag he??

Es, voor de vergroting van je thumbnail is LIGHTBOX JS precies wat je zoekt:

http://www.huddletogether.com/projects/lightbox/

en als je meer dan alleen een foto wilt, bijvoorbeeld ook text neem je LIGHTBOX GONE WILD:

http://particletree.com/features/lightbox-gone-wild/

Zowel lightbox als Lightbox Gone Wild werkt in IE/FF/Safari.

Voeg aan #hnav ul in je CSS margin-bottom : 0 toe.

Overigens is de #hnav als aparte div overbodig, je kan ook gewoon de <ul> een id geven en deze stijlen.
Waar je nu tegenaan loopt is dat je <ul> als het ware leeg is omdat alle elementen binnen je <ul> gefloat worden. Als je alle <li>'s float worden ze als het ware uit het parent-element getild. Om er voor te zorgen dat je <ul> als nog werkt (dus dat bijvoorbeeld de achtergrond kleur wordt weergegeven die je op de <ul> zet) is er een methode die ‘easyclearing’ heet.

In het volgende artikel kan je lezen hoe het allemaal werkt:
http://www.positioniseverything.net/easyclearing.html

Meer over floats:
http://www.complexspiral.com/publications/containing-floats/

[quote:92086df9f7="tennapel"]Voeg aan #hnav ul in je CSS margin-bottom : 0 toe.[/quote:92086df9f7]

Zo simpel en inderdaad opgelost! Dat soort “trucjes” moet ik echt nog leren.
Wat betreft het float-verhaal; ik had deze gelezen http://css.maxdesign.com.au/floatutorial/index.htm Ik ga je suggesties ook doornemen. Want dat floaten met die ul’s en li’s gaat me nog iets boven mijn pet. Ik begrijp de logica er nog niet van.

Maar in iedergeval dank voor de reacties!

Nog 1 dingetje; weet iemand hoe ik de rechterkolom op 100% lengte krijg? Als ik de height van de box op 100% zet gebeurt er niets. Of althans, hij is natuurlijk al 100%, afhankelijk van de hoeveelheid tekst in de kolom.

[quote:0a60e25dc2="tennapel"] Overigens is de #hnav als aparte div overbodig, je kan ook gewoon de <ul> een id geven en deze stijlen.[/quote:0a60e25dc2]

Dat heb ik geprobeerd maar als ik dit

[code:1:0a60e25dc2]<div id="hnav">
<ul>
<li id="active"><a href="#">HOME</a></li>
<li><a href="houtsoorten.html" target="_self">HOUTSOORTEN</a></li>
<li><a href="#">ONDERHOUD</a></li>
<li><a href="#">SHOWROOM</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>[/code:1:0a60e25dc2]

verander in dit:

[code:1:0a60e25dc2]
<ul id="hnav">
<li id="active"><a href="#">HOME</a></li>
<li><a href="houtsoorten.html" target="_self">HOUTSOORTEN</a></li>
<li><a href="#">ONDERHOUD</a></li>
<li><a href="#">SHOWROOM</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
[/code:1:0a60e25dc2]

dan krijg ik een gewone lijst met bullets…? Wat doe ik dan fout?

je css is nu gedeclareerd als [code:1:5f63310999]#hnav ul[/code:1:5f63310999] Integreer de css van '#hnav ul' in die van '#hnav ul' en verwijder '#hnav ul'. Overal waar nu '#hnav ul' staat moet je het 'ul' gedeelte weghalen.

[quote:aa5c57a72c="tennapel"]je css is nu gedeclareerd als [code:1:aa5c57a72c]#hnav ul[/code:1:aa5c57a72c] Integreer de css van [b:aa5c57a72c]'#hnav ul' [/b:aa5c57a72c] in die van [b:aa5c57a72c]'#hnav ul'[/b:aa5c57a72c] en verwijder '#hnav ul'. Overal waar nu '#hnav ul' staat moet je het 'ul' gedeelte weghalen.[/quote:aa5c57a72c]

Bedoel je “Integreer de css van [b:aa5c57a72c]’#hnav ul’[/b:aa5c57a72c] in die van [b:aa5c57a72c]’#hnav’[/b:aa5c57a72c] en verwijder ‘#hnav ul’.”?

EDIT: Tennapel, laat maar. Ik heb een andere nav genomen. Eentje van Listamatic. Ik snap nu wat je bedoelde. Toch bedankt!

[quote:aa5c57a72c=“rutgerz”]Es, voor de vergroting van je thumbnail is LIGHTBOX JS precies wat je zoekt:

http://www.huddletogether.com/projects/lightbox/

en als je meer dan alleen een foto wilt, bijvoorbeeld ook text neem je LIGHTBOX GONE WILD:

http://particletree.com/features/lightbox-gone-wild/

Zowel lightbox als Lightbox Gone Wild werkt in IE/FF/Safari.[/quote:aa5c57a72c]

En ik kom net deze tegen; http://cssplay.co.uk/menu/gallery.html

ah, die is ook tof. FF gebookmarkt. Maar als ik afga op je openingspost zocht je iets als Lightbox, dat leek me ook bij je thumbs te passen. Wat ga je nu gebruiken?

[quote:9ae1753aed="rutgerz"]ah, die is ook tof. FF gebookmarkt. Maar als ik afga op je openingspost zocht je iets als Lightbox, dat leek me ook bij je thumbs te passen. Wat ga je nu gebruiken?[/quote:9ae1753aed]

Ja klopt, heb je gelijk in. Ik moet nog even kijken welke het gaat worden.