HTML5/CSS Question

[Gandalf14141]

Hello everyone, it's been awhile! Quick question for all of you. I'm taking an HTML5 class right now and I am in charnge of creating a web site for a student group at my university (all of the web pages got deleted)  and I have to start from scratch. I want the general layout to be something along these lines (it's what the old one was like) [hide]

 

[/hide]

 

Obviously those colors won't stay, but I want to be able to keep the color sceme going. I also want to be able to have my text stay in the purple section and my navigation bar on the left side. If anyone has any suggestions on a different layout, I'm all ears!

 

Thank you to everyone to decides to reply!

 

EDIT: I should probably mention that my question is how do I go about doing this? Is it all within my CSS file or would it be in the HTML?

Thanks again.

[Hedgehog]

Your HTML will look like this:
 

<header>
</header>
<section>
    <nav></nav>
    <main></main>
    <nav></nav>
</section>

That all goes within your body tag.

Your CSS is pretty straightforward. Your section element will be a flexbox, then just give the navs and main content a percentage width that looks right.

And, yes, CSS should be in a different file. You should actually have multiple CSS files that you use, one for each module, then you concatenate them for production, but working with one file is fine for now.

 

edit: http://codepen.io/meredithz/pen/ZYZmNb

[DownToFletch]

Your HTML will look like this:

 

<header>
</header>
<section>
    <nav></nav>
    <main></main>
    <nav></nav>
</section>

That all goes within your body tag.

 

Your CSS is pretty straightforward. Your section element will be a flexbox, then just give the navs and main content a percentage width that looks right.

 

And, yes, CSS should be in a different file. You should actually have multiple CSS files that you use, one for each module, then you concatenate them for production, but working with one file is fine for now.

 

edit: http://codepen.io/meredithz/pen/ZYZmNb

I mean, he could use inline CSS (not really recommended) or add all his styles in style tags at the top of the page in the head section... Personally the only reason I've found to have a separate style sheet is just to keep the document clean (shorter and easier to digest)

 

I've been working on a website for my team, with a similar layout. If you want to take a look let me know. I'm just giving him a basic skeleton with some examples and he can fill in the rest.

[Hedgehog]

You should keep your stylesheet in a separate file. If you add it in the document, it won't get cached and your average load times will be much higher. Plus you don't have to bullshit with your templater to get it to inject the file contents into every page.

[Antimated]

Maybe you could use the Holy grail method? This website provides an exaple of how to achieve a responsive website. Although I think this is a bit more complicated if you are just starting out.

Anyhow here is the link: https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/