Background image positioning and overlaps help please.

Discussion in 'CSS' started by dtism, May 31, 2006.

0
  1. #1
    Hi I am a css novice, and I stumbled into this forum after a couple of days headscratching and getting it wrong. And as seems to be the norm (well for me anyway), I'm asking for help before actually contributing something :eek:
    You look like a friendly helpful bunch though, so perhaps you could overlook that ;)

    What I'm trying to acheive is locating two background images on my page, in the upper left & upper right corners of the window. Something like this.
    
+-------------++--------------+
| div1        ||   div2       |
| bg image    ||   bg image   |
+-------------|+---------+===++
|   overlap   |          | n ||
+-------------+          | a ||
|          div3          | v ||
|       main content     +---+|
+-----------------------------+
    Code (markup):
    I'm not sure how to do it, and all my attempts so far have led to one corner being positioned fine, and the other falling under it. Or looking fine in IE but not in Firefox etc..

    In an ideal world I think I'd like a page that was divided up similar to the mockup pic below.

    [​IMG]

    Please could someone help me?

    Thanks,

    Doug.
     
    dtism, May 31, 2006 IP
  2. mt.bum

    mt.bum Guest

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try using the following in the css.

    div.2 {
    float: right;
    margin-left: 40px;
    margin-bottom: 40px;
    }

    Begin the body with div2, then div1, then the rest.
     
    mt.bum, May 31, 2006 IP
  3. dtism

    dtism Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you, :)

    I'll give that a try.
     
    dtism, Jun 1, 2006 IP
  4. dtism

    dtism Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Right not much joy with that yet, can someone take a look at my code please?

    CSS
    
/*teststylewithborders.css*/
body
{
	font-family: Arial, Verdana, Geneva, helvetica, sans-serif;
	background: #69421B;
	color: #FFFFFF;
}

#maincontainer
{
    width: 995px;
    height: 600px;
	margin: 0 auto;
	border: thin dotted #FF0000;
}

#topleftcorner
{
    width: 522px;
	height: 546px;
    float: left;
	background: url(images/topleft.jpg) #69421B no-repeat;
	border: thin dotted #FF0000;
}

#toprightcorner
{
    width: 462px;
	height: 286px;
    float: right;
	margin-left: 40px;
	margin-bottom: 40px;
	background: url(images/topright.jpg) #69421B no-repeat;
	border: thin dotted #FF0000;
}

#contentcontainer
{
    clear: both;
	border: thin dotted #FF0000;	
}
    Code (markup):
    HTML
    
<html>
<head>
<title>test page 4</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="teststylewithborders.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="maincontainer">
	<div id="toprightcorner">
	</div>
	<div id="topleftcorner">
	</div>
	<div id="contentcontainer">
		<p>Blagh blagh blagh</p>
	</div>
</div> <!-- end maincontainer -->
</body>
</html>
    Code (markup):
    Thanks in advance :)

    Doug.
     
    dtism, Jun 1, 2006 IP
  5. dtism

    dtism Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Ok, it seems to work a bit better if I take out the "maincontainer" div, but still not quite right.

    here are the url's for different attempts.. and the css file.
    
www.edencollective.co.uk/testing/test1.html (with "maincontainer")
www.edencollective.co.uk/testing/test2.html (without "maincontainer")
www.edencollective.co.uk/testing/teststylewithborders.css
    Code (markup):
    Thanks again.
     
    dtism, Jun 1, 2006 IP