I have a question related to header height.
HTML:
<header>
<h1>
Hello World!
</h1>
</header>
CSS:
header {
background-image: url("../images/header.png");
background-size: cover;
height: 100%;
text-align: center;
color: white;
}
In this case header height fits text height. Is there a way to set header height the same as image height?
You could do the header image as a foreground img tag rather than background image and then do this in the CSS
header {
position: relative;
}
header img {
width: 100%;
height: auto;
}
header h1 {
position: absolute;
top: 0;
}
In the header's css, you can put:
background: url("../images/header.png") 50% 50% / 100% no-repeat fixed;
It will automatically place and size the image so it's not stretched.
Why don't you just use Flexbox? It's the defacto standard these days.
Here is a jsfiddle what I have in mind:
JSFiddle example
Essentially, what you want to do is your <h> element should actually be a child of another div within your <header>:
<header>
<div class="backimage">
<h1>
Hello World!
</h1>
</div>
</header>
Your <header> div, as the flex "container", display child elements as column, without wrap, aligned in the center with space around, and justified center:
header {
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;
align-content: space-around;
}
Child elements within the flex "container" should be ordered for number of appearance either as a row or column, in this case the "container" displays items in a column layout, so you want your header to appear as the first item. flex is shorthand for flex-grow, flex-shrink, and flex-basis; this third one being what size the element should be, the first two controlling what priority or portion of the container element this child element will be treated as compared to other children. In this case, handle it auto. We want to reposition the header to be vertically centered in the containing div, so position: relative;, add 50% of the container's height to the origin point of the ` element's origin (which always starts from the top left of an object), and because the text default is set at 1em, it would logically follow that .5em would be the center, so subtract that from the 50%. Give it text-align center for horizontal centering:
header h1 {
position: relative;
top: 50%;
margin-top: -.5em;
text-align: center;
order: 1;
flex: 1 0 auto;
}
Then you just have to worry about your background. Background, no repeat, define the height of the image (which in this case will be applied to the div itself), border here for example just so you can see the boundary of the div, and don't forget that this should appear second compared to the header:
.backimage {
background-image: url('http://upload.wikimedia.org/wikipedia/ \
commons/4/47/PNG_transparency_demonstration_1.png');
background-repeat: no-repeat;
border: 1px solid blue;
width: 500px;
height: 300px;
order:2;
}
Here's what you end up with:
Here's a great guide on flexbox usage:
Flexbox guide
Related
Consider this very simple header:
.box {
height: 100%;
width: 50px;
background-color: blue;
}
.row {
display: flex;
height: 60px;
background-color: yellow;
}
<div class="row">
<div class="box"></div>
<h1>This string needs to be able to wrap</h1>
</div>
The blue box needs to be defined by the height of the row and the text needs to be able to wrap. But as you can see, when the text wraps it extends beyond the flexbox. The flexbox can't grow at all because I have defined its height. If I remove the height specification then text wrap works correctly but the blue box disappears. This is a quite frustrating problem that I have spent hours trying to figure out. Is there no way to say to the row "your height is 60px but you can go bigger if you need to".
What I've tried so far:
Use min-height: 60px. For some reason the blue box still doesn't show up when I do this.
Use max-height: 100px. The row defaults to that size which is too big for when the text doesn't wrap.
I guess I could write media queries to manually change the height of the row, but it seems like there should be a more flexboxy way of doing this. Any ideas?
Here is the JS Fiddle if you want to play with it.
You don't need height: 100%; on child element of flex element.
And if you want minimum height of 60px on parent element, use min-height: 60px; instead of height: 60px;
.box {
width: 50px;
background-color: blue;
}
.row {
display: flex;
background-color: yellow;
min-height: 60px;
}
Here is the fiddle
https://jsfiddle.net/3bzeht52/
I have a div with a variable width, and I have a variable amount of children inside this div. I want the children to fill up the space inside the div. I first tried to change the div to display:table and the children to display:table-cell but I ended up all the children filling up all the space and not obeying their width and max-width properties. Then I've tried the table approach: I've changed the div to a table (yes, I know, it's not recommended, that's why I'm probably here asking) and wrapped the children into a tr and each in tds, but I ended up all the children cells filling up the whole space, but aligned to left (I've set the children divs display:inline-block):
If I change the alignment to center, I get this:
They are centered, but I still get spaces on the left and right of the parent (with the yellow background that I've set for distinguishing). What I actually want is this:
I've achieved this by setting the first td to align text to left, the second to center, the third to right. But I may have more of these thumbnails, so I need a general solution.
How can I lay out a variable number of children inside a container to fill the width, with the first element starting at the exact left border of the container (unlike the second image) and the last element ending at the exact right border of the container (like shown in the third image)?
Something like this?
HTML:
<div>
<span id="s1"></span>
<span id="s2"></span>
<span id="s3"></span>
</div>
CSS:
div{
background: #ff6;
text-align: justify; /* Important */
font-size: 0; /* Used to remove spaces */
}
div:after{ /* Used to create a new last line */
content: '.';
display: inline-block;
width: 100%;
height: 0;
overflow: hidden;
}
span{
display: inline-block;
height: 150px;
}
/* Use your widths, min-widths and max-widths here: */
#s1{
background: red;
width: 15%;
min-width: 50px;
max-width: 150px;
}
#s2{
background: green;
width: 40%;
min-width: 50px;
max-width: 250px;
}
#s3{
background: blue;
width: 40%;
min-width: 50px;
max-width: 200px;
}
Demo
You can obtain equally spaced boxes using text-align: justify on the wrapper. The problem is that it doesn't work for the last line (which in this case is the first too), so you can either use text-align-last, or an :after pseudo element with width: 100% in order to create a new last line.
How can I keep the play button centred even if the the image/video size changed?
.image{
position:relative;
width:500px; //changed
height:300px;
}
Here is my example...
Attention: my images/videos haven't no specific size, so they can change according to their own size... This is just an example!
I set up three examples to show how you could solve this problem.
Please see the fiddle: http://jsfiddle.net/audetwebdesign/mxSkQ/
The HTML is essentially yours:
<div class ="image ex1">
<a href="#">
<img src="http://placehold.it/200x150" alt="video">
<span class="play">
<span></span>
</span>
</a>
</div>
I am using a demo image with configurable dimensions, 200x150 for example, easily changed for testing.
Example 1 - Image Size Determines Size of the Parent Container
.ex1.image {
position: relative;
display: inline-block;
margin-left: 50px;
}
.image a {
display: inline-block;
position: relative;
}
/* Gets rid of the extra white space that follows an inline element*/
.image img {
vertical-align: bottom;
}
If you want the .image div to shrink to fit the image, use inline-block to display.
The margin-left is optional, will depend on the rest of the layout.
Important: To center the play button motif, simply set the a tag to display as inline-block and your arrow-motif-span will position itself nicely.
Because img is an inline element, browsers insert a small space after it that can show up if you have borders or backgrounds. Use vertical-align: bottom to clean that up.
Example 2 - Parent Container Has A Specified Width
You can specify a width for the .image parent container and then use text-align to position the image element.
.ex2.image {
position: relative;
display: inline-block;
width: 400px;
height: auto;
text-align: center;
}
Example 3 - Parent Container Has Full Width and Specified Height
In this example, I let the parent container fill up the width of the window and set the
height to 200px. To get vertical centering, I set margin-top to a hard-coded value that will depend on the height of the image. If you let the image take on a fixed height, this example is useful.
.ex3.image {
position: relative;
display: block;
width: auto;
height: 200px;
text-align: center;
}
.ex3.image a {
margin-top: 25px;
}
You need
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; // top and left equal to half of the size * (-1)
http://jsfiddle.net/nGKcn/13/
Try playing with the image size/different images.
Give the image CSS of:
display: block;
margin: 0 auto;
This is just a general way you put stuff in the middle.
Unless I'm missing something maybe?
I have an empty page with one DIV on it:
<div style="height: 20%;
min-height: 10px;
max-height: 100px;
width: 100%;
background-color: blue;"></div>
I want to add a DIV after this one that takes up all remaining vertical space on the page. How do I do it?
I've spent all day on this and CSS is starting to drive me crazy.
What has to be inside this div?
If it's a just a color filler, just put your blue div in a another div wich you give a background color and make that one fit 100% of your browser window?
It will look like 2 divs beneath eachother. If you need content you can always just put another div under your blue one with whatever content you want.
EDIT:
code example:
http://jsbin.com/efefe/2
Assuming you have two divs:
<div id='one'></div>
<div id='two'></div>
where #one has variable height and #two should consume all remaining vertical space you can do:
/* Note you could add a container div instead of using the body */
body {
display: flex;
flex-direction: column;
}
#one {
flex: none;
}
#two {
flex: 1;
}
Furthermore, if you want #two to be scrollable you can add:
height: 100%;
overflow-y: scroll;
which will allow it to scroll vertically to show it's whole contents.
You can read more about display:flex here.
I have a page which is divided up into 3 divs, left center and right. I don't want to display anything in the left and right, they just frame the page.
#leftDiv
{
background-color: Gray;
width: 10%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
}
#rightDiv
{
background-color: Gray;
height: 100%;
width: 10%;
left: 90%;
top: 0px;
position: absolute;
clear:both;
}
The center div has a table, which allows the user to select how many rows to see. If they chose a large value then the body of the table went beyond the bottom of the left and right div.
To correct this I put the following code in
if ($("#leftDiv").length == 1) {
$("#leftDiv").height($("body").height() + "px");
}
if ($("#rightDiv").length == 1) {
$("#rightDiv").height($("body").height() + "px"); ;
}
this works fine until the user selects a smaller value than the page size, after selecting a larger value.
Then the left and right divs get set to less than 100%.
What i need is a way to find out what 100% is in pixels and then I can compare this to the height of the body and decide which is bigger.
Any ideas?
Thanks
John
Use margin: 0 auto
Kill your left and right columns, give your main div a width, and then center that div using an auto left and right margin. For example:
#mainDiv {
width: 80%;
margin: 0 auto;
}
Why are you creating empty elements to frame the page? How about setting the body background to the colour you require and:
#center_div {width: /* whatever */;
margin: 0 auto; /* to center in the viewport */
overflow: auto; /* or visible */
}
You could leave off the overflow property, and simply use min-width in place of width (I can't remember how cross-browser compatible this is) to define the 'normal' width, in such a way that the content will force the div to be larger as required to display the content.
If the left and right divs don't have any contents, then there's no need for them to be separate divs: apply their formatting to your container div instead, and center your contents div using margin: 0 auto. Obviously, you'll need to give the container div a specified width, and a non-transparent background. Then you can let the browser take care of resizing the window as needed - there's no need for you to reinvent the wheel for that part.
CSS:
#container {background-color:gray;}
#content {background-color:white;width:80%;margin:0 auto;}
Html:
...
<body>
<div id="container">
<div id="content">
...your content here...
</div>
</div>
</body>
...
(If your page doesn't have a container div, then you can apply the background color to the body element instead, and save even more code.)