I want to put a logo text in the header.
Here is the relevant place to code
<div class="header">
[COLOR="Red"]LogotextAcd[/COLOR] [COLOR="Blue"]// this does not show up in the above desired place[/COLOR]
<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>
why the LogotextAcd does not come up to the desired place ?
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;
background-color: #f3f3f3;
}
#submit {
font-family: arial;
padding-bottom: 20px;
}
#submit button {
font-size: 13px;
}
.primaryCta {
margin-left:25px;
background-color: #FBE26E;
background-image: url(save.png);
background-position: 0% 0%;
background-repeat: repeat-x;
border: 1px solid #F6B22B;
color: black;
font-family: arial;
font-size: 13px;
font-weight: bold;
padding-bottom: 1px;
padding-left: 6px;
padding-right: 6px;
padding-top: 1px;
text-decoration: none;
}
.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;
line-height:30px;
margin:100px 0 0;
overflow:hidden;
}
.header .menu ul {
margin:0;
padding: 0;
}
.header .menu ul li {
float: left;
display: block;
}
.header .menu ul li a {
height: 30px;
line-height: 30px;
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">
<button type="submit" id=".save" name=".save" class="primaryCta" >
Sign In
</button>
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>
you could change it to a background image for that div container and set it to top left… you might have to add another div in there tho…
<div class="header>
if that doesnt work you can always position it aboslutely, with an empty div defining the width and height
image ? I want to put a logo text …not an image.
for that div container and set it to top left… you might have to add another div in there tho…
<div class="header><div id=“logo”> <div class=“menu”>
if that doesnt work you can always position it aboslutely, with an empty div defining the width and height
That does not look good. You are wrapping the menu with a logo div ? logo text is outside the menu …not inside.
I think you did not understand the requirement . Please see the image I posted about the position of logo text.
Thanks
donboe
December 21, 2010, 10:47am
4
You could use a div indeed.
.header .logo{
width: 100%;
float: left;
clear: both
}
.header .logo h1{
width: 300px;
height: 60px;
font-size: your-font-size;
}
<div class="header>
<div id="logo"><h1>Your Text here!</h1>
<div class="menu">
.......
</div>
</div>
Note: You need to adjust the top-margin on your menu.
donboe:
You could use a div indeed.
.header .logo{
width: 100%;
float: left;
clear: both
}
.header .logo h1{
width: 300px;
height: 60px;
font-size: your-font-size;
}
<div class="header>
<div id="logo"><h1>Your Text here!</h1>
<div class="menu">
.......
</div>
</div>
Note: You need to adjust the top-margin on your menu.
a small doubt in your code.
<div id=“logo” ><h1>Your Text here!</h1> // is not this should be class=“logo” ?
we have .header , .menu …we are using class=“header” , class=“menu” …so why not class=“logo” ?
donboe
December 21, 2010, 11:16am
6
You’re right! should be
<div class="logo"><h1>Your Text here!</h1></div><
Sorry for the typo
Ok. fine that works. But if I want to lower the logo text down a bit what changes I need ?
Here is the current code . I have adjusted the top-margin of the menu and added a logo text here.
<!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;
}
#submit {
font-family: arial;
padding-bottom: 20px;
}
#submit button {
font-size: 13px;
}
.primaryCta {
margin-left:25px;
background-color: #FBE26E;
background-image: url(save.png);
background-position: 0% 0%;
background-repeat: repeat-x;
border: 1px solid #F6B22B;
color: black;
font-family: arial;
font-size: 13px;
font-weight: bold;
padding-bottom: 1px;
padding-left: 6px;
padding-right: 6px;
padding-top: 1px;
text-decoration: none;
}
.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 .logo{
width: 100%;
float: left;
clear: both
}
.header .logo h1{
width: 300px;
height: 60px;
font-size:190%;
}
.header .menu {
background:#ccc;
width:100%;
height:30px;
line-height:30px;
margin:40px 0 0;
overflow:hidden;
}
.header .menu ul {
margin:0;
padding: 0;
}
.header .menu ul li {
float: left;
display: block;
}
.header .menu ul li a {
height: 30px;
line-height: 30px;
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="logo"><h1>Logotext</h1>
<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>
<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">
<button type="submit" id=".save" name=".save" class="primaryCta" >
Sign In
</button>
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>
Now , how do I lower the Logotext a bit down ?
