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

Thread: Line in header?

  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Line in header?

    Hey all,

    I understand that I need to try and figure this out on my own but I have been attempting to try for days to get this right, but it just doesn't seem to work.

    My client wants a website and in his header he would like a line going horizontally across the page, but right at the end where the logo is he wants it to curve further down, it is quite difficult to explain but I have scanned a picture to try and show you what he wants.

    But whatever I have tried the line doesn't go under where he wants it to go. Here is a picture of what I get when attempting:



    And here is the scanned picture of what he wants:



    Sorry to keep seeking help, but because I have been trying for days I am getting quite frustrated.

    Here is my code:
    HTML -
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Briddle Media</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="wrapper">
     <div id="header">
     <ul>
      <li><a href="design.html"><img src="images/design.png" alt="Design" name="Design" /></a></li>
      <li><a href="music.html"><img src="images/music.png" alt="Music" /></a></li>
      <li><a href="blog"><img src="images/blog.png" alt="Blog" /></a></li>
      <li><a href="guests.html"><img src="images/guest.png" alt="GuestBook" /></a></li>
      <li><a href="media.html"><img src="images/media.png" alt="Media" /></a></li>
     </ul>
     <div class="line"><img src="images/line.png"  alt="line" /></div>
     </div>
     
     <div id="content">
     <!-- This section is reserved for main content -->
     This is just an alignment test.
     <aside>
     </aside>
     </div>
     <div id="footer">
     &copy; Copyright Briddle Media 2012, All Rights Reserved<br />
     Briddle Media Created by Hugo De Beer &amp; Website Designed by <a href="http://surgenetwork.co">Surge Network</a>
     </div>
    </div>
    </body>
    CSS -
    Code:
    body {
    	font-family:Arial;
    }
    
    ul {
    	text-align:center;
    }
    
    li {
    	display:inline;
    
    	line-height: 5px;
    }
    
    aside {
    	width:300px;
    	float:right;
    	background:grey;
    }
    
    /* ID's */
    
    #wrapper {
    	width:100%;
    }
    
    #header {
    	width:100%;
    	height:70px;
    	background:#0066CC;
    }
    
    #content {
    	width:100%;
    	height:708px;
    	background:black;
    }
    
    #footer {
    	width:auto;
    	height:50px;
    	background:green;
    	padding:5px;
    	clear:both;
    }
    
    /* Classes */
    
    .center {
    	text-align:center;
    }
    
    .right {
    	float:right;
    }
    
    .line {
    	width:100%;
    }
    Last edited by Dan_Sheen; 06-11-2012 at 12:55 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Sorry dear, I am unable to see pics, can u post pics inline, I mean, in the page itself

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    Sorry dear, I am unable to see pics, can u post pics inline, I mean, in the page itself
    Done this.

    Quote Originally Posted by iBall View Post
    I would make an image of the line in Photoshop or whatever image editing software you have, and then set it as the background imaged fixed to the base of the header.

    Then put your other content in the header and position it as required.
    This is what I am already doing, but it doesn't seem to place itself up in the header, although I have placed it within the header div tag.

  • #4
    New Coder
    Join Date
    Jun 2010
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I tried making the line a background image, but now it just acts as the main background of the div tag (which to me is normal) but it isn't what I wanted. And when I try to change the size to 5px for the line, it is at the top of the page and pushes the content up to the header:



    Code:
    body {
    	font-family:Arial;
    	background:black;
    }
    
    ul {
    	text-align:center;
    }
    
    li {
    	display:inline;
    
    	line-height: 5px;
    }
    
    aside {
    	width:300px;
    	float:right;
    	background:grey;
    }
    
    /* ID's */
    
    #wrapper {
    	width:100%;
    }
    
    #header {
    	width:100%;
    	height:5px;
    	background:url(../images/line.png);
    	background-repeat:no-repeat;
    }
    
    #content {
    	width:100%;
    	height:708px;
    	background:white;
    }
    
    #footer {
    	width:auto;
    	height:50px;
    	background:green;
    	padding:5px;
    	clear:both;
    }
    
    /* Classes */
    
    .center {
    	text-align:center;
    }
    
    .right {
    	float:right;
    }
    Last edited by Dan_Sheen; 06-13-2012 at 10:52 AM.


  •  

    Posting Permissions

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