Link met een "slogan" eronder, lukt niet in deze situatie

[gebruiker78]

Hallo,
Ik wil graag onder de links (zie script) een klein regeltje eronder.
Maar helaas lukt dit niet en ben ik een beetje verdwaald in de css en kan het probleem niet meer zelf oplossen.
dus:

<ul>
    <li>
	<a href="#">Technology</a> <!-- hier wil ik een klein regeltje onder -->
		<ul>
			<li><a href="#2">PHP</a></li>
			<li><a href="#1">HTML</a></li>
        </ul>
    </li>
	    <li>
		<a href="#">Lifestyle</a><!-- hier wil ik een klein regeltje onder -->
		<ul>
			<li><a href="#">Sneakers</a></li>
			<li><a href="#">Random</a></li>
        </ul>
    </li>
	    <li>
		<a href="#">About</a><!-- hier wil ik een klein regeltje onder -->
		<ul>
			<li><a href="#">Background</a></li>
			<li><a href="#">Contact</a></li>
        </ul>
    </li>
</ul>

/* Menu outside*/
nav#headerMenu{
width: 724px;
height: 75px;
margin: 0px 0px 0px 266px;
padding: 0px 5px 0px 5px;
background-color: rgb(255,255,255);
}

ul{
margin: 0;
padding: 0;
list-style: none;
float: right;
font-size: 18px;
}
ul li{
display: block;
position: relative;
float: left;
line-height: 75px;
}
li ul{ 
display: none; 
}
ul li a{
display: block;
text-decoration: none;
margin-right: 5px;
white-space: nowrap;
height: 72px;
width: 150px;
text-align: center;
color: rgb(99,99,99);
}
li:hover ul{
display: block;
position: absolute;
}
li:hover li{
float: none;
font-size: 10px;
width: 150px;
height: 20px;
}

/* Submenu kleur */
li:hover ul a{
background: rgb(255,255,255);
height: 20px;
margin-top: 0px;
line-height: 20px;
}
/* Submenu kleur (hover) */
li ul a:hover{
color: rgb(0,93,232);
background-color: rgb(156,156,156);
}
/* hoofdmenu kleur hover submenu */
li:hover > a {
background: rgb(0,93,232);
height: 2px;
margin-bottom: 72px;
}

 

[lauraahh]

Tip gebruik webkleuren ipv RGB kleuren

voorbeeld:#ffffff = wit

Ik krijg een tekstje er wel onder maar, dan staat je hover niet meer netjes. dus ik zou het niet weten.

 

[gebruiker78]

Ja precies, ik heb ook al veel dingen geprobeerd maar steeds gaat dan de hele layout aan de knoppen.

Maar waarom geen rgb gebruiken?

http://aonethemes.com/gretchen/ < daar staat het menu dat ik wil na maken.

 

[csshunter]

<li>
    <a href="#">Technology<br /> <!-- hier wil ik een klein regeltje onder -->
    Wonderen der toekomst</a>    <!-- hier zou 't moeten staan -->
        <ul>
            <li><a href="#2">PHP</a></li>
            <li><a href="#1">HTML</a></li>
        </ul>
</li>

Werkt zoiets niet?
Eventueel kan je om het regeltje heen een <span>...</span> zetten, zodat het regeltje een eigen stijl kan krijgen.

 

[gebruiker78]

Dit is het resultaat dat ik altijd krijg:


De tweede lijn (dus na de <br />) gaat steeds dan heeeeel ver naar beneden. Dit gebeurd ook als ik een <br /> na de <a> doe.
Ik dacht dat het lag aan de "display: block;" maar zelfs als ik dat even weg haal, gebeurd hetzelfde als in de foto.
En niet te vergeten dat dan het hele design aan de knoppen gaat.

Ik heb ook verschillende dingen met <span> geprobeerd maar het is me niet gelukt...

 

[csshunter]

Ik denk dat hier de hoofddader zit:

ul li {
    ...
    line-height: 75px;
}

Dat wil wel!

 

[gebruiker78]

Tuurlijk!
dat ik daar niet eerder aan had gedacht. Ik gebruikte dat om de tekst precies in het midden te houden (omdat vertical-align niet werkt).

Maar dan ziet ik nog met een klein probleempje.

De tekst kan ik nog wel naar het midden krijgen dat is geen probleem,
maar de tekst eronder "test" staat nu heeel ver van technology af...
Ik heb margin-top: -x px gedaan maar hij verplaats dan niet, ook met bottom: x px werkte het niet.

Dus hoe krijg ik die dan weer verder omhoog?

Alvast bedankt voor alle hulp!

<a href="#">Technology<br /><span style="font-size: 10px;">test</span></a>

Was nog even aan het "spelen geweest"

<span style="font-size: 10px;float:left;margin: -5px 0px 0px 65px;">test</span>

Ik denk dat er een nettere manier is om dit te doen?
+ het feit dat ik nou die margin-left zelf moet uitrekenen om in het midden te krijgen (al hoe wel de tekst niet zou gaan veranderen is dat maar 1x wat berekenen) maar ik denk dat daar nog wel iets op te verzinnen is...

Ik blijf zelf ook nog proberen

 

[csshunter]

Hoi David,
Voor verticaal centreren kan je een even grote padding-top en padding-bottom gebruiken: de line-height blijft dan onaangetast.

• Waarschijnlijk moeten dan wel alle knoppen een <br /> en een onderschrift krijgen om even hoog te worden.
• Maar de snelste manier is dan om de knoppen zonder onderschrift toch een <br /> te geven en een &nbsp; op de tweede regel.
• De oprechte semantologen zullen ervan gruwen, maar het werkt wel lekker simpel.

Met vriendelijke groet,
CSShunter

 

[gebruiker78]

MM, als u met knoppen "koppen" bedoelt dan begrijp ik het. Als het toch echt "knoppen" betekent, dan begrijp ik niet wat u nu zegt... (sorry?)

 

[csshunter]

Hoi David,

Jij bedoelt met "koppen" waarschijnlijk de vetgedrukte hoofdwoorden van de menu-items.
Ik bedoel met "knoppen": de 5 links/menu-items die in de stippellijntjes staan, de klikbare oppervlakjes. Hier zijn het tekst-knoppen, maar het zouden ook image-knoppen kunnen zijn.

Als ik "koppen" gebruik, dan bedoel ik de kopjes <h1>, <h2>, enz. boven een bepaald deel van een pagina.

Maar als je 't op jouw manier leest, dan kan je voor "knoppen" "koppen" zetten.

Met vriendelijke groet,
CSShunter

 

[csshunter]

Ai! In het Gretchen-template maken ze gebruik van een background-kleur voor het streepje bovenaan ipv een border, plus overal vaste hoogtes, fixed font-size, enz. ... Van dat soort dingen.
Hm-knor, niet echt handig, van templates moet je het ook niet altijd hebben!
Dan is niet zonder meer mogelijk wat ik zei, en moeten er wat "aanvullende werken" gebeuren.

• Test: knoppen-met-subtitels.htm
  Zie broncode voor de genomen maatregelen!

Met vriendelijke groet,
CSShunter

 

[gebruiker78]

harstikke bedankt,
ik heb het nu zo:

ul li span {
	font-size: 12px;
	top: -8px;
	position: relative;
}

Want anders stond het "slogan" er ver onder. (aangezien ik een klein lettertype gebruik)

Maakt niet uit dat het op die ene site anders is, dat was gewoon een voorbeeld Ik wil wel alles zelf doen en niet copy paste...

 

[gebruiker78]

Ik kan geen privé bericht sturen,
maar wat een ********ken die jouw site gehackt hebben. Waarom zou je bij iemand die zoveel tijd in iedereen steekt en helpt zoiets doen.

Mongolen zijn het,

David

 

[csshunter]

Hoi David,
Bedankt voor je bericht!

Ach, Mongolen kunnen er niets aan doen dat ze Mongolen zijn.
Hackers kunnen er wel iets aan doen dat ze hackers zijn.
Maar ik denk niet dat ze speciaal mij op het oog hadden: het ziet er uit als een inktvlek-hack-robot, die zwakheden in provider-servers opsnort en uitbuit. Het iframe in mijn gehackte pagina's (en gehackte javascripts!) gaat naar een deftig makelaarskantoor, dat op zijn beurt ook weer voorzien was van iframes...

Hoewel vegetariër, ik zou graag gehakt van ze maken!

Met vriendelijke groet,
CSShunter