I designed a site. i want to header,footer,l eft & right column fixed but body information only scrolling. this site screen to be 800/600 px. i designed this way but when i used position fixed all information to show as displace. please help me.
my coding are as below: - <!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>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
<title>Untitled Document</title>
-
<style>
-
body { margin: 0; padding:0; background-color:#99CC00; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; line-height:18px; }
-
-
/* Template */
-
#wrapper { width:800px; height:auto; margin:0 auto; padding:0;}
-
#maincontainer { float:left; width:800px; height:auto; margin:0; padding:44px 0;}
-
#container { float:left; width:800px; height:auto; background-color:#CCFF99; }
-
/* Header */
-
#header { float:left; width:800px; height:80px;}
-
#leftheader { float:left; width:270px; height:80px; margin:2px 0 0 0; padding:3px 0 0 8px; background-color:#FFFFFF; }
-
#rightheader { float:right; width:500px; height:80px; margin:2px 0 0 0; padding:3px 0 0 8px; background-color:#FFFF99; }
-
/* Header */
-
#bodycontainermain { float:left; width:800px; height:500px; background-color:#CCCCCC }
-
/* Left Cloumn */
-
.leftcont1 { float:left; width:150px; height:300px; margin:6px 0 0 0; padding:2px 0 0 10px; background-color:#009966; }
-
/* Bodyn */
-
.bodycontainer { float:left; width:472px; height:auto; margin:6px 0 0 0; padding:2px 0 0 8px; background-color:#CCCCCC; }
-
/* Right Cloumn */
-
.rightcont1 { float:right; width:150px; height:300px; margin:6px 0 0 0; padding:2px 0 0 10px; background-color:#009966; }
-
/* Footer */
-
#footer { float:left; width:802px; height:28px; background-color:#DAAF7B; margin:0 -3px 0 0; padding:0; }
-
#footerp { margin:0; padding:5px 20px 0 0; font-size:11px; color:#FFFFFF; text-align:right; }
-
</style>
-
</head>
-
-
<body>
-
<div id="wrapper">
-
<div id="maincontainer">
-
<div id="container">
-
<div id="header">
-
<div id="leftheader">rwerwer</div>
-
<div id="rightheader">werewrewrew</div>
-
</div>
-
<div class="leftcont1">Left Column</div>
-
<div class="bodycontainer"> The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
-
Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
-
O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
-
Programming (3rd edition). See oracle.oreilly.com.
-
Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
-
(1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
-
Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
-
O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
-
Programming (3rd edition). See oracle.oreilly.com.
-
Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
-
(1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
-
Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
-
O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
-
Programming (3rd edition). See oracle.oreilly.com.
-
Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
-
(1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
-
Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
-
O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
-
Programming (3rd edition). See oracle.oreilly.com.
-
Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
-
(1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
-
Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
-
O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
-
Programming (3rd edition). See oracle.oreilly.com.
-
Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
-
(1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
-
Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
-
O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
-
Programming (3rd edition). See oracle.oreilly.com.
-
Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
-
(1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
-
Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
-
O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
-
Programming (3rd edition). See oracle.oreilly.com.
-
Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
-
(1st Edition, May 2001), Morgan Kaufmann. The complete Oracle Documentation is available online at technet.oracle.com. Free subscription!
-
Oracle Press has several good books on various Oracle topics. See www.osborne.com/oracle/
-
O’Reilly has about 30 excellent Oracle books, including Steven Feuerstein’s Oracle PL/SQL
-
Programming (3rd edition). See oracle.oreilly.com.
-
Jim Melton and Alan R. Simon: SQL: 1999 - Understanding Relational Language Components
-
(1st Edition, May 2001), Morgan Kaufmann.</div>
-
<div class="rightcont1">Right Column</div>
-
-
-
<div id="footer">
-
<div id="footer">Copyright 2007 test.
-
</div>
-
</div>
-
</div>
-
</div>
-
</div>
-
</body>
-
</html>
3  5525  acoder 16,027
Recognized Expert Moderator MVP
Which browsers have you tested? position:fixed doesn't work in IE6.
position:fixed will treat the element similar to 'absolute' so that may not be what you want. Perhaps you should play with adding 'overflow:scrol l' to #wrapper.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Mel |
last post by:
is there such thing ? using CSS ?
thanks,
Mel
|
by: Andrew |
last post by:
I've been struggling to achieve the following layout for some time now
and I'm not getting anywhere. I've tried several approaches including
floats & absolute positioning and none seem to work, primarily due to
the footer not being aware of the columns due to me floating /
positioning them.
I have the following (very simple) markup:
<div id="head">...</div>
<div id="left">...</div>
|
by: sonya11 |
last post by:
hi all,
sorry I realize the topic is well known, anyway is there a way without
using javascript to have a footer always under a 3 column layout with
Absolute Positioning ?
I don' t want to use float 'cause I want to organize content in a
better order for accessibility
and search engine optimization ( content first ) and I cannot know in
advance the height of the central column 'cause the content is taken
|
by: Grischa Brockhaus |
last post by:
Hi,
I'm trying to produce a div layout containing a header on the top with fixed height, a footer on the
bottom using fixed height and a content layer using what's left of the browsers window.
So my header div is defined at top:0; height:40px , my footer is defined as bottom:0; height:40px
and the content is defined as top:40px;bottom:40px;
This works very well with firefox but doesn't work with IE, as IE ignores the bottom statement...
|
by: ~john |
last post by:
I'm trying to get my header to have 2 images, one for the top left and
one for the top right. Here's a link to my page...
http://levelwave.com/dev/div/index.html
and will eventually be images but what I'm
wanting is for the to be aligned left and to
be aligned right. As of now they're both squished to the left and I'm
not sure how to change my CSS to do this.
| | |
by: dfdavis.mtu |
last post by:
I have a table that I dynamically fill with data from a database for
medical companies to be able to determine if their patients meet
certain criteria. However they want a fixed header for it so they can
keep track of the criteria as they scroll since there can be upwards of
1000 or more patients in the table. The way I got this to work was to
enter the information in a table via C# by storing it in a label. This
works fine and scrolls...
|
by: KoosHopeloos |
last post by:
L.S.,
I'm trying to make a layout which is completely fixed in width and
height if needed by using three divs rows (header, content, footer)
which have each 3 div again to be able to play around better with the
webdesign.
The problem is that I need the content div row to nudge up
automatically to the header div row, independantly of the header
height. The same goes for the footer/content div row.
|
by: swc76801 |
last post by:
I desperately need help. My understanding of CSS is non-existent. I have a store http://astore.amazon.com/texasheat-20 with Amazon.com. According to the information from Amazon.com "Write your own overriding CSS to customize your aStore." Their setup page is divided into two sections. On the right they show the existing CSS. On the left there is a box where you can add the new code. They have tabs for "Global", "Category Page", "Detail Page",...
|
by: darkzone |
last post by:
Looked almost ok in my editor but not so good in fire fox. I was going for a layout that was elastic some what. A header with one image repeating 100%, an there image slightly to the left also in the header, a container a 20% wide box for a list, two 80% wide boxes for content, a footer with the same image set up to end it. It was looking almost there for white but the footer image could now
be viewed.
?=
<!DOCTYPE HTML PUBLIC...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
