Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Knoppen met css een maat geven (Opgelost)

arthurheijm - 07/01/2014 19:34

Lid

Ik heb even een vraag.
Ik wil de knoppen op mijn site even breed hebben, om dat deze onder elkaar komen te staan.
Ik heb tot nu toe dit.

css code - Bekijk de code zonder highlighting - Klap code in

                .menu A:link {
                color: #ffffff;
                padding: 5px 15px 5px 15px;
                background-image: url('img/1.jpg'); 
                border:1px solid White;
                border-top-right-radius: 1em 1em;
                border-top-left-radius: 1em 1em;
                border-bottom-right-radius: 1em 1em;
                border-bottom-left-radius: 1em 1em;
                text-decoration: none;
                }
            
.menu A:link {
                color: #ffffff;
                padding: 5px 15px 5px 15px;
                background-image: url('img/1.jpg'); 
                border:1px solid White;
                border-top-right-radius: 1em 1em;
                border-top-left-radius: 1em 1em;
                border-bottom-right-radius: 1em 1em;
                border-bottom-left-radius: 1em 1em;
                text-decoration: none;
                }
 

Maar dit geeft niet het gewenste effect.

Hoe kan ik het oplossen, dat de knoppen 80% van de menu box worden.

1 antwoord

Gesponsorde links

Thomas - 07/01/2014 20:18 (laatste wijziging 07/01/2014 20:27)

Moderator

Ik haal altijd de volgende truuk uit: stop de hyperlink in een (floating) block (die je de goede breedte, hoogte etc. geeft), en vul deze dan vervolgens uit door van de hyperlink ook een block-element te maken met breedte en hoogte 100% van de beschikbare ruimte = afmeting van het omvattende block.

Zoiets dus:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>menu knoppen</title>
<style type="text/css">
<!--
div.menu            { width: 200px; background-color: #d0d0ff; }
div.menu ul         { list-style: none; margin: 0; padding: 0; }
div.menu ul li      { display: block; width: 80%; height: 25px; margin: 0 10%; }
div.menu ul li a    { display: block; height: 100%; width: 100%; line-height: 25px; text-align: center; border: 1px solid #ffffff; border-radius: 1em; }
//-->
</style>
</head>

<body>
<div class="menu">
    <ul>
        <li><a href="" title="een">een</a></li>
        <li><a href="" title="twee">twee</a></li>
        <li><a href="" title="drie">drie</a></li>
        <li><a href="" title="vier">vier</a></li>
    </ul>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>menu knoppen</title>
<style type="text/css">
<!--
div.menu            { width: 200px; background-color: #d0d0ff; }
div.menu ul         { list-style: none; margin: 0; padding: 0; }
div.menu ul li      { display: block; width: 80%; height: 25px; margin: 0 10%; }
div.menu ul li a    { display: block; height: 100%; width: 100%; line-height: 25px; text-align: center; border: 1px solid #ffffff; border-radius: 1em; }
//-->
</style>
</head>
 
<body>
<div class="menu">
    <ul>
        <li><a href="" title="een">een</a></li>
        <li><a href="" title="twee">twee</a></li>
        <li><a href="" title="drie">drie</a></li>
        <li><a href="" title="vier">vier</a></li>
    </ul>
</div>
</body>
</html>

Zo wordt ook het klikbare deel van een link ook groter, wat gewoon een stuk fijner navigeert dan precies op zo'n tekstlink klikken.

EDIT: spelling, en wat HTML/CSS cleanup.

Bedankt door: arthurheijm

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten