Programming Forums > Web Development and Design > HTML / XHTML / CSS

sittingbull · Jul 21st, 2006, 10:36 AM

Hello all! I'm still fairly new to the programming world and I'm still learning HTML. I have a pretty basic concept on how to use html, but there are something�s that I'm currently having problems with.

I'm trying to figure out how to create a fixed box that will go down the left side of my website from just below h1 down to the bottom of the page. I have been doing a lot of searching and cannot find what I'm looking for. Furthermore, I'm also wondering if it is possible to put this in a CSS too. Can anyone give me any helpful suggestions or a shove in the right direction? Thanks head of time!

Arevos · Jul 21st, 2006, 12:21 PM

In your CSS for the element you want to have fixed:

 css Syntax (Toggle Plain Text) 
position: fixed;
top: 20px;
left: 20px;
position: fixed;
top: 20px;
left: 20px;

This will work in every modern browser, except Internet Explorer, because IE sucks when it comes to supporting web standards. Fortunately, one can exploit one of the many, many bugs in the IE rendering engine to make "position: absolute" elements behave like "position: fixed".

 css Syntax (Toggle Plain Text) 
html {
    overflow: hidden;
}
body {
    height: 100%;
    overflow: auto;
}
html {
    overflow: hidden;
}
body {
    height: 100%;
    overflow: auto;
}

It's messy, I know, and not without it's disadvantages. However, until IE joins the 21st century along with every other major browser, it's the only option I know of outside even messier Javascript.

More on the hack here and here.

sittingbull · Jul 21st, 2006, 12:56 PM

Arevos, thank you for the info. That's what I've been looking for. Both websites are excellent forms of info for this. Thanks a ton!

a thing · Jul 21st, 2006, 3:07 PM

Make your <div> and in the stylesheet give it float:left, a small margin-right, and a small width. Be sure to use percents for the latter two so it works on different resolutions. For the <div> that the rest of the page is on, make it 100%-(the width of the navigation+margin). Of course this doesn't work in IE without some silly hack.

Ooble · Jul 21st, 2006, 4:27 PM

If you use XHTML 1.0 Strict, you'll need to set the height property of html to 100% as well, as it contains body. Apparently that's a feature, not a bug.

sittingbull · Jul 21st, 2006, 4:50 PM

Thanks for the info guys. I just got done reading some info on that A Thing, even learned how to get around the IE problem from the websites Arevos gave me and HERE. Ooble I think I'm going to stick with XHTML 1.0 Transitional, seems to be the way to go by majority

.

sittingbull · Jul 27th, 2006, 10:43 AM

Well I finally finished what I started the other day. For my first build I don't think I did to bad. I'm open for suggestions and constructive criticism. If you like, check it out here. Thanks again for the help guys.

Sane · Jul 27th, 2006, 11:51 AM

It's a good start, but I'd like to suggest a few things.

In your banner, due to all the contrasting colors, you need to put some sort of border on your font, so it doesn't blend in with the light colors. You would need to put the font in to the banner to do that (not just in the HTML). You can do that in Photoshop quite easily.

You have dark black font on a dark blue background. It makes the font very difficult to read, when that is what you want people to be looking at most importantly.

You should have some contrast to act as a backing on the text beside each picture, to separate it aesthetically from the pictures, and make it stand out.

<hr> seperators aren't really used anymore. It's much more effective to create a border using <div> tags, which allows you to control more specific attributes than a plain <hr>.

The navbar could use an unordered list (<ul>), combined with CSS, to achieve a more stable navigation with hover graphics and the works. Right now the idea of it being inside a table, and the font growing larger seems a little novice to me.

Other then that, it's a good start. If you're too busy to keep learning, there are always people who'd be willing to remake a website for low prices.

sittingbull · Jul 27th, 2006, 5:44 PM

Sane, thanks for the suggestions and comments. I will start looking into what you had to say. The bgcolor is getting changed real soon, along with the #mainheader

. If you get a chance send me a pm some info on what you mean by a ul, css, and hover graphics. Never to busy to learn

.

Sane · Jul 27th, 2006, 5:58 PM

I would PM this, but it's useful stuff to know. Some other people might want to read this and pick up on it.

It's basically making use of lists in a different manner. I found out about this from the w3 website and ColdDeath (another member here).

If you'd like to see an example: www.jammersbase.com ... the nav-bar at the top is an unordered list. It uses "float:left" to make it tile horizontally. Although it can easily be modified to tile vertically by removing "float:left" and playing with the widths.

And here is the relevant stuff:

HTML

(Toggle Plain Text)

  <div id="navbar" align="center">
	<ul id="nav-menu">
		<li id="active"><a href="/" id="current-page">Home</a></li>
                <li><a href="/notices">Notices</a></li>
                <li><a href="/forum">Forums</a></li>
                <li><a href="/faq">FAQ</a></li>		
                <li><a href="/downloads">JbE</a></li>
		<li><a href="/members">Members</a></li>
		<li><a href="/guilds">Guilds</a></li>
		<li><a href="/compare">Compare</a></li>
		<li><a href="/rankings">Rankings</a></li>
		<li><a href="/songlist">Songs</a></li>
		<li><a href="/albumlist">Albums</a></li>
                <li><a href="/credit">Credit</a></li>
	</ul>
  </div>

CSS

 css Syntax (Toggle Plain Text) 
#navbar {
   position: relative;
   font-size: 10px;
   font-weight: bold;
   height: 16px;
   background-color: #ACF;
   width: 940px;
   padding-left: 4px;
      }
#nav-menu li {
   float: left;
   margin: 0;
   padding: 0;
   width: 78px;
   display: block;
      }
#nav-menu li a, #nav-menu li a:link, #nav-menu a:visited {
   background-image:url("/static/1navbar.gif");
   background-repeat: no-repeat;
   background-color:#E8EEFA;
   text-align: center;
   padding: 1px 0 0 0;
   display: block;
   color: #E8EEFA;
   height: 14px;
   text-decoration: none;
      }
#nav-menu li a#current-page, #nav-menu li a#current-page:link, #nav-menu li a:hover, #nav-menu li a:active {
   background-image:url("/static/1navbar_hover.gif");
   color: #E8EEFA;
   text-decoration: none;
      }
ul {
   top: 0;
   left: 0;
   margin: 0px;
   padding: 0px;
      }
#navbar {
   position: relative;
   font-size: 10px;
   font-weight: bold;
   height: 16px;
   background-color: #ACF;
   width: 940px;
   padding-left: 4px;
      }
#nav-menu li {
   float: left;
   margin: 0;
   padding: 0;
   width: 78px;
   display: block;
      }
#nav-menu li a, #nav-menu li a:link, #nav-menu a:visited {
   background-image:url("/static/1navbar.gif");
   background-repeat: no-repeat;
   background-color:#E8EEFA;
   text-align: center;
   padding: 1px 0 0 0;
   display: block;
   color: #E8EEFA;
   height: 14px;
   text-decoration: none;
      }
#nav-menu li a#current-page, #nav-menu li a#current-page:link, #nav-menu li a:hover, #nav-menu li a:active {
   background-image:url("/static/1navbar_hover.gif");
   color: #E8EEFA;
   text-decoration: none;
      }
ul {
   top: 0;
   left: 0;
   margin: 0px;
   padding: 0px;
      }

As you can see, the html is very straight forward. It's just a bunch of items wrapped in a <ul>. However, the CSS is where the tricky stuff comes in to play, and the magic occurs.

If you're interested in getting it to tile vertically, remove the "float:left", and set the width of each item to the same as the width of the entire navbar. It will require some playing around with, and some frustration. But I think it's worth it. It's all up to you.

Jul 21st, 2006, 10:36 AM	#1
sittingbull Newbie Join Date: Jun 2006 Posts: 12 Rep Power: 0	Fixed boxes, how? Hello all! I'm still fairly new to the programming world and I'm still learning HTML. I have a pretty basic concept on how to use html, but there are something�s that I'm currently having problems with. I'm trying to figure out how to create a fixed box that will go down the left side of my website from just below h1 down to the bottom of the page. I have been doing a lot of searching and cannot find what I'm looking for. Furthermore, I'm also wondering if it is possible to put this in a CSS too. Can anyone give me any helpful suggestions or a shove in the right direction? Thanks head of time! __________________ rocking the newb status!

Jul 21st, 2006, 12:21 PM	#2
Arevos Programming Guru Join Date: Aug 2005 Location: England Posts: 1,499 Rep Power: 5	In your CSS for the element you want to have fixed: css Syntax (Toggle Plain Text) position: fixed; top: 20px; left: 20px; position: fixed; top: 20px; left: 20px; This will work in every modern browser, except Internet Explorer, because IE sucks when it comes to supporting web standards. Fortunately, one can exploit one of the many, many bugs in the IE rendering engine to make "position: absolute" elements behave like "position: fixed". css Syntax (Toggle Plain Text) html { overflow: hidden; } body { height: 100%; overflow: auto; } html { overflow: hidden; } body { height: 100%; overflow: auto; } It's messy, I know, and not without it's disadvantages. However, until IE joins the 21st century along with every other major browser, it's the only option I know of outside even messier Javascript. More on the hack here and here.

Jul 21st, 2006, 12:56 PM	#3
sittingbull Newbie Join Date: Jun 2006 Posts: 12 Rep Power: 0	Arevos, thank you for the info. That's what I've been looking for. Both websites are excellent forms of info for this. Thanks a ton! __________________ rocking the newb status!

Jul 21st, 2006, 3:07 PM	#4
a thing Unverified User Join Date: Aug 2005 Location: none Posts: 146 Rep Power: 0	Make your <div> and in the stylesheet give it float:left, a small margin-right, and a small width. Be sure to use percents for the latter two so it works on different resolutions. For the <div> that the rest of the page is on, make it 100%-(the width of the navigation+margin). Of course this doesn't work in IE without some silly hack. __________________ Warning: My posts may change (dramatically) within the first 15 minutes they're posted. Got 'Nux?�GNU/Linux and other free software support. It's GNU/Linux, not just Linux.

Jul 21st, 2006, 4:27 PM	#5
Ooble I eat cake for breakfast. Join Date: Jul 2004 Location: In my box. Posts: 4,434 Rep Power: 9	If you use XHTML 1.0 Strict, you'll need to set the height property of html to 100% as well, as it contains body. Apparently that's a feature, not a bug. __________________ Me :: You :: Them

Jul 21st, 2006, 4:50 PM	#6
sittingbull Newbie Join Date: Jun 2006 Posts: 12 Rep Power: 0	Thanks for the info guys. I just got done reading some info on that A Thing, even learned how to get around the IE problem from the websites Arevos gave me and HERE. Ooble I think I'm going to stick with XHTML 1.0 Transitional, seems to be the way to go by majority . __________________ rocking the newb status!

Jul 27th, 2006, 10:43 AM	#7
sittingbull Newbie Join Date: Jun 2006 Posts: 12 Rep Power: 0	Well I finally finished what I started the other day. For my first build I don't think I did to bad. I'm open for suggestions and constructive criticism. If you like, check it out here. Thanks again for the help guys. __________________ rocking the newb status!

Jul 27th, 2006, 11:51 AM	#8
Sane Banned Join Date: Apr 2005 Location: Waterloo, Ontario Posts: 2,101 Rep Power: 6	It's a good start, but I'd like to suggest a few things. In your banner, due to all the contrasting colors, you need to put some sort of border on your font, so it doesn't blend in with the light colors. You would need to put the font in to the banner to do that (not just in the HTML). You can do that in Photoshop quite easily. You have dark black font on a dark blue background. It makes the font very difficult to read, when that is what you want people to be looking at most importantly. You should have some contrast to act as a backing on the text beside each picture, to separate it aesthetically from the pictures, and make it stand out. <hr> seperators aren't really used anymore. It's much more effective to create a border using <div> tags, which allows you to control more specific attributes than a plain <hr>. The navbar could use an unordered list (<ul>), combined with CSS, to achieve a more stable navigation with hover graphics and the works. Right now the idea of it being inside a table, and the font growing larger seems a little novice to me. Other then that, it's a good start. If you're too busy to keep learning, there are always people who'd be willing to remake a website for low prices.

Jul 27th, 2006, 5:44 PM	#9
sittingbull Newbie Join Date: Jun 2006 Posts: 12 Rep Power: 0	Sane, thanks for the suggestions and comments. I will start looking into what you had to say. The bgcolor is getting changed real soon, along with the #mainheader . If you get a chance send me a pm some info on what you mean by a ul, css, and hover graphics. Never to busy to learn . __________________ rocking the newb status!

Jul 27th, 2006, 5:58 PM	#10
Sane Banned Join Date: Apr 2005 Location: Waterloo, Ontario Posts: 2,101 Rep Power: 6	I would PM this, but it's useful stuff to know. Some other people might want to read this and pick up on it. It's basically making use of lists in a different manner. I found out about this from the w3 website and ColdDeath (another member here). If you'd like to see an example: www.jammersbase.com ... the nav-bar at the top is an unordered list. It uses "float:left" to make it tile horizontally. Although it can easily be modified to tile vertically by removing "float:left" and playing with the widths. And here is the relevant stuff: HTML (Toggle Plain Text) <div id="navbar" align="center"> <ul id="nav-menu"> <li id="active"><a href="/" id="current-page">Home</a></li> <li><a href="/notices">Notices</a></li> <li><a href="/forum">Forums</a></li> <li><a href="/faq">FAQ</a></li> <li><a href="/downloads">JbE</a></li> <li><a href="/members">Members</a></li> <li><a href="/guilds">Guilds</a></li> <li><a href="/compare">Compare</a></li> <li><a href="/rankings">Rankings</a></li> <li><a href="/songlist">Songs</a></li> <li><a href="/albumlist">Albums</a></li> <li><a href="/credit">Credit</a></li> </ul> </div> <div id="navbar" align="center"> <ul id="nav-menu"> <li id="active"><a href="/" id="current-page">Home</a></li> <li><a href="/notices">Notices</a></li> <li><a href="/forum">Forums</a></li> <li><a href="/faq">FAQ</a></li> <li><a href="/downloads">JbE</a></li> <li><a href="/members">Members</a></li> <li><a href="/guilds">Guilds</a></li> <li><a href="/compare">Compare</a></li> <li><a href="/rankings">Rankings</a></li> <li><a href="/songlist">Songs</a></li> <li><a href="/albumlist">Albums</a></li> <li><a href="/credit">Credit</a></li> </ul> </div> CSS css Syntax (Toggle Plain Text) #navbar { position: relative; font-size: 10px; font-weight: bold; height: 16px; background-color: #ACF; width: 940px; padding-left: 4px; } #nav-menu li { float: left; margin: 0; padding: 0; width: 78px; display: block; } #nav-menu li a, #nav-menu li a:link, #nav-menu a:visited { background-image:url("/static/1navbar.gif"); background-repeat: no-repeat; background-color:#E8EEFA; text-align: center; padding: 1px 0 0 0; display: block; color: #E8EEFA; height: 14px; text-decoration: none; } #nav-menu li a#current-page, #nav-menu li a#current-page:link, #nav-menu li a:hover, #nav-menu li a:active { background-image:url("/static/1navbar_hover.gif"); color: #E8EEFA; text-decoration: none; } ul { top: 0; left: 0; margin: 0px; padding: 0px; } #navbar { position: relative; font-size: 10px; font-weight: bold; height: 16px; background-color: #ACF; width: 940px; padding-left: 4px; } #nav-menu li { float: left; margin: 0; padding: 0; width: 78px; display: block; } #nav-menu li a, #nav-menu li a:link, #nav-menu a:visited { background-image:url("/static/1navbar.gif"); background-repeat: no-repeat; background-color:#E8EEFA; text-align: center; padding: 1px 0 0 0; display: block; color: #E8EEFA; height: 14px; text-decoration: none; } #nav-menu li a#current-page, #nav-menu li a#current-page:link, #nav-menu li a:hover, #nav-menu li a:active { background-image:url("/static/1navbar_hover.gif"); color: #E8EEFA; text-decoration: none; } ul { top: 0; left: 0; margin: 0px; padding: 0px; } As you can see, the html is very straight forward. It's just a bunch of items wrapped in a <ul>. However, the CSS is where the tricky stuff comes in to play, and the magic occurs. If you're interested in getting it to tile vertically, remove the "float:left", and set the width of each item to the same as the width of the entire navbar. It will require some playing around with, and some frustration. But I think it's worth it. It's all up to you.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Sound Fixed!	Kilo	Coder's Corner Lounge	12	Jun 13th, 2006 7:34 AM
WMI Config Settings Fixed for SQL	john Wesley	Visual Basic .NET	0	Jun 8th, 2006 7:42 AM
Rich Text Boxes	brokenhope	Visual Basic	1	Sep 7th, 2005 3:34 PM
Text Boxes	fox123	Visual Basic	6	Jun 5th, 2005 3:31 PM
How do I make a fixed window?	dmorales	HTML / XHTML / CSS	5	Apr 25th, 2005 11:14 AM

Programming Forums > Web Development and Design > HTML / XHTML / CSS

Fixed boxes, how?