Results 1 to 5 of 5
  1. #1
    Lounger
    Join Date
    Dec 2009
    Posts
    34
    Thanks
    3
    Thanked 0 Times in 0 Posts

    html css - center unordered list

    Hi, I'm sure this requires a simple fix. I'd like to keep both lists side by side with the items aligned to the left but in the centre of the site. any help appreciated
    Attached Files Attached Files

  2. #2
    3 Star Lounger
    Join Date
    Dec 2009
    Location
    Northern California
    Posts
    327
    Thanks
    15
    Thanked 143 Times in 92 Posts
    Well, this will be done with CSS ... and I'm definitely no CSS expert but I can say nobody is going to be able to zero in on what's wrong without examining your CSS code, which hasn't been supplied here.

    Here's the html snippet you provided (in black), with a few embellishments I've added (in red):
    Code:
    <div class="container" style='width: 600px; margin: 0 auto 0 auto'>
    	
    	<div id="left-sec" style='float:left'>
    		<div class="inner-title">
    			<h2>Our products and services</h2>
    			
    			
    		</div>
    		
    		<div class="inner-content">
    		
    			<ul class="service-nav">
    				<li>1234</li>
    				<li>12345</li>
    				<li>111111111111</li>
    				<li>2222222222222222</li>
    				<li>3333333</li>
    				<li>4444444</li>
    				<li>55555555555555555</li>
    				<li>666666666666</li>
    				<li>77777777777777</li>
    			</ul>
    			
    		</div>
    	</div>
    	<div id="right-sec" style='float:right'>
    		<div class="inner-title">
    			<h2>Our data is ustilised for:</h2>
    			
    			
    		</div>
    		
    		<div class="inner-content">
    		
    			<ul class="service-nav">
    				<li>aaaaaaaaa</li>
    				<li>bbbb</li>
    				<li>ccccccccccc</li>
    				<li>dddddddddddddd</li>
    				<li>eeeeeeeeee</li>
    				<li>ffffffffffffff</li>
    				<li>gggggggggggg</li>
    				
    			</ul>
    			
    		</div>
    
    	</div>
    
    </div>
    (Aside: The snippet you posted started with a few closing tags from a previous section and ended before closing two DIV tags, but I imagine those were probably in your original source and just not posted here.)

    The key to getting the two columns side by side is the "float" attributes. Those would typically be included in the "left-sec" and "right-sec" definitions in your CSS code, but since we haven't seen your style sheet we don't know what's in there.

    Unfortunately, "float" will push the two columns all the way to the left and right margins, not centered like you want. So what you want to do somehow is limit the width of the outer block element (the "container" DIV), and then it can be centered.

    In my illustration I resorted to hard-coded the outer DIV as 600 pixels wide, and then the "autos" in the "margin" attribute centers the block. Again, some of that may already be in the "container" spec in your unseen style sheet.

    There's likely a better way to do it without hard-coding the width, but as I mentioned, I'm far from being an expert at this. Maybe this will be enough to help you zero in on where you need to focus your attention so you can troubleshoot the problem yourself, but if not perhaps it might be better to ask this in a web design newsgroup, such as "comp.infosystems.www.authoring.stylesheets".

  3. The Following 2 Users Say Thank You to dg1261 For This Useful Post:

    annoyingmouse (2016-10-19),Happy Larry (2016-09-14)

  4. #3
    Lounger
    Join Date
    Dec 2009
    Posts
    34
    Thanks
    3
    Thanked 0 Times in 0 Posts
    dg1261, worked perfectly, many thanks

  5. #4
    New Lounger
    Join Date
    Oct 2016
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you sharing this unordered list program, it was worked perfectly!!!

  6. #5
    New Lounger
    Join Date
    Oct 2010
    Location
    Cambridge, UK
    Posts
    17
    Thanks
    1
    Thanked 4 Times in 4 Posts
    The answer from dg1261 is brilliant but when it comes to things like this I cheat and stand on the shoulders of giants and "borrow" from Bootstrap. I'm not 100% sure but it would help to see what your standard CSS files have and whether or not they already have a grid system to use (most do already if you're using a framework). However, if you add the Bootstrap CSS then you can wrap your ULs in a row class (your container will already proide some level of centering) and add col-md-6 to each div containing the UL:

    HTML Code:
    <section id="sec-three" class="bg1">
        <div class="container">
            <div class="row">
                <div id="left-sec" class="col-md-6">
                    <div class="inner-title">
                        <h2>Our products and services</h2>
                    </div>
                    <div class="inner-content">
                        <ul class="service-nav">
                            <li>1234</li>
                            <li>12345</li>
                            <li>111111111111</li>
                            <li>2222222222222222</li>
                            <li>3333333</li>
                            <li>4444444</li>
                            <li>55555555555555555</li>
                            <li>666666666666</li>
                            <li>77777777777777</li>
                        </ul>
                    </div>
                </div>
                <div id="right-sec" class="col-md-6">
                    <div class="inner-title">
                        <h2>Our data is ustilised for:</h2>
                    </div>
                    <div class="inner-content">
                        <ul class="service-nav">
                            <li>aaaaaaaaa</li>
                            <li>bbbb</li>
                            <li>ccccccccccc</li>
                            <li>dddddddddddddd</li>
                            <li>eeeeeeeeee</li>
                            <li>ffffffffffffff</li>
                            <li>gggggggggggg</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    This is a working JSFiddle with the CSS linked.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •