Thread: html in html met css
-
10-09-2011, 21:21 #1Member
- Registered
- 30/01/04
- Location
- laakdal
- Posts
- 212
- iTrader
- 1 (67%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
html in html met css
Hallo,
Ik zit vast met mijn website, ik heb de header en de achtergrond al kunnen maken en positioneren en dergelijke met css. Maar nu wil ik een menu onder mijn header maar ik weet niet hoe ik dit moet aanpakken, ik heb een menubalk gemaakt met photoshop en gesliced en dergelijke en opgeslagen als html en images, maar het probleem is hoe kan ik dit laten zien onder mijn header?
Is er een andere manier om dit op te lossen of doe ik het totaal verkeerd?
Dank bij voorbaat
jakkeno votes
-
-
10-09-2011, 21:27 #2Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Toon alvast eens wat ge al hebt zodat we daar op verder kunnen bouwen of zeggen hoe het anders moet.
no votes
-
10-09-2011, 21:32 #3Member
- Registered
- 30/01/04
- Location
- laakdal
- Posts
- 212
- iTrader
- 1 (67%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
ok zal het ergens uploaden
no votes
-
10-09-2011, 21:59 #4Member
- Registered
- 30/01/04
- Location
- laakdal
- Posts
- 212
- iTrader
- 1 (67%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
Untitled Document dit is wat ik al heb, trekt nergens op maar het is maar om alles onder de knie te krijgen, nu wil ik mijn menu onder de header en daar onder de content en dergelijke

vooral het tekenen in photoshop en dergelijke wil ik onder de knie krijgen maar dat zal wel komen
no votes
-
10-09-2011, 22:06 #5Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Om te beginnen kunt ge altijd best een omringende div gebruiken, een container. En van daaruit zijn het gewoon blokken die ge onder en naast elkaar legt.
Het hoeft ook niet altijd een div te zijn. Uw header kan in sommige gevallen ook een h-element zijn en een menu bouwen we op uit een lijst (best practice en semantisch sterk).Code:<div id="container"> <div id="header"> </div> <ul id="nav"> </ul> <div id="sidebar"> </div> <div id="content"> </div> </div>
De sidebar is maar een voorbeeldje, kan dus ook perfect zonder.no votes
-
10-09-2011, 22:23 #6Member
- Registered
- 30/01/04
- Location
- laakdal
- Posts
- 212
- iTrader
- 1 (67%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
ok heb het gekopieërd en geplakt en heb die sidebar verwijderd, mijn menu staat op Untitled-2 hoe kan ik er voor zorgen dat ik dit onder mijn header kan laten zien, woorden als link maken en dergelijke is geen probleem, ben nog bezig met een mouseover img te tekenen
no votes
-
10-09-2011, 22:41 #7Member
- Registered
- 19/06/11
- Location
- Hasselt
- Posts
- 934
- iTrader
- -3 (0%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/5
no offence maar eh.... ge begint nog maar aan uw site bouwen en al zo veel vragen?
... misschien toch eens ergens een tutorial/boek gaan zoeken over webdesign (:?Nobody notices what I'm doing ... Until I stop doing it.
Webhosting ? Klik hierno votes
-
10-09-2011, 22:44 #8Member
- Registered
- 30/01/04
- Location
- laakdal
- Posts
- 212
- iTrader
- 1 (67%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
heb html en css voor dummies, webdesign voor dummies en php en mysql voor dummies, maar vindt er niets aan :o
no votes
-
10-09-2011, 23:32 #9Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Voorbeeld:
CSSHTML Code:<div id="menuwrapper"> <ul id="menulist"> <li><a href="/index.php" title="Start" id="start"><span>De Notenbalkers</span></a></li> <li><a href="/wiezijnwij.php" title="Wie zijn wij" id="wiezijnwij"><span>Wie zijn wij</span></a></li> <li><a href="/nieuws.php" title="Nieuws" id="nieuws"><span>Nieuws</span></a></li> <li><a href="/kalender.php" title="Kalender" id="kalender"><span>Kalender</span></a></li> <li><a href="/showavond.php" title="Showavond" id="showavond"><span>Showavond</span></a></li> <li><a href="/media.php" title="Media" id="media"><span>Media</span></a></li> <li><a href="/contact.php" title="Contacteer ons" id="contact"><span>Contact</span></a></li> </ul> </div>
Hier heb ik dus gewerkt met een sprite (een enkele afbeelding waarin heel het menu staat én de hoverstates). Met background-image werken ipv HTML-img is imo het beste en dan kan je gebruik maken van css sprites en verminder je aanzienlijk die load. (Google 'css sprite')Code:#menuwrapper { height: 65px; background-image: url(/files/template/1280+/menubg.png); background-repeat: repeat-x; } #menulist { list-style: none; margin: 0; padding: 0; width: 804px; margin-right: auto; margin-left: auto; margin-top: 0; margin-bottom: 0; } #menulist li { display: inline-block; float: left; width: auto; } #menulist li a { display: inline-block; float: left; border: 0px none #FFF; } #menulist a span { position: absolute; top: -10000px; } /*buttons*/ /*start button*/ #menulist #start { width: 203px; height: 65px; display: block; background-image: url(/files/template/1280+/menubalkfull.png); background-repeat: no-repeat; background-position: left top; } #menulist #start:hover { background-position: left bottom; } /*wie zijn wij button*/ #menulist #wiezijnwij { width: 115px; height: 65px; display: block; background-image: url(/files/template/1280+/menubalkfull.png); background-repeat: no-repeat; background-position: -203px top; } #menulist #wiezijnwij:hover { background-position: -203px bottom; } /*nieuws button*/ #menulist #nieuws { width: 86px; height: 65px; display: block; background-image: url(/files/template/1280+/menubalkfull.png); background-repeat: no-repeat; background-position: -318px top; } #menulist #nieuws:hover { background-position: -318px bottom; } /*kalender button*/ #menulist #kalender { width: 105px; height: 65px; display: block; background-image: url(/files/template/1280+/menubalkfull.png); background-repeat: no-repeat; background-position: -404px top; } #menulist #kalender:hover { background-position: -404px bottom; } /*showavond button*/ #menulist #showavond { width: 121px; height: 65px; display: block; background-image: url(/files/template/1280+/menubalkfull.png); background-repeat: no-repeat; background-position: -509px top; } #menulist #showavond:hover { background-position: -509px bottom; } /*media button*/ #menulist #media { width: 76px; height: 65px; display: block; background-image: url(/files/template/1280+/menubalkfull.png); background-repeat: no-repeat; background-position: -630px top; } #menulist #media:hover { background-position: -630px bottom; } /*contact button*/ #menulist #contact { width: 98px; height: 65px; display: block; background-image: url(/files/template/1280+/menubalkfull.png); background-repeat: no-repeat; background-position: -706px top; } #menulist #contact:hover { background-position: -706px bottom; } /*einde menulist*/
EDIT: en de 'webslice' dat jij post is NIET juist. NIET met tables werken met daarin uw images dus!!!no votes
-
10-09-2011, 23:43 #10Laat die web slice tools al maar achterwege om te beginne ..<!-- Save for Web Slices (Untitled-2) -->
no votes
-
10-09-2011, 23:54 #11Member
- Registered
- 30/01/04
- Location
- laakdal
- Posts
- 212
- iTrader
- 1 (67%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
ok hartelijk bedankt, zal het zo eens proberen
no votes
-
11-09-2011, 02:54 #12Member
- Registered
- 23/09/04
- Location
- 2000
- Posts
- 5,759
- iTrader
- 2 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 17/23
code · How to Centre and Layout Pages Without a Wrapper
mss interessant voer voor discussie."Hookers and drunks instinctively understand that common sense is the enemy of romance." - Sebastian Horsleyno votes
-
11-09-2011, 16:16 #13Member
- Registered
- 30/01/04
- Location
- laakdal
- Posts
- 212
- iTrader
- 1 (67%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
heb een sprite gemaakt voor het menu, het is me all aardig gelukt moet ik zeggen, nu moet ik hem nog gecentreerd krijgen onder mijn header en dan kan ik aan de content beginnen.
Hartelijk bedankt allemaal.
PS: het resultaat dat ik al heb kan je vinden op Untitled Documentno votes
-
11-09-2011, 16:53 #14Member
- Registered
- 19/06/11
- Location
- Hasselt
- Posts
- 934
- iTrader
- -3 (0%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/5
mag ik vragen waarom het php paginas zijn?
Ik zou met de (zeer) beperkte kennis die jij hebt nog niet te veel met php te werken (zeker niet met user inputs) dat is om problemen vragen (:Nobody notices what I'm doing ... Until I stop doing it.
Webhosting ? Klik hierno votes
-
11-09-2011, 16:56 #15Member
- Registered
- 30/01/04
- Location
- laakdal
- Posts
- 212
- iTrader
- 1 (67%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
dat was omdat ik de include functie gebruikt heb om mijn menu te laten zien, maar he zou dus beter zijn om met sprites te werken, dus heb ik dat gedaan.
no votes
