CSS buttons lengte

Status
Niet open voor verdere reacties.
Ja klopt nu snap ik het! Dat doet HTML uit zichzelf, daar is verder niks aan te doen maar ik neem wel aan dat je Divs gebruikt?
 
Code: 
<table width="798" border="0" id="navigation">
      <tr>
        <td height="45" align="center" valign="middle"><a href="home.htm">Home</a> <a href="catalogus.htm">Catalogus</a> <a href="overons.htm">Over ons</a> <a href="contact.htm">Contact</a></td>
      </tr>
    </table>

(Ik weet niet of het belangrijk is, maar ik zie de knopafbeeldingen niet in het design-programma en omdat de tekst wit is, zie ik een helemaal witte tabel (heb deze gemaakt met de kleur wit even op zwart te zetten in de css-sheet))
 
Sevo zei:
Ja klopt nu snap ik het! Dat doet HTML uit zichzelf, daar is verder niks aan te doen maar ik neem wel aan dat je Divs gebruikt?
Klik om te vergroten...

Neen, ik gebruik een div voor de container en een div voor de content maar in die div van content zet ik een tabel met als id navigation, maar heb het daarnet ook geprobeerd met een div met id navigation, maar maakte niet uit ...) :confused:

En moet hier niets aan te doen zijn met width ? Ik heb al sites gezien waar de knoppen even lang waren, ook al was de tekst overal niet evenlang ... :confused:
 
I.p.v. een tabel een div ;) daarom werkt het dus niet. Dus gewoon alle tabellen weg.
 
Zelf nog een beetje rommelen met je plaatje

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>test</title>

<style type="text/css">

#nav {
width: 960px;
height:40px;}

#nav a {
float: left;
font-family: arial, helvetica, verdana;
font-size: 11pt;font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #ddd;
text-decoration: none;
text-align: center;
background: #333;
display: block;
margin: 2px 2px 2px 2px;
padding: 2px 4px 2px 4px;
border: none;
width: 150px;
height:20px;}

#nav a:hover { 
font-family: arial, helvetica, verdana;
font-size: 11pt;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #fff;
text-decoration: none;
text-align: center;
background: aaa;
display: block;
margin: 2px 2px 2px 2px;
padding: 2px 4px 2px 4px;
border: none;
width: 150px;
height:20px;}



</style>
</head>
<body>
<div id="nav">
<a href="#">Contact</a>
<a href="#">Produkten</a>
<a href="#">Homepage</a>
</div> 
</body>
</html>
 
Laatst bewerkt:
Ja ! Bedankt !
Dit werkt wel ... wat heb jij nu precies aangepast ? Volgens mij ligt het aan de padding en margin maar ik weet het niet zeker ...

Voor wat dient padding eigenlijk nog als je de width en de height al hebt gegeven ? Dat staat toch voor de afstand in de box maar die geef je toch al bij weight en height ?
 
Als je nu je lettertype, of je height kleiner maakt dan zie je dat hij niet meer in het midden zal staan, met je padding kan je een beetje sturen.

Misschien maken weer andere ergens anders gebruik van.

Suc6
 
Oké.
Als ik nog een iets mag vragen: Ik zou graag de navigatie in het midden van de pagina zetten, dus heb ik bij #nav text-align: center bijgezet. Maar wanneer ik er een link (dus een knop) van maak, gaat deze terug links staan. Is hier een oplossing voor ?
 
Heb het opgelost met

Code: 
#nav {
width: 368px;
height:40px;
text-align:center;
margin-left: auto;
margin-right: auto;}

Of is dat niet echt ideaal :d ?
 
Als je je navigatie naar rechts wilt gaan verplaatsen dan zet je in #nav
padding-left: 60px;

Maar als je width waarde van je #nav 960px is moet je daar wel 60px vanaf halen.

Zeg je padding-left: 80px; dan moet je 80px van je #nav afhalen enz enz
Zo kan je je nav op de plek zetten.


Edit: margin: 0 auto 0 auto;

kan ook
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan