2
Хорошо, так что позвольте мне сказать, что я действительно новичок в кодировании веб-сайтов. При попытке Google мой путь вокруг проблемы полностью провалился, пытаясь исправить это ... ха-ха. Так что извините, если раньше были заданы подобные подобные вопросы.Текст, кровоточащий вне элемента
Задача: Содержимое моей новости div истекает вне элемента. Я получил SOMEWHAT ближе к его решению, добавив переполнение: скрытый в родительский div (wrap). Это устранило кровотечение поверх моего фонового изображения, но оно все еще течет от элемента, а не уменьшает его.
Вот мой HTML:
<body>
<div id="wrap">
<div id="nav" >
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="recent" align="center">
<ul>
<li><img src="images/ex1.jpg" width="136" height="72" alt="Example1" /></li>
<li><img src="images/ex1.jpg" width="136" height="72" alt="Example2" /></li>
<li><img src="images/ex1.jpg" width="136" height="72" alt="Example3" /></li>
<li><img src="images/ex1.jpg" width="136" height="72" alt="Example4" /></li>
</ul>
</div>
<div id="spacer" >
<img src="images/recentproj.jpg" width="700" height="22" alt="Recent projects" />
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam. </p>
</div>
<div id="news">
<ul>
<li><a href="#">Newssssssss!</a></li>
<li><a href="#">HUGE ANNOUNCEMENT COMING UP RANODMLY BLAH BLAH BLAH</a></li>
<li><a href="#">WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO</a></li>
<li><a href="#">Raaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaandom</a></li>
<li><a href="#">OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO</a></li>
</ul>
</div>
<div id="footer">
</div>
</div>
</body>
CSS:
body {
background: #FFFFFF url(images/background.jpg) no-repeat center top;
}
#wrap {
width:785px;
margin:0 auto;
overflow: hidden;
}
#nav {
width: 768px;
height: 40px;
margin: 40px auto;
background: #fff;
}
#nav ul {
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
}
#nav li {
display:inline;
padding:28px;
}
a:link,a:visited {
font-weight:bold;
color:#1f8fbc;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active {
background-color:#26acdb;
color: #FFF;
}
#recent {
margin: 255px auto 5px;
}
#recent ul li {
display: inline;
padding-right: 25px;
}
#spacer {
width: 700px;
height: 22px;
margin: 0px auto;
padding: 0;
}
#content {
float: left;
width: 470px;
padding: 0px;
margin: 0px;
background: #FFF;
}
#news {
float: right;
width: 310px;
padding-right: 5px;
margin: 0;
background: #FFF;
}
Любой вид решения помощи, что было бы удивительно .... плюс, если в значительной степени все, что я сделал это сделайте глупо, ПОЖАЛУЙСТА, скажите мне. haha
Спасибо!
Не забудьте принять полезный ответ! :) – SamStar