944,155 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Trouble with absolute positioning in CSS
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Aug 10th, 2006
0

Trouble with absolute positioning in CSS

Expand Post »
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.
Reputation Points: 10
Solved Threads: 0
Light Poster
Woobag is offline Offline
33 posts
since Jun 2006
Permalink
Aug 10th, 2006
0

Re: Trouble with absolute positioning in CSS

Can you post your code so we can see what you have already done?
Team Colleague
Reputation Points: 92
Solved Threads: 21
Posting Pro in Training
FC Jamison is offline Offline
436 posts
since Jun 2004
Permalink
Aug 10th, 2006
0

Re: Trouble with absolute positioning in CSS

[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">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</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">&nbsp;</td>
<td class="imagetest" height="104">&nbsp;</td>
<td background="swoosh_right.png"width="457"height="104">&nbsp;</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.
Reputation Points: 10
Solved Threads: 0
Light Poster
Woobag is offline Offline
33 posts
since Jun 2006
Permalink
Aug 11th, 2006
0

Re: Trouble with absolute positioning in CSS

first. separate the css of the document.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Pymes is offline Offline
3 posts
since Aug 2006
Permalink
Aug 11th, 2006
0

Re: Trouble with absolute positioning in CSS

Quote originally posted by Pymes ...
first. separate the css of the document.
Not sure what you mean...You can have your CSS and HTML all in one file. Do you mean seperate it so you can read it better?
Reputation Points: 10
Solved Threads: 0
Light Poster
Woobag is offline Offline
33 posts
since Jun 2006
Permalink
Aug 11th, 2006
0

Re: Trouble with absolute positioning in CSS

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%">&nbsp;</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.
Team Colleague
Reputation Points: 92
Solved Threads: 21
Posting Pro in Training
FC Jamison is offline Offline
436 posts
since Jun 2004
Permalink
Aug 11th, 2006
0

Re: Trouble with absolute positioning in CSS

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
Reputation Points: 10
Solved Threads: 0
Light Poster
Woobag is offline Offline
33 posts
since Jun 2006
Permalink
Aug 11th, 2006
0

Re: Trouble with absolute positioning in CSS

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.
Team Colleague
Reputation Points: 92
Solved Threads: 21
Posting Pro in Training
FC Jamison is offline Offline
436 posts
since Jun 2004
Permalink
Aug 11th, 2006
0

Re: Trouble with absolute positioning in CSS

Strange, it still has problems witht the table being copied downward, but the it only tiles the "swoosh_tile" accross in the first one.
Reputation Points: 10
Solved Threads: 0
Light Poster
Woobag is offline Offline
33 posts
since Jun 2006
Permalink
Aug 11th, 2006
0

Re: Trouble with absolute positioning in CSS

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]
Last edited by Woobag; Aug 11th, 2006 at 3:47 pm.
Reputation Points: 10
Solved Threads: 0
Light Poster
Woobag is offline Offline
33 posts
since Jun 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Dreamweaver MX In China
Next Thread in HTML and CSS Forum Timeline: Dreamweaver and the missing html end tag





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC