The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
 Reply to this topicStart new topic
> Image align with text labels
xxkasperxx
post Feb 29 2012, 05:44 PM
Post #1


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
I am trying to get 5 images on the same line, with text under them saying the name... please help.. i feel not too smart asking this..

HTML:
CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" >
        
        <link href="css/reset.css" type="text/css" rel="stylesheet" >
        <link href="css/main.css" type="text/css" rel="stylesheet" >
            <!-- Browser Icon -->
        <link rel="shortcut icon" href=".\favicon.ico">        <!-- REPLASE -------------------------------------->
            <!-- End browser Icon -->
    </head>
    <body>
    
        <div id="wrapper">
        
            <div id="cont1">
                
                
                <img src="images/heli.png" alt=""><P>Safety Day</P>
                <img src="images/bunny2.png" alt=""/><P>Eggstravaganze</P>
                <img src="images/july.png" alt=""/><P>July 4th Parade</P>
                <img src="images/halloween.png" alt=""/><P>Halloween</P>
                <img src="images/christmas.png" alt=""/><P>hristmas Tree</P>
            </div>
            
            
            
            <div id="cont2">
                
            <div id="nav">
                
                <ul id="menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="History.html">History</a></li>
                    <li><a href="Membership.html">Membership</a></li>
                    <li><a href="Leadership.html">Leadership</a></li>
                    <li><a href="Projects.html">Projects</a></li>
                    <li><a href="Funds.html">Funds</a></li>
                </ul>
            </div>
                <img src="images/logo.png" alt="">
                <p>April Sound Civic Association</p>
                <p>P.O. Box 223</p>
                <p>Montgomery, TX 77356</p>
            </div>
            
            <div id="cont3">
                
                <img src="images/garden.png" alt="">
                <img src="images/park.png" alt="">
                <img src="images/enterance.png" alt="">
                <img src="images/decor.png" alt="">
            </div>
        
            <div id="footer">
                
            </div>
        </div>

    </body>

</html>


CSS:
CODE
#wrapper
{
    margin-left: auto;
    margin-right: auto;
    width: 95em;
    /*border:1px solid #000;*/
}
#nav
{
    margin-top:5%;
    margin-left:15%;
    border:1px solid #000;
    text-align:center;
    float:left;
    background:#D7D7D7;
    width:15%;
    padding:1%;
    line-height:1.2em;
}
#nav a{color:#000;}
#nav a:hover {background:#898989;width:100%;}
#cont1
{
    text-align:center;
    /*border:1px solid #2d73b9*/
     /* float: left;*/text-align:center;position:relative;float:left;
}
#cont1 span {margin-bottom:100px;}
#cont2
{
    width:100%;
    /*border:1px solid #e3007b;*/
    text-align:center;
}
#cont2 img {margin-left:-30%;}
#cont3
{
    text-align:center;
    /*border:1px solid #faf519;*/
    position:relative;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 29 2012, 08:16 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
You could put the image and the caption in the same DIV and then float the DIVs left. See http://realworldstyle.com/thumb_float.html .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post Mar 1 2012, 07:53 AM
Post #3


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
if i float the images to the left, they go all wack on me, and bring my other image to the same line and overlap..

Image: http://imageshack.us/f/856/captureedi.png/
CSS:
CODE
#wrapper
{
    margin-left: auto;
    margin-right: auto;
    width: 95em;
    /*border:1px solid #000;*/
}
#nav
{
    margin-top:5%;
    margin-left:15%;
    border:1px solid #000;
    text-align:center;
    float:left;
    background:#D7D7D7;
    width:15%;
    padding:1%;
    line-height:1.2em;
    
}
#nav a{color:#000;}
#nav a:hover {background:#898989;width:100%;}
#cont1
{
    text-align:center;
    /*border:1px solid #2d73b9*/
}
#cont1 span {margin-bottom:100px;}
#cont2
{
    width:100%;
    /*border:1px solid #e3007b;*/
    text-align:center;

}
#cont2 img {margin-left:-30%;}
#cont3
{
    text-align:center;
    /*border:1px solid #faf519;*/
    position:relative;
}
.images {float:left;}


This post has been edited by xxkasperxx: Mar 1 2012, 07:54 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 1 2012, 08:03 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
What is .images? The DIVs?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 1 2012, 12:28 PM
Post #5


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Can you post the url of a page that demonstrates your best try?
That way we can see all the coding (HTML, CSS, images included (even if you use fake ones as a demonstration)).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post Mar 1 2012, 09:29 PM
Post #6


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
http://testsite123112.net63.net/

and yes pandy .images are the divs
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 2 2012, 02:58 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
You've set #wrapper div to have a width of 95em, which is computed to 1520px. But the five images together add up to 1133 px.

BTW, one would preferably use images of the same size (in width and height).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post Mar 2 2012, 07:22 AM
Post #8


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
But they are centered to the middle of the wrapper.. but if I float it left it Doest center.. what would be the ideal set up for somthing like this, and yes I know.. i added random pictures for place holders. When i get the actual pictures i will resize them
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 2 2012, 09:32 AM
Post #9


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
They do center, if I set my browser window wider than the computed width, or at least till no horizontal scrolling occurs. My browser window is usually smaller than my screen size.

If you set the width of your #wrapper div to 1133px (no other floats but for the divs with class="images"), then only the five top images will show at the top, w/o the overlap. The menu, logo and address will be pushed below them. And the page will be centered in the window.

Or, if you really want to use the "em" unit, then 1133px would be 70.813em, based on the font-size of 16px of BODY (calculate yourself at http://riddle.pl/emcalc/ ).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post Mar 3 2012, 01:50 PM
Post #10


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
ONLINE:
Attached Image
The first picture is viewing it online, from
http://testsite123112.net63.net/
the second one local
LOCAL:
Attached Image

what is going on? i cant figure out how to center them locally.. then online it totally ignors my css..
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 4 2012, 05:08 AM
Post #11


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Are you sure you re-uploaded all modified files? In the online version, I still see the same thing as before (like your first image). I don't understand what you did in your local version to show up like that.

If I only change the width of the #wrapper div in your online page, with Safari's Web Inspector, everything centers, best visible by the top and bottom images correctly aligned.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 4 2012, 06:25 AM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Resized the images maybe? rolleyes.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 4 2012, 08:23 AM
Post #13


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
I didn't look that close at both screenshots, but yes, they seem resized.

But anyway, xxkasperxx already said he used some images as place holder. Changing the image sizes of course also changes their behavior on the page (do they, together, still fit the #wrapper div width?).

[typo edit]

This post has been edited by Frederiek: Mar 4 2012, 08:24 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post Mar 5 2012, 07:32 PM
Post #14


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
i cannot figure this out to save my life.. What am i doing wrong?

Attached Image


I need the top row of images centered..

http://testsite123112.net63.net

I feel so stupid not being able to figure this out.. Please give me some help
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post Mar 5 2012, 10:23 PM
Post #15


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
Solved!
HTML:
CODE
<html>
<head>
<title>test</title>
<link href="css/main.css" type="text/css" rel="stylesheet" >
<link href="css/reset.css" type="text/css" rel="stylesheet" >
</head>
<body>
<div id="wrapper">
    <div id="contt1">
            <div class="images">
                <img src="images/heli.png" alt="" width="200px"height="200px" class="centerimage">
            </div>
            <div class="images">
                <img src="images/bunny.png" alt=""width="200px"height="200px" class="centerimage">
            </div>
            <div class="images">
                <img src="images/july.png" alt=""width="200px"height="200px" class="centerimage">
            </div>
            <div class="images">
                <img src="images/halloween.png" alt=""width="200px"height="200px" class="centerimage">
            </div>
            <div class="images">
                <img src="images/christmas.png" alt=""width="200px"height="200px" class="centerimage">
            </div>
    </div>
    
    <div id="contt2">
        <div id="nav">
                
                <ul id="menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="History.html">History</a></li>
                    <li><a href="Membership.html">Membership</a></li>
                    <li><a href="Leadership.html">Leadership</a></li>
                    <li><a href="Projects.html">Projects</a></li>
                    <li><a href="Funds.html">Funds</a></li>
                </ul>
            </div>
                <img src="images/logo.png" alt=""><br><br><Br>
                
    </div>
    
    <div id="contt3">
        <div class="images">
            <img src="images/garden.png" alt=""width="200px"height="200px">
        </div>
        <div class="images">
            <img src="images/park.png" alt=""width="200px"height="200px">
        </div>
        <div class="images">
            <img src="images/enterance.png" alt=""width="200px"height="200px">
        </div>
        <div class="images">
            <img src="images/decor.png" alt=""width="200px"height="200px">
        </div>
        <div class="images">
            <img src="images/yard.png" alt=""width="200px"height="200px">
        </div>
    </div>
    
    <div id="footer">
        <p>P.O. Box 223</p>
        <p>Montgomery, TX 77356</p>
    </div>
    
</div>
</body>
</html>


CSS:
CODE


#wrapper
{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    /*border:1px solid #000;*/
}
#nav
{
    margin-top:2%;
    margin-left:19.5%;
    text-align:center;
    float:left;
    width:10%;
    padding:1%;
    line-height:1.2em;
    font-size:16pt;
}
#nav a{color:#000;}
#nav a:hover {background:#898989;width:100%;}

.images {text-align:center;display:inline;}
.images1 { display: block;
    margin-left: auto;
    margin-right: auto}

#contt1{height:12.5em;text-align:center;}

#contt2{}
#contt2 p {text-align:center;}
#contt2 img {margin-left:5%;}
#contt2 h2 {text-align:center; font-size:36pt;}
#contt3{text-align:center;height:12.5em;padding-top:1%;}
#footer {padding-top:1%;text-align:center;}

#contt1 a {background:url(../images/heli.png) no-repeat 0 0;}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 6 2012, 12:46 AM
Post #16


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
QUOTE
Solved!
I guess you haven't uploaded the fix yet, because I don't see the first row centered.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 6 2012, 04:52 AM
Post #17


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
He did make some changes in the online page, but they don't reflect the CSS he posted last. The first row now also contains two of the images of the bottom row.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post Mar 7 2012, 05:13 PM
Post #18


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
sorry, forgot to upload! i just re uploaded! can check it out at

http://testsite123112.net63.net/index.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 8 2012, 03:35 AM
Post #19


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Looks better now. I see you left out the captions on the top images, which I suppose is intentionally. Just add a DOCTYPE and validate.

You only have some problems on the other pages now, where the paragraphs are larger than my browser window.

In fact, I think the whole setup of the pages cause the problems.

I'd create a page with a wrapper div set at a desired width ( usually 960px, as in http://960.gs/ ) and center that with margin: 0 auto;. Then, for each section, I'd add a "container" div (its width is defined by wrapper), in which, if needed, you can put multiple div's to create columns (using floats or otherwise). You then only have to make sure you clear any such floats on the next element following. And so forth.

Exemples of such layouts can be found at http://blog.html.it/layoutgala/ .
Also take a look here: http://css.maxdesign.com.au/ .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post Mar 8 2012, 09:35 AM
Post #20


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
so will i be better off designingin px or percents? i perfer percents, so it can look pretty much the same across all sizes.. but what are your thoughts?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 10:02 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC