Archief - Navigatiebar

T

TiZon

Legacy Member

• 3 jan 2009

• #1

Hey

Ik ben bezig aan een nieuwe site, maar ik stuit op wat problemen met de navigatiebar.

Ik heb hier een stukje online gezet:
Bart De Vos

Het is dus de bedoeling dat mijn navigatieknoppen er volledig op komen en indien nodig uitgerokken worden. Maar ik slaag er maar niet in.

Code tot dusver:

HTML:

<div id="header">
            	<div id="navigation">
                	<ul>
                	<li><a href=#>Home</a></li>
                        <li><a href=#>Foto</a></li>
                        <li><a href=#>Over</a></li>
                        <li><a href=#>Link</a></li>
                        <li><a href=#>Contact</a></li>
                	</ul>
            	</div>
</div>

En dan nog even de CSS die hiervoor zou moeten zorgen:

PHP:

#navigation li a
{
	background-image: url(../img/button.png);
	background-size: 100%;
	background-origin: content;
	margin-top:110px;
	height: 3em;
	line-height: 3em;
	float: left;
	display: block;
	text-decoration: none;
	text-align: center;
	font-family:Helvetica;
	font-size:14px;
	color:#FFF;
	padding-left: 10px;
	padding-right: 10px;
}

Ik heb al veel liggen proberen, ik denk dus dat het stukje CSS 'properder' kan.

Iemand een ingeving?

Bedankt
Bart

C

Cycloon

Legacy Member

• 3 jan 2009

• #2

De beste manier is om het rechte stuk van de knop te repeaten als background en de geronde hoeken in te stellen als 2 afbeeldingen langs de tekst.

T

TiZon

Legacy Member

• 4 jan 2009

• #3

En hoe doe ik dat juist het best?

Als je ergens een voorbeeld weet, kan ik het zelf wel uitzoeken

C

Cycloon

Legacy Member

• 4 jan 2009

• #4

Je snijdt gewoon die 2 randen af, je zet die rond uw tekst als image en het binnenste van uw knop maakt ge 1px lang en stelt ge in als achtergrond van uw div of li tag (of wat ge ook gebruikt).

j

j design

Legacy Member

• 4 jan 2009

• #5

je kan het ook gemakkelijker als is er met jouw methode helemaal niets mis hoor.

Je hebt een linkerdeel dat met afgeronde hoeken begint en mooi rechtdoor loopt, genoeg om een knop te vullen.
Dan heb je nog het rechtse, net genoeg om de ronding te hebben en ga je dat eraan hangen met een span.
Dan los je alles wat op met margin en padding.
Naamloos document

En als je dat niet goed vind is er nog altijd een JS manier.
Deze is volgens mij het eleganst
phatfusion : roundedcorners

C

Cycloon

Legacy Member

• 4 jan 2009

• #6

Jouw methode doet net hetzelfde maar dan op een minder elegante manier. Als jij een knop wil maken van 1500px breed (ok komt nauwelijks voor mja) dan is jouw afbeelding te kort. Terwijl als je met een 1px afbeelding werkt als achtergrond er nooit iets kan mis gaan en je bespaart ook nog eens bandbreedte.

T

TiZon

Legacy Member

• 4 jan 2009

• #7

@Cycloon: Dan moet ik images voor de layout in mijn html zetten, en dat wil ik vermijden.

Nu heb ik dit:
Bart De Vos

Voor een of andere reden drijft het nu op en wel heel foute plaats, maar dat is zo erg niet, dat zal ik wel vinden denk ik.
De 2 afbeeldingen lopen door en dus zie ik de onderste (grotere) linker afbeelding nog onder mijn rechtse (kleiner) deel. Hoe los ik dat op?

j

j design

Legacy Member

• 4 jan 2009

• #8

Je hebt gelijk Cycloon, maar waar vind je een menuknop van 1500px
Het is mooier om met span te werken ipv img om de haverklap in de code een img te moeten zetten.
Das natuurlijk een kwestie van persoonlijke smaak.

N

Novaweb

Legacy Member

• 5 jan 2009

• #9

Ik weet niet of je hier iets met bent:

Hoe maak ik afgeronde hover buttons in CSS ? | Web-portaal

j

j design

Legacy Member

• 5 jan 2009

• #10

@novaweb
Bedankt voor de verduidelijking, het is net hetzelfde van mij maar met uileg