Meekah
01-25-2009, 05:24 PM
Hi everyone,
I'm trying to create a web page using HTML + CSS, specially for positioning elements.
However, I'm having some trouble when it comes to making it friendly for most screen-resolutions. I can only make it work on my 1440 x 900 res.
This is what I have so far (please don't make fun of my css, I'm just learning, so I used a web-template to guide me through it, so most of it is useless, unless for the files under my 6te.net account).
This is the index.hmtl:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://www.mikaevini.6te.net/style.css" type="text/css" charset="utf-8" />
</head>
<body>
<div id="wrapper">
<div id="body">
<div id="head"></div>
</div>
</div>
</body>
</html>
This is the CSS:
html, body, h1, h2, h3, h4 {
margin: 0px;
padding: 0px;
background: url(http://www.mikaevini.6te.net/bg.jpg) fixed
center
no-repeat
}
h1 img {
display: block;
}
img {
border: 0px;
}
a {
color: #FF7F00;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #FFA405;
text-decoration: underline;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: #0D0D0D;
text-align: center;
font: 12px arial, sans-serif;
color: #989898;
}
#wrapper {
text-align: left;
margin: auto;
width: 778px;
background: #181818;
}
#body {
position: relative;
margin-left: 4px;
}
#head {
position: absolute;
top: 154px;
left: 36px;
width: 270px;
height: 380px;
background: url(http://www.mikaevini.6te.net/nav.jpg) no-repeat;
}
#topnav {
position: absolute;
top: 41px;
left: 22px;
}
#topnav a {
font-weight: normal;
color: #989898;
}
#topnav a:hover {
color: white;
}
#left-box {
position: absolute;
top: 271px;
left: 4px;
width: 285px;
height: 333px;
background: #131212 url(file:///C|/Documents%20and%20Settings/Camila/Meus%20documentos/Shieldens/Teste%203/images/left_bg.jpg) repeat-x;
}
#left-box .inner {
padding: 20px 0px 0px 8px;
}
#left-box h2 {
margin: 10px 0px 0px 0px;
}
#left-box p.date {
font-weight: bold;
}
#left-box p {
margin: 3px 2.5em 1em 1.3em;
}
#nav {
position: absolute;
top: 262px;
left: 288px;
width: 486px;
}
#nav img {
float: left;
}
#content {
position: absolute;
top: 336px;
left: 285px;
width: 486px;
height: 254px;
background: #1E1E1E top left url(file:///C|/Documents%20and%20Settings/Camila/Meus%20documentos/Shieldens/Teste%203/images/left_shadow.jpg) no-repeat;
}
#content-bot {
background: bottom url(file:///C|/Documents%20and%20Settings/Camila/Meus%20documentos/Shieldens/Teste%203/images/body_bg.gif) repeat-x;
height: 254px;
margin-left: 1px;
overflow: auto;
}
#content .inner {
padding: 10px 27px;
}
#content .date {
margin-top: 0.5em;
}
#content p {
margin: 0.9em;
}
#tray {
margin-top: 330px;
border: 1px solid #181818;
}
#tray .redbox {
float: left;
width: 217px;
_height: 279px;
min-height: 279px;
background: #800000 url(file:///C|/Documents%20and%20Settings/Camila/Meus%20documentos/Shieldens/Teste%203/images/red_bg.jpg) repeat-x;
margin-left: 11px;
padding-top: 19px;
padding-left: 16px;
padding-right: 16px;
color: #CFCFCF;
}
#tray .first {
margin-left: 0px;
}
#tray p {
margin-top: 1em;
margin-bottom: 1.4em;
padding-left: 2px;
}
ul {
margin: 0px 1em 0px 2em;
padding: 0px;
}
li {
padding: 0px;
margin: 1em 0px;
}
.divider {
background: bottom url(file:///C|/Documents%20and%20Settings/Camila/Meus%20documentos/Shieldens/Teste%203/images/footer_bg.gif) repeat-x;
height: 26px;
margin-right: 5px;
position: relative;
}
#details {
margin-top: -1.4em;
margin-bottom: -4em;
float: right;
}
#footer {
background: #101010;
text-align: right;
margin: 0px 7px 0px 2px;
padding: 18px 15px 15px 15px;
Here's what I have so far: http://mikaevini.6te.net/index.html
And this is what I'm trying to accomplish: http://img.photobucket.com/albums/v14/meekah/SITE.jpg
I'd appreciate any sort of help. And I'm sorry about the broken english, I'm from Brazil hehe.
I'm trying to create a web page using HTML + CSS, specially for positioning elements.
However, I'm having some trouble when it comes to making it friendly for most screen-resolutions. I can only make it work on my 1440 x 900 res.
This is what I have so far (please don't make fun of my css, I'm just learning, so I used a web-template to guide me through it, so most of it is useless, unless for the files under my 6te.net account).
This is the index.hmtl:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://www.mikaevini.6te.net/style.css" type="text/css" charset="utf-8" />
</head>
<body>
<div id="wrapper">
<div id="body">
<div id="head"></div>
</div>
</div>
</body>
</html>
This is the CSS:
html, body, h1, h2, h3, h4 {
margin: 0px;
padding: 0px;
background: url(http://www.mikaevini.6te.net/bg.jpg) fixed
center
no-repeat
}
h1 img {
display: block;
}
img {
border: 0px;
}
a {
color: #FF7F00;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #FFA405;
text-decoration: underline;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: #0D0D0D;
text-align: center;
font: 12px arial, sans-serif;
color: #989898;
}
#wrapper {
text-align: left;
margin: auto;
width: 778px;
background: #181818;
}
#body {
position: relative;
margin-left: 4px;
}
#head {
position: absolute;
top: 154px;
left: 36px;
width: 270px;
height: 380px;
background: url(http://www.mikaevini.6te.net/nav.jpg) no-repeat;
}
#topnav {
position: absolute;
top: 41px;
left: 22px;
}
#topnav a {
font-weight: normal;
color: #989898;
}
#topnav a:hover {
color: white;
}
#left-box {
position: absolute;
top: 271px;
left: 4px;
width: 285px;
height: 333px;
background: #131212 url(file:///C|/Documents%20and%20Settings/Camila/Meus%20documentos/Shieldens/Teste%203/images/left_bg.jpg) repeat-x;
}
#left-box .inner {
padding: 20px 0px 0px 8px;
}
#left-box h2 {
margin: 10px 0px 0px 0px;
}
#left-box p.date {
font-weight: bold;
}
#left-box p {
margin: 3px 2.5em 1em 1.3em;
}
#nav {
position: absolute;
top: 262px;
left: 288px;
width: 486px;
}
#nav img {
float: left;
}
#content {
position: absolute;
top: 336px;
left: 285px;
width: 486px;
height: 254px;
background: #1E1E1E top left url(file:///C|/Documents%20and%20Settings/Camila/Meus%20documentos/Shieldens/Teste%203/images/left_shadow.jpg) no-repeat;
}
#content-bot {
background: bottom url(file:///C|/Documents%20and%20Settings/Camila/Meus%20documentos/Shieldens/Teste%203/images/body_bg.gif) repeat-x;
height: 254px;
margin-left: 1px;
overflow: auto;
}
#content .inner {
padding: 10px 27px;
}
#content .date {
margin-top: 0.5em;
}
#content p {
margin: 0.9em;
}
#tray {
margin-top: 330px;
border: 1px solid #181818;
}
#tray .redbox {
float: left;
width: 217px;
_height: 279px;
min-height: 279px;
background: #800000 url(file:///C|/Documents%20and%20Settings/Camila/Meus%20documentos/Shieldens/Teste%203/images/red_bg.jpg) repeat-x;
margin-left: 11px;
padding-top: 19px;
padding-left: 16px;
padding-right: 16px;
color: #CFCFCF;
}
#tray .first {
margin-left: 0px;
}
#tray p {
margin-top: 1em;
margin-bottom: 1.4em;
padding-left: 2px;
}
ul {
margin: 0px 1em 0px 2em;
padding: 0px;
}
li {
padding: 0px;
margin: 1em 0px;
}
.divider {
background: bottom url(file:///C|/Documents%20and%20Settings/Camila/Meus%20documentos/Shieldens/Teste%203/images/footer_bg.gif) repeat-x;
height: 26px;
margin-right: 5px;
position: relative;
}
#details {
margin-top: -1.4em;
margin-bottom: -4em;
float: right;
}
#footer {
background: #101010;
text-align: right;
margin: 0px 7px 0px 2px;
padding: 18px 15px 15px 15px;
Here's what I have so far: http://mikaevini.6te.net/index.html
And this is what I'm trying to accomplish: http://img.photobucket.com/albums/v14/meekah/SITE.jpg
I'd appreciate any sort of help. And I'm sorry about the broken english, I'm from Brazil hehe.