HTML плавающий справа

Question

HTML плавающий справа

0

Hy, я очень новичок в программировании html, и я пытаюсь создать сайт. Проблема в том, что я не понимаю, почему я получаю пустое пространство справа от моего меню и изображения, хотя я установил ширину на 100%. Я использую Google Chrome. Вот код html:

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
    <title>Home</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href = "#">Contact</a>

            </li>
            <li><a href = "#">Muzica</a></li>
            <li><a href = "#">Evenimente</a>
                <ul>
                    <li><a href = "#">Intalnire cu fanii</a></li>
                    <li><a href = "#">Concerte</a></li>
                    <li><a href = "#">Lansari</a></li>
                </ul>
            </li>
            <li><a href = "#">Bio</a>
                <ul>
                    <li><a href = "#">Formatia</a></li>
                    <li><a href = "#">Istoric</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <div>
        <img src = "beregratis.jpg" height=100% width=100% />
    </div>
</body>
</html>

Вот код css:

nav ul ul
{
    display: none;
}

nav ul li:hover > ul
{
    display: block;
}
nav ul
{
    width:100%;
    margin-left:-10px;
    margin-top:-10px;
    margin-right:0px;
    background: #A0A0A0 ; 
    border-style:solid;
    border-color:#404040;
    padding: 0 0px;
    list-style: none;
    position: relative;
    display: inline-table;
}
nav ul li
{
    float: right;
}
nav ul li:hover
{
    background: #4b545f;
}
nav ul li:hover a
{
    color: white;
}

nav ul li a 
{
    display: block;
    padding: 25px 40px;
    color: #757575;
    text-decoration: none;
}
nav ul ul
{
    width:auto;
    background: #4b545f;
    border-radius: 0px;
    margin-top:0px;
    margin:auto;
    margin-left:0px;
    padding: 0;
    position: absolute;
    top: 100%;
}
nav ul ul li
{
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
nav ul ul li a 
{
    padding: 15px 40px;
    color: #757575;
}   
div
{
    margin-top: -20px;
    margin-left: -10px;
}

И вот ссылка на изображение: http://www.beregratis.ro/images/bere_gratis_2011_02.jpg

web-tiki 16 апр. 2014, в 16:16

Источник

Теги:

html

css

4 ответа

3

1) Добавить

  html, body {
    margin: 0;
    padding: 0;
  }

Это приведет к удалению значений по умолчанию для браузера для элемента html и body.

2) Для меню, пожалуйста, удалите

margin-left:-10px; внизу nav ul.

Поля -10px слева вытаскивают меню влево

bsapaka 16 апр. 2014, в 11:58

0

И, если позволите , это результат ваших изменений: jsfiddle.net/webtiki/3ZTaP/11 вы пропускаете отрицательное поле на div ведьме, которое является причиной пробела справа на изображении.
web-tiki 16 апр. 2014, в 14:42
0

@MateiVlad не имеет значения. bsapaka, было бы неплохо отредактировать твой пост, хотя бы ты полностью ответил на вопрос.
web-tiki 16 апр. 2014, в 15:02

0

Попробуйте использовать сброс CSS для всех браузеров, которые ведут себя одинаково. Я просто попытался удалить отрицательный margin-left в ul, и пространство исчезло. Вот код http://jsfiddle.net/qE69s/

Djouuuuh 16 апр. 2014, в 13:18

0

попробуйте с сбросом css, их много, как этот http://nicolasgallagher.com/about-normalize-css/

padding: 0;}, который сбрасывает все элементы в поле и заполнение 0, если у вас есть такая проблема, лучше всего использовать программу разработчика из вашего браузера, перейти к метрикам и посмотреть, что это пустое пространство, в например, google chrome, если это пространство появляется зеленым цветом, это паддлин, если он оранжевый - это маржа

user3523976 16 апр. 2014, в 12:57

Ещё вопросы

И, если позволите , это результат ваших изменений: jsfiddle.net/webtiki/3ZTaP/11 вы пропускаете отрицательное поле на div ведьме, которое является причиной пробела справа на изображении.
@MateiVlad не имеет значения. bsapaka, было бы неплохо отредактировать твой пост, хотя бы ты полностью ответил на вопрос.

web-tiki · Accepted Answer · 2014-04-16T12-52-00.000Z

Прежде всего, вы должны добавить html,body{margin:0;} как некоторые браузеры добавляют маржу к этому элементу.

Основная проблема, с которой вы сталкиваетесь:

Вы добавляете отрицательный margin-left на несколько элементов (.nav ul и .div), чтобы они не могли пройти весь путь вправо, и поэтому справа от изображения и навигационной панели есть пробел.

Вот ваш код, который я исправил в этом FIDDLE