Results 1 to 6 of 6
  1. #1
    dziner
    Guest
    Question Image placement with CSS
    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.

  2. #2
    Image placement with CSS
    muso's Avatar
    Member Since
    Jan 15, 2003
    Location
    Whangarei, New Zealand
    Posts
    2
    Specs:
    Pwnt
    Could you show us an example page/image and your code?
    I'm in your forums, writing sentences in a grammatically acceptable manner.

  3. #3
    dziner
    Guest
    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;
    	}

  4. #4
    Image placement with CSS
    muso's Avatar
    Member Since
    Jan 15, 2003
    Location
    Whangarei, New Zealand
    Posts
    2
    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.
    I'm in your forums, writing sentences in a grammatically acceptable manner.

  5. #5
    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.

  6. #6
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Automating Image placement Indy
    By wicksie in forum OS X - Apps and Games
    Replies: 1
    Last Post: 09-03-2010, 11:46 AM
  2. upon opening... screen placement?
    By chaM in forum Switcher Hangout
    Replies: 4
    Last Post: 12-02-2008, 08:08 AM
  3. Trying to do CSS rollover button image swapping, but failing....
    By DarkKnight369 in forum Web Design and Hosting
    Replies: 1
    Last Post: 06-20-2008, 12:21 PM
  4. Leopard Mail placement
    By ryom in forum OS X - Apps and Games
    Replies: 1
    Last Post: 06-06-2008, 10:00 AM
  5. On the difficulty of text placement
    By MacHeadCase in forum Images, Graphic Design, and Digital Photography
    Replies: 8
    Last Post: 04-29-2007, 10:13 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •