Fri, 2010-03-12 02:08
Hello everyone, I have been trying to start coding and using
tags instead of tables to format my pages. When developing my simple homepage at www.marioplanet.com I ran into some problems. I have been trying to create 2 or 3 rows of 2 or 3 images with captions underneath each one. Additionally, I need to have both the images and the captions to be links. I can't seem to find out how to do such a layout but I was relatively close. Here is my code:
Mario Toys at Mario Planet
Welcome!
Welcome to Mario Planet! We here at Mario Planet strive to serve you better, constantly providing you with better cutomer service, quality Mario toys, and a simple yet intuitive user interface that you can count on. Here at Mario Planet expect to find all of the Super Mario Brothers toys and accessories including action figurines, plush toys, board games and more!
Featured Products
Question Block (With Sound) - Plush
Contact Us:
877-264-6343
Feedback:
Questions, comments or concerns? Please let us know so we can serve you better!
-----
@charset "UTF-8";
/* CSS Document */
body {
margin: 0px;
padding: 0px;
background-color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#body {
width:960px;
margin: 0 auto;
}
#header {
width:960px;
height:224px;
text-align:center;
background-color:#DDDDDD;
}
#leftcol {
float: left;
width: 130px;
height: 650px;
font-size:14px;
background-color:#EBEBEB;
}
#rightcol {
float: left;
width: 170px;
height: 650px;
background-color:#EBEBEB;
font-size:14px;
}
#content {
float: left;
width: 660px;
height: 650px;
background-color:#FFFFFF;
font-size:12px
}
#footer {
clear: both;
width: 960px;
height:80px;
text-align:center;
font-size:12px;
background-color:#DDDDDD;
}
#feedbacktextlink {
font-size:12px;
}
.left {
float:left;
}
#questionblock {
clear:both;
}
.left2 {
float:left;
}
h1 {
color: #FF0000;
}
h2 {
color:#FF0000;
}
a:link {
color:#FF0000;
}
a:visited {
color:#FF0000;
}
a:hover {
color:#FF0000;
text-decoration: none;
}
a:active {
color:#FF0000;
}
Fri, 2010-03-12 02:11
#1
I apologize for not properly
I apologize for not properly inserting my code, here is my actual HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Mario Toys at Mario Planet</title> <link href="global.css" rel="stylesheet" type="text/css"> </head> <body> <div id="body"> <div id="header"><img src="logo.png" width="954" height="224" alt="logo"></div> <div id="leftcol"> <p><strong>Shop:</strong></p> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/14">By Category</a></p> <p><a href="http://www.marioplanet.com//ez-catalog/X382366/15">By Character</a></p> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/23">By Power-Up</a></p> <p><img src="images/layout/characters/mario/mario_1.png" alt="Mario" width="120" height="204"></p> </div> <div id="content"> <h1 class="headers">Welcome!</h1> <p>Welcome to Mario Planet! We here at Mario Planet strive to serve you better, constantly providing <em>you</em> with better cutomer service, quality Mario toys, and a simple yet intuitive user interface that you can count on. Here at Mario Planet expect to find all of the Super Mario Brothers toys and accessories including action figurines, plush toys, board games and more!</p> <h1><span class="headers">Featured Products</span></h1> <div class="left"> <a href="http://www.marioplanet.com/ez-catalog/X382366/0/6"><img src="images/catalog/mario_action_figures/Mario_luigi_star_set.jpg" width="183" height="159"></a> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/0/6">Mario, Luigi and Star - Figure Set</a></p> </div> <div class="left"> <a href="http://www.marioplanet.com/ez-catalog/X382366/13/2"><img src="images/catalog/mario_board_games/monopoly.jpg" width="255" height="159"></a> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/13/2">Nintendo Monopoly</a></p> </div> <div id="questionblock" class="left2"> <a href="http://www.marioplanet.com/ez-catalog/X382366/12/9"><img src="images/catalog/mario_plush/question_block1.jpg" width="176" height="159"></a> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/12/9">Question Block (With Sound) - Plush</a></p> </div> <div id="nesmegaphone" class="left2"><a href="http://www.marioplanet.com/ez-catalog/X382366/6/15"><img src="Images/NES_megaphone1.jpg" width="234" height="148"></a> <p><a href="http://www.marioplanet.com/ez-catalog/X382366/6/15">NES Controller Megaphone</a></p> </div> </div> <div id="rightcol"> <p><strong>Contact Us:</strong></p> <p>877-264-6343</p> <p><a href="mailto:info@marioplanet.com"info@marioplanet.com">info@marioplanet.com</a></p> <p> </p> <p><strong>Feedback:</strong></p> <p>Questions, comments or concerns? <em>Please</em> let us know so we can serve you better!</p> <p id="feedbacktextlink"><a href="mailto:feedback@marioplanet.com">feedback@marioplanet.com</a></p> </div> <div id="footer"> <p class="style7"><a href="index.html">Home Page</a> | <a href="about_us.html">About Us</a> | <a href="http://www.marioplanet.com/ez-catalog/X382366/">Catalog</a> | <a href="contact_us.html">Contact Us</a> | <a href="http://abc.eznettools.net/marioplanet/mario_planet_mailing_list.html">Mailing List</a> | <a href="privacy_policy.html">Privacy Policy</a></p> <p class="style7">© Copyright 2010 MarioPlanet.com. All Rights Reserved</p> </div> </div> </body> </html>
Fri, 2010-03-12 02:32
#2
Is this what you're looking
Is this what you're looking for: http://gtwebdev.com/workshop/layout/inline-block-gallery.php
Fri, 2010-03-12 03:09
#3
Partially, if you visit my
Partially, if you visit my website (marioplanet.com) and you look at the first row of two images (the figure set and the monopoly game) then I would like another row just like that.
However, if you check out that first row, I'm also having some trouble finding out how to space those to elements properly... 
Fri, 2010-03-12 13:13
#4
Let's approach this in a
Let's approach this in a different manner. Try showing what you want instead of what you have.
Fri, 2010-03-12 13:59
#5
Alright, good idea, I would
Alright, good idea, I would like to feature a few rows of images of products (with 2-3 images on each row) as well as a link below each image giving the product name. Additionally, both the image and the caption below of each set will need to be linked to the product that they are specifying.
I believe I found a site that offers some code as a solution, here is the link:
http://nopeople.com/CSS/thumbnail%20presentation/index.html#css
Since I am very new to both HTML and CSS, I am not sure if this a reliable way to go but as far as I can tell, it seems pretty good.
Fri, 2010-03-12 14:05
#6
qcom wrote: Alright, good
Alright, good idea, I would like to feature a few rows of images of products (with 2-3 images on each row) as well as a link below each image giving the product name. Additionally, both the image and the caption below of each set will need to be linked to the product that they are specifying. ...
Sounds exactly like the link I provided earlier.
Fri, 2010-03-12 14:19
#7
Sorry, this one though seemed
Sorry, this one though seemed easier for me to understand...