patternhtmlMinor
How would you better organize/code this basic HTML and CSS?
Viewed 0 times
thisyoucssandorganizebetterwouldhowcodehtml
Problem
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:
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, 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;
http://www.jacobweyer.com
This is the result of the code so far:
Alpha Tau Omega | Theta Omega
Alpha Tau Omega
Theta Omega-->
Home
Rush
History
Alumni
Calendar
Media
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, 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;
Solution
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...
CSS
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...
Alpha Tau Omega | Theta Omega
Alpha Tau Omega Theta Omega-->
Home
Rush
History
Alumni
Calendar
Media
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, 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;
}Code Snippets
<!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>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, 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;
}Context
StackExchange Code Review Q#40407, answer score: 6
Revisions (0)
No revisions yet.