16 replies [Last post]
rob123
rob123's picture
Offline
newbie
Thailand
Last seen: 2 years 25 weeks ago
Thailand
Timezone: GMT+7
Joined: 2014-03-22
Posts: 9
Points: 10

Big smile Hi everyone, I'm a newby to this forum and have recently lost all my hair, by pulling it out!

My site http://www.hope-rehab-center-thailand.com/ is driving me insane.

My problem is that the logo I have created is constantly moving every time I re-size my window. I have written various rules for different size screens like 600,768,962,1024,1152 and 1200 pixels all with different left pixels dimensions, but this still doesn't do the job properly.

Basically I want the logo that I created to sit 0px from the top and to the right of the page wrapper, but remain there regardless of the screen size. For anyone looking at this it may appear correct at the moment but re-size your window and you will see it move.

In my header I have the Site Logo call as the following;

div class="site-logo"

And in my css style sheet I have the various codes for the different screen sizes like this one;

/* Minimum width of 1200 pixels. */
@media screen and (min-width: 86.375em) {
body .site {
margin-top: 1.5em;
margin-bottom: -1.5em;
}

.site-logo {

background-image: url(http://www.hope-rehab-center-thailand.com/wp-content/uploads/2014/01/Logo-Header-2.fw_.png);
no repeat;
height:200px;
width:200px;
left:1234px;
position:absolute;
top:0px;
z-index:10;
}

I am certainly not experienced in css but trying to learn, so if anyone can help me with this I would very much appreciate it.

Regards
Rob

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 6 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

That is because your position

That is because your position is absolute while it should be relative.
Try working on this.

You can also try the command fixed instead of relative.
Let me know if something worked out.

Cheers Henk

Check Maximum Webdesign for your online solutions

rob123
rob123's picture
Offline
newbie
Thailand
Last seen: 2 years 25 weeks ago
Thailand
Timezone: GMT+7
Joined: 2014-03-22
Posts: 9
Points: 10

Still not working

Hi Henk

Thanks for your answer, but this doesn't work either. I had tried before but I have just done it again and still with no success. When I press F12 and then reduce my screen down from the top corner I can see it move to the various different rules for screen sizes I have put in place, but it still doesn't work as it should.

I have just tried both relative and fixed: Relative actually moves the logo image down so it leaves a large gap at the top, and still doesn't remain to the right anyway. Fixed remains in the correct position height wise etc but still won't stay fixed to the right edge. I appreciate your time, have you any other ideas?

Or anyone else out there got any suggestions?

Cheers
Rob

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Wrong direction

Instead of {left:xxxx;}, use {right: 0;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

rob123
rob123's picture
Offline
newbie
Thailand
Last seen: 2 years 25 weeks ago
Thailand
Timezone: GMT+7
Joined: 2014-03-22
Posts: 9
Points: 10

That doesn't do it either

Hi Gary

Thanks for your input but that doesn't do it either. I'm wondering whether this can be solved or not? At least it's not just me who doesn't know how to fix this. Is there anyone out there who can help?

Cheers
Rob

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Yes, it does work

You haven't made the change I recommended, and for some silly reason, you have the same selector, (.site-logo {...}) at least three other times and they contradict the right property. You'll need to change all instances. Better yet, figure out why you have all those instances and combine into a single instance.

N.B. When you tell someone their suggested fix doesn't work, you should show them that you did implement the suggestion correctly.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 6 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Okay, I tested Gary his

Okay, I tested Gary his suggestion.
Delete all your .site-logo commands in css except for this one:

.site-logo {
    background-image: url('http://www.hope-rehab-center-thailand.com/wp-content/uploads/2014/01/Logo-Header-2.fw_.png');
    height: 200px;
    width: 200px;
    left: 1234px;
    position: absolute;
    top: 0px;
    z-index: 10;
}

and change your code with this code:

.site-logo {
    background-image: url('http://www.hope-rehab-center-thailand.com/wp-content/uploads/2014/01/Logo-Header-2.fw_.png');
    height: 200px;
    width: 200px;
    left: 1234px;
    position: fixed;
    top: 0px;
    z-index: 10;
    right: 0px;
}

Now your logo will be fixed on 0px right, and will not move whenever you are resizing your browser.
Cheers Henk

Check Maximum Webdesign for your online solutions

rob123
rob123's picture
Offline
newbie
Thailand
Last seen: 2 years 25 weeks ago
Thailand
Timezone: GMT+7
Joined: 2014-03-22
Posts: 9
Points: 10

Hi Henk and Gary

Hi Henk and Gary

Firstly thanks for all the effort and support. Gary I did do what you suggested but then took it back out as it didn't work. Sorry if the comment "At least it's not just me" offended in anyway. I didn't mean it as it may have sounded. I meant from my point of view I was happy it wasn't just me who couldn't fix it. As I stated I know very little about CSS etc but I'm trying to learn so please bear with me.

Anyway back to the problem I have now taken out all of the additional (site-logo) field they were there to try and make it look correct in various different size screens. At the moment I have just one Site-Logo field that has the following code;

.site-logo {
background-image: url('http://www.hope-rehab-center-thailand.com/wp-content/uploads/2014/01/Logo-Header-2.fw_.png');
height: 200px;
width: 200px;
position: fixed;
top: 0px;
z-index: 10;
right: 0px;

This now puts the logo in the far right which is not where I want it. I want it where it was before on the very right edge of the slideshow overlapping it. On a large screen over 1200 if you add (left:1234px; or right:472px;) it shows exactly where I want it. But when you scroll the screen size down it keeps moving.

If you use the position relative instead of fixed or absolute it moves down the screen from the top leaving a large gap at the top of the header.

Maybe I am doing something totally wrong, and I do appreciate you guys trying to help me.

Cheers
Rob

rob123
rob123's picture
Offline
newbie
Thailand
Last seen: 2 years 25 weeks ago
Thailand
Timezone: GMT+7
Joined: 2014-03-22
Posts: 9
Points: 10

Hi Again

Hi

I was just playing around again with it and found that if I put in the following code;

.site-logo {
background-image: url('http://www.hope-rehab-center-thailand.com/wp-content/uploads/2014/01/Logo-Header-2.fw_.png');
height: 200px;
width: 200px;
position: relative;
float: right;
top: 0px;
z-index: 999999;
right: 0px;

The logo sits exactly where I want it with regards the right hand side of the slideshow, and stays there when I scroll down the screen size. However it is not fixed to the top anymore, and doesn't overlap the slideshow which leaves a large gap between the slideshow and the site branding.

Getting nearer but still far away I feel.

Cheers
Rob

rob123
rob123's picture
Offline
newbie
Thailand
Last seen: 2 years 25 weeks ago
Thailand
Timezone: GMT+7
Joined: 2014-03-22
Posts: 9
Points: 10

Back again

Hi Guys

OK I have come up with the follwoing;

I have moved the actual Site-Logo call in my header to a slightly better location in the header.

Then I have added the following in my CSS file;

.site-logo {
background-image: url('http://www.hope-rehab-center-thailand.com/wp-content/uploads/2014/01/Logo-Header-2.fw_.png');
height: 200px;
width: 200px;
position: absolute;
top: -85px;
z-index: 99;
right: 0px;
}

This is now live on the site and it is exactly where I want it with one exception, it is not at the top of the page. This is however because of the page wrapper. If I alter the top margin to more than -85px; it starts to move of the screen. I can't see how I can improve on this, but please let me know if you have any ideas.

Thanks for all your help Henk and Gary.

Cheers
Rob

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 6 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Try to insert your code for

Try to insert your code for this "hope changes everything" block before the following code:
<body class="home page page-id-2 page-template-default custom-background">
That way you get it out of the body and inside the html.
Then you can probably get it higher and touch the top of the browser.

Hope this helps.

Check Maximum Webdesign for your online solutions

rob123
rob123's picture
Offline
newbie
Thailand
Last seen: 2 years 25 weeks ago
Thailand
Timezone: GMT+7
Joined: 2014-03-22
Posts: 9
Points: 10

Hi Helldog

Hi Helldog

Just tried that but when I do that for sure I can position align with the top as in top 0px; and it works fine. However it pushes it back to the far right hand side of the page wrapper so it is no longer lined up with the right edge of the main page/slideshow. This is why it has been causing me problems.

Thanks for trying though. Anymore thoughts would be greatly appreciated.

Cheers
Rob

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 6 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

I think it might work if you

I think it might work if you give your block on the HTML a z index higher then your body class.
This way it will be above the body class, instead of pushing this class to the side.

Let me know if this works Smile

Check Maximum Webdesign for your online solutions

rob123
rob123's picture
Offline
newbie
Thailand
Last seen: 2 years 25 weeks ago
Thailand
Timezone: GMT+7
Joined: 2014-03-22
Posts: 9
Points: 10

No that doesn't work either

Hi Helldog

Unfortunately that doesn't work either. I've tried everything I can think of and then some, but still no success. Still looking for other ideas if anyone can help.

Thanks again to everyone for the support.

Cheers
Rob

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Position conflicts

Rob, you're trying to do two mutually exclusive things. You want an element to be positioned laterally based on an ancestor container, while positioned vertically based on the screen.

Let's look at how the position property works. For a metaphor, think of a magnetic white board. Flow elements are laid down with markers; they're on the board. Positioned elements are on magnets and lie above the board.

  • Static: In the flow. They are one the board and not really movable.
  • Relative: The initial placement is in the flow while the content is on a magnet, out of the flow, and is movable. Its offset is relative to its initial flow position.
  • Absolute: Out of the flow. It doesn't see other elements and they don't see it. Its offset is taken from its nearest positioned ancestor. This is the one that lets you place it on the edge of the page wrapper.
  • Fixed: Out of the flow just like absolute. Its reference is the viewport. That's why it's called fixed, because the viewport never scrolls or otherwise moves. The fixed position element remains placed according to the window size. That's why you can put it at the top and have it stay there.

What you're trying to do is use one reference for side to side placement and another reference for vertical placement.

My advice? Let it scroll. It does your visitor no good to have it sitting there taking up space that is better served by content.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

rob123
rob123's picture
Offline
newbie
Thailand
Last seen: 2 years 25 weeks ago
Thailand
Timezone: GMT+7
Joined: 2014-03-22
Posts: 9
Points: 10

Managed To Do It Thanks

Hi to all

I have finally managed to do it, I used the code as I had finally got to, and then I reduced the top margin of the main site from the page wrapper. Maybe it looks a little crunched up at the top, I don't know but what the hell I've finally managed to save the rest of my hair. No more pulling it out!

I would like to thank everyone for their help, and again sorry Gary I didn't mean to sound funny with my comments.

Cheers
Rob

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Rob, I took no offense at

Rob, I took no offense at anything in any of your posts. If it appears that I did, I was simply trying to elicit information that would better help us to help you. It's kinda like school when the math teacher required us to show the work.

For a good guide on how to best use a forum such as this, and one I use myself, see How to ask questions the smart way.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.