|
CSS - Problems With Css Positioning
Hi guys, when I try to create layers (AP divs) with Dreamweaver, everything looks great, but when I preview that in a browser, the layers change their positions.
I am very frustrated since I've been trying to figure out why for almost 2 days, and I can't. Please help me! Check out this screenshot: http://www.theoutsourcingcompany.com/tryarg/images/proof1.jpg This is the code: 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>Test</title>
<style type="text/css">
<!--
#maincontent {
left:186px;
top:27px;
width:80%;
height:608px;
z-index:1;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center center;
position: relative;
text-align: center;
}
#Name {
position:absolute;
left:372px;
top:95px;
z-index:1;
}
#Email {
position:absolute;
left:372px;
top:140px;
z-index:1;
}
#Phone {
position:absolute;
left:372px;
top:185px;
z-index:1;
}
.fontfields {
font-size: 24px;
}
-->
</style>
</head>
<body>
<div id="maincontent">
<form>
<div id="Name">
<input name="Name" type="text" class="fontfields" id="Name2" />
</div>
<div id="Email">
<input name="Name" type="text" class="fontfields" id="Email2" />
</div>
<div id="Phone">
<input name="Name" type="text" class="fontfields" id="Phone2" />
</div>
<img src="http://www.theoutsourcingcompany.com/tryarg/images/form.jpg" width="650" height="608" />
</form>
</div>
</body>
</html>
If you know what the problem is, please help me. I am really confused with absolute, relative, fixed, and static positioning. I understand the concepts but I can't position the layers wherever I want. Thank you! Similar TutorialsHi everyone, I'm having a brain freeze and need a smack in the back of the head. I simply want to place some content below the left side menu. I want all content below the menu to be independent of the menu which has a grey background. Here is a link... www.spotabusiness.com It will make sense once you see it. Thanks for any input. Rob After a lot of effort, I'm making things worse, and not better! The page in question is he here. I had everything lined up except for the column ofthree alternate image views to the right of the primary image. While trying to get these to align vertically with the bottom of the primary image, I have broken the layout for the whole page... What's now broken: #content is no longer aligning with the top of the left nav (margin-top:40px) as mentioned above, I need the column with the three smaller images to align with the bottom of the larger image, floating up and down based upon the larger image's height. the "next >" link is not vertically aligning properly with the bottom of the image in FF. And, of course, I need to get the whole thing working in ie. Before coding, I laid things out semantically, planning to float:left the nav and content boxes within the centered #main div. This was working before I broke it. :-( I'm very new at this, and am doing my best! But I feel like I might go insane at the moment... Thanks, in advance, for your help. -BBD What I currently have is Code: <div id="main"> Site content comes here </div> <div id="bottomLinks"> <div style="float: left">A link</div> <div style="float: right">Copyright notification</div> </div> Code:
#bottomLinks {
padding: 10px 0px 10px 0px;
margin: 0;
width: 750px;
position: absolute;
bottom: 10px;
}
#main {
background-color: #FFFFFF;
width: 760px;
font-family: Arial;
font-size: 12px;
padding: 30px 0px 0px 40px;
}
As you can see, I'm trying to put the link & copyright notification at the bottom of the page. My problem occures when the site content is so long that there will be a scrollbar. Opera will handle this the way I want it to, meaning first the content and then at the very bottom of the page there will be the link and the notification. However Firefox and Konqueror doesn't work this way. They both put the bottomLinks 10 pixles top from the VISIBLE part of the page, overlapping the actual content. If the content is long enough, it could mean that bottomLinks is in the middle of the page. Any ideas how to fix this? Hi all, I am having major issues with positioning my footer, on IE it sits way down out of site, on Firefox it is perfect and on Safari it sits above the bottom of the screen, three totally different results! This is one of the last things that needs sorting, so please help if you can as I seem to have run out of talent! 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 name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<title>Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* mac hide \*/
html, body {height:100%}
/* end hide*/
body {
padding:0;
margin:0;
color: #000000;
}
#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header{
position:absolute;
top:0;
left:0;
bottom: 0;
width:100%;
height:210px;
border-top:0px solid #feffff;
border-bottom:0px solid #feffff;
overflow:hidden;
color: #000000;
}
#clearheader{height:240px;}/*needed to make room for header*/
* html #footer {/*only ie gets this style*/
\height:40px;/* for ie5 */
he\ight:38px;/* for ie6 */
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 0px white;
}
#navlist li a {
color: #4E261B;
text-decoration: none;
font-family: palatino linotype, helvetica, sans-serif;
font-size: .90em;
line-height: 200%;
}
#content {
background-color: white;
height: 100%;
padding-bottom: 40px;
padding-left: 200px;
padding-top: 0px;
}
#footer {
width:100%;
clear:both;
border-top:0px solid #000;
background-color: #8ecce7;
color: #000000;
text-align:center;
position: bottom;
min-height: 100%;
}
#footerlist a
{
text-decoration: none;
color: #4E261B;
font-family: palatino linotype, helvetica, sans-serif;
font-size: 8pt;
}
p{
font-family: Palatino Linotype;
color: #336699;
font-size: 12pt;
text-decoration: none
}
p2{
font-family: Palatino Linotype;
color: #336699;
font-size: 8pt;
text-decoration: none
}
a{
font-family: Tempus Sans ITC;
color: #4E261B;
font-weight: bold;
font-size: 14pt;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img border="0" src="images/Banner_flat.jpg" alt="Banner" width="100%" height="210" align="left" />
</div>
<div id="clearheader"></div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 1; left: 3px; top: 217px" id="layer1">
<img border="0" src="images/bridetablet1.bmp" alt="Menu" width="190" height="302" /></div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 2; left: 14px; top: 248px" id="layer2">
<div id="navcontainer"></div>
<ul id="navlist">
<li><a href="hello" class="c2">Home</a></li>
<li><a href="About%20Us" class="c2">About Us</a></li>
<li><a href="User%20Register" class="c2">User Register</a></li>
<li><a href="User%20Log-In" class="c2">User Log-In</a></li>
<li><a href="Supplier%20Log-In" class="c2">Supplier Log-In</a></li>
<li><a href="Join" class="c2">Join</a></li>
</ul>
</div>
<div id="content">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div id="footer">
<p2>
<a href="test1.htm" title="Terms and Conditions" style="text-decoration: none"><font size="2">
Terms and Conditions |</a><font size="2">
</font>
<a href="test2.htm" title="Advertise" style="text-decoration: none"><font size="2">
Advertise |</font></a><font size="2">
</font>
<a href="test3.htm" title="FAQ's |" style="text-decoration: none"><font size="2">
FAQ's |</font></a><font size="2">
</font>
<a href="test1.htm" title="Site Map |" style="text-decoration: none"><font size="2">
Site Map |</font></a><font size="2">
</font>
<a href="test1.htm" title="Wedding Hair |" style="text-decoration: none"><font size="2">
Wedding Hair |</font></a><font size="2">
</font>
<a href="test1.htm" title="Wedding Makeup |" style="text-decoration: none"><font size="2">
Wedding Makeup |</font></a><font size="2">
</font>
<a href="test1.htm" title="Wedding Beautician" style="text-decoration: none"><font size="2">
Wedding Beautician
</font></a>
</font>
</p2>
</wrapper>
</div>
</div>
</body>
</html>
Thanks, G Well, I'm working with CSS and div tags using the id attribute. I'm trying to copy a box that's already on left side of the page but put it on the right side of the page and make it not so wide. Here's what the box on the left looks like: The code for that is: Code: <div id="nav">
<a id="selected">Home</a>
<a href="?page=forums" class="link">Forums</a>
<a href="?page=downloads" class="link">Downloads</a>
<a href="?page=contact" class="link">Contact</a>
<a href="?page=roster" class="link">Roster</a>
<a href="?page=server" class="link">Server</a>
<a href="?page=matches" class="link">Matches</a>
<a href="?page=links" class="link">Links</a>
<a href="?page=search" class="link">Search</a>
</div>
<div id="title">News</div>
<div id="content"><?php include('includes/news.php'); ?></div>
Code: /* Navigation div **** */
#nav { height: 17px; width: 513px; padding: 6px 0px 0px 0px; }
#nav a:hover {
background-color: #660000;
border-top: 1px;
border-bottom: 0px;
border-left: 1px;
border-right: 1px;
border-style: solid;
border-color: #000000;
font-weight: bold;
width: 10px;
padding: 5px 5px 5px 5px;
}
/* Main content **** */
#title {
background-color: #660000;
border-top: 0px;
border-bottom: 0px;
border-left: 1px;
border-right: 1px;
border-style: solid;
border-color: #000000;
width: 506px;
text-align: right;
padding-left: 5px;
}
#content {
background-color: #202020;
border-top: 0px;
border-left: 1px;
border-right: 1px;
border-bottom: 1px;
border-style: solid;
border-color: #000000;
text-align: left;
padding: 5px 5px 5px 5px;
width: 501px;
height: 400px;
}
The right side box SHOULD look like this: but that's me photoshopping it. Here is my code that I tried for the right side: Code: <div id="nav_right"> <a id="selected">Home</a> <a href="#" class="link">Affiliates</a> <a href="#" class="link">UserCP</a> <a href="#" class="link">Log out</a> <a href="#" class="link">Credits</a> </div> <div id="title_right">title right</div> <div id="content_right">content right</div> Code: #nav_right {
height: 17px;
width: 285px;
padding-top: 6px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
float: right;
}
#nav_right a:hover {
background-color: #660000;
border-top: 1px;
border-bottom: 0px;
border-left: 1px;
border-right: 1px;
border-style: solid;
border-color: #000000;
font-weight: bold;
width: 10px;
padding: 5px 5px 5px 5px;
}
#title_right {
background-color: #660000;
border-top: 0px;
border-bottom: 0px;
border-left: 1px;
border-right: 1px;
border-style: solid;
border-color: #000000;
width: 278px;
text-align: right;
padding-left: 5px;
float: right;
}
#content_right {
background-color: #202020;
border-top: 0px;
border-left: 1px;
border-right: 1px;
border-bottom: 1px;
border-style: solid;
border-color: #000000;
text-align: left;
padding: 5px 5px 5px 5px;
width: 273px;
height: 400px;
float: right;
}
But it ends up like this: Any help on this would be appreciated. So I have a testing site located at: http://www.ga-lan-ga.com/testing If you look at that first page in Mozilla Firefox everything looks fine, like it should look. Then if you open it in Internet Explorer (please note I am only testing with Internet Explorer 7.0, and don't care about the problems with lower versions, I know there are some), you will notice in the middle box that it is slightly overtop the top green header. Anyways, here is the relevant code for you. Code:
#main_middle
{
position: relative;
top: -12px;
right: 0px;
height: 53px;
width: 894px;
background-image: url(/testing/images/background_middle.png);
background-repeat: repeat-y;
}
Now I understand that the reason it is overlapping in IE is because of my wonderful little Firefox fix of giving top a negative value. However if I give it a 0 value, it does look fine in IE, however in Firefox there is a space then in between the background images. Any help in getting it to look like it does in Firefox in both browsers would be much appreciated. Hello i wondered if anyone could help me. My first problem is that the footer section is ok in internet explorer 6, in ie7 it is slightly higher than it should be and in firefix the copyright text is underneath the footer bar. The navigation bar is great in ie6+7 but in firefox it doesnt line up properly. And lastly on the quote page i am having all sorts of trouble in all browsers. In ie6 the right hand column is underneath the form and to the left. In firefox the coumn is in the right place but it is not showing the colour in the main column and the footer is to the left as well. The link to the site is http://www.alrwritingservices.co.uk and the css is http://www.alrwritingservices.co.uk/main.css http://www.alrwritingservices.co.uk/form.css Can anyone help me please as i am absolute puzzled at the moment. Many thanks in advance. http://www.ror.twisted-delusions.net/flip2/ I can't seem to get those words of testing to stay where they should be which is above the footer. Why is the footer div going up so high? Hi... I'm a complete noob at this hand coding thing... this is my first site, and my page and css are very simple... Everything looks great in FF, Chrome, Safari, but the positions is really wacky in ie 5-8. I'm baning my head against the wall for some time now and any help would be so appreciated! the page is tribal miami art show dot com. Thank you! If only you could have the best of both worlds... http://www.ror.twisted-delusions.net/bluelayout/ I want it so the logo is in the bottom left of the banner and so there is no space between the banner and the menu. Also, IE seems to mess up just about everything. The menu is far taller than the called for 32px as evidenced by the red that should not be showing. It also throws the side shadows all out of position A little help please? http://www.ror.twisted-delusions.net/bluelayout/screen.css Hi DevShed CSSers! So I've made the foray into Blogging with MovableType, which is great, and I'm very excited about the potential for my sites. I'm having an issue though. I want to configure the templates so that the basic layout/navigation is all the same, even on the archive pages. I set up a two column layout, and the second column seems to always wrap underneath the post. Here's an example... http://blog.identitytheftsecrets.co...tity_theft.html How can I fix this so that it sits where it should on the right side? If you need to see the template code to offer help, let me know. I'll be happy to post. Please keep in mind that I'm new at this too, and am really trying to learn, but am very brand new to CSS. Thanks so much in advance for any help! I'm trying to use CSS to format a gallery component of a CMS I'm building. At the moment I'm failing miserably! You can see an example of the page I'm trying to sort out at http://www.geoffsoper.co.uk/albums/181_highlights.htm but there's a simplified test case at http://www.geoffsoper.co.uk/test_bed/index.htm which should be self-explanatory. The first problem is that I want the text of element 1 to start a new line when it reaches the drop down menu of element 2 but at the moment element 2 is displaced downwards. Element 1 and 2 should have their tops level. Secondly element 3 is taking its vertical cue from the bottom of the menu div due to the clear:left. Instead I want it to be immediately below elements 2 and 3 and then to have the images and descriptions directly below element 3. Finally I don't want the text of the description to flow under the image, I realise I could put a big margin-left value on the description divs to clear the image but I don't really want to rely on knowing the size of the image. If anyone can show me how I should be curing these issues I'd be very grateful! Thanks, Geoff Hi all, Im assuming I have a pretty basic problem, but with me being semi new to css Im struggling. Im trying to make my main white block in the centre of the page extend to the bottom of the page (commonly used I know) but at the moment there is a gap, I want it to extend to the bottom regardless of how much information there is. Also I added a navigation bar which is fine in 1024 resolution but in other resolutions it moves out of position. Here is the css I have so far: #mainarea { position:static; top:0px; margin-left: auto; margin-right: auto; width:800px; height:600px; background-color:#ffffff; } #navi { position:absolute; top:153px; left:106px; width:790px; height:40px; background-color:#000000; } Thanks in advance I was told earlier that absolute positioning was a bad practice, at least to do it excessively in code, so I learned about margins and floats and fixed my page to where I want it. I test my page in Firefox 3 and Safari 4 (beta) and they both look exactly how I want the page to look. However, IE doesn't like a few things: 1. The top header positioning doesn't match up where it should (leaving yellow showing, which I placed behind the images to make sure I was aligning the images correctly rather than using the same background color). 2. The navigation by letter (A-Z and View All) is positioned right under the light blue bar when it should be in the middle of the light blue bar. Safari 3 has the same problem mentioned in #2 but is positioned level with the bottom of the light blue bar. Any suggestions and solutions would be most appreciated as I have tried looking for some explanation/solution to this problem for a few days now. Thanks ahead of time. P.S. the link is advance.byu.edu/sgtest For some reason, I can't get this to look right in both Firefox and Explorer; I haven't even bothered trying this on Macs, Safari, etc.! The relevant HTML: Code: <div id="wrapper">
<div id="header"></div>
<div id="navbar">
<p>
<a id="selected" href="index.php#content">Home</a>
<a href="about.php#content">About</a>
<a href="screenings.php#content">Screenings</a>
<a href="trailer.php#content">Trailer</a>
<a href="gallery.php#content">Gallery</a>
<a href="comeplay.php#content">Come Play!</a>
</p>
</div>
<div id="main">
</div>
</div>
The relevant CSS:
#header
{
margin: 0 auto;
text-align: center;
width: 830px;
height: 534px;
background: #fff url(images/logo.jpg) top center no-repeat;
border: 0;
padding: 0;
margin-bottom: 0;
}
#navbar
{
background: url(images/horizontal_divider.jpg) #fff;
width: 830px;
height: 40px;
padding: 0;
margin: 0 auto;
margin-top: -10px;
vertical-align: bottom;
}
#navbar p
{
position: relative;
bottom: -18px;
left: 50px;
margin: 0;
padding: 0;
}
#navbar #selected
{
background: #FFF;
font-weight: bold;
border-width: 1px 1px 1px 1px;
border-top-color: #000;
border-right-color: #000;
border-left-color: #000;
border-bottom-color: #fff;
color: #000;
}
#navbar a
{
text-decoration: none;
color: #333366;
border: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-color: #666699;
border-right-color: #666699;
border-left-color: #666699;
border-bottom-color: #000;
margin: 0 -4px 0 0;
padding: 3px 6px 0 6px;
background: #CCF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
}
If you want to see the URL, please IM me (new users are not allowed to post them, it seems). For some reason, Firefox always outputs the navbar <p> one pixel lower than Explorer, which screws up the effect I'm going for. Also, for some reason, while Firefox does the borders just fine, Explorer doesn't render the border-top of the navbar when it's only 1 pixel wide (if I make it 2 pixels wide, only THEN will Explorer it [at 1 pixel wide, not 2]). Unfortunately, 2 pixels makes is look really ugly in Firefox. What's up with this? Any help would be much appreciated, as this has been driving me nuts! Gracias! i was wondering if anybody could check my source and tell me what i'm doing wrong. the few parts i am positioning (the navigation & the iframe) are not positioned correctly on screen on Mac browsers. any help would be greatly appreciated. thanks! Code: Original - Code #Nav { position : absolute; left : 483px; top : 230px; } #Frame { position : absolute; left : 483px; top : 290px; }
#Nav {
position : absolute;
left : 483px;
top : 230px;
}
#Frame {
position : absolute;
left : 483px;
top : 290px;
}
I'm trying to do some positioning with CSS laying out borders for my website which are composed of images. ie....border_left.jpg and border_bottom.jpg. My style sheet looks like this. .border_image_left { position: absolute; top: 119px; left: 0px } .border_image_bottom { position: absolute; top: 719px; left: 0px } In my html I have code like this. <p class="border_image_left"><img src="img/left_border.jpg"></p> <p class="border_image_bottom"><img src="img/bottom_border.jpg"></p> however IE and Firefox are rendering it different Firefox shows more space than IE. Anyway to correct this issue. Or any other trick for laying out borders with using a table? Thanks Okay, I have a few menu items and when I mouse over one of them, I want a sub div to show up. However, if I try and position the div relative to another, it gets positioned properly, but pushes the content below it downward, which I do not want. I want the content to float above like any sub menu would when the main menu item is rolled over. However, when I absolutely position the div, it's position changes based on the current width of the browser. I could technically get the width of the browser when the page loads and dynamically position it but I'm obviously making this harder than it has to be. Besides, the function would have to rerun every time the person changes the width of the browser. Possible, but again I know I'm making this harder than need be. I'd rather not spam devshed with a link to my site, but if you want to see the problem, I'll post it. Thanks in advance. I am trying to construct a site using a complete de-coupled design. My problem concerns some absolute positioned textfields. I do not wish to use a table to display the form, as this would defeat the whole purpose of the project. The page in question can be found here The CSS is as follows (exmaple of the name header and text field Code: /* Contact Form Positioning */
.NameFormTitle
{
position: absolute;
left: 15px;
top: 110px;
display: inline;
}
#NameFormField
{
position: absolute;
left: 120px;
top: 110px;
display: inline;
font-family: Arial, sans-serif;
color: #999999;
font-weight: bold;
line-height: 100px;
}
In IE 6 all is well. The textfield is the same height as the header, in Firefox and Netscape the textfields are to high. I have tried line height, but as the elements are absoluted positioned this has no effect (I think). Please help |
|||||||