Round corners

HTML & CSS
1

As I narrow the screen and go past @420 I change images in the header from a larger to a smaller one. The code is identical for both but only the large one takes the rounded corners…

    #header #section1 #logo2 {
    display:none;
    float:left;
    width: 170px;
    height:140px;
    background-color:#910000;
    padding-top:15px;
    margin-left:60px;
    
    }
    
    #header #section1 #logo2 img {
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px; 
    border-top-left-radius:20px;
    border-top-right-radius:20px; 
    }
    
    
    #header #section1 #mylogo {
    display:none;
    float:left;
    background-color:#910000;
    padding-top:15px;
    margin-left:5px;
    
    }
    
    #header #section1 #mylogo img {
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px; 
    border-top-left-radius:20px;
    border-top-right-radius:20px; 

}

It’s live here http://pintotours.net/CCC/VVV.html

2

You only give the border-radius to the image in #mylogo. That’s only the bigger image. The smaller image is not inside of #mylogo.

Why do you expect the smaller one to have a border-radius? You didn’t set one in the #mylogo rule :slight_smile: .

3

Hi Ryan

I’ve been at this since early this morning and my brain must have seized!

I cannot understand what you wrote.

I have the same html and the same css for both

        <div id="header">
                <div id="section1">
                        
                        <div id="clock">
                                <div id="position">
                                        <div id="London" class="cityTimeDate"></div>
                                </div><!-- close position -->
                        </div>   <!-- close clock -->

                      
                        <div id="title">
                                <h1>Travel Secrets</h1>
                                
                        </div><!-- close title -->
                        

                        <div id="mylogo">
          
<img src="/Pinto/images/whitelogo90.jpg" alt="Logo" title="Logo"  width="90" height="61">
                        
                        </div><!-- close mylogo --> 
                        
                                         <div id="logo2">
          
<img src="/Pinto/images/whitelogo125.jpg" title="Logo of Pinto Tours" alt="Pinto Tours trip advice" width="125" height="85">
                        
                        </div><!-- close logo2 -->      
                       

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

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

Sorry…

4

The big image is “#mylogo img”
The small image is “#logo2 img”

Why is #logo2 img (small) not round?

#header #section1 #mylogo img {
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px; 
    border-top-left-radius:20px;
    border-top-right-radius:20px; 

}

Note there is no other border-radius set.

5

I must be more tired than I feared!

When you lose the #left in the queries a logo appears in the header: it is logo2.jpg

Then as the screen narrows further @420 I change from the larger logo2.jpg to the smaller mylogo.jpg.

Both have the same code.

Sorry about this but I don’t get what you’re pointing at.

6

Your small image is in a completely separate div in the HTML! I don’t know how else to explain it. Look at what your border-radius is targeting, and look where the small image actually is in the HTML! They are not in the same place. I’ve explained best I can. If you can’t see what I mean then I’m afraid I can’t help you.

7

Both images are inside the same divs

#header #section1 #logo2  {

#header #section1 #mylogo {

and the img code is identical for both.

Maybe I should leave this for a couple of hours because I am sure you are right and I cannot see the obvious!

8 
#header #section1 #mylogo img {
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px; 
    border-top-left-radius:20px;
    border-top-right-radius:20px; 

}

This is not in your CSS file. You claim it is. Please go here
http://pintotours.net/Pinto/index.css
And see if you can find it.

9

Ahhhh

We are looking at different files.

I have published that page but am still adding bits and pieces in the test page I gave in the first post.

It’s live here http://pintotours.net/CCC/VVV.html

I had just called the shrink; it’s a good thing he was out for lunch.

10

No I was looking at the right page. That VVV.html file calls this CSS file
http://pintotours.net/Pinto/index.css

So where is the rounded code that I posted?

11

Ahhh.

Explanation:

before I published the pages I renamed them and obviously changed the stylesheet.

When I came back to try a few more things and renamed tham back to what they were and I forgot that the CCC/VVV was not targeting the VVV.css but the live one!

My apologies. It must explain why I was not getting anywhere because I was working on the VVV.css and looking for results in the VVV.html that was linked to the index.css!!!

Yes I’m going to take a break.

Sorry about the confusion

12

All set?

13

I don’t know. I need a rest: 6 weeks!

the problem is so simple that it does not occur to me that all I need to do is to change the stylesheet in the CCC/VVV.html

But not now…

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.