DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 07-20-2006, 10:30 AM   #1
Daudio
Member
 
Daudio's Avatar
 
Join Date: Aug 2005
Location: Royal Oak, Detroit suburb
Posts: 174
Default CSS problem - learning experience

I have a little problem in one of my web pages, and while I could fix it easily with a workaround, I thought it might be a good chance to learn something about CSS positioning.

In the page http://daveayers.com/Modeling/RRCranes.htm, the third H2 is appended to the right of the previous block, rather then exhibiting its own block behavior and sitting below it. I could insert a 'clearboth' before it and achieve the desired results, but I want to understand what is going wrong here and learn to prevent these kind of problems rather then patching them.

The code before and after the non-block like behavior is:

Code:
	<div class="thumbnail">
<a href="images/MOW_Equip.jpg"><img border="2" src="images/MOW_Equip_small.jpg" alt="MOW Equip. models" width="200" height="55"></a>
     <br> A small track crane made from some Selly parts and more, a brass Burro crane, among some of my MOW equipment
	</div>

<p>&nbsp;</p>  ***problem around here***

<h2>'G' Gauge Freelance Railroad Crane:</h2>
The CSS for the '.thumbnail' div that preceeds the wonky acting H2 is:

Code:
.thumbnail
{
	float: left;
	width: 210px;
	border: 1px solid #999;
	margin: 10px;
	padding: 5px;
	background-color: transparent;
}
This is an older page that I added some new content to. The old way was to use a Table to layout the images, but now I am using the 'thumbnal' divs. to let them float to any size screen. Not a perfect solution with differently sized images, but I kinda like it.

I hope someone can help me understand what is going on here, and that will help me get a better internal model of CSS. I am still trying for that 'Ah Ha' moment...

   
__________________
Dave

DaveAyers.com, Brass Backshop Forum
Daudio is offline   Reply With Quote
Old 07-20-2006, 10:35 AM   #2
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

Clearing floats can often be a problem. After a very quick look, try putting <br clear="all" /> after the last thumbnail div.

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website

Kelvyn is offline   Reply With Quote
Old 07-21-2006, 06:46 AM   #3
Daudio
Member
 
Daudio's Avatar
 
Join Date: Aug 2005
Location: Royal Oak, Detroit suburb
Posts: 174
Default

Kelvyn,

Quote:
Clearing floats can often be a problem. After a very quick look, try putting <br clear="all" />
There are a number of ways I can add a 'clear all', but that is the workaround I refered to. I was hoping that understanding what underlies the clearing floats problem would lead to more insight into CSS

   
__________________
Dave

DaveAyers.com, Brass Backshop Forum
Daudio is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Learning CSS RJ Emery Web Site Building & Maintenance 10 02-04-2007 05:45 AM
eBay Experience? dthomsen8 General Publishing Topics 35 09-02-2006 04:43 PM
Learning to do Forms dthomsen8 Web Site Building & Maintenance 4 04-13-2006 08:27 AM
Learning MS Word dthomsen8 General Publishing Topics 3 12-27-2005 04:04 PM
Anyone have InCopy experience? Norman Hathaway Print Design 4 02-22-2005 06:03 AM


All times are GMT -8. The time now is 04:48 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.