Image placement with CSS

D

dziner

Guest
This may be kinda difficult to explain. I'm in the process of re-designing our company website using web standards and CSS. Here's where my problem is. I have a div as my left navigation. Inside of this div I have h4 tags for headings, unordered lists styled for the navigation, and when figured out properly a list of "mini sites" that use small buttons to link to these "mini sites". These buttons need to be listed in 2 columns, however many rows and neatly spaced (margin from the left, right, and between buttons).

I thought I could use a p tag and style the tag with a left and right margin with the images left or right aligned inside of this tag. That didn't work. Wondering if anyone else has any ideas.
 
Joined
Jan 15, 2003
Messages
4
Reaction score
16
Points
3
Location
Whangarei, New Zealand
Your Mac's Specs
Pwnt
Could you show us an example page/image and your code?
 
OP
D

dziner

Guest
Here's an image of what I'm trying to achieve.

DesignSample.gif


Here's a sample of some of the code. Here I'm using a paragraph tag to try to handle the rows/columns. I thought I would be able to use the <p> tag kinda like a table row. Unfortunately it doesn't work.

Code:
<div id="left-nav">
<ul>
<li>links go here</li>
</ul>
<h4>mini-sites</h4>
<p class="minisites"><img src="/images/mini_acer.gif" width="76" height="30" /><img src="/images/mini_antec.gif" width="76" height="30" /></p>
</div>

And of course the CSS to go along with it.

Code:
	#left-nav {
		float: left;
		width: 200px;
		margin: 0;
		background-color: #E5E5E5;
		border: 1px dotted #333;
	}

	#left-nav h4{
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-left:10px;
		margin-bottom:8px;
		margin-top: 5px;
	}

	#left-nav ul{
	margin-left:0;
	padding-left:0;
	margin-top:0;
	list-style-type: none;
	}  

	#left-nav li{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		margin-left:0;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left:0;
		margin-top:5px;
		}

	.minisites {
		margin-left: 10px;
		margin-right: 10px;
	}
 
Joined
Jan 15, 2003
Messages
4
Reaction score
16
Points
3
Location
Whangarei, New Zealand
Your Mac's Specs
Pwnt
I say the easiest solution is a single table. There's nothing wrong with using tables for tabular layout of data - its when people nest them and use them for the entire page layout that they become problematic.

I guess if you really wanted to use css, you could combine each row of two images into one, with the correct 'spacing' between the two and no spacing above/below or on the far edges. Then in your css file, wrap each image in a div which is styled with the padding for top and bottom 5px and the sides 10px. Also you'd need "display: block;" if it was a div.
 
OP
R

RobDreugan

Guest
you can use the display attribute.

So for instance. You could have your div column. inside of that you could have 2 divs.

You use the main div, for the placement of the entire section, but use the ones inside of the main one to display the information in a way you like.

So, you'd do something like this

div#1 {display:block;}

and then if you put say 10 images that are all the same size, like the example you showed, it'll block display them, i.e. just stack them right on top of each other. You obviously know you can set the width etc...but that should put you in the right direction.
 
OP
D

dziner

Guest
I figured out yet another way to make this work. I placed all the images side by side in the div and styled the img with a margin left, righ, and bottom. This equally spaced them out in IE and Firefox. Thanks for all the input!
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top