Jump to content


Register a free account to unlock additional features at BleepingComputer.com
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.

Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Looking for a Critique, and some Pro Tips


  • Please log in to reply
9 replies to this topic

#1 BLM73

BLM73

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:10:47 AM

Posted 19 December 2012 - 10:42 PM

Hi Bleeping Computer Community,

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>&nbsp;Header</h1>
<h3>&nbsp;&nbsp;&nbsp;Header Part 2</h3>
</div><!--end header-->
<div class="footer">
<h1>Footer&nbsp;</h1>
<h3>Footer Part 2&nbsp;&nbsp;&nbsp;</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.

Edited by BLM73, 20 December 2012 - 03:09 PM.


BC AdBot (Login to Remove)

 


#2 Grinler

Grinler

    Bleep Bleep!


  • Admin
  • 39,953 posts
  • ONLINE
  •  
  • Gender:Male
  • Location:USA
  • Local time:10:47 AM

Posted 21 December 2012 - 10:18 AM

I am not 100% sure what you are trying to do. Footers are usually at the bottom of the page, not after the header.

What is the purpose of the miridmar div?

Finally, I assume you want this layout:

Header
Boxes
Content
Footer
?

#3 BLM73

BLM73
  • Topic Starter

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:10:47 AM

Posted 21 December 2012 - 01:26 PM

Sorry if I wasn't totally clear, Grinler. My question has to do more with what I perceive to be oddities in behavior like the questions I had listed at the bottom. And suggestions on optimizing my code, I am just learning this, and as such am going to make mistakes that people with formal training, or a number of years experience under their belt would spot in a minute, but never seem to write about in the HTML/CSS Books.

1. The Header and Footer positioning seems wrong, I would have thought that;
.header{Right: 0px;} and
.footer{Left: 0px;} would have been sufficient
Additionally, if not positioned the way I have it, the Header seems capable of lining up outside the Wrapper, in which I thought it was essentially 'Trapped'.

2. Zooming out (as will likely be required of anyone viewing in order to even see the 'Copy" div) to far breaks the page
The min-height: 100% seems to be part of the problem, but the page completely breaks without it.
3. The Wrapper does not extend completely to the top of the Browser Window (5px off?)
4. Why does the Height of the Copy Div seem to be arbitrary. It can be changed to 100px with no visible difference, yet lowering the positioning of the div, with the assumption that the added 50px are behind the divs with a set z-index, still won't cover those bottom 2px of it's area?

Things like that are where I'm struggling, more or less things that are going to be run into as one goes from the printed page to actually producing websites.

As to your Questions:

1. The Footer isn't something I'm really worried about, nor is it to be a part of the finished page, I just put it there because I was having problems positioning the Header, and wanted to confirm the issues.
2. The Miridmar Div is how I'm creating the space between the Middle and Right Boxes

3. Header
Content
Boxes
Copy
is what I'm going for.

This community has always been a help, and I know you gotta be busy as heck with all the questions, thank you for your time, and consideration.

#4 Grinler

Grinler

    Bleep Bleep!


  • Admin
  • 39,953 posts
  • ONLINE
  •  
  • Gender:Male
  • Location:USA
  • Local time:10:47 AM

Posted 21 December 2012 - 01:34 PM

Do you want the header centered and aligned to the top of the page, or do you want that space?

its hard for me to tell what is by design and what isn't :)

#5 Grinler

Grinler

    Bleep Bleep!


  • Admin
  • 39,953 posts
  • ONLINE
  •  
  • Gender:Male
  • Location:USA
  • Local time:10:47 AM

Posted 21 December 2012 - 02:46 PM

1. Your problem was the way you were doing the positioning. When you use positioning, the content can go outside the normal flow of the page based on what position you give it. Instead i used margin: auto 0px; to center the header on the page.


2. I couldn't replicate that.

3. Some browsers put their own margins in place. You can use a universal reset at the top of your css to reset all margins.

* {
   margin: 0px;
   padding: 0px;
}

4. I can't replicate this.


I have rewritten the way you wrote to eliminate positioning and to use floats for the boxes. This will allow it to work in all browsers and you will no have content overflowing its boundaries. In order to stick the footer (boxes and copy) to the bottom you will need to use some css to do that. Here are two ways to sticky content to the bottom of your wrapper:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://www.cssstickyfooter.com/

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="grayscale.css">
<title>Grayscale</title>
<style>
* {
   margin: 0px;
   padding: 0px;
}

html {
  height:98%;
}
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%;
  }
#wrapper {
  background-image:url("http://www.example.com/images/delphi.png");
  background-repeat:no-repeat;
  border: solid black 5px;
  margin: 0px auto;
  width: 1000px;
  min-height: 98%;
}
#header {
  height: 95px;
  background-color: black;
  margin: 0px auto;
  width:950px;
}

#content {
}
#boxes {
  background-color: #a1a09e;
  border-bottom: solid black 5px;
  border-top: solid black 5px;
  width: 1000px;
  height: 300px; 
}

.box {
  background-color: #5d5d5d;
  color: white;
  height: 235px;
  width: 300px;
  margin: 0px 25px 0px 25px;
  float: left;
}      

.mid_box {
  background-color: #5d5d5d;
  color: white;
  height: 235px;
  width: 300px;
  float: left;
}
 
#copy {
  clear: both;
  vertical-align: bottom;
  background-color: rgb(46,46,46);
  color: white;
  height: 50px;
  width: 1000px;
}

</style>
</head>
<body>
 <div id="wrapper">
  <div id="header">
   <h1>&nbsp;Header</h1>
   <h3>&nbsp;&nbsp;&nbsp;Header Part 2</h3>
  </div>
  <div id="content">
   Content goes here
  </div>
  <div id="boxes"><p>Boxes</p>
    <div class="box"><p>Lefty</p></div>
    <div class="mid_box"><p>Mid</p></div>
    <div class="box"><p>Righty</p></div>
  </div>
  <div id="copy">copy</div>
 </div>
</body>
</html>


#6 BLM73

BLM73
  • Topic Starter

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:10:47 AM

Posted 22 December 2012 - 11:43 AM

Alright, thank you very much. I hadn't read anything about the Margin Reset, so that's a big help, as it did fix what I was seeing that I didn't like. You definitely did the boxes differently, and less complexly than I did as well, so that will be some good learning to check out. Thanks a lot for your response, and corrections, they are appreciated.

#7 Grinler

Grinler

    Bleep Bleep!


  • Admin
  • 39,953 posts
  • ONLINE
  •  
  • Gender:Male
  • Location:USA
  • Local time:10:47 AM

Posted 22 December 2012 - 12:32 PM

If you want, you can position the footer using the position css property. Its not advised, though, as you can run into those issues where the content can be shown outside your wrapper.

#8 BLM73

BLM73
  • Topic Starter

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:10:47 AM

Posted 27 December 2012 - 09:03 PM

I got the Footer (Boxes, and Copy) placed, no problem, with the first link you provided for the Sticky Footer, so thank you very much for that. I would like to position some elements differently, but from appearances, and please correct me if I'm wrong, you are avoiding using absolute and relative positionings. For example, I really don't want to Header all the way at the top, I'd much rather add a Logo part way down on the Left, and have the Header come off of that, continuing across the width of the center area of the page. This is meant to be a Template essentially, and a main page of a Web Site, as such it is pretty much void of content, keywords in the header, and text accompanying the images to be added to the boxes, but beyond that, not much else in regards to content.

#9 Grinler

Grinler

    Bleep Bleep!


  • Admin
  • 39,953 posts
  • ONLINE
  •  
  • Gender:Male
  • Location:USA
  • Local time:10:47 AM

Posted 02 January 2013 - 01:48 PM

Just use two floating dive in the header div. Float one to left and one to right. Make left one contain the logo and the right one containing the rest of your header.

#10 BLM73

BLM73
  • Topic Starter

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:10:47 AM

Posted 02 January 2013 - 01:59 PM

Thank you very much Grinler, your help and advice is seriously appreciated.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users