SonicSuitMario
05-17-2012, 09:09 PM
Hi there. I'm trying to make a homepage for my school's sports site. I thought it would be a cool idea to make it with a bunch of pictures as the links, and eventually designed it to look something like the Google Chrome newtab page. (You guys know what that looks like, right?). But I can't get it to line up right. They all hang on the left side. Does anyone have any ideas how to get it to work? (I'm taking my first web design class, so I apologize if I look stupid X-P .) Thanks in advance!
I don't really know how to submit code. I'll just insert them here...?
Save this as Index.HTML, and the next piece as Homepage.CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<!--My part of the assignment is to make the homepage. I've already designed it, just have to build it.-->
<div id="frame"> <!--This will be the frame. This is to keep the page centered-->
<div id="backing"> <!-- This part is going to be the background color.-->
<div class="thumbnails"> <!-- This is the section holding the links collectively.-->
<div class="img">
<!--Link goes here--><img src="Thumbnails/Baseball.JPG" width="200" height="160" class="img"/>
Baseball
</div>
<div class="img">
<!--Link goes here--><img src="Thumbnails/Volleyball.JPG" width="200" height="160" class="img"/>
Volleyball
</div>
<div class="img">
<!--Link goes here--><img src="Thumbnails/Basketball.JPG" width="200" height="160" class="img"/>
Basketball
</div>
<div class="img">
<!--Link goes here--><img src="Thumbnails/Cheerleading.JPG" width="200" height="160" class="img"/>
Cheerleading
</div>
<div class="img">
<!--Link goes here--><img src="Thumbnails/Track.JPG" width="200" height="160" class="img"/>
Track
</div>
<div class="img">
<!--Link goes here--><img src="Thumbnails/Football.JPG" width="200" height="160" class="img"/>
Football
</div>
</div>
</div>
</div>
</body>
</html>
/* CSS Document */
#frame{
border:5px;
padding:5px;
width:100px;}
/*Translation: the id Frame has a border 5PX thick, and a pad 5PX thick. It will be 100PX wide*/
#backing{
margin:15px;
background-image:url(background.gif);
width:80px}
/*Translation: the id Backing has a 15PX on all sides, and should have "background.gif" as a background. It will be 80PX wide*/
div.thumbnails{
margin:auto;
border:1px;
height:auto;
text-align:center;
width:120px;}
/*Translation: Margin of 2PX, border of 1PX, automatic height, automatic width, center align, 120PX wide */
div.thumbnails a:hover img{
border-color:#0000FF;
border-width:5px;}
/*Translation: while you hover over the images AFTER you code the links, the border turns blue, and appears 5PX thick. */
/*I still need to style the links and thumbnails. This is almost done, but I need help getting them to line up right!*/
I don't really know how to submit code. I'll just insert them here...?
Save this as Index.HTML, and the next piece as Homepage.CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<!--My part of the assignment is to make the homepage. I've already designed it, just have to build it.-->
<div id="frame"> <!--This will be the frame. This is to keep the page centered-->
<div id="backing"> <!-- This part is going to be the background color.-->
<div class="thumbnails"> <!-- This is the section holding the links collectively.-->
<div class="img">
<!--Link goes here--><img src="Thumbnails/Baseball.JPG" width="200" height="160" class="img"/>
Baseball
</div>
<div class="img">
<!--Link goes here--><img src="Thumbnails/Volleyball.JPG" width="200" height="160" class="img"/>
Volleyball
</div>
<div class="img">
<!--Link goes here--><img src="Thumbnails/Basketball.JPG" width="200" height="160" class="img"/>
Basketball
</div>
<div class="img">
<!--Link goes here--><img src="Thumbnails/Cheerleading.JPG" width="200" height="160" class="img"/>
Cheerleading
</div>
<div class="img">
<!--Link goes here--><img src="Thumbnails/Track.JPG" width="200" height="160" class="img"/>
Track
</div>
<div class="img">
<!--Link goes here--><img src="Thumbnails/Football.JPG" width="200" height="160" class="img"/>
Football
</div>
</div>
</div>
</div>
</body>
</html>
/* CSS Document */
#frame{
border:5px;
padding:5px;
width:100px;}
/*Translation: the id Frame has a border 5PX thick, and a pad 5PX thick. It will be 100PX wide*/
#backing{
margin:15px;
background-image:url(background.gif);
width:80px}
/*Translation: the id Backing has a 15PX on all sides, and should have "background.gif" as a background. It will be 80PX wide*/
div.thumbnails{
margin:auto;
border:1px;
height:auto;
text-align:center;
width:120px;}
/*Translation: Margin of 2PX, border of 1PX, automatic height, automatic width, center align, 120PX wide */
div.thumbnails a:hover img{
border-color:#0000FF;
border-width:5px;}
/*Translation: while you hover over the images AFTER you code the links, the border turns blue, and appears 5PX thick. */
/*I still need to style the links and thumbnails. This is almost done, but I need help getting them to line up right!*/