css div percentages and loading content in specific divs

antonyx · #1 Dec 24th, 2005, 03:03

here is the code of my page and my style sheet.

page2.htm

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="mystyle2.css">
</head>
<body>

<div id="left">
</div>

<div id="middle">
</div>

<div id="bottom">
</div>

</body>

</html>

and the stylesheet

mystyle2.css

Code: Select all

body {
margin:0;
padding:0;
height:100%;
width:100%;
}

#left {
position:absolute;
left:0;
top:0;
padding:0;
width:25%;
height:100%;
color:#333;
background:#eaeaea;
border:0px solid #333;
}


#middle {
position: absolute;
top:0;
left:25%;
height:80%;
width:75%;
background:#666666;
}

#bottom {
position: absolute; 
bottom:0;
top:80%;  
left:25%; 
width:75%;
background:#000000; 
}

ok 3 questions..

my 'middle' div is where the main content of the page will load. is it possible to recreate a frame like system.. eg. the left and bottom divs remain on the page unmoving (like the old frameset way) and links can be opened in the 'middle' div with a scroll bar if needed just for that part of the page.
if this can be done.. opening pages within a certain div of the page, will this have any negative effects in terms of seo.. eg. will the links will be harder to read or frowned upon by search engines cos they arent bog standard href links..
lastly, i am using percentages at the moment to size everything on my page. this is because to my knowledge u will never know the exact size of the screen, so this approximation in percentages is the best i can do.. will this have negative effects for my users as they resize the page.. eg, will the content become distorted, overlap, move around, things like that, are percentages recommended or avoided when sizing your divs.

ok, well this is my first post, first day using css..
i learn quickly.. if anyone could assist me i would be most grateful

(useful)

muneepenee · #2 Dec 24th, 2005, 11:32

1. position:fixed
but sumtimes browsers dont implement it good.
& yu gotta set middel hite tu xxx pixels so it wont run over bottom.
2. seo...div gooder than frames.
3. % is the "reccommended" wae tu duit.

antonyx · #3 Dec 24th, 2005, 12:51

ok well if opening links in div classes does not affect the link value in terms of seo...

could someone please give me an example bit of code that opens a link in a css div..

like a href="page.htm" ...open_in="middle css div" or something like this..

thanks.

drd · #4 Dec 24th, 2005, 15:45

Yes your first decision is whether to make the webpage fixed width or fluid in width. Fluid is harder to implement as things move around.
Fixed is easier you simply aim for a total width of around 770px (takes into account the scrollbar at 800x600).
You could aim to support 640x480 but it will limit your space greatly and I havent seen a 14" monitor for a long time.

On this page is a layout which might help you: http://www.glish.com/css/7.asp
The left and right columns are fixed width and the centre expands.

Or if you want all fluid columns have a look here: http://www.glish.com/css/2.asp

Personally, I would stick to a fixed width design (see my site for an example) unless you have a LOT of text. If you don't have that much then you'll end up with very long lines of text and short paragraphs which isn't very nice!
It's good for a foum like this or maybe a news site, but even the BBC site is fixed width.

If you specify a div with a fixed height and overflow: scroll; in the css you will get a frames effect with just that div scrolling for the content.

position: fixed doesn't work in IE sadly. I think there is a hack to fix this as I have seen fixed divs in action of course, try a Google search on "position: fixed; hack" or something.

good luck!

EDIT: I've also found if all your divs add up to 100% of the screen, one of them can be "kicked" down below the others if you resize the screen. Making them add up to 99% instead of 100% fixed it for me when I made my fluid template which can be seen here: http://www.davereederdesign.com/fluidity/

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
search xml content for a specific word	karloff	PHP Forum	2	May 8th, 2008 18:46
Website Sizing with Percentages	trev21	Starting Out	3	Jan 17th, 2008 19:18
Problem with css content box made from divs and background images	weasel	Web Page Design	3	Aug 9th, 2007 22:48
Loading specific flash movies for specific pages	koonkle	Flash & Multimedia Forum	3	May 22nd, 2007 17:23
loading external content	CDT KM	Flash & Multimedia Forum	0	Mar 24th, 2006 09:56

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
css div percentages and loading content in specific divs