CODEWITHSUNDEEP
htmlcss
Rick
Rick

Reputation: 1

Margin-top doesn't work right

I want to make the top margin of a h2 class bigger then it is now. I tried applying margin-top and padding, but they both didn't work. When i use margin-top on the h2portfolio class, the margin-top of section 1 (so a totally different section) changes.

U can see this on interlaser.webovo.nl. I need to change the margin of the orange 'Portfolio' h2, so class "h2portfolio".

The html i used to build that section:

<h2 class="h2portfolio">Portfolio</h2>
<div id="portfolio1">
<h2 class="h2portfolio1">Feesten</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio1"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio2">
<h2 class="h2portfolio2">Kunst</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio2"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio3">
<h2 class="h2portfolio3">Overige</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio3"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>

the css i used:

.h2portfolio {
background-color: white;
text-align: center;
color: #F16C20;
}

#portfolio1 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio2 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio3 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}

.portfolio1 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio2 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio3 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}

Upvotes: 0

Views: 120

Answers (3)

Bhavin Shah
Bhavin Shah

Reputation: 2482

I have made the updates in the answer.

1 : make a separate div for lazershow contents 2 : make a separate div for portfolio title & its contents and then give margin(as per your need) to the portfolio div which satisfy your requirements.

.lazershow{
  background:white;
  height:200px;
}

.portfolio_div{
  border:thin black solid;
}
.h2portfolio {
background-color: white;
text-align: center;
color: #F16C20;
margin-top:10%; /*Give margin as per your need*/
}

#portfolio1 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio2 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio3 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}

.portfolio1 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio2 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio3 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
<div class="lazershow">
LazerShow Div
</div>
<div class="portfolio_div">
  <h2 class="h2portfolio">Portfolio</h2>
<div id="portfolio1">
<h2 class="h2portfolio1">Feesten</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio1"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio2">
<h2 class="h2portfolio2">Kunst</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio2"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio3">
<h2 class="h2portfolio3">Overige</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio3"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
</div>

I have given margin-top to h2portfolio class.

Here is JSFiddle

Hope this helps.

Upvotes: 1

Molarosa
Molarosa

Reputation: 69

Just add to your class ".h2portfolio":

.h2portfolio {
  background-color: white;
  text-align: center;
  color: #F16C20;
  margin-top: 100px;
  padding-bottom:15px;
  //line new added
  float: left;
  width: 100%;
  margin-top: 100px;
}

Upvotes: 0

Pravin Vavadiya
Pravin Vavadiya

Reputation: 3207

Just Add margin-top: 100px; and padding-bottom:15px; style in .h2portfolio class as you need.

.h2portfolio {
background-color: white;
text-align: center;
color: #F16C20;
margin-top: 100px;
padding-bottom:15px;
}

#portfolio1 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio2 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}
#portfolio3 {
width: 33.33%;
float: left;
text-align: center;
display: block;
}

.portfolio1 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio2 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
.portfolio3 {
margin-top: 7.5%;
margin-right: 7.5%;
margin-left: 7.5%;
margin-bottom: 7.5%;
width: 85%;
}
<h2 class="h2portfolio">Portfolio</h2>
<div id="portfolio1">
<h2 class="h2portfolio1">Feesten</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio1"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio2">
<h2 class="h2portfolio2">Kunst</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio2"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>
<div id="portfolio3">
<h2 class="h2portfolio3">Overige</h2>
<a href="http://interlaser.webovo.nl"><img class="portfolio3"src="http://interlaser.webovo.nl/wp-content/uploads/2017/01/cropped-cropped-maxresdefault-300x204.jpg"></a>
</div>

Upvotes: 0

Related Questions