Jump to content
  • 0

не работает border


mastermedia
 Share

Question

Хочу установить следующие границы для блока #header с помощью свойств. Но данные свойства не работают и не создают границы. В чем может быть проблема?

border-top: 3px solid 1c1211;
border-bottom: 1px solid 1c1211;

Весь HTML и CSS код:


#wrap {
width: 1000px;
margin: auto;
margin-top: 20px;
}
#header {
border-top: 3px solid 1c1211;
border-bottom: 1px solid 1c1211;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrap">
<div id="header">
<div id="header_top">
<img src="img/logo.png" alt="logo">
<div class="phNumber">
<p>321 45 98</p>
<p>Phone number</p>
</div>
</div>
<!--#header_top-->

<div id="header_bottom">
<ul class="menu">
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Vacancy</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Files</a></li>
</ul>
</div>
<!--#header_bottom-->
</div>
<!--#header-->

<div id="content">
<h1>Praesent eget nulla elit</h1>
<div class="post">
<p>Today</p>
<h2><a href="#">Ut bibendum faucibus faucibus</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id sem justo, sed porta ante. Proin facilisis aliquet congue. Etiam egestas erat vel nunc dignissim sodales. Sed pellentesque, risus eu sagittis laoreet, arcu lorem auctor magna, nec pellentesque diam lorem et augue. Pellentesque luctus gravida venenatis. Nullam vulputate, orci vitae laoreet posuere, purus nibh aliquet nisi, nec sodales risus mauris eu dolor. Vivamus eleifend lorem ac elit mollis porta. Nulla facilisi. Donec neque nisl, hendrerit nec ultrices vitae, viverra congue risus. Nunc rutrum aliquet viverra. Maecenas ut turpis lectus. Proin ut nibh urna, a blandit ipsum. Proin est ante, lobortis at elementum vitae, dignissim vel sapien. In hac habitasse platea dictumst. Cras eget nibh eros, in blandit lacus. Proin commodo justo et velit hendrerit et malesuada tortor feugiat.
Lorem ipsum dolotr sit amet, consectetur adipiscing elit. Ut id sem justo, sed porta ante. Proin facilisis aliquet congue. Etiam egestas erat vel nunc dignissim sodales. Sed pellentesque, risus eu sagittis laoreet, arcu lorem auctor magna, nec pellentesque diam lorem et augue. Pellentesque luctus gravida venenatis. Nullam vulputate, orci vitae laoreet posuere, purus nibh aliquet nisi, nec sodales risus mauris eu dolor. Vivamus eleifend lorem ac elit mollis porta. Nulla facilisi. Donec neque nisl, hendrerit nec ultrices vitae, viverra congue risus. Nunc rutrum aliquet viverra. Maecenas ut turpis lectus. Proin ut nibh urna, a blandit ipsum. Proin est ante, lobortis at elementum vitae, dignissim vel sapien. <a href="#">CONTINUE</a>
</p>
</div>
<!--.post-->

<div id="border"></div>
<!--#border-->

<div class="post">
<p>Tomorrow</p>
<h2><a href="#">Vivamus neque turpis, sollicitudin sit amet sollicitudin vel</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id sem justo, sed porta ante. Proin facilisis aliquet congue. Etiam egestas erat vel nunc dignissim sodales. Sed pellentesque, risus eu sagittis laoreet, arcu lorem auctor magna, nec pellentesque diam lorem et augue. Pellentesque luctus gravida venenatis. Nullam vulputate, orci vitae laoreet posuere, purus nibh aliquet nisi, nec sodales risus mauris eu dolor. Vivamus eleifend lorem ac elit mollis porta. Nulla facilisi. Donec neque nisl, hendrerit nec ultrices vitae, viverra congue risus. Nunc rutrum aliquet viverra. Maecenas ut turpis lectus. Proin ut nibh urna, a blandit ipsum. Proin est ante, lobortis at elementum vitae, dignissim vel sapien. In hac habitasse platea dictumst. Cras eget nibh eros, in blandit lacus. Proin commodo justo et velit hendrerit et malesuada tortor feugiat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id sem justo, sed porta ante. Proin facilisis aliquet congue. Etiam egestas erat vel nunc dignissim sodales. Sed pellentesque, risus eu sagittis laoreet, arcu lorem auctor magna, nec pellentesque diam lorem et augue. Pellentesque luctus gravida venenatis. Nullam vulputate, orci vitae laoreet posuere, purus nibh aliquet nisi, nec sodales risus mauris eu dolor. Vivamus eleifend lorem ac elit mollis porta. Nulla facilisi. Donec neque nisl, hendrerit nec ultrices vitae, viverra congue risus. Nunc rutrum aliquet viverra. Maecenas ut turpis lectus. Proin ut nibh urna, a blandit ipsum. Proin est ante, lobortis at elementum vitae, dignissim vel sapien. In hac habitasse platea dictumst.
<a href="#">CONTINUE</a>
</p>
</div>
<!--.post-->
</div>
<!--#content-->

<div id="footer">
<p>All rights reserved</p>
</div>
<!--#footer-->
</div>
<!--#wrap-->
</body>
</html>

Edited by mastermedia
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy