We help IT Professionals succeed at work.

Photo Gallery & CSS

jcw20
jcw20 asked
on
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

Comment
Watch Question

Commented:
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.

Author

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

Author

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

Author

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

Author

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

Author

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

Author

Commented:
I want to control the size and spazinf of th photos. and horizontal ine to separate  the rows no tables

Commented:
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;

Author

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

Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:
Have a look at this one. It is very very nice

http://www.cssplay.co.uk/menu/slide_show.html
Commented:
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

Author

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

Author

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

Author

Commented:
I have somthing clse to what I want Iwant to seperate the rows  with hr line grafic

Author

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 .

Explore More ContentExplore courses, solutions, and other research materials related to this topic.