Find solution
How do I make a background image full page with CSS?

Is it common to be much more comfortable with HTML rather than CSS?

  • I am noticing that I am much faster and way more comfortable with HTML. Is this common or is it usually the opposite? I am by no means a designer, I understand the syntax of CSS, but can not make a page that looks any way "viable". I would have to say my best stylesheet is the one on http://kylesnav.com. Are there any industry-standard resets I should use? I get that I am not going to get anything to fancy without some photoshopping and such, but I just need to get the design concept down. I look at my HTML and it looks beautiful, I look at the CSS and it's good but the page doesn't look good. Should I use Blueprint or will it disrupt the learning curve? (Makes site organization much easier.) Feel free to comment and suggest on the stylings of http://kylesnav.com, my HTML organization has come a long way from then. IE excessive div's and Id's for things that could use a sub style (making a ID for something when I could have just done #x x: ;). But again let me know. thanks :) My new HTML mockups look like: <!DOCTYPE html> <head> <title>Test Blog</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <hgroup id="title"> <h1>Test Blog</h1> <h2>test blog description...</h2> </hgroup> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> <br> <div id="posts"> <article class="post"> <section class="header"> <h1>Blog Post</h1> <h2>Blog Subtitle</h1> </section> <section class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rutrum magna. Maecenas ac orci ac justo dignissim fermentum. Nam sit amet sem ac est rutrum fermentum a ac est. Pellentesque non quam dui. Aliquam ligula eros, dictum eget suscipit non, gravida a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rutrum magna. Maecenas ac orci ac justo dignissim fermentum. Nam sit amet sem ac est rutrum fermentum a ac est. Pellentesque non quam dui. Aliquam ligula eros, dictum eget suscipit non, gravida a ante. </p> </section> <section class="footer"> <p>Date: January 1, 2012</p> </section> </article> <article class="post"> <section class="header"> <h1>Blog Post</h1> <h2>Blog Subtitle</h1> </section> <section class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rutrum magna. Maecenas ac orci ac justo dignissim fermentum. Nam sit amet sem ac est rutrum fermentum a ac est. Pellentesque non quam dui. Aliquam ligula eros, dictum eget suscipit non, gravida a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rutrum magna. Maecenas ac orci ac justo dignissim fermentum. Nam sit amet sem ac est rutrum fermentum a ac est. Pellentesque non quam dui. Aliquam ligula eros, dictum eget suscipit non, gravida a ante. </p> </section> <section class="footer"> <p>Date: January 1, 2012</p> </section> </article> <article class="post"> <section class="header"> <h1>Blog Post</h1> <h2>Blog Subtitle</h1> </section> <section class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rutrum magna. Maecenas ac orci ac justo dignissim fermentum. Nam sit amet sem ac est rutrum fermentum a ac est. Pellentesque non quam dui. Aliquam ligula eros, dictum eget suscipit non, gravida a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rutrum magna. Maecenas ac orci ac justo dignissim fermentum. Nam sit amet sem ac est rutrum fermentum a ac est. Pellentesque non quam dui. Aliquam ligula eros, dictum eget suscipit non, gravida a ante. </p> </section> <section class="footer"> <p>Date: January 1, 2012</p> </section> </article> </div> <div id="sidebar"> <h1>Blogroll</h1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> <div id="pagefooter"> <p>This is a Kyle Snavely production and sample.</p> </div> </div><!-- "wrapper" --> </body> </html> My current CSS styles (mind excessive/unnecessary ID's): /******************** Page ********************/ body { background-color: black; background-image:url('background.jpg'); background-attachment:fixed; background-position:top; } #wrapper { margin:0 auto; } /******************** Body ********************/ /* header */ #header { width:700; text-align:right; background-color:transparent; padding-right:25px; padding-bottom:25px; margin-bottom:100; float:top; } #maintitle { color:black; font-style:italic; font-size:100px; font-weight:oblique; padding:0; margin:0; } #mainsubtitle { font-weight:bold; font-size:24px; font-style:italic; padding:0; margin:0; } /* navbar */ #navbar { width:700px; height:30px; padding-top:5px; padding-bottom:40px; background-color:transparent; margin:0px auto; } #navbar a:link { color:white; font-size:1.8em; font-style:italic; font-weight:bold; text-decoration:none; }     #navbar a:visited { color:white; font-size:2em; font-style:italic; font-weight:bold; text-decoration:none; } #navbar a:hover { color:black; font-size:2.2em; font-style:italic; font-weight:bold; text-decoration:none; } /* body */ .textpost { border:solid 1px black; margin-left:25px; margin-bottom:25px; background-color:white; background-image:url('wallpaper.jpeg'); background-position:center; background-attachment:fixed; width:250px; float:left; padding-left:15px; padding-right:15px; height:250px; } .textpost2 { border:solid 1px black; margin-left:25px; margin-bottom:25px; background-color:white; background-image:url('wallpaper.jpeg'); background-position:center; background-attachment:fixed; width:556px; float:left; padding-left:15px; padding-right:15px; height:250px; } .tpheader { text-align:right; top-padding:0px; top-margin:0px; } .tpheadertxt { padding-top:5px; padding-bottom:5px; padding-right:5px; padding-left:7px; margin:0; font-style:italic; font-weight:bold; font-size:2em; color: red; float:right; } .tptext { font-family:helvetica, arial, sans-serif; font-size:.8em; color:black; }

  • Answer:

    HTML is generally a bit easier since it's "just" setting your content in a semantically correct order, while CSS is all about visuals, that's why it feels harder if you don't do design on a daily basis. It gets way easier once you understand basics of layout theory, what a 'baseline grid' is and so on. Using resets and grids is a matter of choice, but since you're learning, I would recommend understanding how they work before you use them. I personally decided not to use reset stylesheets in my future projects, but rather use something like normalize.css to level the playing field for the browsers without losing visual part (as in - bigger font and so on). As for your own code, you use some semantic elements incorrectly - for example why use section class="footer", when you could just use footer element instead? Also, splitting articles into HTML5 sections is discouraged in the spec - you should probably read up on how to use the element properly at HTML5 Doctor - http://html5doctor.com/the-section-element/

Quora Visit the source

Was this solution helpful to you?

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.