Css Хелп

Sobieski

Sobieski

Well-Known Member
Значи направих си едно падащо меню drop-down само че нещо не ме кефи и искам да го направя като на http://health.yahoo.com ама цсс-а нещо си еб--а майката то си работи ама като му дам бордър и ми прави и бутоните на рамки а аз искам самото падащо меню по края как ще стане това?
 
От: Css Хелп

Знам че параноясваш вече да пускаш линкове, ама дай да видим за какво става въпрос щото иначе няма как да ти помогнем.
 
От: Css Хелп

Според мен последният бутон от всяко меню го слагай в отделен клас.
И на другите бутони им слагай бордър вляво и вдясно, а на тоя в отделния клас - вляво, вдясно и отдолу. Не съм го тествал, обаче би трябвало да помогне. :)

Edit: Ако мислиш няколко колонки да са в менюто, пак по същия начин само дето имаш и ъглови елементи, имаш елементи дето само отляво имат бордър, само отдясно...
 
Последно редактирано:
От: Css Хелп

например border-right:1px solid... така ли?
 
От: Css Хелп

точно :)
На всички без последния слагаш примерно
Код: 
border-left: 1px solid #666666;
border-right: 1px solid #666666

1px e дебелината на контура, solid e стила, другото е цвета - нагласяш си ги както искаш
а на последния тези двете си остават, и добавяш
Код: 
border-bottom: 1px solid #666666
Не съм го тествал, но логично е да стане. :)
Това е ако ще ти е от една колонка менюто. Ако са повече, ти трябва повече въображение. :)
 
От: Css Хелп

мерси много ще го пробвам... а иначе как мога да направя ховър-а като с мишката дам върху някой бутон да не го маркира целия ами както в яьу да остава малко разтояние в края
 
От: Css Хелп

Sobieski каза:
мерси много ще го пробвам... а иначе как мога да направя ховър-а като с мишката дам върху някой бутон да не го маркира целия ами както в яьу да остава малко разтояние в края
Увеличете...

предполагам че искаш да направиш нещо от сорта:


<style type="text/css">

.sobieski a { width:200px; display:block; background:eeeeee; border:1px silver solid; padding:4px 8px; font:12px/18px Trebuchet MS; text-decoration:none; }
.sobieski a:hover { background:#EEEEEE; text-decoration:underline; color:green; }

</style>

<div class="sobieski">
<a href="#" title="sobieski">sobieski 1</a><br />
<a href="#" title="sobieski">sobieski sobieski 2</a><br />
<a href="#" title="sobieski">sobieski 3 sobieski</a><br />
<a href="#" title="sobieski">sobieski 4</a><br />
<a href="#" title="sobieski">sobieski 5 sobieski sobieski</a><br />
<a href="#" title="sobieski">sobieski 6</a><br />
</div>
 
От: Css Хелп

е това е само пример, нормално е да ти се счупи дизайна - виж по какъв начин е css-a при теб :)

А за падинга - това е отместване навътре. В случая не той е възлов. В този случай фиксираме дължината - width:200px и правим така че елемента да се показва като блок - display:block

Само това е достатъчно в този случай - останалите неща са за красота :)

.sobieski a { width:200px; display:block; }
.sobieski a:hover { background:#EEEEEE; }

a:hover съм го сложила за да се види разликата
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе