|
CSS - Not Understanding How To Make One Div Relative To Another
I am working on a site design and I have a div that is on another z-index because I wish it to appear on top. I would like that div position to be relative to the a parent div.
Here is a link to the current issus: http://www.rustbug.com/the19thhole/index.html page code. I have the div for the logo div within the page for now: 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>Untitled Document</title>
<link href="css/tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Wrapper">
<div id="myDiv"
STYLE="position:relative;
z-index: 2;
top:20px;
left:135px;
height:287px;
width:358px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png',sizingMethod='scale');"/>hello</div>
<div id="Navigation">
<ul id="mainNav">
<li><a href="#"><span>home</span></a></li>
<li><a href="#" class="active"><span>gallery</span></a>
<li><a href="#"><span>directions</span></a></li>
<li><a href="#"><span>contact us</span></a></li>
</ul>
</div>
<div id="Container">
<div id="Topcurve"><img src="images/topCurve.gif" height="8" width="689" border="0" /></div>
<div id="Headerbar"><img src="images/headerBar.gif" height="48" width="670" border="0" /></div>
<div id="Titleimage"><img src="images/titleImage.gif" height="207" width="670" border="0" /></div>
<div id="Contentcontainer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<div id="Footer">
<p>The 19th Hole / #27 Main Street / at the Royal Dane Mall / St. Thomas, V.I. 00802<br />
phone: 340-777-8811 / email: ehcsnow@yahoo.com</p>
</div></div>
<div id="Bottomcurve"><img src="images/bottomCurve.gif" height="20" width="689" border="0" />
</div>
</div>
</body>
</html>
here is the css Code:
@charset "utf-8";
/* CSS Document */
html, body {
margin: 0px;
padding: 0px;
background:url(../images/background.jpg)
}
body {
text-align: center;
}
#Wrapper {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
width: 765px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
text-align: left;
height: auto;
border:1px solid white;
}
#Container {
color: #333;
clear: both;
width: 689px;
background:url(../images/containerBackground.gif) repeat-y;
margin: 0 auto;
}
#Topcurve {
clear: both;
width: 689px;
margin: 0 auto;
}
#Headerbar {
clear: both;
width:670px;
margin: 0 auto;
padding-right:4px;
}
#Titleimage {
clear: both;
width:670px;
margin: 0 auto;
margin-top:6px;
padding-right:4px;
}
#Contentcontainer {
clear: both;
width:650px;
margin: 0 auto;
margin-top:6px;
padding:5px;
border:1px solid #009900;
}
#Logo {
z-index: 2;
position:absolute;
top:20px; left:135px;
width:358px;
height:287px;
}
#Footer {
clear: both;
width:670px;
height:50px;
background:url(../images/footerBar.gif) no-repeat;
margin: 0 auto;
margin-top:6px;
padding-right:4px;
}
#Bottomcurve {
clear: both;
width: 689px;
margin: 0 auto;
}
#Navigation {
font-size: 12px;
color: #333333;
height: 25px;
width: auto;
padding: 0px;
margin-left: 275px;
}
#mainNav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#mainNav li {
float: left;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainNav li a {
margin: 0px;
background-attachment: scroll;
background-image: url(../images/tabs_2.png);
background-repeat: no-repeat;
background-position: right 0px;
font-weight:bold;
color: #FFF;
text-decoration: none;
height: auto;
width: auto;
float: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainNav li a:hover {
text-decoration: none;
color: #66cc00;
}
#mainNav li a span {
background-attachment: scroll;
background-image: url(../images/tabs_2.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 30px;
height: 19px;
width: auto;
float: left;
cursor: pointer;
cursor: hand;
margin: 0px;
}
#mainNav li a.active {
background-attachment: scroll;
color: #359a02;
background-image: url(../images/tabs_2.png);
background-repeat: no-repeat;
background-position: right -47px;
}
#mainNav li a.active span {
background-attachment: scroll;
background-image: url(../images/tabs_2.png);
background-repeat: no-repeat;
background-position: 0px -47px;
}
#mainNav li a.active:hover {
color: #66CC00;
text-decoration: none;
cursor: pointer;
cursor: hand;
}
/*#Logo {
position:relative;
z-index:2;
top:20px; left:135px;
width:358px;
height:287px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader;
}*/
Any help would be greatly appreciated. Thanks! Stephen Similar TutorialsHi, I am trying to wrap my head around a certain layout that I want to create. Hear is a link to a mockup of what it would look lik... I am curious if it is possible to add an element like the one I have marked with a "?". If so could you please share with me some further details. REgards Chad Hello, I am trying to make my own webpage, and i downloaded an opensource html document along with the css files. It all works fine, except that i want to change the color of links on the page ( currently its just an underline ) i would like them to be blue. My problem is i have no idea which part of my css file does this? Can anyone help, the color portion of the css file is he Quote: html{height: 100%;} body { background: #837560; color: #70695A; } blockquote { background: #FFFFFF; color: #70695A; border-color: #767676; } #main { background: #FFFFFF url(back.png) repeat-y; color: #70695A; } #links, #footer, #menu, #menu li a { background: #FFFFFF url(menu.png); color: #DBD7D1; border-color: #D7D7D7; } #links a, #footer a, #links a:hover, #footer a:hover { background: transparent; color: #DBD7D1; } #logo { background: #FFFFFF url(logo.jpg) no-repeat; color: #70695A; } #logo h1 { background: transparent; color: #FFFFFF; } h1, #column2 h1 { background: transparent; color: #CE7014; border-color: #CAAE90; } /*hover color on menu at top*/ #menu li a:hover, #menu li a#selected, #menu li a#selected:hover { background: #FFFFFF url(menu_hover.png); color: #70695A; } /*This is text color of the main text*/ #content, #column2 a, #column2 a:hover { background: transparent; color: #70695A; } /*This will effect link on right colum your sidebar*/ .sidebaritem, .sidebaritem a, .sidebaritem a:hover { background: transparent; color: #DBD7D1; } .sbihead { background: #FFFFFF url(sbi_header.png); color: #70695A; } .sbihead h1 { background: transparent; color: #70695A; } .sbilinks li a { background: #FFFFFF url(link.png); color: #DBD7D1; } .sbilinks li a:hover { background: #B7B7B7; color: #CE7014; } input, textarea { background: #FFFFFF; color: #70695A; border-color: #CAAE90; } The links i want to change are all in "column2". Thanks: Hi guys, I run a web comic that's dynamically generated with PHP by placing component graphics on a page with CSS layers. I'm in the middle of a big redesign of it and in the new version I'm trying to use relative positioning instead of absolute positioning like I did before. In the original version, the comic itself was a fixed height and so the menu that appeared below was in a fixed position. I bumped it down the page by using a 1x1 transparent image as a spacer. But in the new version the comics will be of variable height. In order to keep the comics from overlapping the menu, I wanted to have each element bump the next element down depending on its size. But relative positioning is not behaving the way I'm expecting and after reading a bunch of stuff on the web, I'm still confused. Right now I'm just testing it out with three blocks: the title graphic, the "no comic found" error, and the copyright. The copyright is supposed to appear below the error message, but when I bump the error message down away from the title graphic with "position: relative; top: 100px", the copyright block doesn't take this into account and appears just under where the error message WOULD have been had I not given it a relative offset. What I want to know is how to get all the divs to adhere to the offsets of the divs that came above it so that they will continue to appear below each other like the normal HTML flowlayout. Currently, all three blocks are inside a container div so that the content will stay centered if the window is resized. Sorry if this is confusing, I'm not really sure how to explain it. I've been doing a little bit of experimenting with YUI grids, and I have to admit I'm having some trouble understanding how they work. I've noticed that when you define a couple of columns, the columns are floating, but the parent container automatically expands with the child content. As far as I know, the only ways to do that are to float the parent container, or set overflow: auto (or hidden) to the parent. Using Firebug, it appears neither of these are happening. Here's my code: Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/base/base.css" />
</head>
<body>
<div id="doc4">
<div class="yui-g" style="border: 1px solid black">
<div class="yui-u first">
<p>Column one</p>
</div>
<div class="yui-u">
<p>Column two</p>
<p>Column two</p>
<p>Column two</p>
</div>
</div>
<!-- normal setup, parent doesn't expand -->
<div style="border: 1px solid black">
<div style="float: left; width: 49.2%">test</div>
<div style="float: right; width: 49.2%">test</div>
</div>
</div>
</body>
</html>
What am I missing? Hello all, I had a simple question, I don't understand why all my html code move and not only my body code in the html. Actually, I only want that the code inside the <body> and </body> move with margin or padding. But I wrote a line that only draw a line of color, and cannot understand she is moving alsot when I adapt the css. Here is my html file : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>This is our title.</title> <link rel="stylesheet" media="screen" type="text/css" href="./myCss.css" /> <meta http-equiv="Content-Type" content="text/html"; charset=utf-8" /> </head> <table width="100%" bgcolor="#003399" style="height: 17px;" border="0" fra me="hsides" cellspacing="0" cellpadding="0"><tbody><tr><td align="left"></td></t r></tbody></table> <body class="ourBodyWiki"> <a href=.>start</a></br> <p> Bienvene sur la premiere page de dokuwiki ! </p> <p> Commencons par creer deux liens : </p> <ol> <li class="level1"><div class="li"> Notre premier lien : <a href="linux.html" cl ***="wikilink1" title="linux.html">Linux</a></div> </li> <li class="level2"><div class="li"> Deuxieme lien : <a href="bsd.html" class="wi kilink1" title="bsd.html">BSD</a></div> </li> <li class="level2"><div class="li"> Troisieme lien : <a href="microsoft.html" cl ***="wikilink1" title="microsoft.html">Microsoft</a></div> </li> </ol> <p> Ceci est une premier version ! </p> </body> </html> And here is my css file, in the same directory as the html file : Code:
.ourBodyWiki{
margin: 10px;
padding: 20px;
}
p{
margin: 0px;
}
Can someone help me please ? I am still newbie in css and html but I only need to do simple things. My skills are a little suspect when it comes to properly using the clear and float elements in CSS and I have searched around for a good tutorial showing when and when-not to use the elements, but have not found anything that will suffice. Anyone have any pointers or tutorials that you think might be worth checking out? TIA. I am trying to create a menu that uses drop downs (only 1 deep) and I seem to be running into problems. I've used code that I've tried to tweak but seem to be having problems. I'm sure there is code in here that I don't need, but I don't know what I can remove and what I can't. My biggest current problem is that I want a) to have more room between the menu items (to space them out) but I can't seem to find where to set that? and b) I can't seem to figure out how to set the width of the drop down items...I've tried everywhere! Here is a link to the page: http://www.thespinzone.com/temp/csshelp.html and here is the code for the css I'm using Code:
<style type="text/css">
body {
font: 78%/1.5 arial, helvetica, serif;
background: #FFFFFF;
text-align: center;
padding: 0;
margin: 0em;
}
#container {
width: 745px;
background: url(cssbg2.gif) center right no-repeat;
text-align: left;
border: 0px solid #FF0000;
margin: 0 auto;
}
#nav, #nav ul {
float: right;
width: 353px;
height: 96px;
list-style: none;
line-height: 1;
font-weight: bold;
padding: 20px;
border-width: 10px 10px;
margin: 0 0 0 0;
}
#nav a {
display: block;
width: 8em;
width: 4em;
color: #7C6240;
text-decoration: none;
padding: 0.25em .5em;
}
#nav li {
float: left;
padding: 0;
width: 1em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
width: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 10em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #FF0000;
border: 0px solid #FF0000;
}
</style>
sdf
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;} 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;
}
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? 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. 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. 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 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. 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 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>
|
|||||||