Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    CSS - Problem with object size

    Hi guys and gals!

    I'm new to this forum - I've tried several other forums, but they didn't seem to be that great..

    Anyways, I have a problem. I'm currently in the stage of recoding my whole website, which before was made only of pictures in Photoshop.

    In my left side I have a menu box which is defined by a little object in the top and bottom. When I watch the page in 1024x768 it looks like it should be (see pic):



    However when I watch the page in 1280x1024 the little gray line seems to expand and cover some of the buttons. (See pic below: )


    Do you see the difference? The object, which was supposed to be 10PX wide and ABOVE the buttons has now expanded and are overlapping the buttons.

    Here's my CSS for the object and the menu DIV:
    (Upperline is the object and menu is the main menu div)
    Code:
    #upperline { background-color:#C8C8C8;
        position:absolute;
        top:203px;
        left:5px;
        width:150px;
        height:10px;
        border-style:ridge;
        border-width:1px;
        }
     
     
     
    #menu {   position:absolute;
        top:217px;
        left:5px;
        width:150px;
        border-width:2px;
        border-color:#000000;
        }
    And here's the part of my HTML with the object and the menu:
    Code:
    <!-- MENU BEGIN -->
    <div id="upperline"></div>
    <div id="menu">
    <img src="Home.gif" alt="Home"/><img src="Downloads.gif" alt="Downloads" style="border-top-width:1px; border-bottom-width:0px; border-right-width:0px; border-left-width:0px; border-style:solid;"/>
    </div>
    <!-- MENU END -->
    What have I done wrong?? I really can't find the error...

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Hi CaptainB, glad you joined us.

    I think one major problem of your page (well, don’t know for sure since I only see that bit of code, but I assume it concerns the entire page) is your use of absolute positioning where it ain’t necessary. This should be used with care as there are some hidden pitfalls if you don’t really know what you’re doing.

    Also you have some redundant HTML (empty and/or unnecessary elements) that you shouldn’t use just to add some style. Use only the elements you need and style them. For example, you could just add a 10px top border to the menu div or something. No need for an empty div and a lot of styling to get it in place and look like you want (or not).

    It would be helpful for us to see your entire code, though, assometimes a problem comes from a totally different place and only shows its ugly face in this one section.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Hi VIPStephan and thanks for your welcome!

    About the position:absolutes; It could be, as I'm just started learning CSS (this is my first use of DIVs and CSS ever) But what would you use to position it if not pos absolute?

    I can't really get it to work that way?

    Yup, here you are:

    HTML:
    Code:
    <!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>
    <title>Index</title>
    <meta name="title" content="XflightX">
    <meta name="keywords" content="XflightX, Flight, planes, airports, forums, graphic design, flight simulation, FS9, FSX, FS2004, Microsoft Flight Simulator, Live ATC, Air Traffic Control, Community forums, Flight club, multiplayer, free downloads, scenery, airplanes, aeroplanes, misc, airfields, GA, General Aviation, military planes, jetliners, jets, props, propellers, helicopters, tutorials, picture editing, gallery, newbie help, information, CaptainB, flightsim news, aivaiton news, flightsim links, links, aviation links, banner design, web design">
    <meta name="description" content="A friendly flightsim community for FS 2004 and X! We aim to help new simmers get started with FS and provide a quality web with free downloads, forums, links, flightclub, gallery and much more!">
    <meta name="copyright" content="Copyright (c) XflightX. All Rights Reserved">
    <meta name="revisit-after" content="1 days">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="calendar/style.css" />
    <style type="text/css">
    <!--
    .style1 {color: #FFFFFF}
    -->
    </style>
    </head>
    <body><div id="container">
    <!-- BANNER BEGIN -->
    <div id="banner"> <img src="http://www.guild-metus.com/xflightx/XflightX.gif" alt="XflightX Banner"></div>
    <!-- BANNER END -->
    <!-- CONTENT BEGIN -->
    <div id="midte">Dette er selvfoelgelig en test. Test test. HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE?????  HVORFOR VIRKER DET MED BOXENE IKKE????? HVORFOR VIRKER DET MED BOXE</div>
    <!-- CONTENT END -->
    <!-- RIGHT TABLE BEGIN -->
    <div id="clock">
    <!-- Clock Part 1 - Put Anywhere Before Part 2 -->
    <script language="JavaScript">
    function tS(){ x=new Date(tN().getUTCFullYear(),tN().getUTCMonth(),tN().getUTCDate(),tN().getUTCHours(),tN().getUTCMinutes(),tN().getUTCSeconds()); x.setTime(x.getTime()); return x; } 
    function tN(){ return new Date(); } 
    function lZ(x){ return (x>9)?x:'0'+x; } 
    function dE(x){ if(x==1||x==21||x==31){ return 'st'; } if(x==2||x==22){ return 'nd'; } if(x==3||x==23){ return 'rd'; } return 'th'; } 
    function dT(){ if(fr==0){ fr=1; document.write('<font size=2 face=Tahoma color=#D6D5D5><b><span id="tP">'+eval(oT)+'</span></b></font>'); } document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); } 
    var mN=new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'),fr=0,oT="tS().getDate()+dE(tS().getDate())+' '+mN[tS().getMonth()]+' '+' '+lZ(tS().getHours())+':'+lZ(tS().getMinutes())+' '+'Z'+'u'+'l'+'u'";
    </script>
    <!-- Clock Part 1 - Ends Here  -->
    <!-- Clock Part 2 - This Starts/Displays Your Clock -->
    <script language="JavaScript">dT();</script>
    <!-- Clock Part 2 - Ends Here -->
    </div>
    <!-- BOX 1 BEGIN -->
    <div id="box1right">
    <h1>Box 1 Right</h1>
      
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah nlah blahBlah blah blah blah blah blah blah blah blah blah blah blah blah nlah blah </p>
    </div>
    <!-- BOX 1 END-->
    <!-- BOX 2 BEGIN -->
    <div id="box2right">
    <h1>Box 2 Right</h1>
      
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah nlah blahBlah blah blah blah blah blah blah blah blah blah blah blah blah nlah blah </p>
    </div>
    <!-- BOX 2 END -->
    <!-- BOX 3 BEGIN -->
    <div id="box3right">
    <h1>Box 3 Right</h1>
      
    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah nlah blahBlah blah blah blah blah blah blah blah blah blah blah blah blah nlah blah </p>
    </div>
    <!-- BOX 3 END -->
    <!-- RIGHT TABLE END -->
    <!-- LEFT TABLE BEGIN -->
    <!-- CALENDAR BEGIN -->
    <div id="calender">
      <?php include('calendar/calendar.php');
    $calendar = new WingedCalendar();
    // to display a single calendar
    $calendar->show_calendar();
    // where PREVIOUS and NEXT are the number of months
    // before and after the current month respectively.  
    ?>
    </div>
    <!-- CANDAR END --> 
    <!-- MENU BEGIN -->
    <div id="upperline"></div>
    <div id="menu">
    <img src="Home.gif" alt="Home"/><img src="Downloads.gif" alt="Downloads" style="border-top-width:1px; border-bottom-width:0px; border-right-width:0px; border-left-width:0px; border-style:solid;"/>
    </div>
    <!-- MENU END -->
    <!-- BOX 1 BEGIN -->
    <div id="box1left">
     <h1>Box 1 left</h1><br />HEY KDKAOJFDIKH<br />
     jfbjsgbsjkgbsdjkbdf
      kslghskgG</div>
    <!-- BOX 1 END -->
    </div>
    </body>
    </html>
    And the CSS:

    Code:
    /*MAIN LAYOUT START*/
    body {    background-color:#333333;
           text-align:center;
           margin-left:auto;
           margin-right:auto;
        }
     
    #container {
           position: relative;
           width: 1000px;
           margin: auto;
        }
     
    #midte {   background-color:#666666;
         width:665px;
         text-align:center;
         margin-left:auto;
         margin-right:auto;
         margin-top:10px;
         border-width:1px;
         border-style:solid;
         border-color:#000000;
        }
     
    #banner {   width:665px;
          margin-left:auto;
          margin-right:auto;
        }
    /*MAIN LAYOUT END*/
    /*FONTS LAYOUT BEGIN*/
    h1 {    font-family:Tahoma;
        font-weight:bold;
        font-size:12px;
        color:#FFFFFF;
         background-color:#000000;
        }
    /*FONTS LAYOUT END*/
    /*RIGHT SIDE BEGIN*/
    #upperline { background-color:#C8C8C8;
        position:absolute;
        top:203px;
        left:5px;
        width:150px;
        height:10px;
        border-style:ridge;
        border-width:1px;
        }
        
        
        
    #menu {   position:absolute;
        top:217px;
        left:5px;
        width:150px;
        border-width:2px;
        border-color:#000000;
        }
        
        
        
    #clock {  background-image:url("box_bg.gif");
        position:absolute;
        width:150px;
        top:90px;
        right:5px;
        border-top-width:1px;
        border-bottom-width:1px;
        border-left-width:1px;
        border-right-width:1px;
        border-style:solid;
        border-color:#000000;
        }
     
    #box1right { background-color:#666666;
        background-image:url("box_bg.gif");
        width:150px;
        position:absolute;
        top: 203px;
        right: 5px;
        border-top-width:0px;
        border-right-width:1px;
        border-left-width:1px;
        border-bottom-width:1px;
        border-style:solid;
        border-color:#000000;
        }
     
    #box2right { background-color:#666666;
        background-image:url("box_bg.gif");
        width:150px;
        position:absolute;
        top: 385px;
        right: 5px;
        border-top-width:0px;
        border-right-width:1px;
        border-left-width:1px;
        border-bottom-width:1px;
        border-style:solid;
        border-color:#000000;
        }
     
    #box3right { background-color:#666666;
        background-image:url("box_bg.gif");
        width:150px;
        position:absolute;
        top: 567px;
        right: 5px;
        border-top-width:0px;
        border-right-width:1px;
        border-left-width:1px;
        border-bottom-width:1px;
        border-style:solid;
        border-color:#000000;
        }
    /*RIGHT SIDE END*/
    /*LEFT SIDE BEGIN*/
    #calender {  position:absolute;
           width:150px;
           top:300px;
           left:5px;
        }
     
     
     
    #box1left {  background-color:#666666;
        width:150px;
        position:absolute;
        top:385px;
        left:5px;
        border-style:solid;
        border-color:#000000;
        border-width:1px;
        }
    /*LEFT SIDE END*/
    Hope it isn't too confusing
    Last edited by CaptainB; 06-07-2007 at 05:37 PM.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Check out the layouts here http://bonrouge.com/3c-hf-fixed.php find the one that best matches your currently layout and follow the tutorial. This means you'll probably to move things around possibly recode from scratch. This wouldn't happen if you took the time to learn about what certain CSS things did. Tutorials are always good. I suggest you do more of them.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    I tried to use position:relative; instead of position:absolute; to position the menu. However when I select position:relative; and set margins the menu positions itself relative to the MAIN content and NOT to the container, which contains all of my content. Why?

    Here's a pic:



    Here's the CSS for it:
    Code:
    #menu {			position:relative;
    				margin-top:217px;
    				margin-left:5px;
    				width:150px;
    				border-width:2px;
    				border-color:#000000;
    				}

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    OK, you’re really taking the second step before the first one. Positioning is kind of an advanced thing because it’s not as intuitive as it seems. Absolute positioning takes an element completely out of the natural flow of elements, kind of putting it in a layer on top of the others, and following elements will take its place underneath (they go up to the last element before the positioned one - which “hovers” above the others). Relative positioning leaves the element within that flow. However, any direct positioning of a relatively positioned element will move the element from the point where it naturally resides, i.e. left: 10px; moves it 10px to the left of its original position. Absolutely positioned elements, however, will be positioned according to the next relative positioned ancestor, i.e. if nothing else specified it will take the html element as reference and left: 10px; will position it 10px from the html element’s left edge.

    If you have a container that is, say, 800px wide and centered on the screen, and you have another element within that container, positioned absolute and left: 0; then the element will be put to the left edge of the screen. If you position the container relative then the absolutely positioned child of that container will be at the left edge of the container, capiche?

    So don’t use positioning when it’s not necessary and only use it if you really know what you’re doing (my explanation was just the surface so that doesn’t count). Look at BonRouge’s website and do your layout according to one of those tutorials. I’m sure your layout (2 columns? 3 columns?) is among them, and it’s definitely easier than direct positioning.

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Ok, I really can't figure it out. Now I have searched for different tutorials, with no luck. I'm starting to think about tables, even though it's an oldschool method..

    How would one design a 3 column page with BOXES instead of just ONE piece...with DIV's?? Just a basic layout or so.

    This guy did it: http://www.webshapes.org/template/de...22411723524750 , but then again I don't get his code - it's pretty advanced! I would REALLY appriciate help on this since I need it before I can go any further with my page. Plzzzzz

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    You know, divs are just boxes. And you can nest divs. So you can put one box into another box, or two boxes into one box container box. It’s really easy actually, and you’ll never wanna do that with tables again.

    OK, a really basic example:
    You divide your document/page into three general sections: header, content, footer. Those three are grouped in one container div.
    Code:
    <div id="container">
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer"></div>
    </div>
    Then the appropriate content goes into the appropriate sections. Now, you’re gonna have three columns below your header, so essentially these are another three sections/boxes (divs) that reside within the content section:
    Code:
    <div id="content">
      <div id="info1"></div>
      <div id="main"></div>
      <div id="info2"></div>
    </div>
    (note: I named the sections after their potential function on the page. Names like “sidebar” or similar aren’t as desirable since a section doen’t necessarily have to be a sidebar - that’s a matter of styling it.)

    And each of those three sections can have even more small boxes (divs), like your menu, or your calendar, or some info boxes.

    Now, if you just float the info1 box/section to the left, the entire content of that box will be at the left and only the box following the floated one (the main section) will go up to the right of that info1 section. Then, if you float the main section to the left, too, and assign a width to it (and have enough space left at the right side) then the following box, namely info2, will go up to the right, and tadaaa! you have three columns.
    Code:
    #info1 {
      width: 80px;
      float: left;
    }
    #main {
      width: 450px;
      float: left;
    }
    Now you can float (or style however you want) the content of these columns without affecting the content of another column (if you style it reasonably).

    Put borders/outlines around elements that you currently work with or you need to have an eye on to see how they look, how big they are, and how they behave when you are applying styles.
    I hope that clarifies some things?
    Last edited by VIPStephan; 06-10-2007 at 07:23 PM.

  • #9
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Thank you a bunch, Stephan! But how would I then position the boxes and objects inside the page? With position:absolute; ? (Yeha, I love that tag! )

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    How ‘bout margins? You can apply top and/or bottom margins to the boxes themselves. However, you should also read a couple of things about that as you might come across collapsing margins which make things work differently at times.

    Alternatively, and perhaps a better method if you want the entire content of a box moved down you can apply a top padding to the containing box.

    And if it’s applicable, of course you can use positioning but beware: only if you really know what you are doing and why you wanna do this.

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    I really wanna thank you guys once again, and espicially you, VIPStephan!! Now my menu and "object" work like they should and I have NO more problems + a PROPER code WITHOUT position:absolute; ALL over!!!!

    Thank you so much again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •