|
|||||||||
|
|||||||||
|
|||||||||
 |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
Ajax Application Generator Generate database and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!
|
|
#1
July 31st, 2003, 07:06 PM
|
|||
|
|||
CSS positioning - from fixed to fluid
I designed a site using absolute properties for each of the positioned elements (I hope I'm using the correct terminology). I'd like to be able to get the entire layout to center horizontally in the browser window. Can this be done at this stage? If so, what's the best way to go about it?
I'm still working through the CSS learning curve with regard to positioning. Please find code attached as a txt file - sorry if it's lengthy - I coded the CSS inline. Look forward to all and any suggestions. Thanks - Robsta 
|
|
#3
July 31st, 2003, 09:44 PM
|
|||
|
|||
|
You might find these links helpful...
Hi Stumpy -
Here are some sites that I stumbled across - you might find them helpful. http://www.westciv.com http://bluerobot.com You'll find valuable info for constructing a site from scratch using CSS positioning. I'm still looking for answers on how to fix the site I already created (it that's possible). Robsta -
|
|
#4
July 31st, 2003, 09:58 PM
|
||||
|
||||
|
Ahh - of course. I wasn't thinking.
What's the problem you are having? Altering an existing site is really no different to creating a new one. btw - inline styles means that the styles are applied directly the DIV or span. e.g. <div style="foo: bar;">test</div>. Your file contains an "embedded stylesheet".
|
|
#5
July 31st, 2003, 10:44 PM
|
|||
|
|||
|
Please feel free to take a look at the .txt file I attached - it contains the embedded style sheet - thanks for the terminology correction.
I'd like to get the existing page design to center horizontally in the browser window - no matter the browser size. In other words, allow for a white border (margin) that will expand/contract so that the existing design centers itself on the page. Is this doable in CSS with my existing design? If you'd like to see the page, here's the link All the best, Robsta
|
|
#6
July 31st, 2003, 10:50 PM
|
||||
|
||||
|
It sure is possible - did u read the article on the blue robot re: centering your content?
http://bluerobot.com/web/css/center2.html http://bluerobot.com/web/css/center1.html Basically, put all your content inside a div, then set the div as per the article above.
|
|
#7
July 31st, 2003, 11:47 PM
|
|||
|
|||
|
Hey Stumpy!
I did, but I'm not sure I understand it... yet. I'm not seeing it - there's a mental block.
Can you explain further? Is this kinda like nesting in tables? Would you mind illustrating with a snippet of real-life code? Sorry for the lack of understanding! Robsta 
|
|
#8
August 1st, 2003, 12:25 AM
|
||||
|
||||
|
Sure - Try this.
Code:
body {
margin: 0px;
padding : 0px;
text-align:center;
}
#Content {
width:500px;
text-align : left;
}
<div id="Content">Your content here.</div>
|
|
#9
August 1st, 2003, 10:24 AM
|
|||
|
|||
|
Thanks!
Hi there -
Thanks for the code snippet. I think I understand... I'll give it a try later when I get an opportunity and get back to you with some feedback. You've been most helpful. All the best, Robsta
|
|
#10
August 1st, 2003, 08:02 PM
|
|||
|
|||
|
Still figuring it out
Hey Stumpy -
I tried implementing the code snippet you wrote me - I couldn't get it to work. I'm not getting it - this reminds me horribly of my struggles with algebra as a child - just leave me in a corner with some crayons and a pad of paper. I'm probably not placing the <div></div> tags in the right place. I put the opening tag below the <body> tag, and the closing </div> above the </body> tag. I'm not doing something right - I need to spend some time working on it. In the meantime, someone at another forum came up with a similar solution - he got it to work, not me. If you're interested in seeing what he did, please click here. Here's a link to the page in case you'd like to view the code. * CLICK * Thanks again for all your help. I'll let you know when I crack it. All the best - cheers! Robsta
|
|
#11
August 1st, 2003, 08:14 PM
|
||||
|
||||
|
Btw - correct me if I'm wrong, but aren't you trying to centre your content? If so, this is not called fluid design. It's normal fixed width design, centered :P
Fluid refers to the content container width shrinking and growing depending on the uers browser width.
|
|
#12
August 1st, 2003, 09:46 PM
|
|||
|
|||
|
Ulimately, yes.
Hi -
Yes, I'd like to create a page with one or more fluid elements - isn't a background element that expands to fit the browser window in a larger monitor a fluid element? Regarding my existing design, it wasn't designed with fluid in mind, so I only wanted it centered. The homepage layout at Blue Robot's site is what I'd like to achieve next. - Robsta
|
|
#13
August 2nd, 2003, 01:16 PM
|
|||
|
|||
|
robsta,
Okay, try adding this to your "Content" code: margin: 0px auto; That will make your top and bottom margin set to 0, and your left/right margins auto (which will force it to center). Make sure you do this with your code (assuming you're using Stumpy's CSS): Code:
<html>
<head>
<title> My First CSS Positioning! </title>
</head>
<body>
<div id="Content">
This text should appear in the center of your browser!
</div>
</body>
</html>
Let me know if this helps... Also, would you mind posting your code so we can take a look at it. Btw, what browser and version are you testing this in?
__________________
____________________________________________ Developer Shed Weekly Writer | DevArticles Forum Moderator Build Your Own KlipFolio Klip With PHP FrankManno.com - Under Construction Design Interactive Group - Under Construction
|
|
#14
August 2nd, 2003, 04:22 PM
|
|||
|
|||
|
Thanks for the code
Hey Frankie!
Thanks for the code - I'm working on a graphics project for someone today so I might not get to this til later. I'll get back to you with the results - if it works, I'll post it to my site so you can see it in action. I attached the code as a .txt document in my initial post (top of page). If you'd like to visit the web site hosting the page, please click *HERE* I'm viewing it on NS7 (yes, I actually like this maligned browser) and IE5 on a Mac running OS9.1. If it works, I'll swing by Kinkos and see how it performs on their PCs. Also, thanks Stumpy for the terminology corrections - I used "fluid", for want of a better word, to describe something that wasn't "static". What's the correct term for a background element that expands to fit any given wondow dimension? Much thanks! Robsta
|
|
#15
August 10th, 2003, 09:13 AM
|
|||
|
|||
|
Quote:
it's called a liquid design.
|
|
#16
August 12th, 2003, 06:00 PM
|
|||
|
|||
|
Hi Stumpy and Frankie -
I had some time today to work on the page centering code you gave me. I still can't get it to work. I copied the snippet above and it doesn't center??? I tried Frankie's simple layout - it no center. What am I doing wrong??? In the meantime I was able to get code from another source and centered the text. The code is as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Centering Code</title> <style type="text/css"> body { background-color: #ffffff; margin:0px; padding:5px; } #content { position: absolute; left: 50%; width: 760px; height: 380px; margin-left:-380px; } #shape { position: absolute; top: 100px; left: 0px; width: 760px; height: 198px; z-index: 1; background-color: #ffffff; text-align: center; } </style> </head> <body> <div id="content"> <div id="shape">Centered text goes here!</div> </div> </body> </html> All and any feedback appreciated. Thanks! Robsta p.s. testing it in NS7 and IE5 Mac at 800 x 600 Last edited by robsta : August 12th, 2003 at 06:03 PM.
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
