Divisions not melting properly

HTML & CSS
1

Hi again and thx for your help.

I have the following problem:

I want to copy the effect on the 3 bottom images on the following website: www.kcstravel.com. The website was designed using tables and I can’t figure out a way to get the same result using CSS. I somehow never get the picture and the underneath square to fit properly.

Any help will be greatly appreciated!

Follows html and CSS:

<div id="navigation">
<div id="navigationcontainer">
	<div id="navigation1">
		<div id="navigationlink1">
				<a href="aaa.html"><img src="images/navigation/aaa.jpg" alt="aaa" style= "border: none;"</a>
		</div>	
		<div id="navigation1square">
			<h3>aaa <font color="#595959">aaa</font> - aaa</h3>
			<h4>aaa</h4>
		</div>
	</div>
		
	<div id="navigation2">
		<div id="navigationlink2">
			<a href="bbb.html"><img src="images/navigation/bbb.jpg" alt="bbb" style= "border: none;"</a>
		</div>
		<div id="navigation2square">
			<h3>bbb <font color="#595959">bbb</font> bbb</h3>
			<h4>bbb</h4>
		</div>
	</div>

	<div id="navigation3">
		<div id="navigationlink3">
			<a href="ccc.html"><img src="images/navigation/ccc.jpg" alt="ccc" style= "border: none;"</a>
		</div>	
		<div id="navigation3square">
			<h3>ccc <font color="#595959">ccc</font> ccc</h3>
			<h4>ccc</h4>
		</div>
	</div>
</div> <!--end of navigationcontainer-->
</div> <!--end of navigation-->

CSS

#navigation {
	width: 1000px;
	height: 260px;
	border-top: 1px solid #dbdbdb;
	margin: 0px 0px 0px 0px;
	clear: both;
	position: static;
	
}

#navigationtitles {
	margin-left: 30px;
}


#navigationtitles h1 {
	font-size: 11px;
	color: #595959;
	weight: none;
	line-height: 11px;
}

#navigationtitles h2 {
	font-size: 13px;
	color: #3c81a9;
	weight: bold;
	line-height: 13px;
}

#navigationcontainer {
	height:  210px;
	width:   1000px;
	clear: both;
}

#navigation1, #navigation2, #navigation3 {
	float: left;	
	width: 289px;
	height: 190px;
}

#navigation1 {
	margin: 10px 15px 10px 30px;
}

#navigation2 {
	margin: 10px 15px 10px 15px;
}

#navigation3 {
	margin: 10px 30px 10px 15px;
}

#navigation1 img, #navigation2 img, #navigation3 img {
	border: none;
	padding: 0px 0px 0px 0px;
	margin: none;
	height: 138px;
}


#navigation1 h3, #navigation2 h3, #navigation3 h3 {
	font-size: 12px;
	color: #3c81a9;
	weight: bold;
	line-height: 10px;
}

#navigation1 h4, #navigation2 h4, #navigation3 h4 {
	font-size: 10px;
	color: #595959;
	font-weight: lighter;
	line-height: 5px;
}

#navigationlink1, #navigationlink2, #navigationlink3 {
	width: 287px;
	height: 138px;	
}


#navigation1square, #navigation2square, #navigation3square {
	border-top: 0px hidden #dbdbdb;
	border-left: 2px solid #dbdbdb;
	border-right: 1px solid #dbdbdb;
	border-bottom: 2px solid #dbdbdb;
	padding: 0px 0px 0px 0px;
	margin: none;
	width: 284px;
	height: 32px;
}

#navigation a:link, #navigation a:visited, #navigation a:active, #navigation a:hover{
	font-weight: none;
	text-decoration: none;
	border: none;
	padding: 0px 0px 0px 0px;
}

#navigation a:link img, a:visited img, a:active img, a:hover img{
	border: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
2

There are two main things catching you out there. Firstly, the first big lesson in CSS is that browsers have defaults—most commonly margins and paddings on elements. So many people start their style sheet with a ‘reset’ in which all default margins and paddings are removed, such as:


html, body, div,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
form, fieldset, legend, label, textarea, 
span, em, strong, sub, sup, cite,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
    vertical-align: bottom;
}

That reset would fix both problems here, but more specifically, you need the two additions in red below:

#navigation1 h3, #navigation2 h3, #navigation3 h3 {
font-size: 12px;
color: #3c81a9;
weight: bold;
line-height: 10px;
[COLOR="Red"]margin:0;[/COLOR]
}

and

#navigation a:link img, a:visited img, a:active img, a:hover img{
border: none;
padding: 0px;
margin: 0px;
[COLOR="Red"]vertical-align:bottom;[/COLOR]
}

Hope that helps. :slight_smile:

3

Thx so much for the quick reply.

I’ll try it and see if it works.

Cheers

4

Ralph,

Would this have the same effect as listing everything?


* {
margin:0;
padding:0;
}
5

worked wonderfully.

Cheers

6

Yes, except it wouldn’t cover vertical-align:bottom on the image, although you don’t really need that here.

That all in one reset can have some nasty side effects, which is why it is not recommended any more. It especially affects form elements in undesired ways. (Once those elements are reset, you can’t add new styles to them etc…)

It’s either best to use something like what I posted above or just explicitly set margins and paddings on each element as you come to it (perhaps the purest approach).

7

Ralph,

Thanks. I will be changing my CSS to what you posted.