Задаване на размер на div

[qazxsw]

Имам следния меню div: http://prikachi.com/images/269/6523269O.jpg

Хоризонталната линия от долу е всъщност border line-a на div-a в който се намира менюто:

<div class="menu">

<div class="item left"><a href="files.php"><img src="save_48.png" class="menuImages" alt="" /><br />Files</a></div>
<div class="item left"><a href="stats.php"><img src="statistics_48.png" class="menuImages" alt="" /><br />Your Stats</a></div>
<div class="item left"><a href="logout.php"><img src="home_48.png" class="menuImages" alt="" /><br />Logout</a></div>
<div class="item left"><a href="logout.php"><img src="home_48.png" class="menuImages" alt="" /><br />Logout</a></div>
			
<br class="clear" /><br />
</div>

Това което искам да направя е от долу 2-та <br /> тага да ги няма.
Понеже не знам CSS не ми е ясно какъв е кода който трябва да добавя, че да заместя тези 2 br тага.

Благодаря предварително.

 

[gamehack]

Здравей, ще може ли да обясниш малко по наясно защото от това което разбрах е , че искаш да махнеш тези 2 <br /> най отдолу.А за да махнеш тези бр-та ги изтрий просто от самия файл ? Или искаш да заместиш тези разстояния с css ?

 

[deam0n]

.menu { padding-bottom: 40px; }

 

[nqkafff]

че да заместя тези 2 br тага.

човека си го каза точно. Може да използваш margin - http://www.w3schools.com/css/css_margin.asp

edit: ако искаш да изместиш нещо, което е във дива ти ползвай padding - http://www.w3schools.com/css/css_padding.asp, не ги смесвай с margin

 

[deam0n]

че да заместя тези 2 br тага.

човека си го каза точно. Може да използваш margin - http://www.w3schools.com/css/css_margin.asp

edit: ако искаш да изместиш нещо, което е във дива ти ползвай padding - http://www.w3schools.com/css/css_padding.asp, не ги смесвай с margin

Съдейки по това къде се намират тези <br />, magin няма да има такъв ефект.

 

[nqkafff]

да, когато писъх мнението, ти си ме изпреварил :?:

 

[Fakeheal]

Ето ти "the right way" меню:
http://jsfiddle.net/FakeHeal/EcKRs/

HTML:

<div id="menu-holder">
    <ul id="menu">
        <li> <a href="#">
            <img src="https://cdn1.iconfinder.com/data/icons/jigsoar-icons/48/_home.png" alt="" />
            Home
        </a>

        </li>
        <li> <a href="#">
            <img src="https://cdn1.iconfinder.com/data/icons/jigsoar-icons/48/_home.png" alt="" />
            Home LONG LINK
        </a>

        </li>
        <li> <a href="#">
            <img src="https://cdn1.iconfinder.com/data/icons/jigsoar-icons/48/_home.png" alt="" />
            Home
        </a>

        </li>
        <li> <a href="#">
            <img src="https://cdn1.iconfinder.com/data/icons/jigsoar-icons/48/_home.png" alt="" />
            Home
        </a>

        </li>
        <li> <a href="#">
            <img src="https://cdn1.iconfinder.com/data/icons/jigsoar-icons/48/_home.png" alt="" />
            Home
        </a>
        </li>
    </ul>
    <div class="clear"></div>
</div>

CSS:

#menu-holder {
    border-bottom: 1px solid black;
    padding-bottom: 40px;
}

#menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: Verdana;
}
#menu li {
    text-align: center;
    float: left;
    margin: 0 10px 0 10px;
}
#menu li a {
    color: #000;
    display: block;
    text-decoration: none;
    margin: 2px 0 0 0;
}
#menu li a img {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto;
}

.clear {
    clear: both;
}