I want to be able to center most anything vertically on a screen:
For example
Forms
Buttons
Is this possible to do with some custom css class?
Right now I am using the code below. It works but is not very good as I choose at which percentage the content will start. So I need one of these for every page and if content becomes longer I have to modify the percentage.
.loginForm .scroll {
height: 100%;
}
.loginForm .loginForm-wrapper {
position: absolute;
top: 30%;
left: 0;
right: 0;
}
There are different ways to center content vertically. I'm often using the way to transform them. Let's say you got a container in which another element should be centered.
.container {
position: relative; /* required */
height: 150px;
width: 100px;
background: #efefef;
text-align: center;
border-radius: 4px;
}
.center-me {
display: block;
font-family: Consolas;
font-size: 12px;
padding: 5px 10px;
background: #000;
color: #fff;
border-radius: 4px;
position: absolute; /* required */
top: 50%; /* required */
left: 50%;
transform:
translateY(-50%) /* required */
translateX(-50%);
}
<div class="container">
<div class="center-me">
center
</div>
</div>
You could do something with a little bit of JS, though I think #Jan Unld's answer is sufficient.
calcMiddle = function () {
var middleObject = document.querySelector('#middle'),
middleHeight = middleObject.clientHeight / 2,
middleWindow = window.innerHeight / 2,
middleMargin = middleWindow - middleHeight;
middleObject.style.marginTop = middleMargin + "px";
};
calcMiddle();
body {
margin: 0;
}
#middle {
padding: 10px;
background: #abcabc;
}
<body onresize="calcMiddle();">
<div id="middle">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a arcu sed neque volutpat lacinia mattis vitae nulla. Mauris in rutrum dui. Nullam nec dui rhoncus diam aliquam molestie. Nullam volutpat odio dignissim lorem ornare luctus. Aenean iaculis lectus venenatis aliquam porttitor. Etiam facilisis libero nec risus blandit aliquam. Donec sed ipsum nibh. Vestibulum sit amet accumsan ipsum. Maecenas viverra auctor orci, et scelerisque enim congue et.</p>
</div>
</body>
Example:
http://jsfiddle.net/link2twenty/y7h60kr7/
Related
I want to exactly add image under title as linked image below using pure css. Similar image where can I find it?
and also how to position border ?
There is space between border and it is moved little down.
used css for img tag for second image:
img.profile {
display: flex;
margin: 0 auto;
justify-content: center;
width: 8rem;
height: 8rem;
border-width: 4px;
border-radius: .75rem;
border-color: rgba(156,163,175,var(--tw-border-opacity));
background-color: rgba(229,231,235,var(--tw-bg-opacity));
}
With pure HTML / CSS, i'll do it like so.
For the image, use flex to get the alignement you want. For the border, use box-shadow without any blur to control the offset of the border and border-radius to get the round corners.
HTML
<div class="container">
<h1>About us</h1>
<img src="https://cdn.pixabay.com/photo/2020/06/19/17/41/divider-5318234_1280.png">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sem ut orci varius rhoncus. Sed eu pulvinar enim. Vivamus egestas ac nisi quis semper. Nam pulvinar erat in rutrum scelerisque. Maecenas ac lectus ultricies, pretium mi in, bibendum urna. Aenean tempus aliquam leo ac dignissim. Maecenas sed porta velit. Cras ut nunc sit amet erat sagittis convallis vitae quis ante.
</p>
</div>
CSS
.container {
/* Flex properties */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* Border properties */
box-shadow: -5px 5px 0px black; /* x-offset | y-offset | blur to 0 | color */
border-radius: 10px; /* border-radius to get a curvy border */
width: 500px;
padding: 10px;
}
.container > h1 {
margin-bottom: 0px; /* Remove the space between title and img */
}
.container > img {
max-width: 70%;
height: 50px;
}
And the working fiddle
I have a web page which displays 2 columns. On a PC the two columns display exactly as I want them, but something goes wrong when viewed on a mobile screen.
On mobile screen I want the second column to drop below the first column and I want both columns to be centered on the screen, but what happens is that the first column is on the left of the screen and the second column (which is a Facebook feed) is too wide for the screen, even though I set the width at 80%.
Here is my html:
<div class="section group">
<div class="col span_1_of_2">
<img class="img11" src="images/trout.jpg" alt="trout" title="The Trout Inn">
<hr style="width: 100%"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus neque eu felis condimentum ullamcorper. Aliquam erat volutpat. Phasellus viverra lectus dignissim ex ultricies ornare. Donec interdum massa non neque consectetur, eget molestie libero faucibus. Nulla gravida finibus libero, eu dictum turpis porta a. Donec ex tellus, dictum et massa eget, mattis suscipit justo. Vivamus tempus enim at nibh lobortis semper vitae sed mi. Mauris efficitur ipsum a nulla ultricies, sed ultrices ligula dignissim
</div>
<div class="col span_2_of_2">
<label>Our Facebook Feed</label>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftesttest%2F&tabs=timeline&width=340&height=1000&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=999999" width="340" height="1000" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
</div>
</div><!-- section group -->
and here is my css:
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: auto;
width: 60%;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF TWO */
.span_1_of_2 {
width: 63.1%;
padding-right: 15px;
border-right-style: solid;
border-color: #444444;
border-width: 1px;
}
.span_2_of_2 {
width: 32.2%;
}
/* IF screen is LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: auto;
width: 90%;
}
/* COLUMN SETUP */
.col {
display: block;
margin: auto;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:block;
margin: auto;
}
.group:after {
clear:both;
}
/* GRID OF THREE */
.span_1_of_2 {
padding: 0px;
border: none;
display: block;
margin: auto;
width: 70%;
}
.span_2_of_2 {
padding: 0px;
border: none;
display: block;
margin: auto;
width: 50%;
}
}
I have tried changing lots of parameters in the css but cannot make it work and now I am lost for options.
Can anyone help me to get these columns aligned?
Many Thanks
Tog
by using flex & flex direction you can change how the columns are placed.
you can read more here
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.section{display:flex;flex-direction:column;}
.span_1_of_2{flex:1;padding:5px;}
.span_2_of_2{flex:1;padding:5px}
#media screen and (min-width:768px){
.section{display:flex;flex-direction:row;}
}
<div class="section group">
<div class="col span_1_of_2">
<img class="img11" src="images/trout.jpg" alt="trout" title="The Trout Inn">
<hr style="width: 100%"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus neque eu felis condimentum ullamcorper. Aliquam erat volutpat. Phasellus viverra lectus dignissim ex ultricies ornare. Donec interdum massa non neque consectetur, eget molestie libero faucibus. Nulla gravida finibus libero, eu dictum turpis porta a. Donec ex tellus, dictum et massa eget, mattis suscipit justo. Vivamus tempus enim at nibh lobortis semper vitae sed mi. Mauris efficitur ipsum a nulla ultricies, sed ultrices ligula dignissim
</div>
<div class="col span_2_of_2">
<label>Our Facebook Feed</label>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftesttest%2F&tabs=timeline&width=340&height=1000&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=999999" width="340" height="1000" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
</div>
</div><!-- section group -->
Div should not be over Div with background image with divs inside, but for some reason the about div is displayed over the nav:
body {
margin: 0;
padding: 0;
/*background-color: blue;*/
}
.divider {
background-color: #be2b27;
width: 100%;
height: 100px;
position: absolute;
display: block;
padding: 0;
}
.divider h1 {
font-family: "Nexa Light";
font-size: 2em;
color: white;
text-align:left;
padding-left: 10px;
}
.lorem-text {
font-family: "Menlo";
font-size: 1.2em;
color: white;
}
.start-section {
margin-top: 30px;
/* position: absolute; */
padding-left: 20px;
padding-top: 20px;
}
#start-bg {
background-image: url(water.jpg);
background-color:#9abee1;
background-repeat: round;
height:100%;
position: absolute;
}
#home-head {
font-family: 'Nexa Light';
/* font-size: ; */
padding-top: 30px;
color: white;
}
.nav { }
<div id="start-bg">
<!--<div class="nav"...>...</div>-->
<div class="start-section">
<h1 id="home-head">Landing Page</h1>
<p class="lorem-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare est in maximus vestibulum.
Mauris eu tincidunt quam.<br> In commodo neque id tortor mattis, non consectetur ante tincidunt.
Nunc ultrices ultricies purus, id finibus justo eleifend sit amet.<br>
Sed in iaculis libero, et gravida nibh.
Proin mollis, nibh eu rhoncus scelerisque, orci ex posuere mi, id pharetra purus est suscipit sapien.
Aliquam fermentum dignissim ultricies. Cras vitae neque tincidunt, tristique neque at, ornare leo.<br>
Integer gravida lectus sed venenatis auctor. Vestibulum sed ligula eget dui ultrices luctus.<br>
Etiam dapibus auctor sollicitudin. Nam vel dui non lorem semper scelerisque. Donec sed condimentum mauris.
Maecenas ac enim sit amet orci sodales porta.
</p>
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150"><br>
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150"><br>
</div>
</div>
<div class="divider">
<h1>About</h1>
</div>
There must be something wrong with the positions or something or the fact that when the div has a background image it is not registered as holding any content so the about div is displayed above it.
What do I need to do?
I want the div to be displayed after the background image ends and stays there when I remove the images. If you need the nav html and css code i will give it to you.
#start-bg {
background-image: url(water.jpg);
background-color:#9abee1;
background-repeat: round;
height:100%;
position: absolute;
}
If you remove:
position: absolute;
Red bar go to bottom bottom of the page.
I am trying to implement a sticky footer with CSS using this: http://www.cssstickyfooter.com/using-sticky-footer-code.html .
I have almost got it working, but when having floats in my content container, I find that the footer will overlap a bit of the content.
This is the markup:
<div class="container" id="content-area">
<div class="module-content" id="mycontent">
<div class="menu">
<ul>
<li>
<a class="current-page" href="http://localhost/">1</a>
</li>
</ul>
</div>
<div class="module-content">
<div>
<p>Lorem ipsum dolor sit amet, consequat et metus, platea
posuere adipiscing porttitor dis amet ut. Turpis diam amet,
mollit commodo. Fusce vestibulum habitant, auctor vel ac
dui, nulla lacus hac, raesent euismod habitant eros massa
nulla. Justo dui, facilisis cras. Est ante maecenas
vehicula, etiam vestibulum mi lorem massa, sed nullam
suspendisse lectus ante purus gravida, iaculis urna pede
fermentum. Arcu id ligula arcu, erat vivamus quisque
quisque, tristique ipsum et. Sociis duis ut, morbi dolor
duis volutpat lacus viverra, scelerisque sodales sed, vel
nulla. Elit pede nullam ullamcorper consectetuer ac massa,
lobortis eget id dictumst et quis, nulla metus. Magnis id
id suscipit porttitor faucibus, felis commodo risus massa,
fusce tempus praesent aliquet sit vulputate tempor.</p>
</div>
</div>
</div>
</div>
<div class="container" id="footer">
<div class="container">
<p>Lorem ipsum dolor sit amet, consequat et metus, platea
posuere adipiscing porttitor dis amet ut. Turpis diam amet,
mollit commodo. Fusce vestibulum habitant, auctor vel ac dui,
nulla lacus hac,</p>
</div>
</div>
And the CSS:
html, body {
height: 100%;
}
#content-area {
min-height: 100%;
overflow: auto;
position: relative;
}
.container {
margin: 0 auto;
width: 985px;
}
#mycontent .menu {
float: left;
margin-right: 10px;
padding-top: 13px;
width: 100px;
}
#mycontent .module-content {
float: left;
width: 700px;
}
#footer {
color: red;
background: black;
opacity: 0.6;
height: 70px;
margin-top: -70px;
width: 100%;
clear: both;
}
And a fiddle of the above: http://jsfiddle.net/CfuAg/
And a picture of what's happening
Why is this happening and what are some ways to fix it? I tried adding a padding of 70px to #content-area, but it pushes the footer down by 70px and doesn't stick to the buttom of the window anymore.
Fixed! overflow: auto was assigned to the wrong element (it should be assigned to .module-content) and module-content should have a bottom-padding with a height of the footer:
html, body {
height: 100%;
}
#content-area {
min-height: 100%;
position: relative;
}
.container {
margin: 0 auto;
width: 985px;
}
#mycontent .menu {
float: left;
margin-right: 10px;
padding-top: 13px;
width: 100px;
}
#mycontent .module-content {
float: left;
width: 700px;
overflow: auto;
padding-bottom: 70px;
}
#footer {
color: red;
background: black;
opacity: 0.6;
height: 70px;
margin-top: -70px;
width: 100%;
clear: both;
}
I've modify your fiddle to make it works the way I understood what you're looking for.
I've remove the clear: both; and margin-top: -70px; and use instead the bottom property which I've set to 0
http://jsfiddle.net/CfuAg/4/
Hope this is what you looked for.
I have this HTML code:
<span class="left">
<img class="avatar" src="image.jpg" />
</span>
<span class="right">
Lorem ipsum dolor sit amet, nunc euismod nisl nam euismod, quis maecenas blandit ac, neque sed ut pulvinar, lectus sagittis sapien mauris per risus vel. Ligula sapien sed morbi cras tellus commodo. Rutrum mattis accumsan, hac sed praesent, neque tortor neque, commodo mauris sagittis turpis, faucibus sed ultrices tempor interdum. Lobortis assumenda nisl, posuere cras sit risus egestas bibendum nec, magna in, sed mattis pharetra felis nulla vitae aptent, in semper et...
</span>
I would that the two blocks are positioned on the same line. I use this CSS:
.right {
width: 250px;
background-color: orange;
float: left;
}
.left {
width: 100px;
background-color: orange;
float: left;
}
It's good, but I want that the right side (the text) is not large 250px, but 100%. If I put width:100%, the block is not on the same line.
How can I do this?
Here is my solution to your problem - you set the width on the left item, and the margin on the right item. The left item is floated, the right item isn't. I have also made the display of the right item "block".
.right {
display: block;
margin-left: 100px;
width: auto;
background-color: orange;
}
.left {
width: 100px;
background-color: orange;
float: left;
}
For floated elements, if you want to use percentage widths, you should calculate the width of each:
.right {
width: 50%; /*or 45%*/
background-color: orange;
float: left;
}
.left {
width: 50%; /*or 55%*/
background-color: orange;
float: left;
}
Then they will display on the same line.
Also, if there are margins or paddings, you should take this into consideration when calculating the widths as if you set both to 50% but there is a margin of 10px, it will still force the next element onto a new line.
To make the .right element calculate the width, you need to set its width to width: auto; and counter-margin the .left element: margin-left; 100px; (where 100px is equal to the .left elemtents width).
Example for you here.
delete the width for the right class and the float. This will make the right class to get the remaining width of the parent element.
.right {
background-color: orange;
}
.left {
width:250px;
background-color: orange;
float:left;
}
example http://jsbin.com/ayaha3