Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Website code help

7

7DSniper

macrumors regular
Original poster
Apr 15, 2012
130
0
South Florida
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 http://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.
 
C

Cerebrus' Maw

macrumors 6502
Mar 9, 2008
409
1
Brisbane, Australia
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.
 
Last edited:
M

McCaffers

macrumors member
Jul 8, 2012
37
0
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>
 
Hexiii

Hexiii

macrumors 65816
Jun 30, 2011
1,113
373
Prague, Czech Republic
Cerebrus' Maw said:
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.
Click to expand...

I think this won't work, since it's just text align. I would use margin: 0 auto.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom