Why is there no margin applied to the bottom/top?

Off Topic > Off Topic

(1/2) > >>

espio100:
Need HTML help once again because honestly forget this code

basically I cant get a margin at the bottom. Padding works however but it doesnt extend the black box

html

--- Code: --- <div class="banner container-fluid">
<div class="bannerimage">
<img class="img-responsive" src="http://tremendouswallpapers.com/wp-content/uploads/2014/11/140323_Underwater-Fish-Cool-Wallpapers-Beautiful-Jelly-HD_1920x1200.jpg">
</div>
<div class="bannertext">
<h1>Lorem ipsum</h1>
<a href="#">Dolor sit amet</a>
</div>
</div>
--- End code ---

css

--- Code: ---.bannerimage {
position: relative;
height: 600px;
overflow: hidden;
}
.bannertext {
position: absolute;
top: 200px;
left: 0px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
margin-left: 250px;
padding-right: 30px;
padding-left: 15px;
color: white;
text-decoration: none;
}
.bannertext h1 {
margin-top: 10px;
margin-bottom: 0px;
}
.bannertext a {
color: white;
margin: 20px;
}
.bannertext a:hover {
color: red;
text-decoration: none;
}
--- End code ---

Also not that it matters but the layout is ass because the webpage is so small

Foxscotch:
no clue what you're trying to say dude. what's the problem? what is it supposed to look like?

Steve5451²:

--- Quote from: Foxscotch on February 19, 2017, 01:23:37 PM ---no clue what you're trying to say dude. what's the problem? what is it supposed to look like?

--- End quote ---

Master Matthew²:
.bannertext supercedes the styles you gave to the individual tag you're showing there.

You only have left and right padding because .bannertext only has left and right padding.

--- Code: ---.bannerimage {
position: relative;
height: 600px;
overflow: hidden;
}
/* v This peice of code here supercedes... v */
[b].bannertext {
position: absolute;
top: 200px;
left: 0px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
margin-left: 250px;
padding-right: 30px;
padding-left: 15px;
color: white;
text-decoration: none;
}[/b]
/* v ...this piece of code here v */
.bannertext h1 {
margin-top: 10px;
margin-bottom: 0px;
}
.bannertext a {
color: white;
margin: 20px;
}
.bannertext a:hover {
color: red;
text-decoration: none;
}
--- End code ---

espio100:

--- Quote from: Foxscotch on February 19, 2017, 01:23:37 PM ---no clue what you're trying to say dude. what's the problem? what is it supposed to look like?

--- End quote ---
in the image at the inspect code part you can clearly see there is 20 pixels of margin applied to every direction. However on the site itself its only applied to the left and right side.
All I want really is a few pixel of space at the bottom where the black background goes a little further then the text and I tried doing so by adding a little bit of margin. Just like I did at the h1 element, where it worked. but somehow it doesnt work at the a element.

Navigation

 Message Index

Go to full version