Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

need to stop logo from moving

Started by clarky23 , Sep 15 2013 12:57 AM

  • Please log in to reply

#1
clarky23
Posted 15 September 2013 - 12:57 AM

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
Posted 15 September 2013 - 06:16 PM

AstraNut

    Member

  • Member
  • PipPipPip
  • 465 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
Posted 15 September 2013 - 07:14 PM

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
Posted 15 September 2013 - 09:17 PM

AstraNut

    Member

  • Member
  • PipPipPip
  • 465 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
Posted 15 September 2013 - 09:54 PM

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
Posted 15 September 2013 - 10:49 PM

AstraNut

    Member

  • Member
  • PipPipPip
  • 465 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
Posted 15 September 2013 - 11:24 PM

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
Back to Web Development · Next Unread Topic →




Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Geeks to Go Community
  2. → Development
  3. → Web Development

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP