I have a banner that I am trying to add a text to the bottom portion of it. I got the text centered and how I want to be, but when I want to move the text to the bottom of the page, the picture moves too.
HTML
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
CSS
.art-banner { background-image: url("graphics/art_banner.jpg"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { text-align: center; padding-top: 10px; font-family: "Bender";}
.art-banner-text span { color: #eb6623; }
JSFiddle
Presuming you're trying to use margin-top to move the art-banner-text down, you're running into the collapsing margin problem: the margin is shared between the inner div and the outer one, meaning the outer one gets the margin too.
So the solution is not to use margins, but position:relative for the outer div and position:absolute for the inner one, with bottom:0 to position it at the bottom of the outer one.
.art-banner {
background-image: url("https://photos-2.dropbox.com/t/2/AAAtS4UXAnyf0x4vH0ty5lE779vFfS2smjUWyJFsFwnMPg/12/18401260/jpeg/32x32/1/1437685200/0/2/art_banner.jpg/COyP4wggASACIAMgBCAFIAYgBygBKAIoBw/L9JVtmzn-g-n3CMbDujkZkXxzuwR9ntwvtEoBLNl_4g?size=1024x768&size_mode=2");
height: 150px;
position: relative;
}
.art-banner-text {
width: 940px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
}
.art-banner-text h2 {
text-align: center;
padding-top: 10px;
font-family: "Bender";
margin: 0;
}
.art-banner-text span {
color: #eb6623;
}
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
(Note that I had to change the URI for the image, to make it show up. What you had was the URI for the dropbox page that displays the image, not the image itself.)
You need to have the outer container ( which is .art-banner-text) set to position:relative; and set the inner div or element to absolute to place it where you want. https://jsfiddle.net/2ryrnxz7/
<div class="col_one art-banner">
<div class="art-banner-text">
<h2>what do <span>you</span> want to learn?</h2>
</div>
</div>
css
.art-banner { background-image: url("https://www.dropbox.com/s/migdkqlmse8ym0t/art_banner.jpg?dl=0"); height: 150px;}
.art-banner-text { width: 940px; height: 50px; position: relative; background-color: rgba(0,0,0,0.5); }
.art-banner-text h2 { font-family: "Bender"; margin: auto 0; padding:0px; bottom:0px; position:absolute; left:35%}
.art-banner-text span { color: #eb6623; }
You can set the left to whatever % you want to push towards the middle. This won't work for mobile as it is set and won't reposition itself with the page. But if you just need it to work for desktop, this is how to do it.
It sounds like you might want to use CSS positioning. For example .art-banner {position: relative;} .art-banner-text {position: absolute;} You can then position, move, or animate the text in the inner div without affecting the outer div.
Related
I want to absolute position a div but it is not sticked to the top but has a blank space. Container has position:relative and inner block has position:absolute css rules. I tried to play with the code and noticed that changing background-position has some effect and I have no idea why.
<header>
<div class="header-wrapper">
<div class="header-slogan-1 text-center">Base info</div>
<div class="header-info">Info</div>
</div>
</header>
What I want is to have the green block at the top (see fiddle).
Here is the fiddle
Please can anyone explain the behaviour and answer why the block is shifted from the top?
It is shifted from the top, because it is relative to its parent .header-wrapper, that has a top margin. In order to get the desired result, you have to remove position: relative from its parent, therefore it will be relative to the viewport and will be placed at the top.
Edit: I realised, that he margin is actually applied to the child of the wrapper, causing margin collapsing. In order to fix this, you need apply overflow: auto to the parent element. By doing that, you can still have a position: relative on the wrapper, as it is not pushed down by the child. Take a look at the demo:
/* header block */
header {
height: 536px;
background-color: #ddd;
background-position: center;
background-size: 100% 536px;
background-repeat: no-repeat;
overflow: hidden;
}
header .header-wrapper {
position: relative;
overflow: auto;
z-index: 2;
}
.header-slogan-1 {
font-size: 32px;
font-weight: 700;
font-style: italic;
margin-top: 88px;
}
.header-wrapper .header-info {
position: absolute;
top: 0;
z-index: 3;
background-color: #4caf50;
max-width: 600px;
padding: 25px 25px 25px 75px;
color: #fff;
}
.text-center {
text-align: center;
}
<header>
<div class="header-wrapper">
<div class="header-slogan-1 text-center">Base info</div>
<div class="header-info">Info</div>
</div>
</header>
If I'm understanding this correctly, you want the header to have no space around it. If this is the case, then just add
body {
margin: 0;
padding: 0;
}
to the top of your css and you should be all set.
I changed margin-top: 88px; into padding-top: 88px; of header-slogan-1 as it does not change my layout. I have an image in wrapper class and it is centered and may exceed the container size, so I need position:relative and overflow:hidden.
Finally I decided to pick my solution. Sorry Adam for not choosing your answer.
I have a fixed a button at the right of a bootstrap container.
But in high resolution, the button moves outside of the bootstrap container as it is fixed relative to body, not container.
Note: It must be fixed (not absolute) because I don't want it to scroll with window.
Here is the code:
<div class="body">
<h1>Body</h1>
<div class="container">
<h1>Container</h1>
Enquire Now
</div>
</div>
CSS:
.fixed-btn {
padding: 10px 20px;
background: #000;
color: #FFF !important;
text-decoration: none !important;
line-height: 30px;
position: fixed;
right: 70px;
top: 50px;
}
.body {
background: aquamarine;
min-height: 1000px;
}
.container {
background: antiquewhite;
min-height: 1000px;
max-width: 400px;
}
Is it possible to make it fixed within a bootstrap container? so it would not move outside of the container.
Look a live code at JSFIDDLE.
One possibility is to position the fixed element using calc
.fixed-btn {
position: fixed;
left: calc(50% + (400px/2)) ;
}
In this case the 400px (from your demo) would be the width of the container based on the various widths in Bootstrap.
You would have to adjust this in each media query.
JSfiddle Demo
I have a div called #text, inside another div #box. Right now I've tried to center #text by doing this:
#box {
width: 50%;
#text {position: relative; margin-left: 48%;}
}
This code puts #text approximately in the center of #box, but when I resize the screen, the size of #text changes relative to the size of the screen, so the size of its margin-right changes, and it is no longer exactly in the center.
I've heard there is a "hack" for this involving a few wrapper divs, but I don't want to overcomplicate my css or html. Is there a simple way to horizontally position a div exactly in the center of its parent?
Using flexbox is IMO the best way to center child horizontaly and verticaly. Its support is good.
First off the CSS you posted is not valid. You can accomplish what you are looking for with something like this:
CSS
body {
width:100%;
height: 100%;
margin: 0;
padding: 0;
}
#box {
width:100%;
height: 500px;
background: lightblue
}
#test {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto
}
HTML
<div id="box">
<div id="test">
hello
</div>
</div>
See the JS.Fiddle
use margin: 0 auto; in the css of #text
You want exact center of page, regardless of content? Do something like this:
p {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Relative to the parent, set the following attribute on the container for your element:
div.containerOfPs {
position: relative;
}
Consider this fiddle: http://jsfiddle.net/qkAJD/
HTML
<div style="width:500px;">
<h1 class="success-header" title="Success!">Success!</h1>
</div>
CSS
body {
background: gray;
margin:0;
}
.success-header {
color: green;
display: inline-block;
font-size: 50px;
height: 50px;
margin: 0;
}
.success-header:before {
content: attr(title);
position:absolute;
color:rgba(255, 255, 255, 0.3);
top:1px;
left:1px;
}
Result
Question
How can we center the <h1> tag within its container, and still keep the letterpress effect? Assume that we don't know in advance that the container's width is 500px. That is, a solution which hardcodes the position of the header is not acceptable. It's easy enough to center the header:
<div style="width:500px;text-align:center">
<h1 class="success-header" title="Success!">Success!</h1>
</div>
But this destroy's the letterpress effect:
The "shadow" is positioned absolutely with relation to its nearest eligible parent. You can make the immediate parent eligible by adding position:relative to it.
Example: http://jsfiddle.net/qkAJD/5/
.success-header {
color: green;
display: inline-block;
font-size: 50px;
height: 50px;
margin: 0;
position: relative; /* changed line */
}
Absolute - Do not leave space for the element. Instead, position it at
a specified position relative to its closest positioned ancestor or
to the containing block.
Source, emphasis mine.
Just add positon: relative to .success-header, since you already are positioning the shadow absolutely.
.success-header {
...
position: relative;
}
JSFiddle example.
#sponsors {
float: right;
display: inline;
width: 728px;
height: 100px;
margin: 60px 11px 0;
}
<div id="sponsors">
<img src="images/sponsors/1.png">
<img src="images/sponsors/2.png">
</div>
I can't move images to the right side of div with this, but div align="right" works.
How can I set images to right side using css3?
Change the display to block and add text-align:right
#sponsors {
float: right;
display: block; /* or remove this line, as block is default for div */
width: 728px;
height: 100px;
margin: 60px 11px 0;
text-align: right;
}
Display inline doesn't make much sense on elements with a width and a height sepcified. I assume you want the browser to respect your width and height so display should be block, or be removed completely as it is a div element which implies display:block by default. Then you want the elements inside the div to align to the right, which you do by applying text-align.
Try this:
#sponsors a img {
float:right;
}
Currently you are floating the sponsors div to the right, instead of the images inside the sponsors div. Target the images to float them, and it should work for you.
The images themselves need to be floated or their parent element needs to have its text alignment modified.
Floated: http://jsfiddle.net/MAz4Q/1/
#sponsors {
width: 728px;
height: 100px;
margin: 60px 11px 0;
}
#sponsors img {
float: right;
}
Aligned: http://jsfiddle.net/MAz4Q/2/
#sponsors {
width: 728px;
height: 100px;
margin: 60px 11px 0;
text-align: right;
}