CSS image gallery tweaking

catkustes · 11-22-2012, 03:23 AM

hey! so i started a css image gallery.

i tried creating separate div classes for each photo so i can position them differently. when i tried it with the first one (400x400 image) all the other photos go below that photo but they all continue to align left. i want them to be closer together (all centered) and then fit together like a jigsaw puzzle. I viewed this on safari.

any tips/suggestions/tutorials you could recommend. i mean i've read a lot of them but i'm not quite certain how to put it all together. any help you can give me would be greatly appreciated, thanks!!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sincerely Curious</title>
<head>
<style type="text/css">

body {background-color:white;}
p {color:#635149;}
p{font-family:"baskerville", Times, serif;}
p {text align:center}
div.ex
{
padding:1px;
border:1px;
margin:0px;
background:#BBFFFF;
}

#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: left;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: #635149;
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
font-family: "baskerville";
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
.circles {
float: left;
height: 200px; width: 200px;
background-color: #eee;
margin: 0 50px 50px 0;

/*Make it a circle*/
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
#navigation a:hover {
color: grey;
}
div.img
{
margin: 1px;
height: auto;
width: auto;
float: left;
}
div.img img
{
display: inline;
margin: 0px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
}
#image1 { position: absolute; center: 10px; bottom: 10px; }
</style>
</head>
<header>
<header role="banner">
<br>
<br>
<br>
<div id="navigation">
<a href="default.asp">Facebook</a><a href="news.asp">Linked In</a></li><a href="contact.asp">Twitter</a><a href="about.asp">About</a>
</ul>
<br>
<br>
<br>
<div class="image1">
<a target="_blank" href="klematis_big.htm"><img src="http://farm9.staticflickr.com/8478/8180827722_ff1986f9cf.jpg" alt="Klematis" width="400" height="400"></a>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="http://farm9.staticflickr.com/8201/8180827776_f9be43dd1e_m.jpg" width="225" height="225"></a>
<div class="desc"></div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="http://farm9.staticflickr.com/8486/8180792207_9b075d1e15_m.jpg" alt="Klematis" width="175" height="175"></a>
<div class="desc"></div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="http://farm9.staticflickr.com/8344/8180827824_9d873ac95b.jpg" alt="Klematis" width="200" height="600"></a>
<div class="desc"></div>
<br>
<br>
</header>
<body>
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>
</div>
<div class="ex">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>
This should be an opening paragraph to my insatiable and unfortunately intangible love affair with curiosity.
<br>It should be sensible and not mention ninjas or my love of cute fluffy thang thangs.</br></p>

<p>
This should talk about my work. How I am a freak and actually like to work.
<br>How it’s really the only thing that matters to me because seriously, life sucks. Merp. This is just a joke, holla!</br>
</p>
<p>
In closing I should tell people that I can work limited freelance projects or give them high fives for cheap tricks.
<br>Hey, why not! It’s what the cool kids do! </br></div>
</p>
</body>

</footer>
</body>
</html>

Excavator · 11-22-2012, 07:23 AM

Hello catkustes,
You are wrapping each image in it's own div and you don't need to.
.image1 holds your first image and is not styled at all.
.img's hold your other 3 images and those divs are floated left, which is exactly what they're doing.

Lots of other problems with the basic layout of your document as well. See the links about validation in my signature line, they can help you with that.

Maybe this will give you some ideas -

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sincerely Curious</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fff;
	font: 100% "Times New Roman", Times, serif;
	color: #635149;
}
ul#navigation {
	line-height: 35px;
	width: 100%;
	margin: 0;
	padding: 10px 0;
	position: fixed;
	top: 0;
	color: #ffffff;
	-webkit-box-shadow: 0px 0px 8px 0px #000000;
	-moz-box-shadow: 0px 0px 8px 0px #000000;
	box-shadow: 0px 0px 8px 0px #000000;
	background: #635149;
	text-align: center;
	color: rgba(1, 1, 1, 0.8);
}
ul#navigation li {
	display: inline-block;
	list-style: none;
}
	ul#navigation li a {
		padding: 0 15px;
		display: block;
		font-size: 14px;
		font-family: "baskerville";
		color: #fff;
		text-decoration: none;
	}
	ul#navigation li a:hover {color: #ccc;}
#container {
	width: 840px;
	margin: 60px auto;	
	padding: 20px 20px 1000px;
	background: #fff;
	box-shadow: 0 0 20px #8493A6;
	overflow: auto;
}
#container a img {
	float: left;
	border: 2px solid #ccc;
}
	#container a img:hover {border: 2px solid #0000ff;}
p {clear: both;}
</style>
</head>
<body>
    <header> 
      <ul id="navigation">
        <li><a href="default.asp">Facebook</a></li>
        <li><a href="news.asp">Linked In</a></li>
        <li><a href="contact.asp">Twitter</a></li>
        <li><a href="about.asp">About</a></li>
      </ul> 
    </header> 
<div id="container">
        <a href="klematis_big.htm"><img src="http://farm9.staticflickr.com/8478/8180827722_ff1986f9cf.jpg" alt="Klematis" width="400" height="400"></a>
        <a href="klematis4_big.htm"><img src="http://farm9.staticflickr.com/8344/8180827824_9d873ac95b.jpg" alt="Klematis" width="200" height="600"></a>  
        <a href="klematis2_big.htm"><img src="http://farm9.staticflickr.com/8201/8180827776_f9be43dd1e_m.jpg" alt="Klematis" width="225" height="225"></a>
        <a href="klematis3_big.htm"><img src="http://farm9.staticflickr.com/8486/8180792207_9b075d1e15_m.jpg" alt="Klematis" width="175" height="175"></a>
        <p> 
            This should be an opening paragraph to my insatiable and unfortunately intangible love affair with curiosity. 
            It should be sensible and not mention ninjas or my love of cute fluffy thang thangs.
        </p>
        <p> 
            This should talk about my work. How I am a freak and actually like to work. 
            How it’s really the only thing that matters to me because seriously, life sucks. Merp. This is just a joke, holla!
        </p>
        <p> 
            In closing I should tell people that I can work limited freelance projects or give them high fives for cheap tricks. 
            Hey, why not! It’s what the cool kids do! 
        </p>
    <!--end container--></div>
</body>
</html>

Also, when posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.