» Site Navigation
0 members and 1,889 guests
No Members online
Most users ever online was 47,180, 07-16-2025 at 05:30 PM.
» Today's Birthdays
» Stats
Members: 76,073
Threads: 249,220
Posts: 2,572,808
Top Poster: JLC (31,651)
|
-
Re: my new website
I had some time while I was at work and I wrote you a layout.
This won't auto set the width based on browser size but it will automatically set your navigation and content heights as well as keeping the banner in a fixed position, this lets you get away from the frames.
With CSS you can do alot of very cool things with many different layout, floating images, etc... You will need a set banner size for this example, but I can help you fill the rest or the width with a background images seamlessly if you like, or I can look more into adjusting with. This was just something quick while I'm at work.
Here's the main page:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Position Banner Layout</title>
<script type="text/javascript">
//This won't auto set the width based on browser size but it will automatically set your navigation and content heights as well as
//keeping the banner in a fixed position, this lets you get away from the frames. With CSS you can do alot of very cool things with
//many different layout, floating images, etc... You will need a set banner size for this example, but I can help you fill the rest
//or the width with a background images seamlessly if you like, or I can look more into adjusting with. This was just something
//quick while I'm at work.
function setHeights()
{
var navigationDiv = document.getElementById("navigation");
var contentDiv = document.getElementById("content");
var navigationHeight = navigationDiv.offsetHeight;
var contentHeight = contentDiv.offsetHeight;
if (navigationHeight > contentHeight)
{
contentDiv.style.height = (navigationHeight) + "px";
}
else
{
navigationDiv.style.height = (contentHeight - 2) + "px";
}
}
</script>
<link href="floating.css" rel="stylesheet" type="text/css" />
</head>
<body onload="setHeights()">
<div id="top"><img src="http://pythonparadise.com/ppbanner.jpg" width="1024" height="213" /></div>
<div id="wrapper">
<div id="navigation">Navigation Link 1<br />Navigation Link 2<br />Navigation Link 3<br />Navigation Link 4<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...</div>
<div id="content">Blah Blah... Content, Blah Blah...<br /> ...<br /> ...<br /> ...<br />...<br /> ...<br />...<br /> ...<br />
...<br />
...
<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...<br /> ...</div>
<div id="footer">Footer Information</div><br /><br />
</div>
</body>
</html>
and the CSS file:
Code:
@charset "utf-8";
/* CSS Document */
body {
background: #000;
color: #FFF;
text-align: center;
overflow: scroll;
}
#top {
position: fixed;
top: 0px;
left: 50%;
margin-left: -512px;
text-align: center;
width: 1024px;
height: 213px;
border: 1px solid #FFF;
z-index: 3;
}
#wrapper {
width: 1028px;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
#navigation {
position: relative;
float: left;
left: 2px;
top: 206px;
border: 1px solid #FFF;
width: 200px;
text-align: center;
z-index: 2;
}
#content {
position: relative;
top: 206px;
float: right;
border: 1px solid #FFF;
width: 823px;
text-align: center;
z-index: 2;
}
#footer {
position: relative;
top: 205px;
left: 2px;
width: 1024px;
border: 1px solid #FFF;
clear: both;
text-align: center;
z-index: 2;
}
You will need to add your navigation links and your content. Also you need to set your text color and formatting in the CSS file, I just used basic colors quickly. Let me know if you have any problems or need some more help.
-
Re: my new website
No offense, but Nates coding is much cleaner.
-
Re: my new website
...thats funny, I almost was going to register that, but I went with projectpython.com instead. - Nice domain :)
-
Re: my new website
Quote:
Originally Posted by Patrick Long
No offense, but Nates coding is much cleaner.
Quote:
Originally Posted by Nate
Hi.
I was tinkin around with a new program I found today called Flux. This is a layout they have already (so no, I did not program this..just giving credit where tis due ;) )
He copy and pasted, I wrote this in a hurry in 15 minutes from scratch, and btw, I do this for a living. They 2 do different things, mine does alot more, and it's pretty far from unclean.
-
Re: my new website
Easy buddy, didnt meant to get your knickers in a knot.
I read his post, I know he didnt do it from scratch...simma down.
-
Re: my new website
I am calm, I'm just wondering why someone comes in here and tells me basically my code that I took time out of my day to make for someone for free is crap compared to some code someone didn't even make. Especially considering the flow is the same, mine just has more.
So really, I'm not upset, just puzzled at the pointless comment.
And now to get back to the OP's thread, if you have any questions or need some help let me know.
-
Re: my new website
Just saying, I put both codes into Dreamweaver, and stated what I considered an opinion.
Puzzling I know.
-
Re: my new website
Quote:
Originally Posted by DustinB
I am calm, I'm just wondering why someone comes in here and tells me basically my code that I took time out of my day to make for someone for free is crap compared to some code someone didn't even make. Especially considering the flow is the same, mine just has more.
So really, I'm not upset, just puzzled at the pointless comment.
And now to get back to the OP's thread, if you have any questions or need some help let me know.
I wanted to say thank you for putting the time and effort into giving me a second option. I took a look at the layout and in most instances I would like the floating banner idea but unfortunately since it is kind of a large banner if I keep it on the page all the time, it takes away from viewing ability for the users on laptops or smaller screens. I have a request thought is there a way to make the side buttons float with the scrolling so users don't have to go all the way back to the top to change sections? If someone could just tell how to modify my existing css that would be awesome.
Code:
a img{border:none;}
#container {
width:90%;
margin-top:10px;
margin-right:auto;
margin-bottom:10px;
margin-left:auto;
background-color:rgb(0, 0, 0);
color:rgb(51, 51, 51);
line-height:130%;
border:1px solid gray;
}
#top {
padding-top:0.5em;
padding-right:0.5em;
padding-bottom:0.5em;
padding-left:0.5em;
background-color:rgb(0, 0, 0);
border-bottom:1px solid gray;
}
#top h1 {
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}
#leftnav {
float:left;
width:160px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:1em;
padding-right:1em;
padding-bottom:1em;
padding-left:1em;
}
#content {
margin-left:200px;
padding-top:1em;
padding-right:1em;
padding-bottom:1em;
padding-left:1em;
max-width:70em;
border-left:1px solid gray;
color: #FF0;
}
#footer {
clear:both;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0.5em;
padding-right:0.5em;
padding-bottom:0.5em;
padding-left:0.5em;
color:rgb(51, 51, 51);
background-color:rgb(0, 0, 0);
border-top:1px solid gray;
}
#leftnav p {
margin-top:0px;
margin-right:0px;
margin-bottom:1em;
margin-left:0px;
}
#content h2 {
margin-top:0px;
margin-right:0px;
margin-bottom:0.5em;
margin-left:0px;
color: #FF0;
}
-
Re: my new website
I misunderstood you on the fixed position, I thought you wanted the banner to stay in the same place. You could just make the image not so tall and add some code to keep the navigation in the same place.
Like in the example I gave:
Code:
#top {
position: fixed; /*This locks the Div in place*/
top: 0px; /*Ensures there is no space between the banner div and the top of the window*/
left: 50%;
margin-left: -512px;
text-align: center;
width: 1024px;
height: 213px;
border: 1px solid #FFF;
z-index: 3; /*Keeps the Banner on Top of Everything*/
}
So you would just do the same thing with the Navigation Div.
|
