Below is the CSS code I currently use for <h1> tags to keep them vertically centered within a responsive banner (corrections welcome). What is the simplest way to add an <h2> subtitle within the <h1> title, both within the banner, and additionally have the two headings vertically centered with only a breaking space or similar between them?
.image {
position: relative;
vertical-align: middle;
}
h1 {
font-family: 'Merriweather Sans', sans-serif;
position: absolute;
letter-spacing: 3px;
font-size: 300%;
text-align: center;
bottom: 40%;
width: 100%;
height: 15%;
color: white;
}
If you don't need a specific height on that banner, you might simply use padding:
<header> <!-- with background image -->
<div id="content">
<h1></h1>
<h2></h2>
</div>
</header>
#content {
text-align: center;
padding: 3rem 0;
}
If the banner has a specific height, then you might use transform:
header {
height: 300px;
position: relative;
background-image: url();
}
#content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Related
I have trouble coding a 1px horizontal seperator line with a logo displayed in the center as pure CSS. Should look like this:
Divider with logo centered
There is a problem with multiple instances: When I add more dividers on a single page only one or two will be displayed with a line, the others will just display the logo.
A question about a centered logo was answered here - but none adressed the bug that happens with multiple instances: Divider with centred image in CSS?
Here is a adapted solution out of that discussion, fiddle below.
CSS:
body {
margin: 0;
background: white;
}
header:after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #ccc;
margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}
.logo {
position: relative; /* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 40px;
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
HTML:
<body>
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logo">
</div>
</header>
</body>
The fiddle:
http://jsbin.com/delixecobi/edit?html,css,output
I totally changed the CSS. Give the .logo a position: relative and :after a position: absolute. You are using it for one single header. That's why it didn't work.
body {
margin: 0;
background: white;
}
.logo:after {
content: ' ';
display: block;
width: 100%;
height: 1px;
background: #ccc;
position: absolute;
top: 50%;
margin-top: -1px;
left: -50%;
width: 200%;
}
.logo {
position: relative; /* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 40px;
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logo">
</div>
</header>
Preview
If you want the line not to cross or cut, use a negative z-index.
I found a solution also for my question how to get text centered within the div - thanks to web-tiki for his approach here: Line before and after title over image
In the JSBin I put all together and formatted / commented it a bit to make it easy to work with. You will find:
divider formats with img, text and text in multiple lines
stable in multiple instances
body {
margin: 0;
background: white;
}
.logo:after {
content: ' ';
display: block;
width: 100%;
height: 1px;
background: #ccc;
position: absolute;
top: 50%;
margin-top: -1px;
left: -50%;
width: 200%;
z-index: -1;
}
.logo {
position: relative;
/* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 20px;
/* also padding between line and logo */
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
.logotext {
width: 100%;
margin: 20 auto;
overflow: hidden;
text-align: center;
font-weight: 300;
color: green;
/* color text */
}
.logotext:before,
.logotext:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 20 0 -55%;
/* 2nd no: space text to line on the left */
vertical-align: middle;
border-bottom: 1px solid #ccc;
/* last: color line */
}
.logotext:after {
margin: 0 -55% 0 20;
/* last no: space text to line on the right */
}
span {
display: inline-block;
vertical-align: middle;
}
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logotext">
somesome</div>
<div class="logotext">
somesome</div>
</header>
One major drawback to this solution is that it does not allow the width of the line to be defined to % of the main viewport.
Goal: to center text which is contained in a div and is a sibling of a div that contains the video element.
the problem: I'm using flexbox to see if I can justify the div's content center and align its items center along the vertical axis. It centers along the x-axis nicely, but doesn't center along the y-axis.
Any suggestions?
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
video {
position: fixed;
top: -100px;
}
.text {
z-index: 2;
color: #fff;
font-size: 2em;
text-transform: uppercase;
position: relative;
display: flex;
justify-content: center;
align-items: center;
/*border: 1px solid black;*/
/*height: 100%;*/
}
<div class="container">
<video poster="http://www.thecanyon.com/assets/css/images/grandcanyon1.jpg" muted="true" autoplay="true">
<source src="assets/Homepagevideo.mp4" type="video/mp4"></source>
</video>
</div>
<div class="text">
<p>This is a cool video landing page</p>
</div>
Add width and height 100% to .text then add text-align:center
Codepin
This is the way you should implement it:
.text {
width: 100%;
height: 100%;
text-align: center;
}
1 way for achieving this i.e. centering the text vertically is that by specifying the height of the flex container and setting the "margin" property of your text to "auto" and if you want the text to center along the entire page set the height this way:
.text {
height: 100%;
}
Add the above to the existing styles for the flex container, and add this too:
.text p {
margin: auto;
}
The above can be used to center the text inside the flex container, no matter how high the flex container is in height. This will work with any value for the "flex-direction" property of the flex container.
Flexbox is overkill for your needs, try using position: absolute since you got elements already out of the flow.
Relevant CSS
.text {
z-index: 2;
color: #fff;
font-size: 4rem;
font-variant: small-caps;
text-align: center;
min-height: 4em;
width: 100vw;
position: absolute;
top: calc(50% - 2em);
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
video {
position: fixed;
top: 0;
}
.text {
z-index: 2;
color: #fff;
font-size: 4rem;
font-variant: small-caps;
text-align: center;
min-height: 4em;
width: 100vw;
position: absolute;
top: calc(50% - 2em);
}
<div class="container">
<video poster="http://www.thecanyon.com/assets/css/images/grandcanyon1.jpg" muted="true" autoplay="true">
<source src="assets/Homepagevideo.mp4" type="video/mp4"></source>
</video>
</div>
<div class="text">
<p>This is a cool video landing page</p>
</div>
I wish to center my font icon at the bottom of the div. I know that I could have it positioned absolute to the background and use bottom:0 but I can't get margin:auto to center it either side.
Here is my code:
<section>
<p><i class="fa fa fa-arrow-circle-o-down"></i></p>
</section>
section {
background: url("../img/background.jpg") no-repeat center center fixed;
background-size: 100%;
background-color: black;
height: 100%;
position: relative;
}
section p i {
position: absolute;
color: white;
font-size: 15em;
bottom:0
}
Your icon is a text, so you can use the property text-align: center;.
A jsfiddle sample. I made some modifications in the code.
html
<section>
<p><i>☺</i></p>
</section>
css
section {
background: black url("http://placehold.it/420x150") no-repeat center center; // you can put the background-color here by the way
background-size: 100%;
height: 150px;
width: 100%;
position: relative;
text-align: center; // magic stuff here !
}
section p i {
position: absolute;
color: red;
font-size: 2em;
bottom: 0; // you forget a ';' here
}
Is this what you are looking for ?
I have been asked to create a layout that incorporates this watermark. It must be placed in such a way that the left point is in the left sidebar DIV, the top portion is transparent to the banner image, and the bottom portion is a background image to the content DIV.
I tried absolute positioning in CSS per my jsFiddle here:
<!doctype html>
<div id="all">
<div id=leftside>
</div><!-- leftside -->
<div id="banner">
</div> <!-- banner -->
<div id="rightside">
<div id="rightinner">
<h3>My Account</h3>
<input type="text" id="Login"/>
<input name="Go" type="button" id="btnLogin" value="Go"/><br/>
</div>
<!-- rightinner -->
</div><!-- rightside -->
<div id="nav">
<ul>
<li>menu item1</li>
<li>Strategy & Performance</li>
<li>Documents</li>
<li>Research & Insights</li>
<li>Contact</li>
</ul>
</div><!-- nav -->
<div id="content">
</div><!-- content -->
<div id="footer">
<div id="leftfooter">
© my copyright
</div><!-- leftfooter -->
<div id="rightfooter">
Privacy Notice
</div><!
</div>
<!-- footer -->
</div>
<!-- all -->
However, absolute positioning doesn't allow me to properly fit the pieces of the watermark together tightly enough. This is an example slice where the watermark is sliced as part of the header image.
I've attached a mockup of what the completed home page should look like:
What would be the most CSS friendly and responsive approach to ensure that the watermark DIV is transparent over the top of the background color and can be seen in the banner, left sidebar and content DIVs?
UPDATE 4/1: I've modified the CSS here as follows:
#charset "utf-8";
/* CSS Document */
body{
background-color: #003a63;
font-family: Calibri, Verdana, sans-serif;
font-size: 12pt;
width: 100%
}
html{
width:100%;
}
h3{
color: white;
}
#all {
width: 1024px;
}
#banner {
background-image: url(images/banner.png);
background-repeat: no-repeat;
height: 367px;
width: 815px;
position: absolute;
left: 232px;
top: 0px;
z-index: 999;
}
#watermarkCont{
background-color: #003a63;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 25;
}
#watermark{
background-image: url(images/ghwatermark.png);
width: 576px;
height: 517px;
position: absolute;
left: 50%;
margin-left: -200px;
z-index: 25;
}
#content {
background-image: url(../images/bgcontent.png);
background-repeat: no-repeat;
height: 454px;
width: 827px;
position: absolute;
left: 228px;
top: 412px;
background-color: #FFF;
z-index: 1;
}
#leftside {
height: 895px;
width: 220px;
position: absolute;
z-index: 1;
}
#rightside {
background-color: light-gray;
height: 957px;
width: 211px;
position: absolute;
left: 1050px;
top: 0px;
z-index: -25;
}
#nav {
background-color: #c7940d;
list-style-type: none;
font: Calibri;
font-size: 12pt;
font-weight: bold;
position: absolute;
left: 231px;
top: 368px;
width: 822px;
height: 42px;
margin: 0;
padding: 0;
z-index: 999;
}
#nav ul{
margin:0;
padding:0;
}
#nav ul li{
display: inline;
font-weight: bold;
color: #FFF;
}
#rightinner {
background-color: #003a63;
height: 130px;
width: 220px;
padding: 1px 1px 1px 1px;
}
#footer {
height: 105px;
wiedth: 833px;
position: absolute;
left: 227px;
top: 864px;
width: 825px;
color: #003a63;
background-image: url(images/footerbg.png);
}
#rightfooter {
float: right;
}
#leftfooter {
float: left;
width: 225px;
}
This is closer to what I need. However, I'm not sure how to adjust the z-index values for the elemetns in question to make it look like the mockup. Can anyone provide some suggested values? My understanding is that the higher the z-index value, the higher the image is in the "stack". Is that correct?
This is my suggestion:
Give your body and html a width of 100%.
Make a new Div that would be called something like watermark container and give it a width of 100% with position absolute.
Inside that div, make another called watermark and give it a position absolute, but then you can give it a left:50% and then a negative left-margin to place it in the exact point you want it.
This will ensure that the watermark is always placed in the right spot regardless of the screen size.
Here's the code:
body, html {
width:100%;
}
#watermarkCont {
width:100%;
height:100%; //or if you want to just make this a px amount, it might not take 100% height
position:absolute;
top:0;
}
#watermark {
background-image:url("/*image*/");
width: /*whatever the image width is*/;
height: /*whatever the image height is*/;
position:absolute;
left:50%;
margin-left:-200px;
}
This approach is usually used for centering absolutely positioned elements. The negative left margin is usually half of the width of the element, but in this case, you will be pushing to the left more, so make it a bigger negative number if needed.
After you have it placed, give each element the correct z-index and your large watermark should be able to fit in place without having to be cut up.
background-image: url(/Content/Images/logo.png);
background-repeat: no-repeat;
height: 560px;/* height of page */
background-position: 50% 50%;
background-size: 300px 300px; /* width height of Image */
padding: 16px; /* as per need */
I have a header bar that is positioned using position:absolute; and I cannot seem to get it to not overlap my content.
Here is the html i'm using for my example:
<div class="ui-page ui-page-active">
<div class="ui-header">
<div class="ui-title ui-title-h1">
Page Title 1
</div>
</div>
<div class="ui-content">
Page Two
</div>
<div class="ui-footer">
<div class="ui-title ui-title-h3">
Page Footer 1
</div>
</div>
</div>
and here is my css
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.ui-page {
background-color: #bbb;
height: 100%;
width: 100%;
display: block;
position: relative;
}
.ui-page-inactive {
display: none;
}
.ui-page-active {
display: block;
}
.ui-header {
position: absolute;
top: 0;
background-color: #000;
width: 100%;
display: inline-block;
}
.ui-content {
}
.ui-footer {
position: absolute;
bottom: 0;
background-color: #000;
width: 100%;
display: inline-block;
}
.ui-title {
text-align: center;
color: #fff;
padding: 4px;
line-height: 150%;
}
.ui-title-h1 {
font-size: 1.5em;
font-weight: 900;
}
My end goal is to have a header bar always at the top, a footer bar always at the bottom and for the content to fill the centre. The content div does not actually need to fill 100%, I just don't want it to be blocked by either the header or footer.
An easy way would be to have either padding-top or margin-top (I'm not sure which) on .ui-content set to the height of your header, that would push .ui-content down so there isn't overlap.
If the header and footer are a fixed-height (like, for example "80px") then you can make the content absolute with the top-and-bottom margins (position:absolute;overflow-y:scroll;top:80px;bottom:80px;) and make the header and footer fixed (position:fixed;height:80px;top:0;left:0;right:0;overflow:hidden; for the header and position:fixed;height:80px;bottom:0;left:0;right:0;overflow:hidden; for the footer)
Something like that might work.