Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

need to stop logo from moving


  • Please log in to reply

#1
clarky23

clarky23

    Member

  • Member
  • PipPip
  • 59 posts
hello,
I can use help with a website I'm putting together. I have a logo that I needed to place in front of a slideshow, and thought is was looking good. Problem is the logo is remaining on screen when you scroll down the page. Probably something totally simple, but I'm still learning (self-teaching). Any help would be appreciated. Thanks in advanced.
You can look at the page at the following url: www.viarkunlimited.com/10030
  • 0

Advertisements


#2
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
You have the image fixed by your CSS:

#container { position: fixed;   left: 50%;   margin-top: 5px;   margin-left: -150px; z-index:300;  }

The HTML:
<div id="container"> <img src="img/ccf_logo.png"> </div>

Some CSS Errors [ Ignore any properly formed CSS3 rules that may have been flagged ]

HTML Errors

Edited by AstraNut, 15 September 2013 - 06:25 PM.

  • 0

#3
clarky23

clarky23

    Member

  • Topic Starter
  • Member
  • PipPip
  • 59 posts
yes, the image is fixed, but when I try any other setting (absolute, relative), it moved the image to the upper left. Thoughts?
  • 0

#4
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
As long as you have the image set in a fixed position, it will not scroll with the page. If you want it center then use CSS and the div container. You can add top margin to this if you need it, but take a look in your browser:
<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>

<title></title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />

<meta name="created" content="Mon, 16 Sep 2013 03:09:57 GMT" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<style type="text/css">

#logo {

width: 312px; height: 250px;

margin: 0 auto;

margin-top: 1em;

background: url(http://www.viarkunlimited.com/10030/img/ccf_logo.png) no-repeat center scroll; 

</style>

</head><body>

<div id="logo"></div>

</body></html>

  • 0

#5
clarky23

clarky23

    Member

  • Topic Starter
  • Member
  • PipPip
  • 59 posts
AstraNut,
First, thank you for your assistance. I do appreciate it.

Ok, I created the #logo style like you had in your example. That centers the logo fine. But it placed the logo above everything. I still need the logo placed over the menu bar like you can see on the page www.viarkunlimited.com/10030/golf.html that is the effect they are wanting on their pages. I tried added the z-index, but it doesn't seem to work. Again, I am a novice at this and appreciate your help.
  • 0

#6
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
Try:

#container {
position: relative;
width: 312px; height: 250px;
margin: 0 auto;
background: url(http://www.viarkunlimited.com/10030/img/ccf_logo.png) no-repeat bottom center scroll;
top: 21em; z-index: 300;
}

Then add this to CSS:

#wrap {
width: 975px; margin: 0 auto;
margin-top: -20em;
}


That worked for me. Tweak the top values to set vertical placement for logo and page.

Edited by AstraNut, 15 September 2013 - 10:58 PM.

  • 0

#7
clarky23

clarky23

    Member

  • Topic Starter
  • Member
  • PipPip
  • 59 posts
This worked for me, only thing I have now is the top margin. I have played with the margin-top and have it set at -2em and it's set right on the menu bar and the slide. I just need to move the page itself up so there is not as much yellow between the top of the logo and the edge of the browser. I also messed with the top em but it just seemed to just move the logo and not the page.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP