Learn VBA & Macros in 1 Week!

CSS - Problems Positioning Background Image Into The Top Left Hand Corner.

Full Excel VBA Course - Beginner to Expert

Problems Positioning Background Image Into The Top Left Hand Corner.	View Content

Hey Guys,

I designed a header logo in the top left corner of my psd document. I am now slicing my design up and I can't seem to be able to position the header into the top left hand corner. Any help would be greatly appreciated.

Here is my CSS Code:

ul#nav {
height: 91px; width: 271px;
margin:30 auto;
background: url(images/logo.jpg) no-repeat;

}

Full Excel VBA Course - Beginner to Expert

Css Box That Is Sticky In Upper Right Hand Corner While Scrolling

Similar Tutorials

View Content

I guess I dont know what this technique is called so it was hard for me to search for an answer. The best example I can give is if you go to Dells website or any other site where you can build a computer and as you scroll down there is that box that always stays in the upper right hand corner that displays the price. Is that possible in CSS? Could somebody give me the name of the technique so I can try looking for mulitple answers or show me how its done?

Thanks,
Dave

Attaching A Picture To The Bottom Right Hand Corner Of A Wrapper

Similar Tutorials

View Content

I have 2 problems with the following code:
1- the vertical align only works in FF (not IE)
2- i cannot get the #index .contact to attach to the bottom right hand corner of the wrapper

* {
margin: 0;
padding: 0;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
}

body{
font: 100% verdana, helvetica, sans-serif;
background-color: #fff;
color: #000;
}

#container{
display: table;
height: 100%;
width: 100%;
margin: 0;
}

#content{
display: table-cell;
vertical-align: middle;
position: relative;
}

#index{
border: 1px dotted gray; /*for clarity in the demo*/
width: 900px;
height: 645px;
margin: 0 auto;
}
#index .logo{
position: relative;
top: 0px;
left: 0px;
}
#index .contact{
position: absolute;
bottom: 0px;
right: 0px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> I2Eye Design </title>
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>

<div id="container">
<div id="content">
<div id="index">
<div class="logo">logo</div>

<center>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="400" height="400" id="index_eyeball" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="index_eyeball.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="index_eyeball.swf" quality="high" bgcolor="#ffffff" width="400" height="400"
name="index_eyeball" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</center>

<div class="contact">contact button</div>
</div>

Left-hand Margin With Ul In Firefox

Similar Tutorials

View Content

I've a menu bar that's a horizontally displayed list (i.e. set up with the following values:

ul{
margin-top:5px;
margin-bottom:5px;
margin-left:0px;
}
li.inline
{
display:inline;
padding-left:5px;
padding-right:5px;
border-left:1px solid #fff;
}

Contained in the following code:

<div id="mainNav">
<UL>
<li class="first"><a href="../about/index.html">About</a></li>
<li class="inline"><a href="../contact/index.html">Contact</a></li>
<li class="inline"><a href="../services/index.html">Services</a></li>
<li class="inline"><a href="index.html">Portfolio</a></li>
</UL>

On IE 6.0 it does as required and there is no padding between the first element (About) and the left hand side of the page. BUT, on Firefox, about 5 characters worth of padding is between the left hand of the page and the first element.

Is there a way to get both Firefox and IE to have no padding?

Thanks
</div>

Image On Left And Right Background

Similar Tutorials

View Content

Hi there!

I'm trying to place an image that tiles on the left far side of the background and on the right hand side. This is so it will have columns down the sides. I'm not sure how to begin to do this... I know I could do with this tables, but I'm trying to do this without tables and pure CSS.

Any thoughts? I wish I had an example to show....

Thanks!

Nathan

Bizarre Right Hand Menu Cut Off, Appears On Left Side

Similar Tutorials

View Content

I also am having this problem with the menu in IE6 - the right hand side of the menu dropdown, "Videos", is also showing up on the left hand side, slightly cut off. I know it's "Videos" because when I hover over Videos, the text on the left hand side ("os") also lights up. Is it possible that -999em is not far enough over? What could be the problem/how can I fix this?

A related problem, perhaps, is that the first below-menu item starts about 20px below where it should be. I'm new to CSS programming and I'm not too sure what's going on.

image showing what the issue is at kburke dot org slash menuleft.jpg - I don't have enough posts to link an image.

I really appreciate your help.

The menu's in a 980px wide container. Some of the site's still in tables but I'm working on changing that.

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
float:left;
width:89.091em;
list-style:none;
line-height:1;
background:#b6791e;
font:11px Verdana, sans-serif;
font-weight:bold;
padding:0;
margin:0 0 .5em 0;
}

#nav a {
display: block;
width: 11.1em;
w\idth: 10.1em;
color: #FFFFFF;
text-decoration: none;
padding: 0.75em 0.5em;
}

#nav a.daddy {

}

#nav li {
float: left;
padding: 0;
width: 11.1em;
position:relative;
}

#nav li ul {
position: absolute;
left: -999em;
height:auto;
width: 14.7em;
w\idth: 14.5em;
font-weight: bold;
margin: 0;
padding:0;
background:#FFFFFF;
color:#769841;
border: 0.1em solid #769841;
}

#nav li ul a:hover{
color:#ffff30;
background:#769841;
}

#nav li ul li a{
color:#769841;
}

#nav li li {
padding-right: 1em;
width: 14.5em;
w\idth:13.5em;
}

#nav li:hover ul {
left: auto;
}

#nav li a:hover, nav li.sfhover a:hover{
color:#FFFF30;
}

#nav li ul li a:hover {
color:#FFFF30;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
clear:both;
}

#nav li ul ul {
margin: -3.3em 0 0 5em;
}

#nav li:hover, #nav li.sfhover {
background: #769841;
}

#nav li a:hover, #nav li.sfhover a:hover{
color: #ffff30;
}

#nav li ul a{
color:#769841;
padding:.4em;
}

Rounded Corner Positioning!

Similar Tutorials

View Content

I am trying to attach 4 rounded images to a box, I have read hundreds of guides but non that seem to help. The problem I think is that I have set the size of the box rather than letting the amount of text written in it define the size. The idea is that the white box (mainarea) will have 3 different colour boxes inside it, but herein lies another problem. They are not inside the box they are merely on top of it, is this a problem. At the moment I have one corner (bottom left) positioned perfectly. My problem is the other 3. As you can see I have removed all the previous attempts to do this. Please someone help I think my hair is falling out!

CSS

Code:

body { 
 background-image: url(bg2.png); 
 background-repeat: repeat; 
}

#image1 {
 position:relative;
 width:650px;
 height:125px;
 background-image: url(banner.png);
 margin-left: auto;
 margin-right: auto;
}

#navi {
 position:relative;
 top:20px;
 margin-left: auto;
 margin-right: auto;
 width:650px;
 height:50px;
 background-image: url(navibg.png);
 /*background : #ffcc66 url(bg_navPrimaryShadow.gif) repeat-x 0 100% */
 }

#mainarea {
 position:relative;
 top:40px;
 margin-left: auto;
 margin-right: auto;
 width:650px;
 height:480px;
 background:#ffffff url(cornerbtlft.png) 0 100% no-repeat;
 }


#box1 {
 position:absolute;
 top:250px;
 left:200px;
 width:600px;
 height:150px;
 background-color:#ffcc66;
 }

#box2 {
 position:absolute;
 top:420px;
 left:200px;
 width:280px;
 height:275px;
 background-color:#ffcc66;
 }
 
#box3 {
 position:absolute;
 top:420px;
 right:200px;
 width:280px;
 height:275px;
 background-color:#ffcc66;
 }

#leftlg {
 position:absolute;
 top:230px;
 left:17px;
 width:140px;
 height:500px;
 background-color:#ffffff;
 }
 
#rightlg {
 position:absolute;
 top:230px;
 right:17px;
 width:140px;
 height:500px;
 background-color:#ffffff;
 }
 
#footer {
 position:relative;
 height:70px;
 }

HTML

Code:

<body>
<div id="image1"></div>

<div id="navi"></div>


<div id="mainarea"></div>
<div id="topleft"></div>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="leftlg"></div>
<div id="rightlg"></div>
<div id="footer"></div>


</body>

Borderless Images Showing A 1px Black Border On Top & Left Hand Sides

Similar Tutorials

View Content

This problem just started happening, but frustratingly I can't remember what I was changing when it started happening.

The problem is that (almost) all the images on the site seem to be "bumped" 1px out of place, with a black border showing on the top and left hand sides of the images. This is not showing up with ALL images, however. I've embedded an image and you can see the effect on the logo, on the graphics in the body text, and on the sub-menu items (with the 'empty' box icons). However the effect does not occur on the menu items with the 'full' box icons.

OK, apparently, I CAN'T EMBED AN IMAGE. Or a link to an image. Or a link to the site in question. SO I have no idea how I am actually supposed to get help for this problem.

If someone can PSYCHICALLY DEDUCE what the problem might be without being able to view the site or an image of the problem, that'd be ACE!

GAAAAH

Alright, let's see if we can do this with JUST the CSS & HTML. Here is the CSS:
Code:

html {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
}
 body {
margin: 0; 
padding: 0; 
background-color: #FFFFFF;
background-image:url('background-index.gif');
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #666666;
min-width: 900px;
min-height: 100%;

}

img {
border:0;
}

a:link {
text-decoration: none;
color: #0096db;
}

a:hover {
text-decoration: underline;
}

a:visited {
color: #00abc7;
text-decoration: none;
}

#header {
width:900px;
height:80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0096db;
}

#logo {
float:left;
width:140px;
margin:0;
padding:0;
}

#head_nav {
width:760px;
position:relative;
float: right;
background-color: #ebf9ff;
height: 80px;
margin:0;
padding:0;
}

#clear_both {
clear:both;
}

#sidenav {
float:left;
width:100px;
padding-left:10px;
padding-top:0;
margin-top:0;
}

#content_wrap {
float:right;
width:760px;
background-color: #ebf9ff;
background-image:url('content-background.gif');
}

#content {
float:left;
width:500px;
}

#content h1, h2, h3, ul {
padding-top: 15px;
padding-left: 15px;
}

#content p {
padding-left: 15px;
}

#focus_box {
width:260px;
float: right;
margin-top:0;
padding-top:0;
}

#focus_box h1 {
padding-top:15px;
}

#focus_box p, h1, ul {
padding-left:15px;
}

table.blue_highlight {
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#0096db;
margin-left:15px;
margin-right:15px;
padding-top:15px;
padding:0;
margin:0;
}


#menu2 {
float: left;
width: 200px;
}

#main {
float: right;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #666666;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: 700;
color: #0096db;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color:#666666;
font-weight: bold;
}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: ;
}

/*!!!!!!!!!!! MENU STYLES FOR LEVEL1MENU !!!!!!!!!!!*/

#level1menu {
position:absolute;
bottom:0px;
padding-left:60px;
}

#sitemap li {
margin-left: 15px;
}

#sitemap ul {
margin-bottom:15px;
}

#sitemap ul li ul {
margin-left:15px;
}

And here is the HTML:
Code:

<%@ LANGUAGE="VBSCRIPT" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


	<title>BB Group Homes</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "(URL address blocked: See forum rules)">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body class="developments">
<div id="header">
<div id="logo">
<!--#INCLUDE FILE="logo.asp" -->
</div>
<!--END LOGO-->
<div id="head_nav">

<!-- #INCLUDE FILE="menutop.asp" -->

<!-- END MENU_TOP -->
<div id="level1menu">
<!-- #INCLUDE FILE="level1menu.asp" -->
</div>
<!--END level1menu-->
</div>
<!--END HEADER -->
<div id="clear_both"></div>
<div id="sidenav">
<!-- #INCLUDE FILE="menu_developments.asp" -->
</div>
<div id="content_wrap">
<img src="banner_developments1.png">
<div id="focus_box">
<!-- #INCLUDE FILE="focus_boxes.asp" -->
</div>
<div id="content">
<h1>Developments</h1>
<table class="blue_highlight">
<tr>
 <td><a href="golfsociety.asp"><img src="Golf_society_residence_logo.gif"></a></td>
 <td><h2>Golf Society Residence</h2>
<p>The Golf society project was initiated for a variety of reasons, some of which include the scenic environmental landscape, increasing trend of Bodrum as a holiday destination for tourists and natives, the beach and the close proximity to the airport.</p>
<p><a href="golfsociety.asp">-> More</a></p></td>
</tr>
</table>
<table class="blue_highlight">
<tr>
 <td><a href="thevillage.asp"><img src="thevillagelogo.gif"></a></td>
 <td><h2>The Village Bodrum - Tuzla</h2>
<p>You will find everything you have dreamed of at Vita Park Golf Resort, a world-c1*** destination in the heart of the peninsula Bodrum, the famed pearl of the Aegean Sea. </p>
<p><a href="thevillage.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluemarina.asp"><img src="bluemarinalogo.gif"></a></td>
 <td><h2>Blue Marina Bodrum - Yalikavak</h2>
<p>Blue Marina Apartments, overlooking the spectacular view of Yalıkavak amongst the centeranian olive trees, designed for all year long living, your comfort and every desire is planned to the finest detail.
</p>
<p><a href="bluemarina.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Blue Life Bodrum -Yalikavak</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<table class="blue_highlight">
<tr>
 <td><a href="bluelife.asp"><img src="bluelifelogo.gif"></a></td>
 <td><h2>Kalkan Luxus Villas</h2>
<p>Each villa has a magnificent sea view which can not be blocked. They has own entrance & garden, swimming pool with 40 sqm, wooden terrace with 40 sqm for sunbathing, garage for 2 cars and is 100 metres distance to the sea. The living  rooms have high vault ceilings.</p>
<p><a href="bluelife.asp">-> More</a></p>
</td></tr></table>
<p></p>
</div>
</div>

</body>
</html>


</body>

</html>

A lot of the images that are showing the 1px-off problem are contained in the SSIs (I don't think anyone here wants me to post the full content of the SSIs, do they?) but quite a few of the images in the main HTML are, as well: banner_developments1.png & all the logos.

This would be a lot easier if I could show you a picture of what was going on.

Background-image Positioning

Similar Tutorials

View Content

Hello!

If i need to put background-image at the bottom of display i use such css rule:

background-position: bottom;

but in my case i need image to be fixed in right bottom corner.
apparently i cant use two declarations like:

background-position: bottom;
background-position: right;

so how could i attain this via just CSS?

Positioning A Repeating (x) Background Image

Similar Tutorials

View Content

Hi there,

I'm trying to position a background image (starting 756 pixels from the left) which is repeating horizontally - but of course am running into problems because as soon as you repeat-x an image repeats the whole screen, not taking into account background positions.

Does anyone have any ideas how I can possibly avoid this?!

The only thing I can think of is to create a huge image to factor in for all screen solutions, and just not repeat it at all. I'd prefer not to do it this way as firstly it's not very clean, and secondly it will result in a large file size.

Here is a link to the background image to show you what I'm talking about:
http://joshsphotos.com/images/bg.jpg

I've also put in the CSS that would show what I'm trying to achieve.

Code:

body {
background-image: url(../images/bg_repeat.jpg);
background-position: 756px 0px;
background-repeat: repeat-x;
}

Any help would be most appreciated.

Help With Positioning Nav Menu On Background Image

Similar Tutorials

View Content

Hi,
I learned css a couple of years ago but am real rusty...anyways, here is an image that i wanted as the background to the top of the page. in the white space, i simply want a horizontal menu with 4 links. i cannot figure out how to position my links in that space correctly.
any help appreciated!

[/IMG]http://img251.imageshack.us/img251/1333/toplogoinfo.jpg[/IMG]

here is the code i have so far:

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=iso-8859-1" /> <title>Precision Truck Painting and Repair</title>  <style type="text/css"> .body{ 	margin:0; 	padding:0; 	} 	 #page { 	width: 800px; 	margin: 0 auto 0 auto; }  #banner { 	background-image:url(images/jpegs/top_logo_info.jpg); 	height: 140px; 	background-repeat:no-repeat; }   ul.nav { 	list-style-type: none; 	padding-left: 0; 	margin:0px 0 0 360px; 	font-family:Arial, Helvetica, sans-serif; 	 } ul.nav li { 	display: inline; 	width:115px;} 	 ul.nav a { 	text-decoration:none; 	}  </style>   </head>  <body>  <div id="page">  <div id="banner">  <div id="top"> <ul class="nav"> 	<li class="index"><a href="index.html">Home</a></li> 	<li class="painting"><a href="pages/painting_collision.html">Painting/Collision</a></li> 	<li class="painting"><a href="pages/body_trailer_repairs.html">Trailer & Body Repairs</a></li> 	<li class="index"><a href="pages/Contact_us.html">Contact Us</a></li> </ul> </div>  </div>        </div>  </body> </html>

Css Image Positioning And Background Images

Similar Tutorials

View Content

I have worked out a section banner. There is one for each section in a column of 4 or 5. The buttons on the left call a JavaScript that move DIVs up and down, reordering the content as the user wishes.

Anyway, I'm having trouble figuring out how to make the center section where the Title is, non-fixed (expand to fit the space). I'd like it to spread out to as wide as the container allows, minus the width of the left and right ends, of course.

See the actual thingy on a test page he Siliconsatan

Here's the styles:
Code:

<style type="text/css" media="all">
.col_tab_left {
position: relative;
width: 36px;
height: 30px;
left: 0px;
top: 0px;
background-image: url(./images/col_tab_left.gif);
}
.col_tab_middle {
width: 430px;
height: 30px;
position: absolute;
left: 36px;
top: 0px;
background-image: url(./images/col_tab_bg.gif);
text-align: center;
}
.col_tab_right {
width: 26px;
height: 30px;
position: absolute;
left: 466px;
top: 0px;
background-image: url(./images/col_tab_right.gif);
text-align: center;
}
.col_tab_title {
font-family: tahoma,verdana,arial,helvetica,sans-serif;
font-size: 10pt;
letter-spacing:  .05em;
color: #003366;
font-weight: bold;
line-height: 30px
}
.col_block_up {
width: 36px;
height: 30px;
border: 0px solid #003366;
left: 5px;
}
.col_block_down {
width: 36px;
height: 30px;
border: 0px solid #003366;
position: absolute;
left: 13px;
top: 0px;
}
.col_image {
position: relative;
display:block;
left: 6px;
top: 12px;
}	
</style>

Here's the html:
Code:

<div class="col_tab_left">
<div class="col_block_up">
<img onclick="MoveBlock('ys101','bizJournalCity','Up');" class="col_image" src="images/block_up2.gif" width="11" height="11" border="0" alt="" alt="Move section up" title="Move section up" style="cursor:pointer;" />
</div>	
<div class="col_block_down">
<img onclick="MoveBlock('ys101','bizJournalCity','Down');" class="col_image" src="images/block_down2.gif" width="11" height="11" border="0" alt="" alt="Move section down" title="Move section down" style="cursor:pointer;" />
</div>	
<div class="col_tab_middle"><span class="col_tab_title">Business Journal News</span></div>
<div class="col_tab_right"></div>
</div>

It looks like this:

Question About Positioning Background Image

Similar Tutorials

View Content

I have successfully added a background image to the page but it does not center how I want it to. Right now it is positioned at top center. I would like to move it to Center center of entire page. Using this code instead of center for background-position did not do anything. Neither did 50%, 50%. What can I do to move this over.
I have the same problem with a picture file to go above the background file and web links which are all placed at top left of page. It would be nice to move them to top center of page.
How is this possible through html code?

Here is the code for the background image:
<style type="text/css">
body { background-image: url(picture/bamboo.jpg) }
body { background-position: center }
body {background-repeat: no-repeat }
</style>

Thank you for your help,

Ie Is Not Positioning The Background Image Correctly

Similar Tutorials

View Content

Background Image Positioning Problem

Similar Tutorials

View Content

Hi all

Having some problems with background image positioning - all CSS/XHTML has been validated

See http://community.foe.co.uk/tmp/quote_and_image_test.html

Relevant CSS :

Code:

#imageleft {padding:0px; float:left; width:auto; margin-right:5px; margin-bottom:5px}
.imagecaptionleft{padding:0px; margin:0px; text-align:left; font-size:8pt}

blockquote {
  background: transparent url(/images/common/quote1a.gif) left top no-repeat;
  margin:0px;
  padding: 0px;
  font-weight: normal;
color:#000;
}
blockquote div {
  padding: 2px 30px;
  background: transparent url(/images/common/quote2a.gif) right bottom no-repeat;
}

Relevant html

Code:

<div id="imageleft">
		  <img src="/images/common/dummy.gif" alt="Test image" width="100" height="100" />
<div class="imagecaptionleft">Caption goes here</div></div>
             
	<blockquote><div>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum augue odio, condimentum et, iaculis quis, facilisis nec, quam. Aliquam eros. Nulla ut lorem. Cras bibendum orci at ligula lobortis bibendum.</p>
	</div></blockquote>

The opening quote mark is hidden behind the image - as you can see it has a position of left, and for some reason the <div> within the <blockquote> is including the image so is full width.

Any help appreciated

Css Background Image Fixed Positioning?

Similar Tutorials

View Content

Hi all,

Okay, so I've got a page with a central column which has a drop-shadow and a background image... The obvious problem is that the repeated background image doesn't always line-up with the background image in the dropshadow. Plus, The backround image changes position whenever the page is resized.

So I was looking here, to see if I could find the code to center the background image in the screen, and make it a fixed position, but even then, when you resize the page, the background image seems to move with it.

Does anyone know how to fix a background image so that it will stay aligned with the central content/dropshadow of the page?

Thanks.

Positioning Background Image In Bulletted List

Similar Tutorials

View Content

Hi

I am trying to position a background image in my list, but I can't seem to position it where I want it, heres the example

http://dmumford.bizhat.com/test/list.htm

I need the bullet to be before the link home, but when I change the padding in the ul class the bullett moves with it, if that makes sense.

Could someone please help me!

Thank you!

Firefox Error Rendering Background Positioning Of Image

Similar Tutorials

View Content

Hey folks, here's an odd problem that's got me totally stumped.

I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version.

Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however.

This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts?

The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest.

Thanks for any help you can offer!

Problem Positioning Background Image On An Active Parent

Similar Tutorials

View Content

I have a problem I can't resolve as I'm out of my depth with this CSS positioning issue on a joomla site with a bespoke template I have customised.

The problem is that the client (a graphic designer) created a menu design where the top level menu buttons overlap with a curve. I have assigned a background image on hover and it works well. You can see it he

I can't post an image of the menu as it won't let me, being a new poster, which is a pain...
Code:

#horiz-menu a:hover {
            display: block;
            z-index: 100;
            line-height: 22px;
            left:-53px;
            position: relative;
            background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
            padding-left:63px;
            height:27px;
            width:162px;
            border-bottom:1px solid #fff;
            margin-bottom:-3px;
}

To achieve the overlap, the background has to sit behind the button to its left and that is achieved by moving it a fixed amount of pixels leftward. The menu text is then put back in place with the padding.

However the client now wants the hovered image to stick in the parent position when the submenu items are hovered over.

I've achieved this with:
Code:

#horiz-menu li.parent.active a {
            background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
            z-index: 100;      
            line-height: 22px;      
            left:-53px;             
            position: relative;      
            padding-left:63px;      
            height:27px;     
            width:162px;      
            border-bottom:1px solid #fff; 
 }

The trouble is that although the background image is positioned correctly, it has a knock-on effect on all the submenu list items which are being positioned to the beginning of the background image, 53 pixels to the left...

I cannot pad the submenu items over to the right as it causes all the other submenus items under the other parents to move to the right too.

I suppose my question is twofold: is there any way of setting the active parent list item background image position without the children items inheriting the position change? ; is there a better way of doing what I am attempting to do?

If the client had not specified overlapping buttons I would be in the clear but my client was a graphic designer who designed without any thought as to the css implications. The requirements have been signed off and I have to find a way of implementing it.

Please, any thoughts? I am not a css coder and I find css to be impenetrable, arcane whilst being slow and difficult to debug. All help really appreciated.

Background Image Positioning And Table Problem In Firefox

Similar Tutorials

View Content

Hello,

I recently started creating websites again and I have been pulling my hair out on this Firefox compatibility issue. The site navigation looks great in IE but in Firefox a couple of the background images are skewed down and to the left.

Since all my tricks from years ago are so outdated now, I decided to try CSS for a simplified navigation setup. The code is probably pretty messy since I chopped it together from numerous sources and still am not completely sure how it works.

Background:
I created a large 794x1200 PNG image that contains two complete border and navigation sets. I am using CSS to both position the appropriate portion in each table/cell as well as switching to a slice on the 2nd image set for rollover purposes.

An example of the current test is he (URL address blocked: See forum rules)
*not sure if this is okay but would be best to see the example. If it is not allowed as a non-clickable then feel free to delete.

It is here - classtime . org / test6 . htm

and the navigation image is he
(URL address blocked: See forum rules)
*classtime . org / navigate . png

I would be eternally grateful to anyone that can help me figure out why the site works great in IE but is coming up skewed in Firefox.

As a side note, when I pull up the site in Frontpage, it shows the left-most cell as being larger than it is supposed to be even though it is hardcoded. To get my left image bar to show up in the correct place I had to use a value of "left: -40px;" I'm not sure why that is but I suspect it has something to do with the problem.

Thank you very much for taking a look. My jumbled code is as follows:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">

<title>Ultrasonic Blind Company - Elk Grove Village, Illinois</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css" media="screen">

a:link {color: #FFF4D1;}
a:visited {color: #FFF4D1;}
a:hover {color: #74060c;}
a:active {color: #FFF4D1;}


.top a
{
display: block;
width: 794px;
height: 120px;
background-image: url('navigate.png');
}

.top a:hover { 
background-position: 0px -601px; 
}



#left {
 left: -40px;
 width: 150px;
 height: 460px;
 display: block;
 background: url('navigate.png');
 background-repeat: no-repeat;
 background-position: 0px -120px;
 position: relative;
 }

#left li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: center;
font: bold 18px Batang;
line-height: 50px;
}


#left li, #left a {height: 50px; width: 146px; display: block;}
#panel1b {top: 10px;}
#panel2b {top: 63px;}
#panel3b {top: 116px;}
#panel4b {top: 169px;}
#panel5b {top: 223px;}

#panel1b a:hover {background: transparent url('navigate.png') 0px -730px no-repeat}
#panel2b a:hover {background: transparent url('navigate.png') 0px -785px no-repeat}
#panel3b a:hover {background: transparent url('navigate.png') 0px -839px no-repeat}
#panel4b a:hover {background: transparent url('navigate.png') 0px -890px no-repeat}
#panel5b a:hover {background: transparent url('navigate.png') 0px -945px no-repeat}

#right {
 width: 154px;
 height: 460px;
 display: block;
 background: url('navigate.png');
 background-repeat: no-repeat;
 background-position: -640px -120px;
 position: relative;
 }

#right li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: right;
font: bold 18px Batang;
}

#right li, #right a {height: 85px; width: 154px; display: block;}
#panel1r {top: 0px;}
#panel2r {top: 100px;}
#panel3r {top: 200px;}
#panel4r {top: 300px;}

#panel1r a:hover {background: transparent url('navigate.png') -640px -721px no-repeat}
#panel2r a:hover {background: transparent url('navigate.png') -640px -821px no-repeat}
#panel3r a:hover {background: transparent url('navigate.png') -640px -921px no-repeat}
#panel4r a:hover {background: transparent url('navigate.png') -640px -1021px no-repeat}


</style>
</head>
<body bgcolor=#74060c>
<div align=center>
<table id="Table_01" width=794px height=600px border=0 cellpadding=0 cellspacing=0>
<tr>
		<td colspan="3" height="120" width="794" bgcolor="#FFF4D1">
			<div class="top"> 
			<a href="(URL address blocked: See forum rules)"></a> 
			</div>
		</td>
</tr>
<tr>
		<td align=left valign=top height=674px width=150px bgcolor="#FFF4D1">
		 	<ul id="left">
  			<li id="panel1b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Contact</a></li>
 		 	<li id="panel2b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Residential</a></li>
  			<li id="panel3b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Commercial</a></li>
  			<li id="panel4b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Coupons</a></li>
  			<li id="panel5b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Questions</a></li>
 			</ul>
		</td>
		<td align=left valign=top width=490px height=674px bgcolor="#FFF4D1">
		aaa</td>
		<td align=left valign=top width=154px height=674px bgcolor="#FFF4D1">
			<p align=right> <ul id="right">
  			<li id="panel1r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel2r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel3r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel4r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
 			</ul>
 		</td>
</tr>
	
</table>
</div>
</body>
</html>

Background Image Problems

Similar Tutorials

View Content

I have a problem that I just cannot figure out.

Scenario
I want to have my site have 2 background images, one for the actual html (THE WHOLE BROWSER WINDOW) which I created an image 20 pixels wide x 2500 high, so it accounts for most used screen resoltuions.

Then I need to have a second image within the pagediv (container) ( think that is correct place to have it) that fills the width of the actual page, I have my page set for 940 pixels wide.

Now I can acheive this fine by placing the second image in the css style sheet for my page container.

But the problem that happens is the page goes beyond the window height, and when you scroll down at the point of the end of your window, the background image is cropped off. It seems that it is finishing at the end of my window.

How can I stop this so that it is the actual lenght of the window with teh scroll.

A link to the page where if you scroll it cuts off the lilac colour:
http://www.acklamflooringservices.co.uk/development/index.html

The css code for my html/body and page div.
Code:

html { height:100% }

body 
{
	margin: 0px;
	background-color: #CCCCFF;
	background-image: url(inc/grnd.gif);
	background-repeat: repeat-x;
	height: 100%
}

#PageDiv {
	position:relative;
	width: 940px;
	margin:0px auto;
	background-image: url(inc/grnd2.gif);
	background-repeat: repeat-x;
	height: 100%
	}