HTML - Neutralised By Container Div

http://www.iankovi.com/htmlllll.html
http://www.iankovi.com/csssss.css

Any suggestions?

Hi

I am trying to center a container from top to bottom aswell as left to right.

This is my code for the container so far:

Code:

#container1 {
	width:780px;
	height:650px;
	margin-left:auto;
	margin-top:auto;
	margin-right:auto;
	margin-bottom:auto;
	background-color:#FFFFFF;
}

As you can see my container is 780x650, i may change the height when i come to do the design but the design wont work if i cant have this container centerd on different screen resolutions.

Left and Right centering has been acheived with margin's set to auto, unfortunately this does not work for top and bottom

Anyone know how to achieve this, I am only really worried about browser compatability in FF and IE.

Thanks in advance

GrampsEd here
?#1 Can I think or look at a Table and a menuh-container as the same thing but used for different things
where the ( menuh= the text or links ) the ( Tr=Lu ) and the ( Td=LI ) if so.
?#2 Where can I find all of the properties I can use for the ( menuh Li ) tag in the CSS part.
or can I just put properties in the ( LI tag ) just like you do in the ( TD tag ) in the html body part of the page.
Also please tell me if I need to ask ?? in a different forum.
Thanks

This is what my assignment says to do word by word.
"Scroll down to the four div container elements(marked with ids sample 1 through sample4) and place each of the div containers in the samples class."

Here is my code and what I thought this instruction meant.

HTML Code:

      <div id="samples_container">
         <div class="samples"><div id="sample1">
            <h3>Paint Ball Fun</h3>
            <a href="sample1.jpg"><img src="sample1.jpg" alt="" /></a>
         </div></div>
         <div class="samples"><div id="sample2">
            <h3>Longs Peak Memories</h3>
            <a href="sample2.jpg"><img src="sample2.jpg" alt="" /></a>
         </div></div>
         <div class="samples"><div id="sample3">
            <h3>Trick or Treat!</h3>
            <a href="sample3.jpg"><img src="sample3.jpg" alt="" /></a>
         </div></div>
         <div class="samples"><div id="sample4">
            <h3>Michael's First Concert</h3>
            <a href="sample4.jpg"><img src="sample4.jpg" alt="" /></a>
         </div></
      </div>

The thing is it's asking me in my CSS later to make the class .samples, to have absolution positioning. Later then it asks me to set positions for ID sample1 through 4.

So i'm guessing what it's trying to do is inbox all sample1-4 inside samples, so that when I declare position as absolute in the class .samples, the other ID's will already be set to absolute position and all I will need to do is assign left and top value.

Unfortunately the way I boxed the sample class doesn't seem to work, given how vague the instruction is I doubt I did the right thing but I can't figure anything else.

Here's a sample of my CSS just in case.

Code:

.samples{position:absolute;}
.samples img{width:150px; height:193px; border-width:0px;}

#samples_container{position:relative; top:0px; left:0px; height:450px;}				
#sample1{left:0px; top:0px;}
#sample2{left:170px; top:0px;}
#sample3{left:0px; top:170px;} 
#samples4{left:170px; top:220px;}

Thanks again in advance.

Hi, I have a div element, that will contain various debug/warning messages from Javascript. If I set it's height to 100%, so to fill the parent element, it overlaps the parent element. How can I automatically set the height, without manually setting the height in pixels?

Many thanks for any suggestions.

Regards

Aaron
HTML Code:

<div style="border-style: solid; border-width: 3px; margin: 0px; padding: 0px; z-index: 1000; position: fixed; top: 252px; left: 582px; width: 494px; height: 202px; background-color: white; display: block;">

<h1 style="width: 100%; height: 20px; font-size: 12px; display: block; border-bottom-width: 2px; border-bottom-style: solid; vertical-align: middle;"><img src="https://127.0.0.1/beer2/i/clear.png" style="cursor: pointer;" alt="clear"/><img src="https://127.0.0.1/beer2/i/min.png" style="cursor: pointer;" alt="Minimise"/> Debug Window</h1>

<div style="overflow: scroll; width: 100%; height: 100%; font-size: 12px; position: static;">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>

</div>

What code do I need to place some text in some type of table or container?

thanks

Hello,

I have a website with registered users and i want to create a work space for each user where they have the option of moving about 10 to 15 container boxes freely into that workspace and save their positions so when the users login again they stay in the same order. The boxes will contain some graphics, static text, js and a form. How would i go about this ?

Thanks you!

Hi I'm having trouble acheiving something with a landing page.

I'm trying to get a 'full bleed' efect with a header, body, footer type of thing.

I attached a mockup and folder with html/css/images for the landing page for reference

For some reason I can't get the white background. I had it working fine when i first started writing the code, and as soon as I created a LEFT and RIGHT div column it disappeared.

Any advice?

Thanks!

Hi guys,

All of my pages are centered in the middle of the screen except my contact_us.html page which shifts half a centimeter to the right (still in the middle of the page but it moves slightly).

This page contains a form inside a table.

Why does it move??

I can put code up if the answer cannot be resolved from the info provided

Thanks,

Raggy

Hello.

I am designing a website with a lot of partially transparent PNG images, so I am using multiple <div> containers with CSS positioning to create my page layout, so certain images overlap the background content for visual effect.

I've run into a problem, though. I wanted to place an iframe inside of a <div> container, so that I can load external content into the iframe, yet position the iframe using CSS, rather than tables.

Unfortunately, all of the "content" pages that load into this iframe-in-a-container lose their functionality -- rollover images won't load and links won't underline or activate when the cursor hovers over them.

Is this because the iframe is inside of a <div> container? The same iframe code works fine if placed in a table, or directly in the body of the HTML, so I suspect that's the probelm. Does anyone know if that's just one of the limitations of using containers, or is there a workaround that would allow me to do what I wanted to do?

If not, I'll just make my main page layout with tables, stick the iframe in a cell, and use <div> containers for the rest of my transparent images.

Thanks for any suggestions!

I want to know how to make a div stretch to the full height of a container! Here is the html:

Code:

<!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>
<title>This site is currentely out of order! Chack back later.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container" style="display:block">
<div id="leftside" style="display:block"><img src="images/leftside.gif" alt="" /></div>
<div id="logo" style="display:block">
<img src="images/logo.gif" alt="" width="315" height="140" title="" />
</div>
<div id="content" style="display:block">
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</body>
</html>

And then the css:
Code:

/* START - Master */
div {display:none} /* Keep NO MATTER what - Keep at top */
body {background-color:#000000; background-image: url('images/watermark.gif'); background-repeat: no-repeat; background-attachment: fixed}
#container {width: 85%; margin-left: 7.5%; background-color: #666666; color: #030303}
#leftside {float: left; min-height: 100%; height: 100%; background-image: url('images/leftside.gif'); background-repeat: repeat-y}
/* END - Master */

/* START - Header - No change */
#logo {width: 85%; margin-left: 7.5%; background-color: #7B7B7B; text-align: left; font-size:15pt; border: none}
/* END - Header - No change */


/* START - Content */

/* END - Content */


/* START - Footer - No change */

/* END - Footer - No change */

The "leftside" image is supposed to be the full length of the header + content.

Thanks!

Sorry if my title sounds a little strange lol.

I've been designing a layout for a new site of mine, and I decided to (attempt to) comply with XHTML guidelines, and use DIV's rather tables.

I've got a container div, which contains a couple more divs, such as for the header, left navigation, content etc. Problem is, the left navigation bar is going to be quite long as I plan to include a skyscraper ad underneath the navigation bar, if possible. I've put the left navigation bar inside the content div (as you can see in the pictures coming up)...so when there's not much content, because the left nav will be so tall the left nav extends beyond the content box - I was hoping to find a way to make the content div stretch to accomodate this.

It strangely works as desired in IE7 (http://img515.imageshack.us/img515/7070/ie7ix9.jpg), but in Firefox it doesn't ( http://img180.imageshack.us/img180/2480/ffow1.jpg)

Is there any way to make the content div expand with the left nav div?

Thanks very much

Source code:

Code:

<html>
 <head>
  <style type="text/css">
  body {
  	background-color: #272727;
	color: #FFFFFF;
	font-family: Verdana, Sans-Serif;
	font-size: 10px;
	margin: 0px;
	padding: 0px;
	text-align: center;
	}
	
  h1 {
  	color: #adc203;
	font-size: 14px;
	text-align: center;
	
	}
   a:link {
	color: #adc203;
	}
   
   a:hover {
	color: #444444;
	}
	
   a:visited {
	color: #bbc758;
	}
	
  .container {
  	width: 775px;
  	background-color: #1a1a1a;
	margin-left: auto;
    margin-right: auto;
	}
	
  .header {
  	width: 775px;
	height: 141px;
	}
	
  .logo {
  	width: 611px;
	height: 141px;
	float: left;
	}
	
  .login {
    background-image: url(images/login.png);
    width: 164px;
	height: 141px;
	float: right;
	}
	
  .content {
  	background-image: url(images/content.png);
	width: 775	px;
	background-repeat: repeat-y;
	text-align: left;
	}
	
   .innercontent {
    padding-left: 25px;
	padding-right: 25px;
	}
	
   .linkbox {
	margin-top: 5px;
	margin-right: 15px;
	width: 160px;
	background-color: #151515;

	float: left;
	font-size: 14px;
	}
	
	.linkbox div {
	padding: 5px;
	padding-top: 0px;
	}
	
   .linkbox h1 {
	color: #adc203;
	font-size: 14px;
	text-align: center;
	}

   .linkbox a:link {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding-left: 5px;
	}
   .linkbox a:hover {
	color: #FFFFFF;
	background-color: #abc203;
	padding-left: 5px;
	}
   .linkbox a:visited {
	color: #bbc758;
	padding-left: 5px;
	text-decoration: none;
	}

   .googlebox {
   float: left;
   clear: left;
   margin-top: 10px;
   margin-right: 15px;
   width: 160px;
   height: 600px;
   background-color: #161616;
   }
  </style>
 </head>
 <body>
  <div class="container">
   <div class="header">
    <div class="logo"><img src="images/logo.jpg" alt="DesignersVAULT" /></div>
    <div class="login">Test</div>
   </div>
   <div class="content">
   <div class="innercontent">
    <div class="linkbox">
    <div>
      <h1><span style="color: #444444;">designers</span>vault</h1>
	  <a href="link.html">Home</a>
  	  <a href="link.html">Contact Us</a>
	  <a href="link.html">Suggest A Feature</a>

  	  <h1>tutorials</h1>
	  <a href="photoshop.html">Photoshop</a>
      <a href="photoshop.html">XHTML</a>
      <a href="photoshop.html">CSS</a>
      <a href="photoshop.html">PHP/MySQL</a>
      <a href="photoshop.html">General Design</a>
      
      <h1>layouts</h1>
	  <a href="photoshop.html">Free</a>
      <a href="photoshop.html">Premium</a>
      <a href="photoshop.html">Designed For You</a>
     </div>
  	</div>
    <div class="googlebox">
 
    </div>
   	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula. Nam nec nunc sed nunc malesuada pretium. Curabitur at augue. Sed pede est, ultrices sit amet, semper quis, venenatis a, turpis. Nam fermentum neque in tortor. Proin tortor. Suspendisse posuere. Duis gravida nulla a lectus. Vestibulum porttitor aliquet lorem. Morbi tortor. Fusce elementum. Quisque scelerisque mauris vitae mi. Ut et orci id augue sollicitudin auctor. Proin urna. In nibh purus, gravida vel, vehicula nec, vulputate eu, quam. Donec quis dolor. Aenean sed arcu at lectus imperdiet sodales. Pellentesque egestas. Praesent id augue. Maecenas nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed risus. Cras non ipsum. Duis mollis auctor nulla. Integer ornare orci a lorem. Praesent eleifend. Sed ac ligula et est faucibus rutrum. Aliquam felis. Sed elementum tempus erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam lacinia massa et augue. Integer vel augue id arcu viverra tincidunt. In hac habitasse platea dictumst. Nunc sodales ante et nunc. Vivamus posuere. Morbi ipsum. Aliquam fermentum sollicitudin felis. Sed varius dolor ut leo. Duis consectetuer urna id eros. Suspendisse ut ante. Maecenas quis diam. Phasellus fringilla velit. Praesent interdum rhoncus tortor. Fusce sollicitudin. Mauris a nibh nec mauris tincidunt rutrum. Mauris malesuada, tellus in accumsan dignissim, quam ligula tempor enim, interdum feugiat nisi risus in elit. Vestibulum sapien. Aliquam erat volutpat. Sed id sem ac justo laoreet elementum. Aliquam urna. Curabitur felis. Nam sed purus non lacus hendrerit aliquet. Sed a urna a metus luctus venenatis. Aenean purus ante, rutrum eu, hendrerit vitae, tincidunt quis, nisi. Duis pellentesque, justo at malesuada vestibulum, urna dolor cursus mauris, eget luctus eros massa et purus. Nam magna. Ut aliquam sodales purus. Vestibulum ut augue sit amet est elementum lacinia. Vestibulum tempor est a magna. Nulla luctus pellentesque diam. Aenean elementum turpis et tortor. Maecenas feugiat rutrum erat. Nullam ac elit. Donec auctor gravida ligula. Vivamus posuere dui a arcu. Suspendisse potenti. Morbi dolor augue, sagittis quis, accumsan quis, aliquam molestie, enim. Phasellus faucibus odio id neque. Curabitur iaculis ligula ac purus. In quis ante ac ante bibendum vestibulum. Etiam a lacus id est rhoncus ultrices. Morbi vitae magna et erat porttitor luctus. Aliquam erat volutpat. Curabitur sit amet sapien sit amet nulla faucibus accumsan. Nam ornare, mauris vel dignissim commodo, risus dolor scelerisque purus, viverra porta lectus tortor quis mauris. Etiam at turpis eget nisi cursus pulvinar. Suspendisse ultrices. Vivamus blandit scelerisque odio. Curabitur fringilla eleifend nisi. Quisque vel purus vitae turpis auctor iaculis. Maecenas est pede, malesuada vel, adipiscing semper, adipiscing quis, tortor. Donec vitae nisl vel dolor lacinia sodales. Sed tempor. Nullam congue condimentum ante. Suspendisse blandit, nulla quis condimentum varius, tellus est posuere augue, a suscipit sem nulla dictum orci. Nunc sagittis turpis at ante. Donec sit amet massa et nulla lacinia mollis. Donec blandit, justo et faucibus tincidunt, pede massa eleifend tellus, id tristique mi nulla a nibh. Quisque commodo lacus nec diam. Aliquam suscipit. Aliquam a ante. Integer tincidunt purus vel pede. In hac habitasse platea dictumst. Etiam at nisi quis velit scelerisque ultricies. Sed dui lorem, fringilla sit amet, ultrices blandit, auctor a, magna.
   </div>
   </div>
  </div>
 </body>
</html>

Hi,
I need to embed some HTML content in a container, so that the content's elements anchored at absolute position 0 will actually follow the container's position. What should I use as container? Frame, DIV, IFrame?

Thanks!

Hi, I just got back into HTML and CSS and stuff for a new project after a lengthy absence. I'm also trying out PHP for the first time and having a lot of fun with it, but I'm having problems as usual. This doesn't have to do with PHP per se, but if PHP is involved in the solution that'd be just fine. By contrast, I'd like to avoid Javascript, since a lot of people have it disabled by default.

One of the things that's always irked me about CSS is how it seems to be completely impossible to define an element's width/height based on its container's width/height without using percentages or without weird things happening when you use padding. Say I want to do one of the simplest things imagineable -- define a rectangular area within the page, with 25 pixels both to the left and right of it, and 12 pixels above and below it, no matter what the browser window's size is.

While it's no task to set the rectangle's position relative to the body of the page (using left and top, or whatever), deciding its width or, particularly, height seems to be impossible. 100% - 25px is, sadly, not allowed, even if I incorporate PHP, since PHP has no way of telling what the 100% actually represents. I've been puzzling over this for the last couple hours, and after a great deal of fiddling with alignments, margins, padding, and such, these two pieces of really simple HTML are the best I could do, and they're both flawed:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style type="text/css">
	<!--
		body
		{
			margin: 0px;
			padding: 12px 25px 12px 25px;
			background-color: darkblue;
		}
		
		#inner_box
		{
			position: relative;
			width: 100%;
			height: 100%;
			background-color: lightblue;
		}
	-->
	</style>
</head>
<body>

<div id="inner_box">
	Text
</div>

</body>
</html>

Paste that into a HTML file to see what I'm talking about graphically. The problem here is clearly that, for whatever reason, the 100% height in inner_box doesn't activate and inner_box ends up only as high as a single line of text allows. I don't know why. But in this next example...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style type="text/css">
	<!--
		body
		{
			margin: 0px;
			padding: 0px;
			background-color: darkblue;
		}
		
		#outer_box
		{
			position: absolute;
			margin: 0px;
			padding: 12px 25px 12px 25px;
			width: 100%;
			height: 100%;
			background-color: lightblue;
		}
		
		#inner_box
		{
			position: relative;
			width: 100%;
			height: 100%;
			background-color: white;
		}
	-->
	</style>
</head>
<body>

<div id="outer_box">
	<div id="inner_box">
		Text
	</div>
</div>

</body>
</html>

Here I've fixed the problems with the first snippet by adding a new container (outer_box) with absolute positioning that covers the entire body area. inner_box goes inside it and tries to act like it did in the first example. Unfortunately, for some reason, outer_box doesn't act like the body tag did in the first example -- when padding is added to it in order to position the elements within it, outer_box expands itself instead of just resizing inner_box, like the body tag did.

I've done a lot of experimenting and I simply can't find the solution. All I want is a page with a few pixels of blank space to all sides of a floating rectangle. I uploaded a couple of doctored image samples of what the page should look like, but doesn't: here and here.

Anyway, in summation, this is driving me nuts. I know I could probably use Javascript to get the container (body or outer_box)'s width, and go from there, but like I said, I'd rather avoid Javascript. There has to be a better way to do this.

Any help would be very welcome.

EDIT: After some more experimenting, I've discovered something interesting. If I declare example 1's doctype to be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

then it works properly. The same cannot be said for example 2. And I really can't tell why. I guess HTML forgives something that XHTML doesn't. Also, example 1 doesn't work if I include the HTML doctype's URL:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Strange. Anyway though, it's important to make example 2 work since I would usually be working with containers within containers, not just within the body tag. So I still haven't solved my problem.

The layout of this page I'm making requires a centered table, 800 pixels wide and 100% high. I am having huge problems making it fill the entire height of the page though, it just stops rather than going right to the bottom of the page.

It's a 4.01 transistional compliant page if that's relevant. Here's a link to the page.

Here's a link to the page (apologies for the file size)
link to page

I want the dark green center section, and the two side cells with tiled graphics to extend right down to the bottom of the page, regardless of height. The center table with the graphics can stay where it is or vertically center, I don't mind about that. I also need it to have no vertical scrollbar when it's viewed fullscreen. If I remove the doctype, it works fine, but I'm wondering if there's a way to have it vaild for that doctype and still look ok?

I've tried everything I can think of and am not turning up anything useful with web searches, if anyone can tell me where I've gone wrong and if this is possible to fix in html, I'd really appreciate it. I can't use CSS, and the doctype has to be as it is, because that's what the specs say (it's for an html class).

Thanks for any help.