-1

im making a self financial accounting program but im gonna use html,css and php to do it

i have a basic layout with 5 main divs on the front page

here it is the mock: http://s24.postimage.org/le9yrx4np/divs.jpg

i never coded before and im failing hard

i want this layout compatible with "desktops" this is my desktop version

im working based on a 1024 x 768 screen

but i want webkits compatible for all browsers because i want this able to resize if its a little bigger or smaller im not sure if need em since i can just set things to like 100% but thats where my problem starts

here is my work so far

http://jsfiddle.net/dhJPS/

my prblems are

  1. the middle three divs are being overlapped by the right div, notice on the words how they are not centered from the left div to the right div

  2. i cant seem to understand the concept of floating to well i cant make this layout work like i want

anyways if you can help me out a little with this one is greatly appreciated!!

thanks

#leftside {
background-color: blue;
width: 170px;
height: 770px;
float: left;

}

#intab {
background-color: yellow;
width: 100%;
height: 297px;


}

#currentday {
background-color: white;
width: 100%;
height: 170px;



}

#outtab {
background-color: yellow;
width: 100%;
height: 297px;


}

#rightside {
background-color: black;
height: 770px;
width: 200px;
float: right;
margin-top: -765px;
}



* { 
margin: 0px;
padding: 0px;
list-style-type: none;  

}


body {
text-align: center;
display: block;
}
img {
border: none;
}
4

2 回答 2

0

You simply need to rearrange some things.

  • When floating something to the right, the HTML always need to come before any other HTML. Right, left, static is the best order to follow.

  • You always want to cascade your CSS. Put global styles at the top of the style sheet. The body styles should be at the top of your CSS, not the bottom.

  • I added a wrapper div to set a minimum width. This way the interior content will never go below that width, ensuring things never overlap. However they will expand as much as needed.

  • It is rare you need to set width: 100%; in the CSS. It's not always a bad thing, but you shouldn't bother setting that unless you specifically know you need it.

I rearranged some things, and removed some of the HTML that jsFiddle don't need.... UPDATED FIDDLE HERE

于 2013-03-12T07:31:21.497 回答
0

Here is your answer. Key issues: margin inner div to group all the central ones

[VERY IMPORTANT] display: inline-block; - This will make sure that your div will be the exact size you defined. if not used it will use 100% for both width and height

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style>
        .panels {
            height: 768px;
        }

        .rightside, .leftside {
            width: 170px;
            height: 100%;
            background-color: yellow;
            display: inline-block;
        }

        .leftside {
            float: left;
        }

        .rightside {
            float: right;
        }

        .innerPanels {
            height: 100%;
            margin: 0 170px;
        }

        .intab, .outtab {
            height: 25%;
            background-color: lime;
            opacity: 0.75;
        }
        .currentday{
            height: 50%;
            background-color: darkgray;
        }
    </style>
</head>
<body>

<div class="panels">
    <!--LEFT SIDE -->
    <div class="leftside">left side</div>
    <!-- RIGHT SIDE -->
    <div class="rightside">right side</div>

    <div class="innerPanels">
        <!-- IN -->
        <div class="intab">in</div>
        <!-- CURRENT DAY -->
        <div class="currentday">current day</div>
        <!-- OUT -->
        <div class="outtab">out</div>
    </div>

</div>
</body>
</html>
于 2013-03-12T07:45:23.270 回答