CSS inline vs. block - padding ja margin

  • z-lin† 17 a

    Nii. Mul on vertikaalne list.
    <ul>
    <li><a>Link&lt ;/a></li>
    </ul>

    Probleem on selles, et tegin a block elemendiks, et saaks määrata paddingut/marginit. Seda omakorda selleks, et tekitada mouseover background pildi muutumine. Aga blockina tahab ta enda alla kindlameelselt hoida mingit ruumi. Olgugi et margin on 0.

    Lahendatud sain selle nii, et jätsin a inline-ks ning määrasin talle vasaku paddingu (bullet menüüelemendi ees). Ning elementidele endale panin piisava õhu li elementide paddinguga.

    Aga see lahendus ei tundu kuigi elegantne, või mis? Kuidas oleks mõtekam teha?

    21. august 2006 - 17:59:45 · Otselink

  • vaalaskala 17 a

    sa ul ja li marginid mõlemad nullisid?

    21. august 2006 - 19:07:34 · Otselink

  • berlioz 17 a

    .

    22. august 2006 - 01:09:06 · Otselink

  • z-lin† 17 a

    jah, marginid nullis:

    #contents_menu ul {
    margin: 0;
    padding: 0;
    position: relative;
    left: -3px;
    }
    #contents_menu li {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    #contents_menu li a {
    font-size: 1.2em;
    color: #333;
    border-bottom-style: none;
    padding-left: 25px;
    }
    #contents_menu li a:hover {
    background: no-repeat url(../designfiles/contents_menu_bullet.gif) left;
    }

    22. august 2006 - 11:31:11 · Otselink

  • z-lin† 17 a

    hmm, no selles koodis a ei ole block .. see on nüüd see lahendus mis visuaalselt andis sobiva tulemuse, kuid tahaks korrektsemalt :)

    22. august 2006 - 11:32:46 · Otselink

  • vaalaskala 17 a

    pane kogu fail kuskile ülesse debugime

    22. august 2006 - 11:37:54 · Otselink

  • z-lin† 17 a

    Nii,

    html: http://zlin.umedia.ee/temp/index_t2.html
    css: http://zlin.umedia.ee/temp/css/main.css

    Probleemne on see vasakpoolne vertikaalmenüü ning IE-s. FF on korras.

    22. august 2006 - 13:42:44 · Otselink

  • mj 17 a

    näiteks?

    22. august 2006 - 14:40:57 · Otselink

  • wuzz 17 a

    sellel probleemil on üsna mitu erinevat lahendust :) alates 1px/100% hackist kuni inline fixini välja :P

    22. august 2006 - 15:03:00 · Otselink

  • z-lin† 17 a

    hmm .. häkid on halvad :P antud juhul sobib siis ka kui padding panna li-le ning a jätta inline-ks.

    22. august 2006 - 15:11:02 · Otselink

  • wuzz 17 a

    häkid on head kui õigeid häkke kasutada. ja padding mujale panna pole ilus lahendus. pigem pane li inlineks ja a blockiks.

    22. august 2006 - 15:48:56 · Otselink

  • z-lin† 17 a

    hmm, olen alati üritanud häkke vältida :) aga oskad kiirelt suunata kuskile, kust saaksin lugeda?

    22. august 2006 - 16:27:08 · Otselink

  • kerttuperttu† 17 a

    22. august 2006 - 16:44:21 · Otselink

  • z-lin† 17 a

    jess

    22. august 2006 - 16:49:28 · Otselink

  • bootie† 17 a

    Aitab see, kui sa kirjutad terve koodi 1 PIKKA RITTA!
    <ul><li>kkk</li>&lt ;li>kkk .... ... </li></ul>

    Anna palun teada, kas aitas.

    IE Sucks. :)

    23. august 2006 - 12:17:01 · Otselink