alternatice to absolute [Archive]

shadowsword232

11-18-2004, 03:53 PM

i was wondering if there was an alternative to using absolute positioning because i'm making a page for my youth group but, i run my home computer at 1280 by 1024 and most of the people in my youth group are going to be running it on their default settings. Is there a way i can set up the site so that it works for everyone without running my computer on a really low res?

NogDog

11-18-2004, 03:59 PM

I'm sure there's a way, but without knowing what sort of page layout you want, it's hard to get specific. It may be as simple as using percentages for positions instead of pixels.

Ben Rogers

11-18-2004, 06:30 PM

Do you know what reverse engineering is? <http://www.bluerobot.com/web/layouts/> Check some of those out. ;)

EDIT - I sounded kinda rude, so... yeah.

shadowsword232

11-19-2004, 03:49 PM

as far as layout, i think what your asking is how is the page going to look. I have a banner running along the top, and running along the left hand side will be the link buttons. in the middle is gonna be some text and in some cases pictures

NogDog

11-19-2004, 04:00 PM

Here's an example of a semi-fluid layout I'm working on now for my personal site. The main text area in the middle is "fluid" while the navigation list on the left and the sidebar on the right have their widths set via em units, so they maintain their proportions if the user increases or decreases font size. (I still have work to do, including deciding on fonts and colors to use - I was just doing this as a proof of concept.) Hope it gives you some ideas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: verdana, arial, sans-serif;
}
.top {
background-color: teal;
color: white;
margin: 0;
padding: 0.5em 1em;
clear: both;
border-style: solid;
border-width: thin;
border-color: gray teal silver;
}
div.main {
margin: 0 14em 0 10em;
width: auto;
padding: 0 1em;
color: black;
overflow: scroll;
}
div.side {
float: right;
margin: 0;
padding: 1em;
width: 13em;
font-size: small;
color: teal;
}
p, li {
line-height: 1.3em;
}
ul.nav {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
li.nav {
margin: 2px;
}
a.nav {
border-style: solid;
border-width: thin;
border-color: silver gray gray silver;
display: block;
margin: 0;
background-color: teal;
color: white;
font-weight: bold;
padding: 3px 1em;
width: 7em;
text-align: center;
text-decoration: none;
}
a.nav:hover {
color: aqua;
border-sytle: solid;
border-width: thin;
border-color: gray silver silver gray;
}
.subtitle {
font-size: medium;
margin-left: 2em;
}
</style>
</head>
<body>
<div class=top>
<h1>Charles W. Reace, Jr.
<span class=subtitle>Software Tester, Musician, and Gamer</span></h1>
</div>
<ul class=nav>
<li class=nav><a class=nav href="#">Home</a></li>
<li class=nav><a class=nav href="#">S/W Testing</a></li>
<li class=nav><a class=nav href="#">Music</a></li>
<li class=nav><a class=nav href="#">Gaming</a></li>
<li class=nav><a class=nav href="#">Photos</a></li>
<li class=nav><a class=nav href="#">Miscellaneous</a></li>
<li class=nav><a class=nav href="#">Email Me</a></li>
</ul>
<div class=side>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class=main>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<p class=top>This is the footer</p>
</body>
</html>

shadowsword232

11-20-2004, 12:10 PM

thanx for the help