I want to modify the header of my page.
Here is what I want
I’m worried how do I shift those texts towards left. There is no margin I’m applying so that I can decrease its value to move towards left.
I’m using table for the header. Here is my code
<!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
}
.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;
}
</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>
<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>
what I can do ?
N.B: I have put a blank <tr> <td> in the header so that I can put logo over there.
donboe
December 11, 2010, 3:07pm
2
The first thing you need to do is get rid of those unnecessary tables. I presume these:
<td> </td>
<td>Lorem ipsum</td>
<td>Nulla</td>
<td>Proin</td>
<td>Maecenas </td>
<td> </td>
are menu items?
No.
That would be menu items. ie, a navigation list.
I thought you meant drop down menus.
do I need a display:inline list box then ?Also, I need a header box as well.
donboe
December 11, 2010, 5:31pm
6
What Stevie D is saying and I said before you use tables on places where you should not use them. For your menu you should use a list. I.E.
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact us</a></li>
</ul>
and than style the list to get the results you want
I have to put a logo in the header . Thats why I used a table and kept a blank row reserved to put a <img> there.If I remove the table now,I guess I need to use a <div> with a decent height say 200px so that a logo can be added later.
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact us</a></li>
</ul>
and than style the list to get the results you want
For your menu you should use a list. I.E.
Aha …so you mean a horizontal menu now
donboe
December 11, 2010, 6:07pm
8
Okay I obviously don’t know what width you use for your site, but this could be a beginning:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
margin: 0;
padding: 0;
}
ul, ol, li {
list-style-type: none;
}
img,fieldset {
border: none;
}
html, body {
height: 100%;
}
#wrapper {
width: 900px;
min-height: 100%;
margin: 0 auto;
}
#header {
width: 900px;
padding-top: 135px;
position: relative;
overflow: hidden;
background: red;
}
#header .logo {
width: 150px;
height: 150px;
line-height: 150px;
margin: -110px 25px 25px;
float: left;
background: black;
font-size: 3em;
color: #FFF;
text-align: center;
}
#header .menu {
width: 675px;
float: left;
overflow: hidden;
background: green;
}
#header .menu li {
float: left;
position: relative;
}
#header .menu li a {
height: 40px;
line-height: 40px;
padding: 0 15px;
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo">LOGO</div>
<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>
</div>
</body>
</html>
Just play around with it a little.
donboe:
Okay I obviously don’t know what width you use for your site, but this could be a beginning:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
margin: 0;
padding: 0;
}
ul, ol, li {
list-style-type: none;
}
img,fieldset {
border: none;
}
html, body {
height: 100%;
}
#wrapper {
width: 900px;
min-height: 100%;
margin: 0 auto;
}
#header {
width: 900px;
padding-top: 135px;
position: relative;
overflow: hidden;
background: red;
}
#header .logo {
width: 150px;
height: 150px;
line-height: 150px;
margin: -110px 25px 25px;
float: left;
background: black;
font-size: 3em;
color: #FFF;
text-align: center;
}
#header .menu {
width: 675px;
float: left;
overflow: hidden;
background: green;
}
#header .menu li {
float: left;
position: relative;
}
#header .menu li a {
height: 40px;
line-height: 40px;
padding: 0 15px;
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo">LOGO</div>
<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>
</div>
</body>
</html>
Just play around with it a little.
you forgot to close wrapper div ?
donboe
December 11, 2010, 7:15pm
10
No I didn’t
<!-- Start Wrapper -->
<div id="wrapper">
<!-- Start Header -->
<div id="header">
<!-- Start Logo -->
<div class="logo">LOGO</div><!-- End Logo -->
<!-- Start Menu -->
<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><!-- End Menu -->
</div><!-- End Header -->
</div><!-- End Wrapper -->
I have gone through your code and changed my code but still its not working
Here is what I want
I want to move the text towards left . But there is no left margin so that I could reduce to move the text towards left. where shall I change ?
Here is my modified code:
<!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
}
.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 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>
system
December 12, 2010, 6:31am
12
set at least the left margin of the ul for the menu to 0
which one ? could you please mark in red which one needs modification ?
I’m not getting you clearly.
I tried adding a margin for the <ul> like this way but it did not solve my problem
.header .menu ul {
system
December 12, 2010, 7:15am
14
did you actually write all your code in post 11 or did you copy and paste from somewhere and want someone to fix it for you?
if you wrote all the code you would know exactly which <ul> contains your menu.
did you actually write all your code in post 11 or did you copy and paste from somewhere and want someone to fix it for you?
if you wrote all the code you would know exactly which <ul> contains your menu.
please see above. That answers your query.
Now, Here is more why your post was not helpful but produced more confusion.
set at least the left margin of the <ul> for the menu to 0
So,I was looking for a <ul> to set left margin =0
I have these in my page …
.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;
}
But these are CSS not for <ul> but for <li> and <a> as you see …So, I was worried about how do I set margin for a <ul> ! After that I decided to add a css for <ul> menu here
.header .menu ul {
This also did not solve the problem.
Are you in CSS/Web programming ? I have seen your previous posts to other posters and it seems you are a forum moderator not a programmer. I need programming help.
Thanks for your time anyway.
system
December 12, 2010, 7:47am
16
I am certainly not a moderator and certainly not on anybody’s payroll here.
I am just a humble poster stumbling from forum to forum trying to help those I believe are genuinely making an attempt to learn something related to website development :).
Have a look at what the different colours in the usernames means in the FAQ and that will tell you who the moderators are.
all you need to do is create another css selector similar to one’s you already have done (I am assuming you created all the css in your file but I’m not sure) for the <ul> containing your menu.
If you genuinely created all the css in your file then creating another selector should take you no more than 1 minute at the most.
I already have that ! but its not working . Here is the full code
<!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
}
.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;
}
[COLOR="Red"].header .menu ul {
margin-left:0px;
}[/COLOR]
.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>
These are my code. Please check my previous posts . I have been developing this past two weeks !
check the red .
That does not render to the solution I’m asking. Is there any other specific changes do I need ?
PaulOB
December 12, 2010, 11:32am
18
Some browsers use padding for the defaul space for bullets when using uls so you need to set both left-padding and left margin to zero. (While you’re at it you may want to remove top and bottom margins or set them to something consistent.)
.header .menu ul {
margin:1em 0 0;
padding: 0;
}
That will move the list to the left but there will still be a slight gap due to the 4px left padding on .header and the 15px left padding on the anchor so you would need to adjust those also if you need the element moved further to the left.
a list, not a table.
…that seems fine.