Logo not appearing

HTML & CSS
1

Hi

Spent ages trying to work out what is happening, to no avail! I am trying to place a logo in the far right of the header and it does not show.

This is the basic css of the #header. The code for the #clock is not in full.

Could you see what may be causing the logo not appearing? It tried with and without the img-container.

#header {
width:100%;
max-width:1000px;
height:140px;
background-color:#910000;
overflow: hidden;
margin-top:5px;
}


#header #section1 {
height:140px;
background-color:#910000;
}  

#header #section1 #clock {
float:left;
width: 170px;
height:140px;
background-color:#910000;
padding-top:0;
margin-left:60px;
}

**************************


#header #section1 #title {
height:140px;
background-color:#910000;
line-height:60px;
padding-top:0;
padding-left:335px;
margin:0 50px 0 80px;
}

#title h1 {
    font-size:30px;
    font-weight:bold;
    color:#E1E19D;
   font-family: roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
#header #section1 #title p {
color:#FAEFEF;
padding-top:0;
padding-left:30px;
font-size:20px;
line-height:10px;
}

 #header #section1 #logo {
float:right;

}


<body> 


 <div id="container">

 <div id="header">
    
 <div id="section1">

    <div id="clock">

       <div id="position">
       <div id="Santo-Domingo" class="cityTimeDate"></div>
       </div>

    </div><!-- close clock -->


    <div id="title">

      <h1 id="att0">Santo Domingo</h1>
      <p>Dominican Republic</p>
      
    </div><!-- close title -->   
 
    <div id="logo">
   
    <div class="img-container"><img title="Logo" alt="Logo" src="/Pinto/images/whitelogo125b.jpg" width="125" height="85"></div>

 
    </div><!-- close logo -->

</div> <!-- close section1 -->

</div> <!-- close header -->
2

Hard to say without a live sitee. Could be a couple things.

  1. You set a height on #section1 so it’s possible that since #title isn’t floated, that logo is being pushed down and out of the boundaries and thus you aren’t seeing it.
  2. There could be more code conflicting with what you have.

Could we get a live website? Much easier to debug.

3

Hy Ryan

You’re everywhere!

it’s the same page as yesterday, It’s finished except for this and some minor details.

The position is not imprtant at the moment as long as it is in the <header> as it will be display:none; until late in the queries.

SORRY…

http://pintotours.net/Work/Sights/Test.html

4

Hi

You were absolutely right, as always!

I applied

 #header #section1 #logo {
float:right;
position:absolute;
left:1080px;
top:40px
}

and it appeared. My question now is: is this a sensible code to go display:none; and revive it in the media quesries where I may have to re position it?

PS

and another problem…: when I apply display:none; it simply jumps down out of the header and is still visible! Why?

UPDATE

I’ve jusr read the following which suggests that I can’ use position:absolute with display:none…

CSS2 says:

If ‘display’ has the value ‘none’, user agents must ignore ‘position’ and ‘float’. In this case, the element generates no box.

What’s the go-around?

5

Yes I am everywhere; signs of me having no life :wink: . Glad it worked!

  1. Floating and position:absolute is pointless. Floating will be ignored.
  2. Since your element is position:absolute, I’d rather you set it to left:-999rem to hide it and then do left:0; to bring it back into view (are you talking about #logo here?)
  3. Yes, position:absoltue and display:none are completely separate and have no correlation.
6

Would it not be better to change the code in the header to allow the logo normally and then hide it with display or visibility until it gets revived later in the queries?

It look like the code is weird… and maybe it’s time to start sorting out the header.

Thanks

7

Depends…what exactly are you trying to accomplish? It’s very early here and I just got into work and I haven’t had my soda yet (caffeine) so my brain is only half working. Could you tell me the exact scenario you want the header to have throughout the different sizes?

8

Hi Ryan

Sorry, I thought you were in the UK. It can wait till you get your soda and spring into life proper!

Anyway, I’ve done as you suggested and placed the logo position:absolute; left:-1000px; and as expected it went into orbit.
Now, I put this in queries but the logo does not turn up!! Lost spececraft, I’m afraid!

What I am trying to do is to bring the logo into scene when the one in the sidebar disappears at @media500px. And the best place is the rtemaining space in the header. Please, have a look at the page and bring down to below 500px width.
I only want it to be seen at below 500px width

  @media screen and (max-width:500px) {
          #left{
     display:none;
     }
     #box{
     margin-left:auto;
     margin-top:3px;
     }
      #horizontal{
   
    display:table !important;
    
    }
    
     #logo {
   position:absolute;
left:400px;
top:200px;
    }
 
     }
9

So let’s think about this logically. You set the -1000px on #logo with this rule.

#header #section1 #logo{}

Now you try to undo this in the media query by just doing this.

#logo{}

Why might that not override the first rule? Hint: CSS Specificity.

P.S. - I am in the U.S. East coast, not the U.K. :wink: .

10

Yes, and it’s 7.30 am there. You get up easrly! And you’re a good teacher. Are you a teacher?

Now, I got the spacecraft back out of orbit and nicely parked at 500px., which creates yet another problem: as the hangar narrows to say 350px, I lose half the thing!

Is there a way of getting the logo to slide leftwards as the screen narrows? I thought that my

<div class="img-container"> would have solved that problem but it does not.
11

Ids are unique (there can only be one unique id on a page) so there is no need to try and qualify them even more to make them more unique by adding loads more ids to the rule :smile:

What happens is the browsers parses from right to left:

Pass 1: #logo - Browser says “Yippee. I found it straight away”.

Pass 2 : #section1 #logo() : Browser says “Didn’t you hear I found it already”.

Pass 3: #header #section1 #logo{} : Browser says " You like making me work and in the process slowing me down just to give you a result I found hours ago" :smile:

Keep your selectors as short as they need to be and no longer.

#logo{}

… is all you need from the start.

Obviously with classes you may have to be more specific but again the secret is to keep your selectors as short as they need to be.

12

Nah, I am a regular web developer (specializing in front-end although I do full-stack stuff when I need to; very little) for the government. I’ve taught some friends and taught 1 class some basics of CSS.

It’s 7:40A.M. here. (7 when I first answered this thread.)

Also, instead of setting like…left:310px, couldn’t you just set left:auto;right:0; instead (and that’ll make it hug the right side.)

Heck, you could hide it with right:-999rem; and then do right:0; to hide it instead of messing with the left property at all.

13

Now, you got me lost…

I only have ONE #logo in the css and it is only called once in the html.

if it makes you happier I can change it to .logo. But I did not foolow your discourse, I’m afraid.

The images in the #box narrow as the screen narrow through the

set-up.

Why does #logo not comply accordingly?

Thanks, Ryan.

14

Uhh, Uhhh…

CIA???

15

He means that you doing #header #section1 #logo{} is completely redundant. Why not just make it #logo? As you know, you only HAVE one #logo. Why do you need to make it more specific and make it #header #section1 #logo{} when you can just do #logo? There is only one of them and IDs are unqiue per page. Simply do #logo{} . Technically speaking you can only be referring to one element (e.g. one #logo.)

If I tell you, I’d have to kill you :wink: .

Did you try my right:0; suggestion (instead of messing with left?)

16

I did, and SUCCESS!!!

Fantastic. I think I have all I need now, to finish the page and publish it, and leave you to your government devices…

Many thanks Ryan!

17

Hi,

You still have issues because of your continued use of height (you must be tired of me telling you this now :smile: ).

I’ll say it again but the worst mistake you can do is to apply a height to columns that hold fluid content. I would go as far to say that you should never do it.

You are giving the columns a height of 4200px which is a magic number and only works as long as you don’t remove content from the middle column or don’t increase content in the column with the height or your user doesn’t have a different font-size to you.

As it is when you move the browser window smaller your right and left columns poke outside of the container that holds them. Reduce the text size and the side columns overlay the footer.

This is a very fragile way to build a site and should be avoided. Most times you would want content to dictate the height. Your panel3 is absolutely placed when instead you should have just nested it inside #right and let content stretch it. You could have then utilized a min-height to maintain the magic height you wanted while still allowing the content to grow and shrink.

If you wanted three equal columns then perhaps the display:table-cell (ie8+) approach would have been better to allow automatic equal columns (although sometimes it can be a little hard to style the columns in a table algorithm).

The main point though is to avoid the ‘magic numbers’ as they will come back to bite you again and again. Always try to make things flow so that if you change content then it has no detrimental effect elsewhere which won;t be the case where you have fixed heights and fixed offsets using magic numbers that only meet the criteria of the page as you see it.

However you do seem to be making progress in other areas but I didn’t want you to lose sight of these fundamental concepts :smile:

18

Hi Paul. You are preaching to the converted!

In fact, since my long thread with RyanReese, I have been looking at how to do the columns “properly”, and am going to test with faux columns and the “TRue layout method”.

However, after much suffering I managed to get all my main pages working WELL with my method of giving no height to the panels in the column and position:absolute; top xxxpx; only to the bottom one.
Of course, if I change content I have to readjust everything.

really? I have checked this page a number of times and it is reducing nicely. Please, do tell me what sticks out, and where.

This fixed heights on this page are temporray until I managed to learn how to do it otherwise. I hope you’re still around when the time comes…

Many thanks, Paul

PS - May I take the opportunity to ask you help on a problem that I’ve spent a couple of hours on without success: in either sidebar there is a panel with “Travel Secrets” which is a link and that a couple of weeks ago I managed to get anice border around those two words. Now, I cannot do it any more and was going to start another thread. can you help?

19

You have a rule called .normal1 span and if you give that display:block and margin:auto you will be able to place the border around it.

e.g.

.normal1 span {
  background: none repeat scroll 0 0 white;
  border: 1px solid red;
  color: brown;
  display: block;
  font-size: 30px;
  font-weight: bold;
  height: 80px;
  margin: auto;
  width: 120px;
}

Remember inline elements cannot have dimensions applied, Only block level elements or inline-block elements can have dimensions.

20

When you close the window the menu disappears at about 940px width and in doing so the layout slides up to fill the space however your absolute side columns background still have the same top position they had before and therefore stick out at the bottom. If when you hide the nav in your media query you also change the top position of those elements you should be ok :smile:

Apologies I missed the other thread:)

If you only want to support IE8+ then first have a look at the display:table table-cell method. The only issue I can see is whether you actually want the two side columns to be a bit shorter than the main column rather than all three level at the bottom.