 |  |  |  |  |  |  |  |
Trouble with absolute positioning in CSS
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
He is what im trying to do, ive got a logo that i want to place around the center of your screen over my semi-complex background that is set up like this...
http://i11.photobucket.com/albums/a160/woody33/help.jpg
The "logo" image will be placed over the tiled image, but when the browser is shrinked because of a user using a smaller resolution, for example 1024x768, but the image would remain on the right side of the tiling area when it expands for a higher rez.
Just a push in the right direction to what css and/or html i should use to get the job done would help. I can post some of my own code too, if needed.
http://i11.photobucket.com/albums/a160/woody33/help.jpg
The "logo" image will be placed over the tiled image, but when the browser is shrinked because of a user using a smaller resolution, for example 1024x768, but the image would remain on the right side of the tiling area when it expands for a higher rez.
Just a push in the right direction to what css and/or html i should use to get the job done would help. I can post some of my own code too, if needed.
•
•
Join Date: Jun 2004
Posts: 434
Reputation: 
Solved Threads: 20
Posting Pro in Training
Can you post your code so we can see what you have already done?
[html]<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.imagetest {
background-image: url(swoosh_tile.png);
background-repeat: repeat-x;
}
enn {
left: 293px;
top: 522px;
z-index: 100;
background-attachment: fixed;
background-image: url(ennovative.png);
background-repeat: no-repeat;
background-position: 293px 522px;
position: absolute;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
bg {
z-index: 50;
}
-->
</style>
</head>
<body>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<table class="enn" width="335" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
</table>
<table id="bg" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="swoosh_left.png" width="540" height="104"> </td>
<td class="imagetest" height="104"> </td>
<td background="swoosh_right.png"width="457"height="104"> </td>
</tr>
</table>
</body>
</html>
[/html]
Might seem kinda "hodge-podge" or redundant in parts because i was kinda using trial and error to get this working.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.imagetest {
background-image: url(swoosh_tile.png);
background-repeat: repeat-x;
}
enn {
left: 293px;
top: 522px;
z-index: 100;
background-attachment: fixed;
background-image: url(ennovative.png);
background-repeat: no-repeat;
background-position: 293px 522px;
position: absolute;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
bg {
z-index: 50;
}
-->
</style>
</head>
<body>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<table class="enn" width="335" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
</tr>
</table>
<table id="bg" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="swoosh_left.png" width="540" height="104"> </td>
<td class="imagetest" height="104"> </td>
<td background="swoosh_right.png"width="457"height="104"> </td>
</tr>
</table>
</body>
</html>
[/html]
Might seem kinda "hodge-podge" or redundant in parts because i was kinda using trial and error to get this working.
•
•
•
•
Originally Posted by Pymes
first. separate the css of the document.
•
•
Join Date: Jun 2004
Posts: 434
Reputation:
Solved Threads: 20
Posting Pro in Training
Since you are using tables and not divs for this, here is an easy solution...
[html]
<table id="bg" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="swoosh_left.png" width="540" height="104"><img src="resources/images/spacer.gif" width="540"></td>
<td class="imagetest" height="104" width="100%"> </td>
<td background="swoosh_right.png"width="457"height="104"><img src="resources/images/spacer.gif" width="457" /></td>
</tr>
</table>
[/html]
Use a transparent gif to keep your outer cells at a fixed width and set your inner cell to 100% width.
[html]
<table id="bg" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="swoosh_left.png" width="540" height="104"><img src="resources/images/spacer.gif" width="540"></td>
<td class="imagetest" height="104" width="100%"> </td>
<td background="swoosh_right.png"width="457"height="104"><img src="resources/images/spacer.gif" width="457" /></td>
</tr>
</table>
[/html]
Use a transparent gif to keep your outer cells at a fixed width and set your inner cell to 100% width.
Last edited by FC Jamison; Aug 11th, 2006 at 3:16 pm.
Ok, i modified the code a little bit to fit my image paths ect. but now i got this repeat problem...i cant seem to figure out what is causing it...here is what it looks like:
http://i11.photobucket.com/albums/a1...dy33/help2.jpg
http://i11.photobucket.com/albums/a1...dy33/help2.jpg
•
•
Join Date: Jun 2004
Posts: 434
Reputation:
Solved Threads: 20
Posting Pro in Training
If that is a background image set by css, add the following:
background-repeat: repeat-x;
This will make the image repeat horizontally, but not vertically.
background-repeat: repeat-x;
This will make the image repeat horizontally, but not vertically.
Strange, it still has problems witht the table being copied downward, but the it only tiles the "swoosh_tile" accross in the first one.
Do you think it has anything to do with the table not really having any height definition?
edit: here is my updated code:
[html]<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.imagetest {
background-image: url(swoosh_tile.png);
background-repeat: repeat-x;
}
-->
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="swoosh_left.png" width="540" ><img src="spacer.gif" width="540"></td>
<td class="imagetest" height="104px" width="100%"></td>
<td background="swoosh_right.png"width="457"><img src="spacer.gif" width="457" /></td>
</tr>
</table>
</body>
</html>[/html]
edit: here is my updated code:
[html]<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.imagetest {
background-image: url(swoosh_tile.png);
background-repeat: repeat-x;
}
-->
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="swoosh_left.png" width="540" ><img src="spacer.gif" width="540"></td>
<td class="imagetest" height="104px" width="100%"></td>
<td background="swoosh_right.png"width="457"><img src="spacer.gif" width="457" /></td>
</tr>
</table>
</body>
</html>[/html]
Last edited by Woobag; Aug 11th, 2006 at 3:47 pm.
|
Other Threads in the HTML and CSS Forum
- Previous Thread: Dreamweaver MX In China
- Next Thread: Dreamweaver and the missing html end tag
Views: 3130 | Replies: 11
| Thread Tools | Search this Thread |
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
Related Forum Features
Tag cloud for HTML and CSS
2002 appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity create css deleted design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format frontpage google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft missing mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl
