» Site Navigation
1 members and 1,069 guests
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)
|
-
my new website
I just registered it but I thought I would share it with you and the corporate logo
Python Paradise
-
Re: my new website
This is still a big work in progress but what do you think so far all graphics are custom designed by me
-
Re: my new website
I think your on the right track.
That main header picture is sooo skewed, it almost makes me nauseous.
I would suggest fixing that.
Maybe a more readable font as well?
-
Re: my new website
sorry about the header it adjust to the size of your window so it might not come across right. I just adjusted it to a set size hopefully a little less nauseating LOL
-
Re: my new website
Hi.
Ditch the frames.
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 ;) )
This will give you the exact same layout with a much cleaner code, no funky scroll bars in the frames, etc.
save this as index.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css" >
<title>Python Paradise</title>
</head>
<body>
<div id="container" >
<div id="top" >
<h1>Header</h1>
</div>
<div id="leftnav" >
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content" >
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer" >
Footer
</div>
</div>
</body>
</html>
save this as styles.css
Code:
#container {
width:90%;
margin-top:10px;
margin-right:auto;
margin-bottom:10px;
margin-left:auto;
background-color:rgb(255, 255, 255);
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(221, 221, 221);
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:36em;
border-left:1px solid gray;
}
#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(221, 221, 221);
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;
}
Go with a clean, easy to read navigation. The red on black/brown does not mix well at all.
You should definitely read up on some HTML and CSS goodies over at w3schools.com.
-
Re: my new website
Damn Nate.....just took the damn training wheels right off the bike!!!!
LOL
-
Re: my new website
Quote:
Originally Posted by Patrick Long
Damn Nate.....just took the damn training wheels right off the bike!!!!
LOL
:D
I accept payment in the form of chocolate chip cookies :)
-
Re: my new website
Thanks for the code Ill play around with it but the main reason for the frames was to keep my Link and banner button in the same spot and only move the "subheading" section when the links are clicked. I dont speak german(i think that is the language) so can this be accomplished and how. Thanks for the advise again.
-
Re: my new website
Also what information should I include on the home page. I would like more then a sentence or two, but need something to give some background info on BP's and my history. etc What else should I include.
Oh and Nate here:
http://upload.wikimedia.org/wikipedi...ip_cookies.jpg
-
Re: my new website
Quote:
Originally Posted by derrabe
Thanks for the code Ill play around with it but the main reason for the frames was to keep my Link and banner button in the same spot and only move the "subheading" section when the links are clicked. I dont speak german(i think that is the language) so can this be accomplished and how. Thanks for the advise again.
That "Lorem Ipsum" is nothing but filler text - it isn't meant to be read.
I understand the want to keep your header banner visible at all times - I used to think the same way when I toyed with frames. But in reality, it isn't very pretty.
Go to Barnes & Noble and check out Sexy Web Design.
It helps a lot to see what kinds of trends are going on and how web sites have advanced over the years.
And - maybe the nail in the coffin... Frames Suck most of the time - published in 1996 :O
-
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.
|
