Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

Problems with 3 images on a row

Started by R3ViV3D, Dec 20 2005 06:27 PM

You cannot reply to this topic
Go to first unread post

5 replies to this topic

#1 R3ViV3D

Young Padawan

Members
11 posts

Location:Netherlands

Posted 20 December 2005 - 06:27 PM

I am designing my website in css but i am getting problems with 3 images i want next to eachother. i sliced the images and now the images are placing underneath eachither.
The code:

.bannersubtabs{
width: 267px;
height: 17px;
background-image:url(images/images/left-sub.gif);
font-size:93%;
background-repeat:no-repeat;
}
.bannersubtabsmid{
margin:0px;
width: 266px;
height: 17px;
background-image:url(images/images/mid-sub.gif);
font-size:93%;
background-repeat:no-repeat;
}

The html:

<div class="bannersubtabs">
<ul>
  <li><a href="#"><span class="bannermenu1"><span class="bannermenu">Home</span></span></a></li>
  <li><a href="#"><span class="bannermenu1"><span class="bannermenu">Home</span></span></a></li>
  
</ul>
<div class="bannersubtabsmid"></div>

I alrady tried using float but that didnt work(weird huh)
And i dont want to use any tables in it so please dont say:'Just use tables"
I think there is a code for it but i tried everything but couldn't find it.
Help me would be Great!

Back to top

#2 coolaid

P2L Jedi Master

Members
1,435 posts

Gender:Male
Interests:i wonder..

Posted 20 December 2005 - 07:00 PM

add this css.

.bannersubtabs ul li{
	float:left;
}

i know you said you tried using floats, but i don't think you used them in the right place from the looks of it.

Edited by coolaid, 20 December 2005 - 07:00 PM.

Back to top

#3 rc69

PHP Master PD

P2L Staff
3,827 posts

Gender:Male
Location:Here
Interests:Web Development

Posted 20 December 2005 - 07:46 PM

If coolaids suggestion didn't work, try uploading a preview so we can see exactly what the problem is, along with the code.

Back to top

#4 R3ViV3D

Young Padawan

Members
11 posts

Location:Netherlands

Posted 21 December 2005 - 02:40 AM

Well it didn't work so i will show the problem:
The Problem
and the code:

body{
color:#00F;
background-color:#FEFEFE;
}
#container{
width: 800px; /*The width of our layout*/
margin-left: auto;
margin-right: auto;
/*Margin left and right set to auto center's our layout*/
text-align: left; /*Resets the text alignment*/
}

.banner{
width: 800px;
height: 20px;
background-image:url(images/images/top.gif);
font-size:93%;
background-repeat:no-repeat;
}
.bannersub{
width: 800px;
height: 35px;
background-image:url("images/images/subtop.gif");
font-size:93%;
background-repeat:no-repeat;
}
.bannersubbot{
width: 800px;
height: 38px;
background-image:url(images/images/bottom.gif);
font-size:93%;
background-repeat:no-repeat;
}
.bannersubtabs{
width: 267px;
height: 17px;
background-image:url(images/images/left-sub.gif);
font-size:93%;
background-repeat:no-repeat;
}
.bannersubtabsmid{
margin:0px;
padding-right:100px;
width: 266px;
height: 17px;
background-image:url(images/images/mid-sub.gif);
font-size:93%;
background-repeat:no-repeat;
}
div.bannersubtabsmid ul li{
	float:left;
	
}
.bannermenu1
{

	background:url("images/images/v2_04.gif") no-repeat right top;
	padding-right: 10px;
	padding-bottom:20px;
}

.bannermenu
{

	background:url("images/images/v2_03.gif") no-repeat left top;
	padding-left: 10px;
	padding-bottom:20px;
	
}

div.bannersubtabs ul {
	margin:0;
	padding:0;
	list-style: none;
	display: inline;
	}
div.bannersubtabs li {
	float:left;
	margin:0;
	padding:0;
left:40px;
top:97px;
	}
	div.bannersubtabs a {
padding: 3px;	
border-right:1px solid #000000;
font-family: Verdana, helvetica, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000;
	}

Back to top

#5 rc69

PHP Master PD

P2L Staff
3,827 posts

Gender:Male
Location:Here
Interests:Web Development

Posted 21 December 2005 - 01:41 PM

Well, it looks fine in FF, so i'm assuming this is an IE problem.
Try the following in place of the original

.bannersubtabsmid{
margin:0;
_margin-top:-17px;
padding-right:100px;
width: 266px;
height: 17px;
background-image:url(images/images/mid-sub.gif);
font-size:93%;
background-repeat:no-repeat;
}

i just added a negative margin to push the image up, and the underscore means only IE will read the attribute. Though, i'm sure somebody will come along and find a better fix.

But out of curiostiy, why do you even have a container div if theres nothing in it?