Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

New Layout

Status
Not open for further replies.
Ecniv

Ecniv

Programmer
Nov 18, 2002
93
EU
I'm new to Css properties. I have got the idea of the style parts (very useful) but I found a decent site on layouts and am now experimenting with them.

I have a problem though.

I want the following:

<---------Title bar---------------------->
<---------Content------------------------>
<sidebar><cornergraphic><---Maindisplay-->

The side bar and main disply go to the bottom (400px) but I need the corner graphic and a gap under the graphic before getting to the main page of information.

They all float left and I think that could be the problem.

Would I need to create a box/area for the picture and gap?
Or set thepicture as background and no repeat, then colour the main page background under it?

Vince
 
Sort by date Sort by votes
What you can do is using divs with absolute position. Use one div for each distinct area. Here is an example :
HTML CODE
Code: 
<html>
<head>
  <LINK rel='stylesheet' type='text/css' href='LanceurLight.css'>
</head>
  <body id=&quot;body&quot; onload=&quot;call initPage()&quot;>
    <div id=&quot;EnteteCircuits&quot; class=&quot;DivTop&quot; align=&quot;center&quot;>
	1st DIV
    </div>
    <div id=&quot;CorpsCircuits&quot; class=&quot;DivMain&quot; align=&quot;center&quot;>
	2nd DIV
    </div>
    <div id=&quot;PiedCircuits&quot; class=&quot;DivBottom&quot; align=&quot;center&quot;>
	3nd DIV
    </div>
  </body>
</html>
CSS STYLE SHEET
Code: 
.DivTop {
 border : solid 1px #000000;
 position : absolute;
 top : 25px;
 left : 5px;
 width : 990px;
 height : 100px;
 overflow : hidden;
 display : block;
 background : #F1F1F1;
 text-align : left;
}
.DivMain {
 border : solid 0px #000000;
 position : absolute;
 top : 125px;
 left : 5px;
 width : 990px;
 height : 600px;
 overflow : auto;
 display : block;
 background : #F1F1F1;
 text-align : left;
}
.DivBottom {
 border : solid 1px #000000;
 position : absolute;
 top : 725px;
 left : 5px;
 width : 990px;
 height : 15px;
 overflow : hidden;
 display : block;
 background : #F1F1F1;
 text-align : left;
}
Water is not bad as long as it stays out human body ;-)
 
Upvote 0 Downvote
Hi,

Had a look :) looks ok. Not quite what I had in mind but has possibilities :)

Thanks

Vince
 
Upvote 0 Downvote
I have a minor problem with the following :
When the ie window is shrunk, the main layout section drops below the other sections.

Is this the way it is meant to be?
Or is it the float command which is pushing it?
Should I look at using positioning?

Vince


-------- testlayout.css ------------
body {
color: #000000;
background-color: #FFFFFF;
margin: 0px;
text-align: center;
}

#header
{
color: #eeffee;
background-image: url(./pl01topbg.gif);
background-color: #0518A7;
width: 100%;
height: 48px;
display: block;
}

#navbar
{
color: #9999cc;
font-size: 10px;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #ffcc66;
text-align: center;
margin-top: 3px;
margin-bottom: 3px;
padding-top: 3px;
padding-bottom: 4px;
width: 100%;
display: block;
}

#content
{
width: 100%;
height: 400px;
background-color: #EEF3B9;
display: block;
}

#sidebar
{
color: #9999cc;
background-image: url(./pl01topbg.gif);
background-color: #0518A7;
width: 128px;
height: 400px;
display: block;
float: left;
}

#sidebarcorner
{
background-color: #EEF3B9;
background-image: url(./pl01c.gif);
background-repeat: no-repeat;
width: 32px;
height: 400px;
display: block;
float:left;
}


#maindisplay
{
background-color: #EEF3B9;
background-image: url(./pl01mainbg.gif);
width: 500px;
height: 400px;
overflow: scroll;

padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 10px;

scrollbar-arrow-color: #cEd399;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-highlight-color: #ffffd9;
scrollbar-face-color: #fEF3c9;
scrollbar-shadow-color: #dEe3a9;
scrollbar-darkshadow-color: #cEd399;
scrollbar-track-color: #EEF3B9;

display: block;
float: left;
}

#footer
{
background-color: #0044FF;
width: 100%;
height: 24px;
display: block;
clear: left;
}

#footertext
{
color: #eeeeee;
background-color: #0000b3;
text-align: center;
margin-right: auto;
margin-left: auto;
width: 570px
display: block;
}

------ The following is the html -----
<html>
<head>
<link rel=&quot;stylesheet&quot; href=&quot;./testlayout.css&quot; type=&quot;text/css&quot;>


</head>
<body>

<div id=&quot;header&quot;>Header Text and graphic?
</div>
<div id=&quot;content&quot;>
<div id=&quot;sidebar&quot;>
Sidebar
</div>
<div id=&quot;sidebarcorner&quot;></div>
<div id=&quot;maindisplay&quot;>Main display content here</div>

</body>
</html>
 
Upvote 0 Downvote
Using absolute positionning will lead your divs to position where you told them to with no regards on screen resolution (ie : some of them should be hidden at lower resolutions or when window shrinks). One clue : try to use the z-index style to force your main div to display above the other ones (the higher z-index causes the topmost layer). Water is not bad as long as it stays out human body ;-)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
204
tyutghf
tyutghf
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
169
pendle666
pendle666
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
154
vacunita
vacunita
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
150
Carlvic
Carlvic
Katerine
  • Locked
  • Question
CSS question: Displaying 2-level unordered lists in a table layout? 1
Replies
7
Views
214
Katerine
Katerine

Part and Inventory Search

Sponsor

Back
Top