Problem z merami linka
3 naročniki
3 naročniki
Imam problem, naredit poskušam vodoravni meni.
#meni a {
color:#470c00;
font-size: 14px;
display:block;
height:31px;
width:150px;
font-weight:bold;
padding:0px 10px 0px 10px;
}
Ko to naredim, mi linke naredi navpično, tako da niso več vodoravno(enega pod drugim). Če dodam ukaz display:inline; pa seveda več ne upošteva ukaza disply:block;
Kako naj dosežem, da obdržim mere linka, in jih še zmeraj imam postavljene v ravno linijo (vodoravno).
Hvala za pomoč!
LP
11 odgovorov
če imaš v unordered list (<ul>) potem je trik v display:inline; , če ne potem pa kot je rekel vini float:left; vendar je boljša praksa, da to daš v unordered list.
#meni ul{
list-style:none;
}
#menu li{
display:inline;
}
#meni a {
color:#470c00;
font-size: 12px;
display:inline-block;
font-weight:bold;
padding:3px 10px 3px 10px;
}
SpinX, inline elementom ne mores dolocati width in height, v tem je problem, inline-block pa tudi ni podprt v vseh browserjih, pa bo lahko s tem imel probleme.
Malo vec o tem, katere vrednosti display propertyja so podprte v katerem browserju, pa tukaj:
http://www.quirksmode.org/css/display.html
To, da bi rad imel točno določen width pa nisem pomislil.. Potem je res najbolje, da floata v eno smer in doda mal margina, da se ne držijo skupaj.
kako pa jih centriram ko nastavim float? To jih premakne v levo ali desno... ali ne?
inline-block, pa mi v firefoxu premakne vse skupaj malce gor... in pol čudno zgleda :S
Newbe, poglej recimo naslednjo kodo:
<html>
<head>
<style>
div#meni {
width: 1000px;
text-align: center;
background-color: #A0A0A0;
height: 50px;
}
div#meni div {
width: 416px;
margin: 0 auto;
background-color: #909090;
height: 34px;
}
div#meni a {
display: block;
float: left;
width: 100px;
height: 30px;
background-color: silver;
margin: 2px;
}
</style>
</head>
<body>
<div id="meni">
<div>
<a href="">lorem</a>
<a href="">ipsum</a>
<a href="">dolor</a>
<a href="">sit</a>
</div>
</div>
</body>
</html>
Ce ti malo pokomentiram, kaj sem naredil:
DIV z idjem "meni" je sirok 1000 pixlov, recimo, da bo toliko sirok cel tvoj menu. Znotraj tega DIVa sem dal se en DIV, ki ga bomo uporabili izkljucno za to, da zadevo poravnamo na sredino. Tiste anchorje (A tage) znotraj sem dal display: block in float: left, sirine 100px in margina 2px. Tisti DIV okoli njih mora biti torej 4x100px + 4x4px (2px+2px, levo in desno), to je 416px. Sredinsko poravnavo dosezem tako, da v DIVu z idjem "meni" recem text-align: center, notranjemu DIVu pa recem margin: 0 auto, tale auto, ki drzi za levo in desno povzroci, da browser sam izracuna enaki vrednosti za levi in desni margin in zadevo posledicno pomakne na sredino.
Slaba stran te resitve je, da moras v CSSju vedeti, koliko anchorjev imas v menuju, da lahko izracunas sirino notranjega DIVa.
Vsekakor se da zadevo resiti tudi kako drugace, to je resitev, ki mi je prva padla na pamet. Upam, da razumes, kaj sem naredil, ce ne, vprasaj :)
(tisti background-color so notri le zato, da vidis, kje je kaksen DIV, barve, visine in sirine seveda naredi po svoje)
Hvala, zelo lepo napisano. Hvala ti res za tvoj cajt, maš pir v dobrem če prideš kdaj na ptuj :)
Ampak mi zadeva ni všeč, ker so linki dolgi različno dosti texta, ina bi rad, da se dolžina prilagaja textu. Ni mi toliko pomembno, da je link v "block", kot to, da je levo in desno od texta enako dosti prostora ko gre nehče čez link in se v ozadju spremeni barva.
Nejasno, vem. Grem kar na primer.
Tukaj je link: click
Za ozadje menija sem ustvari div visok 31 px, torej div id="meni" .
nato sem vanj kar napisal linke:
<div id="meni"><a href="index.html">O NAS</a><a href="index.html">DOGODKI</a><a href="index.html">NOVICE</a><a href="index.html">KONTAKT</a></div>
Potem sem v css nastavil takole:
#meni a {
color:#470c00;
font-size: 14px;
height:21px;
font-weight:bold;
padding:5px 10px 5px 10px;
}
#meni a:hover {
color:#bda28b;
background:url(images/hover.gif) center repeat-x;
}
Enostavno rešen problem, ozadje se prilagodi textu, plus 5 px v vsako stran. Todaj problem se pojavi, ker mi v firefoxu zadevo premakne navzgor (glejte link prosim). V IE pa je ne premakne navzgor, ampak se prikaže slike (ozadja linka), do dna diva. Slika je visoka 31px tako kot div.
Upam da sem uspel razložit kaj bi rad dosego. Torej da se pri prehodu čez link v ozadju pokaže slika, kot se to zgodi na strani (glej link prosim), ampak da je v enaki poravnavi kot div, tako da se ustvari efekt, pobarvanja znotraj teh dveh belih črt.
Za pomoč se zahvaljujem, in res, če prideš kdaj na ptuj pošli pm pa se zmenima za kaki pir :D al pa dva :D
to kar si naredil s <center> za celo stran jaz ne bi priporočal :)
evo sem na hitr skup vrgu, da boš vsaj videl kako približno se dela. Pa poglej kako je narejeno ne pa samo uporabit.
http://www.bloganje.com/newb.rar
aja pa odstran tiste pink backgrounde :D
Treba mal pomagat :) Čeprav sem v zadnjem tednu tok delal, da mam tega xhtmlja in CSSja dost za pol leta :)