Log in

View Full Version : My image will keep displaying on a new Line Problem


nihilater
09-27-2009, 07:32 AM
I have 2 "About" on my footer below but the second one keeps on displaying on a new line like:

this is the problem page:
http://rodsyconstruction.com/able/img1.jpg

this is the correct one, i want it to look like this:
http://rodsyconstruction.com/able/img2.jpg

i have this html code:


<div id="abouts">


<span>
<div id="this_foot">

<h3>About</h3>
<p>asd</p>

</div>

<div id="this_foot2">

<h3>About</h3>
<p>asd</p>

</div>

</span>



</div>

and a CSS line like this:


#abouts
{

position:relative;
width:890px;
height:209px;
padding-top:20px;
padding-bottom:10px;
margin-left:100px;
}

#abouts span
{display:inline;
}

#this_foot
{
position:relative;
background:url(images/footerbg.jpg);
background-position:left;
background-repeat:no-repeat;
width:345px;
height:168px;
margin-right:10px;

}

#this_foot h3
{
font-family:Arial, Helvetica, sans-serif;
text-align:right;
font-size:14px;
font-weight:900;
color:#72ff00;
padding-top:20px;
padding-right:10px;
margin-right:10px;
}

#this_foot span
{
display:inline;
}

#this_foot p
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color: #FFFFFF;
margin-left:20px;
margin-right:20px;


}

#this_foot a
{
color: #0af3f6;
}

#this_foot a:hover, a:active
{
color: #72ff00;
}


I can do it by making the second about "absolute" but it is much tedious and it is not compatible with IE where it sticks half of its head above. I just want to do it with two divs and align it on the same line.

thanks, please help.
davelf
09-27-2009, 11:02 AM
is there any problem if you change your id on the div tag into class, if you may change it, you can use float, this is the example:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.this_foot{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#2A1F00;
float:left;
}
.this_foot2{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
color:#808080;
float:left;
}
</style>
</head>

<body>

<span>
<div class="this_foot">
about
</div>

<div class="this_foot2">
about
</div>
</span>
</body>
</html>



good luck.
nihilater
09-27-2009, 11:12 AM
wow, that works. Haha. thanks so much man! Now I wanna know why did that happen. you have any idea?
nihilater
09-27-2009, 11:17 AM
hey, but the margin and padding won't work. the two div are kissing each other. I want it to have like 10px space in between of them. What do you think is wrong with that?


.this_foot2
{
position:relative;
background:url(images/footerbg.jpg);
background-position:left;
background-repeat:no-repeat;
width:345px;
height:168px;
margin-right:10px;
padding-left:20px;
float:left;


}


<div class="this_foot2">

<h3>About</h3>
<p>asd</p>
</div>
bluewalrus
09-27-2009, 02:51 PM
margin not padding.


.this_foot2
{
background:url(images/footerbg.jpg) left no-repeat;
width:345px;
height:168px;
margin-right:10px;
margin-left:20px;
float:left;
}
davelf
09-28-2009, 07:27 AM
like bluewalrus said use the margin

to seperate my example you can add this:



.this_foot2{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
color:#808080;
float:left;
margin-left:50px;
}


for more information about the margin u can see it here:

http://www.w3schools.com/CSS/css_margin.asp

good luck..