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 Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Fix Element 1

Status
Not open for further replies.
Chance1234

Chance1234

IS-IT--Management
Joined
Jul 25, 2001
Messages
7,871
Location
US
Code: 
 <style type="text/css">

            body{
                margin: 0;
                padding: 0;
                border: 0;
                overflow: hidden;
                height: absolute; 
            }
            #leftnavigation{
                position: absolute;
                top:0;
                height:60%;
                left: 0%;
                width: 20%; 
                overflow: hidden; 
                background: #ccccff;
                color: white;
            }
            #topcontent{
                position:absolute;
                height:10%; 
                left: 25%;
                width:70%;
                overflow: auto; 
                background: #ff44ff;
            }
            #middlecontent{

                position: absolute;
                top:10%;
                left: 25%; 
                width:35%;
                overflow: auto; 
                background: #ddeeff;
            }
            #rightcontent{

                position: absolute;
                top:10%;
                left: 60%; 
                width:35%;
                overflow: auto; 
                background: #ff7777;
            }
                .innertube2{
                margin: 5px; 
                font-size: 14px;

            }

        

   

</style>


Ive been on the great copy and paste trail; what i want to acheive is my area leftnavigation stays static and topcontent stays static.


Chance,

Filmmaker, gentleman and polla stilo eleous
 
Sort by date Sort by votes

Start learning proper CSS and then come back. You're using values that do not exist in CSS.

For what I believe you call static, position: fixed is the answer. IE6 (dunno about 7) does not support it, but google can help you find workarounds: [google]position fixed ie6[/google]

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
I am rephrasing my original question; My apologies if it was not clear in the first place I am not as html/css developer. I am somone who has logged on to a proffesional technical forum , gone to a forum which covers the technology I am having trouble with and posting a question which i hope someone would be graceful enough to provide their expertise and knowledge to.

Now, What I am trying to acheive is a page layout, which has a fixed column on the left hand side and a fixed top.

Underneath the top banner There should be two sections.

Which my result is coming up as the following

Code: 
<head> 

<style type="text/css">

            body{
                margin: 0;
                padding: 0;
                border: 0;
                overflow: hidden;
                height: absolute;
            }
            #leftnavigation{
                position: absolute;
                top:0;
                height:60%;
                left: 0%;
                width: 20%;
                overflow: hidden;
                background: #ccccff;
                color: white;
            }
            #topcontent{
                position:absolute;
                height:10%;
                left: 25%;
                width:70%;
                overflow: auto;
                background: #ff44ff;
            }
            #middlecontent{

                position: absolute;
                top:10%;
                left: 25%;
                width:35%;
                overflow: auto;
                background: #ddeeff;
            }
            #rightcontent{

                position: absolute;
                top:10%;
                left: 60%;
                width:35%;
                overflow: auto;
                background: #ff7777;
            }
                .innertube2{
                margin: 5px;
                font-size: 14px;

            }

</style>
</head>
<body>
<div id="leftnavigation">
This is on the left 
</div>
<div id="topcontent">
top content 
</div>
<div id="middlecontent">
This is the middle 
</div>
<div id="rightcontent">
This text is on the right
</div>

</body>

</html>

Where I am having trouble is making the left and top remained fixed

I copied a lot of the code from here


And played around with is so i got the split as in above, but have lost the fixed position of the top and the left.

I would be greatful if someone could point out what i need to change, and my new second question is what values am im using incorrect ?

Chance,

Filmmaker, gentleman and polla stilo eleous
 
Upvote 0 Downvote
Chance,

Here's something a reworked from CSS Jeff & I did for the Direct Line website many moons ago (it's still there if you happen to try and get a quote!).

I've tested this under every browser I have working perfectly:

Windows XP
==========
Fx 1.5.0.12
Netscape 7.1
IE 6
IE 7
Opera 8.52
Opera 9.00

Mac OS X
========
Safari 2.0.4
Firefox 1.0.7
Firefox 1.5.0.11
Firefox 2.0.0.4
Opera 6.03
Opera 7.54 u1
Opera 9.2
Netscape 7.1
Mozilla 1.7.13
Camino 1.0.3

For Mac IE 5.2.3 (the latest release), the fixed positioning does not work, but degrades nicely (with all elements scrolling as usual).

Here's the code:

Code: 
<!-- enable quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html lang="en">
<head>
    <title>Page title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

	<style type="text/css">
		html, body {
			margin: 0px;
			padding: 0px;
		}

		#header {
			height: 50px;
			width: 100%;
			background-color: gold;
			overflow: visible;
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 1;
		}

		#leftNav {
			width: 150px;
			background-color: teal;
			overflow: visible;
			position: absolute;
			top: 50px;
			left: 0px;
			z-index: 1;
		}

		@media screen {
			body > div#header {
				position: fixed;
			}
			body > div#leftNav {
				position: fixed;
			}
		}

		body {
			padding-top: 50px;
		}

		#content {
			padding-left: 150px;
		}

		#footer {
			background-color: red;
		}
	</style>

<!--[if lt IE 7]>
	<style type="text/css">
		body {
			_height: 100%;
			_overflow: hidden;
		}

		#bodySection {
			_width: 100%;
			_height: 100%;
			_overflow: auto;
		}
	</style>
<![endif]-->

</head>

<body>
	<div id="extradiv1"></div>

    <div id="header">
        Header goes here...
	</div>

	<div id="leftNav">
		Left Nav Item 1 <br>
		Left Nav Item 2 <br>
		Left Nav Item 3 <br>
		Left Nav Item 4 <br>
		Left Nav Item 5 <br>
		Left Nav Item 6 <br>
		Left Nav Item 7 <br>
		Left Nav Item 8 <br>
		Left Nav Item 9 <br>
		Left Nav Item 10 <br>
	</div>

	<div id="bodySection">
		<div id="content">
			Top Line 1: Lorum ipsum dolor sit amet <br>
			Top Line 2: Lorum ipsum dolor sit amet <br>
			Top Line 3: Lorum ipsum dolor sit amet <br>
			Top Line 4: Lorum ipsum dolor sit amet <br>
			Top Line 5: Lorum ipsum dolor sit amet <br>
			Top Line 6: Lorum ipsum dolor sit amet <br>
			Top Line 7: Lorum ipsum dolor sit amet <br>
			Top Line 8: Lorum ipsum dolor sit amet <br>
			Top Line 9: Lorum ipsum dolor sit amet <br>
			Top Line 10: Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Lorum ipsum dolor sit amet <br>
			Bottom Line 1: Lorum ipsum dolor sit amet <br>
			Bottom Line 2: Lorum ipsum dolor sit amet <br>
			Bottom Line 3: Lorum ipsum dolor sit amet <br>
			Bottom Line 4: Lorum ipsum dolor sit amet <br>
			Bottom Line 5: Lorum ipsum dolor sit amet <br>
			Bottom Line 6: Lorum ipsum dolor sit amet <br>
			Bottom Line 7: Lorum ipsum dolor sit amet <br>
			Bottom Line 8: Lorum ipsum dolor sit amet <br>
			Bottom Line 9: Lorum ipsum dolor sit amet <br>
			Bottom Line 10: Lorum ipsum dolor sit amet <br>
		</div>

		<div id="footer">
			Footer goes here...
		</div>
    </div>

</body>
</html>

The HTML & CSS all validate, but to get it working in IE6, you MUST have the comment above the DOCTYPE - which unfortunately puts IE6 into quirks mode (ah well - you can't win them all!).

If you want to change the height of your header, that's no problem, as long as the top padding on the body matches. You can even put it in EMs if you need it to scale.

The same goes for tihe width of the left nav, and the padding-left on the content.

You can do what you like inside the "content" div (multi columns, etc). If you want the footer to start level with the left of the content instead of the left of the page, move it from the "bodySection" div to the "content" div.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi

Dan, I assume you just have no Linux handy, otherwise you would test on them too. So I took a look for you :

Linux
=====
FireBird 0.6.1
FireFox 2.0.0.3
Konqueror 3.0.3
Konqueror 3.4.0
Mozilla Suite 1.0.1
Mozilla Suite 1.8b
Opera 9.01
Phoenix 0.5

Feherke.
 
Upvote 0 Downvote
Chance1234 said:
putting search google is not proffesional
Click to expand...
Personally, I don't think that's true. In the context of Vragabond's answer, he pointed out that what you wanted could be acheived by using the CSS of "position:fixed". The reason that google was then pointed out to you is that some older browsers don't support this method, and as there are mutliple workarounds for this, reading up on these and understanding why and how they work should be part of your solution. I'm sure Vragabond could have pasted links to the top 5 results from google and you would have found them useful, but it was less time consuming for him to post the link to google where you could find these yourself.

I admitted i have been on the great copy paste trail
Click to expand...
That's fine but I think you also should try to understand the solutions that you find. It may be that you are using a technology that you are not familiar with but I'm sure you will agree that it's much more beneficial to understand how things work rather than just copy and paste an answer into your work without actually knowing how/why it works. I really don't mean this to sound rude but your question (to me anyway) didn't appear to have any "depth" to it. It read as though you hadn't researched CSS and had just copy/pasted some code and it didn't work as you wanted. I'm sure you'll see this type of behaviour in the forums you frequent and I'm also sure you will often take the approach of trying to get the poster to do the research themselves. I'm sure that Vragabond's reply was just written with that intention.

As for the solution to your problem, Dan has shown you an excellent example. You could have also looked in the FAQ's which contain another example: faq215-6195


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244.
 
Upvote 0 Downvote
> my new second question is what values
> am im using incorrect ?

Well -- this is what the CSS validator at W3C says about it . . . Exhibit C1234.
 
Upvote 0 Downvote
> Surely it would be easier just to detail the 1
> wrong line rather than messing about with images?

How true. I thought it would be a doddle to showcase the W3C validator, but it turned into a nightmare.

"It seemed like a good idea at the time." -- Captain Ahab.
 
Upvote 0 Downvote
> Indeed - given that that final image bears no resemblance to any of the CSS posted here!

And yet the validator claims to have read the file I put 1234's original code into. Most peculiar.
 
Upvote 0 Downvote
Chance,

background should be background-color.

As for the layout you're looking for, I wish I had something I could just give you. I've been learning CSS and web design in the last few months and believe me it is a royal pain in the neck.

IE does not honor the position:fixed value. Google has obviously figured its way around that in Gmail (ala their "Update Conversation" link in the lower right of the browser window), but off the top of my head I have no clue how they do it.

Getting CSS to work right in all major browsers is sometimes a gigantic nightmare to the person who just wants to toss off a web page and not spend six months becoming a web development guru. Honestly, searching Google for a done layout to just copy and paste from is likely your best bet in this case.

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

Cum catapultae proscriptae erunt tum soli proscript catapultas habebunt.
 
Upvote 0 Downvote
background should be background-color
Click to expand...

Either usage is acceptable. One is simply shorthand for specifying one or more background properties.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Lets Code
  • Locked
  • Question Question
Inline element into a block level element
Replies
1
Views
541
spamjim
spamjim
PeDa
  • Locked
  • Question Question
Display table td's as block element on mobile phone
Replies
3
Views
1K
spamjim
spamjim
CoolBreeze007
  • Locked
  • Question Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
293
CoolBreeze007
CoolBreeze007
lupidol
  • Locked
  • Question Question
How do I place an element at the center of its' ancestor?
Replies
5
Views
497
datamasher
datamasher
Krus1972
  • Locked
  • Question Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
759
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top