[HTML&CSS]Need some thoughts about this

Mindblaster7 · Jul 15, 2009

A little project I'm working on, so far it looks like this (Starting with a plain HTML document, later will use php for more database 'interaction')

picture:

Mindblaster7 - [HTML&CSS]Need some thoughts about this - RaGEZONE Forums

sources:

html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
      <head>
            <title>My Radio Station</title>
            <!-- Meta tags -->
      </head>
      <body>
            <link rel="stylesheet" type="text/css" href="./stylesheet.css" />
                  <div id="headcontainer">
                  <div class="border-top"><div class="border-right">
                  <div class="border-left"><div class="border-bottom">
                       <img src="./images/banner.png" heigth="125px" width="755px" alt="My Radio Station Header" />
                  </div></div>
                  </div></div>
                  </div>

                  <div class="spacer"> </div>

                  <div id="sitecontainer">
                  <div class="border-top"><div class="border-right">
                  <div class="border-left"><div class="border-bottom">
                       <div class="spacer2"> </div>
                            <div id="siteconainercontent">
                                 <div id="supfbox">
                                 <div class="border-top"><div class="border-right">
                                 <div class="border-left"><div class="border-bottom">
                                 <div class="content">
                                   <div class="spacer2"> </div>
                                      The radio is <i>offline</i><br /><br />Start lisenting <a href="#"> here!</a>
                                   <div class="spacer2"> </div>
                                 </div></div>
                                 </div></div></div>
                                 </div>


                                <div class="contentspacer">
                                <h1 class="header">
                                    Test header
                                </h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br />
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <br />
                                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>    <br />
                                </div>
                            </div>
                       <div class="spacer2"> </div>
                  </div></div>
                  </div></div>
                  </div>

                  <div class="spacer"> </div>

                  <div id="footer">
                  <div class="border-top"><div class="border-right">
                  <div class="border-left"><div class="border-bottom">
                  <div class="content">
                  Copyright 2009 (URL)
                  </div>
                  </div></div>
                  </div></div>
                  </div>
      </body>
</html>

css:

Code:

/* reset */
* {
  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
  margin-bottom:0px;
  font-size:13px;
  font-family:"Arial",Arial,Sans-serif;
  color:black;
}
/* general site */
.content{
  margin-left:5px;
  margin-right:5px;
}
#sitecontainer{
  margin:0px auto;
  width:755px;
  background-color:#b5e36d;
}
#siteconainercontent{
  margin-left:5px;
  margin-right:5px;
}
#headcontainer{
  margin:0px auto;
  width:755px;
  height:100%;
  background-color:#06ff00;
}
#footer{
  margin:0px auto;
  width:755px;
  font-size:13px;
  background-color:#b5e36d;
  
}
.contentspacer{
  margin-right:5px;
}
.spacer{
  font-size:10px;
}
.spacer2{
  font-size:5px;
}
.contentspacer{
 margin-left:130px;
}
/* Float boxes */
#supfbox{
  float:left;
  width:100px;

}
/* TAGS CLASSES */
h1.header{
  font-size:18px;
  height:30px;

}
/* BORDERS */
.border-top{background:url("./images/blk.gif") 0% 0% repeat-x;}
.border-right{background:url("./images/blk.gif") 0% 0% repeat-y;}
.border-left{background:url("./images/blk.gif") 100% 0% repeat-y;}
.border-bottom{background:url("./images/blk.gif") 100% 100% repeat-x;}

If you feel like assembling this, I uploaded the blk.gif and the banner (header).

Comments would be really nice, I also need some suggestions etc. It needs to be said, I have no feeling of what goes with what, conserning colors, how things should align. I'm hopeless in that sort of thing imo.

Parker · Jul 15, 2009

So what are we doing? Just telling you how to improve it in terms of coding?
If so then

Code:

<link rel="stylesheet" type="text/css" href="./stylesheet.css" />

goes in the <head> section.

Instead of doing

Code:

  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
  margin-bottom:0px;

You can just do [/code]margin:0px;[/code] Which is the same as above just alot shorter, or you could do it like

Code:

margin: 0px 0px 0px 0px;

I have no idea what you're doing here

Code:

/* BORDERS */
.border-top{background:url("./images/blk.gif") 0% 0% repeat-x;}
.border-right{background:url("./images/blk.gif") 0% 0% repeat-y;}
.border-left{background:url("./images/blk.gif") 100% 0% repeat-y;}
.border-bottom{background:url("./images/blk.gif") 100% 100% repeat-x;}

Oh and on the banner image you spelt height wrong (hieght).

Mindblaster7 · Jul 15, 2009

Parker said:
So what are we doing? Just telling you how to improve it in terms of coding?
If so then

Code:

<link rel="stylesheet" type="text/css" href="./stylesheet.css" />

goes in the <head> section.

Instead of doing

Code:

margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px;

You can just do [/code]margin:0px;[/code] Which is the same as above just alot shorter, or you could do it like

Code:

margin: 0px 0px 0px 0px;

I have no idea what you're doing here

Code:

/* BORDERS */ .border-top{background:url("./images/blk.gif") 0% 0% repeat-x;} .border-right{background:url("./images/blk.gif") 0% 0% repeat-y;} .border-left{background:url("./images/blk.gif") 100% 0% repeat-y;} .border-bottom{background:url("./images/blk.gif") 100% 100% repeat-x;}

Oh and on the banner image you spelt height wrong (hieght).

Thanks, I appreciate it.

I didn't know that <link rel="stylesheet".... were going into head, but thanks, and I also did that with margin, but got confused, so I did wrote it with -left etc instead. the part where you have no idea on what I'm doing, is where I create the black border around the boxes, with a 1x1 black image.

And please tell me where I spelled height wrong, I'm not able to see it.

Parker · Jul 15, 2009

Code:

<img src="./images/banner.png" heigth="125px" width="755px" alt="My Radio Station Header" />

For the borders that you're using the images you can just do

Code:

border:1px solid #000000;

which will do the same thing as your images.

Mindblaster7 · Jul 15, 2009

Parker said:
Code:

<img src="./images/banner.png" heigth="125px" width="755px" alt="My Radio Station Header" />

For the borders that you're using the images you can just do

Code:

border:1px solid #000000;

which will do the same thing as your images.

/facepalm

Well thanks, I'll adjust that

jeyci · Jul 18, 2009

or...
add to your css:

Code:

img.bordered
{
border:1px solid #000000;
}

and your image:

Code:

<img src="" class="bordered">

Parker · Jul 19, 2009

jeyci said:
or...
add to your css:

Code:

img.bordered { border:1px solid #000000; }

and your image:

Code:

<img src="" class="bordered">

The point I was trying to make is that you need not to use images if you're using straight lines for borders since you can just add the CSS property, if it was rounded corners then yeah use images.

shiningriver · Jul 30, 2009

What I could suggest for you:

instead of using four divs for corners, just use two (i.e., instead of up-left and up-right, use top) and have the image combine. It saves loading time and lines.

And this:

margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;

is fine in my opinion. Although doing margin: none; or margin: 0 0 0 0; is an alternative, it's a matter of comfortability and style. Same as what I suggested above.

[HTML&CSS]Need some thoughts about this

Mindblaster7

Master Summoner

Attachments

Parker

pork pork

Mindblaster7

Master Summoner

Parker

pork pork

Mindblaster7

Master Summoner

jeyci

Junior Spellweaver

Parker

pork pork

shiningriver

Skilled Illusionist

RaGEZONE Sponsor

About RaGEZONE

Forum Statistics

RaGEZONE Partners