Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.
I've been working on learning web design (html/css) for some time now, and really feel I'm about to the break-through point where it all clicks in regards to getting layouts the way I see them in my head (or as described per the vision in a future customer's head). What I'm wondering is what I'm doing wrong still in regards to real world application in design. I know I'm not doing some things right, as I experience quirky behavior, and anomalous stuff that just doesn't make sense to me when I sit down to work on Templates I can use in future projects. The following code seems to be about 95% what I want, but I know I have issues with my coding style probably, and am having about 5% worth of stuff I can't explain why it's happening. If someone in the Community really wants to help out a dedicated student of HTML/CSS and both Critique, and offer Suggestions on my layout I'd greatly appreciate it. If what I am asking is not the proper use of the Community I do truly apologize, and fully understand if this thread is summarily deleted.
<!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="grayscale.css"> <title>Grayscale</title> </head> <body> <div id="wrapper"> <div class="header"> <h1> Header</h1> <h3> Header Part 2</h3> </div><!--end header--> <div class="footer"> <h1>Footer </h1> <h3>Footer Part 2 </h3> </div><!--end footer--> <div id="boxes">Boxes <div id="lefty">Lefty </div><!--end lefty--> <div id="mid">Mid </div><!--end mid--> <div id="miridmar"> <div class="righty">Righty </div><!--end righty--> </div><!--end miridmar--> </div><!--end boxes--> <div id="copy">copy </div><!--end copy--> </div><!--end wrapper--> <p></p> </body> </html>
and the CSS
html {
height: 100%;
}
a:link{
color: white;
text-decoration: none
}
a:visited{
color: white
}
a:hover{
color: rgb(112,128,144)
}
a:active{
color: white;
text-decoration: underline;
}
h1, h3 {
color: white;
font-family: arial;
}
body {
background-color: rgb(94,94,94);
height:98%;
z-index: -1;
}
#boxes {
background-color: #a1a09e;
border-bottom: solid black 5px;
border-top: solid black 5px;
top: 505px;
height: 285px;
position: relative;
width: 1000px;
}
#copy {
background-color: rgb(46,46,46);
color: white;
height: 50px;
position: relative;
top: 505px;
width: 1000px;
z-index: 3;
}
.header {
height: 95px;
background-color: black;
opacity: 0.60;
position: relative;
left: 100px;
top: 55px;
width:950px;
}
.footer {
height: 95px;
background-color: black;
opacity: 0.60;
position: relative;
right: 100px;
text-align: right;
top: 450px;
width:950px;
}
#lefty {
background-color: #5d5d5d;
color: white;
height: 235px;
position: absolute;
left: 20px;
width: 310px;
}
#mid {
background-color: #5d5d5d;
color: white;
height: 235px;
right: 20px;
position: absolute;
width: 630px;
}
#miridmar {
background-color: #a1a09e;
height: 235px;
position: absolute;
right: 20px;
width: 330px;
z-index: 1;
}
.righty {
background-color: #5d5d5d;
color: white;
height: 235px;
position: absolute;
right: 0px;
width: 310px;
}
#wrapper {
background-image:url("http://www.example.com/images/delphi.png");
background-repeat:no-repeat;
border: solid black 5px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
overflow: hidden;
padding: none;
position: centered;
width: 999px;
}If it helps, following are some of the type of questions I'm having:
- The Header and Footer positioning seems wrong, I would have thought that;
- .header{Right: 0px;} and
- .footer{Left: 0px;} would have been sufficient
- Zooming out (as will likely be required of anyone viewing in order to even see the 'Copy" div) to far breaks the page
- The Wrapper does not extend completely to the top of the Browser Window (5px off?)
I was so happy to get the Boxes correct all by myself that these small things that I somehow missed are really frustrating me. Thank you to anyone who takes the time to reply to this. Like I said, I feel like it's close to all coming together for me, there are just some things that aren't quite there yet.
Back to top
