Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    msn
    msn is offline
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Bottom of border not showing (css)

    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:
    Code:
    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:
    Code:
    <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>
    Last edited by msn; 06-19-2012 at 10:35 PM.

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    It is because you set the height of your content div smaller than the actual content

    Change this
    Code:
    #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

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

  • Users who have thanked aaronhockey_09 for this post:

    msn (06-18-2012)

  • #3
    msn
    msn is offline
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    It is because you set the height of your content div smaller than the actual content

    Change this
    Code:
    #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

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


    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.

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by msn View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •