[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

CSS/HTML Positioning Issue

Posted on 2006-05-01
6
Medium Priority
?
285 Views
Last Modified: 2012-05-05
Hello,

http://link-view.com/NotLoggedIn.aspx

If you resize the page displayed in the above link you will see that the layout is a fluid layout -- It will reposition itself based on the size of the browser window.

The problem i'm having is that i need all the elements on the page to stay in thier position at all times. So that means, even if the browser window gets resized, i can not have these css elements repositioning themselves with the browser. It moves too many things around and it looks bad. I want to be able to use the horrizontal scroll bar when the browser is sized small, rather than see all my CSS boxes toppling over themselves. Please take a look at the link to see exactly what i'm talking about.

Here is what i've tried already:

I've tried to add a table and simply place each css element into the proper rows and coloumns. When i did that it almost worked for me, i got it so that everything would stay in place when the browser was resized, but the right column was way to the right and not in place, no matter the browser sizing.

I also changed the CSS for the content boxes to set their position to fixed, releative, absolute, & static. I also tried to utilize the float feature in CSS. Nothing resolved the issue.

i've scrapped that process above and have started from square one again. Hopefully that makes things easier for people to help me out.


here is what i'm working with presnetly: The above link is a page that i'm applying the following css code to.

-----------------------------------------------------------------------
#leftcontent {
            position: absolute;
            left:10px;
            top:114px;
            width:160px;
            background:#fff;
            border:1px solid #000;
            /* IE hack : */
top: expression(body.scrollTop + 128 + "px");
/*ie Hack*/
            }

      #centercontent {
            background:#fff;
               margin-left: 159px;
               margin-right:159px;
               padding:2em;
            border:1px solid #000;      
            voice-family: "\"}\"";
            voice-family: inherit;
               margin-left: 161px;
               margin-right:161px;
            }
      html>body #centercontent {
               margin-left: 161px;
               margin-right:161px;
            }

      #rightcontent {
            position: absolute;
            right:10px;
            top:114px;
            width:160px;
            background:#fff;
            border:1px solid #000;
            
/* IE hack : */
top: expression(body.scrollTop + 128 + "px");
/*ie Hack*/
            }
      
      #banner {
            background:#fff;
            height:99px;
            border-top:1px solid #000;
            border-right:1px solid #000;
            border-left:1px solid #000;
            voice-family: "\"}\"";
            voice-family: inherit;
            height:98px;
            }
      html>body #banner {
            height:98px;
            }
#header
{
      padding-top:0px;
      padding-left:1em;
}
.moveableloginbox {
      font-weight:500;
      position:absolute;
      top:0px;
      left:490px;
      text-align:left;
      padding-top:1em;
      padding-right:.5em;
      border:none;
      /* IE hack : */
top: expression(body.scrollTop + 0 + "px");
left: expression(body.scrollLeft + 487 + "px");
/*ie Hack*/

/* Navigation */

#chromemenu{
width: 100%;
}

#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(images/chromebg.gif) center center repeat-x; /*Theme Change here*/
margin-left: 0;
padding-left: 0;
margin: 0;
float: left;
font: bold 12px Verdana;
}


#chromemenu ul li{
display: inline;
}


#chromemenu ul li a{
float: left;
color: #7F7F7F;
font-weight: bold;
padding: 6px 12px 6px 7px;
text-decoration: none;
background: url(images/divider.gif) center right no-repeat; /*Theme Change here*/
}

#chromemenu ul li a:hover{
color: #494949;
}

#chromemenu ul li a[onMouseover]:after{ /*HTML to indicate drop down link*/
content: " ";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*Theme Change here*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 150px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*Theme Change here*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{ /*Theme Change here*/
background-color: #F0F0F0;
}


--------------------------------------------------------

i wont post the HTML here for the simple fact that it would take up way too much space, but i've posted the CSS that is being used in the HTML.

any thoughts on how i can get all the elements on the page to stay in their place when the window is resized?

thanks, your help is greatly Appreciated!
0
Comment
Question by:jasondole
  • 3
  • 3
6 Comments
 
LVL 4

Expert Comment

by:jfredrickson
ID: 16581447
Place any line of elements that you want to stay in a line inside a div and specify a width for that div in your CSS. When you resize your window such that the div is too large in the window, it will provide a horizontal scrollbar and the div will maintain its set width.
0
 
LVL 1

Author Comment

by:jasondole
ID: 16582763
So are you saying to put the entire html into one div and set that div's width to something like 750px ?
0
 
LVL 4

Accepted Solution

by:
jfredrickson earned 2000 total points
ID: 16582771
I was actually thinking of just placing a div around the linear elements that you don't want to move around, but that would work too.
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
LVL 1

Author Comment

by:jasondole
ID: 16583063
Thank you, that worked! I had to make sure that any divs that had the property of 'position:absolute' had width properties as well.
0
 
LVL 4

Expert Comment

by:jfredrickson
ID: 16583067
Glad I could help. Thanks for the A :)
0
 
LVL 1

Author Comment

by:jasondole
ID: 16583092
thanks for the help. You deserved the A. I worked hard on that and came up with nothing. Greatly appreciated.
0

Featured Post

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month8 days, 8 hours left to enroll

611 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question