Photo Gallery & CSS

Hi Iam trying to creat a Photo Gallery with title and , description. I amusing css. I want it to be simple as posible. I am also looking to catgorize the photos acording to events posible mutible pages.
HTML
 
<html>
<title>
 
</title>
 
<head>
<link rel="stylesheet" type="text/css" href="photo.css">
</head>
 
<body>
<div id="sidebar" style="position: absolute; width: 100px; height: 126px; z-index: 1; top: 15px; left: 10px;">
 
 
<ul>
<li>Home</li>
</ul>
</div>
 
<div id="container" style="position: absolute; width: 378px; height: 320px; top: 13px; left: 134px">
	<div id="content" >
	
	
	
	
	</div>
</div>
 
 
 
 
 
 
 
 
 
</body>
 
</html>
 
 
 
CSS:
 
@import {styles\style1.css}
 
 
 
Body{
	background-color: #9966FF;
}
 
 
#container{
	margin: 0px;
	padding: 0px;
	position: relative;
}
#content{
	border-style: groove;
	border-color: #CC3399;
	height: 318px;
}
 
 
#side_bar{
	text-decoration: none;
	list-style-type: none;
 
}
 
 
 
 
/*this weekend's navigation decoration*/
#navigation{
	text-decoration: none;
	list-style-type: none;
	display: block;
	float: left;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 117px;
	width: 95px;
}
 
#navigation li{
	text-decoration: none;
	list-style-type: none;
	font-family: David;
	font-size: small;
	overflow: hidden;
	position: absolute;
	text-align: left;
	float:left;
}
 
#navigation li:a{
	background-color: #FF00FF;
}
 
/*Side bar formating*/
 
#sidebar {
	float: left;
	width: 150px;
	background-color: #d3d3d3;
	position: relative;
	clear: both;
	margin-left: 10px;
	display: inline;
	top: 7px;
	left: 3px;
	z-index: 6;
}
 
#sidebar ul {
	list-style-type: none;
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
}
#sidebar li {
	font-size: 0.9em;
	display: block;
	margin: 0;
	padding: 0;
	border: 1px solid #d3d3d3;
}
#sidebar a {
	font-weight: bold;
	text-decoration: none;
	color: #118;
	display: block;
	padding: 5px;
	border-bottom: 1px solid #f2f2f2;
}
#sidebar a:hover {
	font-weight: bold;
	text-decoration: none;
	color: #118;
	border-bottom: 1px solid #f2f2f2;
	background-color: #f2f2f2;
}
 
 
 
 
/*Side bar formating*/

Open in new window

LVL 1
jcw20Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MrRioCommented:
I recommend against using absolute positioning in your CSS for general layout. If you can produce an image of how you would like it to look, that would make it easier to figure out the best way of structuring your document and CSS.
0
jcw20Author Commented:
0
jcw20Author Commented:
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

jcw20Author Commented:
that is the address of what i have so far
0
jcw20Author Commented:

<html>
<title>
 
</title>
 
<head>
<link rel="stylesheet" type="text/css" href="photo.css">
</head>
 
<body>
<div id="sidebar" >
 
 
<ul>
<li>Home</li>
</ul>
</div>
 
<div id="container" >
	<div id="content" >
	
	<div id="pictures">
	<ul>
	
	<li style="width: 98px; height: 90px">
	<img alt="" src="photos/Images/CA23YVE1.jpg" width="100" height="148"></li>
	
	
	
	</ul>
	
	
	
	
	</div>
	
	
</div>
 
 
 
 
 
 
 
 
 
</body>
 
</html>
#pictures li{
text-decoration: none;
	list-style-type: none;

Open in new window

0
jcw20Author Commented:
I am trying to make an picture gallery with place holders and description. witch can be used to place different photos and different spacing.
.left_holder{
	
}
 
 
.right_holder{
	
}

Open in new window

0
jcw20Author Commented:
i  want a top drop down menue for navigation of y website but a side menue on the left  for navigation of the diferent events and th photos of those evensts
0
jcw20Author Commented:
Hi have a new pag setup a better idea of what i wnt

http://www.jdcamp.org/photo_gallery/photos.htm
Css:
body{
	background-color: #CC99FF;
}
/* Page Setup */
#ontainer{
	width: 556px;
	height: 338px;
 
}
 
 
#content{
}
#page_content{
	border: thin outset #660066;
	font-family: "Courier New", Courier, monospace;
	font-size: medium;
	color: #FFFF99;
	position: absolute;
	width: 556px;
	height: 338px;
	z-index: 3;
	top: 8px;
	left: 105px;
	float: left;
}
 
/* picture frames */
#right_frame{
	border: thin groove #660033;
}
#left_frame{
	border: thin dotted #3333FF;
}
 
/* picture frames */
 
 
 
 
/* Sidebar */
 
#sidedebar{
	font-size: x-small;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0px;
	margin: 0px;
	border: medium ridge #000000;
}
#sidebar ul{
	list-style-type: none;
	display: block;
	font-size: x-small;
	float: left;
}
#sidebar li{
	padding: 0px;
	margin: 0px;
	border: thin solid #CC00FF;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	display: block;
	float: left;
	overflow: hidden;
}
 
#sidebar li:a{
	
}
 
sidebar li a:hover
 
/* Endside bar */
 
HTml:
<html>
 
<head>
 
 
 
<link rel="stylesheet" type="text/css" href="photos.css"/>
 
 
 
</head>
<title></title>
<div id="container" style="position: absolute; width: 766px; height: 358px; z-index: 2; top: 98px; left: 179px">
 
 
 
 
 
 
		<div id="top_nav" style="position: absolute; width: 644px; height: 27px; z-index: 5; top: -41px; left: 1px; border-style: solid; border-width: 1px; padding: 1px 4px; background-image: url(''); background-repeat: repeat; background-attachment: scroll; background-position: 0px 0px">
		
		Home
		
		</div>
 
 
 
 
 
 
	<div id="sidebar" style="position: absolute; width: 100px; height: 141px; z-index: 2; top: -13px; left: -151px">
	
	<ul>
	<li>Home</li>
	
	</ul>	
	
	</div>
	<div id="content" style="position: absolute; width: 761px; height: 352px; z-index: 4; top: 6px; left: 5px; border: 1px solid #FF9900; padding: 1px 4px; background-image: url(''); background-repeat: repeat; background-attachment: scroll; background-position: 0px 0px">
		
		<div id="page_content" >
		<div id="left_frame" style="position: absolute; width: 100px; height: 100px; z-index: 1">
		</div>
		<div id="right_frame" style="position: absolute; width: 100px; height: 93px; z-index: 1; top: 3px; left: 134px">
		</div>
		</div>
		
	</div>
</div>
</html>

Open in new window

0
jcw20Author Commented:
I want to control the size and spazinf of th photos. and horizontal ine to separate  the rows no tables
0
kevp75Commented:
the best way to do this would be to create a container div, then wrap your images inside other div's, and give them a set width with a float:left;
0
jcw20Author Commented:
How is this .  
<html>
<title></title>
<head>
 
 
 
<link rel="stylesheet" type="text/css" href="photos.css"/>
 
 
 
</head>
 
<div id="container" style="position: absolute; width: 766px; height: 358px; z-index: 2; top: 98px; left: 179px">
 
 
 
 
 
 
		<div id="top_nav" >
		<ul>
		<li><a href="../Founders/2.3.JPG">Home</a></li>
		<li><a href="../contact/contact.htm">Contact</a></li>
		</ul>
 
		</div>
 
 
 
 
 
	<div id="sidebar" style="position: absolute; width: 140px; height: 141px; z-index: 2; top: -13px; left: -156px">
	
	<ul>
	<li><a href="../default.htm">Home</a></li>
	<li><a href="../Founders/foundr's.htm">Founders</a></li>
	</ul>	
	
	</div>
	<div id="content" style=">
		
		<div id="page_content" >
		<div id="left_frame" style="position: absolute; width: 100px; height: 100px; z-index: 1">
		
		
		<img alt="" src="CA23YVE1_small.jpg" width="99" height="140">
		Jacob		
		
		
		</div>
		<div id="right_frame" style="position: absolute; width: 100px; height: 93px; z-index: 1; top: 3px; left: 134px">
		Picture Holder</div>
		</div>
		
	</div>
</div>
</html>

Open in new window

0
Michel PlungjanIT ExpertCommented:
Have a look at this one. It is very very nice

http://www.cssplay.co.uk/menu/slide_show.html
0
kevp75Commented:
that's not what I meant...

try something along these lines
.galContainer {
width:100%;
clear:both;
}
.galImage {
width:30%;
float:left;
}
 
<div class="galContainer">
<div class="galImage"><img src="/theimage.1jpg" /></div>
<div class="galImage"><img src="/theimage2.jpg" /></div>
<div class="galImage"><img src="/theimage3.jpg" /></div>
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jcw20Author Commented:
Iam new at this self teaching it. What is th differnce in absolut and relative.  Iwant to modify this,
Curent CSS:
 
body {
	background-color: #CC99FF;
	background-image: url('b52a.jpg');
}
/* Page Setup */
#ontainer {
	width: 556px;
	height: 338px;
}
#content {
	position: absolute;
	width: 761px;
	height: 352px;
	z-index: 4;
	top: 6px;
	left: 5px;
	border: 1px solid #FF9900;
	padding: 1px 4px;
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0px 0px
	} 
	#page_content{ border: thin outset #660066;
	font-family: "Courier New", Courier, monospace;
	font-size: medium;
	color: #CC99FF;
	position: absolute;
	width: 556px;
	height: 338px;
	z-index: 3;
	top: 8px;
	left: 105px;
	float: left;
	overflow: hidden;
}
 
/* picture frames */
#left_frame img{
	border: 10px groove #660066;
	background-color: #CC6699;
}
.frame_text p{
	font-size: medium;
	font-family: BatangChe;
	position: relative;
	display: block;
	padding: 0px;
	margin: 0px;
	text-align: center;
	list-style-type: none;
	text-decoration: blink;
	overflow: hidden;
	clear: both;
	color: #CC0066;
}
 
 
#right_frame img{
	border: medium outset #CC00FF;
	clear: both;
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
}
/* picture frames */
 
 
/* Top nav */
 
#top_nav{
	text-decoration: none;
	position: absolute;
	width: 644px;
	height: 6px;
	z-index: 5;
	top: -64px;
	left: 6px;
	border-style: solid;
	border-width: 1px;
	padding: 0;
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
}
#top_nav li{
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	display: block;
	overflow: hidden;
	float: left;
}
#top_nav a:hover{
	text-decoration: none;
}
 
#top_nav a:active {
        background: #EEF;
        color: #300;
      }
 
#top_nav a{
display: block;
        padding: 0 10px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-decoration: none;
        font-weight: bold;
        border-left: 1px solid #F00;
 
}
  #top_nav a:focus, #top_nav a:hover {
        background: #300;
        color: #EEF;
      }
  
  
 
 
#top_nav ul{
	display: block;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	list-style-type: none;
}
/* End Top nav */
 
 
 
 
 
 
 
 
/* Sidebar */
 
#sidedebar{
	font-weight: bold;
	text-decoration: none;
	color: #118;
	display: block;
	padding: 5px;
	border-bottom: 1px solid #f2f2f2;
}
#sidebar ul{
	list-style-type: none;
	display: block;
	font-size: x-small;
	float: left;
	text-decoration: none;
}
#sidebar li{
	padding: 0px;
	margin: 0px;
	border: thin solid #CC00FF;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	display: block;
	float: left;
	overflow: hidden;
	text-decoration: none;
}
#sidebar li a{
	font-weight: bold;
	text-decoration: none;
	color: #118;
	display: block;
	padding: 5px;
	border-bottom: 1px solid #f2f2f2;
}
sidebar a:hover{
	background-color: #009933;
	text-decoration: none;
	color: #118;
	border-bottom: 1px solid #f2f2f2;
	
	
	
}
}
 
 
Curent HTML:
 
<html>
<title></title>
<head>
 
 
 
<link rel="stylesheet" type="text/css" href="photos.css"/>
 
 
 
</head>
 
<div id="container" style="position: absolute; width: 766px; height: 358px; z-index: 2; top: 98px; left: 179px">
 
 
 
 
 
 
		<div id="top_nav" >
		<ul>
		<li><a href="../Founders/2.3.JPG">Home</a></li>
		<li><a href="../contact/contact.htm">Contact</a></li>
		</ul>
 
		</div>
 
 
 
 
 
	<div id="sidebar" style="position: absolute; width: 140px; height: 141px; z-index: 2; top: -13px; left: -156px">
	
	<ul>
	<li><a href="../default.htm">Home</a></li>
	<li><a href="../Founders/foundr's.htm">Founders</a></li>
	</ul>	
	
	</div>
	<div id="content" style=">
		
		<div id="page_content" >
		<div id="left_frame" style="position: absolute; width: 100px; height: 100px; z-index: 1">
		
		
		<img alt="" src="CA23YVE1_small.jpg" width="80" height="123">
		Jacob		
		
		
		</div>
		<div id="right_frame" style="position: absolute; width: 100px; height: 93px; z-index: 1; top: 3px; left: 134px">
		<img alt="" src="CAENWXYZ_small.jpg" width="88" height="133"></div>
		</div>
		
	</div>
</div>
</html>

Open in new window

0
jcw20Author Commented:
New HTML
http://www.jdcamp.org/photo_gallery/photos.htm
Here is a ling to the page i am working on  
<html>
 
<title></title>
 
<head>
<link rel="stylesheet" type="text/css" href="photos.css" />
</head>
 
<div id="container" >
	<div id="top_nav">
		<ul>
			<li><a href="../Founders/2.3.JPG">Home</a></li>
			<li><a href="../contact/contact.htm">Contact</a></li>
		</ul>
	</div>
	<div id="sidebar" >
		<ul>
			<li><a href="../default.htm">Home</a></li>
			<li><a href="../Founders/foundr's.htm">Founders</a></li>
		</ul>
	</div>
	<div id="content" 
	<div id="page_content">
	
	
	<div class="galContainer">
<div class="galImage">
	<img src="photos/Images/CAENWXYZ.jpg" width="118" height="182" /><p>k</p>
</div>
<div class="galImage">
	<img src="photos/Images/CA23YVE1.jpg" width="100" height="148" /></div>
<div class="galImage">
	<img src="photos/Images/CALW4VPD.jpg" width="100" height="154" /></div>
</div>
 
	
	
	
			</div>
</div>
 
</html>

Open in new window

0
jcw20Author Commented:
I have somthing clse to what I want Iwant to seperate the rows  with hr line grafic
0
jcw20Author Commented:
should  i use an in line frame i will hav different events and diffrent photos for those events.
What should  I do about that .
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.