22 replies [Last post]
Strange_Paint
Offline
Regular
Last seen: 10 years 23 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

I have looked everywhere, but i cannot find how to do this.

www.halotrilogy.org
www.gamefaqs.com

Are a few of the site that use sidebars.

What are they? On halo trilogy, they are the green bars to the left and right of the content, same with gamefaqs but they are silverish.

So can someone please help with doing them?

Oh, and one more question, how do i know what the right size to make an image is?
because the guy that is photoshopping my head image wants to know what size to make it. I want the size about the size of the main image on halotrilogy.org.

Thanks in advance.

mpoveda
mpoveda's picture
Offline
Enthusiast
Costa Rica
Last seen: 7 years 27 weeks ago
Costa Rica
Timezone: GMT-6
Joined: 2007-06-22
Posts: 104
Points: 29

The size of the header image

The size of the header image depends on what size you want it to be, depends on the designer. That halotrilogy site is using 800px width * 158px height. When you say sidebar, do you mean a 2 column layout?

..."Many of my friends have moved away. They search in other places for happiness. Little do they know that there is nothing to be found out in the world to give you happiness for happiness does not originate from "out there"...

Strange_Paint
Offline
Regular
Last seen: 10 years 23 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

I guess it's a 3 column

I guess it's a 3 column layout?

Here, i'll post a pic.

http://img183.imageshack.us/img183/100/sidebarscg6.jpg

I was thinking adjusting the paremeter of the body area so it's to the left around 130px and to the right 130px, and then adding some padding and changing the color of the non body. Didn't work so now I'm really confused.

Triumph (not verified)
Anonymous's picture
Guru

The pic you posted shows a

The pic you posted shows a one column layout. :?

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:What are they? On halo

Quote:

What are they? On halo trilogy, they are the green bars to the left and right of the content, same with gamefaqs but they are silverish.

On trilogy the body is given a default colour green then a 4px dark green border has been applied left and right of the main content div.

On gamefaq the "silver borders" were an image about 5px height by about 900? wide on a grey body background. The image went from the grey to the fuzzy dark grey to white to fuzzy grey to grey again. This was then repeated down the page.

ETA:
As Triumph said - it's a 1 column layout (the centre bit) What you think are side bar columns is actually the background image.

Now there's some game image on the background on the live site.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Strange_Paint
Offline
Regular
Last seen: 10 years 23 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

Thanks for that man, i

Thanks for that man, i understand now but i still don't understand how to do it, - the body background color is green, but the main content div is not?

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Sorry, I didn't scroll down

Sorry, I didn't scroll down so I was just looking at the white box with the dark green borders.

body {
	background: #5c9436;
	margin: 0px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}

The white box is #c and it's css code is

#c {
	background: #fff;
	width: 798px;
	padding: 2px 2px 0 2px;
	margin-left: auto;
	margin-right: auto;
	border-left: 4px solid #406f20;
	border-right: 4px solid #406f20;
}

I haven't checked but beyond the white box it would seem as if they have just used the body background green as a background colour on all the other divs.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Actually, just had another

Actually, just had another look - this site is still being built and they've got some problems of their own. Methinks all that text down the bottom is supposed to go in the white box! Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Strange_Paint
Offline
Regular
Last seen: 10 years 23 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

I don't quite understand

I don't quite understand what you mean by the white box, does it relate to the sidebar things?

Strange_Paint
Offline
Regular
Last seen: 10 years 23 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

I don't quite understand

I don't quite understand what you mean by the white box, does it relate to the sidebar things?

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Okay they seem to have

Okay they seem to have closed/changed a few divs and the content in now where it's suposed to be.

The main layout - the thing in the middle with all the content - is sitting on a green background. If you seriously don't understand this you need to read and apply some tutorials before asking more questions.

Folks here usually recommend the CSS and HTML tutorials at www.htmldog.com

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Strange_Paint
Offline
Regular
Last seen: 10 years 23 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

I understand that, i have

I understand that, i have read through the CSS Tutorials in HTML dog, and it doesn't tell me how to make the sidebar things. I came across an example there which used the sidebars, but could not replicate it myself. This is why i came here.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

The code snippets I posted

The code snippets I posted above are taken directly from the halotrilogy site. That is how they have done it. Background colour on the body and borders on the #c div.

The code is not difficult and if you have read the tutorials you should be able to apply that knowledge to the code and understand what it is doing and try it on your own layout.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Strange_Paint
Offline
Regular
Last seen: 10 years 23 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

How do you view the CSS of a

How do you view the CSS of a page?

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I'm sorry but you don't seem

I'm sorry but you don't seem to have understood anything in this thread - least of all that the "sidebars" are NOT sidebars.

You have not posted your own attempt - if there is any - so I don't think I'm going to tell you how to rip off someone else's site!

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Strange_Paint
Offline
Regular
Last seen: 10 years 23 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

I have checked out the CSS

Nvm.

Strange_Paint
Offline
Regular
Last seen: 10 years 23 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

Smee wrote:I'm sorry but you

Smee wrote:

I'm sorry but you don't seem to have understood anything in this thread - least of all that the "sidebars" are NOT sidebars.

You have not posted your own attempt - if there is any - so I don't think I'm going to tell you how to rip off someone else's site!

Thankyou for giving it to me bluntly.

I had a look at the CSS of the site with CSS viewer, and i understand it soo much better now. The body IS the sidebars, borders are on the #C div (stands for content presumably) and the color of the #C div is changed, so simple. Cheers.

Strange_Paint
Offline
Regular
Last seen: 10 years 23 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

LOL my edit of their page

LOL my edit of their page didn't work out so well :/

<html>
<head>
<link rel="stylesheet" type="text/css" href="What.css"/>
<title> test site testing test</title>
</head>
<body>
<div id="content">
    <div id="banner"></div>
    <div id="nav">
        <a href="ddsdsdffdsfds/">Home</a>
        <a href="sfsfdsfdsfdfds/htv3/halo2/">Halo 2</a>
        <a href="http://www.halotrilogy.org/htv3/halo3/">sfsfdsfdsfd</a>
        <a href="sfsdffds">sfsfdsfdfds</a>
 
        <a href="sffdsdsfdsfdsffds">sdfdfsdfsfds</a>
        <a href="sfdfdsfds">ffdsdsfsdffdsr</a>
    </div>
 
 
THIS page is being tested 
THIS page is being tested         fffffsfsfsfddsdssddsdffsdfdsfdsfdsfdsfds
THIS page is being tested
 
THIS page is being tested
 
                                      THIS page is being tested   
THIS page is being tested
 
 
sffsdfd
THIS page is being tested
sfsdfds
 
THIS page is being tested
THIS page is being tested
 
THIS page is being tested
 
 
THIS page is being tested
 
THIS page is being tested
 
THIS page is being tested
 
THIS page is being tested
 
</div>
</body>
</html>

Then the CSS
 
#banner {
background-image: banner.jpg
height: 156;
width: 798;
display: block;
}
 
#nav {
 
background-color: black;
line-height: 15px;
text-align: center;
position: background-repeat: repeat x;
height: 15px;
width: 796px;
border: 1px solid #ccc;
margin: 2px 0 2px 0;
padding: 4x 0 4x 0;
display: block;
 
}
 
#content {
 
line-height: 15px;
height: 542px;
width: 798px;
border-right: 4px solid #ccc;
border-left: 4xpx solid #ccc;
padding: 2px 2px 0 2px;
display: block;
}
 
body {
background-color: #5C9436;
background: 0% 0%;
height: 2412px;
width: 1007px;
display: block;
 
}

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

You're entirely welcome

You're entirely welcome Smile

okaaay then...well done. At least you're trying something and by adding and removing things will find out what works and what doesn''t.

Unfortunately throwing together a website in 20 minutes can only be done by the professionals - and sometimes even they take 30 minutes Wink

Your first try with Charlie looks quite good and is nearly there. So let's start at the beginning...

You have a Doctype! Well done! If you just copied it in there and don't know what it's for or why you need it - you need to read the 'stickies' on Doctypes. Start with DOCTYPES ARE IMPORTANT. USE THEM. by ThePineappleHead in the Beginners Forum http://csscreator.com/node/18218

Switch to an HTML 4.01 Strict Doctype – it will cause less trouble in the long run. (See Hugo's Doctype Sticky in the How To forum http://csscreator.com/node/8878 for the reasons why.)

Validate your code at http://validator.w3.org/#validate-by-upload – it will help you to pick up errors. It's a good habit to validate constantly as you change code.

Having your CSS in the HTML file is fine for starters but you will eventually want a separate file and will need to learn how to do that. Leave it where it is for the moment.

When you've done that Smile If you care to do something else...just describe in words what the following code will create as you understand it. Believe me it's very relevant!

#contents
{
margin-top: 10px;
margin-bottom: 10px;
margin-right:auto;
margin-left:auto;
width: 600px;
padding: 10px;
background-color: #FFF;
color: #000;
}

PS – Just a word on specifying hex colours – they are #xxxxxx – you will see them specified with only 3 numbers. That's because they are read in pairs and if the pair is the same, the number's twin can be omitted –

i.e.
#FFFFFF is the same as #FFF
or
#33DD66 is the same as #3D6

#F0BBC4 cannot be shortened to #FBC

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Strange_Paint
Offline
Regular
Last seen: 10 years 23 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

Smee wrote:You're entirely

Smee wrote:

You're entirely welcome Smile

okaaay then...well done. At least you're trying something and by adding and removing things will find out what works and what doesn''t.

Unfortunately throwing together a website in 20 minutes can only be done by the professionals - and sometimes even they take 30 minutes Wink

Your first try with Charlie looks quite good and is nearly there. So let's start at the beginning...

You have a Doctype! Well done! If you just copied it in there and don't know what it's for or why you need it - you need to read the 'stickies' on Doctypes. Start with DOCTYPES ARE IMPORTANT. USE THEM. by ThePineappleHead in the Beginners Forum http://csscreator.com/node/18218

Switch to an HTML 4.01 Strict Doctype – it will cause less trouble in the long run. (See Hugo's Doctype Sticky in the How To forum http://csscreator.com/node/8878 for the reasons why.)

Validate your code at http://validator.w3.org/#validate-by-upload – it will help you to pick up errors. It's a good habit to validate constantly as you change code.

Having your CSS in the HTML file is fine for starters but you will eventually want a separate file and will need to learn how to do that. Leave it where it is for the moment.

When you've done that Smile If you care to do something else...just describe in words what the following code will create as you understand it. Believe me it's very relevant!

#contents
{
margin-top: 10px;
margin-bottom: 10px;
margin-right:auto;
margin-left:auto;
width: 600px;
padding: 10px;
background-color: #FFF;
color: #000;
}

PS – Just a word on specifying hex colours – they are #xxxxxx – you will see them specified with only 3 numbers. That's because they are read in pairs and if the pair is the same, the number's twin can be omitted –

i.e.
#FFFFFF is the same as #FFF
or
#33DD66 is the same as #3D6

#F0BBC4 cannot be shortened to #FBC

Margin-top: 10px will make it 10px from the topg of the bage, same with margin bottom but from the bottom of the page, margin-right: auto i don't know, but i will presume it's leaving the left and right margins for the browser to handle.

width will do exactly what it sais it's doing, make the width of the #contents div 600pixels.

padding: 10px will give it 10 pixels of padding on the left, right, top and bottom.

background-color speaks for itself, and color i'm not sure what it does. I understand what doctypes are, and before i posted this topic on this forum, i read through all of the w3schools HTML tutorial, and had a good look at the HTML Dog tutorial. I know i should have learned how to do it in the HTML dog tutorial, but i have read over it again and again and could not find how to.

As you can see, my attempt at making the sidebar things failed.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Good for you to have done

Smile Good for you to have done the tutorials before you got here then. It just seems as though there's a missing link so let's try to straighten it out.

You obviously understood the code snippet except for the margin:auto; but the guess was right. It takes the width:600px from the total width of the viewport (full screen size) and divides the rest and automagically puts it on either side
of this container called #contents.

margin also works just like padding in shorthand and the margins in the snippet can be expressed as margin: 10px auto; (first value is top & bottom, second value is right and left).

Color is the colour used for the text. You can also specify just background for the background-color: #whatever;

The original is here (but he missed the margin-bottom: 10px; which is actually in the CSS of this page).

Put a border: #006600 solid 4px; in #content div snippet and put background: #393; in the body ruleset and you should have "green sidebars".

Note: The demo page is using this #content where you are using #container. You'll probably find it easier to strip your content and container out for the moment and just see if this works for you .

:bigoops: No you're border will go all the way around, but you should be able to figure it out Wink

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Strange_Paint
Offline
Regular
Last seen: 10 years 23 weeks ago
Joined: 2008-09-29
Posts: 26
Points: 0

Hehe, this works

Hehe, this works Smile

<html>
<head>
<title> -Mozilla Firefox</title>
<head>
<style type="text/css">
 
#content {
width: 800px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
border: #006600 solid 4px;
background: white;
length: 1152px;
}
 
body {
background: #393;
}
</style>
</head>
<body>
<div id="content">
 
This is a default test page, DOS IT WORK? This is a default test page, DOS IT WORK? This is 
 
a default test page, DOS IT WORK? This is a default test page, DOS IT WORK? This is a 
 
default test page, DOS IT WORK? This is a default test page, DOS IT WORK? This is a default 
 
test page, DOS IT WORK? This is a default test page, DOS IT WORK? This is a default test 
 
page, DOS IT WORK? This is a default test page, DOS IT WORK? This is a default test page, 
 
DOS IT WORK?This is a default test page, DOS IT WORK? This is a default test page, DOS IT 
 
WORK? This is a default test page, DOS IT WORK? This is a default test page, DOS IT WORK? 
 
This is a default test page, DOS IT WORK? This is a default test page, DOS IT WORK?  This is 
 
a default test page, DOS IT WORK? This is a default test page, DOS IT WORK?This is a default 
 
test page, DOS IT WORK?This is a default test page, DOS IT WORK?This is a default test page, 
 
DOS IT WORK?This is a default test page, DOS IT WORK?This is a default test page, DOS IT 
 
WORK?This is a default test page, DOS IT WORK?This is a default test page, DOS IT WORK?This 
 
is a default test page, DOS IT WORK?This is a default test page, DOS IT WORK?
</div>
</body>
</html>

I tried adding a length, because, if you have a look at the outcome of that code, the content does not go down to the bottom of the page like it should. I still can't figure out how to do that.

Edit: height not length, silly me Smile

Last edit: Forgot to thank you, how can i make it up to you? Well i'll be sure to give you premium benefits on my new site that will be up in a few weeks!

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 21 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Of course it works - that

Of course it works - that was the idea Smile

Get that length out of there, there is no such term.

margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;

If the above can be written margin: 10px auto;
what does margin: 0 auto; do? (and no, it doesn't need the px if it's Innocent

The #content will only be as long as it needs to be to hold the content in this example. If you put all that guff about Charlie back in you'll see it stretch.

Where's the Doctype gone? Have you validated?
You could do a lot worse that read the tutorials on Max Design the grey and white example I gave you is the 3rd from the bottom.

Quote:

Last edit: Forgot to thank you, how can i make it up to you? Well i'll be sure to give you premium benefits on my new site that will be up in a few weeks!

Cheers! Come back and give us the link Smile

(and please stop bumping your thread)

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile