|
CSS - Css Positioning Inconsistency
Hi all,
I'm something of a noob when it comes to html and css but I usually manage to scrape by. However I have a bizzare problem. I have a background image (that I'm not repeating due to a graphic) and I want it positioned at the top left hand corner of the browser window. I used CSS positioning to achieve this and it works just fine, however, when I uploaded my files online to my server, the image won't go to the upper left hand corner of the browser window. It sits there close to the upper hand left side but doesn't touch the end, and there is a black border around the image (which is the color I've set as the background). So my issue is, when I work off my mac, the background image is positioned where I want it to be, but once I upload my files to my site, it disregards that positioning and puts the background image in something of a default position. I've checked on Safari and Firefox and they both do the same thing, but display correctly when I view the html file off my computer. Is there some formatting thing that I'm missing? Here is my code: HTML: <div id="background_image"><img src="background.jpg" alt="background" /></div> CSS: #background_image { position:absolute; left:0px; top:0px; z-index: 1; } Similar TutorialsHi everybody, The basic set up of a site I'm creating is I have a div with a table inside it both set to 1000px wide. Within the table are the images that make up the background of the site. Also within the core div is another div which contains a music player set to absolute positioning. Everything looks perfect in IE however the music player goes beyond the bottom of the image behind it in Firefox. The music player itself doesn't move, only the pictures behind it so that leads me to believe it's an issue with where the starting point of the table is rather than the core div. I'm completely out of ideas. Does anybody have any thoughts? I tried to include a link to the page incase anybody wanted to look at the actual coding but the forum wouldn't allow me since I'm a new user. I can't for the life of me figure why IE displays this differently than all the other browsers I've tried (FF, Opera, Chrome). www dot ultra-ms dot com slash test At the bottom of the page I have a navigation section as well as a breadcrumb trail. The navigation is pushed to the left side and the breadcrumb to the right. IE, however, inserts a line break between the two causing the breadcrumb to be on the next line down. I want them on the same line. Here's the CSS rules that govern this section Code:
#footer {
font-size: 8pt;
font-family: Arial, sans-serif;
color: #999999;
width: 990px;
padding-left: 10px;
border-top-style: dotted;
border-top-color: #999999;
border-bottom-style: dotted;
border-bottom-color: #999999;
border-width: thin;
clear: both;
}
.breadcrumb {
float: right;
padding-right: 15px;
}
And here is the HTML for that part. Code:
<div id="footer">
<a href="index.html">Home</a> | <a href="profile.html">Profile</a> |
<a href="capabilities.html">Capabilities</a> | <a href="careers.html">Careers</a> |
<a href="contact.html">Contact</a> | <a href="sitemap.html">Site Map</a>
<div class="breadcrumb">
<a href="index.html">Home</a> > Careers
</div>
</div>
Can someone help? Hiya, I was wondering if anyone out there would be willing to take a look and tell me why this works in everything except IE6. I really don't want to go back and re-architect this with tables. it took too long in the first place. http://www.theblackkeys.com/dev/ Any quick help is appreciated. Original deadline was tonight. I'm sure this question has been asked a million times. I have some navigation that looks like this when closed: Link1 Link2 Link3 Link4 and this when open: Link1 Link2 Link3 sublink for Link3 Link4 I've used "margin" for the subLink class to create the right amount of space above and below the sublink, but it gets displayed totally differently in the different browsers. On my mac it looks perfect with margin: -16px 0px 0px 4px; but on Windows the negative margin has the result that the sublink gets displayed right on top of Link3. Using margin is probably not the right way to do it. Padding has the same effect. Can anyone help? Thanks, LauraS. The submenus are not lining up properly in Firefox or Safari but it looks right in IE. If I fix how it looks in Firefox and Safari, it will not look right in IE. Anyone know how to solve this? Here is the link: link to problem Hi All. I am getting an extra space in FireFox. The space is fixed when I disable the 'Browser Default Styles' in FireFox. IE7 shows it OK. http://holzgreen.com/gap/ any comment is appreciated. sukruB 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 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. 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 Hello, I've got a div tag that I want to position tags off of using css's margin attribute. The data amount is variable, so sometimes the tags that position off of the first tag end up in different locations depending on the amount of data placed in the div tag. I've tried setting a static height attribute, but it doesn't appear to work for me. Any ideas? I need help laying out my page, and I can't seem to get this CSS stuff right. My page has a logo at the top left, a menu at the top right. Below the logo on the left, I have an image. To the right of that I have another image. The bottom of those two images need to line up. Below those 2 images, I have 3 smaller images I want to display from left to right. I tried to set up DIV blocks, and used CSS to position them. When it lays out on my page, and I scrunch the brower small, the images on the right side overlap and cover the images on the left. Also, the images on the bottom extend below the bottom of the browser, but I don't get a scroll bar to see them. I am told tables are not the way to do it anymore. I am not a web developer, so I need some help, pretty please. If you view the following site in Firefox http://mtm324php.info/nasdaq.xml you can see this... NASDAQ 100 Current quotes then the date because this is the order of the data in the XML document... Well let's suppose I want it like this... http://mtm324php.info/nasdaq.bmp with the date on the very top. How would I do this in CSS? It has to be in CSS as that is the requirement. Thank you. CSS is very new to me so if someone can help me with my problem i would very much appreciate it. I am using a background image that is 1024 x 768px. I have positioned this using... Code: body
{
background-color:#000000;
background-image:url('images/homebg.jpg');
background-repeat:no-repeat;
background-position:center top;
}
As i am new to css i am using tables to position my content over the top of the background image. If the browser is adjusted in size the content appears to be going over the edge of the background image instead of staying with in it. is there any way i can lock the 2 (background image and content) in position so that when the browser is made smaller or the site is viewed in different resolutions it will remain together without the content going over the edge of the background. Or am i doing this wrong. I have read about wrappers and such but i don't really understand them. An example of what i am trying to achieve is at www.blue-leaf.co.uk I'm trying to build an example layout that I plan to use in a website. My goal is simple, I want a content section to grow as the the content gets bigger and place a footer after that division that is as wide as the page. Here's the code I'm currently using: (the problem I'm having right now is that the footer section is rendering at the top.. How can I get this to be placed at the bottom of the page, after the content section?) Help me please <html> <head> <title>TESTING 1 2 3</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #mrbig { background: #f0f; width: 800px; } #header { position: absolute; background: #0f0; width: 800px; height: 100px; } #leftcol { position: absolute; background: #f00; top: 100px; width: 150px; height: 500px; } #content { background: #fff; position: absolute; float: left; width: 650px; top: 100px; left: 175px; height: 500px; } #footer { position: relative; left:111px; background: #00f; width: 800px; height: 100px; } --> </style> </head> <body> <div id="mrbig"> <div id="header">Header Section</div> <div id="leftcol">Left Section</div> <div id="content">Content SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent Section Content SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent Section</div> </div> <div id="footer">Footer Section</div> </body> </html> Due to popular demand, I have decided to bite the bullet and make the switch from tables to css and divs in layout designs. Obviously, since I am unfamiliar with this practice, I have run into an issue. I am trying to add a link to the right side of my title div, which has a bottom border of 1px...I am not sure how to go about doing this without going down a line or the link not positioning itself to the right... Here is what I have so far: HTML Code: Code: <div class="title" align="left"> <div style="display: inline;"><b>News Updates:</b></div> <!-- The below link needs to align to the right side --> <div style="display: inline;" class="font" align="right"><a href="javascript:void(0);">Add News</a></div> </div> CSS Code: Code: .font { font-size: 0.7em; }
.title {
font-size: 1.6em;
color: #0033FF;
border-bottom: 1px solid #0033FF;
}
I have no idea how to go about this and it seems like it would be so simple. Any help is appreciated. 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> Hello all! Well I'm just designing my personal website, and I'm encountering a problem with positioning div elements. (This is going to be a very basic question that I couldn't find anywhere.) To understand the exact problem I am having, here are the links: lightblu.com/4/1.html lightblu.com/4/2.html Notice in the first one, it is perfectly fine. In the second, when I add more text, it just overlaps everything, including the footer and the bg color. It only works fine when I add more text on those right boxes. So question is, what should I do so that when I add text either on the left side OR on the right side, the background expands accordingly? Thanks for all your help! 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 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 bit of a newbie but confused by following code; The images all display ok and the rounded gif work ok but I get a gap between the divs (highlighted below). Is it margins/paddings? Pulling hair out! Thanks, Bill. .child { width: 200px; background-color:green; background-image: url(unt.bmp) ; } .parent {margin: 0; padding: 0} .bl1 {background: url(_round_bl.gif) bottom left no-repeat ;background-color: blue;width: 200px } .br1 {background: url(_round_br.gif) bottom right no-repeat;} .tl1 {background: url(_round_tl.gif) top left no-repeat;} .tr1 {background: url(_round_tr.gif) top right no-repeat;} </style> </head> <body> <div class="parent"> <div class="child"> <div class="tl1"> <div class="tr1"> <h2>Hello </h2> </div> </div> </div> /* When displayed in browser the above is separated from the following by a gap of around 20 odd px */ <div class="bl1"> <div class="br1"> <h2>Hello</h2> </div> </div> </div> </body> </html> |
|||||||