Right now I have an absolute element, so that they're absolute positioned in relation to the bigger element. This works correctly:
.wrapper {
position: absolute;
left: 65px;
top: 6%;
max-width: 76%;
}
Inside this is up to 3 relative elements (two in example), as I want them to stack as you see in the image (if they have more than one). Which works perfectly.
Code of top box:
/* obtain box */
.obtainbox {
position: relative;
left: 61px;
background-image:
linear-gradient(to bottom, #00e887EA, #BBBBBB00 13px),
url("tbox2.png");
background-size: cover;
color: black;
text-align: left;
font-size:40px;
padding-top: 4px;
padding-bottom: 4px;
padding-left:40px;
padding-right: 7px;
z-index: 1;
margin-bottom: 25px;
border-bottom-right-radius: 25px;
}
Code of bottom box
/* play box */
.playbox {
position: relative;
left: 60px;
background-image:
linear-gradient(to bottom, #14d5f1EA, #BBBBBB00 13px),
url("tbox2.png");
background-size: cover;
color: black;
text-align: left;
font-size:40px;
padding-top: 7px;
padding-bottom: 10px;
padding-left:40px;
padding-right: 7px;
z-index: 1;
border-top-right-radius: 25px;
}
HTML Code
<div class='wrapper'>
<div class='obtainbox topcard '>
<div class='lefticon'><img src='ObtainV2_150px.png' style='width:100px'></div>
<img src='Time_150px.png' style='width:42px; position: relative; top: 9px;'>
</div>
<div class='playbox endcard'>
<div class='lefticon'><img src='Play_150px.png' style='width:100px'></div>
<img src='Time_150px.png' style='width:42px; position: relative; top: 9px;'> for each play you've used this turn. <i>Includes this.</i>
</div>
</div>
My problem is I want the top box to have an indepedent width from the bottom box, in this image the box would be padding to the right of the top hourglass, instead of the auto size from the parent.
Example image of it auto sizing correct from parent:
Add width: fit-content; to .obtainbox class.
Codepen: https://codepen.io/manaskhandelwal1/pen/NWRLxQg
Related
I placed my absolute positioned element inside a div with a relative position, but it won't seem to recognize it as parent.
#picture {
position: relative;
top: 55px;
width: 100%;
height: 100%;
background-image: url(../images/homepage.jpg);
background-size: 100%;
background-repeat: no-repeat;
}
#picturecredit {
position: absolute;
bottom: 0px;
right: 0px;
color: grey;
padding-right: 8px;
font-size: 11;
}
<div id="picture">
<div id="picturecredit">
<p> Foto: Name </p>
</div>
</div>
Change the height of the relative #picture so it doesn't default to 0px.
#picture {
position: relative;
top: 55px;
width: 100%;
height: 100px;
background-image: url(../images/homepage.jpg);
background-size: 100%;
background-repeat: no-repeat;
}
#picturecredit {
position: absolute;
bottom: 0px;
right: 0px;
color: grey;
padding-right: 8px;
font-size: 11px;
}
<div id="picture">
<div id="picturecredit">
<p> Foto: Name </p>
</div>
</div>
Check the height of the relative div, it needs an explicit unit (px, in, rem). Also, as j08691 said, don't forget to set a css unit to font-size property in #picturecredit (it just has 11 of nothing).
Alright, I am trying to make it so all of these items are centered into their own spaces. Attached is the current state as well as what it should look like...
HTML:
<div class="fhNav" id="nav">
<div class="homeBtn">
</div>
<div class="forumsBtn">
</div>
<div class="applyBtn">
</div>
<div class="mttBtn">
</div>
<div class="shopBtn">
</div>
<div class="supportBtn">
</div>
</div>
CSS:
.fhNav {
width: 893px;
height: 90px;
background: url(../images/navBack.png);
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
padding-right: 10px;
padding-bottom: 40px;
background-repeat: no-repeat;
display: flex;
align-items: center;
}
.homeBtn{
width: 169px;
height: 67px;
position: relative;
margin-left: 12px;
background: url("../images/navbtn/homebtn.png") no-repeat;
background-repeat: no-repeat;
margin-bottom: 22px;
margin-top: 24px;
}
.homeBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.homeBtn a:hover{
background: url(../images/navbtn/homebtnhover.png);
background-repeat: no-repeat;
}
.forumsBtn{
width: 150px;
height: 67px;
position: relative;
margin-left: -6px;
margin-right: 13px;
background: url("../images/navbtn/forumsbtn.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 24px;
}
.forumsBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.forumsBtn a:hover{
background: url(../images/navbtn/forumsbtnhover.png);
background-repeat: no-repeat;
}
.applyBtn{
width: 137px;
height: 67px;
position: relative;
margin-left: 5px;
margin-right: auto;
background: url("../images/navbtn/applybutton.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 24px;
}
.applyBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.applyBtn a:hover{
background: url(../images/navbtn/applybuttonhover.png);
background-repeat: no-repeat;
}
.mttBtn{
width: 195px;
height: 70px;
position: relative;
margin-left: auto;
margin-right: auto;
background: url("../images/navbtn/mttbutton.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 27px;
}
.mttBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.mttBtn a:hover{
background: url(../images/navbtn/mttbuttonhover.png);
background-repeat: no-repeat;
}
.shopBtn{
width: 180px;
height: 70px;
position: relative;
margin-left: auto;
margin-right: auto;
background: url("../images/navbtn/shopbutton.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 27px;
}
.shopBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.shopBtn a:hover{
background: url(../images/navbtn/shopbuttonhover.png);
background-repeat: no-repeat;
}
.supportBtn{
width: 180px;
height: 70px;
position: relative;
margin-left: auto;
margin-right: auto;
background: url("../images/navbtn/supportbutton.png") no-repeat;
margin-bottom: 22px;
background-repeat: no-repeat;
margin-top: 27px;
}
.supportBtn a{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.supportBtn a:hover{
background: url(../images/navbtn/supportbuttonhover.png);
background-repeat: no-repeat;
}
current
It should look (somewhat like) this...except obviously with the other tabs in it.
Edit: I have been messing with this for a few hours and I just can't figure it out...
I know this doesn't exactly answer your question but I think you'll find this approach simpler :)
View the snippet in Full Page, the little snippet container isn't big enough.
Instead of using background images for the buttons, I would suggest just nesting an <img ...> tag in your links. Why?
Because then the container, (in this case the li) will grow to match the image perfectly. Now you don't have to set the width and height of each button, they will grow according to the image size.
To enable the different image to show up on hover, I would use the css selector :hover to change the opacity of the image to and from 0 and 1. Additionally, the hover image should be positioned to absolute so it can appear in the same place as the non-hover image.
You'll have to mess with the css a little more but I would recommend this approach over setting the width and height of your button individually.
Best of luck
Edit:
Could you possibly explain it a little bit more though, as I would like to learn, not just take spoons? :)
Sure,
The first thing I'm doing with this HTML structure is nesting a ul with li tags inside of a nav element. The nav tag doesn't do anything that a div doesn't--it just has a better semantic name. The same thing goes for the ul and li tags. I'm just using those because your links represent a an <unorderedl>ist with some <listi>tems.
the next item to address is the styling applied to the nav element. In particular, I apply three css properties:
display: flex;: this sets the display mode to flexbox.
align-items: center;: this make the flexbox vertically center the elements inside
justify-content: center;: this makes the flexbox horizontally center the elements inside. I would recommend css-tricks flexbox tutorial because flexbox is great layout tool.
All in all, this just center's the nav.
the next set styles apply to any ul inside of a nav element. This works by using the element element selector out of the many possible css selectors. The style of styles:
list-style-type: none; removes the bullet points
background: url(...); sets the background image. we want to use a background image for this element because the background element should grow or shrink with the element. This is also what background-size: cover; does
padding: 11px; and margin: 0; sets the padding and margin. See the difference between the two here.
the set of css is simple, it adds a margin of 1px to the right of an li inside of ul inside of a nav. Your image seems to have a 1 px border, so I added this margin to match though I would recommend remove the white spaces in your background because changes in the order of your navigation will break the background image
the next set of styles apply to nav ul a which are the anchor tags inside of a ul inside of navs. The position is set to relative here so that you can use position: absolute the elements inside it.. This is a big "ah-ha" moment for users first learning css.
up next is the nav__img--hover and nav__image--normal style. The nav__image--hover uses absolute positioning to position it absolutely to the parent element. Notice that the nav__image--normal doesn't use absolute positioning. We want at just one of the elements positioned normally but we want the other to be positioned absolutely.
last but not least there is the :hover selectors that simply change the opacity of the elements to and from 0 and 1 making them completely visible and hidden. You might also be able to use the visibility instead but opacity works fine.
Anyway, that's it. Hope it works for you!
nav {
display: flex;
align-items: center;
justify-content: center;
}
nav ul {
display: flex;
list-style-type: none;
margin: 0;
background: url(https://www.factionhouse.org/images/navBack.png);
background-size: cover;
padding: 11px;
}
nav ul li {
margin-right: 1px;
}
nav ul a {
display: flex;
position: relative;
}
.nav__img--hover {
top: 0;
left: 0;
position: absolute;
opacity: 0;
}
.nav__img--hover:hover {
opacity: 1;
}
.nav__img--normal:hover {
opacity: 0;
}
<nav>
<ul>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/homebtn.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/homebtnhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/forumsbtn.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/forumsbtnhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/applybutton.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/applybuttonhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/mttbutton.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/mttbuttonhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/shopbutton.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/shopbuttonhover.png">
</a>
</li>
<li>
<a href="https://www.factionhouse.org">
<img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/supportbutton.png">
<img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/supportbuttonhover.png">
</a>
</li>
</ul>
</nav>
try using % to make it easier to determine because its out of 100.
margin-left: 6%;
also padding only pushes the elements inside towards the center
or put them all into a div and in the parent div use
float: left;
to push the images aligned from left to right
Hopefully this should help out. I've given all your buttons a common class, so you can add in styles that will apply to all of them. You can apply a common background to all of them that way. And I've given them all a percentage width so they should fit their parent div.
I'd also reconsider baking the text into the image and putting it directly into the HTML instead - easier to edit.
HTML:
<div class="fhNav" id="nav">
<div class="btn homeBtn">
Home
</div>
<div class="btn forumsBtn">
Forums
</div>
<div class="btn applyBtn">
Apply
</div>
<div class="btn mttBtn">
Meet the Team
</div>
<div class="btn shopBtn">
Shop
</div>
<div class="btn supportBtn">
Support
</div>
</div>
CSS will then look like this:
.fhNav {
width: 893px;
height: 90px;
background: crimson;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
text-align: center;
}
.btn {
width: auto;
height: 100%;
border: 1px solid red;
position: relative;
width: 17%;
vertical-align: text-top;
}
.btn a {
display: block;
color: #FFFFFF;
font-family: Helvetica;
text-decoration: none;
position: relative;
/* The top position and the transforms will ensure the a tag is vertically centred in it's parent div */
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
I've made a Pen where you can see it working:
https://codepen.io/anon/pen/wdzvRZ
Hopefully that helps you a little bit. :)
try using the % like 100% in the margin
If you are using bootstrap, you can use directly class "container".
There is a parent container of relative width (50%) so that it responds to the size of the screen.
Now, I want a button at the bottom right corner of this parent container which stays fixed vertically. It works with position: fixed but then when i view it on different devices, i cannot get it to be positioned horizontally.
This is my html and CSS
<div class="container">
<div class="button"></div>
</div>
.container {
position: relative;
height: 2000px;
width: 40%;
margin: 0 auto;
background: yellow;
}
.button {
height: 50px;
width: 50px;
background: red;
position: fixed;
bottom: 20px;
right: calc(50% - 190px);
}
Here is the link to codepen http://codepen.io/anon/pen/VmggdO
This looks fine but when you resize the screen horizontally, the button should stay just 30px inside of the yellow container horizontally - How do i achieve that? REMEMBER - THE BUTTON NEEDS TO STAY FIXED VERTICALLY WHEN YOU SCROLL!
Using position absolute worked for me
.button {
height: 50px;
width: 50px;
background: red;
position: absolute;
bottom: 20px;
right: 30px;
}
EDIT:
With the new requirements of "THE BUTTON NEEDS TO STAY FIXED VERTICALLY WHEN YOU SCROLL", this can be achieved by changing the html to this:
<div class="container">
</div>
<div class="button-container">
<div class="button"></div>
</div>
and the CSS to this:
.container {
position: relative;
height: 2000px;
width: 40%;
margin: 0 auto;
background: yellow;
}
.button {
height: 50px;
width: 50px;
background: red;
margin-bottom: 20px;
float: right;
margin-right: 30px;
z-index: 100;
}
.button-container{
position: fixed;
bottom: 0px;
width: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
See the updated code pen: http://codepen.io/anon/pen/mOvvgJ
So, I have a main container that shows like the following:
I want to be able to adapt the parent div to the number of child's it receives. Let's say we remove div2. The result should be something like this:
Instead, the parent div does not stretch to the width of the div child's
Here's my code:
HTML:
<div class="main-container">
<!-- Card container -->
<div class="card-container">
<div class="card">div1</div>
<div class="card">div2</div>
<div class="card">div3</div>
</div>
<!-- Footer container -->
<div class="footer">i am a footer</div>
</div>
CSS:
.main-container {
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 400px;
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align:center;
}
.card-container {
color: #3B3D3D;
height:105px;
float: left;
width: 100%;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
float: left;
width: 100%;
}
.card {
width:100px;
float:left;
}
What am I doing wrong here? I've tried the display: inline-block; solutions out there but since the parent div must be fixed to the bottom, I am not seeing the desired result.
Any help will be precious.
Thanks in advance.
Try this https://jsfiddle.net/2Lzo9vfc/136/
You can try to remove one .card on click and see what hapens here https://jsfiddle.net/2Lzo9vfc/138/
CSS
.main-container {
position: fixed;
margin: 0 auto;
left: 50%;
bottom: 0;
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align:center;
display: inline-block;
transform: translateX(-50%);
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
width: 100%;
}
.card {
width:100px;
height:105px;
display: inline-block;
}
HTML
<div class="main-container">
<div class="card">div1</div>
<div class="card">div2</div>
<div class="card">div3</div>
<div class="footer">i am a footer</div>
</div>
Here you go: http://codepen.io/n3ptun3/pen/PPgWNb
You don't need to use display: inline-block.
I've left your HTML alone, and simplified some of your CSS: .card-container and .footer don't need float: left; and width: 100%;. They are both block-level elements so they will take up 100% of the width, and they don't need anything to wrap around them.
On the .main-container, you can't set margin: 0 auto; and position: fixed;. position: fixed; removes the ability for centering via margin. left: 0; and right: 0; were stretching the size of the main container, so those need to be removed. width: 100%; and max-width: 400px; were trying to fix the width issue, but that wouldn't allow resizing based on content.
Instead you need to set left: 50%; (places left edge of element at 50% of the parent's width, i.e. the viewport width, in this case) and then transform: translate(-50%); to bring the element back toward the left by 50% of its width. Thus bringing the element to the center of the window/viewport.
Now, if you remove one of the "cards," it will resize the "main-container," while keeping everything fixed to the bottom and centered.
.main-container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%);
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
}
.card-container {
color: #3B3D3D;
height: 105px;
}
.card {
width: 100px;
float: left;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
}
EDIT: Based on your new information (re: the increased width or added "cards"), I've found that the issue lies with the left position on the .main-container. When you position the element by 50% and its width is more than 50% of the parent, it runs into the right side of the parent div, and you get the stacking. To fix this, you can instead remove the float: left; on .card and add display: flex; on .card-container. This will allow you to increase the width of the "cards" while keeping them from stacking.
I've updated the code here: http://codepen.io/n3ptun3/pen/PPgWNb
.main-container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%);
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
}
.card-container {
color: #3B3D3D;
height: 105px;
display: flex;
}
.card {
width: 100px;
// float: left;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
}
I wanna make overlay background image to image. the code is here.
How can I put background image over img element?
my html is;
<div id="sidebar">
<div class="editor-select">
<img src="http://i.imgur.com/mh3noQH.jpg" alt="img"/>
</div>
</div>
my css is;
#sidebar{
width: 344px;
background: url("http://i.imgur.com/BQc7nYP.png") no-repeat top right !important;
float: left;
height: 500px;
margin-top: 45px;
padding: 8px;
position: relative;
z-index: 1000;
}
.editor-select{
width: 350px;
height: 360px;
position: relative;
}
.editor-select>img{
width: 320px;
height: 160px;
z-index : -1;
}
You can't. Your img element is contained within the #sidebar element, which effectively makes the img element on top of the #sidebar element. You cannot position a parent element on top of its child.
Pure CSS Solution
What you can do, however, is use a pseudo-element (:before or :after), positioned on top of your img element (which I've offset by 6px on all 4 sides to allow the image to overlap properly):
.editor-select:after {
content: '';
position: absolute;
top: -6px;
left: -6px;
height: 172px;
width: 332px;
background: url("http://i.imgur.com/BQc7nYP.png") no-repeat top right
}
CodePen Demo.
You can't have a background for a given element above the element contents .... You'll need to make some adjustments to your markup.
I forked your pen: http://codepen.io/anon/pen/ipmDv
This is your new HTML:
<div id="sidebar">
<div class="overlay"></div>
<img src="http://i.imgur.com/mh3noQH.jpg" alt="resim"/>
</div>
And your new CSS:
#sidebar{
width: 344px;
float: left;
height: 500px;
margin-top: 45px;
padding: 8px;
position: relative;
z-index: 1000;
}
.overlay{
width: 116px;
height: 116px;
position: absolute;
z-index:1000;
background: url("http://i.imgur.com/BQc7nYP.png") no-repeat top right !important;
top:0px;
right:25px;
}