Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Oct 2007
    Posts
    17
    Member #
    16036
    Hellooooo,

    I am trying to finish the homepage of a website... I did the rough placing in photoshop.. and this is my first attempt slicing....
    Following are my issues:

    1. After the header, when i try to put the image followed by the nav-bar.. the nav-bar ends up behind the img. I tried this many times using a separate div for each part. Finally i did it just one after another (without css.. just html). but i end up with a gap bw the image and nav bar....

    2. The same gap appears wen i try to put a title under every gallery pic...

    Am i missing a code here? Why dint my div space in CSS work?

    Any help will be appreciated....

    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href = "html/css/main.css" rel = "stylesheet" type="text/css" />

    <title>artist</title>


    </head>
    <body>
    <div class = "site-wrapper">
    <div class = "header-wrapper">
    <div class = "header-title">
    <img src = "html/images/logo.gif" width="260" height="120"/>
    </div>

    </div>

    <img src = "html/images/baby.png" width="965" height="435" />

    <div class="clear"></div>
    <div class = "nav-bar">
    <ul>
    <li ><a href="#">Home</a></li>
    <li><a href="#">Galleries</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>
    <div class="clear"></div>

    <div class="gallery_content">
    <img src="html/images/belly.gif" width="275" height="220"/>
    <div class="gallery_title">Bellies</div>
    </div>
    <div class="gallery_content">
    <img src="html/images/babies.gif" width="275" height="220"/>
    <div class="gallery_title">Babies & Children</div>
    </div>
    <div class="gallery_content">
    <img src="html/images/portrait.gif" width="275" height="220"/>
    <div class="gallery_title">Portraits</div>
    </div>
    <div class="comm_content">
    <img src="html/images/fb.gif" width="50" height="52"/>
    </div>
    <div class="comm_content">
    <img src="html/images/tw.gif" width="50" height="52"/>
    </div>
    <div class="comm_content">
    <img src="html/images/bl.gif" width="50" height="52"/>
    </div>

    <div class="clear"></div>
    <div class="footer-wrapper">
    <a href="#">Home</a> &nbsp;|&nbsp; <a href="# ">Gallery</a> &nbsp;|&nbsp; <a href="# ">Artist</a>&nbsp;|&nbsp;<a href="#">Blog</a>&nbsp;|&nbsp;<a href="#">Contact</a>
    <p>Copyright @CarolineBurgess.com</p>
    <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Created by abcd efgh</p>
    </div>

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


    CSS:


    /* CSS Document */

    /*{font-family:arial,helvetica,sans-serif,tahoma,verdana,geneva,lucida,"lucida grande";}
    html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form,
    fieldset, table, th, td {
    margin: 0; padding: 0; outline: none; color:#f0f0ff;
    }

    <div class = "main-pic">
    <img src = "html/images/baby.png" />
    </div>


    */
    body {
    font: 9pt/17pt arial;
    margin: 0px;
    padding: 0px;
    background:#f0f0f0;
    outline: none;
    }
    .site-wrapper
    {
    width:965px;
    min-height:1100px;
    margin-left:auto;
    margin-right:auto;
    background:#ffffff;
    }

    .clear {
    clear: both;
    }
    .header-wrapper
    {
    width:965px;
    height:125px;
    background:#ffffff;
    }
    .header-title
    {
    float:left;

    padding-left:20px;
    }

    .nav-bar
    {

    display:block;
    width:965px;
    height:25px;
    margin-left:auto;
    margin-right:auto;

    }


    .nav-bar ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    .nav-bar li
    {
    float:left;
    }
    .nav-bar a:link, .nav-bar a:visited
    {
    display:block;
    width:193px;
    height:25px;
    font-weight:regular;
    font-family:Pristina;
    color:#b77461;
    background-color:#4d3e2f;
    text-align:center;
    font-size:22px;
    padding:0px;
    text-decoration:none;

    }
    .nav-bar a:hover, .nav-bar a:active
    {
    color:#ffffff;
    background-color:#b77461;
    }
    .gallery_content
    {
    float: left;
    padding-top:25px;
    padding-left:23px;
    padding-right:23px;
    background:#ffffff;


    }
    .comm_content
    {
    float: left;
    padding-top:75px;
    padding-left:15px;
    background:#ffffff;
    }
    .gallery_title
    {
    text-align:center;
    font-family:Pristina;
    height:25px;
    font-size:20px;
    color:#b77461;
    background:#4d3e2f;
    width:275px;
    }


    .footer-wrapper
    {
    float:right;
    display:inline;
    color:#c0c0c0;
    font-size:12px;
    padding-right:15px;
    }

    .footer-wrapper a
    {

    color:#c0c0c0;
    font-size:13px;
    list-style-type:none;
    text-decoration:none;
    }
    Sharsimroy

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,724
    Member #
    5580
    Liked
    718 times
    Wouldn't your PS design (sliced) be the background images of your page?

    Too bad you can't upload everything online and show us what you have (a link to your URL).
    We can't duplicate your stuff on our computers. How do we know what it looks like?


  4. #3
    Junior Member
    Join Date
    Oct 2007
    Posts
    17
    Member #
    16036
    I havent uploaded the site yet.

    I will upload it soon... and then be back..

    Thanks for the reply..
    Sharsimroy


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:35 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com