Bottom Aligning Issue

HTML & CSS
1

Hello all,

I used to use tables and I’ve recently forced myself to switch (thankfully) to more valid code. I am still learning, so be easy on me! Could you please visit my design here: FabricSupply.com

The issue that is irritating me is that the three buttons towards the middle of the design that say “VIEW OUR APPAREL FABRICS” is not bottom aligned. I have tried playing with the CSS to try and bottom align but haven’t been successful. Is there an easy and simple way to do this? I would like it to match the bottom of the left side image.

2

You might start by cleaning up some of the 52 validation errors (some fairly serious) and enclosing text in <p> tags. Taking a look in Dragonfly, I also see a lot of vertical-align: middle attributes in your stylesheet, with no alignment, bottom or otherwise, specified for the buttons themselves.

3

Sorry Black Max, I suppose I should have taken care of those errors prior to posting. I have since got those errors cleaned up. As I said, i’m still in the process of learning. Also, I apologize about posting in the wrong section. I was unsure which one I should post in.

As for the vertical-align attribute, I was in the process of playing around with it. The parent element (div / menu_right) has a specific height that is equal the height of the left image. However, regardless of whether I put a vertical-align attribute of top, middle, or bottom (I have switched it to bottom) I see no difference. Am I doing this an incorrect way?

4

Not a problem with either one. I learned the very same way, on these very same forums. :slight_smile:

You need to figure out what’s overriding your vertical-align command. It’s probably the specific height, but I’m not sure (haven’t looked closely at it). The way I learned this stuff (aside from bugging people like Paul O’B and others!) is to strip my CSS down to the bare wires, then add one element back at a time until it breaks. That element is causing the break. Or you can go in reverse, removing the specific height and seeing if the button aligns properly (though the removal of the height attribute might play hob elsewhere). It’s all good fun.

5

Hi,

CSS doesn’t have a bottom alignment in the same way that table cells have and vertical-align:bottom only aligns text or inline elements along the same single line. It does not align block elements.

To put your buttons at the bottom and all be in the same place you will need to absolutely place them there. First create a stacking context by putting position:relative on the parent and then absolutely place the button at the bottom.


.menu_content {
    background-color: #E8E8E8;
    position:relative;
}
.button {
    position: absolute;
    right: 20px;
    bottom: 0;
    margin: 0;
    text-align: right;
    width: 500px;
}

You will of course need to ensure the text above doesn’t overwrite the button as it is now removed from the flow. However you would have hat to cap the content somehow anyway as you have a fixed height element to work with.

6

Well, after you suggested the position: relative; attribute I went and read a few tutorials on it. I learned quite a bit and this worked perfectly. I appreciate it! Thanks Paul for helping me out with this!

7

Hi phpGator,

One quick way to see what is overiding a css rule is to use firebug:

  1. go to the ‘HTML’ tab
  2. click the line of html in question
  3. in the right firebug window click the ‘Style’ tab
    [LIST=1]
  4. All the css that applies to the html will display in this right window
  5. It will show the full cascade and lines that are overriden are crossed-out
    [/LIST]

Don’t know if this helps, but it is a useful troubleshooting technique short of just knowing :slight_smile:

Regards,
Steve

8

Well, don’t know what source you are learning from – but a big tip, ease up on the DIV. One of the things I’ve said time and time again is that CSS is only as good as the HTML it’s applied to.

You’ve got a horde of DIV and classes doing existing tags or paragraph/heading tag’s job…

Also if you’re building new pages, you shouldn’t be using transitional markup – that says you’re in transition from 1997 to 1998… it means outdated coding practices.

All those clearing div? unneccessary. The gif’s like menu_top and menu_bottom? Don’t even belong in the markup as those are presentational – CSS’ job.

Even simple stuff like:
<div class=“right_header”>Categories</div>

Should probably be a H2… without a class! The quote should be inside a blockquote tag, etc, etc…

Since you’re just starting out, I really suggest reading a decent tag reference. Tutorials give you the syntax, but until you know what all the tags are and what they are for, your HTML is going to suffer for it. While a bit outdated, I like the old WDG HTML reference:
HTML 4 Reference

Because it takes the specification and turns it into plain english. The reference here at sitepoint is also good, but more advanced… learn what tags are available and what they are for using the old reference, then dig into the nitty-gritty of things like browser specifics with the one here.

If I was writing that same page, the HTML would probably go something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen_css3.css"
	media="screen,projection,tv"
/>

<title>
	FabricSupply.com
</title>

</head><body>

<!--
	horizontal rules in below code are present for CSS off users
	and/or non-screen users. Should be hidden in CSS
-->

<div id="pageWrapper">

	<h1>FABRICSUPPLY.COM</h1>

	<ul id="mainMenu">
		<li><a href="#" class="current">HOME</a></li>
		<li><a href="#">PRODUCTS</a></li>
		<li><a href="#">ABOUT</a></li>
		<li><a href="#">CONTACT</a></li>
	</ul>
	
	<hr />

	<div id="homeBanner">
		<span>
			Why, Hello.
			<em>We sell high-quality fabric at lower prices than your major local retailers.</em>
		</span>
		<blockquote>
			<p>
				"I found some amazing prices at FabricSupply.com, but when I received the package I was even happier. The fabric was packaged nicely and a better quality than what I was even anticipating. It was even more worthwhile when I had seen my daughters face when she saw the new stylish jeans I had made her."
			</p><p>
				<cite><span>Linda</span> Oklahoma City, OK</cite>
			</p>
		</blockquote>
	<!-- #homeBanner -->
	
	<hr />

	<div id="columnWrapper">

		<div class="fabricSection">
			<img
				src="images/apparel_image.gif"
				alt="apparel_image"
				class="leadingPlate"
			/>
			<h2>APPAREL FABRIC</h2>
			<p>
				Tired of thinking of mom-jeans when you think of making your own outfits? Our apparel fabric is one of the most comprehensive lists of the fabrics that will allow you to design the latest and most stylish jeans, pants, shirts, and professional designer quality outfits.
			</p>
			<a href="#" class="button">View Our Apparel Fabrics</a>
		<!-- .fabricSection --></div>
	
		<hr />
		
		<div class="fabricSection">
			<img
				src="images/quilt_image.gif"
				alt="quilt image"
				class="leadingPlate"
			/>
			<h2>QUILT FABRIC</h2>
			<p>
				Our Quilt Fabric is some of the most stylish and trendy fabrics you will find. We have a wide range of materials to help you get the right fabric for the right type of quilt you are hoping design.
			</p>
			<a href="#" class="button">View Our Quilt Fabrics</a>
		<!-- .fabricSection --></div>
	
		<hr />

		<div class="fabricSection">
			<img
				src="images/decor_image.gif"
				alt="decor image"
				class="leadingPlate"
			/>
			<h2>HOME DECOR FABRIC</h2>
			<p>
				Looking to spruce up the living room? We have a wide range of fabrics available. Our fabrics include everything from contemporary to country, from modern to classic.
			</p>
			<a href="#" class="button">View Our Decor Fabrics</a>
		<!-- .fabricSection --></div>
	
		<hr />
		
		<div id="contentWrapper"><div id="content">

			<div class="blogPost">
				<h2>
					<a href="#">The Best Fabric for Kids Clothing</a><br />
					<small>Posted by PHPGator<span> - </span></small>
					<span>COMMENTS<a href="#">0</a></span>
				</h2>
				<p>
					Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit. Nam blandit, felis nec hendrerit commodo, libero dolor vehicula eros, in gravida mauris mi ut orci. Ut lorem sem, pulvinar venenatis sodales imperdiet, dignissim nec tellus. Etiam at imperdiet est. Pellentesque consectetur, diam et dictum lacinia, nisl felis ullamcorper urna, quis tempor sem erat a justo. Etiam purus odio, dictum sed consectetur ac, lacinia in velit. Curabitur arcu turpis, bibendum sed lacinia elementum, lobortis nec eros. In iaculis ligula vitae turpis accumsan tempus. Nulla facilisi. Sed felis ante, vulputate vel gravida ac, fringilla in leo. Mauris pretium dapibus nulla non feugiat. Etiam adipiscing, odio laoreet dictum faucibus, dui neque suscipit mauris, aliquam dignissim ligula elit non sapien. Praesent pulvinar mollis varius. Suspendisse hendrerit, purus nec adipiscing pellentesque, nibh magna lacinia odio, porttitor lobortis ante libero id neque. Mauris venenatis lobortis sodales. Integer et feugiat lectus. Etiam eros nunc, adipiscing vel commodo vel, convallis eget purus. Nam gravida sapien id ligula condimentum consequat. Fusce vel pellentesque velit. Aliquam a tellus vitae purus convallis sollicitudin ut tempor magna.
				</p><p>
					Quisque viverra nunc sed risus congue non fringilla turpis egestas. Proin ut libero purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam faucibus velit at ante interdum feugiat. Nulla velit dolor, lobortis a cursus ut, pellentesque eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent scelerisque volutpat dolor ac vulputate. Duis congue elit et risus imperdiet at convallis turpis aliquam. Nunc velit ipsum, placerat vehicula sollicitudin eget, dignissim nec turpis. Nam tristique, metus ac commodo imperdiet, eros erat porttitor libero, sed porta est lacus eu tortor.
				</p>
			<!-- .blogPost --></div>

			<hr />
			
		<!-- #content,#contentWrapper --></div>

		<div id="sideBar">

			<div class="subSection">

				<h2>Recently Added Fabrics</h2>

				<div class="item">
					<img
						src="images/fabric_sample5.jpg"
						height="65"
						alt="black shirt fabric"
					/>
					<div>
						<h3>Black Shirt Fabric</h3>
						Our Price: $6.98<br />
						<span class="status">In-Stock</span>
					</div>
					<a href="#" class="button">BUY NOW</a>
				<!-- .item --></div>

				<hr />
			
				<div class="item">
					<img
						src="images/fabric_sample3.jpg"
						height="65"
						alt="blue shirt fabric"
					/>
					<div>
						<h3>Blue Shirt Fabric</h3>
						Our Price: $6.98<br />
						<span class="status">In-Stock</span>
					</div>
					<a href="#" class="button">BUY NOW</a>
				<!-- .item --></div>

				<hr />

				<div class="item">
					<img
						src="images/fabric_sample4.jpg"
						height="65"
						alt="leopard fabric"
					/>
					<div>
						<h3>Leopard Fabric</h3>
						Our Price: $6.98<br />
						<span class="status">In-Stock</span>
					</div>
					<a href="#" class="button">BUY NOW</a>
				<!-- .item --></div>

				<hr />

			<!-- .subSection --></div>

			<div class="subSection">
				<h2>Categories</h2>
				<ul>
					<li><a href="#">Apparel</a> (3)</li>
					<li><a href="#">Blog</a> (3)</li>
					<li><a href="#">Denim</a> (3)</li>
					<li><a href="#">Fabric</a> (3)</li>
					<li><a href="#">General</a> (3)</li>
				</ul>
			<!-- .subSection --></div>

			<hr />
			
		<!-- #sideBar --></div>

	<!-- #columnWrapper --></div>

	<div id="footer">
		<ul>
			<li><a href="#" class="current">Home</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
		&copy; 2011 TT Enterprises. All right reserved.
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

Throwing about a quarter of your HTML away. Since it’s all plain borders and roundeds I’d consider CSS3, though it could just as easily be handled CSS2 with some expressions to help out “poor old IE.”

I’ll toss together a CSS3 example, and maybe if I have time a CSS2 one, with a breakdown of the how/where/why of the HTML and CSS so you can learn from it.

Oh, couple other things – you know 800px isn’t 800 screen width friendly, right? You need to take off 32-48px for things like scrollbars, but that’s why fixed width layouts, as popular as they are with the people who think drawing a picture in photoshop has ANYTHING to do with web design, are a miserable accessibility /FAIL/. I’ll make up my demo as semi-fluid (might put a couple div back in during the process) so you can see how that’s handled too.

9

One trip to the ice-cream shop before closing and hanging out with my friends later… here’s an example of doing your page with CSS3.

http://www.cutcodedown.com/for_others/phpgator/template_css3.html

Which uses only one presentational image (h1Logo.png) and your six content images. No other images were harmed in the filming of this website :smiley:

As with all my examples the directory is open for easy access:
Index of /for_others/phpgator

Naturally because it’s CSS3 IE8 and lower users won’t get the fancy rounded corners… oh noes, not that :smiley:

If I have time later tonight I’ll belt out a CSS2 version using images… then tomorrow I’ll do a section-by-section explanation of the code so you can understand the choices and methods I used in building both versions.

10

… and the CSS2 version using images, that adds all those pesky image div’s back in place:

http://www.cutcodedown.com/for_others/phpgator/template_css2.html…

This version works just fine all the way back to IE 5.5

Fun stuff. Tomorrow when/if I have time I’ll do one of my famous “explanations” of all the code…