Jump to content

Recommended Posts

Posted

I'm finally moving away from designing layouts with tables however this CSS stuff is rather tricky :lol:

Could someone please help me center align up to 5 div's within another div?

Website example is www.myaudiodirect.com I want those 2 photographs to appear on the same line but align them to the center of the big blue div. I've tried a couple of things and Just can't see to get it right.

layout.css

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}    
body{
background-color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

#wrapper{
width: 770px;
margin:10px auto;
border: 1px solid #000000;
text-align:left;
}

#headerlogo{
height: 300px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
}

#title{
    
}

#content{
background-image: url(../images/background.jpg);
color:#ffffff;
height: 1000px;

}

#photo{
height: 200px;
width: 150px;
margin-left: auto; 
margin-right: auto;

overflow: auto;
margin:0 auto;
background-image: url(../images/photo.gif);
background-repeat: no-repeat;    
}

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MyAudioDirect</title>
    <link href="css/layout.css" rel="stylesheet" media="all" type="text/css" />

</head>



<div id="wrapper">
    <div id="headerlogo"></div>
    
    <div id="content">
                <div id="photo" style="position: relative; top:100px;">x</div>
        <div id="photo" style="position: relative; top:100px;">x</div>
    </div>
    
</div>

</body>
</html>

Posted

Just have the one photo div and put the images in that (if you need to put different styles on the images then put then in their own spans).

Posted

Right, I'm not sure I fully understand what you mean as I want to overlay other images onto those photo's and also some text into the white space.

Is your recommend way still the best solution to this?

Posted

Here is a possible way to do this (Though I will be interested to hear how other people tackle this).

Wrap your photo divs in an div with an ID of photos and then alter your styles to this

#photo {
background-image:url(http://www.myaudiodirect.com/images/photo.gif);
background-repeat:no-repeat;
height:200px;
margin:0 auto;
overflow:auto;
width:150px;
float: left;
}
    
div#photos {
width: 300px;
margin: 0 auto;
}

The only thing to be aware of is that you will need to alter the width of the div#photos entry if you want to put more than two divs in.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...