|
CSS - Central Positioning In Ie6
I've been trying to centrally position my site pages in IE6 but despite using what seems to be the correct and accepted code (though perhaps not as the case may be), in IE6 the site pages keep aligning left.
In IE7/8, FF etc. the alignment is centered and fine. The CSS I'm using is: /* global to standardise padding etc. */ * { padding:0; margin:0; border:0; line-height:0; } body { margin: 0; padding: 0; text-align: center; background: #ffffff; font-family:Arial, Helvetica, sans-serif; overflow:auto; height:100%; } #container { width: 1002px; background: #ffffff; margin: 0 auto; text-align: left; height:auto; } This CSS works fine (in IE6) on another site, i.e centers ok. Some articles talk about IE6 being funny with XHTML doctypes, so I swapped it for an HTML Transitional doctype- but that wouldn't work either. Any ideas as to how I can make the site centered properly in IE6? As far as I can tell the above code should work- but doesn't... Similar TutorialsI'm new to css and have been impressed with the way you can make style changes to a whole site by just altering one stylesheet (if you've set if up right). My question is, can css or xhtml be used to do that with content? I want to create a site with a Nav column floated on the left hand side of every page, but I'm worried I'd have to change hundreds of pages if i ever added/altered the column. Is there any way I can get every page to pull a table/other-xhmtl from one source, maybe by putting something in the stylesheet? Thanks. Hi all. I'm experiencing a strange error. I have a central content div acting as a wrapper for content to sit central to the page. The start of my CSS file is as follows: Code:
*
{
padding: 0;
margin: 0;
}
html
{
height: 100%;
margin: 0 0 1px 0;
}
body
{
height: 100%;
text-align: center;
}
#wrapper
{
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width: 750px;
margin: 0 auto;
text-align: left;
padding: 200px 0 50px 0 !important;
padding: 200px 0 0 0;
}
Now, whenever I click to the right of this central wrapper div in Firefox, the whole of the content is selected. Anybody know why this is or how I can stop it? Hi all, I made a recent post having trouble with a three column layout. Its not really had much attention however it wasn't really clear what i was asking. I wanted the two outside columns which only contained background images to be hiden in the background from the viewpoint. You can see my original post here, it includes two diagrams: http://forums.devshed.com/css-help-...ion-584924.html Now I have edited the layout to a single column and used the images on the sides as borders. I am still having the same problem so I am now wandering if I can force the browser to centre on the main column... This would leave overhang on ether side but its only images to make the site look better. Currently the site will look good using a wide resolution but on standard 1024x768 i want the centre of the column to be in the middle of the browser window on load. Can I do it with css? javascript or ajax? If in javascript or ajax could you please like me a tutorial or something as i have no ability in those categories! Any help is great. Cheers. Ok here is the problem I have... I have 3 DIVS.... DIV 1 is a container the centers the contents DIV 2 I want to wrap tight around an image DIV 3 I want floating over the image say 100px from the top of DIV2 and 80px left. Currently DIV 2 is as wide as it's container (DIV1). and therefore DIV 3 isn't positioned over the correct part of the image. If I made DIV 2's position absolute then DIV 2 wraps the image tightly and correctly, but it now is shown on the far left of DIV 1, and I want it in the center. here is the HTML i have... <div id="div1" align="center"> <div id="div2"> <img alt="fddsffsd" src="image.jpg"/> <div class='div3'></div> </div> and here is my CSS... #div2 {position: relative} .div3 { position:absolute; width: 80px; height: 80px; top: 100px; left:20px; background-image: url(transparent.png); } Hello, I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left. See here see how it got below ? It is XHTML validated and CSS is fine too (some background color warnings). Plz help me to make central column go up. Thanks. 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 Hi all, I'm trying to get the two <ul> tags in div#header to sit on top of each other (horizontally), and for both of them to sit next to the <h1> title tag. The problem is that the second <ul> floats left underneath the <h1>. Any suggestions? Relevant HTML: Code: <div id="header"> <h1>Athena:</h1> <ul> <li><a href="library.php" alt="Browse Library">Library</a></li> <li><a href="project.php" alt="Browse Projects">Projects</a></li> <li><a href="personal.php" alt="Browse Personal Section">Personal</a></li> </ul> <br /> <ul> <li><a href="" alt="">Subhead1</a></li> <li><a href="" alt="">Subhead2</a></li> </ul> </div> Relevant CSS: css Code: Original - css Code #header { width:98%; margin:0px auto; background-color: #2E5C8A; border:solid #2E5C8A; 2px; border-width: 0px 5px 0px 5px; color:#fff; padding:5px; } #header a { text-decoration:none; color:#fff; } #header a:visited { text-decoration:none; color:#fff; } #header h1 { font-size: 3em; margin: 0px; display:inline; } #header ul { list-style-type: none; display: inline; } #header li { vertical-align: top; display: inline; padding: 0px 5px 0px 5px; margin: 0px 5px 0px 5px; border:solid #49496e 1px; background-color:#8699ad; font-size: 1em; font-weight: bold; } #header ul li:before { content: "\2606 \0020"; } #header li:hover { border:solid #fff 1px; background:#49496e; } #header ul li:hover:before { content: "\2605 \0020"; }
Also - is there anyway of getting the <li>'s to be the same width? Thanks heaps, --Simon I'm starting to create a new site, and I'm having some issues deciding how to create it. I want a header, footer, and 3 columns. This is the CSS I have created, but have some issues with it. Should I use absolute positioning for all elements? The bottom bar isn't lining up at all. Also, for the middle content, how do I get my info into there easily? I will be using the main page as a php page that I will include on all my pages. Should I not use a middle content section? #content { margin-left: 199px; margin-right: 199px; border-top: 1px solid Black; border-bottom: 1px solid black; height:450px; position:absolute; top:59px; width:585px; } #titleBar { background-color: #333399; text-align: center; font: bold large Courier New; height: 40px; padding: 8px; border-top: 1px solid Black; border-left: 1px solid Black; border-right: 1px solid Black; color:#FF9933; } #bottomBar { background-color: #333399; text-align: center; font: normal x-small Courier New; height: 20px; padding: 4px; border-bottom: 1px solid Black; border-left: 1px solid Black; border-right: 1px solid Black; color: #FF9933; } #navleft { background-color: #FF9933; border: medium double; text-align: center; height: 450px; position: absolute; left:10px; top:59px; width:200px; border:1px solid #000; } #navright { background-color: #FF9933; border: medium double; text-align: center; width:200px; height:450px; position: absolute; right:10px; top:59px; width:200px; border:1px solid #000; } I have a table with 680px in width & trying to fit my img into the table. I'v tested it both in 1024x768 & 1280x1024. But it just doesn work. When i position it to match my 1024x768, it'll look bad at 1280x1024.. here is my positioning code : img.one{ position:absolute; top:325px; left:550px; } why is that so... This is a snippet of what I have in my css: Code:
#page-body {
width:100%;
background:#000 url(bg_night.jpg) bottom left repeat-x scroll;
margin:0;
padding:0 0 125px 0;
border:1px solid red;
border-top:33px solid #cfad34;
color:#fff;
clear:both;
}
The css above works great but now I want to include an image in the lower left-hand corner of the page-body also. So while I have something like the following: Code:
<html>
<body>
<div id="page-body>
.....
</div>
</body>
</html>
I am hoping to create a class where I can position this second image. I don't want to use absolute positioning because the page body will increase in height size based on the growth on the content inside. Any suggestions? Thanks in Advance. remove this topic plss. thanks Hi, I have the following code: PHP Code: <div id="siteDimention"> <div id="topLeft"></div> <div id="topRight"></div> <div id="latestProjects"></div> <br><br> <div id="additionalBusiness"></div> </div> body { margin: 0px; padding: 0px; } #siteDimention { width: 758px; margin-left: auto; margin-right: auto; padding: 0px; } #topLeft { width: 479px; height: 305px; float: left; background-image: url(../images/main_topLeft.jpg) } #topRight { width: 279px; height: 305px; float: right; background-image: url(../images/main_topRight.jpg) } #latestProjects { width: 758px; height: 185px; background-image: url(../images/main_latestProjects.jpg) } #additionalBusiness { width: 758px; height: 165px; background-image: url(../images/main_additionalBusiness.jpg) } Which if you look he http://www.talktonight.com/test/ .. works fine in IE, but not in Firefox. What am I doing wrong? Hello, I am creating a table with several rows that represent records from a database. Each record creates two rows. The first row is basic data. The second row contains detailed data, however, it is initially hidden. When someone hovers over a row, I need to display the detailed information immediately over the basic data. Basically, when the mouse is over a row, I need to position the row directly below it over the current row. I know this sounds odd, but I have a cool idea. I'm trying to do this with CSS and JavaScript, but I can't seem to figure out: 1. How to position the even numbered rows on top of the odd numbered rows when needed WITHOUT readjusting the entire table. Can you please provide some help? Thank you so much, Crystal I've created a site with a static background.gif "body" element, then a container (div) where I'm putting my stuff. I want the container to roll up and down against the nice static background in the body margins.(there is an example of what I'm trying to do at CSS garden http://www.csszengarden.com - check out Gothica #027)The problem is that when I use absolute positioning for the elements - the container ignores the content and doesn't size properly. But when I use relative positioning, I can make everything work out OK - except it generates tons of extra space that gets dumped at the bottom of the pages. So my question is - does anyone know how to get rid of the space? BTIA ok G'day all, I am hoping some here can help me with a problem I am having with positioning. I have a content div with dynamically generated text, next I have a side-bar div that i'd ideally like to centre vertically but this seems to be bad practice so my other thought, if possible would be to have the side-bar position itself relative, x position from top with the dynamic text to wrap around the side-bar div. What I have currently is: Code:
<div id="main-content">
<div class="side-bar">
<div class="side-bar_header">Content Header</div>
<div class="side-bar_content">
<ul>
<li>Side-bar info</li>
</ul></div>
</div>
{dynamic_content_tag}
</div>
Code:
#main-content {
height: auto;
width: 630px;
}
.side-bar {
background-color: #CCC;
float: left;
width: 180px;
position: relative;
top: 50%;
margin-right: 10px;
margin-bottom: 20px;
}
.side-bar_header {
background-color: #666;
text-align: center;
padding: 5px;
}
.side-bar_content {
padding-left: 5px;
}
Any help would be much appreciated. Hi all, Im doing a bit of work, for which the URL can be found at: (URL address blocked: See forum rules)~gj311/webeng and the css is at (URL address blocked: See forum rules)~gj311/webeng/webeng.css Ignore the lack of content for now if you would (URL address blocked: See forum rules)=newthread&f=116# Smilie I am trying to make the "top" div appear at the top of the page with no gap, currently this works in IE but in firefox 2 and opera there is a gap showing the lighter bluey/grey background colour, is this because I am using width 100%? It is probably a very newbish question but any help would be appreciated. Cheers Hi, I can't figure out why my top nav won't stay in place in ie. Here's what I have for my nav. Works everywhere but ie, its position (just the height) it's off. Thanks much for any help. Simone div.navigation { position: relative; left:160px; top: 140px; line-height:0; border : 0 solid #000000; overflow : auto; width : 50%; font-size : 20px; font-weight: bold; margin: 0px 0 0 0px; } div.left { width : 45%; float : left; } div.right { width : 30%; float : right; } a.navigation { border-bottom : 5px solid #99c37f; text-decoration : none; color : #4c2110; font-size: 20px; } a.navigation:hover { border-bottom : 5px solid #99c37f; text-decoration : none; color : #4c2110; font-size: 20px; } Ok. I have a container div in which all of my content for the whole site will be. Inside that I have a header and under it a nav bar on the left. I want to add content to the right of the nav bar but at the same height. If I try to add stuff it goes below. I tried float: left, absolute positioning, and negative margins but none worked since the nav bar then extends over the shrunken conatiner div. Any help on how to make the nav bar and other content side by side would be much appreciated! thanks! Hi all, hoping someone can help me with what feels like it should be a simple problem, but one I can't work out. Apologies if the problem seems too obvious to you, I'm a total noob at this. I basically have two div objects within a space beneath the header. These are a video player, which is fine, and a scrolling menu. Presently the menu (navigation.php) is off the bottom-right, beneath the video, and I simply want to force it to the TOP right, parallel with the player. My code is below, and I'm looking for an elegant css solution if possible. Any more info needed, just ask. I took a grab, but the forum won't let me post links. Cheers in advance. </style> </head> <body bgcolor="#B94F1F"> <div id="container"> <div id="header"><?php include("header.php"); ?></div> <div id="wrapper"> <p id='preview'>The player will show in this paragraph</p> Words here? <p>Paragraph <p>Paragraph <script type='text/javascript' src='swfobject.js'></script> <script type='text/javascript'> var s1 = new SWFObject('player.swf','player','640','380','9'); s1.addParam('allowfullscreen','true'); s1.addParam('allowscriptaccess','always'); s1.addParam('flashvars','file=xxx'); s1.write('preview'); </script> <div id="navigation" style="width:300px;height:430px;overflow:auto;border-width:1px;border-color:000000;border-style:solid;"> <font size=2> <div id="header"><?php include("navigation.php"); ?></div> </font></div> Hi guys, I'm pretty new to web design, so please be gentle. I have an issue with CSS positioning that I'm trying to figure out. After research, I figured out how to align a div to the centre using an external stylesheet. However, I want this div to be positioned at the very top of the page. Currently, it sits approx 100px from the top and I can't figure out how to position it to 0px. Here's my code; body { text-align: center; margin: 5em 0 0 0; vertical-align: middle; } #content { width: 760px; text-align: left; margin: 0 auto; background-color: #000000; top: 0px; } Can anyone help me? Thanks Luke |
|||||||