[CSS] Witruimte tussen horizontaal menu met images - Softwareontwikkeling

zondag 27 augustus 2006 20:45

Acties:

Topicstarter

Ik zit met een probleem wat ik niet opgelost krijg. Ik ben me gaan verdiepen in CSS en wil mijn site die is opgebouwd in tabellen omzetten in CSS. Nja leuk en aardig allemaal, maar ik wil mijn menu (horizontaal) natuurlijk ook in CSS maken.

Dit is mijn CSS code

code:

ul.buttons {
    float:left;
    width:800px;
    padding:0;
    margin: 0;
    position: absolute;
    list-style-type:none;
    left: -5px;
}
li.menu_top {
    display: inline;
}

Dit is mijn HTML code:

code:

<div id="buttons_top">
<ul class="buttons">                    
    <li class="menu_top"><img src="images/layout/header_spacer.png" alt="" /></li>
    <li class="menu_top"><img src="images/layout/button_home.png" alt="Home" /></li>
    <li class="menu_top"><a href="?p=nieuws"><img src="images/layout/button_nieuws.png" alt="Nieuws" /></a></li>
    <li class="menu_top"><a href="?p=voorwaarden"><img src="images/layout/button_voorwaarden.png" alt="Voorwaarden" /></a></li>
    <li class="menu_top"><a href="?p=registreren"><img src="images/layout/button_registreren.png" alt="Registreren" /></a></li>
    <li class="menu_top"><a href="?p=bestellen"><img src="images/layout/button_bestellen.png" alt="Bestellen" /></a></li>
    <li class="menu_top"><a href="?p=contact"><img src="images/layout/button_contact.png" alt="Contact" /></a></li>
    <li class="menu_top"><a href="?p=testsrv"><img src="images/layout/button_testsrv.png" alt="Testservers" /></a></li>             <li class="menu_top"><a href="?p=netwerk"><img src="images/layout/button_netwerk.png" alt="Netwerk" /></a></li>
</ul>
</div>

Opsich doet bovenstaande code wel wat ik wil, maar tussen ieder plaatje zit een witruimte van ongeveer 2px. Ik heb gezocht in de search, dan krijg ik erg veel resultaten maar de oplossingen doen allemaal niet wat ik wil. Ook heb ik op google gezoch naar een oplossing, maar daar krijg ik allemaal menu's met "tekst buttons".

zondag 27 augustus 2006 20:48

Acties:

orf

Geef de li ook eens een margin:0; padding: 0.
Waarom gebruik je voor alle list-items dezelfde class, als je ze ook aan kunt spreken met gewoon li?
Daarnaast lijkt je div om het menu heen overbodig.

zondag 27 augustus 2006 20:51

Acties:

T i M

Topicstarter

orf schreef op zondag 27 augustus 2006 @ 20:48:
Geef de li ook eens een margin:0; padding: 0.
Waarom gebruik je voor alle list-items dezelfde class, als je ze ook aan kunt spreken met gewoon li?
Daarnaast lijkt je div om het menu heen overbodig.

Ik maak op meerde plaatsen op mijn site gebruik maak van li. Maar dan met een andere opmaak. Helaas werkt je oplossing niet, iig bedankt voor het meedenken.

[ Voor 7% gewijzigd door T i M op 27-08-2006 20:52 ]

zondag 27 augustus 2006 20:53

Acties:

orf

Maar je hebt toch al de classname van je ul (of beter id) ?

#menu

#menu li{
color: #f00;
}

Het is echt onnodig om alles een class te geven. Simpelweg onnodige markup.

Edit: hoe kun je trouwens zowel een float:left als een position:absolute voor één element hebben? Een element dat absoluut is gepositioneerd heeft geen float.

Je kunt beter je list items een float:left geven, zonder display: inline.

[ Voor 40% gewijzigd door orf op 27-08-2006 20:56 ]

zondag 27 augustus 2006 20:56

Acties:

Verwijderd

Die div kan overbodig zijn maar hoeft niet perse...
Ik zou het op de volgende manier doen:

Cascading Stylesheet:

#music {
    margin: 0;
    padding: 0;
}

#music li {
    list-style: none;
    float: left;
}

#music li img {
    vertical-align: bottom;
}

HTML:

1
2
3

<ul id="music">
    <li><a href="#"><img src="plaatje.gif" alt="" /></a></li>
<ul>

zondag 27 augustus 2006 21:19

Acties:

T i M

Topicstarter

Thanx, werkt super!

zondag 27 augustus 2006 21:24

Acties:

Verwijderd

Ik zou die plaatjes als background image op de li's zetten, hier een voorbeeldje wat ik heb gemaakt n.a.v. een eerder GoT draadje.

Code is zoals dit, in dit voorbeeld heeft de div ook nog een bg image, dat is natuurlijk niet noodzakelijk:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
    <div id="menu">
        <ul>
            <li class="home"><a href="#"><span>Home</span></a></li>
            <li class="paginas"><a href="##"><span>Pagina's</span></a></li>
            <li class="instructies"><a href="###"><span>Instructies</span></a></li>
            <li class="faq"><a href="####"><span>FAQ</span></a></li>
            <li class="about"><a href="#####"><span>Over SigmaEdit</span></a></li>
        </ul>
    </div>
</div>
</body>
</html>

Cascading Stylesheet:

* { margin: 0; padding: 0; }

body { padding: 15px; background: #CCC; }

#wrapper { width: 674px; margin: 0 auto; padding: 22px; background: #FFF; border: 2px solid #999; }

/* horizontaal menu met bg images */
#menu { height:34px; background:url(images/menubar.gif) repeat-x left top; }
#menu ul { list-style-type:none; }
#menu ul li { float:left; margin-top:4px; }
#menu li a span { display:none; }
#menu li a { display:block; height:26px; }

.home { background-image:url(images/home.gif); width:89px; }
.paginas { background-image:url(images/paginas.gif); width:106px; }
.instructies { background-image:url(images/instructies.gif); width:119px; }
.faq { background-image:url(images/faq.gif); width:77px; }
.about { background-image:url(images/over.gif); width:152px; }

zondag 27 augustus 2006 22:10

Acties:

T i M

Topicstarter

Dat is inderdaad een nog mooiere oplossing. Maar ik loop tegen een volgend probleem aan. Ik heb nu fijn mijn horizontaal menu, maar als ik er een div onderzet met als background de header erin, dan valt deze over het menu heen!

Is al opgelost (A), had geen heigth ingesteld voor buttons_top.

[ Voor 13% gewijzigd door T i M op 27-08-2006 22:30 ]