Forums

henry

Hello Everyone,

I am new to css and i am having positioning issues i was wondering if some one can give me a hand i have submitted the jpg of my site im tryng to code and having some issues trying to code the nav above the transparency bg... any ideas

here is the html

<!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>
<link rel=\"stylesheet\" href=\"styles.css\" type=\"text/css\"/>
<meta content=\"text/html; charset=utf-8\" http-equiv=\"Content-Type\" />
<title>Welcome to Artistic Ink Apparel.</title>
<link rel=\"shortcut icon\" href=\"images/favicon.gif\" />

</head>

<body>
	<div id=\"page-wrap\">
		<div id=\"header\">
				<a href=\"#\"><img src=\"images/ai_logo.png\" alt=\"logo\"/></a>
				<h1><a href=\"#\"><span>A</span>rtistic<span>I</span>nk</a></h1>
		</div>
		<div id=\"nav\">
				
				<ul>
						<li><a href=\"#\">tees</a></li>
						<li><a href=\"#\">cart</a></li>
						<li><a href=\"#\">contact</a></li>
						<li><a href=\"#\">about</a></li>
				</ul><!--end nav-->
		</div>		
		
		<div id=\"main\">
			<ul id=\"shirts\"><!--Shirts Starts-->
				<li>
					<a href=\"#\">
						<img src=\"images/shirts/bienna.png\" alt=\"Bienna\"/>
						<span><img src=\"images/hover_enlarage/hover-bienna.jpg\" alt=\"hover bienna\"/></span>
					</a>
					<a href=\"#\">
						<img src=\"images/shirts/creativevandal.png\" alt=\"Vandal\"/>
						<span><img src=\"images/hover_enlarage/hover-vandal.jpg\" alt=\"hover vandal\"/></span>
					</a>
					<a href=\"#\">
						<img src=\"images/shirts/creativelens.png\" alt=\"Lens\"/>
						<span><img src=\"images/hover_enlarage/hover-lens.jpg\" alt=\"hover lens\"/></span>
					</a>
					<a href=\"#\">
						<img src=\"images/shirts/boomboxxx.png\" alt=\"BoomBoxxx\"/>
						<span><img src=\"images/hover_enlarage/hover-boomboxxx.jpg\" alt=\"hoverboomboxx\"/></span>
					</a><br/><!--BREAK EVERY 4 T SHIRTS!!!! FOR LAYOUT PURPOSE-->
					<a href=\"#\">
						<img src=\"images/shirts/cctv.png\" alt=\"CCTV\"/>
						<span><img src=\"images/hover_enlarage/hover-cctv.jpg\" alt=\"hover cctv\"/></span>
					</a>

				</li>
			</ul>
		</div><!--End of Shirts-->
		<div id=\"footer\">
			<ul>
				<li><a href=\"#\">tees</a></li>
				<li><a href=\"#\">cart</a></li>
				<li><a href=\"#\">contact</a></li>
				<li><a href=\"#\">about</a></li>
			</ul>
		</div><!--end footer-->
	</div>
</body>

</html>

here is the css:

/*ArtisticInkApparel.com*/
body{
font-family:Arial, Helvetica, sans-serif;
color:;
background-image:url(images/main-bg/bg.jpg);
background-repeat:repeat;
	
}
#page-wrap{
width:700px;
height:auto;
margin:0 auto;

}

/*Begin Header*/	
#header{
background-image:url('images/main-bg/header-bg.png');
background-position:0 20px;
background-repeat:no-repeat;
padding-top:20px;
}	
	#header span{color:#f7941d}
	#header h1 a{color:white;}
	#header img{float:left;
				clear:left;}
/*End Header*/	
		
/*Begin Nav*/	
#nav li, #nav a{
display:inline;
color:#f7941d;
font-size:16px;
padding:3px;
}
	#nav a:hover{color:white;}
/*End Nav*/	

/*Begin Main Structure*/	
#main{
background-image:url('images/main-bg/main-bg.png');
background-repeat:no-repeat;
background-position:-20px;
height:auto;
width:690px;
background-repeat:repeat-y;}
	#main a{
	border-style:none;
	text-decoration:none;
	color:white;	
		}
	#main a:hover{
	text-decoration:underline;
	position:relative;
	color:lime;
	
	}
	#main li{
		list-style:none;
		display:inline;
		position:relative;
		
		}
	#main img{
	display:inline;
	width:147px; height:147px;}
/*End Main Structure*/	
	
	
/*Shirt Gallery!!!*/
ul#shirts, ul#shirts li{
		list-style:none;
		}
ul#shirts a span{
	display:none;
	position:relative;
	}
ul#shirts a:hover span{
	position:absolute;
	display:block;
	bottom:15px;
	}		}
/*End Shirt Gallery*/

/*Begin Footer*/	

#footer{
background-image:url('images/main-bg/footer-bg.png');
background-repeat:no-repeat;
}
#footer li, #footer a{
width:10px;
padding:5px;
display:inline;
color:#f7941d;
font-size:12px;
margin-left:30px;

#footer li a:hover{color:white;}
/*End Footer*/	


}
/*Misc*/
a{
text-decoration:none;
}
img{
border-style:none;
}

Ramesh

you need to check this out u have some small mistakes in your css files, i have corrected that, can u give me a clear picture of your issues

/* CSS Document */

/*ArtisticInkApparel.com*/
body{
font-family:Arial, Helvetica, sans-serif;
color:;
background-image:url(images/main-bg/bg.jpg);
background-repeat:repeat;

}
#page-wrap{
width:700px;
height:auto;
margin:0 auto;

}

/*Begin Header*/
#header{
background-image:url('images/main-bg/header-bg.png');
background-position:0 20px;
background-repeat:no-repeat;
padding-top:20px;
}
#header span{color:#f7941d;}
#header h1 a{color:white;}
#header img{float:left;
clear:left;}
/*End Header*/

/*Begin Nav*/
#nav li, #nav a{
display:inline;
color:#f7941d;
font-size:16px;
padding:3px;
}
#nav a:hover{color:white;}
/*End Nav*/

/*Begin Main Structure*/
#main{
background-image:url('images/main-bg/main-bg.png');
background-repeat:no-repeat;
background-position:-20px;
height:auto;
width:690px;
background-repeat:repeat-y;}
#main a{
border-style:none;
text-decoration:none;
color:white;
}
#main a:hover{
text-decoration:underline;
position:relative;
color:lime;

}
#main li{
list-style:none;
display:inline;
position:relative;

}
#main img{
display:inline;
width:147px; height:147px;}
/*End Main Structure*/

/*Shirt Gallery!!!*/
ul#shirts, ul#shirts li{
list-style:none;
}
ul#shirts a span{
display:none;
position:relative;
}
ul#shirts a:hover span{
position:absolute;
display:block;
bottom:15px;
}
/*End Shirt Gallery*/

/*Begin Footer*/

#footer{
background-image:url('images/main-bg/footer-bg.png');
background-repeat:no-repeat;
}
#footer li, #footer a{
width:10px;
padding:5px;
display:inline;
color:#f7941d;
font-size:12px;
margin-left:30px;
}

#footer li a:hover {
color:white;
/*End Footer*/
}

/*Misc*/
a{
text-decoration:none;
}
img{
border-style:none;
}

henry

here is the issue i have thank you for your help im wondering how i can have the Footer transparency connect to the the "main" transparency background? because i have the main bg to extend as more content gets added

Ramesh

Check out the attached files

henry

hey thanks for the reply i dont understand what you want me to do i took a look at them but no css in it?

ikthius

"henry" said:
hey thanks for the reply i dont understand what you want me to do i took a look at them but no css in it?

if the main content background expands then add a div footer in that contents div.... however, I would not have done it this way.
I would have had the background image repeat in the body, then have a wrapper, the header & close it, the contents (which have the main site) & close it then the footer & close it, then close wrapper, the close body

some people might not do it this way

Ramesh

Apply your css for the dasktop.rar that is enough

treehouse : what would you like to learn today?

Forums

Blank Discussion Topic