picture arrangement HTML and CSS

firestrike · 29 Jan 2011 at 14:47

so im trying to develop my portfolio website but having never used html or anything else I am struggeling to say the least. My friend has been helping me but he is not around at the moment, so I am turning to the ever reliable ocuk

so what i want to do is arange a serise of images in columns to act as links to my various projects but i have no idea how to an image under anouther using css, or wether im even using the right method to do it.

this is what I am aming for (excuse the quality)

and here is the page

[url]http://www.christopherjdancer.com/portfolio.php

can anyone give me some advice or point me towards a guide for best practice as I am stuck, thanks.

lemonade · 29 Jan 2011 at 15:52

Very simple, you just have to fiddle with the layout in css.

Here you go, I think this is what you want, just replace the coding in your css and html file:

(feel free to change the id names to something more semantic and make sure you change image links in the html doc)

CSS:

Add these in your CSS file in the section heading "Main Portfolio Page":

Code:

#one
{
	position: relative;
	float: left;
	margin-right: 18px;
	padding: 0px;
	Width: 180px;
	Height:112px;
}
	
#two
{
	position: relative;
	float: left;
	margin-right: 18px;
	Width: 180px;
	Height:112px;
}

#three
{
	position: relative;
	float: left;
	margin-right: 18px;
	Width: 180px;
	Height:112px;
}

#four
{
	position: relative;
	float: left;
	margin-right: 18px;
	Width: 180px;
	Height:112px;
}

#five
{
	position: relative;
	float: left;
	margin-right: 18px;
	margin-top: 18px;
	Width: 180px;
	Height:112px;
}

#six
{
	position: relative;
	float: left;
	margin-right: 18px;
	margin-top: 18px;
	Width: 180px;
	Height:112px;
}

#seven
{
	position: relative;
	float: left;
	margin-right: 18px;
	margin-top: 18px;
	Width: 180px;
	Height:112px;
}

#eight
{
	position: relative;
	float: left;
	margin-right: 18px;
	margin-top: 18px;
	Width: 180px;
	Height:112px;
}

HTML:

Replace this in your portfolio.php page in between where it says "menu ends" and "put content here"

Code:

	<div id="content"> 
				<div id="portfolio_text"> 
					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
					<p/> 
				</div> 
				<div id="one"> 
					<a href="http://www.christopherjdancer.com/portfolio_architecture_1.php"><img src="pic.png" alt="Architecture_1" border="0"></a> 
				</div> 
				<div id="two"> 
					<a href="http://www.christopherjdancer.com"><img src="pic.png" alt="Portfolio_2" border="0"></a> 
				</div> 
				<div id="three"> 
					<a href="http://www.christopherjdancer.com"><img src="pic.png" alt="Portfolio_3" border="0"></a> 
				</div> 
				<div id="four"> 
					<a href="http://www.christopherjdancer.com"><img src="pic.png" alt="Portfolio_4" border="0"></a> 
				</div> 
				<div id="five"> 
					<a href="http://www.christopherjdancer.com"><img src="pic.png" alt="Portfolio_4" border="0"></a> 
				</div> 
				<div id="six"> 
					<a href="http://www.christopherjdancer.com"><img src="pic.png" alt="Portfolio_4" border="0"></a> 
				</div> 
				<div id="seven"> 
					<a href="http://www.christopherjdancer.com"><img src="pic.png" alt="Portfolio_4" border="0"></a> 
				</div> 
				<div id="eight"> 
					<a href="http://www.christopherjdancer.com"><img src="pic.png" alt="Portfolio_4" border="0"></a> 
				</div> 
			</div>

Randomface74 · 29 Jan 2011 at 15:58

Code:

.photos img { display:block; padding:3px; border:1px solid #CCC; margin:5px; float:left; }

<div class="photos">
    <img src="1.jpg" /> 
    <img src="2.jpg" />
    <img src="3.jpg" />
</div>

firestrike · 29 Jan 2011 at 16:13

ahh great thanks guys ill give that ago a bit later