6
\$\begingroup\$

I'm curious to see what any of the more experienced programmers would do instead of methods I took as a learning tool. Any tips/tricks/fixes and reasoning is appreciated!!

http://www.jacobweyer.com

This is the result of the code so far:

<!DOCTYPE html>

<html>
<head>
<title>Alpha Tau Omega | Theta Omega</title>
<link rel="stylesheet" type="text/css" href="ATOStyle.css" />

</head>


<body>
<div id="header">
    <div id="innerheader">
        <div id="banner">
        </div>
        <div id="title">
            <!--<p>Alpha Tau Omega</p>
            <p>Theta Omega</p>-->
        </div>
        <div id="navbar">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="rush.html">Rush</a></li>
                <li><a href="history.html">History</a></li>
                <li><a href="alumni.html">Alumni</a></li>
                <li><a href="calendar.html">Calendar</a></li>
                <li><a href="media.html">Media</a></li>
            </ul>
        </div>
     </div>
</div>
<div id="pagecenter">
</div>
<div id="footer">
<div id="footercontent">
<div id="footerbanner">
</div>
</div>
</div>
</body>
</html>

CSS

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0px;
padding:0px;
border:0px;
outline:0px;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

#navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

#navbar ul li a {
text-decoration: none;
color: black;  
}
#navbar ul li a:hover {
color: white;
}

#navbar ul li {
font-family: Arial, Helvetica, sans-serif; 
text-decoration: none;
color: #000000;
display: inline-block;
width: 70px;
height: 40px;
margin: 10px;
}

#banner {
background:url(./pieces/banner.png);
position: absolute;
margin-left: 0px;
min-height: 193px;
min-width: 183px;
background-repeat: no-repeat
}

#title {
position: absolute;
background: url(./pieces/name.png);
margin-left: 190px;
min-height: 75px;
min-width: 285px;
}

#navbar {
position: relative;
top: 80px;
left: 210px;
margin-left: inherit;
}
#social ul li{
display: inline-block;
width: 35px;
height: 35px;
margin: 5px;
}
#social {
position: absolute;
float: left;
right: 180px;
top: -5px;
}
#social ul {
list-style-type: none;
}

#innerheader {
height: 139px;
width: 750px;
margin-right: auto;
margin-left: auto;
position: relative;
}

#header {
background:url(./pieces/headerBar.png);
position: static;    
width:100%;
height:139px;
padding:0;
border:0;
z-index: 10000;
}

#pagecenter {
position: static;
margin-right: auto;
margin-left: auto;
height: 50px;
width: 750px;
min-height: 1000px;
background:url(./pieces/mainBG.png);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
margin-top: -19px;
z-index:50
}
body {
width: 100%;
margin: 0px 0px 0px 0px;
background-color: #808080
}
#footer {
margin-top: 20px;
padding-top: 30px;
background: url(./pieces/footerbar.png);
height: 77px;
width: 100%;
margin-right: auto;
margin-left: auto;
clear: both;
bottom: 0px;
position: static;
}

#footerbanner {
background: url(./pieces/footerbanner.png);
position: absolute;
min-height: 95px;
min-width: 90px;
background-repeat: no-repeat;
margin-top: -30px;
}
\$\endgroup\$
1

6 Answers 6

Reset to default
6
\$\begingroup\$

A lot of this type of stuff is just personal style, or if you're working on a team, the layout is defined ahead of the project.

The use of classes vs id's is also personal. I've seen people say that they ALWAYS use classes. I've tried both classes and id's on many pages, and I find that I get into fewer problems with mostly classes, reserving id's for truly individual elements.

I've read that the stuff at the top of your CSS can slow things down quite a bit and may not be necessary in many cases.

I formatted the last two parts of your CSS a bit differently. I do that a lot with PHP, but have seen in recently in CSS, and I think it might work nicely in some situations.

But for fun...

<!DOCTYPE html>
<html>
<head>
  <title>Alpha Tau Omega | Theta Omega</title>
  <link rel="stylesheet" type="text/css" href="ATOStyle.css" />
</head>

<body>
<div id="header">
  <div id="innerheader">
    <div id="banner"></div>
       <div id="title"><!--<p>Alpha Tau Omega</p> <p>Theta Omega</p>--></div>
       <div id="navbar">
         <ul>
           <li><a href="index.html">Home</a></li>
           <li><a href="rush.html">Rush</a></li>
           <li><a href="history.html">History</a></li>
           <li><a href="alumni.html">Alumni</a></li>
           <li><a href="calendar.html">Calendar</a></li>
           <li><a href="media.html">Media</a></li>
         </ul>
       </div><!--end navbar-->
    </div><!--end banner-->
  </div><!--end  innerheader-->
</div><!--end header-->

<div id="pagecenter"></div>

<div id="footer">
  <div id="footercontent">
    <div id="footerbanner"></div>
  </div>
</div><!--end footer-->

</body>
</html>

CSS

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin: 0px;
  padding: 0px;
  border: 0px;
  outline: 0px;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
#navbar ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
#navbar ul li a {
  text-decoration: none;
  color: black;  
}
#navbar ul li a:hover {
  color: white;
}
#navbar ul li {
  font-family: Arial, Helvetica, sans-serif; 
  text-decoration: none;
  color: #000000;
  display: inline-block;
  width: 70px;
  height: 40px;
  margin: 10px;
}
#banner {
  background:url(./pieces/banner.png);
  position: absolute;
  margin-left: 0px;
  min-height: 193px;
  min-width: 183px;
  background-repeat: no-repeat
}

#title {
  position: absolute;
  background: url(./pieces/name.png);
  margin-left: 190px;
  min-height: 75px;
  min-width: 285px;
}
#navbar {
  position: relative;
  top: 80px;
  left: 210px;
  margin-left: inherit;
}
#social ul li{
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 5px;
}
#social {
  position: absolute;
  float: left;
  right: 180px;
  top: -5px;
}
#social ul {
  list-style-type: none;
}

#innerheader {
  height: 139px;
  width: 750px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

#header {
  background:url(./pieces/headerBar.png);
  position: static;    
  width:100%;
  height:139px;
  z-index: 10000;
}

#pagecenter {
  position: static;
  margin-right: auto;
  margin-left: auto;
  height: 50px;
  width: 750px;
  min-height: 1000px;
  background: url(./pieces/mainBG.png);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-top: -19px;
  z-index:50
}
body {
  width: 100%;
  margin: 0px 0px 0px 0px;
  background-color: #808080
}
#footer {
  margin-top:   20px;
  padding-top:  30px;
  background:   url(./pieces/footerbar.png);
  height:       77px;
  width:        100%;
  margin-right: auto;
  margin-left:  auto;
  clear:        both;
  bottom:       0px;
  position:     static;
}
#footerbanner {
  background:        url(./pieces/footerbanner.png);
  position:          absolute;
  min-height:        95px;
  min-width:         90px;
  background-repeat: no-repeat;
  margin-top:        -30px;
}
\$\endgroup\$
1
  • 1
    \$\begingroup\$ IDs identify an element, classes identify a type of element: several elements can have the same class, but an ID value must be unique to a single element. \$\endgroup\$
    – ChrisW
    Commented Jan 31, 2014 at 10:13
6
\$\begingroup\$

HTML:

  • With the HTML5 doctype being set, you don't need the type attribute on your link, style and script tags anymore. You can safely ommit them.
  • Just a note: It's possible to ommit the / on self-closing html tags like link or img as well.

  • You should add the meta charset and viewport tags. The first one ensures your site uses the correct character encoding and the second one is relevant for mobile devices.

    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • You're using an ID for everything. You may think these things will only occur once on my page and a ID is perfectly fine. In my opinion, it's not. There may be multiple header and footers on a page.

    Also an ID has a higher CSS specificity value and overwriting it with a class is almost impossible. I don't use ID's as styling hooks at all and completely rely on classes.

    Some of your ID names also have a bad naming. Your header is your site wide header, it should have a name like site-header or site-head. Otherwise it's not clear from your markup what you're actually looking at.

CSS:

  • I for my part would avoid these exzessive CSS resets. It just makes your work harder setting the necessary values for all those elements again. Removing the default margin and padding from some block-level elements is enough in almost all cases:

    h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
form, fieldset, legend,
table, th, td, caption,
hr {
    margin: 0;
    padding: 0;
}

  • If you're setting a property value to zero, you don't need to add the unit. Zero is zero. margin: 0; is enough easier to write

  • Selecting a list-item inside a list is unnecessary. A list-item is always part of a list, you usually only need #navbar li or #navbar a
  • Also (again opinionated) I intend the declarations inside a CSS rule (see above), because it's easier to distinct between the seperate blocks.
\$\endgroup\$
6
  • 1
    \$\begingroup\$ I disagree about omitting the / on self-closing tags as that wouldn't be valid XHTML. (And it's never wrong to have valid XHTML) \$\endgroup\$
    – Simon Forsberg
    Commented Jan 30, 2014 at 18:02
  • \$\begingroup\$ @Simon If one uses the HTML5 doctype, why would you care for you document to be valid __X__HTML? The meta charset rule isn't valid XHTML either. \$\endgroup\$
    – kleinfreund
    Commented Jan 30, 2014 at 18:08
  • \$\begingroup\$ I'm not a HTML-guy so I might be the wrong person to ask :) But I just want to answer that with: "Why wouldn't you?". To me, it's good practice to close your tags either way. \$\endgroup\$
    – Simon Forsberg
    Commented Jan 30, 2014 at 18:11
  • 2
    \$\begingroup\$ After reading up on the subject a bit, it seems like you're right. +1. I will still probably use <link ... /> though as that is also valid in HTML5, and to me it looks better :) \$\endgroup\$
    – Simon Forsberg
    Commented Jan 30, 2014 at 18:30
  • 2
    \$\begingroup\$ @Simon Valid XHTML is also valid HTML5. ;) \$\endgroup\$
    – kleinfreund
    Commented Jan 30, 2014 at 18:38
5
\$\begingroup\$

Your HTML is good. Your CSS is good. Once you start coding more you will find out the way you like to style your CSS and HTML and then other languages. However, if you're working with other people or for a company, then you all likely would agree on certain coding styles.

This is how I prefer to do my CSS.

It doesn't show exactly visually correct on here since the width is limited. But if you copy paste it to a full notepad, you will see a better visual of how it really is pretty organized.

The reset is just one line at the top.

Similiar items don't have any line spacing between them. Like navbar ul, li, li a, li a:hover.

If a elements styling is going to be wider than the notedpad view, then I just hit enter and start a new line. An example of this is #pagecenter.

The benefit to this coding style is that you don't have to scroll up and down so much.

I actually fit all your CSS on the screen, so I don't have to scroll up or down at all. I don't have to scroll right , since the only thing to the right is the reset.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

#navbar { position: relative;top: 80px;left: 210px; margin-left: inherit; }
#navbar ul { list-style-type: none; margin: 0px; padding: 0px; }
#navbar ul li { font-family: Arial, Helvetica, sans-serif; text-decoration: none; color: #000000; display: inline-block; width: 70px; height: 40px; margin: 10px; }
#navbar ul li a { text-decoration: none; color: black; }
#navbar ul li a:hover { color: white; }

#banner { background:url(./pieces/banner.png);position: absolute; margin-left: 0px; min-height: 193px; min-width: 183px; background-repeat: no-repeat; }

#title { position: absolute; background: url(./pieces/name.png); margin-left: 190px; min-height: 75px; min-width: 285px; }

#social { position: absolute; float: left; right: 180px; top: -5px; }
#social ul { list-style-type: none; }
#social ul li{ display: inline-block;width: 35px; height: 35px;margin: 5px; }

#innerheader { height: 139px; width: 750px; margin-right: auto; margin-left: auto; position: relative; }

#header { background:url(./pieces/headerBar.png); position: static; width:100%; height:139px; padding:0; border:0; z-index: 10000; }

#pagecenter {position: static; margin-right: auto; margin-left: auto; height: 50px; width: 750px; min-height: 1000px; 
                background:url(./pieces/mainBG.png); background-position: center; background-repeat: no-repeat; background-attachment: fixed;
                   margin-top: -19px; z-index:50; }

body { width: 100%;margin: 0px 0px 0px 0px;background-color: #808080}

#footer { margin-top: 20px; padding-top: 30px; background: url(./pieces/footerbar.png); height: 77px; width: 100%; margin-right: auto; margin-left: auto; 
            clear: both; bottom: 0px; position: static; }

#footerbanner { background: url(./pieces/footerbanner.png); position: absolute; min-height: 95px; min-width: 90px; background-repeat: no-repeat; margin-top: -30px; }
\$\endgroup\$
4
\$\begingroup\$

I don't care for all that whitespace myself. I prefer to leave empty divs on a single line like so:

<div id="footer"></div>

I put the closing tag on a separate line only where there is content, and in either case, of course, indent as appropriate for ease of reading.

You can reduce your CSS reset chunk by using a more universal selector. Instead of this:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0px;
padding:0px;
border:0px;
outline:0px;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

Try this with your selectors, and put all your CSS on one line per declaration:

html, html * { padding:0px; border:0px; margin:0px; outline:0px; font-size:100%; vertical-align:baseline; background:transparent; }
\$\endgroup\$
2
  • \$\begingroup\$ It is also a good idea to have a set order in which you do your stylesheet declarations, too. That way you always know where to look to find the exact style you wish to modify. I generally start with the display and positioning, then the box model elements from width/height moving outward (padding, border, margin), then font declarations if any, then color, then background, roughly. \$\endgroup\$
    – code-sushi
    Commented Jan 30, 2014 at 0:57
  • \$\begingroup\$ Since writing the above comment I have shifted my approach to alphabetizing the style attributes instead. Much easier and universal than having a private organization scheme. Just FYI. \$\endgroup\$
    – code-sushi
    Commented Apr 26, 2018 at 17:28
4
\$\begingroup\$

There's an error message if check this against the The W3C Markup Validation Service. It suggests you add an element such as,

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

Or, for HTML5, simply:

<meta charset="utf-8">

Maybe this particular 'error' isn't an important error at this stage.

But I did want to mention it because I want you to know that http://validator.w3.org/ exists -- I recommend you use this to 'validate' your finished HTML before you publish it.

\$\endgroup\$
2
  • \$\begingroup\$ @kleinfreund That looks like cleaner syntax than the <meta> element which I suggested. In my answer I mostly wanted to tell the OP that the W3C validator exists. \$\endgroup\$
    – ChrisW
    Commented Jan 30, 2014 at 19:22
  • \$\begingroup\$ The charset meta tag you suggested is the one for XHTML and/or HTML4. HTML5 uses the shorter syntax. Validating an HTML document to check for issues is always a good idea, especially if one is new to this stuff. \$\endgroup\$
    – kleinfreund
    Commented Jan 30, 2014 at 19:24
-7
\$\begingroup\$

I see no problems with it. However, at the HTML section, try adding maybe 2 lines of blank space in between the all of the divs. An example lies below.

<div id="pagecenter">


</div>


<div id="footer">


<div id="footercontent">


<div id="footerbanner">


</div>


</div>


</div>


</body>


</html>

This could help your code look more clean, separate, and easier to maintain over time. I hope I helped!

\$\endgroup\$
4
  • 4
    \$\begingroup\$ For me this feels like too much whitespace. \$\endgroup\$
    – syb0rg
    Commented Jan 29, 2014 at 22:49
  • \$\begingroup\$ For some it could be, but to be honest, if you wanted, you could leave it at one enter. \$\endgroup\$
    – pyrogoggles
    Commented Jan 29, 2014 at 22:51
  • \$\begingroup\$ Your sample should be at least indented ? \$\endgroup\$
    – konijn
    Commented Jan 30, 2014 at 3:40
  • \$\begingroup\$ konjin, I was going to do it but I thought that OP would do that already, I was just leaving some room for op. \$\endgroup\$
    – pyrogoggles
    Commented Jan 30, 2014 at 3:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.