CODEWITHSUNDEEP
htmlcss
Brent Hamilton
Brent Hamilton

Reputation: 3

I can't move the logo on my website

I've been writing this website for a few days now and have gotten into trouble with my logo position. I can't seem to move it not matter how much I try. Can anyone suggest how I can do this? PS. (I'm still learning css.)

HTML:

<div class="logofx">
<a href="index.html"> <img src="images\logo.png"> </a>
</div>

CSS:

.logofx img {

top:300px;
left:50px;

-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;          
}

.logofx img:hover {
-webkit-filter: hue-rotate(333deg);

}

Upvotes: 0

Views: 101

Answers (4)

user3423017
user3423017

Reputation:

HTMl:

<div class="logo"><div class="logofx">
<a href="index.html"> <img src="images\logo.png"> </a>
</div>
</div>

CSS:

.logo{position:relative;}
.logofx{position:absolute; top:10px; left:10px;}

Try this code this will help you .Kindly put the top and left at correct pixel or move where you want using top and left property.

Upvotes: 0

valerio0999
valerio0999

Reputation: 12138

what about margins instead?

    .logofx img {
    margin:300px 0 0 50px;
    display:block;
    -webkit-transition: all 5s ease;
    -moz-transition: all 5s ease;
    -o-transition: all 5s ease;
    -ms-transition: all 5s ease;
    transition: all 5s ease;          
    }

Upvotes: 0

Colin Banbury
Colin Banbury

Reputation: 901

Set position: fixed

.logofx img {
  position: fixed;
  top:300px;
  left:50px;

  -webkit-transition: all 5s ease;
  -moz-transition: all 5s ease;
  -o-transition: all 5s ease;
  -ms-transition: all 5s ease;
  transition: all 5s ease;          
}

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324790

You need position:relative, position:absolute or position:fixed (depending on the specific desired effect*).

By default, elements have position:static and statically-positioned elements are unaffected by left/top/right/bottom adjustments.

*Effects:

  • position:relative moves the element by the amount specified, but other elements behave like it hasn't moved. If you want other elements to move too, consider using margin properties instead.

  • position:absolute moves the element to be placed relative to the nearest position:relative container (or the whole document, if there is none).

  • position:fixed fixes the element in the browser window, using the left/top as coordinates.

Upvotes: 4

Related Questions