Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Could I get a hand with designing a site homepage?

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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    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>

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •