HTML - Center A Container Top To To Bottom

I'm pretty new to all of this and need some help trying to load a swf file in a container.

What I have is a thumbnail gallery where I have thumbnails on the right side of the page and when you click on the thumbnail it pops on the left side of the page in a container. So what I want to do is keep the same format so you can click on the thumbnail then the swf file appears instead of an exploded image. This is what I have.

Also I appreciate any and all help, thank you.


<style type="text/css">
img { border: 0px }

#container {
text-align: center;
border: 0px;
margin: 0 auto;
padding: 0px
}

#leftcol img {
}

#rightcol img {
}

</style>





<td width="80" height="421">&nbsp;</td>
<td width="673"><div align="center"><img src="images/AF.jpg" name="ImageOnly" align="absmiddle" /></div> </div></td>
<td width="71">&nbsp;</td>
<td width="318" valign="middle"><div id="leftcol">
<div class="root" id="root0">
<div class="scrollContainer" id="scroll0Container">
<div class="scrollContent" id="scroll0Content">
<p>
<a href="#" onclick="ImageOnly.src='images/Asylum_5.jpg'"><img src="images/Asylum_5_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/Asylum_1.jpg'"><img src="images/Asylum_1_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/Asylum_2.jpg'"> <img src="images/Asylum_2_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/Asylum_3.jpg'"><img src="images/Asylum_3_thumbnail.jpg" /></a>
</p>
<p>&nbsp;</p>
<p>
<a href="#" onclick="ImageOnly.src='images/kerryn_5.jpg'"><img src="images/kerryn_5_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/kerryn_6.jpg'"><img src="images/kerryn_6_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/kerryn_7.jpg'"> <img src="images/kerryn_7_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/kerryn_8.jpg'"><img src="images/kerryn_8_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/kerryn_9.jpg'"><img src="images/kerryn_9_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/kerryn_9.jpg'"><img src="images/kerryn_movie_thumbnail_2.jpg" /></a> (this is where I want to add it)
</p>
<p>&nbsp;</p>
<p>
<a href="#" onclick="ImageOnly.src='images/f_h_5.jpg'"><img src="images/f_h_5_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/f_h_6.jpg'"><img src="images/f_h_6_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/f_h_7.jpg'"><img src="images/f_h_7_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/f_h_8.jpg'"><img src="images/f_h_8_thumbnail.jpg" /></a>
</p>
<p>&nbsp;</p>
<p>
<a href="#" onclick="ImageOnly.src='images/football_1.jpeg'"><img src="images/football_1_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/football_2.jpeg'"><img src="images/football_2_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/football_3.jpeg'"><img src="images/football_3_thumbnail.jpg" /></a>
<a href="#" onclick="ImageOnly.src='images/football_4.jpeg'"><img src="images/football_4_thumbnail.jpg" /></a>
</p>
<p>&nbsp;</p>
</div>
</div>
</div>
</div>


I hope I'm posting in the right section. Again thank you for any help.

hey forum,
does adding an image with a link in a div container make it null??
Problem:
PHP Code:
<div id="container">

<div id="top-left-box"><img src="images/rss_tab.png" width="201" height="45" longdesc="http://betyoulikeit.com/tinc?key=gNu6zzEm"></div> 


look cottonhead no slices
thanks...
-tikki-

Okay so I'm trying to get cutenews to post in rows, and I know I've done it before utilizing a div container, but I can't remember what it was I did lo those many years ago.

Can anyone help me out? I'm looking for an end result like this

Much appreciated anyone who gives this a look and/or reply =]

Hey all,

I've been trying to look this up on google but all I get as results are unanswered posts, so I'm here to ask...

If I set up a blog (on an existing blogging site) or even created a standalone XML file, would I be able to parse that data into a DIV container?
If so, how would I go about getting it to work?

Thanks in advance,

- M

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.

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

Any suggestions?

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

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, 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!

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!

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!

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!