Menu
I'm struggling to find a direct answer to my problem due to the many variations in peoples code.
I imagine my code is probably very messy as i'm trying to build a website for my partner, and quickly (i have just a few hours Dreamweaver experience and that's it)!
Anyway, i have a fixed width website where there are around 6 separate divs in a column, all contained within a webpage-sized div for my background colour.
Anyway, when i am trying to add a border to my footer, it does not display in browsers. I just wan 1px to separate the 'main' div from the footer and it won't appear. This is also the same for my navigation div.
body{
color:#00000;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}
#body{
background-color:#000000;
}
#header{
width:800px; /* The width is fixed by pixels */
height:150px; /* The height is fixed by pixels*/
color:#fff;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
}
#navigation {
width:798px;
height:51px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:1px;
border-color:#000000;
text-align:center;
background-color:ffffff;
}
#main {
width:798px; /* The width is fixed by pixels */
height:800px; /* The height is fixed by pixels*/
color:#fff;
background-color:#fff;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:0px;
border-color:#000000;
text-align:center;
}
#footer {
/*Styling for any element with the id="container" */
width:798px; /* The width is fixed by pixels */
height:100px; /* The height is fixed by pixels*/
color:#fff;
background-color:#fff;
margin-left: auto;
margin-right:auto;
border-style:solid;
border-left:1px;
border-right:1px;
border-bottom:1px;
border-top:1px;
border-color:#000000;
}
#Facebook {
float:right;
}
#Twitter {
float:right;
}
#LinkedIn {
float:right;
}
</style>
</head>
<body>
<div id="body">
<div id="header">
<a href="Home.html"><img src="Images/Logo.jpg" alt="Ruth Fifer Jewellery"> </a>
</div>
<div id="main">
<div id="navigation">
<br />
</div>
<br />
<br />
<img src="Images/Home Image.jpg" />
</div>
<div id="footer">
<a href="https://www.facebook.com/ruth.fifer.5?fref=ts" target="_blank"> <img src="Images/facebook.png" alt="Facebook" id="Facebook"/></a>
<a href="https://twitter.com/martynjakins" target="_blank"> <img src="Images/twitter.png" alt="Twitter" id="Twitter"/></a>
<a href="http://www.linkedin.com/profile/view?id=225071408&trk=tab_pro" target="_blank"><img src="Images/linkedin.png" alt="LinkedIn" id="LinkedIn"/></a></div>
</div>
</body>
If anyone is able to help it would be great, as i get the feeling I'm probably using conflicting codes due to my inexperience but don't have time to learn everything right now and will instead go back at a point where i have more time to adjust things.
Thanks,
Martyn
337
1) Write <!DOCTYPE><html><head> tag in the beginning of the code.
2) Write </html> tag in the end of the code.
AND USE:
border: 1px 0px solid #000000;
And it will solve your problem. Look at http://jsfiddle.net/p2269/1/ I wrote code as I explained and it shows borders.
190
Your code is incomplete, I think...
Here you have a working example.
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{
color:#00000;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}
#body{
background-color:green;
}
#header{
width:800px; /* The width is fixed by pixels */
height:150px; /* The height is fixed by pixels*/
color:#fff;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
}
#navigation {
width:798px;
height:51px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:1px;
border-color:#000000;
text-align:center;
background-color: yellow;
}
#main {
width:798px; /* The width is fixed by pixels */
height:800px; /* The height is fixed by pixels*/
color:#fff;
background-color:blue;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:0px;
border-color:#000000;
text-align:center;
}
#footer {
/*Styling for any element with the id="container" */
width:798px; /* The width is fixed by pixels */
height:100px; /* The height is fixed by pixels*/
color:#fff;
background-color:red;
margin: 0 auto;
border-top: 3px solid white;
}
#Facebook {
float:right;
}
#Twitter {
float:right;
}
#LinkedIn {
float:right;
}
</style>
</head>
<body>
<div id="body">
<div id="header"> </div>
<div id="main">
<div id="navigation">
<br />
</div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
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
