CSS - Help With Image Position

www . myspace . com / newsoundproduction


I cant get the background image to sit at the bottom of the page... already tried millions of things and im still getting the same error...

Code:

<style>
body {
  background-color:FFFFFF;
  background-image: url('http://copydential.net/gus/newwall5.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom center;
}
table, tr, td {background:transparent; border:0px;}
table table table {background:transparent;}
table table table td {
  background-color:FFFFFF;
  filter:alpha(opacity=90); -moz-opacity:0.8; opacity:0.8; -khtml-opacity:0.8; 
}
table table table table td {filter:none;}
table table table {
  border-width:3px;
  border-color:FFFFFF;
  border-style:solid;
}
table table table table {border:0px;}
input {background-color:transparent !important;}
td, span, div, input, a, table td div div font,
body div table tbody tr td font {font-family:Verdana !important;}
td, span, div, input, table td div div font,
body div table tbody tr td font {color:000000 !important;}
.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12,
.redtext, .redbtext, .blacktext10, .btext {color:000000 !important;}
a {color:000000 !important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
a:hover {color:000000 !important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
.r{;}
.navbar {visibility:visible;} .navbar font {visibility:hidden;}
a.text, table div font a {display:none;}
table div div {visibility:hidden;}
table table div div {visibility:visible;}
a img {filter:alpha(opacity=100); -moz-opacity:0.6; opacity:0.6; -khtml-opacity:0.6;}
a:hover img {filter:none; -moz-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;}
img {border:0px;}
table table table {width:300px;}
table table td.text table, table table td.text table td {width:100%;}
</style> 
 
 
 
<style>
.contactTable {
   width:300px !important; height:150px !important; padding:0px !important;
   background-image:url("http://copydential.net/gus/newcontact.jpg");
   background-attachment:scroll; background-position:center center;background-repeat:no-repeat; 
   background-color:transparent;}
.contactTable table, table.contactTable td { 
   padding:0px !important;border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px !important;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}
.contactTable .whitetext12 {display:none;}
</style>




<style>
td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
</style> 

Hi,

I am trying to position a image after the text link. If the link is in a single line then it works good, but when it goes to next link then the image disappears. This is the code:

Code:

<style>
.master {
	font-family: arial;
	font-size: 12px;
	width: 200px;
}

.master a{
	font-weight: bold;
	color: #999;
	text-decoration: none;
	background: url(1px.gif) no-repeat fixed right bottom;
	padding: 0px 15px 0px 0px;
}


.master a:hover {
	text-decoration: underline
}
</style>

<div class="master">
<a href="#">Link Title: Cascading Style Sheets (CSS) forum</a><br/>
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc. can be found on the "learning CSS" page. For background information on style sheets, see the Web style sheets page.
</div>

Please advice.

Thanks in advance.

hey, i have this code below at the top of my page...the image that is there a a background image i would like to more to the right a bit so that some of the orange background is shown on the left!! can anyone advise how i do this please?? thanks

Code:

#TitleBar {
	margin:0px 0px 10px 0px;
	padding:28px 0px 5px 10px;
	padding-left:10px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:33px; /* 14px + 17px + 2px = 33px */
	border-style:solid;
	border-color: #ffffff;
	border-bottom: 1px #ff9900 solid;
	border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
	line-height:11px;
	background-color:#ff9900;
	background-image:url(../images/webmedia72.gif);
	background-position: left;
	background-repeat: no-repeat;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:14px; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#TitleBar {height:14px;}

thanks
RF

I want to be able to position an image at the very top of a cell/div/container/whatever and one at the very bottom. It's too bad there is no float:top and float:bottom. Something like this

[HTML]

<div style="background-color: red">
<img src="images/top.jpg" style="?" />
<img src="iamges/bottom.jpg" style="?" />
</div>

[/HTML]

Take a look at this site: http://clients.ekcetera.com/thunderhook/thunderhook/#

The image that displays: Welcome to the Wilderness is giving me trouble. It's 85 px tall and I can't get it to bump up right underneath the navigation. It's like there's something there blocking it from doing so. If you highlight the images and the navigation, you can see this little block of space off on the right side that gets highlighted. I can't seem to find where that is being created.

Here's the CSS:
Code:

body {
	background-color: #C2B59B;
	margin-top: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
}
.container {
	width: 980px;
	margin-right: auto;
	margin-left: auto;
}
.logo {
	position: absolute;
}
.whitebackground {
	background-color: #FFF;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	height: 1000px;
	padding-top: 30px;
}
.mininav {
	text-align: right;
	width: 835px;
	margin-right: auto;
	margin-left: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	height: 25px;
	color: #036;
}

.header {
	background-image: url(images/header.jpg);
	width: 835px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 155px;
	background-repeat: no-repeat;
}
.mainnav {
	background-image: url(images/transparent.png);
	background-repeat: repeat;
	height: 25px;
	width: 835px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}


/* Dropdown Menu Styling */

.dropdown {
	float: left;
	position: relative;
	left: 123px;
	top: -16px;
}


.dropdown dt {
	cursor:pointer;
	padding-right: 15px;
	padding-left: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	line-height: 25px;
}
.dropdown dt:hover {
	background-color: #C2B59B;
}
.dropdown dd {
	overflow:hidden;
	width:200px;
	display:none;
	z-index:200;
	opacity:.6;
	background-color: #DED8C9;
	position: absolute;
	left: -40px;
}
.dropdown ul {
	list-style-position: outside;
	margin-left: -40px;
	font-size: 13px;
	
}
.dropdown li {
	display: inline;
	
}
.dropdown a, .dropdown a:active, .dropdown a:visited {
	display:block;
	color:#333;
	text-decoration:none;
	width:200px;
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 15px;
}
.dropdown a:hover {
	color:#000;
	font-weight: bold;
	background-color: #C2B59B;
}
.dropdown .underline {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999;
}
.welcomewilderness {
	text-align: center;
	margin: 0px;
	padding: 0px;
	height: 85px;
}
.welcomewilderness img {
	vertical-align: top;
}

HELP!

I have a logo which I would like always positioned at the bottom of a div.

Does anyone know a way of achieving this?

http://www.willisemail.co.uk/skill/

The logo is in the bottom right hand corner.

Cheers

Jemes


/* Site Holder Start */
#box {
width: 750px;
margin: 0px auto;
padding: 0px;
text-align: left;
border: 1px solid #979696;
background-color: #FFFFFF;
background-image:url(../Images/mid.jpg);
}
/* Site Holder End */


/* Site Holder Start */
#box2 {
margin-left: 49px;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
text-align: left;
background: #ccc url(../images/img_MainWhiteBg.jpg) repeat-y 50% 0;
}
/* Site Holder End */


/* Content Start */
#content {
width: 461px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */


/* Content Start */
#content2 {
margin-left: 14px;
margin-right: 15px;
margin-top: 0px;
margin-bottom:0px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */


/*Right Menu Start*/
#right {
width: 178px;
padding:0px;
float:right;
background-color:#FFF;
overflow: hidden;
}

#right2 {
margin-top:0px;
margin-left:14px;
margin-right:14px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}

.RightMenu {
margin-top:10px;
padding: 0px;
font-size: 13px;
color: #6884AE;
font-weight: bold;
}

.RightMenu ul
{
padding: 0px;
margin: 0px;
list-style-type:none;
}

.RightMenu li {
background-image: url(../images/img_Li_Image.jpg);
background-repeat: no-repeat;
background-position: 0em;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 1px;
padding-left: 14px;
margin-top:5px;
}

.imgTitle {
text-align:center;
margin-top: 13px;
margin-left:0px;
margin-right:0px;
}
/* Right2 Menu End */

.imgRight {
text-align:center;
margin-top: 10px;
margin-left:0px;
margin-right:0px;
border: 1px solid #979696;
}

.imgMain {
text-align:center;
margin-top:10px;
border: 1px solid #979696;
}

.Menu {
margin-top:10px;
padding: 0px;
}

.Menu ul
{
padding: 0px;
margin:0px;
list-style-type:none;
}

.Menu li
{
display: inline;
list-style-type:none;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 1px;
padding-left: 0px;
margin:0px;
}

.Main {
padding:5px;
border: 1px solid #979696;
margin-top:8px;
margin-bottom:10px;
}


.Cove{
margin-top:15px;
text-align:center;
}

Look - I'm 59....almost 60 - and I've been using tables forever. So please forgive, what I am certain, is a fairly stupid question. But I have been trying to wrap my head around CSS and I have struggled with it for the last couple of years..... It's like Algebra, for me - it seems as though it's something I can never really learn.

I am trying to re-build an old site and avoid using tables. All I want to do is put an image - positioned absolutely - in a DIV header area. I've managed to get the page, by the way, to display the header, the footer, a fix-width center area, etc. just fine - which is no small miracle, for me. What I've got, now, looks like this:


The code looks like this:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<style type="text/css">
body {margin: 0 0 0 0; background-color: #E1DACD;}
#header {width: 100%; height: 120px; background-color: #F1E2C2;}
#social {position: absolute; top: 26; left: 730;}
#container {
 	margin-left: auto;
 	margin-right: auto;
 	width: 960px;
 	text-align: left;
 	background-color: #FFF;
    height: 600px;
 	}
#footer {width: 100%; height: 80px; background-color: #EFE1C1;}
h2 {font-family: arial; font-size: 21px; font-weight: normal; display: inline;}
</style>
</head>

<body>
<div id="header"><img src="head1.gif">
<div id="social"><img src="22s.gif"></div>
</div>

<DIV id="container">
<DIV style="padding-left: 12px;"><h2><br>Some content...</div>
</div>
<div id="footer">footer</div>

How in the heck do I get that social networking .gif to end up in the header, to the right of the domain name....?

Any help would be greatly appreciated.

Assume the following image (created in photoshop) represents a text and image layout on a web page. What would the CSS code look like to accomplish the layout. I would like to control the distance between the image and the text. The text (PREV, TITLE, NEXT) may change, but the positioning should be maintained.

Hello

Trying to position an image at the bottom of my webpage which:

a) will always stay at the bottom of the page regardless of length (page length not window height so the position: fixed is not quite what I'm looking for)
b) will not slide on top or under divs on my page (what position: absolute does) but instead stop moving up once it reaches content above it and the scrollbar appears (as tables do)
c) I can layer divs on top of

so far this is as close as I've got:

in the html

<!-- container for site info -->
<div id="container">

<!-- other content in divs here -->

<!-- other content in divs here -->

<!-- footer for bottom image -->
<div id="footer">

<!-- footer details, who / when / copyright -->
<div id="footerdetails">
details here
</div>
<!-- footer details, who / when / copyright -->

</div>
<!-- footer for bottom image -->

</div>

and in the css

#container
{
position: absolute;
top: 0px;
width: 750px;
height: 100%;
}

#footer
{
position: absolute;
bottom: 0px;
height: 230px;
width: 750px;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}

#footerdetails
{
position: relative;
margin: 0px 0px 0px 0px;
padding: 9px 0px 10px 70px;
top: 195px;
width: 680px;
text-align: left;
voice-family: "\"}\"";
voice-family:inherit;
}

I know I'm sort of answering my question above (tables) but I've seen this done with divs, just can't get the right combination of css - anyone have any ideas on this?

Thanks in advnace.

a+
gar

Hello all i am having trouble with getting a layer to stay put when i school down the page.

This is my code:
Code:

#Layer1 {
	position:absolute;
	width:64px;
	height:73px;
	z-index:1;
	left: 0px;
	top: 101px;
}
<div id="Layer1">
      <div align="left"><img src="images/gun.gif" width="58" height="73" /></div>
    </div>

Everytime i scroll down the image goes with it. I need it stay where i put it without moving at all.

If anyone could help then that would be great

David

I am trying to make a rectangle with an image on the left and a horizontal list of anchor links on the right. Each anchor link should be a 32x32 px image with text underneath each image.

My problem is that the anchor links are not tall enough and the text is on top of the image instead underneath it.

Please help.

Code:

<style type="text/css">
.toolbar_list ul { float: right; text-align: right; margin:10px;}
.toolbar_list li{list-style: none;display: inline;}
.toolbar_list a { float: none; width: 32px; height: 32px; }

div.toolbarheader {line-height: 48px;padding-left: 55px;background-repeat: no-repeat; border-style:solid;}

.icon-32-delete    { background-image: url(stdimages/icon-32/delete.png); }
.icon-32-save    { background-image: url(stdimages/icon-32/save.png); }
.icon-32-new    { background-image: url(stdimages/icon-32/new.png); }
.icon-48-module    { background-image: url(stdimages/icon-48/module.png); }
</style>

</head><body>

<div class="toolbar_list">
 <ul>
  <li><a href="#" class="icon-32-delete delete" title="Delete">Delete</a></li>
  <li><a href="#" class="icon-32-save save" title="Save">Save</a></li>
  <li><a href="#" class="icon-32-new new" title="New">New</a></li>
 </ul>
 <div class="toolbarheader icon-48-module">Title</div>
</div>

I have a site that I have created in WordPress using a pre-designed theme that I heavily customized.
http://www.newlivingwaygreenville.org/blog/

The site looks great in Firefox 3.6, IE 7 and IE8 but one image on the home page will not align to the right in Safari 4.x.
The image of the pastors floats to the left and directly over the Flash slideshow in Safari 4 while in the proper place in the others.

The image is using inline styles to overcome the limitations of this particular WordPress theme.

Code:

style="position:absolute; border:0;margin-top: -4px;*margin-top:-10px;"

Any ideas why this doesn't work right in Safari and what I can do to fix it?

Thanks!

ks

I've tried a few combinations of position properties for this and can't figure out how to do it, or whether it is possible.

What I want to do is put an image inside a div which has a property of 'overflow:auto'. I want the image to be positioned so a particlar point is inside the visible area, but so the user can still scroll around to see the whole of the image.

Could somebody point me in the right direction please?

I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong?

<DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV>

I have having issues with IE displaying my page wrong.

The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site)

and the css can be found at
http://tampabay-online.org/cetr/cetr.css

It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top)

Any help much appreciated.

Code:

.content {
	position:relative;
	width:320px;
	margin-left: 125px;
	margin-top: 20px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3;
}

#right {

	position:absolute;
	width:200px;
	top:20px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}