Search the Entire Site
|
CSS - Pushing The Positioning Of An Element Out Based On Content-length Of Earlier Element.
Topic
Hi,
My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim Similar TutorialsHi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim Hey guys, I'm now truly understanding why all my tech friends constantly talk about how much they hate IE. Anyways, im working on a site and am trying to add a corner element to one of my divs. It works perfect in firefox... but in IE it pushes the table below it and adds like a 2px wide sliver to the right of the img. Here is the table layout Code:
<div class='wrapp'>
<img src='Images/tr.gif' />
<table style='width:100%;'>
<tbody>
<tr class='time'>
<td colspan='6' style='text-align:left;'>" . date('F d Y',$key[5]) . ", " . date('g A T',$key[5]) . "</td>
</tr>
</tbody>
</table>
[/div]
Then here is the related CSS codes to make the image float to the right. Code:
.wrapp {
margin-bottom:8px;
width:354px;
text-align:center;
}
.wrapp img {
float:right;
display:inline;
}
table {
margin-left:auto;
margin-right:auto;
}
So once again what im trying to do is have the corner img show on the top right corner of the wrapp div. It works perfect in firefox but again it does not work in IE... and I have read about 20 articles on google that talk about these problems but I just can't figure the right combination out to make it work. Thanks in advance for any help! How can I position several elements, relative to the position of another element? I tried this: <div> Test <span style="position:relative;top:40;left:40">Foo</span> <span style="position:relative;top:40;left:40">Bar</span> </div> I want both Foo and Bar to be 40 pixels to the right and below of Test. But they appear next to eachother instead of stacking on top of eachother. How can I position them "relative" to the div tag? I was under the understanding that an element positioned absolutely is positioned in context to the closest parent object that has positioning of absolute or relative, and barring that, the body. I have quite simple code: html4strict Code: Original - html4strict Code <div style="position:relative; height:50px; width:250px; background:#69c;"> <input type="text" style="position:absolute; top:5px; left:0; right:0;"> </div>
I would expect this to be top-aligned with 5 pixels of blue showing, and stretched the width of the containing div, but it's not. It's the correct height from the div but not the sides of the container - can anyone tell me why that is, or what should be done ( short of width:100%; )? Thanks, Brett I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. Hi everyone, I would like to position several <div> elements in relation to image <maparea>'s on top of an image. I have an image with several small icons on it that have information related to it. The information related to the icon can change pretty often, so I want to have that information text based so I can update it easier. Does anyone have an idea of how I could position those <div> elements in relation to the hotspot? I haven't really had much experience with 'relative' positioning, but with 'absolute' positioning I've always had issues with Netscape/Mozilla browsers displaying the elements about 10px off of where they look in IE. Is there any way around this? I'm all ears to any advice you may have. Brian Please look at http://www.rodstrans.com/diagnosis/body_leaks.html In IE & Chrome the checkboxes are positioned absolute in each table cell, but in Firefox they all bunch at the top left. I have put a position:relative on all parent elements and can not figure out what is happening. Please look at the carousel at the bottom of this page - www.mts-diesel.com What I would ultimately like to do is have it such that each image is vertically centered in the yellow box? Can this be done w/out use of a table cell? Thanks. Tom I am working on a site right now. I have two adjacent divs, one on top of the other. Both are styled with margins and padding set to "0." I want the second div to be directly below the first with no spacing. If I include a single-pixel border on the second div, the elements touch with the border being the only thing between the first and second div. Without the border, there is a space of what I believe to be 20 pixels. I don't want to actually use the border so I'm not sure what to do. I don't understand why the page is behaving this way. Feel free to check it out at kellyshipe.com. I would have linked but forum rules evidently prevent it. Hi guys, I'm changing a simple page from a table style layout to CSS Positioning style. Here's a common line...it's working fine in IE, but not in Firefox (which immediately tells me there's something wrong with my coding). The code is: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Overflowing Box</title>
<style type="text/css">
div.row{
padding-top : 10px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
}
.image{
float : left;
font-weight : bold;
width : 210px;
}
.description{
float : right;
width : 235px;
}
</style>
</head>
<body>
<div style="width: 450px; background-color: #cc9;
border: 1px dotted #333; padding: 5px;
margin: 0px auto">
<div class="row">
<div class="image">An image will go here</div>
<div class="description">
<strong>Heading:</strong> Text <br>
<a href="http://www.somesite.com" target="_blank">http://www.somesite.com</a><br>
<br>
This is some meaningless text. This is some meaningless text. This is some meaningless text. This is some meaningless text.<br>
<br>
This is some meaningless text.
This is some meaningless text. This is some meaningless text. This is some meaningless text. This is some meaningless text.<br>
<br>
This is some meaningless text.
This is some meaningless text. This is some meaningless text. <br>
<br>
</div>
</div>
</div>
</body>
</html>
It's a very simple example, but for some reason, the container doesn't "expand" in Firefox as I'd expect. I've hunted around the web, played around and tried some of my other code to no avail. Am I missing the simplest of attributes? Any help would be GREATLY appreciated. Thanks in advance! Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! I want to change this: LIST-STYLE-TYPE: square; I want to show a picture in the place of that square. Can this be possible? Hi there, Need some CSS guru help. If you visit my link: http://www.gabbr.com/js/viewer/cmedata/index1.html and hover over the years (top middles, 2008, 2009, 2010, etc) you will notice an orange bar extending from the top to the bottom of the page. I am trying to get the same effect on the left (month and day) but am unable to do so. The problem I am having is that I cannot get the orange hover bar to extend off the left of the screen for either #dayleft or for #monthleft. It extends all the way to the right margin of the screen but not the left. The problem is the margin-left: 15px; in #monthleft and margin-left: 80px; in #dayleft. But I cannot get rid of these since I require them for the letter spacing. Any advice? Hi, I've been designing a page that is basically made of a box that sits dead center on the page (horizontally and vertically centered). The only way I have come up with doing this is by using the following code: Code: <table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<div id="centeredDiv">
This text will sit right in the middle of the page
</div>
</td>
</tr>
</table>
I was thinking that there must be a way of doing this with CSS (without using tables) to make it a bit more tidy and standards compliant as I am laying out everything within the centeredDiv with CSS positioning. Thanks in advance, Matthew Dingley I have been trying to work a lot with CSS3 to rotate, scale, etc. One effect I've been trying to figure out is how to stretch something. I could scale it along the y axis but that's not really stretching. A stretch would mean the top and bottom (or left and right) sides would curve inward. How can I distort an element in this fashion? i cant seem to figure out how to center my div's in IE. they look fine in firefox and safari. what can i do? here is my stylesheet: <head> <style type="text/css"> body {background:grey url('lgrey048.jpg');} .layout{position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; width: 646px; height: 800px; } .banner{position:absolute; top:0; left:0; height:251px; width:646px; border:1px solid black;} .links {position: absolute; top: 261px; left:0px; height: 47px; width: 646px; } .content {position: absolute; top: 318px; left:0px; height: 492px; width: 446px; background-color: white; border:1px solid black; } .sidebar {position: absolute; top: 318px; left:456px; height: 492px; width: 190px; background-color: white; border:1px solid black } img { border-style: none; } </style> </head> any suggestions? I have a website test2(dot)gigajobs(dot)com(dot)au And have a section where user can Jobseekers can login But I can't seem to format the Username and password , register as a jobs seeker and forgot password labels so it is aligned to margin-left:12px; I've tried everything I can think of and am tearinhg my hair out. css td.publish-label{width:200px; } td.publish-label a { color: ##2E8EE8; text-decoration: underline; } td.publish-label a:hover { color: #68AAE7; text-decoration: underline; } html <h2 class="widgettitle">{$translations.applicant_admin.login}</h2> <table border="0" cellspacing="2" cellpadding="2"> <tr> <td class="publish-label"> <a href="{$BASE_URL}applicant/register/">{$translations.applicant_admin.register_account}</a> </td> <br> </tr> <tr> <td class="publish-label">{$translations.applicant_admin.email_address}:<br /> <input {if $errors.username}class="error" {/if} tabindex="1" type="text" name="username" id="username" size="32" value="{$smarty.post.username}" /> <span class="validation-error">{if $errors.username}<img src="{$BASE_URL}img/icon-delete.png" alt="" />{/if}</span> </td> </tr> <tr> <td class="publish-label">{$translations.applicant_admin.password}:<br /> <input {if $errors.password}class="error" {/if} tabindex="2" type="password" name="password" id="password" size="32" value="" /> <span class="validation-error">{if $errors.password}<img src="{$BASE_URL}img/icon-delete.png" alt="" />{/if}</span> </td> </tr> <tr> <td class="publish-label"><a href="{$BASE_URL}applicant/forgot/">{$translations.applicant_admin.forgot_password}</a></td> </tr> <tr> is it possible to use two classes for one element. I want to use two classes for one element I thought perhaps it is possible not to create another class to combine both of them. perhaps there is a form of superclass and subclass in css. Please look at this page - http://hometown.tmhdesign.com/ask.asp?faq=9 See how the <p> exceeds the containing box at the bottom? I put a border-bottom on the containing div to show you where the issue occurs. It does not happen in IE7 I just noticed it does it also on this page http://hometown.tmhdesign.com/staff.asp Hi; How i can display elements from left to right and the first element stat from the left of 20px, and the distance between each element is 20px. Could any one help me, please, thanks my code does not work for the distance between each element is 20px. PHP Code: <html> <head> <style type="text/css"> .number{ position: relative; left: 20px; float: left; } </style> </head> <body> <span class="number">1</span> <span class="number">2</span> <span class="number">3</span> <span class="number">4</span> </body> </html> Hi guys! I am tempted to use the list element (<ul>) for almost anything... is this good practice or should I proceed differently? For example: 1/ Horizontal menu of images that should be spaced by 10 px. I could do that this way: Code: <div id="topmenu"> <a href="dsf.php"><img... <a href="sdfs.php"><img... <a href="sdf.php"><img... <a href="sdf.php"><img... </div> and in the CSS file: Code:
#topmenu
{
margin: 10px;
}
#topmenu a
{
margin-right: 10px;
}
OR I could do it this way with <ul>s: Code: <ul id="topmenu"> <li><a href="dsf.php"><img...</li> <li><a href="sdfs.php"><img...</li> <li><a href="sdf.php"><img...</li> <li><a href="sdf.php"><img...</li> </ul> and in the CSS file: Code:
#topmenu
{
margin: 10px;
list-style: none;
}
#topmenu li
{
margin-right: 10px;
display: inline;
}
MOREOVER, for example when aligning 4 input boxes on the same line and spaced (exactly the same problem but the images replaced by inputs), should I proceed with the first or second method? MOREOVER, for example when aligning 4 text URLS on the same line and spaced (exactly the same problem but the images replaced by text URLs), should I proceed with the first or second method? It would be so nice to ALWAYS use the <ul> element with CSS but is this poor practice? Thank you I am defeated! I am trying to make this website and the design relies on it having a panel that float off to the left for navigation. It works great in Firefox and Safari, but not in IE. The strange thing is that the panels is gone not just out of place. I happens when I set the position to absolute no matter what else I change. Without absolute positioning there is not way to get it into the spot I need with out affecting other elements. Here is the URL if someone to take a look for me. http://www.godsplaceforyou.org/sperbeck/ This is hopefully a very easy question... I have a table which has 4 <td> elements to adhere to. My problem is that I want to put some text into the 3rd <td> which is wider than I want the <td> to be allowed. I know that there isn't any text it will overlap in the 2nd. Is there a command that will overextend the width to the left and fill there? Currently as is the text goes upward. Here is an image of my problem, any suggestions? *** Solved, All i needed was a Hello, I have a div element within a series of nested tables. the width of the cell that the div element is in is set to "45%". My div element has a CSS style of "overflow:auto;" meaning I want scrollbars to appear if the contents of the div are larger than the alotted space. For some reason, the scrollbars appear, however, My div element stretches and pushes other elements off of the screen. Is anyone aware of any bugs or something that could cause this? The thing that is really strange is that I only have this problem when the table within the DIV contains elements that have the nowrap attribute set to true. Thanks, Crystal |
|||||||