New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

 
Start a Discussion
 

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
Web Design and Hosting Creating sites, scripting, and hosting discussions.

Image placement with CSS


Post Reply New Thread Subscribe

 
Thread Tools
dziner
Guest
 
Posts: n/a

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.
QUOTE Thanks
muso

 
muso's Avatar
 
Member Since: Jan 15, 2003
Location: Whangarei, New Zealand
Posts: 2
muso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond repute
Mac Specs: Pwnt

muso is offline
Could you show us an example page/image and your code?

I'm in your forums, writing sentences in a grammatically acceptable manner.
QUOTE Thanks
dziner
Guest
 
Posts: n/a

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



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;
	}
QUOTE Thanks
muso

 
muso's Avatar
 
Member Since: Jan 15, 2003
Location: Whangarei, New Zealand
Posts: 2
muso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond reputemuso has a reputation beyond repute
Mac Specs: Pwnt

muso is offline
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.

I'm in your forums, writing sentences in a grammatically acceptable manner.
QUOTE Thanks
RobDreugan
Guest
 
Posts: n/a

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.
QUOTE Thanks
dziner
Guest
 
Posts: n/a

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!
QUOTE Thanks

Post Reply New Thread Subscribe


« You know you want to read this | What editors do you use? »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread
Thread Starter
Forum
Replies
Last Post
CSS and Mac slider Web Design and Hosting 7 04-23-2004 05:13 PM
CSS strangeness in Safari only!? stevenjohn Web Design and Hosting 1 03-29-2004 08:08 AM
URGENT: Need image browser recommendation for high school lab?!?!? lokerd Running Windows (or anything else) on your Mac 14 12-28-2003 02:03 PM

All times are GMT -4. The time now is 01:24 PM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
X

Welcome to Mac-Forums.com

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!


(4 digit year)

Already a member?