|
CSS - Can You Do Something Relative To The Top Left?
i want to place an image relative to the top left of an element. is that possible in css? i've been looking everywhere, but i can't find anything about having two properties in one element.
Similar TutorialsThe code below displays the boxes i want but i do not understand why those that could be aligned to left are not aligned. I would like to have those boxes to be aligned to the left. Any help is appreciated. Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title></title>
<style type="text/css">
div {
position: relative;
width: 10em;
padding: 0.25em;
margin: 0.25em;
border: 1px solid black;
text-align: center;
overflow: auto;
float: left;
}
</style>
</head>
<body>
<div style="top: 0em; height: 2em;"> 8 pm</div>
<div style="top: 5em; height: 2em;"> 9 pm</div>
<div style="top: 10em; height: 2em;">10 pm</div>
<div style="top: 8em; height: 5em;">Box A</div>
<div style="top: 9em; height: 5em;">Box B</div>
</body>
</html>
I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.). Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left". What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it? 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. OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)? Here's some example HTML: html4strict Code: Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>
And the CSS: css Code: Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }
I always seem to run into this problem and somehow get it fixed but this time I am stuck. I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE .. The main CSS: Code: * {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-color:#e5e5e5;
}
#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}
#navigation {
width: 640px;
height: 22px;
background-color:#c9c9c9;
margin-top: 88px;
}
#insidewrapper {
height:auto;
width:99%;
margin: 6px 1px 4px 1px;
}
/* Begin Left Side Info Boxes */
#sidebar {
width:150px;
height:600px;
margin-left:2px;
float:left;
border:1px solid #666666;
border-bottom:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#666666;
background-color:#ffffff;
}
.infobox {
height:123px;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
padding:3px;
border-top:0px;
border-left:0px;
border-right:0px;
}
.infopic {
margin-top:9px;
}
.infobutton {
height:20px;
border-bottom:1px solid #666666;
padding-left:3px;
}
/* Begin Main Content */
#maincontent {
width:465px;
height:593px;
margin-left:158px;
border:1px solid;
border-color:#666666;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
padding:3px;
background-image:url(../images/background_trans2.gif);
background-repeat:no-repeat;
background-position:center;
background-color:#ffffff;
}
/* Main Content for pages with textual content */
#content {
width:97%;
height:auto;
padding:5px;
}
/* Main Content for pages with products */
#productWrapper {
height:auto;
width:100%;
margin-top:10px;
}
#productLeft {
height:auto;
width:115px;
float:left;
}
#productMiddle {
height:auto;
width:200px;
margin-left:1px;
float:left;
}
#productRight {
height:auto;
width:auto;
}
/* Begin Footer */
#footerlinks, #footer {
width:640px;
height:auto;
text-align:center;
float:left;
}
#footerlinks {
border-right: 2px solid gray;
border-bottom: 1px solid gray;
border-left: 2px solid gray;
background-color:#c0c0c0;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
letter-spacing:1px;
color:#555555;
padding-bottom:4px;
}
#footer {
margin-left:0;
margin-top:0;
margin-bottom:15px;
padding-top:8px;
border-top: 0px;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
border-left: 2px solid gray;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#555555;
background-color:#a9a9a9;
}
/* Begin Rightside Column */
#right {
border: 1px solid orange;
width:195px;
margin-left:650px;
padding-top:111px;
}
Hi, I have this page: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {padding: 0; margin: 0; }
html {padding:0; margin:0;}
.leftDiv {
height: 100px;
width: 30px;
background-color: teal;
float: left;
}
.mainDiv {
padding: 5px 0 10px 0px;
width: 200px;
height: 20px;
background-color: blue;
}
.mainPara {
padding-left: 5px;
}
</style>
</head>
<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
<div class="leftDiv">
</div>
<div class="mainDiv">
<p class="mainPara">
First Para
</p>
</div>
<div class="mainDiv">
<p class="mainPara">
Second Para
</p>
</div>
</div>
</body>
</html>
And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions? Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent. Any help is appriciated, CJB I am trying to create an image that stays in one place no matter how large the window is. This seems to work great in FF but when i open it in IE the image is not where i positioned it! Has anyone ever seen this? Thanks. Code:
#apDiv4 {
position:relative;
left:370px;
top:328px;
width:154px;
height:130px;
z-index:1;
clip: rect(auto,auto,auto,0px);
margin-left: auto;
margin-right: auto;
}
I'm having an issue using position: relative in IE6. Basically I'm doing this: Code:
<style>
.class1 {
width: 900px;
padding: 0px;
margin: 0 auto 0 auto;
}
.floatimg {
position: relative;
top: -200px;
left: 0px;
padding: 0px;
margin: 0px;
}
</style>
<div class="class1">
<img class="floatimg" src="foo.gif" />
<p>Some text.</p>
</div>
So, basically I'm trying to move the image up a bit in the div. This works in the latest firefox and IE7, but in IE6 the image moves up, but the text does not. It stays as if the image had not been moved and this leaves a big gap. Hi, Code can be found below and output as it is currently @ http://www.generating-sets.com/index.new.php Anyway, I have the box with the id of 'newsbar'. My problem is i want this box in the following posistion: It should sit on the bottom footer bar and be in between the two sidebars. The code below makes it overlap the two sidebars. So how could i make the posistion relative to the two side bars so it nests in the middle? All this CSS is doing my head in, but for glory without tables! lol Charlie PHP Code: h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} a:link {color: #ffffff; text-decoration: none;} a:hover {color: #dedbcb; text-decoration: underline;} a:visited { color: #ffffff; text-decoration: none;} body {margin: 0; padding: 0; font-family: sans-serif; font-size: .7em; line-height: 1.4em} div#header {padding: 2%; text-align: center; background-color: #0e2e3b; color: #ffffff; margin-bottom: 2px; border-bottom: solid #ffffff 1px} div#navbar {padding: 0%; text-align: center; background-color: #0e2e3b; color: #ffffff; margin-bottom: 0px; border-bottom: solid #ffffff 1px} div#newsbar {padding: 1%; text-align: center; background-color: #0e2e3b; color: #ffffff; margin-bottom: 0px; border: 2px #ffffff solid; position: relative;} div#footer {padding: 0%; text-align: center; color: #ffffff; clear: both; background-color: #0e2e3b; border-top: solid #ffffff 1px} div#maincontent {padding: 2%; text-align: justify; margin-left: 150px; background-color: #0e2e3b; color: #ffffff; margin-bottom: 2px; border-right: solid #ffffff 1px; border-left: solid #ffffff 1px} div#leftcolumn {padding: 2%; float: left; text-align: right; background-color: #0e2e3b; color: #ffffff; width: 150px;} div#rightcolumn {padding: 2%; float: right; text-align: right; background-color: #0e2e3b; color: #ffffff; width: 10px;} In the following code i need *Signup* to align just to the right of *Login*. Due to *SearchContainer* location, it must be absolute positioned. Thanks for the help. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css" title="">
#SearchContainer { position:absolute; z-index:1; width:210px; height:125px; border:1px solid red; }
#SearchField { position:relative; z-index:3; width:200px; top: 5px; border:1px solid orange; }
#LoginMessage { position:relative; z-index:3; width:200px; top: 10px; border:1px solid yellow; }
#Login { position:relative; z-index:3; width:150px; top: 20px; border:1px solid green; }
#Signup { position:relative; z-index:4; width: 25px; top: 20px; left: 10px; border:1px solid blue; }
</style>
</head>
<body>
<div id="SearchContainer">
<div id="SearchField">Epsum factorial non</div>
<div id="LoginMessage">Lorem ipsum dolor</div>
<div id="Login">Li Europan lingues<br>Li Europan lingues</div>
<div id="Signup">xxx</div>
</div>
</body>
</html>
Im working on a project that required some css that I'm not used to using to pull off an effect. here is the url http://www.staging.crea8te.com/ftea I'm having one issue: Issue: the basic structure is <div1>position: relative <subdiv></div>position:absolute <subdiv></div>position:absolute </div> <div2> </div> <div3 </div> I'm not a pro at using positioning by any means with something like this and I don't understand why div2 is sitting at the top instead of at the bottom of div1. div 2 and 3 display correctly .. just arent showing up at the bottom of div1 i can paste the html and css if necessary it is just kind of a lot and didnt want to have a huge post.... any ideas? Okay I have a big problem and I don't know what is happening and it's really really bugging me. I have some extra space at the top of my page, it's about 10 lines in height. the items below the space are made up of two classes. They are .source and .quote. I tried using position:relative so that they move up but I have a problem. I tried Code: position:relative;bottom:7em; but that just amde them disapear leaving just their space. Also the .source iems are missing already and I don't know how to make them apear. I'm not hiding them at all at any point. http://142.177.157.241:8080/bikers/ the automatic parse URLs options doens't work even when it's used. I am trying to have div mian, lightback, and darkback extend vertically to accommodate all cnav and content items. Obviously it is not working, but I cannot seem to spot my mistake. I would be very grateful if someone would be able to help me find where I am going wrong. HTML. Code:
<div id="main">
<div id="lightback">
<div id="darkback">
<div id="contentnav">
<div class="cnavlink"></div>
<div class="cnavspacer"></div>
<div class="cnavitem"></div>
<div class="cnavitem"></div>
<div class="cnavspacer"></div>
<div id="cnavbox"></div>
</div>
<div id="contentbox">
THIS IS CONTENT
</div>
</div>
</div>
</div>
CSS: Code:
#main {
width: 761px;
position: absolute;
left: 100px;
top: 328px;
height: auto;
}
#lightback {
background-color: #222322;
border-top-width: 0px;
border-right-width: 3px;
border-bottom-width: 0px;
border-left-width: 3px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #C6A084;
border-right-color: #C6A084;
border-bottom-color: #C6A084;
border-left-color: #C6A084;
position: relative;
height: auto;
width: 755px;
}
#darkback {
background-color: #131313;
height: auto;
width: 745px;
margin-right: 7px;
margin-left: 4px;
position: relative;
}
#contentnav {
position: relative;
width: 150px;
margin: 4px;
float: right;
background-color: #131313;
border-top-width: 10px;
border-bottom-width: 10px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #424242;
border-bottom-color: #424242;
}
.cnavspacer {
background-color: #424242;
height: 10px;
width: 100%;
position: relative;
}
.cnavlink {
background-color: #282828;
background-repeat: repeat;
height: 21.5px;
width: 100%;
position: relative;
margin-top: 2px;
margin-bottom: 2px;
}
.cnavitem {
width: 100%;
height: 150px;
margin-bottom: 4px;
position: relative;
background-color: #424242;
margin-top: 4px;
}
#cnavbox {
width: 100%;
height: 50px;
margin-bottom: 4px;
position: relative;
background-color: #424242;
margin-top: 4px;
}
#contentbox {
background-color: #222322;
width: 577px;
position: relative;
float:left;
border-top-width: 10px;
border-right-width: 1px;
border-bottom-width: 10px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #424242;
border-right-color: #424242;
border-bottom-color: #424242;
border-left-color: #424242;
margin-top: 4px;
margin-right: 4px;
margin-bottom: 4px;
margin-left: 3px;
}
I am trying to learn CSS Positioning in an effort to move away from table-based layout. I use some pretty complicated layouts and I am a big fan of the "stretch" effect for my site headers. As my first project, I am converting a site that uses a stretch header, and in table layout, used to be divided into 5 columns. I have managed to re-create the header almost as good as the original with just 3 divs, using absolute positioning, z-index, and a background image. Then I used relative positioning to create the div for the main content, and I was planning to do another relative-positioned div for the footer. I feel that I'm very close but could use a little help to get over the hump. I have two main problems: 1. When you resize the window horizontally below about 850px, the images in the header start to overlap. I would like them to "bump" each other and have a scrollbar appear. I've tried to fix this using the min-width property in various divs, and I tried to use a wrapper div, but nothing seemed to work very well. This is something I can live with, but any tips would be appreciated. 2. Relative positioning seems to work fine for the main content div (#middlebox in my .css). However, I did the footer div in the same manner, and it only works in Firefox, not IE. If I could get it to work in both Fx and IE I'd be happy - I don't care about any other browsers. 3. Any other tips and tricks that would make it cleaner or better, etc. would be appreciated. Remember I am a n00b so go slow. Original site (tables): http://www.gpleague.com New test site (css): http://www.gpleague.com/cssp.htm Css file: http://www.gpleague.com/csstest.css Hi, I'm following a tutorial and I would like to understand the position functioning. I have a box container and some elements in. In the css, the are all set relative position. I don't understand why the second element (AMPT) has its contain offset and third one (Writing) is not. I understand that the first element has like a reference the container box. I would sincerely glad if you can help me to understand the relative positioning. Thanks in advance. PS: I'm using firefox and here is the code: artefact89.free.fr/relative.html (without www) I'm trying to create these two elements that are 100% of their parent element minus the height of anything above or below them. For example: Code: <html>
<head>
<style type = "text/css">
body
{
margin: 0px;
padding: 0px;
height: 100%;
color: #FFFFFF;
background-color: #636E90;
}
div.everything
{
padding: 0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
width: 750px;
height: 100%;
background-color: #4A61A8;
}
.top
{
background-color: red;
height: 120px;
}
.left
{
float: left;
margin-left: 0px;
width: 125px;
height: 100%;
background-color: #000000;
color: #FFFFFF;
}
.right
{
float: right;
width: 125;
height: 100%;
margin-right: 0px;
color: #000000;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div class = "everything">
<div class = "top">Top</div>
<div class = "left">Left</div>
<div class = "right">Right</div>
</div>
</body>
</html>
The problem is that the "left" and "right" elements extend beyond the bottom of "everything," and more precisely they're extending the height of "top" off the bottom of "everything." That probably read poorly. The "left" and "right" elements are doing what they're supposed to do in that they are 100% of the parent element "everything." The problem is that this height isn't derived as being height of "everything" - height of "top", but instead it's just the absolute height of "everything." I've been trying to figure out how to make their height 100% of their parent element after other elements, such as "top", are placed inside the same parent element. Hi! I can not solve one problem. As You can see here bezlica.ru/joomla/ , I need to have image "contacts" at the bottom of the grave. Currently, it is relative to top and works fine on different resolutions. But, if content needs to be expanded like this bezlica.ru/joomla/index.php?option=com_content&task=view&id=12&Itemid=9, images drops down from the grave to bottom. Maybe there is a way to make it relative to the bottom of the screen, or some other solution? It needs to stay fixed where it is on different resolutions, that is why it is so hard for me! Any help will be appreciated. Regards, Konstantin. This may or may not be a stupid question, but mostly because the sites I learn this stuff from dont really go into much detail I really have to ask... Whats the real difference between using... margin: 12px 0px 0px 12px and position: relative; top: 12; left: 12; This is mostly concerning <div>'s that are just making boxes onscreen (which will have images/text in em). I guess you guys will wanna see code, so heres an example: Code: div#menu_head {
background: #ffffff;
float: left;
margin: 0px 0px 0px 0px;
width: 200px;
height: 60px;
font-family: verdana;
font-size: 11px;
border-top: 1px #000000 solid;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-bottom: 1px #000000 solid;
color: #000000;
}
div#cont_head {
background: #ffffff;
float: left;
margin: 12px 0px 0px 12px;
width: 200px;
height: 60px;
font-family: verdana;
font-size: 11px;
border-top: 1px #000000 solid;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-bottom: 1px #000000 solid;
color: #000000;
}
As you can see on #cont_head I used a margin to set it 12 pixels away from #menu_head ... If I were to change it to this instead... Code: div#cont_head {
background: #ffffff;
float: left;
position: relative;
top: 12;
left: 12;
width: 200px;
height: 60px;
font-family: verdana;
font-size: 11px;
border-top: 1px #000000 solid;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-bottom: 1px #000000 solid;
color: #000000;
}
...then it still looks exactly the same in the browser. So I am mainly looking to know, please, which one is proper to use and why? im sorta confused on what the purpose of both margins and position:relative are specifically for. I mean as far as I know.. position:relative; is like position:static; but allows you to take where its naturally supposed to go, and adjust it. so to me that makes sense for my situation. That's what its there for!.. but the only site i could find that shows floats being used with spacing inbetween it using margins to do so. but i mean how do i know that are right? yknow? Your help is greatly appreciated. And maybe since I was brave enough to post this I might mention another strange thing I don't understand (compared to old, non-xhtml ways) Code: <div id="container"> <div id="sub_container"> <div id="pasta"></div> <div id="trees"></div> <div id="widget"></div> <div id="squirrel"></div> </div> </div> Code: div#container {
background: #ff0000;
position: relative;
margin: 0 auto 0 auto;
width: 600px;
border-top: 1px #000000 solid;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-bottom: 1px #000000 solid;
}
div#sub_container {
padding: 4px;
position: relative;
}
For whatever reason that #sub_container seems to be required if I want to have padding of 4 pixels around all my content. because if i put the padding: 4px into #container instead and remove #sub_container altogether.. then the width stretches further than it is supposed to... and actually just now as I write this, I suddenly consider that maybe, like with borders, when you add padding it increases the width/height by the padding amounts. hmm maybe that must be it then I am not sure why I hadnt thought of that. I guess because it never did that with tables. Is this new assumption correct? But then thats almost like the padding gets put onto the outside of the layer rather than the inside of the layer like before??? I'm sorry I am just a confused person I guess :P Thank you so very much for the help.. I really do appreciate it. -Chi ok, here's what i'm working with: multiple rows of data (divs stacked on top of eachother, we'll call main_container), with 2 columns each. the right hand column has a list of emails (call it sent_details), but it only shows as many as can fit in main_container. the design calls for me to put a "more" link on the bottom right hand corner of sent_details. so, i have to give sent_details a position of relative and the more link an absolute position fixed to the bottom right. in firefox, when i click "more", sent_details will expand, reveling more emails (sent_details was given overflow: hidden). in IE, however, sent_details will expand, however all sent_details below it will remain in their fixed positions, making the expanded div above it overlap. does anyone have a suggestion to fix this? do i need to post code? thanks |
|||||||