why does my anchor tag stick out from it's div box |
why does my anchor tag stick out from it's div box |
mp3909 |
May 2 2020, 06:20 AM
Post
#1
|
Novice Group: Members Posts: 20 Joined: 4-April 20 Member No.: 27,264 |
So I have an issue at the div class = info in the html code below.
The anchor tag sticks out from its container which is the div class = info. I have put a border around the div class = info in the css code so it is clearly obvious to see. Why is this anchor tag sticking out? I thought the div is a container so it should contain all its elements inside it and nothing should be sticking out of it? I also thought the div container will automatically increase its height as soon as you add more elements inside it. CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GridBiz</title> <script src="https://kit.fontawesome.com/ebd07eb632.js" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="website2.css"> </head> <body> <div class="wrapper"> <nav class="main-nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <section class="top-container"> <header class="showcase"> <h1>Your web presence</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p> <a href="#" class="btn">Read More</a> </header> <div class="top-box" "top-box-a"> <h4>Membership</h4> <p class="price">$199/mo</p> <a href="#" class="btn">Buy Now</a> </div> <div class="top-box" "top-box-b"> <h4>Pro Membership</h4> <p class="price">$299/mo</p> <a href="#" class="btn">Buy Now</a> </div> </section> <section class="boxes"> <div class="box"> <i class="fas fa-chart-pie fa-4x"></i> <h3>Analytics</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p> </div> <div class="box"> <i class="fas fa-globe fa-4x"></i> <h3>Marketing</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p> </div> <div class="box"> <i class="fas fa-cog fa-4x"></i> <h3>Development</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p> </div> <div class="box"> <i class="fas fa-users fa-4x"></i> <h3>Support</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p> </div> </section> <div class="info"> <img src="images\black-and-white-blackboard-business-chalkboard-356043.jpg" alt=""> <div> <h2>Your Business On The Web</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p> <a href="#" class="btn">Learn More</a> </div> </div> <section class="portfolio"> <img src="https://source.unsplash.com/random/200x200" alt=""> <img src="https://source.unsplash.com/random/201x200" alt=""> <img src="https://source.unsplash.com/random/202x200" alt=""> <img src="https://source.unsplash.com/random/203x200" alt=""> <img src="https://source.unsplash.com/random/204x200" alt=""> <img src="https://source.unsplash.com/random/205x200" alt=""> <img src="https://source.unsplash.com/random/206x200" alt=""> <img src="https://source.unsplash.com/random/207x200" alt=""> <img src="https://source.unsplash.com/random/208x200" alt=""> </section> <footer> <p>GridBiz © 2020</p> </footer> </div> </body> </html> CODE /*CSS Variables*/ :root { --primary: #ddd; --dark: #333; --light: #fff; --shadow: 0 1px 5px rgba(104,104,104,0.8); } html { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; background-color: var(--dark); } body { background-color: #ccc; margin: 30px 50px; line-height: 1.4; } .btn { background-color: var(--dark); color: var(--light); padding: 0.6rem 1.3rem; text-decoration: none; border: 0; } img { max-width: 100%; } .wrapper { display: grid; grid-gap: 20px; } .main-nav ul { padding: 0; list-style: none; display: grid; grid-column-gap: 10px; grid-template-columns: repeat(4, 1fr); } .main-nav a { background-color: var(--primary); display: block; text-decoration: none; padding: 0.8rem; text-align: center; font-size: 1.2rem; color: var(--dark); text-transform: uppercase; box-shadow: var(--shadow); } .main-nav a:hover { background-color: var(--dark); color: var(--light); } .top-container { display: grid; grid-gap: 20px; grid-template-areas: "showcase showcase top-box-a" "showcase showcase top-box-b"; } .showcase { grid-area: showcase; min-height: 400px; background-image: url(images/iphone-dark-notebook-pen-34140.jpg); background-size: cover; background-position: center; padding: 3rem; display: flex; flex-direction: column; align-items: start; justify-content: center; box-shadow: var(--shadow); } .showcase h1 { font-size: 4rem; margin-bottom: 0; color: var(--light); } .showcase p { font-size: 1.3rem; color: var(--light); margin-top: 0; } .top-box { background: var(--primary); text-align: center; box-shadow: var(--shadow); padding: 1.5rem; } .top-box p { margin: 1.25rem; } .top-box .price { font-size: 2.5rem; } .top-box-a { grid-area: top-box-a; } .top-box-b { grid-area: top-box-b; } .boxes { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .box { background-color: var(--primary); text-align: center; padding: 1.5rem 2rem; box-shadow: var(--shadow); } .info { background: var(--primary); box-shadow: var(--shadow); display: grid; border: 2px solid crimson; } |
pandy |
May 2 2020, 10:02 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Well, things can stick out from a DIV, but they shouldn't with what you have.
I've tried, but can't find what causes this. I don't see how this DIV and .btn are significantly different from the others you have that don't show this problem. I played around with it to try to figure out what's happening. If you add a DIV with text in it directly after the link, the button will overlap that text. If you instead move the link into the P, like this... CODE <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi<br> <a href="#" class="btn">Learn More</a></p> ... it will overlap the text above it. In both cases everything will be contained in the DIV though. It's like the button is glued to that spot, as if it was positioned on top of the other stuff. Only it isn't. There must be something. But what? |
Christian J |
May 2 2020, 02:51 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
It seems to be the link padding:
CODE .btn { padding: 0.6rem 1.3rem; border: solid; } div {border: solid red;} <div> <a href="#" class="btn">Learn More</a> </div> |
pandy |
May 2 2020, 04:57 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Of course! And here I looked for something more complicated. I think I assumed the button was made block, but it isn't.
I don't find the page I looked for, but this will do. https://maxdesign.com.au/articles/inline/ Good you saw it before I had time to complicate things even more. |
mp3909 |
May 3 2020, 06:47 AM
Post
#5
|
Novice Group: Members Posts: 20 Joined: 4-April 20 Member No.: 27,264 |
Thanks Christian J and Thanks Pandy for your helpful insights into this, much appreciated
Pandy, I looked at this link you sent https://maxdesign.com.au/articles/inline/ In that article,it says for inline elements, only left and right padding will have an effect on surrounding content. So I still do not understand why my box is hanging out from its div because for that to happen, there must be padding applied at the bottom but the articles says on left and right will have an effect. Thank You |
Christian J |
May 3 2020, 07:25 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
Actually they write:
"the padding on the top and bottom of the <li> elements seems to have been ignored causing the elements to overlap each other." But when they write: "While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content." ...the "effect" they are talking about is pushing surrounding content away. The top- and bottom padding doesn't do that, it just make the elements overlap (as seen by the red border). Here I've added a second DIV to my previous example, showing this: CODE <div> <a href="#" class="btn">Learn More</a> </div> <div>lorem ipsum dolor set amet</div> |
mp3909 |
May 3 2020, 07:44 AM
Post
#7
|
Novice Group: Members Posts: 20 Joined: 4-April 20 Member No.: 27,264 |
ok cool.
thank you |
mp3909 |
May 3 2020, 08:34 AM
Post
#8
|
Novice Group: Members Posts: 20 Joined: 4-April 20 Member No.: 27,264 |
sorry, I just realised when I make my screen smaller, I see all the elements inside my wrapper div box hanging out on the right hand side as per the attached images.
is there a way to make sure that everything inside the div wrapper box stays inside? This post has been edited by mp3909: May 3 2020, 08:37 AM Attached thumbnail(s) |
pandy |
May 4 2020, 06:15 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Not in all browsers. I haven't looked into grid layouts very much, so I'm not sure how that is supposed to work.
|
Lo-Fi Version | Time is now: 18th April 2024 - 06:41 AM |