Height issues

3 replies [Last post]

Sat, 2012-05-19 17:42

richard_CSS

Offline

newbie

Last seen: 11 years 1 week ago

Timezone: GMT+1

Joined: 2012-05-19

Posts: 2

Points: 3

Hello all,

I'm trying to get to grips with the 100% height business. This is the third site I have created with this and it has gone wrong.

The #textcontainer tag contains a background which I want to run the full height of the content. The height is 100%, however it goes to what appears to be 100% of the browser window and not the content.

Webpage can be found here: http://michaelaltoft.net63.net/contact.html (only one up at the moment)

CSS Code of what's applicable:

html {
	height: 200%;
}
 
body {
	background: #b1b1b1 url(images/bg2.png) fixed;
	font-family: Arial;
	font-size: 12px;
	color: #fff;
	letter-spacing: 2px;
	height: 100%;
	line-height: 20px;
}
 
#container {
	margin: auto;
	min-height: 100%;
	width: 1024px;
	background: url(images/bgtile.jpg) repeat;
	position: relative;
	border: 1px solid #000;
	padding-top: 10px;
}
 
#textcontainer {
	position: absolute;
	top: 170px;
	padding: 20px;
	z-index: 3;
}

Many thanks in advance

Tags:

CSS Layouts

Sat, 2012-05-19 23:05

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

First, get rid of the

First, get rid of the position, left, top, and z-index properties. There are too many gotchas, as you've found, for anyone not well versed in how they work and how they interact with their neighboring elements. For your text-container, simply float it left. Set the container's overflow to hidden.

Lose the purple image. It belongs as the background color #7200ca, or rgb(114, 0, 202) on body, and body's bg image needs to be modified to have an alpha channel value of 64 (0.75 opacity).

In general, you should seldom, if ever, need to declare a height value. Elements in their natural state adjust to fit the content just fine. The html element is the browser viewport by definition. I cannot imagine how the browser can handle making its viewport twice as wide as itself, as you've tried.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Sun, 2012-05-20 11:17

richard_CSS

Offline

newbie

Last seen: 11 years 1 week ago

Timezone: GMT+1

Joined: 2012-05-19

Posts: 2

Points: 3

That's worked. Many

That's worked. Many thanks.

Going back to the purple image, I have been asked to have each page (although the same layout) to be a different colour, thus the purple for the contact page and then whatever colours the navigation buttons are will be the colour overlay for that particular page. How would I go about making each page a different colour without the use of png files?

I've never used alpha channels and the like before.

Mon, 2012-05-21 04:52

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

I've posted the html and css

I've posted the html and css for an example of coding your page. Notice the logo. If the image doesn't load, there is nothing there as you had it. That's a common image replacement method, and it sucks. It is not at all robust. You used the same method on your nav menu (which I didn't 'fix'), other than cleaning the css a bit to make it play better with the other children.

Notice the form. It is recoded to better reflect best practice. The form's css is also cleaned up a bit.

I've manipulated the alpha values of the two bg patterns. The bg2 background image was also cropped; there is no good reason to use a 400+kB for a background. I will show you exactly how I made the changes, using the ImageMagick suite of graphic utilities. How they are used is made clear in the css. Changiing the background color is also trivial when it is only required to alter the bg-color instead of messing with foreground images. (Change the body element's id to change its bg-color.)

To set an alpha channel to 75%, using the convert utility, we first put the image into memory, then create an alpha channel if one does not already exist, read the alpha channel, and evaluate the command for alpha. We end by saving the altered image to a new file with the appropriate image type. Here's the command line for the bgtile.jpg image. Note that a jpeg image does not natively have aan alpha layer. Note that I am working with the BASH shell. If you're in windows, there may be variations in the utility name and/or addressing.

$ convert bgtile.jpg -alpha set -channel a -evaluate set 75% \
alpha75-bgtile.png

Note that the '\' denotes a continuation on the same line.

The handling of the bg2.png image is the same except that we also crop and re-canvas the image.

$ convertbg2.png -crop 100x250+0+0 +repage \
-alpha set -channel a -evaluate set 75% cropped-alpha75-bg2.png

I'm not a graphics guy, so I can't tell you how to do this in GIMP or Photoshop, but for stuff like this, there is no simpler means than using ImageMagick.

Now for the html and css.

<!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=ISO-8859-1" />
 
    <title>Michael Altoft</title>
 
    <link rel="stylesheet" 
	  type="text/css" 
	  href="richard-css-contact_files/style.css" />
  </head>
 
  <body id="bg-b">
    <div id="container">	
      <h1><img src="richard-css-contact_files/logo.png"
	       alt="Michael Altoft" /></h1>
 
      <ul id="nav">
	<li id="about"><a href="/about.html">About</a></li>
	<li id="news"><a href="/news.php">News</a></li>
	<li id="photos"><a href="/photos.html">Photos</a></li>
	<li id="videos"><a href="/videos.html">Videos</a></li>
	<li id="credits"><a href="/credits.html">Credits</a></li>
	<li id="contact"><a href="/contact.html">Contact</a></li>
      </ul>
 
      <div id="textcontainer">
	<h2>Contact Me</h2>
 
	<p>Please fill out the following form to get in touch with me:</p>
 
	<form id="contact"
	      method="get" 
	      action="#" 
	      onsubmit="">
	  <fieldset>
	    <label for="name">Full Name <em>(required)</em>:
	      <br />
	      <input  name="name" 
		      id="name" 
		      size="40" 
		      type="text" /></label>
 
	    <label for="reason">Reason for Contact:>
	      <br />
	      <select name="reason" 
		      id="reason"> 
		<option selected="selected" 
			value="CV Request">CV Request></option>
		<option value="General Enquiry">General Enquiry</option>
		<option value="Request for Audition">Request for Audition</option>
	      </select>
	    </label>
 
	    <label for="email">Email Address <em>(required)</em>:
	      <br />
	      <input name="email" 
		     id="email" 
		     size="40" 
		     type="text" />
	    </label>
 
	    <label for="agency">Agency Name <em>(if applicable)</em>:
	      <br />
	      <input  name="agency" 
		      id="agency" 
		      size="40" 
		      type="text" />
	    </label>
 
	    <label for="number">Contact Number <em>(required)</em>:
	      <br />
	      <input  name="number" 
		      id="number" 
		      size="40" 
		      type="text" />
	    </label>
 
	    <label for="message">Message <em>(required)</em>:
	      <br />
	      <textarea  name="message" 
			 id="message" 
			 rows="6" 
			 cols="40">
	      </textarea>
	    </label>
 
	    <p>
	      <input value="Submit Form" 
		     type="submit" />
	    </p>
	  </fieldset>
	</form>
      </div>
    </div>
  </body>
</html>

/* This is just asking for trouble. Don't do it.
* {
  margin: 0;
  padding: 0;
}
*/
 
html {}
 
body {
    background: purple url(crop-alpha75-bg2.png) fixed;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 20px;
    margin: 0;
    padding: 0;
    }
 
body#bg-a,
body#bg-a #container {
    background-color: orange;
    }
 
body#bg-b,
body#bg-b #container {
    background-color: blue;
    }
 
body#bg-c,
body#bg-c #container {
    background-color: maroon;
    }
 
body#bg-d,
body#bg-d #container {
    background-color: green;
    }
 
body#bg-e,
body#bg-e #container {
    background-color: cyan;
    }
 
p {
    font-size: 1em;
    }
 
h1 {
    margin-right: 20px;
    text-align: right;
    }
 
h2 {}
 
#container {
    margin: 0 auto;
    width: 95%;
    background: purple url(alpha75-bgtile.png) repeat;
    border: 1px solid #000;
    padding-top: 10px;
    }
 
#textcontainer {
    padding: 20px 20px 0 20px;
    }
 
form {}
 
fieldset {
    border: none;
    }
 
label {
    display: block;
    margin: 1em 0;
    }
 
input,
select,
textarea {
    background-color: #555555;
    border: #000 solid 1px;
    color: white;
    font-style: italic;
    height: 20px;
    padding: 1px;
    width: 250px;
    }
 
input[type=submit] {
    height: 25px;
    width: 100px;
    font-weight: bold;
    border: 1px solid #000;
    }
 
textarea {
    height: auto;
    width: auto;
    }
 
#contact input:focus,
#contact textarea:focus,
#contact select:focus {
    color: #000;
    background-color: #b1b1b1;
    font-style: italic;
    }
 
a:link, a:visited { color: #000; text-decoration: underline; text-transform: uppercase; }
a:hover, a:visited:hover { color: #d1d1d1; text-decoration: underline; }
a:active {color: #699b00;}
 
ul#nav { 
    overflow: hidden;
    padding: 0;
    }
 
ul#nav li { float: left; list-style-type: none; }
ul#nav li a { height: 39px; display: block; text-indent: -9999px; outline: none; }
 
li#about a, li#news a, li#photos a, li#videos a, li#credits a, li#contact a { background-image: url(images/nav.png); }
 
li#about a { background-position: 0px 0px; width: 140px; }
li#about a:hover	{ background-position: 0 -42px; }
 
li#news a { background-position: -140px 0px; width: 150px; }
li#news a:hover	{ background-position: -140px -42px; }
 
li#photos a { background-position: -290px 0px; width: 170px; }
li#photos a:hover { background-position: -290px -42px; }
 
li#videos a { background-position: -453px 0px; width: 170px; }
li#videos a:hover	{ background-position: -453px -42px; }
 
li#credits a { background-position: -620px 0px; width: 170px; }
li#credits a:hover	{ background-position: -620px -42px; }
 
li#contact a { background-position: -790px 0px; width: 181px; }
li#contact a:hover	{ background-position: -790px -42px; }

cheers,

gary

Attachment	Size
crop-alpha75-bg2.png	12.36 KB
alpha75-bgtile.png	43.76 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

First, get rid of the

That's worked. Many

I've posted the html and css

User login

Navigation