Could I get a hand with designing a site homepage?

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

Code:

<!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>

Code:

/* 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!*/

sunfighter · 05-18-2012, 06:33 PM

Here's a start. Play with it some more:

Code:

<!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>A Test Document</title>
<style type="text/css">
body{
	background-image: url('images/GreenDragon.jpg');
}
#wrapper{
	padding: 20px;
	height: 410px;
}

#top_thumbnails{
	height: 200px;
	width: 680px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
.bottom_thumbnails{
	height: 200px;
	width: 680px;
	margin-left: auto;
	margin-right: auto;
}
.img{
	float:left;
	text-align:center;
	border-width:5px;
	margin: 10px;
}

#wrapper a:hover img{
	border:#0000FF solid 5px;
}

</style>
</head>

<body>
<!--My part of the assignment is to make the homepage. I've already designed it, just have to build it.-->
 <div id="wrapper">
	    <div class="img">
		 <a href="ajax.php"><img src="Thumbnails/Baseball.JPG" width="200" height="160" class="top_img" alt="" /></a><br />
		 Baseball
		</div>

		<div class="img">
		<a href="ajax.php"><img src="Thumbnails/Volleyball.JPG" width="200" height="160" class="top_img" alt="" /></a><br />
		 Volleyball
		</div>

	    <div class="img">
		<a href="ajax.php"><img src="Thumbnails/Basketball.JPG" width="200" height="160" class="top_img" alt="" /></a><br />
		 Basketball
		</div>
	</div>



	<div class="bottom_thumbnails">
		<div class="img">
		 <a href="#"><img src="Thumbnails/Cheerleading.JPG" width="200" height="160" class="bottom_img" alt="" /></a><br />
		 Cheerleading
	        </div>

		<div class="img">
		<a href="#"><img src="Thumbnails/Track.JPG" width="200" height="160" class="bottom_img" alt="" /></a><br />
		 Track
		</div>

		<div class="img">
		<a href="#"><img src="Thumbnails/Football.JPG" width="200" height="160" class="bottom_img" alt="" />ttom_img"/></a><br />
		 Football
		</div>

	</div>
 </div>
</body>
</html>

SonicSuitMario · 05-18-2012, 08:41 PM

Thank you! That is much better! I think that with only a little work it'll be EXACTLY what we needed! Thanks again!

I'll let you know when/if the page is launched. I have to have the teacher, and then the principal approve of this before it's submitted. My class is making 3 or more versions of this before we decide what to use.