Logo text in header

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">&nbsp;</td>
      <td width="147">&nbsp;</td>
      <td width="94">&nbsp;</td>
      <td width="113">&nbsp;</td>
      <td width="128">&nbsp;</td>
      <td width="142">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Lorem ipsum</td>
      <td>Nulla</td>
      <td>Proin</td>
      <td>Maecenas </td>
      <td>&nbsp;</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>
        &nbsp;&nbsp;&nbsp;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>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</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>
<div id=“logo”>
<div class=“menu”>

</div>
</div>
</div>

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

</div>

</div>
</div>

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

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” ?

You’re right! should be

<div class="logo"><h1>Your Text here!</h1></div><

Sorry for the typo :slight_smile:

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">&nbsp;</td>
      <td width="147">&nbsp;</td>
      <td width="94">&nbsp;</td>
      <td width="113">&nbsp;</td>
      <td width="128">&nbsp;</td>
      <td width="142">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Lorem ipsum</td>
      <td>Nulla</td>
      <td>Proin</td>
      <td>Maecenas </td>
      <td>&nbsp;</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>
        &nbsp;&nbsp;&nbsp;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>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  
   <div class="footer">
   This is my footer
  </div>
</form> 
</body>
</html>

Now , how do I lower the Logotext a bit down ?