|
HTML - Container Div Problems
My container kinda works, but kinda doesn't. I've had this problem before and I can't remember how I solved it, anyway..
My container is keeping my "reading" and "sidebar" divs in place, but the background of the container div isn't following down the other divs, it's just on top of the container. Here's my website : http://djance.net/wordpress (the layout is NOT done if you were wondering). And my Css : http://djance.net/layouts/14/css.style I think it's the Css, but anyway Help appriciated ! Similar TutorialsI'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"> </td> <td width="673"><div align="center"><img src="images/AF.jpg" name="ImageOnly" align="absmiddle" /></div> </div></td> <td width="71"> </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> </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> </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> </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> </p> </div> </div> </div> </div> I hope I'm posting in the right section. Again thank you for any help. 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 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- Hi, I recently created a landing page for my site but cannot seem to adjust the alignment of the main container element. I want to try and centre the main container vertically by putting a margin at the top. However, it will only let me put in a maximum of 10px margin? If someone could show me how to do this I would be very grateful. The url is http://www.amokcuisine.com and I hope you will see what I am getting at! Thanks GG this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon 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 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 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? 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 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 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! 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 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 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>
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! Hi all, Current code available for viewing he http://www.joomlatemplatesearcher.com/testtemplate/ I'm trying to position a div so that it sits (near) the bottom of a container. I'd assumed position:relative / bottom: 10px would do the trick, but no joy, and I can't figure out why that's not aligning. If anyone could offer help, I'd be very appreciative. Ultimately I'm trying to get the aqua-coloured box sitting inside the black area of the monitor (aligned from the bottom, as the div containing the monitor background is bottom-aligned to a container with variable height. Any suggestions greatly appreciated. With thanks, - SuperGrover |
|||||||