horizontal alignment <div> with images *Help Im a Newbie*

[Anthony Hughes]

Hello!

I have a slight issue with some html/css, I have managed to horizontally align 4 <div>'s next to one another and centralized them too, but im not sure whether my markup is valid?
Can anyone help?

thank you!

--------------------------------------------

html;

<div id="icons">
<div id="telephone"><img src="icons/telephone.png" class="icon" alt="telephone icon"/><p>01244 ?</p></div>
<div id="mobile"><img src="icons/mobile.png" class="icon" alt="Mobile icon"/><p>07779 ?</p></div>
<div id="email"><img src="icons/email.png" class="icon" alt="Email icon"/><p>Jo...@aol.com</p></div>
<div id="location"><img src="icons/location.png" class="icon" alt="Location icon"/><p>Chester, Cheshire</p></div>
</div>

--------------------------------------------

CSS;

#icons {
text-align: center;
-moz-column-count: 4;
}

.icon {
width: 50px;
height: 50px;
padding-top: 15px;
}

[ralph.m]

Hi Anthony Hughes. Welcome to the forums.

Yep, that code looks valid to me, although be aware that it won't work in most browsers, because the column-count property is a new CSS3 feature that is still experimental, and attaching -moz- to the front will mean it only works in Firefox.

There are more bulletproof ways to make those divs sit side by side, like floating them, or setting them to display: inline-block, or setting them to display: table-cell (and giving the container display: table).

[dresden_phoenix]

Welcome to SitePoint Anthony.

Good effort! What you did is TECHNICALLY valid*, but it can be accomplished far more efficiently and far more semantically correct.

* Your only actual technical problem was that you used vendor specific CSS properties. You really dont want to fall into that trap, if you can avoid it. -moz-column-count: 4; only works for Firefox! Oh and some folks consider it somewhat dubious to put block elements, such as Ps adjacent to inline elements such as IMGs ( still your code your, technically, pass validation)


Let start from scratch, shall we?

<ul id="icons">
	<li id="telephone"><img src="icons/telephone.png" class="icon" alt="telephone icon"   />01244 ?</li>
	<li id="mobile"><img src="icons/mobile.png" class="icon" alt="Mobile icon" />07779 ?</li>
	<li id="email"><img src="icons/email.png" class="icon" alt="Email icon"  />Jo...@aol.com</li>
	<li id="location"><img src="icons/location.png" class="icon" alt="Location icon" />Chester, Cheshire</li>
</ul>

See ma, no divs ( as none were actually needed).
You information was a LIST so we might as well replace the outermost DIV with UL, and thus the children become LIs instead of DIVs.
You don't need the P as we can achieve the effect w/o the extra tag using CSS.

With the CSS you have two options for lining up the LIs horizontally: display:inline-block; or float:left;

#icons {padding:0 0 0 .3em;list-style: none; width: 80%; margin:0 auto;}
#icons  li {display:inline-block; outline: 1px solid pink; width:25%;text-align: center;margin-left: -.25em; vertical-align: top;
}
#icons  li img {width: 50px;height: 50px;padding-top: 15px;display:block; margin:0 auto;}

OR

#icons {padding:0;list-style: none; width:80%; margin:0 auto;}
#icons  li {float:left;  width:25%;text-align: center; }
#icons  li img {width: 50px;height: 50px;padding-top: 15px;display:block; margin:0 auto;}

hope that helps!

[Anthony Hughes]

Welcome to SitePoint Anthony.

Good effort! What you did is TECHNICALLY valid*, but it can be accomplished far more efficiently and far more semantically correct.

* Your only actual technical problem was that you used vendor specific CSS properties. You really dont want to fall into that trap, if you can avoid it. -moz-column-count: 4; only works for Firefox! Oh and some folks consider it somewhat dubious to put block elements, such as Ps adjacent to inline elements such as IMGs ( still your code your, technically, pass validation)


Let start from scratch, shall we?

<ul id="icons">
	<li id="telephone"><img src="icons/telephone.png" class="icon" alt="telephone icon"   />01244 ?</li>
	<li id="mobile"><img src="icons/mobile.png" class="icon" alt="Mobile icon" />07779 ?</li>
	<li id="email"><img src="icons/email.png" class="icon" alt="Email icon"  />Jo...@aol.com</li>
	<li id="location"><img src="icons/location.png" class="icon" alt="Location icon" />Chester, Cheshire</li>
</ul>

See ma, no divs ( as none were actually needed).
You information was a LIST so we might as well replace the outermost DIV with UL, and thus the children become LIs instead of DIVs.
You don't need the P as we can achieve the effect w/o the extra tag using CSS.

With the CSS you have two options for lining up the LIs horizontally: display:inline-block; or float:left;

#icons {padding:0 0 0 .3em;list-style: none; width: 80%; margin:0 auto;}
#icons  li {display:inline-block; outline: 1px solid pink; width:25%;text-align: center;margin-left: -.25em; vertical-align: top;
}
#icons  li img {width: 50px;height: 50px;padding-top: 15px;display:block; margin:0 auto;}

OR

#icons {padding:0;list-style: none; width:80%; margin:0 auto;}
#icons  li {float:left;  width:25%;text-align: center; }
#icons  li img {width: 50px;height: 50px;padding-top: 15px;display:block; margin:0 auto;}

hope that helps!

WOW, this works great with a few minor tweaks!

Didn't even think about <ul>, and I used this for my <nav>.

Thank you very much!

[Paul O'B]

I would also use classes instead of IDs for that section as it is likely you would want to reproduce that information possibly in the footer (or somewhere else) so I'd use classes instead. IDs should really be used for structural elements that appear only once in the markup (or for js hooks where needed) but the rest of the time classes are more suitable and make specificity less of an issue.

In your alt text there is no need to add the work "icon" as we know its an image because it's in an image tag. Usually icons are decorative and should be in the background but as you have no explanation as to what that number on the page is then a foreground image is ok although I would probably use an image replacement technique and put the image in the background and have the words telephone number in the html.

[Anthony Hughes]

Thanks for the reply Paul.

I have another query here, I just want to know whether this is valid also, and not frowned upon. I am trying to create a navigation with the <nav> tag, and I want to display the <a> links inline.
I tinkered around with <ul> for the nav but couldn't get the desired effect, but now when I changed it back from <nav> I have to display: inline-block for my <a> and I know I didnt do this before.
Thanks in advance.




<nav>
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="services.html">Services</a>
<a href="gallery.html">Image Gallery</a>
<a href="contact.html">Contact Us</a>
</nav>

---------------------------------------------------------


nav {
border-bottom: 2px solid #c69c6d;
background-color: white;
text-align: center;
}

nav a {
display: inline-block;
margin: 10px;
color: #858585;
font-family: futura, sans-serif;
padding: 7px;
border-radius: 3px;
text-decoration: none;
}

nav a:hover {
background-color: #c69c6d;
color: white;
text-decoration: none;
}

[Paul O'B]

Hi,

While the html is valid it is not semantically correct to have a list of menu items that are not held within a list. It is also bad for accessibility to have bare anchors next to each other as some screen readers will read the links without pausing just like a whole sentence.

I would insert a ul and wrap the anchors ion list tags. This is where I have issues with html5 as the nav tag is just a wasted element and is just extra mark up (although as browsers catch up it may add structural significance).

Just remove the margin,padding and list-style form the ul. Set the list elements to display:inline-block as well as the anchors and you should be good to go in ie8+. If you are supporting IE7 and under then there is an inline block fix for the list item as follows.

li.test{
display:inline-block;
*display:inline;
zoom:1.0;

}

The anchors don't need the IE fix because inlne-block works ok on inline elements in ie7 and under but not on block elements (without the hack above).

[Anthony Hughes]

Ah, OK, that makes more sense, sorry to keep asking questions, but there seems to be alot of information on the internet about CSS and trying to find the most legitimate way is hard to find.
<ul> does seem to be the more logical way, but the whole <nav> tag in html5 was confusing me.

Thanks again for your time Paul.

Changed-

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Image Gallery</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>

------------------------------------------------------------


nav {
border-bottom: 2px solid #c69c6d;
background-color: white;
text-align: center;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
}

nav ul li {
display: inline-block;
}

nav a {
display: block;
margin: 10px;
color: #858585;
font-family: futura, sans-serif;
padding: 7px;
border-radius: 3px;
text-decoration: none;
}

nav a:hover {
background-color: #c69c6d;
color: white;
text-decoration: none;
}

[Paul O'B]

Ah, OK, that makes more sense, sorry to keep asking questions,

No worries. That's what we are here for

[Anthony Hughes]

OK, thats great because I have another query, probably the last one (I hope) for you.

I am using the <footer> tag which I know is new, but shouldn't really affect my mark-up, and when I set the background-color it seems to overlap onto my <ul> above when I do NOT set a height for my <ul> div. Could somebody (Paul ) have a look please! <!--is there anyway of giving +rep to people on here?-->
Thank you again!




<div id="contact">
<ul id="icons">
<li id="telephone"><img src="icons/telephone.png" class="icon" alt="telephone icon" />01244 377211</li>
<li id="mobile"><img src="icons/mobile.png" class="icon" alt="Mobile icon" />07779 796 556</li>
<li id="email"><img src="icons/email.png" class="icon" alt="Email icon" />JohnGarnerFloors@aol.com</li>
<li id="location"><img src="icons/location.png" class="icon" alt="Location icon" />Chester, Cheshire</li>
</ul>
</div>

</div><!-- end of body content div -->
</body>
<footer>
<div>
<p>&#169; Copyright John Garner Flooring 2013 <a href="http://www.spacegecko.co.uk" class="right">Web Design - Space Gecko</a></p>
</div>
</footer>
</html>

----------------------------------------



#icons {
padding: 0;
list-style: none;
height: 100px;
width:100%;
margin: auto 0;
}

#icons li {
float:left;
width:25%;
text-align: center;
font-family: 'Futura', sans-serif;
font-size: 0.8em;
color: #858585;
padding-bottom: 0px;
}

#icons li img {
width: 50px;
height: 50px;
padding-top: 15px;
padding-bottom: 10px;
display: block;
margin:0 auto;
}

footer div {
background-color: #858585;
}

footer div a {
text-decoration: none;
color: white;
}

footer div p {
font-family: 'Futura', sans-serif;
font-size: 0.7em;
color: white;
padding: 3px;
margin: 0;
}

footer div .right {
float: right;
}

[Paul O'B]

Hi,

The reason that the background extends when you remove the height from the ul is that the ul contains only floated elements. An element that holds only floats in fact holds nothing as floats are removed from the flow and therefore the ul has zero height. The backgrounds and borders of elements that follow floats will slide under the float (because the float is effectively removed from the flow) and the background will continue until it reaches the containing block i.e. the point where the element would have resided had the float not been there pushing the foreground content away. Floats only repel foreground content and not the backgrounds and borders of elements that follow them.

The solution is to make sure you contain your floats using either a simple overflow:hidden on the parent ul (where you don't need visible overflow) or used the clearfix method - or revised clearfix.

<!--is there anyway of giving +rep to people on here?-->

No we don't have that feature enabled as it was abused in the past. Your thanks is enough