...

View Full Version : Line in header?



Dan_Sheen
06-11-2012, 12:24 PM
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:

http://i46.tinypic.com/2jfitjs.png

And here is the scanned picture of what he wants:

http://i48.tinypic.com/2uqj8gn.jpg

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

Here is my code:
HTML -

<!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 -

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%;
}

vikram1vicky
06-11-2012, 12:47 PM
Sorry dear, I am unable to see pics, can u post pics inline, I mean, in the page itself :)

Dan_Sheen
06-11-2012, 12:57 PM
Sorry dear, I am unable to see pics, can u post pics inline, I mean, in the page itself :)

Done this.


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.

Dan_Sheen
06-13-2012, 10:50 AM
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:

http://i46.tinypic.com/1zodblu.png


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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum