Jump to content
Sign in to follow this  
Gandalf14141

HTML5/CSS Question

Recommended Posts

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]

 

312icth.png

[/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.


Finally on here to update that I have officially quit! It's been fun.
[hide=Signature]
Gandalf14141.png
R.I.P Billy Mays and <3 My Friend C.D.S 7/8/09 <3
60,816th to 99 Fletching 03/07/09|220,309th Person to be Able to Kill Dusties 10 Year Cape on 12/20/14[/hide]

grammar2gr8dx.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.


All_My_Love.png Bun_Dem.png


 


max.png 50.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.