Archief - html in html met css

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
j

jakke25

Legacy Member
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
jakke
Z

Zero Grav

Legacy Member
Toon alvast eens wat ge al hebt zodat we daar op verder kunnen bouwen of zeggen hoe het anders moet.
j

jakke25

Legacy Member
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 :)
Z

Zero Grav

Legacy Member
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.

Code: 
<div id="container">
    <div id="header">
    
    </div>
    
    <ul id="nav">
    
    </ul>
    
    <div id="sidebar">
    
    </div>
    
    <div id="content">
    
    </div>
</div>
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).
De sidebar is maar een voorbeeldje, kan dus ook perfect zonder.
j

jakke25

Legacy Member
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
K

Kilghard

Legacy Member
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 (:?
j

jakke25

Legacy Member
heb html en css voor dummies, webdesign voor dummies en php en mysql voor dummies, maar vindt er niets aan :o
-

-BVR-

Legacy Member
Voorbeeld:
HTML: 
    <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>

CSS
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*/

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')

EDIT: en de 'webslice' dat jij post is NIET juist. NIET met tables werken met daarin uw images dus!!!
j

jakke25

Legacy Member
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 Document
K

Kilghard

Legacy Member
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 (:
j

jakke25

Legacy Member
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.
l

lykmeraid

Legacy Member
ColorMatch Remix

bezoekske langs hier kan geen kwaad, kies een kleur en er worden een aantal kleuren voorgesteld die samen passen. Uw huidige site doet nogal pijn aan mijn ogen :)
j

jakke25

Legacy Member
juist wat ik nodig had :), bedankt :) ben nu bezig met html en css te leren. Het design en de kleuren komen later wel :)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan