Menu
I'm trying to add a 1px border to the bottom of my header div but it isn't displaying.
Can anyone help?
Is it something to do with me adding a specified height to the header div?
Or something to do with collapsing margins? Or both?!
Here's what I have in the CSS...
@charset "UTF-8";
body {
font: 100%/1.4;
background-color:#FFF;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
h1 {
font-family: 'Abel', Arial, sans-serif;
font-size:24px;
}
h2 {
font-family: 'Abel', Arial, sans-serif;
font-size:18px;
}
p {
font-family: 'Cutive Mono', Georgia, serif;
font-size:14px;
}
#home #homelink,
#aboutus #aboutuslink,
#ourwork #ourworklink,
#contactus #contactuslink {
font-family: 'Abel', Arial, sans-serif;
color: #494949;
font-size:17px;
text-decoration:none;
}
#mainNav {
margin: 0;
padding: 0;
list-style: none;
}
#mainNav li {
float: left;
padding: 40px 20px 0 20px;
}
#mainNav li:first-child {
border-left: 0px;
padding-left: 0px;
}
#mainNav a {
font-family: 'Abel', Arial, sans-serif;
color: #666;
font-size:17px;
text-decoration:none;
padding: 0 20px 0 20px;
}
#mainNav a:hover {
color:#FFF;
background-color: #494949;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 1352px;
background-image:url(Images/sktchbook-bgd.jpg);
background-repeat:no-repeat;
margin: 0 auto;
}
.header {
width: 780px;
height: 82px;
margin-left:90px;
margin-right: 90px;
border-bottom: 1px #494949;
}
.sidebar-logo {
float: left;
width: 70px;
}
.subcontainer {
width: 980px;
min-height: 880px;
margin: 0 auto;
}
.content {
padding: 10px 0;
margin-left:90px;
margin-right:90px;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
and the HTML...
<body>
<div class="container">
<div class="subcontainer">
<div class="header">
<div id="mainNav">
<ul id="mainNav">
<li class="firstitem"><a href="#" id="home" target="_self">Home</a></li>
<li><a href="#" id="aboutus" target="_self">About Us</a></li>
<li><a href="#" id="ourwork" target="_self">Our Work </a></li>
<li><a href="#" id="flashlink" target="_self">Contact Us </a></li>
</ul>
</div>
</div>
<div class="sidebar-logo"><img src="Images/k-blondel-design-logo.png" width="64" height="108" alt="K Blondel Design logo" />
</div>
<div class="content">
<h1>Instructions </h1>
<p>At K Blondel Design we aim to fill the gap between the over exuberant furniture maker and the general carpenter. Trained in the art of creating affordable and elegant solutions to 3D problems.</p>
<p>As a small business we are able to deliver a personal one to one design service, talking through various design and material possibilities and arriving at an affordable, bespoke and stylish solution.</p>
<p>From design through to construction and installation we specialise in storage solutions, furniture and interiors for both the domestic and commercial markets. </p>
<p>We have 20 years' design and commercial experience and an ever-growing client list spanning Sussex, Hampshire, London and Kent.</p>
<!-- end .content --></div>
<!-- end .subcontainer --></div>
<!-- end .container --></div>
</body>
</html>
440
you should mention border style eg.solid:
.header {
width: 780px;
height: 82px;
margin-left:90px;
margin-right: 90px;
border-bottom: 1px solid #494949;
}
jsfiddle
97
Try this style
border-bottom: 1px solid #494949;
or
border-bottom: 1px dotted #494949;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With