|
CSS - Position Div Not Within Container
I want to position my website logo to top left corner (0,0) and I dont want it push my container div down. I cant place logo tag within container tag because the logo overflows to left. if you couldnt picture it in your mind, please check the attached image
thank you in advance. http://www.refinethetaste.com/html/ Similar TutorialsHoping someone can help. I'm trying to figure out a way to align something to the left of an existing element within a container of variable height. The existing element is already aligned to the left edge of the container. To be more specific, I am trying to place a helper graphic to the left of the email text-field in the "Leave a Comment" form (not the "Email this Zing" form) on this page: http://www.zingfu.com/?zing=4419693e9e98f If it's possible to the place the helper graphic right next to the text field in the code, but then to break it out of the container div to move to the left of the text field, that would be great. Or if I could apply positioning to the helper graphic based on the positioning of the text field, that'd be fine too. But I'm not sure if either is possible. Little help? Hello; i'd like to ask you how to set the smiles of the images to the center of a container? please. my code as following; Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>welcome to my page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
#container
{
padding: 1px;
border: 1px;
width: 150px;
background-color: lightblue;
margin: auto;
}
#container p
{
padding: 0;
margin: 0;
text-align: center;
}
#smile ul
{
margin-left: 0;
padding: 0;
text-align: center;
}
#container li
{
display: inline;
list-style: none;
text-align: center;
margin:0;
padding: 0;
}
#container img
{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id= "container">
<p> smile </p>
<ul id="sul">
<li> <img alt="h" src="honorhim.jpg" >
<li> <img alt="c" src="cool.gif" >
<li> <img alt="t" src="tongue.gif">
<li> <img alt="s" src="smile.jpg">
<li> <img alt="z" src="zall_coho.gif">
<li> <img alt="b" src="biggrin.gif">
<li> <img alt="con" src="cool.gif">
<li> <img alt="r" src="razz.gif">
</ul>
</div>
</body>
</html>
Hi, I'm trying to do something that is simple with table cells but which I'm finding difficult using CSS. Basically I have a container div that is 400px height. I want to position 3 divs in a row (float: left) at the bottom of that div and put an image in each of them. So, in short... <div id="outer"> <div id="inner1"><img src="x.jpg" /></div> <div id="inner2"><img src="y.jpg" /></div> <div id="inner3"><img src="z.jpg" /></div> </div> ...where the three images are bottom aligned. I want to have the images in their own div containers so that I can give each of their boxes 33% of the screen width and set apdding if required. No doubt I'm approaching this the wrong way. Can anyone help? Thanks, Pat I am working with a dynamic page of search results where a link that should reveal a hidden layer could occur multiple times. My problem is that I need the popup layer to position relative to the link that called it, NOT to the whole page. Right now, now matter which link is clicked it shows up in the same place on the page. I have found many examples where this is the desired effect, multiple links affecting a single result area, but I can't find an example for what I need. It's similar to a sub-menu being relative to a drop-down parent, but those all seem to use lists. This shouldn't be that complicated! Thanks for any help! Here is what I've got: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Popup Test</title> <style type="text/css" media="screen"><!-- div#outer { position: relative; display: none; margin: 0; } .inner { padding-bottom: 4px; background-color: #ccc; text-align: center; position: absolute; left: 0px; top: 30px; width: 256px; border: solid 1px #333; } .inner img { border: 1px solid #333; } --></style> <script type="text/javascript"> function toggleLayer(whichLayer) { if (document.getElementById) { // this is the way the standards work var style2 = document.getElementById(whichLayer).style; style2.display = style2.display? "":"block"; } else if (document.all) { // this is the way old msie versions work var style2 = document.all[whichLayer].style; style2.display = style2.display? "":"block"; } else if (document.layers) { // this is the way nn4 works var style2 = document.layers[whichLayer].style; style2.display = style2.display? "":"block"; } } </script> </head> <body> <table width="740" border="0" cellspacing="0" cellpadding="0"> <tr valign="top" height="100"> <td class="searchresult" colspan="2" valign="top" width="740" height="120"> <div id="outer"> <div class="inner"> <a href="javascript:toggleLayer('outer');" title="Click to Close"><img src="http://www.google.com/images/logo_sm.gif" alt="Google" height="55" width="150" border="0" vspace="3"><br> Close</a> </div> </div> <a href="javascript:toggleLayer('outer');">popup link 1</a> </td> </tr> </table> <table width="740" border="0" cellspacing="0" cellpadding="0"> <tr valign="top" height="100"> <td class="searchresult" colspan="2" valign="top" width="740" height="100"> <div id="outer"> <div class="inner"> <a href="javascript:toggleLayer('outer');" title="Click to Close"><img src="http://www.google.com/images/logo_sm.gif" alt="Google" height="55" width="150" border="0" vspace="3"><br> Close</a> </div> </div> <a href="javascript:toggleLayer('outer');">popup link 2</a> </td> </tr> </table> </body> </html> Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Hello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
Hello, I am asking this here because maybe you people have seen something like this before. I am trying to create a container that will contain other div boxes. These boxes could have differen width and heigths, and I would like thos container to handle there position. I do not know if this is even possible, another solution would be that you put the boxes in the container and determine how many you want to display in one line. However thanks for any sugestions, regards, sim085 Firefox is giving: http://www.promogift.be/index.php?page=producten&catnr=7 So it shows the content out of his box, after a refresh everything is correct, how can i get it working from first loadtime? I am a new user to the board and apparently cannot make posts containing URL's. Examples illustrating my issues described below are at ...lilinks.com /gp/css_prob/kickboxing.html I want to get the vertical scrolling images to consistently display from the top of the page and terminate at the top of the black footer. Similar image scrollers will appear on other pages that will be of varying depth (follow the 'Brazilian Jiu Jitsu' link for an example) Right now I have one 'container' that would be used for all the pages. I could create separate 'containers' for each scroller and set the height in pixels, but of course I cannot control browser settings, OS, etc. So my basic question is how can I contain the 'container' to 100% of the main content area without exceeding it. I want it to look like this: /gp/css_prob/kb.jpg The style sheet is he /gp/css_prob/css/test.css Thank you in advance for your assistance. I'm not sure where I'm making my mistake but I can't seem to get the boxes inside the container to stay at 100%. Here is the css code Code:
body {
margin: 0; /* zeroes the margins on the body */
padding: 0; /* zeroes the padding on the body ~ Opera carries a default
padding and requires this zeroing */
border: 0; /* zeroes off any existing border */
text-align: center; /* Hack to center the wrapper in IE5.x pc */
background-color:#BB7900;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}
/* START OF LAYOUT FOR LITTLECREATIONSPHOTOGRAPHY.COM */
.wrapper { /* This is the block that contains all other blocks */
width:100%;
height:100%;
position:relative;
border:1px solid black;
}
.top_menu { /* This is the box that will contain the link at the top */
height:80px;
width:100%;
border-bottom:1px solid white;
}
.middle_container { /* This is the container box that keeps everything right width and center */
position:relative;
width:750px;
height:100%;
margin:0px auto;
z-index:0;
border:1px solid white;
z-index:1;
}
.left_content { /* This the the left hand on content box */
position:relative;
float:left;
height:100%; /*546px;*/
width:160px;
text-align:left;
padding: 2px 4px 2px 2px;
border-right:1px solid white;
z-index:2;
}
.right_content { /* The box that will contain right hand content, company title and picture */
position:relative;
height:100%;
margin-left:160px;
text-align:left;
padding:4px 2px 2px 10px;
border:1px solid black;
}
And here is the link that will show you want it looks like right now. http://littlecreationsphotography.com/css/ Thanks for any help that may come my way.. Stephen here's my site for reference. http://www.tobaccosmokeshop.com/temp.htm here's some code PHP Code: #breakfootercontainer{ clear:both; border:solid 1px red; background:url(images/navback.gif); background-repeat: repeat-y; padding:0px 0px 0px 189px; width:100%; } #footer{ border:solid 1px green; float:left; width:562px; text-align:center; } breakfootercontainer is a div that spans the whole width of my site, but pads over for my navigation bar. The problem is, In IE the container holds the footer, but in Mozilla (PC) and on my mac in safari and Mozilla the container is only like 0 px height and the footer div pops over the bottom border on the container. Here's my code I'm using. PHP Code: <div id='breakfootercontainer'> <div id='footer'> <a href='' class="mainnav">duplicate nav</a><br> <a href='' class="mainnav">duplicate nav</a><br> <a href='' class="mainnav">duplicate nav</a><br> <a href='' class="mainnav">duplicate nav</a><br> </div> </div> What is causing the container to not fill around the info inside the footer? Also, I have 2 columns(red border around field picture and welcome column and the nav with the blue border) with a container around them (big white border around both), one shorter than the other (the red border column), but I want the shorter one to go the full length of the container (white border) so my column backgrounds line up and part of the page isn't longer than the other. I want to use my footer as a cap all the way across the page. Is there any way to do this without putting <br>'s in the smaller container to fill it out? I have the following: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My page </title>
<style type="text/css">
#content { width: 100%; float: left; margin-right: -1px }
.content_container { clear: both; }
.content_header_even, .content_header_odd { width: 100%; background-color: #69bfde; color: #595441; padding: 0.5em 0; text-indent: 1em; }
.content_header_odd { background-color: #b4e8fb; }
.content_graph_container { padding: 1em; }
.content_graph_container_even { background: #ff0000; }
.content_graph_container_odd { background: #00ff00; }
.content_info { width: 20em; float: left; }
</style>
</head>
<body>
<div id="content">
<div class="content_container">
<p class="content_header_even">Header</p>
<div class="content_graph_container content_graph_container_even">
<div class="content_info">
<p>This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. </p>
</div>
</div>
</div>
</div>
</body>
</html>
Ideally, this will repeat and alternate colors but the text is not colored only a small section above the text. I thought that by enclosing it in the div, the background would be applied to the entire text. What am I doing incorrectly? Please see: http://www.larreamma.com/staff2.html Is there a better way to expand 'main2' then adding/increasing the 'margin-bottom' of the last (empty) paragraph? <p style="margin-bottom:150px"> </p> Without it the bottom floated image overlaps 'main2' and meets the footer. This was not an issue on the other pages of the site as the text extended beyond the floated image(s)/elements. C'mon Kravvitz... Hi all, Helping out a buddy, but am stuck myself. Possibly simple fatigue. At this site, I'd like to move the entire center container up so that it's only about 20px below the very top. As of right now, when I do this, the top BG image disappears. As you can see from the CSS, there's actually two BG images. I don't want that, I merely want the center container to cover the BG. How, please? Thanks! Chris I got a bit of a problem, I don't know if this is possible but I want a container that resizes depending on the content inside it. BUT I want the rest of the containers to be the same size as the biggest. I.e. --------- --------- --------- --------- | | | | | | | | | | | | | | | | | | --------- --------- --------- --------- See the first one is bigger? Well I want the rest to be of the same size, i.e. --------- --------- --------- --------- | | | | | | | | | | | | | | | | | | | | | | | | --------- --------- --------- --------- I've losing my mind on this. When I look at the following layout in IE6, the "matterR" DIV background color is filling up the entire "content" DIV -- as opposed to staying in its container DIV ("columnR") like I need it to. Any idea why it's bigger than it's container DIV? Code: #content { margin-right: 10px; margin-bottom: 5px; margin-left: 10px; width: 780px; overflow: hidden }
#columnR { width: 595px; height: 308px; float: right; overflow: auto }
#matterR { background: #6d6f71; padding: 20px 20px 40px 70px }
<div id="content">
<div id="columnR">
<div id="matterR">Scrolling text content here...</div>
</div>
</div>
Keep in mind that I can't really assign a pixel width to "matterR" -- as its container DIV needs to scroll vertically. It seems if I assign a pixel width, it want to scroll horizontally to compensate for the scrollbar. Any ideas? Thank you! Hi All, I am trying to get the container div to contain the contents of the page, so that if someone has a lower res browser / reduces the size of the page, the whole thing colapses inwards. I simplly cannot get it to work! In IE it does not shrink, in FF the container shrinks, but the elements inside it dont. Charlie Hello all, I'm trying to create a site using all css positioning but I'm running into some problems that to me, shouldn't even be problems. The main issue I'm having is getting a container div's height to expand based on the height of divs nested inside the container. Vut all I get is the nested divs flowing outside of the container div. I don't have any code to share, because I have it so screwed up right now it wouldn't even help explain my issue. I'm going for a 3 column design, that is wrapped by said container div, and the container divs height would be based on the height of the longest div nested within. I've done alot of searching on the web, and the answer seems to be that this can't be done. But I'm giving it one more try here. I'm also a bit confused about relative positioning. Say that my conatiner div actually worked, and the height adjusted appropriatly. I have a left column, and a right column. both are position relative to the container. But when I do this, it seems to come out that the right columns top positioning is relative to the left columns positioning. If I design everything based on viewable browser area, and allow scrolling when necassery, css is a dream. But thats not very practical. It seems that css great for static websites, but not quite up to par for anything dynamic. Once I calm down and I'm not so frustrated, I'll start over and post some code if my explaination isn't descriptive enough. Any input would be appreciated! :-) |
|||||||