|
CSS - Absolute, Adding Something Above...
hi
I have a long list of images positioned absolutely, and vertically down the page. However, if I wanted to add a new image to the top of the list... how can I do this without having to change all the positioning values of the other images? cheers nathan Similar Tutorialson my page http://tampabay-online.org/cetr/news/ the left side : Code: .content {
position:relative;
width:300px;
margin-left: 155px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
and the two on the right are : Code: #right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
#sidebar {
position:absolute;
width:200px;
top:400px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
If someone has a their font bigger on the artists section then the div will grow and go under the sidebar div. Any way to make these relative or fix that problem? Thanks! I can't create a complicated webpage without using absolute positioning for areas. For ex I want to create 2 top areas of screen width on top of page. Then I want 3 columns with 1st and 3rd columns having 3-4 seperate containers. Without using absolute I am way to confusied to get this happening. When using Absolute positioning is it best to have the first <div> be static so that that the Absolute Positioning has something a reference point? Thank you I am trying to position a footer at the bottom right hand corner of the page with style
Code: {position: absolute; bottom: 0px; right: 0px;}
However, the footer is not lying on the bottom, its about an inch off the bottom, interfering with a form field. How do I fix this? Hello All. I have very little experience with coding and the likes so i don;t even think I'm allowed to post on these forums? hehe BUT, I have ran into a problem on myspace with code. I am trying to create a linkable image I believe it would be called. <a href="website url"> <img src="wouldnt let me post url's" /> </a> Thats what i have so far. I beleive that means when the image is clicked it takes y ou to the homepage. (I dont even know if that is CSS, so i apologize if this is the wrong forum I'm posting on.) I am trying to get the image to appear around 300 pixels from the left and 400 pixels from the top. I had looked on google for a solution of some code to help me out and all I found was thing saying how 'Absolute Positioning' was what was needed. I tried adding various bits of code I had found to the code i currently had, and some of them would almost work, but text would appear after the image and it would be clickable also. I was just wondering how I could place the image were I want it and when it is clicked on, it takes you to the homepage. Thanks in advance to anyone who replies, and also apologies for my incredible noobness. -Connor The question is "What is the positioning context of a div positioned absolutely (e.g., div#nav{position:absolute;}); that is, where is the 0,0 coordinate from which any offsets will be measured?" Is the answer "it will be measured from the top left"? I have a DIV that is positioned as absolute and have used the required CSS to make it centered. But when viewed in Internet Explorer it is 1 or 2 pixels off-center?? Here is the CSS code: Code:
div.mpheader {
position: absolute;
display: block;
overflow: hidden;
padding: 0px;
top: 0px;
width: 900px;
height: 655px;
margin-top: 0px;
margin-left: -450px;
left: 50.0%;
background-image: url(images/header.png);
}
and the HTML code in the body: Code: <div class="mpheader"> </div> and here is the link to the site: highriserocks.com/maydayparade I have other CSS for A classes which are inside the DIV tags also but it's just the main image that is slightly off center. Any ideas?? Much appreciated! Adam Hi, I was wondering if any CSS experts could give me some advice on how to position elements on a page. Right now I'm really into using absolute positioning because it just seems so easy to place things on an exact point on the screen irrespective of all other elements, but I am wondering whether that is considered bad practice, any advice would be greatly appreciated. Thank you in advance for any correspondence. Is it possible to position something below a division that has the property { position: absolute } and can expand to a varied length depending on what is contained with it? Hi, I have a div which is centered in the area right of the menu. However, I am trying to get it so it sits absoultly center. The width of the menu is forcing its center line to be 180px right of true center. Here is the link: http://www.zombiemod.com/rm/nina2/about.html Here is the HTML: Code: <div id="main-image-container"> <h5><b>ME: SWEDE & TAURUS</b> - It must be a good combination<br /><br /> Patient, reliable, persistent & determined. They will do their jobs to perfection, or at least as close to it as possible. </h5> </div> Here is the CSS: Code: #main-image-container {
position: relative;
overflow: hidden;
width:600px;
margin-left:auto;
margin-right:auto;
}
Can anyone help me with this please? I tried to offset the main image container by -180px but that didnt work. Now i have used some of this on one of my designs and at 1280x1024 resolution it looks perfect however if you decrease the resolution then it move the image into a place i dont want it to be. Now is there a way around this or am i just going to have to put the "this site is best viewed at 1280x1024" sign on it? Hello everyone, I would like to ask for any and all help on solving this problem I am having. Well recently I used to make all of my web sites in tables until I came upon an article saying you should use CSS and absolute positioning. Therefore, my problem is this, If you go to this partially completed site, http://sykotic-designz.org/newsite/index.html. You will now notice that there are two 'shadow' images. One on the left and one on the right. The one on the left works fine. Test it by making your browser window smaller and bigger. You will notice the right shadow moves. I have tried various alternatives like using a table just for the one image but you still need to use absolute position and did not work, I have messed with displaying absolute position by % and by pixels. But it doesn't want to seem to work either. I am mainly having problems probably because I am new to the DIV tags in which I use entirely through out this page, I am not sure if CSS will help at all. You can view the source of the page if you wish. I appreciate and and all help you may provide, thanks! If I do something like this: .divSubHomeRtPhoto { position: absolute; left: 340px; top: 167px; width: 420px; height: 420px; } Then <div class="divSubHomeRtPhoto"> my left and top positions don't seem to take in IE 5.2 for Mac. This seems to be fairly well known, from what I read on the internet. What this means for me though, is that I have to almost do away with positioning through CSS if I want my pages to work with IE 5.2 Mac, whcih I recently discoverd I do want to work. How do other cross browser CSS writes deal with this problem? Thanks for your help CJB Good morning, I've been working on my site, and it's in its final stages, but I'm experiencing a problem I can't figure out. I have a floating bar with all of my navigation links in it which is absolutely defined with the following code: Code: #headerBar { /* sets position of floating bar */
position: absolute;
clear: both;
top: 57px;
left: 0px;
padding: 0px;
margin: 0px;
width: 100%;
filter: alpha(opacity=50);
-moz-opacity: .50;
opacity: .50;
}
The problem I'm experiencing is that in Firefox, Safari, and Opera, the bar appears magically in the perfect position, however, in Internet Explorer, the bar is 5-10 pixels higher than it should be. The url is: http://www.alokw.com Any suggestions? Thanks! Im trying to get an image to center in a div. It works as long as one part of my CSS is commented out. The issues is the part that is breaking it, is required for another script to run that I have not added in due to its vast amount of code. Can anyone tell me a workaround.. leaving the MUST have code in place. Im willing to add anything to the code, just not remove if possible. Full Code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#image {
display: table-cell;
text-align: center;
vertical-align: middle;
width:356px;
height:356px;
border:1px solid blue;
}
#image * {
vertical-align: middle;
}
/*\*//*/
#image {
display: block;
}
#image span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if IE]><style>
#image span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
<style type="text/css">
#image img {position:absolute;}
</style>
</head>
<body>
<div id="image"><span></span><img src="http://www.google.com/logos/olympics08_rhythm.gif"></div>
</body>
</html>
Code that MUST stay in the CSS Code: #image img {position:absolute;}
Just to note, the rest of the code is for the most part an exact dup of the cross-browser image center in div code here, http://www.brunildo.org/test/img_center.html Hey guys, This is my first time messing with absolute positioning, and I am in a pickle. I have created a website and it contains a services page. On the list of the services, when you scroll over each word, a block of text describing that particular service pops up. Now, I have placed the box using <span>'s and hidden blocks. My problem is that when I change screen resolutions, the placement of the box changes. I am looking for a resolution-independent workaround for this, so that others running 1024, 1280, etc wont have a problem viewing the site correctly. I have searched the web dry it feels like. Maybe I'm just bad at looking, but its the last thing I need to do before putting up the site. Check out the page and source code he URL Additionally, this is the code I used to make this (it's Eric Meyers PURE CSS codes): Code: <style type="text/css">
<!--
div#links a:hover {text-decoration: none;
background: #698165;}
div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute; top: 535px; left: 233px; width: 377px; height: 230px;
padding: 5px; margin: 10px; z-index: 100;
color: white;
font: 10px Verdana, sans-serif; text-align: justify;}
div#links a:link { text-decoration: none;
color: white;}
div#links a:visited { text-decoration: none;
color: white;}
-->
</style>
then the code is activated by: Code: <a href="#">Mowing <span>Service Landscapes will tend and maintain your lawn with the most substantial of detail and care. Our services will provide you with a beautiful, healthy landscape that will turn heads. If you are looking for quality and dependable service that you can turn to time and time again, look no further than Service Landscapes. </span> </a> Any help would be greatly appreciated, and thanks in advance! I have a div that should be sat at the bottom of its containing div (absolute positioned, bottom: 0, right 0) and it does so in Firefox, but in IE it is raised by about 20px or so. Any help to iron this out would be great. The page and its effects can be seen at www.prioritypie.f2s.com/KSA/KSA6/index.htm and the css at www.prioritypie.f2s.com/KSA/KSA6/styles/KSA6style.css It's the "menuContainer" div which isn't sitting right, nested in the "header" div. Many thanks for any help I think the best way to explain this is by example, if you go to this page: http://lifeyouwant.workinprogress.co.uk/how-we-work You will notice the drop down menu works fine in Firefox, Safari, Opera etc. However when it comes to IE7 the drop down menu is positioned too far to the right. Has anyone got any ideas how I can get this to display correctly in IE7 (like it does in Firefox). I would prefer to try not to use a hack for IE7. ANy ideas would be great! Thanks. IE browser seems fine but mozilla display a simple table with links inside in a squished up format, not present on the web design. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="GENERATOR" content="PageBreeze Free HTML Editor (http://www.pagebreeze.com)">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>mybar.html</title>
</head>
<style type="text/css">
#elButton a {
color: #000000;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration: none;
/*border:1px outset aqua;*/
/* background-color:#00ffff;*/
border-right-style:solid;
border-right-width:1px;
width: 110px;
/* padding: 3px 5px;*/
/*margin: 1px;*/
}
</style>
<body bgcolor="#ffffff">
<p>
<table style="WIDTH: 487px; HEIGHT: 26px" cellspacing="0" cellpadding="0" width="487"
align="right" bgcolor="#00eaea" border="0">
<tr>
<td valign="top" align="middle">
<div id="elButton">
<a href="#">Java Script</a>
<a href="#">Dynamic HTML</a>
<a href="#">Server Side</a>
<a href="#">Client Side</a>
</div></td></tr></table></p>
</body>
</html>
|
|||||||