...

View Full Version : align text next to image?!



jarv
03-11-2009, 12:40 PM
am i losing it?!

on my site: http://www.wildfire-digital.com/test/lha/video.asp

at the top, I would like to align the text Welcome to LHA next to the logo, can someone please help?

thanks

css:



.toplogo{width:1020px; height:100px; margin: 0px auto; display:block; text-align:left; background-image:url(img/lha-top.gif); background-repeat:repeat-x; }
.welcometext { font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#FFF; width:200px; height:100px; }


html:


<div class="toplogo"><img src="img/LHA-logo.gif" border="0" alt="LHA logo"/><div class="welcometext">Welcome to LHA</div>

abduraooft
03-11-2009, 01:03 PM
img.logo{
float:left;
}
.welcometext {/*styles.css (line 360)*/
color:#fff;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
line-height:100px;
width:200px;
}

<div class="toplogo">
<img border="0" alt="LHA logo" src="img/LHA-logo.gif" class="logo"/>
<h2 class="welcometext">Welcome to LHA</h2>
</div>

BoldUlysses
03-11-2009, 01:06 PM
Try changing


<div class="welcometext">Welcome to LHA</div>

to


<span class="welcometext">Welcome to LHA</span>

Divs are block-level elements (http://www.highdots.com/css-editor/html_tutorial/block.html) and will force a line break before and after unless you float them. Spans are inline elements (http://www.highdots.com/css-editor/html_tutorial/inline.html) and behave differently. Note that widths and heights don't apply to inline elements, but you can control them somewhat by using line-height and padding.

Edit: On second thought, go with abduraooft's method. It's more semantically appropriate to use the header tags. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum