1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Another CSS aligning issue

Discussion in 'Web Development & Web Hosting' started by twizzle, Nov 10, 2010.

  1. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    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?
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  2. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    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
     
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA
  3. dmarsh

    dmarsh Terabyte Poster

    3,782
    302
    184
    You tried the old clear left/right ?
     
    Certifications: CITP, BSc, HND, SCJP, SCJD, SCWCD, SCBCD, SCEA, N+, Sec+, Proj+, Server+, Linux+, MCTS, MCPD, MCSA, MCITP, CCDH
  4. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    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.
     
    Last edited: Nov 10, 2010
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  5. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    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>
    
     
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA
  6. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    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
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,

Share This Page

Loading...