[css & xhtml] width en height van menu - Softwareontwikkeling

maandag 4 juli 2005 16:34

Acties:

Verwijderd

Topicstarter

Hey jongens,

Ik ben aan het leren om css (eindelijk) in plaats van tabellen te gebruiken bij het opmaken van een website, maar nu heb ik hetvolgende probleem.

Ik heb een header gemaakt met daarin een logo en daaronder een nieuwe div die moet gaan dienen als menu. In die onderste div zit ook weer een div, omdat ik aan de zijkanten wat ruimte over wil houden in verband met de achtergrond van div 'menu01'..

Div 'menu02' krijgt een breedte en een hoogte mee, en dit werkt allemaal naar behoren. Nu wil ik in deze laatste div links gaan plaatsen waarvan de achtergrond veranderd als je daarover heen gaat, maar wat ik ook doe, ik kan deze links niet meegeven dat ze een hoogte en een breedte krijgen.

xhtml-code

code:

<body>
<!-- header -->
<div id="header">[img]"images/logo.gif"[/img]</div>
<!-- end header -->
<!-- menu -->
<div id="menu01">
<div id="menu02"><a href="#" class="menu">Home</a></div>
</div>
<!-- end menu -->
</body>

css stylesheet

code:

/***********************************************/
/* Layout Divs                                       */
/***********************************************/
#menu01{
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 763px;
    height: 56px;
    background-color: #FFFFFF;
    background-image: url("../images/menu01.gif");
    text-align: left;
    border-top: 1px solid #FFFFFF;
    border-bottom: 5px solid #FFFFFF;
}

#menu02{
    position: relative;
    margin: 0 auto;
    top: 15px;
    left: 0px;
    right: 0px;
    width: 741px;
    height: 40px;
    background-color: #FFFFFF;
    text-align: left;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
}

/***********************************************/
/* Menu                                               */
/***********************************************/

a.menu, a.menu:visited{
    font-size: small;
    color: #FFFFFF;
    font-weight: bold;
    margin: 0px;
    padding: 0px 5px 5px 0px;
    background-image: url("../images/menu02.gif");
}

a.menu:hover{
    background-image: url("../images/menu03.gif");
    text-decoration: none;
}

/********************* end **********************/

Bij deze laatste (de a.menu-dingen) kan ik helaas geen hoogte meegeven, althans, dat pakt hij niet.
Weet iemand van jullie wellicht een oplossing?
Ik heb gekeken om ook elke aparte menu-item in een div te zetten, maar dan kan ik alleen de achtergrondkleur aanpassen, maar het moeten plaatjes zijn.

Alvast bedank!

maandag 4 juli 2005 16:41

Acties:

Sappie

De Parasitaire Capaciteit!

een anchor is een inline element. Maak er een block-level element van (geef hem "display: block;") en je kan ze wel een hoogte en een breedte meegeven.

[ Voor 7% gewijzigd door Sappie op 04-07-2005 16:57 ]

Specs | Audioscrobbler

maandag 4 juli 2005 17:04

Acties:

supakeen

Zo'n navigatie menu dien je eigenlijk in een list te stoppen die je dan met CSS kan stylen, voorbeeldje:

code:

<ul>
 <li><a href="#">bla</a></li>
 <li><a href="#">bla</a></li>
</ul>

En dan die elementen stylen.

Zie ook A List Apart

[ Voor 44% gewijzigd door supakeen op 04-07-2005 17:05 ]

maandag 4 juli 2005 17:51

Acties:

Zoefff

❤ 

Inderdaad. Je probeert inderdaad van table-wise-design af te stappen door geen tabellen meer te gebruiken, maar vervolgens ga je met div's de tabellen weer nabootsen

Een navigatiemenu kan je uitstekend kwijt in een unordered-list zoals zmn hierboven aangeeft. Vervolgens kan je ieder listitem een achtergrond-plaatje meegeven, en bij :hover een ander plaatje, zoals je nu ook al probeert

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

dinsdag 5 juli 2005 17:04

Acties:

Verwijderd

Topicstarter

heey jongens, dank je wel.. ik heb eens naar dat listapart gekeken en daar heb ik het een en ander uit geleerd. zo heb ik nu hetvolgende:

code:

ul          { padding: 0; margin: 0; list-style: none; }
li          { position: relative; float: left; width: 105px; height: 30px; text-align: center; border-right: 1px solid #FFFFFF; }
li ul       { position: absolute; display: none; top: 1em; left: 0; width: 105px; height: 30px; }
li > ul     { top: auto; left: auto; }
li:hover ul, li.over ul { display: block; clear: left; }

echter kan ik die <li> (zoals die in de html staat) geen hoogte meegeven.. terwijl ik het wel probeer.. gewoon height=40 .. maar ik kan hier ook nergens een voorbeeld van vinden, hoe kan ik dit het beste doen?

dinsdag 5 juli 2005 17:05

Acties:

Verwijderd

Topicstarter

overigens krijgen de submenu's (de <ul>'s) wel een hoogte van 30 mee, zoals die in de css staat, maar niet de <li> ..

dinsdag 5 juli 2005 17:15

Acties:

Sappie

De Parasitaire Capaciteit!

Verwijderd schreef op dinsdag 05 juli 2005 @ 17:04:
echter kan ik die <li> (zoals die in de html staat) geen hoogte meegeven.. terwijl ik het wel probeer.. gewoon height=40 .. maar ik kan hier ook nergens een voorbeeld van vinden, hoe kan ik dit het beste doen?

Wat / welke bedoel je hiermee? Probeer je een attribuut te setten van het li element? Maw post de bewuste HTML ook even

Verder maakte ik uit je TS niet op dat je een dropdown menu wilde gebruiken (suckerfish). Uiteraard is het sowieso beter een menu in een list te gooien, maar ik had bij het schrijven van mn eerste reply niet verder gekeken dan mn neus lang was.

Specs | Audioscrobbler

dinsdag 5 juli 2005 17:17

Acties:

Verwijderd

Topicstarter

ow sorry.. ik zal even een soort van test ding maken en dat proberen up te loaden.. dan kun je even zien wat ik probeer te maken

.. ik raak er nu een beetje gefrustreerd van

haha

dinsdag 5 juli 2005 17:32

Acties:

Verwijderd

Topicstarter

Zo, .. ik heb het een en ander geupload zoals beloofd..

Hier is de volledige website te vinden die ik op dit moment heb gemaakt:
http://www.misterbob.nl/websites/misterbob.nl/

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mister Bob | Content Management System</title>
<link rel="stylesheet" href="include/style/layout.css" type="text/css" />
<link rel="stylesheet" href="include/style/content.css" type="text/css" />
<script type="text/javascript" src="include/scripts/menu.js"></script>
</head>
<body>

<!-- header -->
<div id="header">[img]"include/images/logo.gif"[/img]</div>
<!-- end header -->

<!-- menu -->
<div id="menu00">
<div id="menu01">

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Bob Plus</a>
    <ul>
      <li><a href="#">Basis website</a></li>
      <li><a href="#">Extra modules</a></li>
      <li><a href="#">Prijzen</a></li>
    </ul>
  </li>
  <li><a href="#">Bob Lite</a></li>
  <li><a href="#">Service</a>
    <ul>
      <li><a href="#">Techniek</a></li>
      <li><a href="#">Licentievorm</a></li>
      <li><a href="#">Training</a></li>
      <li><a href="#">Nieuwsbrieven</a></li>
    </ul>
  </li>
  <li><a href="#">Maatwerk</a></li>
  <li><a href="#">Over ons</a>
    <ul>
      <li><a href="#">Werkwijze</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Nieuws</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

</div>
</div>
<!-- end menu -->

</body>
</html>

Ook heb ik natuurlijk de CSS geupload:
http://www.misterbob.nl/w.../include/style/layout.css

code:

/* Layout.css */

body        { text-align: center; margin: 0px; padding: 0px; }

/* Header */

#header     { position: relative; margin: 0 auto; top: 0px ; left: 0px; right: 0px; width: 763px; height: 80px; text-align: left; border-bottom: 3px solid #AEC8D5; }

/* Menu */

#menu00     { position: relative; margin: 0 auto; top: 0px ; left: 0px; right: 0px; width: 763px; height: 56px; text-align: left; border-top: 1px solid #FFFFFF; background-image: url("../images/menu01.gif"); }
#menu01     { position: relative; margin: 0 auto; top: 15px; left: 0px; right: 0px; width: 742px; height: 40px; text-align: left; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; background-color: #FFFFFF; }

ul          { padding: 0; margin: 0; list-style: none; }
li          { position: relative; float: left; width: 105px; height: 40px; text-align: center; border-right: 1px solid #FFFFFF; }
li ul       { position: absolute; display: none; top: 1em; left: 0; width: 105px; height: 40px; }
li > ul     { top: auto; left: auto; }
li:hover ul, li.over ul { display: block; clear: left; }

#nav li a       { display: block; font-family: Verdana; font-size: 12px; color: #FFFFFF; font-weight: bold; width: 105px; height: 40px; background-image: url("../images/menu02.gif"); }
#nav li a:hover { display: block; font-family: Verdana; font-size: 12px; color: #FFFFFF; font-weight: bold; width: 105px; height: 40px; background-image: url("../images/menu03.gif"); }
#nav li li a    { display: block; font-family: Verdana; font-size: 12px; color: #FFFFFF; font-weight: bold; width: 105px; height: 20px; background-color: red;}

Verder eigenlijk het belangrijkste.. dit:
http://www.misterbob.nl/websites/misterbob.nl/zomoethet.jpg

Zo zou ik het namelijk het liefste willen zien..

Zoals je kunt zien heb ik het al voor elkaar gekregen dat de bovenste menu-items de achtergrond al wisselt met een andere.. haha

toch mooi voor elkaar gekregen

Alleen nu nemen de onderste deze automatisch over, terwijl ik daar gewoon een achtergrond kleurtje wilde hebben dat veranderen moet.

Wat ik ook niet voor elkaar krijg is dat de tekst (verticaal) in het midden staat.. vertical-alignment wil niet werken

hoop dat jullie me kunnen helpen

dinsdag 5 juli 2005 17:53

Acties:

Zoefff

❤ 

Volgens mij kan je dat gewoon doen door de listitems in de 2e lijst een kleinere hoogte mee te geven, dus ul ul li { }. Overigens, ik zou je aanleren om je styles niet op 1 regel te schrijven, maar gewoon onder elkaar. Leest veel duidelijker, zowel voor jou als voor ons

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

dinsdag 5 juli 2005 18:02

Acties:

imp4ct

Zoefff schreef op maandag 04 juli 2005 @ 17:51:
Inderdaad. Je probeert inderdaad van table-wise-design af te stappen door geen tabellen meer te gebruiken, maar vervolgens ga je met div's de tabellen weer nabootsen

offtopic:
En deze fout maken dus ZOVEEL mensen, spijtig, maar het komt veel te veel voor.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

dinsdag 5 juli 2005 18:45

Acties:

Verwijderd

Topicstarter

okee.. ik heb het voor een groot deel aan het werk gekregen, maar nu nog de vraag..
hoe krijg ik die tekst in het midden ipv helemaal bovenaan?

dinsdag 5 juli 2005 18:55

Acties: