Website code help

Discussion in 'Web Design and Development' started by 7DSniper, Jul 8, 2012.

  1. 7DSniper macrumors regular

    Joined:
    Apr 15, 2012
    Location:
    South Florida
    #1
    I am brand new to web development and have put together my self a website. I am having trouble with a certain section of my site. I have a group of 3 columns within a div tag I am trying to center all elements with in this div.

    my site is www.hooddesigns.com the icons at the bottom are what I am trying to center.

    I know my site code is prob a huge mess but again I have only take 5 classes on the basics of HTML and CSS and this is what I came up with. Any help would be appreciated.
     
  2. Cerebrus' Maw, Jul 9, 2012
    Last edited: Jul 9, 2012

    Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #2
    Been a while since I did CSS but just messing around with your site with Site Inspector.

    You have each 3 div, one surrounding each of your images, but each of those divs are at root level. So you are styling each one sort of adhoc.

    I would place the 3 elements in a surround <div>. The text-align attribute is a bit of a hack, as it should not apply to certain elements.

    Code:
    <div class="image_wrapper">
       <img src=""facebookIcon" />
       <img src="MailIcon" />
       <img src="youtubeIcon" />
    </div>
    
    And your CSS as something like:

    Code:
    .image_wrapper {
       text-align:center;
    }
    
    .image_wrapper img {
        /** How you want to style each 
              image within the image_wrapper div **/
    }
    
    Let me know how that goes. If it doesn't work, I'll get my editing tools out and see if I can throw a working example together.
     
  3. McCaffers macrumors member

    Joined:
    Jul 8, 2012
    #3
    I fixed your site so everything is nicely in the middle.

    Replace everything in the <body> tag with:

    Code:
    <body>
    <div style="width:100%;text-align:center;">
    	a href="http://www.hooddesigns.com/index.html"><img src="./Graphic Design for the web and print by Adam Hood_files/hooddesigns-masthead.png"  alt="Hood Designs Logo"></a>
    </div>
    <div style="text-align: center; margin-bottom:30px; margin-top:30px;"><img src="./Graphic Design for the web and print by Adam Hood_files/lucky-owl.jpg" alt="Lucky Owls"></div>
    
    <footer class="center">
    	<nav>
    		<a href="http://www.hooddesigns.com/index.html">Home</a> | 
    		<a href="http://www.hooddesigns.com/portfolio.html">Portfolio</a> |
    		<a href="http://www.hooddesigns.com/clients.html">Clients</a> | 
    		<a href="http://www.hooddesigns.com/about.html">About</a> | 
    		<a href="http://www.hooddesigns.com/contact.html">Contact</a> |
    		<a href="http://www.hooddesigns.com/blog.html">Blog</a>
    	</nav>
    </footer>
    
    <div style="width:100%;text-align:center;margin-top:30px;">
    	<div style="display:inline-block;text-align:center;width:100px;">
    		<a href="https://www.facebook.com/pages/Hood-Designs/303292426384488/"><img src="./Graphic Design for the web and print by Adam Hood_files/Facebook.png" alt="facebook-icon" title="facebook-icon"></a>
    	</div>
    	<div style="display:inline-block;text-align:center;width:100px;">
    		<a href="http://www.youtube.com/user/eggsncoffee?feature=results_main/"><img src="./Graphic Design for the web and print by Adam Hood_files/YouTube.png" alt="b.funk music" title="b.funk"></a>
    	</div>
    	<div style="display:inline-block;text-align:center;width:100px;">
    		<a href="mailto:adam@hooddesigns.com"><img src="./Graphic Design for the web and print by Adam Hood_files/Mail.png" alt="mail-icon" title="mail-icon"></a>
    	</div>
    </div>
    
    </body>
     
  4. 7DSniper thread starter macrumors regular

    Joined:
    Apr 15, 2012
    Location:
    South Florida
  5. Hexiii macrumors 65816

    Hexiii

    Joined:
    Jun 30, 2011
    Location:
    Prague, Czech Republic
    #5
    I think this won't work, since it's just text align. I would use margin: 0 auto.
     

Share This Page