|
CSS - Positioning My Element Showing Different
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 Hi, I have a problem: the navigation submenu is appearing underneath the floated element (the images) that is placed under it. How can I get the navigation menu to appear 'over' the images? You can see it he http://serve5.net/xcage/ http://serve5.net/xcage/stylesheets/xcage.css Thanks. 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 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. 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 Hello Everyone, First post here. I tried to research my issue within the forums first but there is just too much going on and I didn't find my exact scenario. I actually had this problem with another project and I tried to simplify everything for posting purposes. I came pretty close. however, with my initial problem IE was displaying the desired result and FF wasn't. In this situation neither are showing the desired result. The Prob: I have four divs and a body tag that I have used in CSS. My problem is that my content and sidebar boxes are showing up, but the container and menu divs, which the content and sidebar are nested within, aren't showing up. I have tried many different options with the positioning. Currently I am assigning absolute to the content and sidebar and relative to the container. I thought I had the correct understanding of relative and absolute positioning, but I am not getting the results I was hoping for. I want to see all four divs: menu, container, content, sidebar. They are all represented by a different color. Menu should fill the whole screen, container should be centered 974 px wide and the content and sidebar showing within the container. The code: Code: @charset "utf-8";
/* CSS Document */
#menu {
background-color: #693;
height: 100%;
width: 100%;
margin: 0px;
}
body {
margin: 0px;
}
#container {
width: 974px;
margin-right: auto;
margin-left: auto;
background-color: #C00;
position: relative;
}
#content {
background-color: #FF6;
width: 770px;
padding-right: 5px;
padding-left: 5px;
position: absolute;
left: 2px;
top: 2px;
}
#sidebar {
background-color: #009;
width: 180px;
padding-right: 5px;
padding-left: 5px;
position: absolute;
top: 2px;
right: 2px;
}
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<div id="container">
<div id="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed justo non leo lacinia aliquet. Suspendisse posuere lacus vel nunc euismod ac euismod elit consectetur. Proin magna elit, sagittis quis imperdiet luctus, venenatis quis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra feugiat tincidunt. Quisque quis justo aliquam purus congue feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh mauris, eleifend eu volutpat tempor, porttitor sit amet mi. Fusce accumsan, purus id luctus tincidunt, lectus est laoreet nisl, vitae sodales urna nibh at est. Suspendisse aliquam laoreet fringilla. Etiam ac arcu non elit ultrices luctus. Donec quis est nec mauris hendrerit sagittis. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed justo non leo lacinia aliquet. Suspendisse posuere lacus vel nunc euismod ac euismod elit consectetur. Proin magna elit, sagittis quis imperdiet luctus, venenatis quis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra feugiat tincidunt. Quisque quis justo aliquam purus congue feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh mauris, eleifend eu volutpat tempor, porttitor sit amet mi. Fusce accumsan, purus id luctus tincidunt, lectus est laoreet nisl, vitae sodales urna nibh at est. Suspendisse aliquam laoreet fringilla. Etiam ac arcu non elit ultrices luctus. Donec quis est nec mauris hendrerit sagittis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed justo non leo lacinia aliquet. Suspendisse posuere lacus vel nunc euismod ac euismod elit consectetur. Proin magna elit, sagittis quis imperdiet luctus, venenatis quis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra feugiat tincidunt. Quisque quis justo aliquam purus congue feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh mauris, eleifend eu volutpat tempor, porttitor sit amet mi. Fusce accumsan, purus id luctus tincidunt, lectus est laoreet nisl, vitae sodales urna nibh at est. Suspendisse aliquam laoreet fringilla. Etiam ac arcu non elit ultrices luctus. Donec quis est nec mauris hendrerit sagittis.</p>
</div><!--content-->
<div id="sidebar"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed justo non leo lacinia aliquet. Suspendisse posuere lacus vel nunc euismod ac euismod elit consectetur. Proin magna elit, sagittis quis imperdiet luctus, venenatis quis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra feugiat tincidunt. Quisque quis justo aliquam purus congue feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nibh mauris, eleifend eu volutpat tempor, porttitor sit amet mi. Fusce accumsan, purus id luctus tincidunt, lectus est laoreet nisl, vitae sodales urna nibh at est. Suspendisse aliquam laoreet fringilla. Etiam ac arcu non elit ultrices luctus. Donec quis est nec mauris hendrerit sagittis.</p>
</div><!--sidebar-->
</div><!--container-->
</div><!--menu-->
</body>
</html>
my site is www . becomeacheapskate . com / test Any and all help would be greatly appreciated. Thanks Ripeffect 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. Index.php code: Code: <div id="Wrapper">
<div id="Content">
<div id="Header">
<div id="Logo"></div>
<div id="Title"></div>
<div id="Navigation">
<ul>
<li><a href="(url blocked)">Home</a></li>
<li><a href="specials.html">Specials</a></li>
<li><a href="">Inventory</a>
<ul>
<li><a href="inventory-weapons.html">Weapons</a></li>
<li><a href="inventory-accessories.html">Accessories</a></li>
<li><a href="inventory-ammunition.html">Ammunition</a></li>
</ul>
</li>
<li><a href="manufacturers-links.html">Manufacturers</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div>
</div>
And my css file: Code: #Title {
width: 425px;
height: 75px;
background: url(../images/Title.png) no-repeat;
padding: 0px;
margin: 0px;
position: absolute;
top: 3%;
left: 35%;
}
Code: #Welcome_Letter {
margin-right: 18%;
margin-left: 3%;
position: absolute;
top: 190px;
}
Code: #Navigation {
position: absolute;
top: 15%;
left: 30%;
width: 580px;
}
The problem is the absolute positioning of the Title and Menu, and the margins of the first paragraph. On 4 out of the 5 computers I've tested it on, its shown properly (In Firefox, yes I know I need to fix the paragraph for IE.) But on the one computer, even in Firefox, the Title, Menu, and margins of the first paragraph are way off, and I can't figure out why. I've tried doing it in px, em, and currently its in percent, which has been the closest so far. But why is it not showing up perfect? This is what its supposed to look like: i27.tinypic.com/9ihfza.jpg This is what it shows up as on the 1 computer: i28.tinypic.com/swwu49.jpg Help please! Thank you Edit: Fixed url's 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, I had this working but somehow it's not working again. The problem I am having is that scroll bars are showing up in my iframe in Firefox, Opera, and Safari, but not IE7 and IE6. Here is the link: http://www.caillouette.com/NewCatsMeow/ I know I need to tighten up my style sheet, but if someone could tell me how to solve this, I would be very happy. Here's the iframe code in the index page: Code: <div id="bodyInfo"> <iframe name="mainBody" width="770" height="602" src ="body.html" scrollbars="NO" border="0"> </iframe> <!-- end #bodyInfo --></div> 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 have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ 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>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo 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? 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 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/ Hi, I am trying to get image on the bottom right hand side of the page to align with the chart in the middle. I have it floated to the right, but I can't seem to make it move up vertically. Not sure how to do this, absolute positioning is not an option because it will be stuck there regardless of browser size. this is where the img is now, see how it is not lined up? URL this is where it is supposed to go. URL my code is this Code: <div style="float:right; vertical-align:baseline;"><img src="/free-gold-charts/gold.png" alt="Free Interactive Gold Charts" width="320" height="290" align="top"/></div> and I have it next to the code for the chart. Help! 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 hey guys, I just have a short question about css: How to center an element? greetings and thx in advance PS: I tried to use auto but this does not function... |
|||||||