Programming Help

Web Development



What's Here?

  • Members: 132,605
  • Replies: 471,697
  • Topics: 73,132
  • Snippets: 2,541
  • Tutorials: 666
  • Total Online: 909
  • Members: 59
  • Guests: 850

Who's Online?

Welcome to Dream.In.Code
Getting Help is Easy!

Join 132,605 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 909 people online right now. Registration is fast and FREE... Join Now!




Aligning img's with CSS

 
 Reply to this topicStart new topic

Aligning img's with CSS, No Tables...
Sacky
post 5 Jul, 2008 - 05:42 PM
Post #1


New D.I.C Head

*
Joined: 28 Dec, 2007
Posts: 26
My problem is very simple, basically I have 2 img's in my HTML like so:

CODE
        <img class="central" src="text.png" alt="text"/>
        <img class="righter" src="logo.png" alt="logo"/>


with the CSS:

CODE
IMG.central
{
    margin-left: auto;
    margin-right: auto;
    display: block;
}

IMG.righter
{
    margin-left: auto;
    display: block;
}


Now what I want displayed, is the text image (text.png) in the centre, and the logo image (logo.png) to the right hand side. It currently does this, however they are on separate lines. I would like them both to be on the same line, and I would like to not use tables to achieve it.
I know display: block; enters a line break before and after the image, but I have tried floating the images and display: inline; but this all results in the margin code becoming null. Any help would be appreciated.
User is offlineProfile CardPM

Go to the top of the page

Martyr2
post 5 Jul, 2008 - 07:59 PM
Post #2


Programming Theoretician

Group Icon
Joined: 18 Apr, 2007
Posts: 5,062



Thanked 175 times

Expert In: C/C++, Java, VB, VB.NET, C#, PHP, Web Development, HTML & CSS, Javascript

My Contributions
To accomplish this you can put the two images inside a div and then adjust the div margins to auto. The trick then is to float the first image left and when you do this, you must specify a width of the div.

So lets say the first image is 200px in width and the second is 160px in width.

CODE

<div id="container">
    <img class="central" src="text.png" alt="text"/>
    <img class="righter" src="logo.png" alt="logo"/>
</div>


Then the CSS...

CODE

.central
{
    float: left;
}

#container {
    width: 360px;
    margin-left: auto;
    margin-right: auto;
}


So see we have put both in a div and made it 360px (sum of our two graphics) and then set the margins to center it. In the div we floated the "central" graphic left. This will lead to both images being centered and side by side.

Hope this is what you were talking about. Enjoy!

"At DIC we be graphic centering code ninjas... even though we are a bit off center mentally" decap.gif

This post has been edited by Martyr2: 5 Jul, 2008 - 08:00 PM
User is offlineProfile CardPM

Go to the top of the page

Sacky
post 5 Jul, 2008 - 08:12 PM
Post #3


New D.I.C Head

*
Joined: 28 Dec, 2007
Posts: 26
QUOTE(Martyr2 @ 5 Jul, 2008 - 08:59 PM) *

So see we have put both in a div and made it 360px (sum of our two graphics) and then set the margins to center it. In the div we floated the "central" graphic left. This will lead to both images being centered and side by side.


Thanks for your help, but this is not exactly what I'm talking about, I'll show you some screenshots of what I want.

This is what it currently looks like:

IPB Image

Note how the text and the logo aren't on the same line.

IPB Image

That's how I want it to look. I know how to accomplish this with tables, but not with CSS.
User is offlineProfile CardPM

Go to the top of the page

Martyr2
post 5 Jul, 2008 - 08:32 PM
Post #4


Programming Theoretician

Group Icon
Joined: 18 Apr, 2007
Posts: 5,062



Thanked 175 times

Expert In: C/C++, Java, VB, VB.NET, C#, PHP, Web Development, HTML & CSS, Javascript

My Contributions
Ok, lets hit this with a similar angle...

CODE

<div id="container">
    <img class="central" src="text.png" alt="text"/>
    <img class="righter" src="logo.png" alt="logo"/>
</div>


Then the CSS...

CODE

.central
{
    float: left;
}

.righter {
    float: right;
}

#container {
    margin-left: auto;
    width: 66%;
}


What this does is takes the div and makes it 2/3 of the screens width. We then push it right using the margin-left. We then float the first graphic left and the second to the right. This will give you exactly what you are looking for.

Good luck. smile.gif
User is offlineProfile CardPM

Go to the top of the page

Sacky
post 5 Jul, 2008 - 09:26 PM
Post #5


New D.I.C Head

*
Joined: 28 Dec, 2007
Posts: 26
Thank you Martyr2 this is exactly what I was looking for, and all without tables! Genius smile.gif
User is offlineProfile CardPM

Go to the top of the page

Sacky
post 6 Jul, 2008 - 06:21 AM
Post #6


New D.I.C Head

*
Joined: 28 Dec, 2007
Posts: 26
Well it appears I now have a new problem facing me with image alignment, but this time I am trying to match it up to a horizontal menu. So far its giving me this:

IPB Image

The CSS code for which is here (please note I do not take any credit for it, it's just a menu I downloaded and fiddled with):

http://pastebin.com/m1ef32adf

The HTML code (which is fairly self explanatory):

CODE
        <img class="central" src="left.png"/>
        <img class="righter" src="right.png"/>
        <ul class="horizmenu">
            <li><a href="#"><b>Home</b></a></li>
            <li class="current"><a href="#"><b>Music</b></a></li>
        </ul>


I would really like to get rid of that vertical gap between the menu and the 2 images.

This post has been edited by Sacky: 6 Jul, 2008 - 06:23 AM
User is offlineProfile CardPM

Go to the top of the page

Fast ReplyReply to this topicStart new topic
Time is now: 11/23/08 02:28AM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month