Элемент DIV не охватывает все его содержимое

У меня проблема с div на моей странице. Это единственный, который у меня есть, и он охватывает середину моей страницы. С некоторыми трюками в CSS, я сделал это полностью.Элемент DIV не охватывает все его содержимое

Проблема, однако, является то, что видео (который находится внутри элемента DIV),, крадется, словно так:

enter image description here

Вот HTML:

<html> 
<head> 
<link rel="shortcut icon" href="Images/favicon.ico" /> 
<link rel="stylesheet" type="text/css" href="Style.css" media="screen" /> 
    <title>Arthur</title> 
    <meta content="text/html" charset="windows-1251"> 
    </head> 
<Body background="Images/background2.jpg"> 
<A Href="main.html"><IMG class="imgborder" src="Images/button.png" align="left"  height="50"></A> 
<div id="wrapper" style="background-color:black; width:60%; margin-left: auto ; margin-right: auto ;"> 

<center><img width="60%" src="Images/logo2.png"></center> 
<BR><BR> 
<center><img class="imgborder" height="300" src="Images/muller.jpg"></center> 
<Font size="5" color="crimson" face="Calibri"> 

<Center><P align="justify">... </P> 

<P align="justify">...</P> 

<P align="justify">...</P></Font></Center> 



<Center><iframe width="640" height="360" src="..." frameborder="5" 
allowfullscreen></iframe></Center> 
<Font size="5" color="crimson" face="Calibri"><P>Thomas Muller</P></font> 



</div> 
</body> 
</html>

И вот CSS:

@charset"utf-8"; 
/* CSS Document*/ 
/*This section is for links*/ 
a:link { 
    font-weight:normal; 
    color:crimson 
} 
a:visited { 
    font-weight:normal; 
    color:Crimson; 
} 
a:hover { 
    font-weight:bold; 
    color: Royalblue; 
    font-variant:small-caps; 
} 
/*This section is for a paragraph section*/ 
p { 
    font-style:normal; 
    font-size:18px; 
} 
blue { 
    color:crimson; 
} 
/*This section is for the image's black border.*/ 
.imgborder { 
    border-color: crimson; 
    border:thick; 
    border-style:outset; 
} 
.body { 
    background-color: #0000FF; 
} 
html, body { 
    height:100%; 
} 
#wrapper { 
    margin: 0 auto; 
    width: 990px; 
    height:100%; 
    overflow:hidden; 
    position:relative; 
} 
#navigation { 
    margin: 0 auto; 
    width: 990px; 
    height: 55px; 
    background-color: #fff; 
} 
#bottom Half { 
    margin: 0 auto; 
    width: 990px; 
    height: 100%; 
    background-color: #4d3c37; 
} 
div { 
    /* set div to full width and height */ 
    width: 100%; 
    height: 100%; 
} 
p { 
    margin-left:2cm; 
    margin-right:2cm; 
}

источник

2013-05-04 user2350028

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

Этот HTML-код! в последний раз был замечен в 1998 году – Ejaz

Единственное решение, которое я могу придумать, это вручную tweaki нг высоты черной рамки, или, возможно, добавив свойство

overflow: hidden;

к раме (в вашей довольно сложной для понимания системы тегов, я считаю, что это будет <Center>).

В настоящее время элемент <iframe> является переполненным из его родительского контейнера (черный ящик). Указав высоту для этого окна, вы можете управлять размером.

Указав overflow: hidden, вы можете скрыть переполнения бокса - таким образом, делая один из двух вещей:

Скрытие ничего, что просачивается из коробки, предотвращая элементы, которые больше, чем размер бокса, чтобы показать детали что будет казаться «несвязанным» по краям контейнера
Если элементы выбраны правильно с семантическим HTML, многими элементами, которые не связаны height и width автоматически размера себя, чтобы соответствовать их содержанию

Еще одно возможное решение - указать position: relative и/или float: none как для контейнера, так и для его детей, что иногда решает проблему.

Чтобы еще раз подчеркнуть, нам сложно выполнить тест и отладить код, который вы нам дали, поскольку он действительно устарел.

источник

2013-05-04 17:57:44

Не могли бы вы рассказать о том, почему это трудно понять (новичок в HTML, можно использовать некоторые советы). – user2350028

Ваш HTML не соответствует современным стандартам (см. Http://www.w3.org/html/ и http://www.w3.org/TR/html5/) - поэтому с этим трудно справиться. –

Используйте наследование для стилей видео. Атрибут стиля отображения может быть «наследовать», а также высоту и ширину.

источник

2013-05-04 18:03:06 V31

Как именно я наследую? – user2350028

style = 'display: inherit;' Ширина = «наследует» – V31

Элемент DIV не охватывает все его содержимое

ответ

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