I would like to change the header of my page to a beautiful css style.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body{
margin: 0;
padding: 0;
background-color: #f3f3f3;
}
.borderTable {
padding-top: 2px 4px 2px 4px;
border: 1px solid #958764;
background-color: #c8b688;
}
.box3 {
width: 370px;
height:300px;
border:2px solid #660000;
float:right;
margin-top:10px;
margin-right:10px;
}
.box2 {
position:relative;
width: 370px;
float:left;
margin:10px 0 1px 10px;
background-color: #F9F9F9;
border: 3px solid #000;
color: #333;
display:inline;
}
.box2 h3 {
position:absolute;
width:350px;
padding:10px;
height:30px;/*semi-optional*/
margin:0;
background:#f1f1f1 url(fade.gif) repeat-x 0 100%;
}
.box2 ul {
padding:50px 20px 10px 1.5em;
margin:0;
overflow:auto;
height:240px;
}
.container{
/*border:2px solid #0000ff;*/
}
.footer{
padding: 2px 4px 2px 4px;
border: 1px solid #660000;
background-color: #e8eefa;
height:100px;
}
.boxwrap{
float:left;
width:370px;
}
ul.hoz {
clear:both;
list-style:none;
margin:0 0 10px 10px;
padding:0;
clear:both;
}
.hoz li {
display:inline
}
.footer {
clear:both
}
.hoz li a{
color:#000;
text-decoration:none;
background:#f1f1f1 url(fade.gif) repeat-x 0 100%;
border:1px solid #cecece;
border-bottom:2px solid #bbb;
border-right:2px solid #bbb;
float:left;
height:30px;
line-height:30px;
padding:0 10px;
margin:3px 5px 3px 0;
}
.borderTable tr td {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
}
.header{
padding: 2px 4px 2px 4px;
border: 1px solid #660000;
background-color: #e8eefa;
height:130px;
}
.header .menu ul {
margin:1em 0 0;
padding: 0;
}
.header .menu ul li {
float: left;
display: block;
margin-top:90px;
}
.header .menu ul li a {
height: 20px;
line-height: 20px;
padding: 0 15px;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<form>
<!--<table width="100%" height="130" class="borderTable" >
<tr>
<td width="103"> </td>
<td width="147"> </td>
<td width="94"> </td>
<td width="113"> </td>
<td width="128"> </td>
<td width="142"> </td>
</tr>
<tr>
<td> </td>
<td>Lorem ipsum</td>
<td>Nulla</td>
<td>Proin</td>
<td>Maecenas </td>
<td> </td>
</tr>
</table>-->
<div class="header">
<div class="menu">
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<table width="100%">
<tr>
<td>Search
<input type="text" name="textfield">
Go</td>
<td>User Name
<input type="text" name="textfield2">
Password
<input type="text" name="textfield3">
Login Sign Up
</td>
</tr>
</table>
<div class="container">
<div class="boxwrap">
<div class="box2">
<h3>Morbi in sem</h3>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Aliquam tincidunt mauris eu risus</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<ul class="hoz">
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
</ul>
</div>
<div class="box3">
<object width="370" height="300">
<param name="movie" value="http://www.youtube.com/v/GwQMnpUsj8I&hl=en&fs=1">
</param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><embed src=http://www.youtube.com/v/GwQMnpUsj8I&hl=en&fs=1
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="370" height="300">
</embed></object>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div class="footer">
This is my footer
</div>
</form>
</body>
</html>
please run the html . my current header looks
I want a beautiful header which is found here
Cornell University is a private research university that provides an exceptional education for undergraduates and graduate and professional students. Cornell's colleges and schools encompass more than 100 fields of study, with locations in Ithaca,...
I want a header strip similar to the strip they used. If I do that my desired look will be like this …
of course , I’ll use my own text but look will be somewhat similar to that. how do I get a effect like that ?
PaulOB
December 13, 2010, 10:05am
2
The example you pointed to uses a repeating background image on the body to create the strip. Make yourself a similar image and repeat it on the body.
Then you will just need to size the header so that it fits over the background image. If you want the menu centered then it will need to be placed in a fixed width container and centered with margin:auto.
I think you should attempt this yourself now as it’s quite straight forward and you need the practice
no .I don’t want it all over body . I need at the bottom of the header as a strip as shown in the image.
So, I think , I need a <div> at bottom margin with the repeating background image
Then you will just need to size the header so that it fits over the background image.
You mean the bottom <div> containg the background image here.
If you want the menu centered then it will need to be placed in a fixed width container and centered with margin:auto.
No, I want it left aligned really.
I think you should attempt this yourself now as it’s quite straight forward and you need the practice
Thanks for the ideas. I’ll change the code accordingly and post back with the result.
PaulOB
December 13, 2010, 11:23am
4
It won’t be all over the body it will be repeated along the x-axis of the top of the body and will give you a two coloured strip that stretches across 100% of the width of the page exactly like the page you linked to.
Did you not look at the image I linked to and see how it fits into their design? You need to take time to understand how these effects are achieved because you need to start working these things out to help you progress.
So, I think , I need a <div> at bottom margin with the repeating background image
Yes you could apply images to separate elements (or background colours) but in this case it’s easier to do it on the body as I mentioned above. You can then just use margins to position your text on top exactly as in the page you linked to. You could apply images or background coloured to the elements themselves but then you would need extra html to accommodate the different graphics.
Here is an example of using a background colour on the individual elements.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html,body{margin:0;padding:0;}
.header {
padding: 2px 0 0 0;
border-bottom: 1px solid #660000;
background-color: #e8eefa;
}
.header .menu {
background:#ccc;
width:100%;
margin:100px 0 0;
overflow:hidden;
}
.header .menu ul {
margin:0 auto;
padding: 0;
/*width:960px; if you want it centred*/
list-style:none;
}
.header .menu ul li {
float: left;
}
.header .menu ul li a {
height: 20px;
line-height: 20px;
padding: 0 15px;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<div class="header">
<div class="menu">
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
</body>
</html>
No, I want it left aligned really.
Then why did you show a desired picture with your text centred?
Thats just a paint work . not accurate though but close .
I have gone through your strategy . I understand that part. However , I did in my own way like this…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body{
margin: 0;
padding: 0;
background-color: #f3f3f3;
}
.borderTable {
padding-top: 2px 4px 2px 4px;
border: 1px solid #958764;
background-color: #c8b688;
}
.box3 {
width: 370px;
height:300px;
border:2px solid #660000;
float:right;
margin-top:10px;
margin-right:10px;
}
.box2 {
position:relative;
width: 370px;
float:left;
margin:10px 0 1px 10px;
background-color: #F9F9F9;
border: 3px solid #000;
color: #333;
display:inline;
}
.box2 h3 {
position:absolute;
width:350px;
padding:10px;
height:30px;/*semi-optional*/
margin:0;
background:#f1f1f1 url(fade.gif) repeat-x 0 100%;
}
.box2 ul {
padding:50px 20px 10px 1.5em;
margin:0;
overflow:auto;
height:240px;
}
.container{
/*border:2px solid #0000ff;*/
}
.footer{
padding: 2px 4px 2px 4px;
border: 1px solid #660000;
background-color: #e8eefa;
height:100px;
}
.boxwrap{
float:left;
width:370px;
}
ul.hoz {
clear:both;
list-style:none;
margin:0 0 10px 10px;
padding:0;
clear:both;
}
.hoz li {
display:inline
}
.footer {
clear:both
}
.hoz li a{
color:#000;
text-decoration:none;
background:#f1f1f1 url(fade.gif) repeat-x 0 100%;
border:1px solid #cecece;
border-bottom:2px solid #bbb;
border-right:2px solid #bbb;
float:left;
height:30px;
line-height:30px;
padding:0 10px;
margin:3px 5px 3px 0;
}
.borderTable tr td {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
}
.header{
border: 1px solid #660000;
background-color: #e8eefa;
height:130px;
}
.header .menu {
background:#ccc;
width:100%;
height:30px;
margin:100px 0 0;
overflow:hidden;
}
.header .menu ul {
margin:1em 0 0;
padding: 0;
}
.header .menu ul li {
float: left;
display: block;
margin-top:90px;
}
.header .menu ul li a {
height: 20px;
line-height: 20px;
padding: 0 15px;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<form>
<!--<table width="100%" height="130" class="borderTable" >
<tr>
<td width="103"> </td>
<td width="147"> </td>
<td width="94"> </td>
<td width="113"> </td>
<td width="128"> </td>
<td width="142"> </td>
</tr>
<tr>
<td> </td>
<td>Lorem ipsum</td>
<td>Nulla</td>
<td>Proin</td>
<td>Maecenas </td>
<td> </td>
</tr>
</table>-->
<div class="header">
<div class="menu">
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<table width="100%">
<tr>
<td>Search
<input type="text" name="textfield">
Go</td>
<td>User Name
<input type="text" name="textfield2">
Password
<input type="text" name="textfield3">
Login Sign Up
</td>
</tr>
</table>
<div class="container">
<div class="boxwrap">
<div class="box2">
<h3>Morbi in sem</h3>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Aliquam tincidunt mauris eu risus</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<ul class="hoz">
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Lorem</a></li>
</ul>
</div>
<div class="box3">
<object width="370" height="300">
<param name="movie" value="http://www.youtube.com/v/GwQMnpUsj8I&hl=en&fs=1">
</param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><embed src=http://www.youtube.com/v/GwQMnpUsj8I&hl=en&fs=1
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="370" height="300">
</embed></object>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div class="footer">
This is my footer
</div>
</form>
</body>
</html>
Surprisingly, all the texts like About us , Feedback , Contact Us
I checked there is no color overlapping …how come they would be visible now ?
what made those texts invisible ? and how to recover those texts ?
a) You need to move the <style> tags from <body> and into <head>, and do it properly, such as <style type=“text/css”> </style>
b) You need to remove all of those <p>nbsp;</p> from your code. Not a single non-breaking space should be necessary for layout purposes.
c) The reason why your links aren’t showing is because you are pushing them entirely out of place with the top margins in .menu, .menu ul, .menu ul li, and you are limiting the height of .menu when the things inside of it are larger than that.
PaulOB
December 13, 2010, 8:57pm
8
As mentioned above yopu have a top margin on the list of 90pxx and top margin on the ul of 1 em and a top margin on .menu. You only need a margin on .menu.
.header .menu {
background:#ccc;
width:100%;
height:30px;
[B] line-height:30px;
margin:110px 0 0;[/B]
overflow:hidden;
}
.header .menu ul {
[B] margin:0;
padding: 0;[/B]
}
.header .menu ul li {
[B] float: left;
display: block;
[/B]}
.header .menu ul li a {
[B] height: 30px;
line-height: 30px;[/B]
padding: 0 15px;
text-decoration: none;
display: block;
}
materialdesigner:
The reason why your links aren’t showing is because you are pushing them entirely out of place with the top margins in .menu, .menu ul, .menu ul li, and you are limiting the height of .menu when the things inside of it are larger than that.
you mean those texts got more margin than the menu height ? Ok. so, are they hidden there because they are out of space ? where did they go from the sight ?
As mentioned above yopu have a top margin on the list of 90pxx and top margin on the ul of 1 em and a top margin on .menu. You only need a margin on .menu.
.header .menu {
background:#ccc;
width:100%;
height:30px;
[B] line-height:30px;
margin:110px 0 0;[/B]
overflow:hidden;
}
.header .menu ul {
[B] margin:0;
padding: 0;[/B]
}
.header .menu ul li {
[B] float: left;
display: block;
[/B]}
.header .menu ul li a {
[B] height: 30px;
line-height: 30px;[/B]
padding: 0 15px;
text-decoration: none;
display: block;
}
This worked as expected. I used 100px though instead of 110px.
beautiful.
