4 replies [Last post]
mrmark01
Offline
Regular
Cambridge, UK
Last seen: 5 years 18 weeks ago
Cambridge, UK
Joined: 2009-02-10
Posts: 11
Points: 0

Hi all,

I'm trying to display an image (company logo) followed by some text (company tagline). See diagram

---------------------
| | ------------
| Logo | | tag |
| | -------------
----------------------
---------------------------------------------------------
Nav Menu
---------------------------------------------------------

I am unsure how to do this. I've written some CSS for the tag line: -
.tag
{
margin:0;
color:#66bbd4;
height:auto;
width:auto;
font-family:Tahoma;
}

However, when try to display the logo and text on the same line I get the following: -

---------------------
| |
| Logo |
| |
----------------------
------------
| tag |
-------------

Please help!

Thanks in advance,

Mark Shock)

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 3 days 3 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

You need to read the posting

You need to read the posting guidelines! a single ruleset and a graphic diagram of text layout is next to meaningless, we're coders show us code not pipes and dashes Smile

Floats are generally used for this purpose.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mrmark01
Offline
Regular
Cambridge, UK
Last seen: 5 years 18 weeks ago
Cambridge, UK
Joined: 2009-02-10
Posts: 11
Points: 0

Display image and text on same line

Right, I think I understand the guidelines...

I am trying to design a header for a site which consists of a company logo followed a company tag line. This is the code I am using: -

.main
{
    margin: 10;
}
.tag
{
    margin:0;
    color:#66bbd4;
    height:auto;
    width:auto;
    float: right;
    font-family:Tahoma;
}
.logo
{
    margin:0;
    height:auto;
    width:260px;
    float: left;
}
 
<div class=main>
        <div class=tag>Custom Business Tageline</div>
        <div class=logo><img alt="" src="images/Blank_Logo.png" /></div>
</div>

The above code half works... When I look at the page in IE 7 the Company Business tagline spills out of main which messes up the alignmet of the header. How do I fix this?

Thanks in advance

JonathanChacon
JonathanChacon's picture
Offline
newbie
Last seen: 5 years 36 weeks ago
Timezone: GMT-7
Joined: 2008-03-05
Posts: 9
Points: 0

try adding a float to the

try adding a float to the image with a new class like

img.header {
float:left;
clear:right;
margin-right:20px;
}

then call for it in your html:
<img src="logo.jpg" class="header">
if you want, you can also be more specific with the tag code so that it hangs around the middle using padding:
.tag
{
margin:0;
color:#66bbd4;
height:auto;
width:auto;
font-family:Tahoma;
padding-top:30px;
}

and just mess around with the padding until it moves it where you want it

mrmark01
Offline
Regular
Cambridge, UK
Last seen: 5 years 18 weeks ago
Cambridge, UK
Joined: 2009-02-10
Posts: 11
Points: 0

thank you very much, that's

thank you very much, that's very helpful!