[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Photo Gallery & CSS

Posted on 2008-01-24
17
Medium Priority
?
1,437 Views
Last Modified: 2008-02-07
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

0
Comment
Question by:jcw20
17 Comments
 
LVL 3

Expert Comment

by:MrRio
ID: 20739181
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
 
LVL 1

Author Comment

by:jcw20
ID: 20739492
0
 
LVL 1

Author Comment

by:jcw20
ID: 20739506
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 1

Author Comment

by:jcw20
ID: 20739514
that is the address of what i have so far
0
 
LVL 1

Author Comment

by:jcw20
ID: 20739695

<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
 
LVL 1

Author Comment

by:jcw20
ID: 20747637
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
 
LVL 1

Author Comment

by:jcw20
ID: 20765405
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
 
LVL 1

Author Comment

by:jcw20
ID: 20788403
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
 
LVL 1

Author Comment

by:jcw20
ID: 20788911
I want to control the size and spazinf of th photos. and horizontal ine to separate  the rows no tables
0
 
LVL 25

Expert Comment

by:kevp75
ID: 20791548
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
 
LVL 1

Author Comment

by:jcw20
ID: 20793237
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20795875
Have a look at this one. It is very very nice

http://www.cssplay.co.uk/menu/slide_show.html
0
 
LVL 25

Accepted Solution

by:
kevp75 earned 750 total points
ID: 20796237
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
 
LVL 1

Author Comment

by:jcw20
ID: 20798567
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
 
LVL 1

Author Comment

by:jcw20
ID: 20798872
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
 
LVL 1

Author Comment

by:jcw20
ID: 20798938
I have somthing clse to what I want Iwant to seperate the rows  with hr line grafic
0
 
LVL 1

Author Comment

by:jcw20
ID: 20799590
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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question