Gap bw Pic and Nav-bar

Hellooooo,

We are trying to surface the homepage of the website… I do the rough keeping in photoshop.. this also is my 1st attempt slicing….
Subsequent are my problems:

ONE. After the header, while i try to squeeze image followed from the nav-bar.. the nav-bar winds up behind the img. I tried this sometimes using a separate div for every part. Finally used to do it just one after another (without css.. just simply html). but i end up getting a gap bw the image and nav icon….

ONLY TWO. The same difference appears wen i try and put a bill under every gallery photo…

Feel i missing your code here The reason why dint my div space in CSS work

Any help is going to be appreciated….

<! DOCTYPE html code PUBLIC " -//W3C//DTD XHTML ONE. 0 Strict//EN"
" http: //www. w3. org/TR/xhtml1/DTD/xhtml1-strict. dtd" >
< html code 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=" " />
< hyperlink href = " html/css/main. css" rel = " stylesheet" type=" text/css" />

< title> artist< /title>

< /head>
< body>
< div course = " site-wrapper" >
< div course = " header-wrapper" >
< div course = " 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 course = " nav-bar" >
< ul>
< li > < the href=" #" > Home< /a> < /li>
< li> < the href=" #" > Galleries< /a> < /li>
< li> < the href=" #" > About< /a> < /li>
< li> < the href=" #" > Blog< /a> < /li>
< li> < the 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" > Children & 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" >
< the href=" #" > Home< /a> & nbsp; & nbsp; < the href=" # " > Gallery< /a> & nbsp; & nbsp; < the href=" # " > Artist< /a> & nbsp; & nbsp; < the href=" #" > Blog< /a> & nbsp; & nbsp; < the 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; Designed by abcd efgh< /p>
< /div>

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

/* CSS Document */

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

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

*/
entire body
font: 9pt/17pt arial;
border: 0px;
extra padding: 0px;
history: #f0f0f0;
contour: none;

. site-wrapper

width: 965px;
min-height: 1100px;
margin-left: automobile;
margin-right: automobile;
history: #ffffff;

. clear
clear: both;

. header-wrapper

width: 965px;
levels: 125px;
history: #ffffff;

. header-title

drift: left;

padding-left: 20px;

. nav-bar

screen: block;
width: 965px;
levels: 25px;
margin-left: automobile;
margin-right: automobile;

. nav-bar ul

list-style-type: nothing;
border: 0;
extra padding: 0;
flood: hidden;

. nav-bar li

drift: left;

. nav-bar the: link,. nav-bar the: visited

screen: block;
width: 193px;
levels: 25px;
font-weight: regular;
font-familyristina;
colouring: #b77461;
background-color: #4d3e2f;
text-align: middle;
font-size: 22px;
extra padding: 0px;
text-decoration: nothing;

. nav-bar the: hover,. nav-bar the: active

colouring: #ffffff;
background-color: #b77461;

. gallery_content

drift: left;
padding-top: 25px;
padding-left: 23px;
padding-right: 23px;
history: #ffffff;

. comm_content

drift: left;
padding-top: 75px;
padding-left: 15px;
history: #ffffff;

. gallery_title

text-align: middle;
font-familyristina;
levels: 25px;
font-size: 20px;
colouring: #b77461;
history: #4d3e2f;
width: 275px;

. footer-wrapper

drift: right;
screen: inline;
colouring: #c0c0c0;
font-size: 12px;
padding-right: 15px;

. footer-wrapper a

colouring: #c0c0c0;
font-size: 13px;
list-style-type: nothing;
text-decoration: nothing;

Wouldn’t your PS layout (sliced) be the background images of your respective page

Too bad you simply can’t upload everything on the net and show us what you will have (a link towards your URL).
We can not duplicate your material on our computers. How do we find out what it looks just like

I havent uploaded the positioning yet.

I am going to upload it in the near future… and then often be back..

Thanks to the reply..

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *