Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

pictures not lining up 1

Status
Not open for further replies.
dardartektips

dardartektips

MIS
Jul 18, 2002
46
US
I am trying to redesign our front page to have a fluid design.

I have created
my css_index_new.css is :
Code: 
html, body { margin: 0; padding: 0; background-color:#DDD8B9; }
#header { 
  width: 100%;
  position:absolute;
  top:1%;
  left:1%;
}
#intro {
  width: 100%;
  position: absolute; 
  top: 25%;
  right: -35%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16pt;
  font-style: italic;
}
#products {
  width: 75%;
  position: absolute;
  top: 100%;
  left: 0%;
}
#row1_text {
  margin: 0; padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16pt;
  font-style: italic;
  text-align: center;
  position:absolute; 
  top:100%;
  left:0%;
  width: 100%;
  z-index: -1;
}
#row1_col1 {
  margin: 0; padding: 0;
  position:absolute; 
  top:100%;
  left:1%;
  width: 32%;
  z-index: 1;
}
#row1_col2 {
  margin: 0; padding: 0;
  position:absolute; 
  top: 100%;
  left: 34%;
  width: 32%;
  z-index: 1;
}
#row1_col3 {
  margin: 0; padding: 0;
  position:absolute; 
  top: 100%;
  left: 67%;
  width: 32%;
  z-index: 1;
}

#row2 {
  margin: 0; padding: 0;
  position:absolute; 
  left: 0%;
  top:120%;
  width: 100%;
  z-index: 1;
}

#about_toltec {
  position:absolute; 
  left: 0%;
  bottom: 100%;
  width: 35%;
}
#contact_toltec {
  position:absolute; 
  left: 95%;
  bottom: 0%;
  width: 100%;
}
#why_toltec {
  position:absolute; 
  left: 100%;
  bottom: 0%;
  width: 100%;
}
#copyright {
  text-align: center;
  width: 300%; 
  position: absolute; 
  top: 200%;
  left: 3%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
  font-style: italic;
}

My html is as follows:
Code: 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<link rel="stylesheet" type="text/css" href="style_scripts/css_index_new.css">
</head>

<body>
	<div id="header" style="z-index: 2">
		<div id="row1_col2" style="z-index: 9">
			<div id="row2" style="z-index: 1">
				<div id="row2" style="z-index: 1">
					<div id="row2">
						<div id="row2"><a href="news.htm">
							<img border="0" src="images/buttons/news.jpg" width="100%" alt="Toltec News"></a>
							<div id="row1_text"><a href="news.htm">Toltec News</a></div>
						</div>
						<a href="pendants.htm"><img border="0" src="images/buttons/pendants_flush_mount_produc.jpg" width="100%" alt="Flush Mounted Lighting"></a>
						<div id="row1_text"><a href="pendants.htm">Pendants &amp; Flush Mount</a></div>
					</div>
					<a href="chandelier_index.htm"><img border="0" src="images/buttons/iron_chandeliers_product.jpg" width="100%" alt="Iron Chandeliers"></a><div id="row1_text"><a href="iron_chandeliers.htm">Iron Chandeliers</a></div>
				</div>
				<a href="most_popular_chandeliers.htm">
				<img border="0" src="images/buttons/most_popular_chandelier.jpg" width="100%" alt="Most Popular Chandeliers"></a><div id="row1_text"><a href="most_popular_chandeliers.htm">Most Popular Chandeliers</a></div>
			</div>
			<a href="whats_new_chandeliers.htm">
			<img border="0" src="images/buttons/whats_new_chandelier.jpg" width="100%" alt="What's New In Chandeliers"></a><div id=row1_text><a href="whats_new_chandeliers.htm">What's New In Chandeliers</a></div>
		</div>
		<div id="row1_col3" style="z-index: 8">
	  		<div id="row2">
				<div id="row2">
		  			<div id="row2">
						<div id="row2" style="z-index: 1"><a href="italian_glass.htm"><img border="0" src="images/buttons/island_product.jpg" width="100%" alt="Island Lights"></a>
							<div id="row1_text"><a href="italian_glass.htm">Island Lighting</a></div>
						</div>
						<a href="lamps_torchiers.htm"><img border="0" src="images/buttons/product_lamps_torchiers.gif" width="100%" alt="Lamps &amp; Torchiers"></a><div id="row1_text"><a href="lamps_torchiers.htm">Lamps &amp; Torchiers</a></div>
					</div>
					<a href="bathroom.htm"><img border="0" src="images/buttons/bathroom_product.jpg" width="100%" alt="Bathroom Lighting"></a><div id="row1_text"><a href="bathroom.htm">Bathroom Lighting</a></div>
				</div>
				<a href="most_popular.htm"><img border="0" src="images/buttons/most_popular_product.jpg" width="100%" alt="Most Popular Billiard Lights"></a><div id="row1_text"><a href="most_popular.htm">Most Popular Billiard</a></div>
			</div>
			<a href="whats_new.htm"><img border="0" src="images/buttons/whats_new_product.jpg" width="100%" alt="What's New at Toltec"></a><div id="row1_text"><a href="whats_new.htm">What's New in Billiard Lighting</a></div>
		</div>
		<div id="row1_col1" style="z-index: 7">
			<div id="row2">
				<div id="row2">
					<div id="row2">
						<div id="row2">
							<div id="copyright" style="z-index: 1">
								<div id="about_toltec">
									<div id="contact_toltec">
										<div id="why_toltec"><img border="0" src="images/buttons/why_buy_toltec.gif" width="100%" align="right"></div>
				    					<a href="Contact_Us.htm"><img border="0" src="images/buttons/contact_toltec.gif" width="100%" align="left"></a>
				    				</div>
									<img border="0" src="images/buttons/about_toltec.gif" align="left" width="100%">
								</div>
							    <p>Copyright © 2007  [Toltec Company]. All rights reserved.</p>
								<p><a title="back to top" style="font-family: Bookman Old Style" href="#top"><font size="2">Back to Top</font></a></p>
							</div>
							<a href="brass_glass.htm"><img border="0" src="images/buttons/brass_glass_product.jpg" width="100%" alt="Brass &amp; Glass Tiffany's"></a>
							<div id="row1_text"><a href="brass_glass.htm">Brass &amp; Glass</a></div>
						</div>
						<a href="4_bar_lights.htm"><img border="0" src="images/buttons/4_bar_lights_product.jpg" width="100%" alt="4 Bar Lights"></a>
						<div id="row1_text"><a href="4_bar_lights.htm">4 Shade Billiard Lighting</a></div>
					</div>
					<a href="more_billiard.htm"><img border="0" src="images/buttons/more_billiard_product.jpg" width="100%" alt="More Billiard Lights"></a>
					<div id="row1_text"><a href="more_billiard.htm">More Billiard Lighting</a></div>
				</div>
				<a href="copperfoil.htm"><img border="0" src="images/buttons/copper_foil_product.jpg" width="100%" alt="Copper Foil Billiard Lights"></a>
				<div id="row1_text"><a href="copperfoil.htm">Copper Foil Billiard Lighting</a></div>
			</div>
			<a href="italian_glass.htm">
			<img border="0" src="images/buttons/italian_glass_product.jpg" width="100%" alt="Italian Glass Billiard Lights"></a>
			<div id="row1_text"><a href="italian_glass.htm">Italian Glass Billiard Lighting</a></div>
		</div>
		<div id="intro" style="z-index: 11">
			<div id="products" style="z-index: 2"><img border="0" src="images/buttons/our_products.gif" width="40%"></div>
			<img border="0" src="images/buttons/index_statement.gif" width="60%">
		</div>
		<a name="top"></a><img border="0" src="images/buttons/toltec_logo_main.gif" width="35%">
	</div>
</body>
</html>

On the newly created page there is a gap between the picture and the text on the following pictures/hyperlinks,

Italian Glass Billiard Lighting
Copperfoil
More Billiard
4 shade Billiard
Brass & Glass
Pendants & Flush Mounts
Island

I can see it in frontpage, but when you look at the page in Fox it's not there but it is in IE. I don't care if it's there or not but I want it to be consistent, it's messing up the alignment of my page.

I am a relative newby to css, in case you can't tell by my code. Where have I gone wrong ?

Thanks,
Laura
 
Sort by date Sort by votes
Your code is way over engineered for that task, those nested divs could create all kinds of problems, especially if you return to it in 6 months time and need to make changes, you will not even remember writing it. You should validate your code using one of the online validation services to weed out all the errors. If you do not understand any of the errors, ask again here and someone will point you in the right direction.
Divs with id's can only be declared once, if you are using the same div more than once on a page, you should declare them as classes rather than an id's.
Once you get the code to validate properly then you can start to track down your gremlin. It will be a simple thing buried in there somewhere.


Keith
 
Upvote 0 Downvote
Alright, I'm trying to validate it but I can't get past the "DOCTYPE" statement.

How do I know what DOCTYPE this is ? and since I know the next question will be about encoding, should I use utf-8, I assume windows-1252 would be to restrictive, even though my site will mostly be viewed only by people in North America, there will be Chinese viewing it from time to time.

Thanks,
Laura

feeling REALLY stupid right about now.
 
Upvote 0 Downvote
HTML has evolved into a confusing concept, I have never been able to work out why there isn't just a single standard for all web pages.
The main 2 doctypes for your type of HTML are these (I usually use the loose version).

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

As for encoding, use .........
Code: 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
as you are using now which will at least get your code to validate.
AFIK the encoding on affects the page's content so if you only use standard chars. the page should render ok.

Check out the appearance of your page at different screen sizes too, as many of your elements overlap at smaller sizes.


Keith
 
Upvote 0 Downvote
I swear I tried that yesterday and it didn't work, but today it does. (lol who knows what combinations I tried, and maybe I just didn't know what I was looking at for results.)

Is it ok for me to just change my <div id=...> to <div class=...> or is there more to it ? the validator doesn't seem to mind it, but they'll still be nested. Is it the nesting that causes the problems or is it the id tag ?

The overlapping I knew about I just haven't decided what to do about it yet. Can you size text like I have the pictures on my page ? At one point I actually created gif's and had them size with the picture above it, I liked that, because I could use whatever font I wanted and knew that it would appear the same on everyone's computer, but I wasn't sure if that was the best approach. I was afraid I'd be loading to many pics. Any ideas which is better?

I can do alright with the syntax of html once I've figured out what I want, I'm just not real good about which direction to take because I don't know what's possible.

Thanks,
Laura
 
Upvote 0 Downvote
Change the <div id=... to <div class=... and change the style sheet declarations from '#row1_txt' to '.row1_txt'

I am not sure why you are using such deep nesting and this may well be causing the alignment problems. You are also partly assigning layers which isn't necessary on such a layout.

Start with a container div (cont) which is the body of your page, make this the full width of the page. You can also set the height if it is a fixed size. This will stop the divs from going haywire at lower screen sizes. Create a single div class (item) and set the width to a third of the container width. Set this dic to text align center and set up the font attributes for the link.
For each of your images, which should be stored at actual size, place a div (item) in your code and put the image and text in that div, the text should line up centrally underneath the picture.
Repeat this for each image and text pair, the divs should align themselves and leave you with much less code.
There is no need to put the text in a seperate div unless you want to add fancy borders etc.



Keith
 
Upvote 0 Downvote
There is also no need for the absolute positioning. There are a few cases where this type of positioning is needed, but not many. Instead, have a look at how floating works.


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

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
768
spamjim
spamjim
jason.lex
  • Locked
  • Question
Caption slide up?
Replies
0
Views
114
jason.lex
jason.lex
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
169
pendle666
pendle666
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
167
PeDa
PeDa
stinkybee
  • Locked
  • Question
HTML5 Datalist not working
Replies
2
Views
235
stinkybee
stinkybee

Part and Inventory Search

Sponsor

Back
Top