CSS HElp

shashikant · **CSS HElp -** 07-09-2008, 05:51 AM

I need a help

i made a photoshop layout and sliced it and i was trying to convert it into css style when i use div code there is a image breake in it how do i solve it

i ddont want to have gap betwenn images

christyhl · **Re: CSS HElp -** 07-10-2008, 12:20 PM

If you can't find help here, maybe you can go to Yahoo Answers

EnZo · **Re: CSS HElp -** 07-11-2008, 01:44 AM

maybe you can show us ur css code? my first guess is that u need to setup 0 margins for the mentioned images.

shashikant · **Re: CSS HElp -** 07-11-2008, 05:52 AM

here is live demo

html

how can i remove the gap between the images using css please teach me

raja · **Re: CSS HElp -** 07-11-2008, 07:02 AM

post ur css code or else upload it some where so that we may help u .

shashikant · **Re: CSS HElp -** 07-12-2008, 08:19 PM

from photoshop i sliced and wanted to convert it in to html i used Div tag and used images as background but when i see in browser i see some gap between div tags how can i remove that gap

here is html 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>
<title>html</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<div id='wrap'>
<div id="header">
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="navigation">
<p class="style3">Home | Forum | Web Hosting | Web Directory | Templates</p>
</div>
<div id="content">
<p>dghdfghzfdsffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffff</p>
<p>sdfdsfd</p>
<p>dsffds</p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="style2" id="footer">Home · Forum · Webhosting · Web Directory · Tempaltes | <span class="style1">SRR Website © 2008</span></div>
</div>
</body>
</html>

here is CSS code:
@charset "utf-8";
/* CSS Document */
*{outline: 0; }

#wrap{width:801px;
margin:0 auto;
}
#header{background-image:url(images/header.gif);
height:138px;
position:relative;
width:801px:}
#navigation{background-image:url(images/navbar.gif);
background-repeat:no-repeat;
height:43px;
margin:0 auto;
font-size:95%;
line-height:35px;
text-align:center;
color:#000001;
width:801px;
font-weight:900;}
#content{background-image:url(images/content.gif);
background-repeat:repeat-y;
height:auto;
width:801px;
margin:0 auto;
padding-left:20px;
padding-right:20px;

}
#footer{background-image:url(images/footer.jpg);
background-repeat:no-repeat;
height:87px;
padding:30px;
color:#fff;
text-align:center;
width:801px;
font-stretch:ultra-expanded;
font-weight:700;

i know that u will help me

EnZo · 10:52 AM

ok, managed to fix it. The problem was with your text formatting. You shouldn't add text formats to the navigation/header/content/footer div tags. (you had those with line-height, font-size etc. in the css style IDs of these tags when you shouldn't have had them in the 1st place).

The fix consists in removing those lines and adding classes for each of the elements that use text formatting. (in this case you can notice I added the "#content p" ID at the end of the css file, to format the text in the #content div.
Furthermore I then customized the .style3 class located in the #navigation div which was causing the layout drop in FF3 (Firefox3).

What I recommend is creating the main divs, and afterwards if you want to customize the text or content located in these divs, use customized CSS classes for each of these elements, as in my example when I added the .style3 class at the beginning of the css file/code you provided, to format the navigation text without making visual changes to the whole layout as in the 1st place.

Also you should know that this was only seen in Firefox3(or lower). In IE it displayed correctly because IE parses the classes/divs/styles located in the page differently than the Gecko engine that Firefox uses.

If you have any other questions feel free to ask!

copy/paste this code or study it to see what I've modified.

HTML Code:

@charset "utf-8";

.style3 { 
    font-size:15px;
    margin: 0;
}

#wrap{
    width:801px;
    margin: 0 auto;
    }

#header{
    height:138px;
    width:801px:;
     background-color: red;
    margin: 0;
}
#navigation{
    background-repeat:no-repeat;
    height:43px;
    color:#000001;
    width:801px;
    margin: 0;
}
#content{
    background-image:url(images/content.gif);
    background-repeat:repeat-y;
    width:801px;
    margin: 0;

}
#footer{
    background-image:url(images/footer.jpg);
    background-repeat:no-repeat;
    height:87px;
    text-align:center;
    width:801px;
    }
    
#content p {
    margin: 0;
}

[lateredit]

I may have displaced some of the paths to your background images and such, but I'm sure u can add those back with ease.