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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Beginner and needing help for an assignment (HTML/CSS)

    Hi everyone, I'm new here (and also new to HTML/CSS) so be gentle . I have an assignment (I'm a Graphic Design student) and the professors don't help anyone with this stuff so I am coming to you guys for help. I'm going to have a lot of questions for you all. Firstly, here is what I'm trying to get my site to look like:


    This is what I have so far:


    As you can tell the smaller images are to the right of the bigger image and not vertical like I want. I'm going to make that large image a Flash Animation (but not sure how to put it into the code) and there is white space at the bottom of the site (I wanted the gradient to extend all the way down to the bottom)


    I'm really new at this so please use general terms or explain things (it would be really helpful)

    Here is the HTML code:


    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=UTF-8" />
    <title>Garden Grove</title>
    <link rel="stylesheet" type="text/css" href="garden_garden.css"/>
    </head>
    
    <body>
    <div class="wrapOverall">
            
      <div class="header">
        <img class="logo" src="Images/logo.png" width="242" height="82" alt="garden grove" />
      </div>
       
       <div class="bar">
       		<img class="blackbar" src="Images/magazine_bar.png" width="898" height="16" alt="bar" /></div>
            
            <div class="navmain">
            <ul>
            
            	<li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">DIY</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">How-To</a></li>
            
            </ul>
            
            
            </div><!!!END NAVMAIN!!!>
            
             
            
                <div class="content">
                  <p><img src="Images/mainpicture.png" width="489" height="345" alt="mainpicture" />
                    
                    
                    <img class- src="Images/button_flower_top.png" alt="buttontop" width="106" height="109" class="topbutton" />
                    <img class="middlebutton" src="Images/button_flower_middle.png" width="106" height="112" alt="buttonmiddle" />
                    
                    <img class="bottombutton" src="Images/button_flower_bottom.png" width="110" height="114" alt="buttonbottom" />
                    
                  </p>
                  <p></p>
                </div><!!!END CONTENT!!!>
                
      <div class="wrapbucket">
                
        <div class="bucket"></div>
      </div>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    </body>
    </html>

    And here is the CSS Code:

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    
    /* ###################### */
    /* General HTML Tag Rules */
    /* ###################### */
    
    body { background-image:url(Images/bg_full.jpg);
    	background-repeat:repeat-x;
    	background-color:#ffffff;
    	background-attachment:fixed;
    	background-position:top;
    	
    	
    }
    
    h1, h2, h3, h4, h5 h6 {
    	
    }
    
    p {
    	
    }
    
    a {
    
    }
    
    a:hover {
    	
    }
    
    hr {
    	
    }
    
    /* ############################ */
    /* General Template Class Rules */
    /* ############################ */
    
    .wrapOverall {
    	
    	width:1420px;
    	
    	
    	
    }
    .wrapbucket {
    	
    }
    .header {
    	background-image:url(Images/bg_header.jpg);
    	background-repeat :no-repeat;
    	background-position:top center;
    	height:108px
    }
    .bar img.blackbar {
    	width:1420px;
    	
    }
    .header img.logo{
    	margin-top:1px;
    	margin-bottom:;
    	margin-left:;
    	margin-right:;
    }
    
    .navmain {
    	float:center;
    	padding-left:400px
    }
    .content {
    	padding-left:40px;
    	padding-top:53px;
    }
    .content img.topbutton {
    	
    	
    	}
    .content img.middlebutton {
    }
    	
    .bucket {
    	background-color:#000000;
    	
    }
    
    /* ######################## */
    /* General Navagation Rules */
    /* ######################## */
    
    .navmain ul {
    	margin:0px;
    	padding:0px;
    }
    .navmain ul li {
    	margin:0px;
    	padding:40px;
    	list-style:none;
    	display:inline;
    	
    }
    .navmain ul li a {
    	margin:0px;
    	padding:0px;
    	color:black;
    	text-decoration:none;
    	font:Arial, Helvetica, sans-serif;
    	font-size:10pt;
    	font-weight:100
    	
    	
    }
    .navmain ul a:hover {
    	
    }
    
    /* ############ */
    /* Bucket Rules */
    /* ############ */
    
    .bucket ul {
    	
    }
    .bucket ul li {
    	
    }

  • #2
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    For your images, what I would do is place the left large image into its own div container and the right small images into a second div container (since they, together, only make up a single section of your page). With css, float both the divs to the left so that they will float nicely next to each other. Set clear on all the small images to both so they don't float next to each other. Oh, and since the images aren't really paragraphs, remove the <p> tags.
    Code:
    <div id="mainpicture">
    <img src="Images/mainpicture.png" width="489" height="345" alt="mainpicture" />
    </div>
                    
    <div id="sidepictures">
                    <img class- src="Images/button_flower_top.png" alt="buttontop" width="106" height="109" class="topbutton" />
                    <img class="middlebutton" src="Images/button_flower_middle.png" width="106" height="112" alt="buttonmiddle" />
                    
                    <img class="bottombutton" src="Images/button_flower_bottom.png" width="110" height="114" alt="buttonbottom" />
    </div>
    Code:
    #mainpicture {
     float: left;
    }
    #sidepictures {
     float: left;
    }
    #sidepictures img {
     clear: both;
    }
    On another note, when you create an animation in Flash, there is an option to publish it which will generate an HTML page that contains all the code needed to display the animation in HTML.

    http://www.w3schools.com/cssref/pr_class_float.asp
    http://www.w3schools.com/cssref/pr_class_clear.asp
    "Yeah science!"
    Online Science Tools

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When I put your code in, the side pictures are still aligned horizontally insead of vertically, how would I go about getting them to align vertically?

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Makes things easy i would Put a Table inside the Div Tags for the Images,

    that way no matter what they are using be it FF or IE they will always stay within the Tables

    by looking at your code you have 6 Div Tags all you really need is 4,

    BANNER, NAV, BODY and FOOTER by putting a Table inside the CONTENT it cuts out 2 Div Tags


  •  

    Posting Permissions

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