Another CSS aligning issue

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

OK OK I know i keep asking, but i get such good advice on here i cant help it. NB you know your stuff so your the best guru to come to... Right enough groveling and buttering you up, to the point.

On my website i have a list. This list has 3 headings and uder each heading are seperate options. What i cant get it to do is put them all side by side as sections. SO i have 1, 2, 3 as headings and under each options 4, 5, 6 etc. The headings need to be side by side with the options underneath. Think that explains what i'm after???

heres the html

<div id="lists">
<ul>
<li>
<span class="sectiona">
<a href="">Drains</a></span><br>
<a href="/consumer/drains/blocked-drains">Domestic</a><br>
<a href="/consumer/drains/blocked-sinks">Commercial</a><br>
<a href="/consumer/drains/blocked-toilets">Relining</a><br>
<a href="/consumer/drains/blocked-baths">New Installations</a><br>
<a href="/consumer/drains/blocked-showers">Pipe Bursting</a><br>
<a href="/consumer/drains/cleaning-unblocking">Rerounding</a><br>
<a href="/consumer/drains/cleaning-unblocking">CCTV</a><br>
</li>
</ul></div>

<div id="lists">
<ul>
<li>
<span class="sectionb">
<a href="">Plumbing</a></span><br>
<a href="/consumer/glazing/emergency-repair">Internal Waste Pipe</a><br>
</li></ul></div>

<div id="lists">
<ul>
<li>
<span class="sectionc">
<a href="/consumer/plumbing">Maintenance</a></span><br>
<a href="/consumer/plumbing/bathroom-plumbing">Maintenance &amp; Plans</a><br>
<a href="/consumer/plumbing/shower-plumbing">Graffiti</a><br>
<a href="/consumer/plumbing/kitchens-plumbing">Pavement &amp; Street</a><br>
</li>
</ul>
</div>

and teh CSS

#lists {
width:1024px;
margin:10px;
text-align:center;
font-size: 11px;
}

#lists ul {
list-style-type: none;
color: #999999;
}

#lits li {
margin: 10px;
line-height: 16px;
}

.sectiona a {
color: #ff3300;
font-size: 12px;
font-weight: bold;
text-decoration:none;
float:left;
}

.sectionb a {
color: #ff3300;
font-size: 12px;
font-weight: bold;
text-decoration:none;
float:left;
}

.sectionc a {
color: #ff3300;
font-size: 12px;
font-weight: bold;
text-decoration:none;
}


I've tried various floats and margins, differnt ways of using the ID or class but nothing has so far put them side by side. I can get them all vertically aligned under each other, or shifted left and then diagonally listed but not side by side. So any takers?

 

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

Hi mate,
I'm not clear on what you want exactly.

Are you wanting the Drains, Plumbing & Maintenance headings to be horizontally across the page, and when you click on them they expand to show the other items?

NB

 

You tried the old clear left/right ?

 

I want those headings horizontally but showing permanently underneath them the other options. so you'd have heading Drains, underneath it as a list, Domestic, commercial, cctv etc then nextt o Drains teh heading Plumbing and underneath that its option waste pipe, always showing. While i can list them i just cant align each next to the previous heading.
Its driving me potty, what a lot of crap coding i'm doing, my minds turning to mush, and i feel like my lifes going down the pan................... Dam it the posts taking out all the formatting so it dont line up like i typed it in my examples.

 

Hi mate,
I've had a quick play and the code below works, but the section a,b,c styles need re-adding to the lists.

Also, you'll need to play with the padding etc to align the lists up to how you want.

Let me know if it's not quite right, and I'll take another look (when I get a mo).
Cheers
NB

Code:

<style type="text/css">
.menu{
	width: 100%;
	}
#lists {
margin:10px;
text-align:center;
font-size: 11px; 
float:left;
display:inline;
width:150px;
}

#lists ul li {
list-style-type: none;
color: #999999;
}

#lits ul {
margin: 10px;
line-height: 16px;
}

.sectiona a {
color: #ff3300;
font-size: 12px;
font-weight: bold;
text-decoration:none;

}

.sectionb a {
color: #ff3300;
font-size: 12px;
font-weight: bold;
text-decoration:none;

}

.sectionc a {
color: #ff3300;
font-size: 12px;
font-weight: bold;
text-decoration:none;

}

</style>

<div class="menu">
<div id="lists"> 
<ul>
<li><a href="">Drains</a></li>
    <ul>
        <li><a href="/consumer/drains/blocked-drains">Domestic</a><br></li>
        <li><a href="/consumer/drains/blocked-sinks">Commercial</a><br></li>
        <li><a href="/consumer/drains/blocked-toilets">Relining</a><br></li>
        <li><a href="/consumer/drains/blocked-baths">New Installations</a><br></li>
        <li><a href="/consumer/drains/blocked-showers">Pipe Bursting</a><br></li>
        <li><a href="/consumer/drains/cleaning-unblocking">Rerounding</a><br></li>
        <li><a href="/consumer/drains/cleaning-unblocking">CCTV</a><br></li>
	</ul>
</ul>
</div>
<div id="lists"> 
<ul>
<li><a href="">Plumbing</a></li>
	<ul>
    	<li><a href="/consumer/glazing/emergency-repair">Internal Waste Pipe</a></li>
    </ul>
</ul>
</div>
<div id="lists">
<ul>
<li><a href="/consumer/plumbing">Maintenance</a></li>
	<ul>
 	<li><a href="/consumer/plumbing/bathroom-plumbing">Maintenance &amp; Plans</a><br></li>
	<li><a href="/consumer/plumbing/shower-plumbing">Graffiti</a><br></li>
	<li><a href="/consumer/plumbing/kitchens-plumbing">Pavement &amp; Street</a><br></li>
	</ul>
</ul>
</div>


</div>

 

I took your code and did a bit more modifing and its worked as i wanted. Only its not centered on teh page but shifted left. It also overlaps my footer, shiftingteh footer text right while the background footer image stays center. I just need to sort this then can get on with rest of site, as have to get this all finished by next week! If i'd stuck to tables i'd have had this done by now but dont think it would have looked as good. Plus its a great way to learn CSS.

Current code is now

<div id="lists">
<ul>
<li>
<span class="sectiona"><a href="">Drains</a></span></li>

<li><a href="/consumer/drains/blocked-drains">Domestic</a><br></li>
<li><a href="/consumer/drains/blocked-sinks">Commercial</a><br></li>
<li><a href="/consumer/drains/blocked-toilets">Relining</a><br></li>
<li><a href="/consumer/drains/blocked-baths">New Installations</a><br></li>
<li><a href="/consumer/drains/blocked-showers">Pipe Bursting</a><br></li>
<li><a href="/consumer/drains/cleaning-unblocking">Rerounding</a><br></li>
<li><a href="/consumer/drains/cleaning-unblocking">CCTV</a><br></li>

</ul>
</div>
<div id="lists">
<ul>
<li><
<span class="sectionb"><a href="">Plumbing</a></span></li>

<li><a href="/consumer/glazing/emergency-repair">Internal Waste Pipe</a></li>

</ul>
</div>
<div id="lists">
<ul>
<li>
<span class="sectionc">
<a href="/consumer/plumbing">Maintenance</a></span></li>

<li><a href="/consumer/plumbing/bathroom-plumbing">Maintenance &amp; Plans</a><br></li>
<li><a href="/consumer/plumbing/shower-plumbing">Graffiti</a><br></li>
<li><a href="/consumer/plumbing/kitchens-plumbing">Pavement &amp; Street</a><br></li>

</ul>
</div>


</div>
<br>
<div id="footer">
<div>2010&copy;CSL
&nbsp;&nbsp;
<a href="">Privacy Statement</a>
&nbsp;&nbsp;
<a href="">Terms &amp; Conditions</a></div>

</div>

CSS
#footer{
border-style:solid;
width:1000px;
height:15px;
text-align:center;
margin:10px;
background-image:url('images/footerbckgrn.png');
background-position:center;
background-repeat:no-repeat;
font-size:10px;
}

#footer a{
text-decoration:none;
}

#lists a{
text-decoration:none;
}

#lists {
margin:10px;
text-align:center;
font-size: 11px;
float:left;
width:150px;

}

#lists ul li {
list-style-type: none;
color: #999999;
font-size:10px;
padding:2px;
}

#lits ul {
margin: 10px;
line-height: 16px;
}

.sectiona a {
color: #ff3300;
font-size: 12px;
font-weight: bold;
text-decoration:none;

}

.sectionb a {
color: #ff3300;
font-size: 12px;
font-weight: bold;
text-decoration:none;

}

.sectionc a {
color: #ff3300;
font-size: 12px;
font-weight: bold;
text-decoration:none;

}

As always NB thanks for your help and suggestions. Appreciated