Overflow: hidden problem

HTML & CSS
141

Well, yeah, but at least I got a reference, then when I’m good at it, I’ll start coding without using any frameworks or not.

142

Is my html correct, the image part?

URL link

1200×383 501 KB

<div class="content">
            <div class="container">
                <h1>OPEN WATER DIVING</h1>
                <p>Gilboa Quarry is a great location for diving and dive training. The quarry provides 
                        two distinct personalities: the shallow side at 5 - 65 ft provides great recreational 
                        enjoyment, while the deep side of the quarry with depths of 130 plus
                         ft is suitable for technical training.</p>
                        
            </div>
             <img src="images/img1.jpg" alt="images">
             <div class="container">
                <h1>GO CAMPING</h1>
                <p>Gilboa Quarry offers plenty of camping space. 
            Camping areas are conveniently accessible by gravel road allowing for easy drive 
            up access to the quarries main sites.</p>
            </div>
            
        </div> <!--content -->
143

Does it do what you want?

144

You might want to take a look at these guidelines for writing alt text:

http://webaim.org/techniques/alttext/

(I know this is just a practice site, but it never does any harm to get into the way of doing things correctly. )

146

Yea but did I make it as a good HTML clean code?

147

Yeah it’s good.

148

Url Link

How can I make my hover, go deeper like this:

752×134 21.1 KB

149

Vertical padding/margins only work on non-inline elements, if that makes sense.

You need to set the anchors to something other than the default display:inline.

.head-nav ul li a {
  display:inline-block;
}
150

I did follow this NAV area though, but its not working. Could you explain it, why? Please.

http://p.w3layouts.com/demos/ekomers/web/

151

Seems to be for me. How far down do you want it?

152

Like from the website that I shared.

http://p.w3layouts.com/demos/ekomers/web/

153

When you add in the code I gave, your website should have the same level of clickability.

154

the same level of clickability?

Where did I go wrong from my hover?

155

You added in my code, right? Because the live link you gave me doesn’t have my code I added.

Update the live page - http://raineer24.github.io/gilbo/

156 
.head-nav ul li {
    list-style-type: none;
    display: inline-block;
    
    font-size: 11px;
    margin: 0 1%;
}

I got this display: inline-block not from

.head-nav ul li a {
  display:inline-block;
}

you gave me.Should I remove it anyway?

157

I’m not understanding you. Add in my code please that I gave you in post #149. That’s all. No removing code for now.

158

Done.

Now I got 2 display: inline-blocks;

.head-nav ul li and .head-nav ul li a

http://raineer24.github.io/gilbo/

159

They reference two completely different elements. It doesn’t matter whether you have these two elements with it or not. That’s like you pointing out the following exists

.header
{
  background:red;
}
.error-message
{
  background-red;
}

Doesn’t matter.

If I hover below the anchors now, I see the hover area is much bigger. Although the border doesn’t extend. Would you like the bigger border on the bottom? Have it go down farther?

160

Turns out that is an ::after pseudo element. You currently position that effect by position:absolute’ing it down 48%. Such an arbitrary number. A sure sign something is done wrong.

You can simply set it to bottom:0; (remove the top:48%) and it will move further down.

161

I removed top: 48%; then replaced it with bottom: 30%;

Is the code okay for you?