CODEWITHSUNDEEP
htmlcssparent-child
gears244
gears244

Reputation: 63

Why is child element inheriting parent element still?

So I basically want the <div class"block" element placed below the links taking the full width of the browser and be placed below the image, just for style. It seems to be inheriting the parent element and taking the width of the buttons I created for the links. I can manually add spacing in CSS to get it below the image however I don't know how to adjust the width and prevent it from taking the parent width. I am using display:grid on the container in order to place the buttons on top of the image. Not sure if this is affecting anything.

enter image description here

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Menu</title>
<link rel="stylesheet" href="css/style3.css">
</head>

<body>
<img src="images/portfolioAni.gif">
<div class="font">
    <p class="note">Welcome to my Portfolio, below you will find a menu of <br>
     all my coding assignments I completed in school. Some basic <br>
     exercices as well as entire websites using HTML, CSS, <br> 
     Javascript,Bootstrap and PHP.</p>
</div>
<div class="container">
    <img src="images/Slider.gif" class="img2">
    <a href="Project.html"><div id="button1"><p class="buttonint">HTML and CSS</p></a>
    <a href="Project.html"><div class="button"><p class="buttonint">Javascript</p></a>
    <a href="Project.html"><div class="button"><p class="buttonint">Bootstrap</p></a>
    <a href="Project.html"><div class="button"><p class="buttonint">PHP</p></a>
</div>
<div class="block"></div>
</body>

</html>


.image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

p {
    text-align: center;
    font-size: 20px;
    font-family: OCR A Std, monospace ;
    text-decoration: none;
}

.note {
    margin-top: 100px;
    margin-bottom: 50px;
}

.buttonint {
    color: white;
    text-decoration: none;
}

a:link { 
    text-decoration: none;
}

img{
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  max-width: 100%;
  height: auto;
}

.img2{
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
    z-index: 1;
    position: relative;
}
.block{
    width: auto;
    height: 20px;
    background-color: darkred;
}
.button {
    width: 200px;
    height: 40px;
  border-radius: 25px;
  line-height: 35px;
  text-decoration: none;
  margin-top: 30px;
  background-color: rgba(194, 154, 54, 0.6);
  grid-area: 1 / 1;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  top: 15px ;
  position: relative;
}


#button1 {
    width: 200px;
    height: 40px;
  border-radius: 25px;
  line-height: 5px;
  text-decoration: none;
  background-color: rgba(194, 154, 54, 0.6);
  grid-area: 1 / 1;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 90px;
}

.container{
    display: grid;
    margin-bottom: 70px;
}

Upvotes: 0

Views: 160

Answers (2)

JDW
JDW

Reputation: 79

Your negative top margin in .button class is causing the block overlap on the top. Add an equivalent value margin on the bottom of this class. e.g.

.button { margin-bottom: 30px; }

You're also missing end div tags on buttons - add these in as your block is a child of the first button currently.

Add width: 100vw to your block class to fill the browser screen horizontally.

There also appears to be conflicting absolute references between button and #button, but you'll need to add your full link for the images for it to display properly in the code snippet so I can see if the issue is solved or if there are further changes required.

Demo (so far)

Upvotes: 1

Bagseye
Bagseye

Reputation: 221

You have not closed off your divs so it was taking .button as its relative point, by the looks of it.

<a href="Project.html"><div id="button1"><p class="buttonint">HTML and CSS</p></div></a>
    <a href="Project.html"><div class="button"><p class="buttonint">Javascript</p></div></a>
    <a href="Project.html"><div class="button"><p class="buttonint">Bootstrap</p></div></a>
    <a href="Project.html"><div class="button"><p class="buttonint">PHP</p></div></a>

Upvotes: 0

Related Questions