The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> How to Overlap Div
Zane D.
post Feb 1 2010, 08:20 PM
Post #1





Group: Members
Posts: 5
Joined: 1-February 10
Member No.: 10,977
Please help me on my problem regarding on how to Overlap div.

Its working fine on firefox but in IE its not.

Please check this site:
http://host1.brevistech.com/~rreinc/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 1 2010, 09:33 PM
Post #2


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

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
Where? What? How?

In some browsers I see one or two images partly overlapping text. Do you really want the images to the right to overlap the text to the left? Or do you want them not to?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 1 2010, 09:36 PM
Post #3


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

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
Oh dear. If I change the text size I can make the columns switch place. I smell absolute positioning gone wrong.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zane D.
post Feb 1 2010, 09:56 PM
Post #4





Group: Members
Posts: 5
Joined: 1-February 10
Member No.: 10,977
here is my CSS

@charset "utf-8";
/* CSS Document */

body{
background: #E6E6E6;
}

.topbanner1{
position: relative;
left: 5px;
background-repeat: no-repeat;
background-image: url(../images/Top-Banner_left.jpg);
height: 217px;
}
.topbanner2{
position: relative;
left: 275px;
background-repeat: no-repeat;
background-image: url(../images/Top-Banner_center.jpg);
height: 217px;
}
.topbanner3{
position: relative;
left: 320px;
background-repeat: no-repeat;
background-image: url(../images/Top-Banner_right.jpg);
height: 217px;
}
.brder1{
background: #ffffff;
width: 903px;
border-top: 4px solid #000000;
border-left: 4px solid #000000;
border-right: 4px solid #000000;
padding-top: 16px;
}
.brder2{
background: #FF4D4D;
width: 903px;
border-bottom: 4px solid #000000;
border-left: 4px solid #000000;
border-right: 4px solid #000000;
padding-top: 1px;
}
.content{
background: #FFFFFF;
padding: 15px 0px 15px 0px;
}
.itom1{
background: #000000;
width: 740px;
padding: 8px 0px 8px 0px;
}
.itom2{
background: #000000;
width: 740px;
padding: 8px 0px 8px 0px;
}
.moreinfo{
border: 7px solid #eeeeee;
width: 800px;
}
.thumbnails{
width: 400px;
padding: 1px 10px 10px 40px;
}
.thumbnails1{
width: 400px;
position: absolute;
left: 650px;
top: 392px;
}
.thumbnails2 {
padding:54px 10px 10px 39px;
width:400px;
}
.thumbnails3{
width: 400px;
position: absolute;
left: 650px;
top: 563px;
}
.text_thumbnail1 {
font-size:11px;
position:absolute;
right:600px;
top:392px;
width:195px;
}
.text_thumbnail2 {
font-size:11px;
left:834px;
position:absolute;
top:392px;
width:200px;
}
.text_thumbnail3{
width: 200px;
position: absolute;
right: 613px;
top: 563px;
font-size: 11px;
}
.text_thumbnail4{
width: 200px;
position: absolute;
left: 850px;
top: 563px;
font-size: 11px;
}

#property{
font-size: 18px;
font-weight: bolder;
font-family: Arial, Verdana, Helvetica, sans-serif;
padding: 7px 10px 10px 120px;
}

#lease {
font-family:Arial,Verdana,Helvetica,sans-serif;
font-size:18px;
font-weight:bold;
position:absolute;
right:372px;
top:360px;
}

#corporate{
font-size: 18px;
font-weight: bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
position: absolute;
left: 345px;
top: 530px;
}

#consulting{
font-size: 18px;
font-weight: bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
position: absolute;
right:400px;
top:530px;
}

#top_menu{
FONT-WEIGHT: normal;
FONT-SIZE: 14px;
COLOR: #FFFFFF;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

#top_menu a{
FONT-WEIGHT: bold;
FONT-SIZE: 16px;
COLOR: #FFFFFF;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

#bottom_menu{
FONT-WEIGHT: normal;
FONT-SIZE: 9px;
COLOR: #FFFFFF;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
#bottom_menu a{
FONT-WEIGHT: bold;
FONT-SIZE: 8px;
COLOR: #FFFFFF;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

#main_content{
Font-family: Arial, Verdana, Helvetica, sans-serif;
Font-Size: 22px;
Color: #FF4D4D;
font-weight: bold;
padding-bottom: 15px;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zane D.
post Feb 1 2010, 09:56 PM
Post #5





Group: Members
Posts: 5
Joined: 1-February 10
Member No.: 10,977
my HTML code also:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Results Real Estate Inc.</title>

<link rel="stylesheet" type="text/css" href="template/css/custom.css"></link>
<link rel="stylesheet" type="text/css" href="template/css/chromestyle.css"></link>

<script type="text/javascript" src="template/chromejs/chrome.js"></script>
</head>

<body>

<div align="center">
<div class="brder1">
<div class="topbanner1">
<div class="topbanner2">
<div class="topbanner3">
</div>
</div>
</div>
</div>

<div class="brder2">
<div class="itom1">
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Company</a></li>
<li><a href="#" rel="dropmenu1">Services</a></li>
<li><a href="index.html">Our Process</a></li>
<li><a href="index.html">Contact Us</a></li>
<li><a href="index.html">Links</a></li>
</ul>
</div>
<div id="dropmenu1" class="dropmenudiv">
<a href="office-space.html">Office Space</a>
<a href="retail-space.html">Retail Space</a>
<a href="property-managment.html">Property Management</a>
<a href="commerical-space.html">Commercial Space</a>
<a href="property-selling.html">Property Disposition</a>
</div>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

<div align="center" class="content">
<div id="main_content">Your Partner in Commercial Real Estate</div>
<div align="left" class="moreinfo">
<div id="property">Property Acquisition</div>
<div align="left" class="thumbnails">
<img src="http://host1.brevistech.com/~rreinc/template/images/Aquisition.jpg"/>
</div>
<div class="text_thumbnail1">
Our expert analysis and attention <br /> to detail will result best possible <br /> acquisition choices that will meet <br /> your business needs.
</div>
<div id="lease">Property Lease Up</div>
<div align="left" class="thumbnails1">
<img src="http://host1.brevistech.com/~rreinc/template/images/Lease-up.jpg"/>
</div>
<div class="text_thumbnail2">
We will partner with you and <br /> use our experience and tenacity to find <br /> occupants to lease your space.
</div>
<div id="corporate">Corporate Relocation</div>
<div align="left" class="thumbnails2">
<img src="http://host1.brevistech.com/~rreinc/template/images/Lease-up.jpg"/>
</div>
<div class="text_thumbnail3">
Our expert analysis and attention <br /> to detail will result best possible <br /> acquisition choices that will meet <br /> your business needs.
</div>
<div id="consulting">Consulting</div>
<div align="left" class="thumbnails3">
<img src="http://host1.brevistech.com/~rreinc/template/images/Aquisition.jpg"/>
</div>
<div class="text_thumbnail4">
We will partner with you and <br /> use our experience and tenacity to find <br /> occupants to lease your space.
</div>
</div>
</div>
<div class="itom2"><div id="bottom_menu">
<a href="index.html" style="text-decoration: none;">Home</a>|
<a href="index.html" style="text-decoration: none;">Company</a>|
<a href="index.html" style="text-decoration: none;">Services</a>|
<a href="index.html" style="text-decoration: none;">Our Process</a>|
<a href="index.html" style="text-decoration: none;">Contact Us</a>|
<a href="index.html" style="text-decoration: none;">Links</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; info@resultsrealstateinc.com &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 763-478-6400 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Copywrite 2010
</div></div>
</div>

</div>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 1 2010, 10:01 PM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Try resizing your browser. Some bits are positioned relative to the left edge of the display area. Some are positioned relative to the right edge of the display area. Some are centered.

They're going to line up only with one specific width of display area.

And "copywrite" is not the same as "copyright"...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zane D.
post Feb 1 2010, 10:12 PM
Post #7





Group: Members
Posts: 5
Joined: 1-February 10
Member No.: 10,977
The output is still the same...Im still having problems in IE6, IE7 and IE8
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 1 2010, 11:40 PM
Post #8


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

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
No, it isn't and you have problems in all browsers. Resize the browser window, change the text size... it'll all mess up your layout. Darin said what causes it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zane D.
post Feb 1 2010, 11:49 PM
Post #9





Group: Members
Posts: 5
Joined: 1-February 10
Member No.: 10,977
If im going to resize my browser windows, what should be your recommendation browser windows size?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 2 2010, 03:56 AM
Post #10


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

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
You misunderstand. Make it bigger, make it smaller. It's to mimic what size browser windows other may have. The page looks as you see it only in if exactly the same window size and settings as you have are used. As said above, any change make things move around because you have positioned them the way Darin described.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

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: 26th April 2024 - 09:22 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC