 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
wAfFl3oOkIeZ
Joined: 07 Mar 2008
Posts: 7
|
 Posted: Fri Mar 07, 2008 8:43 pm Webpage Coding, Firefox/IE, got my own layout for my webpage |
 |
|
|
I use Firefox and Internet Explorer (mainly IE). I only recently made my own layout with help of a tutorial but they didn't mention how to code it at all and I am really lost. Apologises if things you say make no sense to me as I'm just slow to figure out things like coding (cause it's confusing). Okay so I guess I'm asking for help with coding it, I'm using freewebs but I can find another webhost if it is free and easier to use. I have a picture of my layout for you to see. Hope it isn't too big in the forums.  wAfFl3oOkIeZ
 |
|
ogsolution
Joined: 26 Dec 2007
Posts: 144
|
|
wAfFl3oOkIeZ
Joined: 07 Mar 2008
Posts: 7
|
| Posted: Sat Mar 08, 2008 2:13 am |
|
|
|
 Thanks so much for answering me. I'll check out the links you've given and I'll work on that... Just a quick question though (i'm having a blonde day) what do you mean when you say "skeleton template" and number 2? That's all for now, thank you tons even if it doesn't help me because I'm just glad you've responded, didn't expect to get help this quickly!
W!
PS: I used a tutorial from a friend to make this layout and I like it, since it suits me, love green, was going to put some reds in there somewhere but didn't think it suited my theme. HEHE!
EDIT: I'll want to ask if my banner would work cause it's basically just a normal banner but it's a gif animation where my avi appears occasionally. Can get a link for you later if you like... |
|
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8301
Location: Castle Pines North, CO USA
|
| Posted: Sat Mar 08, 2008 7:59 am |
|
|
|
Two column CSS layout - header and left menu help you with the beginning as well.
If you take a look at their CSS
| Code: |
/*
CSS-file for Strictly CSS three column layout 2006
http://www.strictlycss.com
Developed by Eivind Savio
*/
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
color: #000;
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color: #eee;
text-align: center; /*** Centers the design in old IE versions ***/
}
body {
font-size: 70%;
}
p {padding: 7px 0 7px 0;}
a {
color: #000099;
}
a:hover{
color: #0000FF;
text-decoration: none;
}
h1, h2, h3 {
font-weight: bold;
padding-bottom: 5px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h1 a, #header h2{
color: #fff;
}
.clear { clear: both; }
#mainContainer {
width: 760px;
margin: 0 auto; /*** Centers the design ***/
min-height: 300px;
background: #add8e6;
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {
margin-top: 50px; /*** Make some space for the header menu ***/
background: #000099;
padding: 10px;
height: 50px;
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
padding-left: 165px;
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
width: 595px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
}
* html .inner {
width: 100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
float: left;
width: 760px;
margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
float: right;
width: 600px;
background: #fff;
}
* html #content {
position: relative; /*** IE needs this ***/
}
.contentWrap{
padding: 5px;
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
#left {
float: left;
width: 150px;
background: #fcc;
min-height: 250px;
padding: 5px;
}
* html #left {
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
height: 250px;
}
#left ul {
list-style: none;
padding-bottom: 4px;
}
#left li {
padding-bottom: 2px;
}
/*************************
RIGHT COLUMN
**************************/
#right {
margin: -120px 0 0 -760px; /*** Moves the right column to the top of the page. This is now our top menu above the header ***/
float: left;
width: 750px;
background: #cfc;
padding: 5px;
height: 40px;
}
* html #right {
position: relative; /*** IE needs this. ***/
margin-top: -125px; /***Since IE is threating padding different than other browsers we need to move it a little bit more ***/
}
#right ul {
float: right;
list-style: none;
}
#right li {
display: inline; /*** Making the links horisontal aligned ***/
padding-right: 15px;
}
/**************************
FOOTER
**************************/
#footer {
width: 760px;
margin: 0 auto; /*** Since the footer is outside the #mainContainer we also need to center the footer ***/
text-align: center;
background-color: yellow;
}
|
you could possibly start with that. A lot I know but it is pretty simple once you break everything done. And you can see it all their HTML 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" xml:lang="en">
<head>
<title>Two column CSS layout - header and left menu | Strictly CSS </title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*
CSS-file for Strictly CSS three column layout 2006
http://www.strictlycss.com
Developed by Eivind Savio
*/
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
color: #000;
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color: #eee;
text-align: center; /*** Centers the design in old IE versions ***/
}
body {
font-size: 70%;
}
p {padding: 7px 0 7px 0;}
a {
color: #000099;
}
a:hover{
color: #0000FF;
text-decoration: none;
}
h1, h2, h3 {
font-weight: bold;
padding-bottom: 5px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h1 a, #header h2{
color: #fff;
}
.clear { clear: both; }
#mainContainer {
width: 760px;
margin: 0 auto; /*** Centers the design ***/
min-height: 300px;
background: #add8e6;
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {
margin-top: 50px; /*** Make some space for the header menu ***/
background: #000099;
padding: 10px;
height: 50px;
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
padding-left: 165px;
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
width: 595px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
}
* html .inner {
width: 100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
float: left;
width: 760px;
margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
float: right;
width: 600px;
background: #fff;
}
* html #content {
position: relative; /*** IE needs this ***/
}
.contentWrap{
padding: 5px;
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
#left {
float: left;
width: 150px;
background: #fcc;
min-height: 250px;
padding: 5px;
}
* html #left {
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
height: 250px;
}
#left ul {
list-style: none;
padding-bottom: 4px;
}
#left li {
padding-bottom: 2px;
}
/*************************
RIGHT COLUMN
**************************/
#right {
margin: -120px 0 0 -760px; /*** Moves the right column to the top of the page. This is now our top menu above the header ***/
float: left;
width: 750px;
background: #cfc;
padding: 5px;
height: 40px;
}
* html #right {
position: relative; /*** IE needs this. ***/
margin-top: -125px; /***Since IE is threating padding different than other browsers we need to move it a little bit more ***/
}
#right ul {
float: right;
list-style: none;
}
#right li {
display: inline; /*** Making the links horisontal aligned ***/
padding-right: 15px;
}
/**************************
FOOTER
**************************/
#footer {
width: 760px;
margin: 0 auto; /*** Since the footer is outside the #mainContainer we also need to center the footer ***/
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="header">
<h2>Two column CSS layout - header and left menu</h2>
</div>
<div class="outer">
<div class="inner">
<div class="float-wrap">
<div id="content">
<div class="contentWrap">
<h2>First in source</h2>
</div>
</div>
<!-- end centered div -->
<div id="left">
<h3>Second in source</h3>
</div>
<!-- end left div -->
<div class="clear"></div>
</div>
<div id="right">
<h3>Third in source</h3>
<ul>
<li><a href="#">Right menu 1</a></li>
<li><a href="#">Right menu 2</a></li>
<li><a href="#">Right menu 3</a></li>
</ul>
</div>
<!-- end right div -->
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer"><p>This is our footer</p>
</div>
</body>
</html> |
_________________
Corey
Payment Processing Forums | Mile High Merchant Accounts | Expression Web Blog |
|
wAfFl3oOkIeZ
Joined: 07 Mar 2008
Posts: 7
|
| Posted: Sat Mar 08, 2008 6:02 pm |
|
|
|
Here's the banner I want on it: between my header and the text. http://www.imageox.com/image/195612-WDesignsBa.gif
Oh and also a question, how should I slice my layout if it needs it?
| Corey Bryant wrote: |
Two column CSS layout - header and left menu help you with the beginning as well.
If you take a look at their CSS
| Code: |
/*
CSS-file for Strictly CSS three column layout 2006
http://www.strictlycss.com
Developed by Eivind Savio
*/
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
color: #000;
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color: #eee;
text-align: center; /*** Centers the design in old IE versions ***/
}
body {
font-size: 70%;
}
p {padding: 7px 0 7px 0;}
a {
color: #000099;
}
a:hover{
color: #0000FF;
text-decoration: none;
}
h1, h2, h3 {
font-weight: bold;
padding-bottom: 5px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h1 a, #header h2{
color: #fff;
}
.clear { clear: both; }
#mainContainer {
width: 760px;
margin: 0 auto; /*** Centers the design ***/
min-height: 300px;
background: #add8e6;
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {
margin-top: 50px; /*** Make some space for the header menu ***/
background: #000099;
padding: 10px;
height: 50px;
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
padding-left: 165px;
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
width: 595px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
}
* html .inner {
width: 100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
float: left;
width: 760px;
margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
float: right;
width: 600px;
background: #fff;
}
* html #content {
position: relative; /*** IE needs this ***/
}
.contentWrap{
padding: 5px;
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
#left {
float: left;
width: 150px;
background: #fcc;
min-height: 250px;
padding: 5px;
}
* html #left {
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
height: 250px;
}
#left ul {
list-style: none;
padding-bottom: 4px;
}
#left li {
padding-bottom: 2px;
}
/*************************
RIGHT COLUMN
**************************/
#right {
margin: -120px 0 0 -760px; /*** Moves the right column to the top of the page. This is now our top menu above the header ***/
float: left;
width: 750px;
background: #cfc;
padding: 5px;
height: 40px;
}
* html #right {
position: relative; /*** IE needs this. ***/
margin-top: -125px; /***Since IE is threating padding different than other browsers we need to move it a little bit more ***/
}
#right ul {
float: right;
list-style: none;
}
#right li {
display: inline; /*** Making the links horisontal aligned ***/
padding-right: 15px;
}
/**************************
FOOTER
**************************/
#footer {
width: 760px;
margin: 0 auto; /*** Since the footer is outside the #mainContainer we also need to center the footer ***/
text-align: center;
background-color: yellow;
}
|
you could possibly start with that. A lot I know but it is pretty simple once you break everything done. And you can see it all their HTML 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" xml:lang="en">
<head>
<title>Two column CSS layout - header and left menu | Strictly CSS </title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
/*
CSS-file for Strictly CSS three column layout 2006
http://www.strictlycss.com
Developed by Eivind Savio
*/
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
color: #000;
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color: #eee;
text-align: center; /*** Centers the design in old IE versions ***/
}
body {
font-size: 70%;
}
p {padding: 7px 0 7px 0;}
a {
color: #000099;
}
a:hover{
color: #0000FF;
text-decoration: none;
}
h1, h2, h3 {
font-weight: bold;
padding-bottom: 5px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h1 a, #header h2{
color: #fff;
}
.clear { clear: both; }
#mainContainer {
width: 760px;
margin: 0 auto; /*** Centers the design ***/
min-height: 300px;
background: #add8e6;
text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {
margin-top: 50px; /*** Make some space for the header menu ***/
background: #000099;
padding: 10px;
height: 50px;
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
padding-left: 165px;
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
width: 595px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
}
* html .inner {
width: 100%;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
float: left;
width: 760px;
margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
float: right;
width: 600px;
background: #fff;
}
* html #content {
position: relative; /*** IE needs this ***/
}
.contentWrap{
padding: 5px;
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
#left {
float: left;
width: 150px;
background: #fcc;
min-height: 250px;
padding: 5px;
}
* html #left {
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
height: 250px;
}
#left ul {
list-style: none;
padding-bottom: 4px;
}
#left li {
padding-bottom: 2px;
}
/*************************
RIGHT COLUMN
**************************/
#right {
margin: -120px 0 0 -760px; /*** Moves the right column to the top of the page. This is now our top menu above the header ***/
float: left;
width: 750px;
background: #cfc;
padding: 5px;
height: 40px;
}
* html #right {
position: relative; /*** IE needs this. ***/
margin-top: -125px; /***Since IE is threating padding different than other browsers we need to move it a little bit more ***/
}
#right ul {
float: right;
list-style: none;
}
#right li {
display: inline; /*** Making the links horisontal aligned ***/
padding-right: 15px;
}
/**************************
FOOTER
**************************/
#footer {
width: 760px;
margin: 0 auto; /*** Since the footer is outside the #mainContainer we also need to center the footer ***/
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="header">
<h2>Two column CSS layout - header and left menu</h2>
</div>
<div class="outer">
<div class="inner">
<div class="float-wrap">
<div id="content">
<div class="contentWrap">
<h2>First in source</h2>
</div>
</div>
<!-- end centered div -->
<div id="left">
<h3>Second in source</h3>
</div>
<!-- end left div -->
<div class="clear"></div>
</div>
<div id="right">
<h3>Third in source</h3>
<ul>
<li><a href="#">Right menu 1</a></li>
<li><a href="#">Right menu 2</a></li>
<li><a href="#">Right menu 3</a></li>
</ul>
</div>
<!-- end right div -->
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer"><p>This is our footer</p>
</div>
</body>
</html> |
_________________
Corey
Payment Processing Forums | Mile High Merchant Accounts | Expression Web Blog |
So would I just get rid of the RIGHT COLUMN if i only want basically a layout similar to the picture i showed above with just two MAIN columns, such as how i want my header, body and footer all basically under the same side (middle/right) and my left bar on the side to be a navigation menu type thing... Also how would I go about making a forum similar to this on my website so that when people click the word forum on the side it takes them to a new page with a forum close in looks to this one? W! |
|
ogsolution
Joined: 26 Dec 2007
Posts: 144
|
| Posted: Sun Mar 09, 2008 1:42 am |
|
|
|
@Corey
Thanks for sharing www.strictlycss.com
@wAfFl3oOkIeZ
Found this slicing tutorial for you Here, assuming you are using Photoshop.
What I mean by skeleton template is to setup a page that you can reuse for all your other pages (like the product, tutorial, about, etc...) because you know a lot of the page layout is going to stay the same (like the top header and left navigation). If you have this skeleton page, you just need to change the contents in the main column (white portion in your image).
As for the layout question that you have. I would start out thinking that you have 3 rows(header, middle, footer). Then within the middle row, you have 2 sections, left column and right column.
As for setting up forum, I've never setup a forum before but I know a lot of web hosts out there provide easy to setup forums like PHPBB.
Enjoy!!! |
|
wAfFl3oOkIeZ
Joined: 07 Mar 2008
Posts: 7
|
| Posted: Sun Mar 09, 2008 2:47 am |
|
|
|
| ogsolution wrote: |
@Corey
Thanks for sharing www.strictlycss.com
@wAfFl3oOkIeZ
Found this slicing tutorial for you Here, assuming you are using Photoshop.
What I mean by skeleton template is to setup a page that you can reuse for all your other pages (like the product, tutorial, about, etc...) because you know a lot of the page layout is going to stay the same (like the top header and left navigation). If you have this skeleton page, you just need to change the contents in the main column (white portion in your image).
As for the layout question that you have. I would start out thinking that you have 3 rows(header, middle, footer). Then within the middle row, you have 2 sections, left column and right column.
As for setting up forum, I've never setup a forum before but I know a lot of web hosts out there provide easy to setup forums like PHPBB.
Enjoy!!! |
Thanks for the help, I'll check out the slicing link later. I don't use Photoshop but it shouldn't be too difficult for me to convert it into GIMP, if it is I'll ask around with my friends who are better at doing the converting and I'll do it later, dead tired. I'll read this again later and clarify W!
PS: Thanks again to everyone for the help...
Edit:Forget to mention I have been playing around with other sizes and other "designs"/layouts... Will get a link later too tired to do so now... Please help? >>> Okay I was wondering is it possible to make like hit-counters but only visible for the site owner. Cause I mean I like knowing whats going on with my pages and such (seeing if people visit) but I don't like knowing that people can see a gross counter think it puts any form of "professionalism" out the window...  Helpsies?
W! |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
