Menu
Community /Pin to ProfileBookmark
@NogDogNov 18.2004 — #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. @NogDogNov 19.2004 — #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:
alternatice to absolute
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?
Sign in
to post a comment5 Comments(s) ↴
0
@NogDogNov 18.2004 — #0
@NogDogNov 19.2004 — #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:<i>
</i><!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>