Resolved Bottom of border not showing (css) [Archive]

...

View Full Version : Resolved Bottom of border not showing (css)

msn

06-18-2012, 03:39 AM

I am a bit of an amateur web designer, and have to make a website for a school project. I have a simple layout that I have created so far. The issue that I am having is that the bottom of my border on the content nav isn't showing up. I was wondering if anyone from this forum would be able to help me as I am sure it will be a simple fix.

Sorry I cannot link to pastebin as it is blocked at school.

Css:
body {
background-color:#81CA3F;
margin:0px;
padding:0px;
}

#content {
background-color:#FFFFFF;
margin-top:200px;
padding-top: 40px;
height:500px;
width:1000px;
border:#000000;
border:1px solid black;
}

#pictures {
width:800px;
height:330px;
background-color:#999999;
background-image:url(../Picture%2014.png);
background-size: 100%;
}

#logo {
background-image:url(logo.jpg);
background-size: 100%;
margin-top:20px;
width:400px;
height:80px;
}

#nav {
margin-top:30px;
width:1000px;
height:50px;
background-color:#FFFFFF;
}

#nav ul {
list-style-type:none;
margin:0px;
padding:0px;
}

#nav li {
display:inline;
}

#nav a {
font-family:Myriad Pro;
font-size:26pt;
text-decoration:none;
color:#333333;
padding-left:45px;
}

Html:
<html>
<title>Ora Flower Design</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<body>
<center>
<div id="content">

<div id="pictures">

</div>

<div id="logo">
</div>

<div id="nav">

<ul>
<li><a href="default.asp">galleries</a></li>
<li><a href="news.asp">about</a></li>
<li><a href="contact.asp">venues</a></li>
<li><a href="about.asp">video</a></li>
<li><a href="contact.asp">blog</a></li>
<li><a href="about.asp">contact</a></li>
<li><a href="about.asp">links</a></li>
</ul>

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

aaronhockey_09

06-18-2012, 03:55 AM

It is because you set the height of your content div smaller than the actual content

Change this #content {
background-color:#FFFFFF;
margin-top:200px;
padding-top: 40px;
height:500px;
width:1000px;
border:#000000;
border:1px solid black;
}

either simply remove the height, or make it something bigger like

#content {
background-color:#FFFFFF;
margin-top:200px;
padding-top: 40px;
height:600px;
width:1000px;
border:#000000;
border:1px solid black;
}

msn

06-18-2012, 03:57 AM

aaronhockey_09

06-18-2012, 03:58 AM

Thanks for the help, it's strange how that worked because I did try making my actual content smaller and that didn't seem to help at all, I guess I missed something simple there also.
Not a problem.
Have a good one.