PDA

View Full Version : DIV Moves along with browser resize



suthaharmca
Apr 26th, 2009, 10:20 PM
Hai i'm designing a HTML Page with CSS anthe the page url is

http://suthahar.wen.ru


Heres the issue i'm facing, banner,menu and main_body div are centered using margin:o auto; and the other div tags are alligned using
position:absolute and the issue is when i resize the browsers the centerd div[banner,menu,main_body] are not fixed and it too moves left and right along with the browser resize..plz help me to fix this issue

/* CSS Document */
* {
margin: 0;
padding: 0;
}

body
{
font-size:70%;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
background:#040404;
}


.textbox
{
border: 0px;
background-color:#3B3636;
color:#FF6600;
font: arial;
size: 12px;
position:absolute;
left: -3px;
top: 0px;
height: 16px;
}
problem arise here
#banner {
width:898px;height:229px;
background-image: url(../images/top_banner.png);


background-repeat: no-repeat;
margin:0 auto;


}

#menu_left {
width:884px;height:47px;
margin: auto;
position: relative;
}
#main_body {

width:884px;height:485px;
background:#1B1919 url(../images/body_left.gif);



background-repeat: no-repeat;
margin:0 auto;

}
#main_right{
width:884px;height:485px;
background-image: url(../images/body_right.gif);
background-repeat: no-repeat;
background-position: right;
}
[/COLOR][/SIZE]
#inner_left {
width:515px;height:429px;
background:#3B3636 url(../images/inner_body_left.gif);
background-repeat: no-repeat;
position:absolute;
left: 391px;
top: 305px;
}
#inner_right {

width:515px;height:429px;
background-image: url(../images/inner_body_right.gif);
background-repeat: no-repeat;
background-position: right;
position: absolute;
left: 391px;
top: 305px;

}
#box1_left {
width:295px;
height:105px;
background:#3B3636 url(../images/box1_small_left.gif);
background-repeat: no-repeat;
position: absolute;
left: 65px;;
top: 421px;
}
#box1_right {
width:295px;
height:105px;
background-image: url(../images/box1_small_right.gif);
background-repeat: no-repeat;
background-position: right;
position: absolute;
left: 65px;;
top: 421px;
}
#box2_left {
width:295px;
height:105px;
background:#3B3636 url(../images/box1_small_left.gif) ;
background-repeat: no-repeat;
position: absolute;
left: 65px;
top: 547px;
}
#box2_right {
width:295px;
height:105px;
background-image: url(../images/box1_small_right.gif);
background-repeat: no-repeat;
background-position: right;
position: absolute;
left: 65px;
top: 547px;
}
#intro
{
background-image: url(../images/ats_logo.gif);
background-repeat: no-repeat;
background-position: right;
position: absolute;
width:298px;
height:107px;
left: 66px;
top: 310px;


}
#contact_us_img
{
background-image: url(../images/contact-us_image.gif);
background-repeat: no-repeat;
background-position:left;
position: absolute;
width:220px;
height:132px;
left: 61px;
top: 294px;
}
#mail_img
{
background-image:url(../images/Email_logo.gif);
background-repeat: no-repeat;
background-position:left;
position: absolute;
width:32px;
height:52px;
left: 10px;
top: -2px;
}
#mailtext
{
position: absolute;
width:330px;
height:92px;
top: 48px;
left: 28px;
}
#form{
position: absolute;
width:147px;
height:20px;
left: 22px;
top: -2px;
}
#Contact_form
{
position: absolute;
width:147px;
height:20px;
left: 16px;
top: 28px;

}
#chat
{
position: absolute;
width:141px;
height:120px;
left: 84px;
top: 446px;
}
#title{
font-size:150%;
font-family:Arial, Helvetica, sans-serif;
color:#FF6600;
font-style:italic;
}
#img{

margin:0;
padding:0;
border:none;
margin-top:8px;
margin-left:13px;

}
#img1{
margin:0;
padding:0;
border:none;
margin-top:8px;
margin-left:13px;

}
#text
{
width:160px;
height:104px;
position: absolute;
top: 425px;
left: 182px;
}
#text1
{
width:160px;
height:91px;
position: absolute;
top: 561px;
left: 180px;
}
#text2
{
width:478px;
height:350px;
position: absolute;
top: 320px;
left: 406px;
}
#title1{
font-size:100%;
font-family:Arial, Helvetica, sans-serif;
color:#FF6600;
font-style:italic;
}
#imglink
{
width:248px;
height:75px;
position: absolute;
left: 81px;
top: 673px;
}

#bottomnav
{
width:300px;
height:97px;
margin:0 auto;
left: 340px;
position:absolute;
top: 746px;
width: 520px;

}
#bottomnav a
{
color:#0000FF;
text-decoration:none;
}

#bottomnav a:hover,#bottomnav a:active
{
color:#FFFFFF;
}
#copyright
{
width:130px;
margin:0 auto;

}
#imgroll
{
width:495px;
height:117px;
position: absolute;
left: 408px;
top: 612px;
}
/*Image shake*/
.shakeimage
{
position:relative
}
/*IMAGE ENLARGE*/
#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}
/*END IMAGE ENLARGE*/

Excavator
Apr 27th, 2009, 12:35 AM
Hello suthaharmca,
Your AP elements are positioned relative to the browser window right now. Add postition:relative; to #main_body and those elements will follow it around instead.

suthaharmca
Apr 27th, 2009, 01:44 PM
Hello sir!
Thanks a lot it works like a charm....a great help yar... and i read in lot of threads that its not good to use " position:absolute " for div positioning..and whats the gud css code to position div tags..what kind of positioning or alligning property most of the designers use???

abduraooft
Apr 27th, 2009, 02:10 PM
Absolute position plays well when we need to position an element inside a relatively positioned element at a constant location. Have a look at some good lay-outing techniques at http://bonrouge.com/3c-hf-fluid.php

suthaharmca
Apr 27th, 2009, 03:08 PM
Tks fr the link got many informations regarding DIV Wrap