[CSS] Elk element menu met ul wat rechtser

[Verwijderd]

Hey,

Mijn scouts heeft deze site: http://www.dezwaluw.org/
Nu wil ik dat menu namaken, zodat het menu als tekst op de site staat en niet vast in de background image zit, zoals iedereen weet dat heel slecht is.

Het menu onder de zwaluw doe ik zo:

HTML:

<ul id="nav" class="menulinks">
<li><a href="links.html">LINKS</a></li>
<li><a href="fotos.html">FOTO'S</a></li>
<li><a href="badgen.html">BADGEN</a></li>
<li><a href="actueel.html">ACTUEEL</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="download.html">DOWNLOAD</a></li>
<li><a href="overdezwaluw.html">OVER DE ZWALUW</a></li>
</ul>

Cascading Stylesheet:

ul#nav {
    position:absolute;
    left:30px;
    top:310px;
}

ul#nav li{
    list-style:none;
    padding:5px;
    margin:5px;
}

Hetgeen mooi werkt en ik goed vind.

Dat schuine stuk menu naast de zwaluw lukt me niet om na te maken met behulp van ul. Het is mij wel gelukt met allemaal verschillende divs met een andere top: en left: voor de items, maar dat is maar stom....
Dus heeft iemand enige ideeën hoe ik dit slim aanpak? Mss met iets anders dan ul?

Grtz

[harrald]

Verwijderd schreef op zondag 30 november 2008 @ 00:11:
Hey,

Mijn scouts heeft deze site: http://www.dezwaluw.org/
Nu wil ik dat menu namaken, zodat het menu als tekst op de site staat en niet vast in de background image zit, zoals iedereen weet dat heel slecht is.

Het menu onder de zwaluw doe ik zo:

Hetgeen mooi werkt en ik goed vind.

Dat schuine stuk menu naast de zwaluw lukt me niet om na te maken met behulp van ul. Het is mij wel gelukt met allemaal verschillende divs met een andere top: en left: voor de items, maar dat is maar stom....
Dus heeft iemand enige ideeën hoe ik dit slim aanpak? Mss met iets anders dan ul?

Grtz

Je kan de li toch ook een positie mee geven?

[ Voor 25% gewijzigd door harrald op 30-11-2008 10:47 ]

[Verwijderd]

Ja tuurlijk, maar moet ik dan elke li een positie meegeven? Of bestaat er iets als extra margin per li ofzo?

[blaatkipje]

je kan wat in javascript gaan maken ( getElementByTagName geloof ik ), waar je alle li elementen een eigen padding geeft .

Maar volgens mij is er geen css mogelijkheid om dit te doen.

[djluc]

Ik zou gewoon per item dit doen, dus classnames toevoegen aan de individuele LI tags en die een extra margin of padding geven.

[Geert.H]

djluc schreef op zondag 30 november 2008 @ 11:29:
Ik zou gewoon per item dit doen, dus classnames toevoegen aan de individuele LI tags en die een extra margin of padding geven.

Offtopic:
In dit geval moet je dan gebruik maken van ID's. Een id is bedoeld voor één uniek element, een class voor een verzameling.

ontopic:
Verder lijkt het mij idd ook het beste om elk element een ID mee te geven, en per element een extra margin mee te geven.

[Verwijderd]

Hoe geef je een extra margin per element mee? Ik ben nu wat aan het prutsen, maar kom er niet aan uit...

HTML:

<ul id="nav1" class="menulinks">
<li id="item1"><a href="eenheidsleiding.html">EENHEIDSLEIDING</a></li>
<li id="item2"><a href="bevers.php">BEVERS</a></li>
<li id="item3"><a href="teerpoten.php">TEERPOTEN</a></li>
<li id="item4"><a href="wolven.php">WOLVEN</a></li>
<li id="item5"><a href="jvg.php">JV's | JG'N</a></li>
<li id="item6"><a href="vg.php">V's | G'n</a></li>
<li id="item7"><a href="stam.html">STAM</a></li>
</ul>

Cascading Stylesheet:

ul#nav1 {
    position:absolute;
    left:180px;
    top:30px;
}
ul#nav1 li{
    list-style:none;
}
ul#nav1 li#item1 {
    margin-right:10px;
}
ul#nav1 li#item2 {
    margin:10px;
}
ul#nav1 li#item3 {
    margin:10px;
}
ul#nav1 li#item4 {
    margin:15px;
}
ul#nav1 li#item5 {
    margin:17px;
}
ul#nav1 li#item6 {
    margin:19px;
}
ul#nav1 li#item7 {
    margin:21px;
}

[H004]

Alle margin's veranderen in margin-left of padding-left zal waarschijnlijk wel werken... Nu geef je aan alle zijden van het element een margin op:

code:

margin: 10px = aan alle kanten 10px margin
margin: 10px 5px = boven en onder 10px en rechts en links 5px margin
margin: 10px 8px 6px 4px = boven 10, rechts 8, onder 6 en links 4px margin. (met de klok mee dus)

Jij hebt dus het volgende nodig:

Cascading Stylesheet:

margin-left: 10px;
//of 
margin: 0 0 0 10px;

Waarom gebruik je absolute positionering voor het menu? Margin's en paddings volstaan daarvoor namelijk ook prima, en leveren over het algemeen veel minder problemen op.

[_Thanatos_]

Je vergeet nog de situatie waarin je drie values opgeeft

code:

margin: 10px 8px 6px = boven 10, links en rechts 8, onder 6.

@TS:
Geen antwoord p je vraag, maar het is misschien wat netter om geen schreeuwerige uppercase menu's te bouwen. Je kunt dat uppercasen netter (m.i. dan) laten afhandelen door css:

Cascading Stylesheet:

li { text-transform: uppercase; }

[ Voor 47% gewijzigd door _Thanatos_ op 30-11-2008 19:31 ]

[Verwijderd]

Ok alles werkt goed. Nu zit ik echter met het volgende probleem: door het menu rechts van die zwaluw is maar de helft van die zwaluw klikbaar (is om naar de index te gaan)...
Is dit oplosbaar? Anders zal ik toch voor dat menu rechts voor allemaal verschillende divs moeten gaan....

http://www.dezwaluw.org/2/index.html

De zwaluw is klikbaar door een area:

HTML:

<img src="../img/background2.jpg" alt="background" usemap="#Map" width="981" height="695" border="0" />
    <map name="Map" id="Map">
      <area shape="poly" coords="80, 319, 30, 68, 206, 33, 256, 283" href="index.html" alt="index" />
    </map>

[Zillion01]

Verwijderd schreef op donderdag 04 december 2008 @ 12:47:
Ok alles werkt goed. Nu zit ik echter met het volgende probleem: door het menu rechts van die zwaluw is maar de helft van die zwaluw klikbaar (is om naar de index te gaan)...
Is dit oplosbaar? Anders zal ik toch voor dat menu rechts voor allemaal verschillende divs moeten gaan....

http://www.dezwaluw.org/2/index.html

De zwaluw is klikbaar door een area:

HTML:

<img src="../img/background2.jpg" alt="background" usemap="#Map" width="981" height="695" border="0" />
    <map name="Map" id="Map">
      <area shape="poly" coords="80, 319, 30, 68, 206, 33, 256, 283" href="index.html" alt="index" />
    </map>

Vage oplossing. Ik zou gewoon je logo absoluut positioneren dan heb je nergens last van. Dus dat hele map gebeuren weggooien en iets maken van

#logo a {
top: .. px;
left: .. px;
width:.. px;
height: .. px;
position: absolute;
}

En in je html dus een divje logo met een link er in maken.

[Verwijderd]

Het logo staat wel schuin, dus valt dit wel op te lossen met CSS? Het menu rechts van het logo mag niet op zijn beurt overlapt worden door het klikbare van het logo...

Nog een bijvraagje trouwens: in IE zijn de beide menu's te hoog, hoe kan ik dit oplossen?

[harrald]

Verwijderd schreef op donderdag 04 december 2008 @ 22:05:
Het logo staat wel schuin, dus valt dit wel op te lossen met CSS? Het menu rechts van het logo mag niet op zijn beurt overlapt worden door het klikbare van het logo...

Nog een bijvraagje trouwens: in IE zijn de beide menu's te hoog, hoe kan ik dit oplossen?

als je dingen absoluut positioneert kan je ook een z-index meegeven. hiermee kan je dingen over elkaar heen leggen.

[Verwijderd]

Nja aangezien het beide vierkanten zijn, gaat dan ofwel de ene de andere overlappen ofwel omgekeerd (bij de oplossing van Zillion01)

Zet ik het echter bij mijn oplossing, dan werkt het ook niet:
http://www.dezwaluw.org/2/index.html

HTML:

<div id="bg">
    <map name="Map" id="Map">
      <area shape="poly" coords="80, 319, 30, 68, 206, 33, 256, 283" href="index.html" alt="index" />
    </map>
</div>

Cascading Stylesheet:

#content {
    position:absolute;
    left:380px;
    top:35px;
    width:570px;
    height:644px;
    z-index: 2;
}
#bg {
    position:absolute;
    z-index: 1;
}
ul#nav1 {
    position:absolute;
    left:178px;
    top:30px;
    z-index: 0;
}

[ Voor 3% gewijzigd door Verwijderd op 04-12-2008 23:11 ]

[harrald]

Verwijderd schreef op donderdag 04 december 2008 @ 23:10:
Nja aangezien het beide vierkanten zijn, gaat dan ofwel de ene de andere overlappen ofwel omgekeerd (bij de oplossing van Zillion01)

Zet ik het echter bij mijn oplossing, dan werkt het ook niet:
http://www.dezwaluw.org/2/index.html

HTML:

<div id="bg">
    <map name="Map" id="Map">
      <area shape="poly" coords="80, 319, 30, 68, 206, 33, 256, 283" href="index.html" alt="index" />
    </map>
</div>

Cascading Stylesheet:

#content {
    position:absolute;
    left:380px;
    top:35px;
    width:570px;
    height:644px;
    z-index: 2;
}
#bg {
    position:absolute;
    z-index: 1;
}
ul#nav1 {
    position:absolute;
    left:178px;
    top:30px;
    z-index: 0;
}

En wat is het probleem dat de tekst over de afbeelding heen komt?
Het komt er precies hetzelfde uit te zien als nu...

[Verwijderd]

Het probleem is dat het rechtse menu een vierkant is (alsof die margin-left van de li's er niet zijn), en dus dat het menu over het klikbare van het logo ligt...
Als het nog niet duidelijk is wat ik bedoel zal ik even een tekening maken

[harrald]

Verwijderd schreef op vrijdag 05 december 2008 @ 09:39:
Het probleem is dat het rechtse menu een vierkant is (alsof die margin-left van de li's er niet zijn), en dus dat het menu over het klikbare van het logo ligt...
Als het nog niet duidelijk is wat ik bedoel zal ik even een tekening maken

aaah ok het logo moet klikbaar zijn

edit: je kan ook alleen de li's boven het logo zetten?
dan heb je niet dat hele vlak van je ul die klikruimte van je logo in neemt

[ Voor 18% gewijzigd door harrald op 05-12-2008 14:30 ]

[Verwijderd]

Verdorie Er zijn geen trucjes of dergelijke? Of oplosbaar door iets anders te doen ofzo...

En dat IE probleem?

[ Voor 10% gewijzigd door Verwijderd op 05-12-2008 14:28 ]

[The_Ghost16]

Als je goed kijkt naar de broncode van het origineel zie je dat het menu en zo opgebouwd is uit 1 groot image waar area's in zijn gezet waardoor links gecreeerd worden.

In het geval dat je het programmeer technisch wilt oplossen ligt je UL boven je image waardoor niet de gehele image klikbaar zal zijn.

Dus ik denk dat je een andere oplossing moet zoeken. Want met CSS en HTML zal het niet lukken om met de huidige layout het volledige logo klikbaar te maken. Heel misschien kan het door de image over de UL heen te leggen maar of dat lukt weet ik niet.

[harrald]

The_Ghost16 schreef op vrijdag 05 december 2008 @ 14:32:
Als je goed kijkt naar de broncode van het origineel zie je dat het menu en zo opgebouwd is uit 1 groot image waar area's in zijn gezet waardoor links gecreeerd worden.

In het geval dat je het programmeer technisch wilt oplossen ligt je UL boven je image waardoor niet de gehele image klikbaar zal zijn.

Dus ik denk dat je een andere oplossing moet zoeken. Want met CSS en HTML zal het niet lukken om met de huidige layout het volledige logo klikbaar te maken. Heel misschien kan het door de image over de UL heen te leggen maar of dat lukt weet ik niet.

je kan de ul toch gewoon ergens op de pagina zetten, en de li's uit de ul totaal ergens anders plaatsen?
dus ul netjes naast de imagemap en dan met bijv position relative de li's naar links plaatsen over de imagemap heen. probleem opgelost toch?

[ Voor 8% gewijzigd door harrald op 05-12-2008 14:50 ]

[Verwijderd]

Ik heb nu de achtergrond zonder het logo gedaan, en het logo apart uitgeknipt en daarop die area gezet. Maarja dan blijf ik met hetzelfde probleem zitten: ofwel is een stuk van het logo niet klikbaar, ofwel een stuk van het menu.
http://www.dezwaluw.org/2/index.html
Het blijft dus een schuine image in een rectangular box (het is natuurlijk een gif, dus dat naast het logo is doorzichtig, maarja, het linkprobleem blijft). Bestaat er een manier om gewoon een schuine image te hebben?

Anders zal ik voor harrald zijn oplossing moeten gaan

[ Voor 3% gewijzigd door Verwijderd op 05-12-2008 16:42 ]

[Verwijderd]

Het IE-FF verschil van de menu's snap ik echt niet...ze staan er met een absolute positionering, hoe komt het dan dat het in IE hoger staat?

[Verwijderd]

Even een bumpje, als ik mag

[Verwijderd]

Toch nog eens proberen wat reacties/ideeën los te krijgen...

nieuwe versie: http://www.dezwaluw.org/2/index.html
origineel: http://www.dezwaluw.org

Mijn vragen dus:
- Kan een image alleen schuin zijn? Dus niet schuin in een rechthoekige image, want nu zorgt dat voor een overlapping van het menu rechts van het logo. Krijgt het menu een grotere z-index, dan wordt een stuk van het logo overlapt waardoor dat stuk niet klikbaar is.

- Weet iemand een andere oplossing om het menu probleem op te lossen? Ik kan het menu rechts plaatsen, maar dan de elementen naast het logo positioneren. Of ik kan de elementen gewoon positioneren met een div. Van beide oplossingen ben ik echter niet zo een fan.

- Beide menu's zijn in IE hoger dan in FF. Ze zijn echter absoluut gepositioneerd met top en left, hoe komt dit en hoe kan ik dit voorkomen? Dit IE verschil vond ik nergens terug met Google.

- Weet iemand met welk lettertype ik het menu van het origineel kan nabootsen? Het is in photoshop met Arial Regular 14pt Strong, maar dit lukt niet om na te bootsen met Arial in html....Enige ideeën? Iets zo dicht mogelijk?

Alvast bedankt

[harrald]

Verwijderd schreef op maandag 08 december 2008 @ 20:37:
Toch nog eens proberen wat reacties/ideeën los te krijgen...

nieuwe versie: http://www.dezwaluw.org/2/index.html
origineel: http://www.dezwaluw.org

Mijn vragen dus:
- Kan een image alleen schuin zijn? Dus niet schuin in een rechthoekige image, want nu zorgt dat voor een overlapping van het menu rechts van het logo. Krijgt het menu een grotere z-index, dan wordt een stuk van het logo overlapt waardoor dat stuk niet klikbaar is.

- Weet iemand een andere oplossing om het menu probleem op te lossen? Ik kan het menu rechts plaatsen, maar dan de elementen naast het logo positioneren. Of ik kan de elementen gewoon positioneren met een div. Van beide oplossingen ben ik echter niet zo een fan.

- Beide menu's zijn in IE hoger dan in FF. Ze zijn echter absoluut gepositioneerd met top en left, hoe komt dit en hoe kan ik dit voorkomen? Dit IE verschil vond ik nergens terug met Google.

- Weet iemand met welk lettertype ik het menu van het origineel kan nabootsen? Het is in photoshop met Arial Regular 14pt Strong, maar dit lukt niet om na te bootsen met Arial in html....Enige ideeën? Iets zo dicht mogelijk?

Alvast bedankt

zoals ik al zei je moet de li's positioneren niet de ul. Zo liggen alleen de "knoppen" boven de afbeelding.
voor je font kan je deze website gebruiken. En het verschil tussen IE en FF zal wel iets te maken hebben met vanaf waar gerekend word. dus top:12px; vanaf waar? Als ik morgen zin heb kijk ik misschien wel even voor je.
Een img is _altijd_ een vierkant. dus nooit iets met schuine kanten (ook geen cirkel )

je moet gewoon creatief zijn. vaak red je het al met de elementen die je al had staan en heb je helemaal heen extra elementen als divs en spans nodig.

[Verwijderd]

Ja dat bedoelde ik met de eerste optie Ik zal het nu zo doen, aangezien dat van een schuine image. Ik had mijn vermoedens, maar ik kon maar hopen

Bedankt om morgen even te kijken!
Mijn font vind ik niet echt op de site, maar ik ga er nog wel even mee zoeken.

Thx

[Verwijderd]

De li's verschillende tops en lefts geven met position relative werkt toch niet zoals ik wil, zoals je kan zien: http://www.dezwaluw.org/2/index.html
Wat doe ik verkeerd? Met position: absolute bij de verschillende elementen werkt het nog minder.

Cascading Stylesheet:

ul#nav1 {
    position:absolute;
    left:180px;
    top:310px;
}
ul#nav1 li{
    list-style:none;
}
ul#nav1 li#item1 {
    position:relative;
    left:178px;
    top:30px;
}
ul#nav1 li#item2 {
    position:relative;
    left:188px;
    top:40px;
}
ul#nav1 li#item3 {
    position:relative;
    left:198px;
    top:50px;
}
ul#nav1 li#item4 {
    position:relative;
    left:208px;
    top:60px;
}
ul#nav1 li#item5 {
    position:relative;
    left:218px;
    top:70px;
}
ul#nav1 li#item6 {
    position:relative;
    left:228px;
    top:80px;
}
ul#nav1 li#item7 {
    position:relative;
    left:238px;
    top:90px;
}

[harrald]

Verwijderd schreef op dinsdag 09 december 2008 @ 11:35:
De li's verschillende tops en lefts geven met position relative werkt toch niet zoals ik wil, zoals je kan zien: http://www.dezwaluw.org/2/index.html
Wat doe ik verkeerd? Met position: absolute bij de verschillende elementen werkt het nog minder.

en zo?

Cascading Stylesheet:

ul#nav1 {
    position:absolute;
    left:180px;
    top:310px;
}
ul#nav1 li{
    list-style:none;
}
ul#nav1 li#item1 {
    position:relative;
    left:10px;
    top:-270px;
}

of je zet de ul gewoon op zijn plek en met z-index -1 doe je hem achter de image, vervolgens geef je de li's een hogere z-index. zoals je ziet er zijn meerdere manieren waarop je dit kan doen, gewoon beetje aan rommelen.

[ Voor 16% gewijzigd door harrald op 09-12-2008 12:08 ]

[CH4OS]

blaatkipje schreef op zondag 30 november 2008 @ 10:55:
je kan wat in javascript gaan maken ( getElementByTagName geloof ik ), waar je alle li elementen een eigen padding geeft .

Maar volgens mij is er geen css mogelijkheid om dit te doen.

Wat is er mis met de li een class te geven en daar de CSS aan te hangen? Of een id, als alle menu items een eigen styling moeten krijgen...

CSS is CSS, daar veranderd Javascript niets aan, ook niet qua browser ondersteuning.

Overigens is Javascript daar mijns inziens niet voor bedoeld; CSS is voor de styling en JS is om bepaalde semi-dynamische functies toe te voegen.

[ Voor 12% gewijzigd door CH4OS op 09-12-2008 12:39 ]

[Verwijderd]

Ok het menu werkt. Het lukt echter nog niet om het juiste lettertype te vinden. Het is Arial, maar in niet strong zijn de letters te dun, in strong zijn ze te dik.

harrald, heb je het IE/FF probleem al gevonden? Iemand anders mss?

Bedankt voor de hulp allesinds

[Verwijderd]

edit: opgelost door margin-top:0px; toe te voegen bij de ul's van de menu's

[ Voor 105% gewijzigd door Verwijderd op 10-12-2008 12:32 ]