15 replies [Last post]
dungol
Offline
newbie
Last seen: 11 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-10-22
Posts: 7
Points: 8

Hi Guys,
I am new with CSS. I'm trying to create a absolute position button in my website.
http://crisclothesalterations.com/sample/test1020.html
I inserted the TEST word into a absolute position div ( top right side of my home page) as a sample to explain it.
#test {
width: 250px;
height: 50px;
position: absolute;
right: 200px;
top: 440px;
background-color: #CC0000;
}
I would like to keep this button below the phone sign(at the backgroud image), but when I resize the browser to the left side the TEST button comes toward to the left side as well.
How can I keep the TEST word below the phone sign even resizing the page to left or to the right side?
Thanks in advance.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Does this solve the

Does this solve the issue?

<!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>
<style type="text/css"> 
<!-- 
 
#menu  .contact {
	width: 143px;
	height: 49px;
	left: 840px;
	top: 75px;
	background-image: url(<a href="http://crisclothesalterations.com/sample/images/menu/contact.png" rel="nofollow">http://crisclothesalterations.com/sample/images/menu/contact.png</a>);
	background-repeat: no-repeat;
}
#menu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 940px;
	height: 194px;
	position: relative;
	background-repeat: no-repeat;
	margin-top: 0px;
}
#menu span {
	display: none;
	position: absolute;
}
#menu a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}
 
#menu a:hover {
	background-position: left bottom;
}
 
#menu a:hover span{
	display: block;
}
#menu .home {
	width: 111px;
	height: 49px;
	left: 345px;
	top: 82px;
	background-image: url(<a href="http://crisclothesalterations.com/sample/images/menu/home.png" rel="nofollow">http://crisclothesalterations.com/sample/images/menu/home.png</a>);
	background-repeat: no-repeat;
}
#menu .home span {
	width: 111px;
	height: 49px;
	background: url(css/http://crisclothesalterations.com/sample/images/home-over.gif) no-repeat;
	left: 28px;
	top: -20px;
}
#menu .about {
	width: 187px;
	height: 49px;
	left: 473px;
	top: 73px;
	background-image: url(<a href="http://crisclothesalterations.com/sample/images/menu/about.png" rel="nofollow">http://crisclothesalterations.com/sample/images/menu/about.png</a>);
	background-repeat: no-repeat;
}
#menu .about span {
	width: 187px;
	height: 49px;
	background: url(css/http://crisclothesalterations.com/sample/images/about-over.gif) no-repeat;
	left: 44px;
	top: 54px;
}
#menu  .services {
	width: 151px;
	height: 49px;
	left: 676px;
	top: 75px;
	background-image: url(<a href="http://crisclothesalterations.com/sample/images/menu/services.png" rel="nofollow">http://crisclothesalterations.com/sample/images/menu/services.png</a>);
	background-repeat: no-repeat;
}
#menu  .services  span {
	width: 151px;
	height: 49px;
	left: 26px;
	top: -20px;
	background-repeat: no-repeat;
}
#menu  .contact  span {
	width: 143px;
	height: 49px;
	left: 26px;
	top: -20px;
	background-repeat: no-repeat;
}
#pricelist  #pricelistmore  a  {
	color: #333333;
	text-decoration: underline;
	margin-right: 0px;
	float: right;
	font-size: 12px;
}
h3 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #333333;
	white-space: normal;
}
#container   #sidebar1 #pricelist #menu2  {
	line-height: 10px;
}
#container #sidebar1 #pricelist {
	float: right;
	margin-top: 400px;
	margin-right: 50px;
}
 #sidebar1 {
	float: right; /* since this element is floated, a width must be given */
	width: 250px;
	height: 800px;
}
#container   #sidebar1 #pricelist #pricelisttitle2  {
	font-weight: bold;
	text-align: center;
	padding-top: 10px;
	font-size: 14px;
	padding-left: 30px;
}
#container   #sidebar1   #pricelist #menu2 h3  {
}
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif; /* it's good practice to zero the margin and 
 
padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: left; /* this centers the container in IE 5* browsers. The text is then set to the left 
 
aligned default in the #container selector */
	color: #000000;
	background-attachment: scroll;
	background-color: #2D2928;
	background-image: url(<a href="http://crisclothesalterations.com/sample/images/index-cris3.jpg" rel="nofollow">http://crisclothesalterations.com/sample/images/index-cris3.jpg</a>);
	background-repeat: no-repeat;
	background-position: center top;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: auto;
}
 #container {
	width: 980px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height: 1000px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
} 
 #header {
	margin: 0px;
	background-image: url(<a href="http://crisclothesalterations.com/sample/images/head.png" rel="nofollow">http://crisclothesalterations.com/sample/images/head.png</a>);
	height: 194px;
	width: 940px;
	background-repeat: no-repeat;
	background-position: left top;
	padding: 0;
	float: left;
} 
 #mainContent {
	height: 800px;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-bottom: 0;
	width: 700px;
	background-image: url(<a href="http://crisclothesalterations.com/sample/images/repeat-back.png" rel="nofollow">http://crisclothesalterations.com/sample/images/repeat-back.png</a>);
	background-repeat: repeat-y;
	background-position: left top;
	float: left;
} 
 #footer {
	height: 139px;
	background-image: url(<a href="http://crisclothesalterations.com/sample/images/footer.png" rel="nofollow">http://crisclothesalterations.com/sample/images/footer.png</a>);
	width: 940px;
	margin: 0px;
	padding: 0;
	background-position: left top;
	background-repeat: no-repeat;
	float: left;
	clear: both;
} 
#container #footer #paypal {
	background-image: url(<a href="http://crisclothesalterations.com/sample/images/twitter_10.png" rel="nofollow">http://crisclothesalterations.com/sample/images/twitter_10.png</a>);
	background-repeat: no-repeat;
	height: 117px;
	width: 941px;
	background-position: left top;
	padding-left: 90px;
	color: #FFCC00;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 16px;
	float: left;
	padding-bottom: 0px;
}
#container #footer #paypal #payonline {
	margin-top: 70px;
	width: 80px;
}
#container #footer #paypal #followme {
	margin-top: -30px;
	margin-left: 610px;
	float: left;
}
#container #footer #footer-text {
	margin-top: 200px;
	margin-right: auto;
	margin-left: auto;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #FFFFFF;
	line-height: .5px;
}
.tiles {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #EFBD10;
}
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of 
 
margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, 
 
without the margin collapse issue */
}
#container #footer #rights {
	text-align: center;
	color: #CCCCCC;
	font-size: 12px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: normal;
}
#container  #sidebar1  #pricelist  #menu  h3 {
	float: right;
	margin: 0px;
	font-weight: normal;
	font-variant: normal;
}
h3 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #333333;
	font-weight: normal;
}
#container #sidebar1 #shop {
	margin-top: 120px;
	float: right;
	margin-right: 60px;
	width: 140px;
}
#container #mainContent #top {
	background-image: url(<a href="http://crisclothesalterations.com/sample/images/top2.jpg" rel="nofollow">http://crisclothesalterations.com/sample/images/top2.jpg</a>);
	background-repeat: no-repeat;
	background-position: left top;
	height: 408px;
	width: 639px;
	margin-right: auto;
	margin-left: auto;
}
#container #mainContent #top #toptext {
	margin-top: 180px;
	margin-left: 60px;
	float: left;
}
#test {
	position:absolute;
	width:268px;
	height:51px;
}
.style1 {
	font-size: xx-large;
	font-weight: bold;
}
#test {
	width: 250px;
	height: 50px;
	position: absolute;
	left: 240px;
	top: 440px;
	background-color: #CC0000;
}
#center {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 1px;
}
 
--> 
</style>
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
 
<body>
<div id="center">
<div class="style1" id="test">TEST</div></div>
<div id="container">
  <div id="header">
    <ul id="menu">
	<li><a href="#" class="home">Home<span></span></a></li>
	<li><a href="#" class="about">About Me<span></span></a></li>
	<li><a href="#" class="services">Services<span></span></a></li>
    <li><a href="#" class="contact">Contact<span></span></a></li>
</ul>
  <!-- end #header --></div>
  <div id="sidebar1">
    <div id="pricelist">
  <div id="pricelisttitle2">PRICE LIST</div>
  <div>
    <ul id="menu2">
      <li><h3>Hems........12.00</h3></li>
      <li><h3>Waist In....12.00</h3></li>
      <li><h3>Zipper.......15.00</h3></li>
      <li><h3>Sleeves.....10.00</h3></li>
    </ul>
    <div id="pricelistmore"> <a href="#">more&gt;&gt;</a></div>
  </div>
</div><div id="shop">
  <h3>You are the first to 
be told about our
<strong>ONLINE SHOP</strong>which
we shall be opening
soon!!</h3></div>
  <!-- end #sidebar1 --></div>
  <div id="mainContent">
  <div id="top">
    <div id="toptext" class="text">
      <h3>I specialize in alterations on all formal and casual wear, <br />
        men’s, women’s  &amp; children’s clothing.<br />
        I hope that  you enjoy  my door-to-door Alterations<br />
        Services.<br />
        My goal is to provide you with the best experience <br />
        possible without having to fight traffic and crowds.</h3>
      <!-- begin Genbook badge -->
    </div>
  </div>
 
  <!-- end #mainContent --></div>
<div id="footer">
  <div id="footer-text">
    <table width="918" height="151" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="227" height="26" class="tiles">PAGES</td>
        <td width="262" height="26"class="tiles">INFO</td>
        <td width="210" height="26"class="tiles">PARTNERS</td>
        <td width="199" height="26"class="tiles">CUSTOMER SERVICES</td>
      </tr>
      <tr>
        <td width="262" height="25"><p>Price List</p></td>
        <td width="262" height="25" ><p>Where I Pick Up</p></td>
        <td width="210" height="25"><p>Shop with Us</p></td>
        <td width="199" height="25"><p>Faq's</p></td>
      </tr>
      <tr>
        <td height="25" class="textfooter"><p>Testimonials</p></td>
        <td width="262" class="textfooter"><p>Request a Service!!</p></td>
        <td width="210" class="textfooter"><p>Favorite Links</p></td>
        <td width="199" class="textfooter"><p>Terms of Use</p></td>
      </tr>
      <tr>
        <td height="25"><p>Last News</p></td>
        <td width="262" class="textfooter"><p>Valuable Coupon</p></td>
        <td width="210">&nbsp;</td>
        <td width="199"><p>Privacy Policy</p></td>
      </tr>
      <tr>
        <td height="25" class="textfooter"><p>Site Map</p></td>
        <td width="262">&nbsp;</td>
        <td width="210">&nbsp;</td>
        <td width="199" class="textfooter"><p>Chat with Me!!</p></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td width="262">&nbsp;</td>
        <td width="210">&nbsp;</td>
        <td height="25" class="textfooter"><p>Contact Me</p></td>
      </tr>
    </table>
  </div>
 
  <div id="paypal">
    <div id="payonline">Pay Online:</div>
    <div id="followme">Follow Me:</div>
  </div>
  <div id="rights">Cris Clothes Alterations Copyright 2009 | Website Designed by Mirna Cris Designs . All 
 
rights reserved.</div>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

if you dont want thing to

if you dont want thing to move around, you need to stay away from absolutely positioning things. Build the layout with floats using margins to place them exactly where you want them. Validate the code also.

dungol
Offline
newbie
Last seen: 11 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-10-22
Posts: 7
Points: 8

Absolute position help

Dear Verschwindende,
Thanks for your help,
I've uploaded the file that you have created, but the images doenst appear on the webpage.
How can I fix that?
http://crisclothesalterations.com/sample/forum.html

Thanks

Dungol

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

dungol wrote: Dear

dungol wrote:

Dear Verschwindende,
Thanks for your help,
I've uploaded the file that you have created, but the images doenst appear on the webpage.
How can I fix that?
http://crisclothesalterations.com/sample/forum.html

Well, take a look at the code you pasted in. For example:

	background-image: url(<a href="http://crisclothesalterations.com/sample/images/menu/contact.png" rel="nofollow">http://crisclothesalterations.com/sample/images/menu/contact.png</a>);
	background-repeat: no-repeat;

That's not gonna work.

CupidsToejam wrote:

if you dont want thing to move around, you need to stay away from absolutely positioning things. Build the layout with floats using margins to place them exactly where you want them. Validate the code also.

I agree. In this case the background image moves when the screen resizes though. I think AP may actually be appropriate. I'd probably do it differently though.

dungol
Offline
newbie
Last seen: 11 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-10-22
Posts: 7
Points: 8

When I selected your code and

When I selected your code and pasted it in my editor, it came with those lines.
sample:
background-image: url(a href="http://crisclothesalterations.com/sample/images/menu/home.png" rel="nofollow">http://crisclothesalterations.com/sample/images/menu/home.png

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

I wouldn't select the code

I wouldn't select the code from the forum. It makes those changes to full URLs. I just added the full URLs so that I can view them when I made the changes locally.

Validating should help.

Here is my file: Click me. I'm a link.

I would also suggest giving the page a min-width to avoid what happens when you make the browser window too small for the background.

dungol
Offline
newbie
Last seen: 11 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-10-22
Posts: 7
Points: 8

i'm sorry about that I didnt

i'm sorry about that I didnt realized the code was changed to links.
I've made the changes, but it still moving with the brownser.
I've notice that when I resize (decrease the width of window)the browser, the TEST ap go over to main content.
Is possible to hide the test ap behide of the main content div when I rezise the width of browser?
Like z-index 1,2,3...
This way the button could disappear.It could be better.
Thanks for your help.
http://crisclothesalterations.com/sample/forum2.html

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

dungol wrote:I've made the

dungol wrote:

I've made the changes, but it still moving with the brownser.

Isn't that what you requested? That the TEST remain below the phone?

What is the actual item that needs to be there going to be? The point is that if you don't mind it being hidden behind the main content then just leave it out or put it in the background image.

dungol
Offline
newbie
Last seen: 11 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-10-22
Posts: 7
Points: 8

The TEST remain below the

The TEST remain below the phone, but is going over the main content.(it is going over to the dress when I resize the browser).
It is better the TEST go behinde the main content.
I cant insert the image in the background because it will be a buuton to open a live chat.
Thanks for your help.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Like this:

Like this: http://members.verizon.net/vze47msr/dungol.html

If it's an important item why are you willing to allow it to be hidden? I submit that you need to rethink this item. At least give the page a min-width to prevent it from ever being hidden.

I must offer kudos on the design. It's lovely.

dungol
Offline
newbie
Last seen: 11 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-10-22
Posts: 7
Points: 8

Thanks for the

Thanks for the compliment.
You are absolutely right about "why to hide a so importante button"
Due I am new with CSS, I tought it was a basic learning that I didnt learn yet.
I will use your CSS code, it is better then mine.
I tried to insert a min-width to the container div but when I validated it I got the message:
unsupported property.
Did I make something wrong?
#container {
width: 980px;
text-align: left; /* this overrides the text-align: center on the body element. */
height: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
min-width: 500px;

Thanks a lot for your help.

davestone
davestone's picture
Offline
Enthusiast
Last seen: 11 years 10 weeks ago
Timezone: GMT-7
Joined: 2009-05-11
Posts: 74
Points: 43

It might help to use

It might help to use position: relative for the container that holds the button.

Then when you use absolute position with the button, it will align to the container div, and not the html/body, which is why it is moving when you resize the browser window. So long as you set a width for the container the button is in, it will not move.

Right now the button is position: absolute, but to the body. You need to put it in a containing div with a width, position the containing to relative - and your button will stay.

#container
 
{
 
width: 980px;
 
text-align: left;
 
height: 1000px;
 
margin-top: 0px;
 
margin-right: auto;
 
margin-bottom: 0px;
 
margin-left: auto;
 
position: relative;
 
}

You can use absolute positioning relative to the #container.

Put the button just before you header in #container and give button a z-index of 10.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

davestone wrote:... Right

davestone wrote:

... Right now the button is position: absolute, but to the body. You need to put it in a containing div with a width ...

Unless you're talking about the link in the original post, I think you just missed it. It's there.

dungol
Offline
newbie
Last seen: 11 years 47 weeks ago
Timezone: GMT-4
Joined: 2009-10-22
Posts: 7
Points: 8

It is perfect!!!!!!! Exactly

It is perfect!!!!!!!
Exactly what I was looking for.
http://crisclothesalterations.com/sample/forum2.html
Thanks a lot for this learning.
Do you recommend some good book to understand better CSS?
It is so hard to work with CSS. I usually use tables to create websites and have avoided to change to CSS, but I cant avoid anymore.I need to update my knowledge.
I would like to understand more about positioning layouts. It has a lot of secrets.
I've read some books, but they just have a basic learning. I would like to extend my knowledge in CSS.
Thanks a lot for your help and God bless you.
See you next time. Laughing out loud

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

CSS only seems harder because

CSS only seems harder because you understand tables based layout. Once you get into CSS you'll see that it is much simpler to use and very, very much simpler to update. If you haven't gone through the htmldog.com tutorials, you should start there.