Gandalf14141 Posted April 2, 2015 Share Posted April 2, 2015 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. Finally on here to update that I have officially quit! It's been fun.[hide=Signature]R.I.P Billy Mays and <3 My Friend C.D.S 7/8/09 <360,816th to 99 Fletching 03/07/09|220,309th Person to be Able to Kill Dusties | 10 Year Cape on 12/20/14[/hide] Link to comment Share on other sites More sharing options...
Hedgehog Posted April 2, 2015 Share Posted April 2, 2015 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 Link to comment Share on other sites More sharing options...
DownToFletch Posted April 24, 2015 Share Posted April 24, 2015 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/ZYZmNbI 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. Link to comment Share on other sites More sharing options...
Hedgehog Posted April 24, 2015 Share Posted April 24, 2015 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. Link to comment Share on other sites More sharing options...
Antimated Posted July 5, 2016 Share Posted July 5, 2016 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/ Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now