Hello,

I need some help placing the log that is attached here. I have attached the index and CSS html files. Basically I need to put that log on the top left side of the screen right next to the navigation tabs so kind of something like this


------------------------------------
|
| LOGO TAB1 TAB2 TAB3 TAB4
|
| rest of site....
|
------------------------------------

I have tried doing this but it doesn't work and I can´t get it to look right. I end up messing up the whole structured so I thought I´d asked here to see if anyone can advise how to do it?

Thanks

Floats

<div class="something">
<img src="something.something" height="something" width="something" alt="LOGO">

<ul class="something else">
<li><a href="something">TAB1</a></li>
<li><a href="something">TAB2</a></li>
<li><a href="something">TAB3</a></li>
<li><a href="something">TAB4 </a></li>
</ul>
</div>

Wrote the HTML in 30 seconds. Now float them using CSS.

ok so I got to work pretty well now. Here is the code:

<div id="corner2">&nbsp;</div>
<div id="header">
<a href="index.html"><img src="logo_peq.jpg" alt="ipnetconsulting" width="230" height="72" /></a>
<div id="menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="experience.html">Experience</a></li>
<li><a href="contact_us.html">contact us </a></li>
</ul>
</div>

The only problem is that I dont know why the boarder of the logo is white and the actual jpg file does not have any white line for the boarder of the logo. any ideas?

add
a img {border:0;}

to your stylesheet.

Another way is to use the 'absolute positioning' in css to fine tune the position of the logo. This helps in case of complex HTML codes like tables etc.

doesn't appear to work. I have tried to the following:

+++++++++++++++++++

<div id="main"><div id="main2">
<div id="corner1">&nbsp;</div>
<div id="corner2">&nbsp;</div>
<div id="header" >
<a href="index.html"><img src="logo_peq.jpg" border="0" alt="IPnetConsulting" width="230" height="72" /></a>
<div id="menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="experience.html">Experience</a></li>
<li><a href="contact_us.html">contact us </a></li>
</ul>
</div>
</div>

+++++++++++++++++++

and leaving the whats above without the border value and just editing the style.css like this:

#header {
margin-bottom: 6px;
height: 90px;
background: #171717;
a img border:0;
}

++++++++++++++++++++++++++

i got it to work but its working now

Perhaps you already figured this out, but chris meant for the "a img {border:0;}" to be a block of its own, not a part of the #header. As in:

#header {
    margin-bottom: 6px;
    height: 90px;
    background: #171717;
}
a img {
    border: 0;
}

It will affect all <img> tags that are inside of an <a> tag.

Generally, it's a good idea to include a 'reset' block at the top of your CSS file. (You can find a ton just googling things like "CSS Global Reset Code" etc) border: 0 is usually included in those, as well as a ton of other little changes that make coding a crap ton less of a headache.

Works wonders for browser support as well, considering the big browsers live in their own little worlds and arbitrarily decide what to set as a default, instead of establishing (and obeying) an overall standard.

This usually goes at the top of the css file:

body, div, p, h1, h2, h3, ul, ol, a, img {margin:0; padding:0; border:none;}

Maybe i missed some elements.

Originally Posted by cbhattarai

use css file on <dive class=cssfile> and then it becomes easy for you to ad logo to the place you want..

You mean "classname" not cssfile.

Another way is to use the 'absolute positioning' in css to fine tune the position of the logo.

Not generally necessary and can cause more headaches than it solves, especially where IE is concerned.