I'm trying to figure out css, one step at a time. Consider the following code:
<header id="main">
</header>
and CSS:
#main{
height: 220px;
width: auto;
border: 2px #000000 solid;
}
#title{
float: left;
background: url(http://i.imgur.com/m9fvwoJ.jpg) no-repeat;
width: 300px;
height: 175px;
}
If I remove the float-property, the picture 'disappear', and I'm having difficulties understanding why.
Heres is the code in JsFiddle => http://jsfiddle.net/5nWag/3/
An element automatically becomes a block-level element when its floated, so your width and height rules are applying and working as you'd expect. Inline elements can't have an explicit width and height, as their content determines the size of their line boxes. Inline elements also cannot have any vertical margin, borders, or padding. The reason the background disappears is because your <a> has no content and as a result, no dimensions and also because you apparently can't give an <a> element a background-image without modifying its display value. If you wrap a <span> around it and add content the background-image will be visible:
http://jsfiddle.net/5nWag/8/
Related
As I found out, the best browser friendly solution for vertical aligning is the trick with a pseudo element. But it's not working if I need to use percentages with image inside another div.
Here is a fiddle of my problem.
I need to work with percentages due to responsive design.
I realize that the problem is may be caused by the "width" of the pseudo element, because when I change the width of the child element to 99%, it jumps back where it should be, but why is this necessary? I don't want to use 99% as this can cause problems (when shrinking browser window it has to be eventually changed to 98%,97%...) and image is not touching sides of it's parent element. Does anybody know the reason? Thanks.
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.parent {
width: 100%;
height: 100%;
}
.parent:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.child {
display: inline-block;
height: 25%;
width: 100%;
}
img {
width: 100%;
height: 100%;
}
<div class="parent">
<div class="child">
<img src="http://www.resortcollection.com/wp-content/themes/resortcollection/property-images/summit/summit-beach-resort-panama-city-beach-fl-beach-01.jpg">
</div>
</div>
The trick is to remove all whitespaces between parent and child divs, so there is no whitespace between :before and child. And also you should remember to add vertical-align to child
Example fiddle
Yes. When you put the :before pseudo-element in place it goes right at the start of the content, that is, before any spaces. So your horizontal layout is
before-pseudo single-collapsed-Space img
Zero width 4px (from the font size) 100% of container
Which is too big. Use margin-left:-4px; on the pseudo element to compensate.
See https://jsfiddle.net/xoks5f1e/5/
I will suggest my own solution that I've mysteriously did not see earlier. It is a solution that most of professional webdesigners use. And that is to remove the space/line-break between tags styled with display: inline-block.
Important note: When applying ::before pseudo element on some parent element (e.g. .parent), CSS will append this new pseudo element directly "before" the first child element of the node .parent. That means if the first child element of .parent is separated from the opening .parent tag by a new paragraph character or a space, then this white space character will also be before the newly appended pseudo element. And because of that, when using display: inline-block the white-space character will also affect CSS's pseudo element.
The solution in case you have the access to the HTML file, is:
First child of .parent must be directly after .parent's opening tag as #DenisSheremet suggested.
Make a real element instead of "pseudo" one in real DOM:
<div style="display: inline-block; height: 100%; vertical-align: middle"></div><
div class="child">
or more elegantly using comments:
<div style="display: inline-block; height: 100%; vertical-align: middle"></div><!--
--><div class="child">
If you have only access to CSS, than the only other choice what I know so far is the solution suggested by #Alohci to remove the white space with default font space width of 4px, using negative margin.
JSFiddle
For a simple landing page I wanted to let some text box overlap an header image. To make it simple, I just have a structure like:
<header>
<img src="path/to/img.png" />
<h1>Awesome headline</h1>
</header>
All elements are set to display:block and the h1 is dragged inside the image with a negative margin. I also gave the headline some padding and background:white.
Now the problem: The headline text is shown on top of the image but the background colour is behind it! You can see an example here: https://jsfiddle.net/cv12evLn/
My guess is, that a browser renders all sibling blocks in layers, starting with all backgrounds and borders, then rendering images (img-tags) and finally text on top of everything else.
Is that right? And why the actual… I mean, that seems crazy unexpected to me.
To solve the issue, I've put the headline in a wrapper and set this to position:absolute. See here for a live example: https://jsfiddle.net/f5sd1u6o/
Use position:relative rather than negative margin. Then the z-index works automatically.
#container {
width: 500px;
height: 300px;
margin: auto;
}
#container img {
display: block;
width: 100%;
}
#container h1 {
display: block;
width: 50%;
height: 1em;
margin: auto;
padding: .5em 1em 1em;
font-size: 3rem;
background: yellow;
text-align: center;
border: 1px solid red;
position: relative;
top: -4.6rem;
}
<div id="container">
<img src="//placekitten.com/500/300">
<h1>
headline
</h1>
</div>
To get the Z-index to work, you need to apply position:relative anyway but you can still use negative margin if that is a design requirement.
JSfiddle demo (with negative margin)
Basically, backgrounds are rendered first before anything else (as I understand it) so they always come at the bottom of the stacking order. You just need to create a new stacking context and changing the position property does that.
As it happens so does changing the opacity of the element so a quick fix is to set opacity:.9999;
JSfiddle Demo (opacity 'hack')
I am trying to set the background color of my container div and all child div's within it but I can't get it to work for some reason, and I am unsure as to where I am going wrong.
When I set the background-color and a border on the container you can see that it is not actually "containing" any child elements.
#facility_container{
text-align: center;
padding: 2px;
width: 100%;
background-color: #ffffff;
}
Here is a JSFiddle demonstrating where I am at so far.
Add overflow: hidden to #facility_container, #facility_general_info, #facility_section_info
Float makes the inner divs not expand the outer ones. Using table settings to style your page is a big no-no in HTML5.
working jsfiddle: https://jsfiddle.net/nayish/docg128w/8/
The issue here is that, since your #facility_info divs are floated, they are taken out of the normal element flow, and therefore do not affect the width or height of the #facility_container div.
As suggested by Jon Ducket in his book HTML & CSS:
Set the container div's overflow property to auto, and its width property to 100%.
#facility_container {
text-align: center;
padding: 2px;
width: 100%;
background-color: #ffffff;
width: 100%;
overflow: auto;
}
In this case, since #facility_general_info already takes up width and height, it is not necessary to set #facility_container's width to 100%, but the above-mentioned property values can be used for elements that contain only floated elements.
I am a bite confused on what is happening here. I put my body margin set to 0 in my css and then all the div elements stretch across the screen like I want, but I want this to apply for only one. From a previous question: HTML Image going across entire screen
An answer said to use position:absolute and then change the position of the div elements. I used to have position:relative on these div elements and when I changed that to absolute, it combined all the div elements in one position. I tried moving them with bottom:then whatever pixels, but still did not move it at all. Would this be the way to move it? What would I do? On W3 schools: http://www.w3schools.com/css/css_positioning.asp
It tells me a lot about positioning div elements, but when I tried to use this it did not work on one div element I tried, but instead overlapped it.
How would I move these div elements?
Code CSS
#middle-4{
position:absolute;
left:0;
right:8;
bottom:0;
top:-800px;}
Code HTML
<div id="middle-4" style="background-image: url(images/Home/rock.png); height: 540px; width: 1348px; border: 1px solid black;"></div>
This is done so for as you can see up to 4 div elements.
If I understand your question correctly you want all element to conform to the default body margin except one element (or multiple elements using a class).
I would do it like this...
Give body a specific margin to ensure it is consistent across browsers.
Use negative horizontal margins to pull your element outside of the constraints of body
body {
margin: 8px;
background: lightGreen;
}
div {
background: lightBlue;
padding: 30px;
border-bottom: 1px solid blue;
}
.fullwidth {
margin-left: -8px;
margin-right: -8px;
}
<div>I'm constrained by body</div>
<div class="fullwidth">I'm full width</div>
<div>I'm constrained by body</div>
Setting margin on body only ensures cross-browser consistency as mentioned by uʍopǝpısdn
If you have 4 divs containing an image each, you should stick to position: relative - this will line up the divs / images vertically on top of each other.
Your issue might have to do with image sizes - if you want all images to keep their original size, you can keep their attributes for width and height as specified in your example "middle-4": height: 540px; width: 1348px;
However - do you want one div / image to stretch across the width of body / screen, you will have to apply the size in percentage - this can be done in 2 ways:
CSS3 - you have the options of "cover" or "contain", which can be applied to div as youre doing it now - example:
div {
background: url(images/Home/rock.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
CSS2 - you can apply a class to the image itself, and forget about the surrounding div - example:
<img src="images/Home/rock.png" class="img_width" />
.img_width {
width: 100%;
height: auto;
}
I want to display 2 divs in a single line. I have a parent div and two child divs.I want to keep the width of first child div and parent div equal. So the header(label of first child div) displays always middle position of parent div and I want to display the second child div at the right side in the same line of parent div.(Condition is always label of first child div should display middle of parent div). Here is the jsfiddle.
If I were styling this header section for a website, and I wanted some flexibility in styling the various elements, here is out I would start.
For my HTML:
<div class="head">
<div class="innerfirst">
<h1>ABCDEF GHIJ</h1>
</div>
<div class="innersecond">
<label>RIGHT1</label>
<label>RIGHT2</label>
</div>
</div>
I would put the page title in a <h1> tag so that I can adjust font-size, padding, background color and so on. In fact, you could add a tag line below the title line and various background images. Having .innerfirst and h1 gives you quite a bit of flexibility.
The <label> tags don't make sense semantically in this context, but perhaps you will have have input fields later like a search box.
For the CSS:
.head {
background-color:#2191C0;
width: 100%;
height: 85px;
position: relative;
}
The above is fine, set position: relative so that you can use absolute positioning for one of the child elements. The fixed height is a good idea, makes it easier to adjust elements vertically.
.innerfirst {
}
.innerfirst h1 {
text-align: center;
color: #FCFCFC;
padding-top: 10px; /* You could also use a margin... */
}
By default, .innerfirst will have 100% width since it is an in-flow block element, same with the h1 element. You can center the text within h1, and adjust color, padding and margin as needed.
.innersecond {
border: 2px solid lightgray;
color: white;
position: absolute;
width: 25%; /* Set this or by default it will shrink-to-fit content */
height: 61px; /* Set this or by default it will shrink-to-fit content */
top: 5px;
right: 5px;
padding: 5px;
}
What you could do is create a box of text and absolutely position it to the right. It is a good idea
to set a height and width otherwise, as a result of the absolute positioning, the div will shrink to fit the content, which is sometimes useful. The top and right offsets will position the .innersecond to the top-right of the parent container because you set position: relative in .head.
.innersecond label {
display: block; /* optional if you want block behavior */
border: 1px dotted white;
}
Finally, if you want the label tags to behave like blocks, use display: block and style according to you design requirements.
For reference, demo fiddle: http://jsfiddle.net/audetwebdesign/qpb9P/
Here's an updated jsfiddle. Read up on the display property!