I need to align the p element to the bottom center of the page but something is wrong. I am making an HTML5 page.
Here is the CSS selector:
p { vertical-align:80px; }
If you need exactly "align the p element to the bottom center of the page"
p {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
demo
but it's not the best solution for most websites. Suppose, you are trying to make footer with some copyright (or year, or your name). In this case you have to use more complicated html and css, that includes main div, footer div, etc.
Please try this:
CSS
html,body{
marign: 0;
padding: 0;
height: 100%;
}
body:after {
content: "";
display: inline-block;
height: 100%;
width: 0;
}
p{
display: inline-block;
vertical-align: bottom;
}
Please view the demo. You will change the vertical-align for p, lay hime at top or middle.
Related
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.
I have a container div and two divs inside it.
I have tried to center align the contents of both divs but for some reason, the 2nd div looks incorrect in relation to the first div.
First inner div aligned like this:
.main-text {
position: absolute;
text-align: center;
color: red;
top: 20%;
width: 100%;
letter-spacing: .6em;
}
Second inner div aligned like this:
.down-arrow {
text-align: center;
width: 100%;
}
.bottom {
color: white;
position: absolute;
top: 50%;
font-size: 2em;
}
Full code with demo of how the 2nd inner div with content "DWN" looks off: http://jsfiddle.net/qbmtap7t/
Not sure what I have done wrong, thanks
You need to move the position and top directives of your .bottom class to the .down-arrow which is the actual container of the bottom text:
.down-arrow {
width: 100%;
position: absolute;
top: 50%;
text-align: center;
}
See Fiddle
Use Css selectors : try editing your Css class .down-arrow like this :
.down-arrow .bottom {
text-align: center;
width: 100%;
}
See the demo :
http://jsfiddle.net/qbmtap7t/3/
Hope it helps.
The style you applied for .bottom, apply it for .down-arrow and it would work. Also, you seem to have a lot of html structure just for a simple link, any specific reason for using a span inside anchor? As a best practice, try to avoid unnecessary markup.
I tried to v-align a image with a text in my link.
Until now I have used a background image to perfectly v-center the image of my text
CSS
.label {
margin: 0 0 0 15px;
padding: 0;
color: #fff;
}
a.moreinfo {
background: url(../images/gallery/add.png) no-repeat left center;
cursor: pointer;
}
HTML
<a class='moreinfo'><span class='label'>MORE INFO</span></a>
Now I want to try not to use background images, but insert an image in the html code (img src). I tried using vertical-align: middle, but the image is not aligned precisely like the one in the background. How could I do to get the same thing with an image included in the html code? thanks
Here is how you can center an element in another:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
You can find more in this link: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ .
I've found something like this to work very well for me:
a.moreinfo {
display: table;
width: 100%;
}
a.moreinfo span, a.moreinfo img {
display: table-cell;
vertical-align: middle;
width: 50%;
float: none;
}
When you vertically align while setting display to table, floated elements won't work as expected. The parent should have a set width or the default width will set to auto and, again, not work as expected.
I have an "article-box" that is used for a few different pages with 2 different widths. I have an image that i would like to display in the top right hand corner of each of these boxes. how could i use css to display the image correctly in the top right hand corner for each box?
i have the following css code which doesn't quite work, thanks in advance.
.wide-article-box {
#extend .article-box;
padding: 20px;
max-width: 900px;
#badge {
position: relative;
max-width:260px;
}
#badge img {
position: absolute;
border-width: 0px;
}
}
and in the view
<div class="wide-article-box">
<!--text etc -->
<div id="badge">
<%= image_tag "BLH_BADGE.png" %>
</div>
</div
.wide-article-box {
#extend .article-box;
padding: 20px;
max-width: 900px;
position: relative;
#badge {
position: absolute;
top: 0;
right: 0;
max-width:260px;
}
#badge img {
border-width: 0px;
}
}
You can look into the float property of CSS. It will also automatically wrap text around the image (or any block element).
#badge {
float: right;
max-width: 260px;
}
P.S. you might also have to use clear css property but that will depend on the nature of the DOM. just read up on on float and clear properties
I swear I've seen people add multiple background images to an element using the :after selector. For whatever reason, I can't get it to work. What am I doing wrong? Can anyone point me to a working example?
#el li { background:url(image1.jpg) top center;}
#el li:after { background:url(image2.jpg) bottom center;}
Thanks!
As Blender notes, there is some type of dom node added as content to the end of the element's content. However, you also need to provide some kind of content AFAICT to make it work.
<ul id="el">
<li>Hello world</li>
</ul>
#el li {
background:url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG) top center no-repeat;
width: 200px;
height: 200px;
overflow: hidden;
}
#el li:after {
background:url(http://www.gravatar.com/avatar/05a3a91994b86e4e45246b57b0ec3c7d?s=128&d=identicon&r=PG) bottom center;
content: " ";
display: block;
position: relative;
height: 500px;
z-index: -100;
}
http://jsfiddle.net/QhUsS/
:before and :after always need the following:
{
content: '';
}
With CSS3 it could be done by
#el li {
background: url(image1.jpg), url(image2.jpg);
background-position: top center, bottom center;
background-repeat: no-repeat;
}
You can do it, but I've never tried. :after seems to create an inline-like element after your element. You can try adding this CSS (no idea if it works):
display: block;
position: relative;
top: -200px;
height: 200px;
width: 200px;