Guides on how to go about building your page.

techguy · 20-04-2008 8:52pm #1

Hi,

I've just began my second web site assignment for college. I 've gone through all the css tutorials and have gotten the hang of it.

I'm looking to build a site with two styles and that are selected with javascript.

Is there any guides out there that will explain how to go about designing the page? I'm not looking for someone to hold my hand, it's just that there's loads of sites with step by step tutorials on how to do x y and z..but not much on how to tie it all together..

I've tried googling but i'm only getting the syntax turorials..

in the mean time i'll continue to google and explore..

Thanks,
Techguy..

Adam · 21-04-2008 6:00am

Googling for protocol on using seperate style sheets for different browsers may help you. It's more common, but basically the same principle. What are you stuck on, the js or the css??

techguy · 22-04-2008 9:25pm

OK well the style switcher isn't really a problem..

What I want to do is have a page and put he content in the middle, with a centered div right? If I want to move stuff around inside that div can I insert another div??

For two styles do I ut all the div stuff in the style sheet or into the html?

Adam · 22-04-2008 9:56pm

Well yes, in order to manipulate the page structure completely using the same content, you need to have all the contents of the page in relative divs, and then use your style sheets to arrange them seperately.

A simple example:

[html]
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="wrapper">

<div id="content_one">Here is div one</div>

<div id="content_two">Here is div two</div>

<div id="content_three">Here is div three</div>

<div id="content_four">Here is div four</div>

</div>

</body>
</html>
[/html]

[html]
<style>
/* LAYOUT ONE */

#wrapper {
margin: auto;
width: 800px;
height: 600px;
}

#content_one {
float: left;
background-color: red;
}

#content_two {
float: left;
background-color: blue;
}

#content_three {
float: left;
background-color: pink;
}

#content_four {
float: left;
background-color: green;
}

/* LAYOUT TWO */

#wrapper {
margin: auto;
width: 800px;
height: 600px;
}

#content_one {
position: absolute;
top: 10px;
left: 10px;
background-color: red;
}

#content_two {
position: absolute;
top: 10px;
left: 210px;
background-color: blue;
}

#content_three {
position: absolute;
top: 110px;
left: 10px;
background-color: pink;
}

#content_four {
position: absolute;
top: 110px;
left: 210px;
background-color: green;
}
</style>
[/html]

techguy · 22-04-2008 10:26pm

that looks great i'll build on that and have a look around on the various ways of positioning the divs..

Thanks Mirror!!

Adam · 22-04-2008 10:48pm

No problem, let me know if you get stuck!

techguy · 22-04-2008 11:28pm

Okay, well i'm stuck already... Please forgive me as i'm so frustrated at the moment, nothing will work because I haven' been practising in ages.. anyway, the following works in a html <head> tag but not in a css file.. Other styles work from an external file but not the body style..

External CSS file:

<style type=text/css>
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
</style>

In the html <head> section:

<link rel="stylesheet" type="text/css" href="test.css" />

This is not my code, I just took it from a site so I know it's correct, why won't it work??

Adam · 22-04-2008 11:35pm

You don't need the <style> tags in an external stylesheet. If that's not the case in your actual file, ensure the link to the stylesheet and the name of the stylesheet are the same i.e. test.css

techguy · 22-04-2008 11:42pm

Perfect, removed the <style> tags and it works.. Strange though because your code worked perfect with the <style> tags included in the files but when I inserted a body style that wouldn't work.. Ah well!

Thanks again, i'm sure i'll be back

Adam · 22-04-2008 11:51pm

I believe that would be to do with the lack of semi-colons in the code you used from the tutorial, though I'm not sure! Best of luck!

techguy · 26-04-2008 7:41pm

Okay, i've gotten the hand of CSS now but my javasript is a little bit rough still..

I hae a script now that will choose 1 of 2 styles and apply that syle to my page..

The only problem is that when I first load up the page it is raw with no styles because there is no cookie!

How do I have a default style on this page when it loads and have that choice overwritten if there is a cookie present??

Here is how I am selecting the style from the page:

<a href="javascript: createCookie('style','1','2'); window.location.reload();">Style 1</a>

in the header:

var StyleFile = "style" + readCookie('style') + ".css;
document.writeln('<link rel="stylesheet" type="text/css" href="' + StyleFile + '">');

I've tried various things like hardcoding style1.css in the header. That worked but when I selected style 2 things got messed up. Also tried to slect style1.css if readCookie() returned null.. That didn't work either but I think it might if I got the java right..

I'm just frustrated at this stage because my lack of knowledge of javascript is holding me back..

Any thaughts?? Thanks..

Adam · 26-04-2008 7:46pm

You could use a simple if else javascript statement. Google will reveal all as I wouldn't know the syntax off the top of my head.

techguy · 26-04-2008 8:29pm

That's I was saying at the end of the post but didn't exlpain too well. I'll google now..

Adam · 26-04-2008 8:32pm

oh yeah sorry, i just glanced over the last bit. that would be the way to go in my opinion, give us a look at the code if you can't get it.

Guides on how to go about building your page.

Comments