Here's what I got:
<div class="slideshow">
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet.</span>
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />
And the CSS:
/* slideshow */
.slideshow {
width:940px;
height:64px;
text-align:center;
background-image:url(../images/quotes.png);
position:relative;
}
.slideshow span {
display:block;
width:940px;
height:64px;
}
The <span>s are currently centered horizontally, but they should also be centered vertically. Is this possible?
The whole idea is to have testimonials on top the background image (quotes on the left and right side), but it doesn't quite look right without being centered both horizontally and vertically.
I'm sure I could somewhat get the desired effect using padding, but since each testimonial will be a different length I don't think that'd be a good approach.
if you know that the content of your span will never exceed one line of text, just set
.slideshow span {
line-height: 64px /* = the height of the containing div */
}
Or, if you know the height of the span:
.slideshow span {
display: block;
position: absolute;
height: 64px;
top: 50%;
margin-top: -32px; /* = height/2 */
}
Last option would be to use a table formed by a single cell in place of the div, and use the vertical-align property.
CSS:
<style>
div {
width:300px; height:300px;
text-align:center;
display:table-cell; vertical-align:middle;
}
</style>
HTML:
<div>
<span>The Span</span>
</div>
yes it is possible.
Use the CSS attribute vertical-align:middle.
If you want to align verticaly below or above the horizontal center position then Use like this :
vertical-align:5;
or
vertical-align:-5;
Related
Yes, I know, this question have been asked many times and a possible solution is to add style="display:block;" to the link.
For some reason this solution does not work with table style DIVs:
https://jsfiddle.net/exyv8jmw/1/
HTML:
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
CSS:
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
As you can see, the empty green space is clickable only horizontally, but not vertically. I also tried:
<div class="left">This is a link</div>
but it does not help.
You need to add height: 100%; to the link, .left, and .tablerow elements.
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
height: 100%;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
height: 100%;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block;height:100%;">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
First set .left position to relative, Then set a tag position to absolute and width and height to 100%.
.table{
width:500px;
display:table;
}
.tablerow{
display:table-row;
}
.left{
width:50%;
background:green;
display:table-cell;
padding:5px;
position: relative;
}
.left a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.right{
width:50%;
display:table-cell;
background:red;
padding:5px;
}
<div class="table">
<div class="tablerow">
<div class="left">
<a href="/something.html" style="display:block">
This is a link</a>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Can't you put the div inside the 'a' element?
<a href="/something.html" >
<div class="left">
This is a link </div>
</a>
Apply the 'left' class to the a element directly, i.e.:
this is a link
Although this does not allow for additional content, it does make the anchor fill the available space.
Part of the problem is that the anchor tag is, by default, a "span" type tag, which only fills a space as big as its content, disregarding internal divs.
You have to make the anchor tag act like a "block" style element, not its surrounding element, or an internal element.
You could add listener to the div id.
<div class="table" id="clik">
document.getElementById("clik").addEventListener("click", function(){
// document.location = "/something.html";
alert("hello");
});
I have an editable page and content, that consists of blocks of text and tags as separators bwetween paragraphs. I want to make distance between paragraphs larger and I found solution with
br {
display:block;
margin-top: 15px;
content: " "
}
but in this case multiple br tags in row are collapsed. Also i found solution with line-height, but in this case cursor on empty line looks weird. I can't use p tag, so are there any other solutions?
body {
display: flex;
}
.first {
margin-right: 30px;
}
.first br {
display: block;
margin-top: 15px;
content: " ";
}
.second br {
display: block;
margin-top: 15px;
line-height: 50px;
}
<body contenteditable="true">
<div class="first">
<h3>display:block solution</h1>
Lorem ipsum dolor sit amet
<br>
Lorem ipsum dolor sit amet
<br>
<br>
Lorem ipsum dolor sit amet
</div>
<div class="second">
<h3>line-height solution</h1>
Lorem ipsum dolor sit amet
<br>
Lorem ipsum dolor sit amet
<br>
<br>
Lorem ipsum dolor sit amet
</div>
</body>
but in this case multiple br tags in row are collapsed
Try adding a transparent border-top, to avoid the effect of collapsing margins.
body {
display: flex;
}
.first {
margin-right: 30px;
}
.first br {
display: block;
margin-top: 15px;
border-top: 1px solid transparent;
content: " ";
}
.second br {
display: block;
margin-top: 15px;
line-height: 50px;
}
<body contenteditable="true">
<div class="first">
<h3>display:block solution</h1>
Lorem ipsum dolor sit amet
<br>
Lorem ipsum dolor sit amet
<br>
<br>
Lorem ipsum dolor sit amet
</div>
<div class="second">
<h3>line-height solution</h1>
Lorem ipsum dolor sit amet
<br>
Lorem ipsum dolor sit amet
<br>
<br>
Lorem ipsum dolor sit amet
</div>
</body>
That achieves a double line height between the second and third line in the first example, at least on Chromium. Firefox seems not to have this problem in the first place, in that both of your example look the same. Have not tested Internet Explorer and Edge.
But this is a rather hack-y and error-prone solution. You say you “can’t” use proper paragraph elements - but you should be able to, otherwise your content editing system rather … well, sucks. This is not just a matter of “how it looks”, but also of semantics, and with that possibly search engine ranking, etc.
Every other div is centered but this one. And it's been driving me nuts for a few hours. I finally broke down and posted. Attached is a pic where you can see it's not centered.
You can see it live here.
Image of div not centered:
You can use bootstrap helper classes .center-block and .text-center to center the content
<div class="col-md-6">
<div class="testimonial-section center-block">
Denim you probably haven't heard of. Lorem ipsum dolor met consectetur adipisicing sit amet, consectetur adipisicing elit, of them jean shorts sed magna aliqua. Lorem ipsum dolor met.
</div>
<div class="testimonial-desc text-center">
<img src="https://placeholdit.imgix.net/~text?txtsize=9&txt=100%C3%97100&w=100&h=100" alt="">
<div class="testimonial-writer">
<div class="testimonial-writer-name">Zahed Kamal</div>
<div class="testimonial-writer-designation">Front End Developer</div>
Touch Base Inc
</div>
</div>
</div>
You need to add the following:
.testimonial-section {
margin: 0 auto;
}
.testimonial-desc {
text-align: center;
}
Optionally, you can add the following:
.testimonial-section:after {
margin-left: 5px;
}
which will make it:
If I understand you right, you want each testimonial centered in its containing div? How about adding margin-left: 25%; to both .testimonial-section and .testimonial-description?
Try this:
.testimonial-section {
margin: 0 auto; }
This question already has answers here:
CSS Single-column layout centered fixed-width 100% height w header and footer
(5 answers)
Closed 4 years ago.
From my research, this appears to be an absolutely classic CSS question, but I can't find a definitive answer - so StackOverflow it is.
How do I set a content div to take up 100% of the body height, minus the height taken up by a fixed-height header and footer?
<body>
<header>title etc</header>
<div id="content">body content</div>
<footer>copyright etc</footer>
</body>
//CSS
html, body {
height: 100%;
}
header {
height: 50px;
}
footer {
height: 50px;
}
#content {
height: 100% of the body height, minus header & footer
}
I would like to use pure CSS, and for the answer to be bulletproof across browsers.
this version will work in all the latest browsers and ie8 if you have the modernizr script (if not just change header and footer into divs):
Fiddle
html,
body {
min-height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
padding: 50px 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#content {
min-height: 100%;
background-color: green;
}
header {
margin-top: -50px;
height: 50px;
background-color: red;
}
footer {
margin-bottom: -50px;
height: 50px;
background-color: red;
}
p {
margin: 0;
padding: 0 0 1em 0;
}
<div id="wrapper">
<header>dfs</header>
<div id="content">
</div>
<footer>sdf</footer>
</div>
Scrolling with content: Fiddle
As far as it is not cross browser solution, you might be take advantage of using calc(expression) to achive that.
html, body {
height: 100%;
}
header {
height: 50px;
background-color: tomato
}
#content {
height: -moz-calc(100% - 100px); /* Firefox */
height: -webkit-calc(100% - 100px); /* Chrome, Safari */
height: calc(100% - 100px); /* IE9+ and future browsers */
background-color: yellow
}
footer {
height: 50px;
background-color: grey;
}
Example at JsFiddle
If you want to know more about calc(expression) you'd better to visit this site.
This still came up as the top Google result when I was trying to find an answer to this question. I didn't have to support older browsers in my project and I feel like I found a better, simpler solution in flex-box. The CSS snippet below is all that is necessary.
I have also shown how to make the main content scrollable if the screen height is too small.
html,
body {
height: 100%;
display: flex;
flex-direction: column;
}
header {
min-height: 60px;
}
main {
flex-grow: 1;
overflow: auto;
}
footer {
min-height: 30px;
}
<body style="margin: 0px; font-family: Helvetica; font-size: 18px;">
<header style="background-color: lightsteelblue; padding: 2px;">Hello</header>
<main style="overflow: auto; background-color: lightgrey; padding: 2px;">
<article style="height: 400px;">
Goodbye
</article>
</main>
<footer style="background-color: lightsteelblue; padding: 2px;">I don't know why you say, "Goodbye"; I say, "Hello."</footer>
</body>
The new, modern way to do this is to calculate the vertical height by subtracting the height of both the header and the footer from the vertical-height of the viewport.
//CSS
header {
height: 50px;
}
footer {
height: 50px;
}
#content {
height: calc(100vh - 50px - 50px);
}
Trying to calculate the header and footer is bad :( A design should be simple, self explanatory. Plain easy. Calculations are just...not easy. Not easy for human and a bit hard on machines.
What you're looking for is a subset of the Holy Grail design.
Here's an implementation using the flex display. It includes side bars in addition to the footer and header. Enjoy:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Holy Grail</title>
<!-- Reset browser defaults -->
<link rel="stylesheet" href="reset.css">
</head>
<body style="display: flex; height: 100%; flex-direction: column">
<div>HEADER<br/>------------
</div>
<!-- No need for 'flex-direction: row' because it's the default value -->
<div style="display: flex; flex: 1">
<div>NAV|</div>
<div style="flex: 1; overflow: auto">
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
<div>|SIDE</div>
</div>
<div>------------<br/>FOOTER</div>
</body>
</html>
You can take advatange of the css property Box Sizing.
#content {
height: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
padding-top: 50px;
margin-top: -50px;
padding-bottom: 50px;
margin-bottom: -50px;
}
See the JsFiddle.
This question has been pretty well answered, but I'm taking the liberty of adding a javascript solution. Just give the element that you want to 'expand' the id footerspacerdiv, and this javascript snippet will expand that div until the page takes up the full height of the browser window.
It works based on the observation that, when a page is less than the full height of the browser window, document.body.scrollHeight is equal to document.body.clientHeight. The while loop increases the height of footerspacerdiv until document.body.scrollHeight is greater than document.body.clientHeight. At this point, footerspacerdiv will actually be 1 pixel too tall, and the browser will show a vertical scroll bar. So, the last line of the script reduces the height of footerspacerdiv by one pixel to make the page height exactly the height of the browser window.
By placing footerspacerdiv just above the 'footer' of the page, this script can be used to 'push the footer down' to the bottom of the page, so that on short pages, the footer is flush with the bottom of the browser window.
<script>
//expand footerspacer div so that footer goes to bottom of page on short pages
var objSpacerDiv=document.getElementById('footerspacer');
var bresize=0;
while(document.body.scrollHeight<=document.body.clientHeight) {
objSpacerDiv.style.height=(objSpacerDiv.clientHeight+1)+"px";
bresize=1;
}
if(bresize) { objSpacerDiv.style.height=(objSpacerDiv.clientHeight-1)+"px"; }
</script>
Here's a solution that doesn't use negative margins or calc. Run the snippet below to see the final result.
Explanation
We give the header and the footer a fixed height of 30px and position them absolutely at the top and bottom, respectively. To prevent the content from falling underneath, we use two classes: below-header and above-footer to pad the div above and below with 30px.
All of the content is wrapped in a position: relative div so that the header and footer are at the top/bottom of the content and not the window.
We use the classes fit-to-parent and min-fit-to-parent to make the content fill out the page. This gives us a sticky footer which is at least as low as the window, but hidden if the content is longer than the window.
Inside the header and footer, we use the display: table and display: table-cell styles to give the header and footer some vertical padding without disrupting the shrink-wrap quality of the page. (Giving them real padding can cause the total height of the page to be more than 100%, which causes a scroll bar to appear when it isn't really needed.)
.fit-parent {
height: 100%;
margin: 0;
padding: 0;
}
.min-fit-parent {
min-height: 100%;
margin: 0;
padding: 0;
}
.below-header {
padding-top: 30px;
}
.above-footer {
padding-bottom: 30px;
}
.header {
position: absolute;
top: 0;
height: 30px;
width: 100%;
}
.footer {
position: absolute;
bottom: 0;
height: 30px;
width: 100%;
}
/* helper classes */
.padding-lr-small {
padding: 0 5px;
}
.relative {
position: relative;
}
.auto-scroll {
overflow: auto;
}
/* these two classes work together to create vertical centering */
.valign-outer {
display: table;
}
.valign-inner {
display: table-cell;
vertical-align: middle;
}
<html class='fit-parent'>
<body class='fit-parent'>
<div class='min-fit-parent auto-scroll relative' style='background-color: lightblue'>
<div class='header valign-outer' style='background-color: black; color: white;'>
<div class='valign-inner padding-lr-small'>
My webpage
</div>
</div>
<div class='fit-parent above-footer below-header'>
<div class='fit-parent' id='main-inner'>
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
</div>
</div>
<div class='footer valign-outer' style='background-color: white'>
<div class='valign-inner padding-lr-small'>
© 2005 Old Web Design
</div>
</div>
</div>
</body>
</html>
I have a #comments element which contains .comment elements. I would like to have 5 vertical lines from left to right, each 1px in width, 100% height (till the end of the #comments element), with 20px between them and without images. I tried to do that myself, but my CSS-fu isn't that high. Any help would be much appreciated.
HTML:
<div id="comments">
<div class="comment level1">Lorem ipsum dolor sit amet</div>
<div class="comment level2">Lorem ipsum dolor sit amet</div>
<div class="comment level3">Lorem ipsum dolor sit amet</div>
</div>
CSS:
#comments {
width: 400px;
border: 1px solid black;
}
.comment {
margin: 10px 0;
}
.level1 {}
.level2 { margin-left: 20px; }
.level3 { margin-left: 40px; }
Demo.
Here's how I imagine it:
|[comment ]
| |[comment ]
| |[comment ]
| | |[comment]
Is there some reason you need to have all the divs as direct children of the outer parent div? If you nest the divs you can accomplish this very easily:
css:
div div {
border-left: 1px solid black;
padding-left:20px;
}
nested html
<div id="comments">
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet
<br/>
<div>Lorem ipsum dolor sit amet</div>
</div>
</div>
</div>
</div>
</div>
updated fiddle showing how it would look here nested down to 5 levels:
http://jsfiddle.net/webchemist/tuZB6/4/