Проблемы с форматированием HTML/CSS

Я работаю над заданием, которое дает мне печаль. Я должен сделать красную рамку, соответствующую цвету изображения. Предполагается, что этот квадрат находится на странице. Коробка должна быть 80% страницы. Изображение должно находиться внутри коробки. Предполагается, что изображение должно быть 80% ширины BOX, в котором он находится. Изображение должно быть по центру по вертикали. Я пытаюсь сделать это с помощью CSS. Вот мой код. Что мне не хватает?Проблемы с форматированием HTML/CSS

HTML:

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 

    <body> 
     <div class="box"> 
      <ul> 
       <li> 
        <a href="http://blackhawks.nhl.com/"> 
         <img src="http://www.wallpaperpimper.com/wallpaper/Hockey/Chicago_Blackhawks/Chicago-Blackhawks-Blackhawks-Logo-1-JPS6RQXFBC-1024x768.jpg"> 
        </a> 
       </li> 
      </ul> 
     </div> 
    </body> 
</html>

CSS:

.box { 
    width: 80%; 
    background-color: #dd111; 
    margin-left: auto; 
    margin-right: auto; 
} 
.box ul { 
    margin-left:auto; 
    margin-right:auto; 
} 
.box ul li { 
    width: 80%; 
    vertical-align: middle; 
}

источник

2012-01-10 YoungGuy

Домашнее задание? –

Да, это домашнее задание. – YoungGuy

По какой-либо причине это в списке? Сам список без сброса испортит вам выравнивание. –

Если список не является необходимым вы могли бы сделать это. Если вы хотите использовать список, необходимо установить уль отступы и поля 0.

<style type="text/css"> 

    .box { 
     width:80%; 
     margin:0 auto 0 auto; 
    } 

    img { 
     width:80%; 
     margin:0 auto 0 auto; 
     display:block; 
    } 

    .box-stripe { 
     width:80%; 
     height:15px; 
     margin:0 auto 0 auto; 
    } 

    </style> 


    <body> 

    <div class="box"> 

    <div class="box-stripe"></div> 

    <img src="yourimage.png" alt="" /> 

    <div class="box-stripe"></div> 

    </div> 

    </body>

Или, если вы предпочитаете список вы могли бы сделать что-то вроде этого. В любом случае, вы должны закрыть вас.

<style type="text/javascript"> 

.box { 
width:80%; 
margin:0 auto 0 auto; 
} 

.box ul { 
width:80%; 
margin:0 auto 0 auto; 
padding:0px; 
display:block; /*may not need to do this but I don't think a UL is a block element */ 
} 

.box ul .box-stripe { 
width:100%; 
display:block; 
height:15px; 
padding:0px; 
margin:0px; 
} 

.box ul .img { 
width:100%; 
display:block; 
padding:0px; 
margin:0px; 
} 

</style> 



     <body> 

      <div class="box"> 

      <ul> 

      <li>class="box-stripe"></li> 

      <li class="img"><img src="yourimage.png" alt="" /></li> 

      <li class="box-stripe"></li> 

      </ul> 

      </div> 

     </body>

Каждый браузер обрабатывает HTML-элементы по-разному с точки зрения заполнения, поля, высоты строки и т. Д. Вот почему я рекомендую сброс CSS. И у большинства UL есть пополнение.

источник

2012-01-10 21:53:55

Я буду пересматривать, чтобы попытаться сопоставить то, что вы делаете. –

Проблема заключается в том, что полосы не отображаются, но если я изменяю код, он отображает полосы с шириной поля, и я не могу переместить черные полосы вниз, чтобы накладываться на изображение. – YoungGuy

У вас есть URL-адрес или jsfiddle, на которые я мог бы смотреть? Или, возможно, повторно разместите свой текущий код. –

Я не уверен, если вам нужно ul и li по какой-то причине, но главное вам не хватает в том, что img является не задана ширина.

Если img не имеет ширины, он будет использовать собственную ширину изображения и растянуть его контейнер. В случае вашего текущего html (с ul) вам нужно будет дать изображение шириной 100%, так как li уже установлен на 80%.

источник

2012-01-10 21:48:16

Ну, я использую Список, потому что мне нужно будет разместить 2 коробки в коробке ...один над изображением и один ниже ... но внутри красного ящика. – YoungGuy

@YoungGuy - помните, что вы можете также окрасить границы. Таким образом, вы можете создавать свои полосы, используя их вместо этого. – mrtsherman

Благодарим вас! – YoungGuy

Попробуйте включить границы (или используйте инструменты разработчика Firebug или Chrome для проверки ваших элементов). С границами я думаю, что становится намного более очевидным, почему вещи не расположены так, как вы думаете.

http://jsfiddle.net/2vWY3/1/

источник

2012-01-10 21:50:56 mrtsherman

Это выглядит так, хотя я не уверен, что коробка должна быть 80 или 100% от высоты страницы.

http://jsfiddle.net/GolezTrol/ZLUGg/2/

Я изменил цвет коробки и размер изображения для тестирования/демонстрации. Легко развивается.

источник

2012-01-10 21:59:42 GolezTrol

Проблемы с форматированием HTML/CSS

ответ

Смежные вопросы