This question already has answers here:
How do I get a div to float to the bottom of its container?
(37 answers)
Closed 8 years ago.
I'm having an issue with my html / css. I want to have a "learn more" box in every one of my three sections, located at the bottom middle of each one.
http://jsfiddle.net/9uxGq/4/
CSS
#learn {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
background-color: rgba(255, 255, 255, 0.6);
z-index:1;
margin-bottom: 20px;
left:50%;
width: 150px;
margin-left: -75px;
text-align: center;
line-height: 50px;
}
#learn a {
color: black;
font-weight: bold;
}
It seems to work fine in the top box:
<div id="learn">Learn More
However in the section below I use pretty much the same code:
<section id='a1' style="height:100%;background-color:white;">
<div class="container"></div>
<div id="learn">Learn More
</section>
However this time the learn more box doesn't appear. What is it I am doing wrong? I have played around with position: relative without much luck.
TLDR: The learn more box should be at the bottom middle of the header and sections, it only appears in the header.
P.s I tried to strip down my code and css but didn't want to strip out any more as I believe its inclusion will highlight which options will / wont work.
Add this to your CSS:
section {
position: relative;
}
Demo: http://jsfiddle.net/9uxGq/5/
Related
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 3 years ago.
I am trying to center the disc in the middle of the page overlapping my left and right div. The way I have found to do it is using the below code however, the disc shoots off the page to the right when I do. Please can someone help me understand why as I have googled and watched YouTube videos and they say this is how you do it. It is even working in the YouTube video but not for me. I am really stuck.
body {
margin: 0;
}
.container {
height: 100vh;
display: flex;
}
.left {
width: 50vw;
display: relative;
background-color: #abc;
}
.right {
width: 50vw;
background-color: #687;
}
.disc {
width: 16em;
height: 16em;
border-radius: 50%;
background-color: black;
position: absolute;
top: 50%;
right: -8em;
transform: translateY(-50%);
}
<div class="container">
<div class="left">
<div class="disc"></div>
</div>
<div class="right"></div>
</div>
If I understood correctly you want to position the disc in the middle horizontaly.
If that's the case, you can use the right property in conjunction with the CSS calc function to get the desired behavior, like this:
...
.disc {
...
right: calc(50vw - 8em);
...
}
...
Where vw stands for viewport width and 8em is half of the disc width.
You can see the complete code here.
To position a child element, the parent element need to have a position attribute (position: relative; atleast) for its childs to inherit. That is why your .disc element went off to the right.
So simply add
position: relative;
to the parent elements, the .left and .right class
I hope this helps
This question already has answers here:
CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
(37 answers)
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 3 years ago.
So, I am trying to achieve this:
I know this looks like an already asked question but I have tried all the available solutions of stackoverflow.
My current structure is:
HTML:
<div class='app'>
<div class='content'>Content</div>
<div class='footer'>Footer</div>
</div>
CSS:
.app{
text-align: center;
background-color: #1a1f25;
min-height: 100%;
width: 100%;
position: relative;
overflow-y: auto;
top: 0;
}
.footer{
color: lightgray;
padding: 10px 30px;
position: absolute;
width: 100%;
font-size: 10px;
background: black;
bottom: 0;
}
Update: I tried checking the answer given here, but my website is responsive and that answer is for those footers which have fixed height. Which makes it difficult to convert that solution for my usecase.
I currently have two divs that I'm trying to use to emulate a drop down tabbed window.
I have content where the grayed out areas are. The bigger div (the div containing the big gray area or the "window") has a position of absolute, but so does the little div (the tab). I can't figure out how to move the tab so that I can add more tabs. When I do add more tabs, they just sit over the middle tab. I've looked at all the styling in the Elements dev tools, but there aren't other properties that can "shift" the tab left or right. How can I move it over to the left by, say, 200 px?
It is hard to help you without knowing more about your situation and seeing the code. But I made a couple illustrations to try and help you.
Example one.
This is how I would do it without position absolute. This way will keep the content area up top but will stack the tabs from left to right as you add more,
html
<div id="content">
</div>
<div id="tab1" class="tab">
</div>
<div id="tab2" class="tab">
</div>
<div id="tab3" class="tab">
</div>
css
#content {
background-color: gray;
width: 100%;
height: 200px;
}
.tab {
width: 100px;
background-color: gray;
height: 50px;
display: inline-block;
}
Output
This way is using position absolute and here is a jsfiddle.
Once an element has position absolute it can be moved around with directional rules. It starts in the top left corner. To move it now you can add a direction with an amount.
#myElement: {
position: absolute;
top: 20px;
right: 50px;
bottom: 20px;
left: 10px;
}
You can play with these values and watch the element move around the window.
Same html as example 1.
CSS
#content {
background-color: gray;
width: 100%;
height: 200px;
}
.tab {
width: 100px;
background-color: gray;
height: 50px;
display: inline-block;
}
#tab1 {
position: absolute;
left: 8px;
}
#tab2 {
position: absolute;
left: 300px;
}
#tab3 {
position: absolute;
left: 631px;
}
If this does not help you please add your code so I can better understand what you are trying to accomplish. From your question it sounds like you are having trouble using position asbsolute and creating tabs side by side of eachoter under the content. If so I have provided two examples.
1. using position absolute.
2. using display: inline-block.
I am trying to center some text within a banner (classic question I know). This banner is split into 12 columns, and there is a cross icon for closing the window in the left-most column. The text is centering in the available space between the cross icon and the end of the banner, rather than centering within the whole banner width. From the way the code is written I cannot see why it would be doing this. Here's the HTML:
<div class='col-xs-12 banner'>
<a class="navbar-brand cross-link" href="" ng-click="close()">
<img class="cross" src="/components/cross.png" alt="close">
</a>
<h1>{{title}}</h1>
</div>
with CSS:
.banner {
height: 70px;
background-color: red;
h1 {
color: white;
text-align: center;
}
.navbar-brand {
&.cross-link {
padding: 0px;
img.cross {
margin: auto;
width: 70px;
height: 70px;
padding: 29px 28px 27px 28px;
}
}
}
When I inspect this on Chrome, the h1 is quite happily sitting within a full-width container as expected, but the image appears to be shifting it across so that it doesn't center properly. Can you see how to resolve this?
Thanks
You could set the .cross-link to absolute position. Remember to set the container position property to a value different from "static":
.container{ position: relative; }
.cross-link{ position: absolute; left: xxxx; top: xxxx; }
What you are missing is a closing } at the end of your .banner block OR at the end of the css you shared.
This question already has answers here:
Center a position:fixed element
(23 answers)
Closed 9 years ago.
I have an CSS issue specific to Google Chrome. I've done some research but nobody knows how to fix it without Javascript, which I do not want to use because my element will change in the future.
The code is below, if you use it you will see the that the child div goes to the right hand side of the page and if I add the same top an position values to the parents it moves in the opposite direction.
The website will have a lot more content, and I want a centered header where the sidebar and the floated content will disappear behind as you scroll through the page.
<body>
<!--this should not need any css coding till later on after the site is complete-->
<center>
<div class="header_p1">
<img class="header_p1_child" src="header.png"/>
</div>
</center>
and the css is
.header_p1
{
background: white;
width: 750px;
height: 110px;
margin-bottom: 10px;
}
.header_p1_child
{
float: none;
background: white;
width: 750px;
height: 110px;
position: fixed;
top: 0px;
}
You want a centered header fixed to the top of the page such that for longer pages, the content will scroll vertically beneath the header.
Here is the prototype HTML snippet:
<div class="wrapper">
<div class="header">
<img class="banner" src="http://placehold.it/200x100" />
</div>
<div class="content">
<p>Lorem ipsum dolor ...</p>
</div>
</div>
I created a div.wrapper block to define a context for the layout, which has some padding equal to the expected height of the header.
The div.header block contains an image (200x100 px), and div.content holds various text paragraphs.
The layout and styling is defined in the following CSS:
.wrapper {
outline: 2px dotted blue; /** optional **/
/** Top padding so that initially, the content is below the header **/
padding-top: 100px;
}
.header {
height: 100px;
width: 400px; /** Use 100% to fill the width of the page **/
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
background-color: rgba(0,0,255,0.2);
}
img.banner {
display: block;
margin: 0 auto;
}
The .header style declares a height and width, and uses position: fixed to pin the position of the element to the view port. For positioning, top: 0 places the header to the top of the page.
To center the element, set left: 0 and right: 0 and use margin: 0 auto.
Within div.header, you can declare the image to be a block type element and then center it by using margin: 0 auto.
I checked this both in Firefox and Chrome and it works as expected. This relies on CSS 2.1 so it should work in quite a few older browsers, perhaps IE7, but I did not test it, but perhaps someone can do so and comment accordingly.
Fiddle: http://jsfiddle.net/audetwebdesign/q2WRv/
Source: http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
DO NOT USE <center> tag, this is outdated and should be done with CSS
<body>
<div class="header_p1"><img src="header.png"/></div></center>
CSS
.header_p1
{
background: white;
width: 750px;
height: 110px;
padding-bottom: 10px;
position: fixed;
top: 0;
left: 50%; /* Start at 50% of browser window */
margin-left: -325px; /* Go half of width to the left, centering the element */
}
Orignally taken from here In order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the images width. For this example, like so:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}