Как центрировать HTML DIV с логотипом слева?

я хочу центрировать div с именем #top_menu

<div id="top_menu">This is the menu and it is in the middle of the page</div>

CSS-код:

#top_menu { margin: 0 auto; width: 600px; ... }

Слева от верхнего меню должен быть логотип (#logo)

Это то, что у меня есть до сих пор:

#logo { position: absolute; top: 0px; left: 10px; width: 200px }

А теперь проблема

Если у меня есть окно браузера размером менее 800 пикселей, центральный элемент div перекрывает элемент логотипа. Было бы неплохо, если бы вместо них были полосы прокрутки. Как мне это сделать?

Заранее спасибо! Фредди


html layout css center graphical-logo
person Freddy    schedule 11.03.2011    source источник
comment
Не могли бы вы создать для нас пример на jsfiddle.net?   -  person fabsn    schedule 11.03.2011
comment
Чтобы увидеть его в действии: beta.sportpreis24.de   -  person Freddy    schedule 11.03.2011
comment
Спасибо. Теперь, где должен появиться логотип? В левой части меню, за пределами этих 600 пикселей или внутри, но сдвинув меню вправо?   -  person fabsn    schedule 11.03.2011
comment
Оно всегда должно отображаться в верхнем левом углу (вверху: 0px, слева: 0px;), не сдвигая меню вправо. За пределами этих 600px.   -  person Freddy    schedule 11.03.2011

Ответы (3)


arrow_upward
1
arrow_downward

Сделай это,

#top_menu{
    width:800px;
    margin:0 auto; 
    border:1px solid red;
    display:block;
}

#logo { 
    float:left;
    width: 200px;
    height:50px;
    background:white url(logo.png) no-repeat 0 0
}

Теперь ваши div не будут перекрываться, когда размер окна меньше.

Проверьте рабочий пример на http://jsfiddle.net/WV8q7/3/.

person Hussein    schedule 11.03.2011

arrow_upward
1
arrow_downward

попробуйте это (в css):

#top_menu { overflow: auto; }

Разумеется, тег вашего логотипа должен быть внутри тега div.

person Réjôme    schedule 11.03.2011
comment
Хорошо, теперь логотип внутри коробки. я пытался { position: absolute; слева: 0} ничего. логотип остался внутри коробки. - person Freddy; 11.03.2011

arrow_upward
1
arrow_downward

Понятно:

#logo
{
    float: left;
}

А ТАКЖЕ

#top_menu
{
    margin: 20px auto 0;
    height:29px;
    width: 602px;
}

HTML

<div id="logo"><img src="<?=site_url('img/logo.jpg')?>" /></div>

        <div id="top_menu">



            <ul id="top_links">
                <li><a href="<?=site_url()?>">Startseite</a></li>
                <li><a href="<?=site_url('static/impressum')?>">Impressum</a></li>
            </ul>
        </div>
person Freddy    schedule 11.03.2011