I have the layout here: http://jsfiddle.net/chricholson/susXf/11/
In Chrome and Firefox you'll notice there is a 1 pixel gap between the edge of the red box and the image. In IE 8, this isn't there (as expected).
This does not happen if I specify the width and padding using pixels.
My guess, although I cannot be sure, is due to the calculations of percentages and how numbers are rounded. The 6% for the padding works out to be 20.94px, the width of the p works out as 328.06. Assuming both are rounded down (despite the fact the first should be rounded up), then the total width is 348px, which seems to be the cause of the problem. IE is maybe more intelligent and rounds up correctly?
Nevertheless, has anyone else come across the same situation and found a fix?
The error is actually caused because of your parent element. You have the width set at 349px. Some browsers, depending on available screen space, will round up or down by default.
It's generally a good practice to use nice widths when using percentages.
Solution: http://jsfiddle.net/vonkly/susXf/29/
This solution allows for an unset, arbitrary image width to define the wrapping element's width and thus, the child span and <p> widths. This achieves the goal of the OP on the fly, without having to manually enter custom classes or width declarations.
CSS
img {
width: 100%;
max-width: 100%;
}
.videoThumb {
position: relative;
display: inline-block;
padding: 0;
}
.videoThumb .details {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: #000;
background-color: red;
}
.details p {
display: block;
padding: 14px 4%;
margin: 0;
}
HTML
<div class="videoThumb">
<img src="http://www.chainreactiondisco.com/images/disco_panel_02_01.jpg">
<span class="details">
<p><!-- containing element for black box -->
Watch<br />
Signature Manager vs. Mail Dislcaimers
</p>
<span><!-- /details -->
</div><!-- /videoThumb -->
NOTE
If you are planning on using any <p> tags inside span.details, I'd suggest changing your css a bit. All you need to do is change .details p {} to .details span {}. Then go to your HTML and change the <p> tags to <span> tags.
Related
I am new with css and im stuck
I have a parent div containing 3 imgs. When I shrink the imgs the parrent div keeps original size. It shrink does shrink with the imgs. How can I make sure that the div-element shrinks with img? Because i have a lot extra space after the last img.
I tried al the: block, inline-block, inline selectors.
I hope that one you can help me. Thank you for your time.
https://jsfiddle.net/7p479cfq/
<div class="logos">
<div class="dealer">Ekris</div>
<img src="assets/img/bmw-logo.png" alt="" class="bmw-logo">
<img src="assets/img/m-logo.png" alt="" class="m-logo">
<img src="assets/img/i-logo.png" alt="" class="i-logo">
</div>
div.logos {
display: block;
background: blue;
position: absolute;
top: 0;
right: 0;
}
.dealer {
display: inline-block;
font-size: 1.3em;
font-family: Arial, serif;
font-weight: bold;
}
img {
width: 20%;
height: 20%;
}
The problem is that you are setting the widths of the images but those percentages are calculated based on the parent. So, if you have your images set to 15% of the parent, then they are going to only take up 15%. For example, let's say the div is 300px, 15% of 300 is 45. You have three images. 3 * 45 = 135. Then, you have another div of an unspecified width that takes up some more space, but only as much as the text of it is. Let's say that for a short name, like you have, it only takes up 15px. So now you have 135 + 15 = 150. But your div is 300, so that leaves you with 150px of un-filled space.
It's not clear what you are looking to happen here, but, if you are looking to set your divs to take up an equal amount of whatever the parent is, you can just divide that equally. It's a little bit of a gamble if you don't set a width on the name div as well, but for arguments sake, let's say you want the four items to take up the same width: 100% / 4 = 25%.
I also added borders around the divs so you can see what is happening and left a commented out 40% so you could uncomment that to play around and get an idea of what is happening.
And because nothing is ever easy, because the images are inline there is some default spacing that comes with them because of font size. In the example I set the font-size of the parent to 0 to remove that as an unknown quantity and then just set the font-size on the div that actually has the text.
Again, it depends on what exactly you are looking for, but understanding what is going on might help you figure out how to achieve something else if this isn't what you had in mind.
https://jsfiddle.net/7p479cfq/1/
* {
box-sizing: border-box;
}
div.logos {
display: block;
background: blue;
position: absolute;
top: 0;
right: 0;
font-size: 0;
/* width: 40%; */
}
.dealer {
display: inline-block;
font-size: 1.3em;
font-family: Arial, serif;
font-weight: bold;
width: 25%;
font-size: 14px;
border: 1px solid red;
}
img {
width: 25%;
border: 1px solid red;
}
I think the problem here is an understanding of what's happening. Because you are specifying percentages on the width of the images, that percentage is a percentage of the parent element, not a percentage of the natural img size.
To solve this use pixel widths on the images and the space within their parent div disappears. Otherwise, if you want to fill the space then use percentages that add up to 100% - eg. 5 x images with 20% width each. Also, consider what width the text element will take up.
I tested this in Chrome. When I deleted width: 20%; from img, extra space disappeared.I'm not sure why it happpened. I hope this solves your problem
I'm generally new to responsive web design and am trying to make a video site template. When I make the wave graphic responsive in the div tag the width works perfectly. However the height leaves a gap between the image (as if the height isn't responding base don the width) and the div tag and showing the background color red of the 'wave1' div.
You can see it here on jsFiddle on any screen size.
Any idea how to fix this???
Here is my code:
<div id="wave1">
<img src="images/wave1.jpg" alt="wave 1">
</div><!--wave1-->
#wave1 {
background-color:#C31619;
width: 100%;
height: inherit;
padding: 0;
margin: 0;
}
#wave1 img {
width: 100%
}
The red line you are seeing is the space between tags being rendered as text, and therefore taking up the equivalent space of a single character in the document flow. Simply set the font-size on the container to 0, then to 1rem (the value of the front size of the root element) on the children
(Demo)
#wave1 {
background-color: #C31619;
width: 100%;
height: inherit;
padding: 0;
margin: 0;
font-size: 0;
}
#wave1 * {
font-size: 1rem;
}
I've played with this for a while now and literally cannot see a reason as to why this is happening.
Giving
#wave1 { margin-bottom:-4px; }
works, but is certainly not the best fix as the gap is not being caused by margin and may simply break again in future.
The gap between the red bottom of the wave div and the video is caused by the padding on your "outer" div. You have:
.outer {
padding-top: 1%;
...
}
To remove the gap, remove that padding.
https://jsfiddle.net/oxn6zLar/
The height: inherit line is not necessary.
try adding display: block to your img's css.
The default display value for HTML img tags is inline, meaning that the image is rendered inline with text, and is given a line-height value, which causes the blank space underneath the image to appear (due to difference between the image height and the line height).
Another workaround would be to set vertical-align: bottom on the img element so that the difference between the line-height and the image height will be on top of the image.
I am trying to display a four grid with different items for my web, however now all children divs have the same size:
<div class="container">
<div class="grid4">
<input type="submit" name="input1" value="input1"/>
</div>
<div class="grid4">
<input type="submit" name="input2" value="input2"/>
</div>
<div class="grid4">
<input type="submit" name="input3" value="input3"/>
</div>
<div class="grid4 no-border">
<input type="submit" name="input4" value="input4"/>
</div>
</div>
CSS:
.container {
width: 100%;
margin: 30px 0 30px 0;
}
.grid4 {
width: 25%;
padding: 20px;
border-right: 2px solid rgba(40,40,40,0.8);
display: inline;
}
.no-border {
border: none;
}
I tested it in jsfiddle and they indeed have the same size:
http://jsfiddle.net/ME7k8/
However, you can clearly see that the last chil div is smaller:
Why?! Any help?
edit In case it is too small in the image:
elemento {
}
.grid4 {
width: 25%;
padding: 20px;
border-right: 2px solid rgba(40, 40, 40, 0.8);
display: inline;
}
div {
text-align: left;
}
body, div, td {
font-family: 'Noto Sans',Arial,Helvetica,sans-serif;
font-size: 12px;
color: #666;
}
Inherited from body
body {
text-align: center;
}
edit I checked again with the browser inspector and I can see that the first div is about 50% of the .container div. It has exactly the same css properties than the rest of the divs.
The 3 first divs are wider than the last due to:
1. They have the CSS display:inline (meaning their width gets effected by white-spaces, line breaks etc).
2. The last div has no border unlike the first 3.
Give them identical width
So what you need to do to make sure all 4 divs have the same width is removing all white-space between the submit buttons and their parent divs, and also add padding-right:22px; to the last div (if you want the 4 divs exactly identical wide).
jsFiddle demo.
I use your jdFiddle and put a blue background to see the difference, all divs have the same size, however, I declare a size for the container
.container {
width: 1200px;
background-color: tomato;
}
and re adjust the size of the divs with the grid4 attribute
.grid4 {
display: block;
float: left;
width: 20%;
padding: 2.3%;
border-right: 0.2% solid rgba(40,40,40,0.8);
display: inline;
background-color: blue;
}
when you put padding to each one (20px) that pixels are added to the "25%" of total size.. so this make it a bigger element, and probably that's the difference you couldn't see... with that on mind, may be you could solve your problem... Check This...
Your last element has no border, while the others probably do.
Borders take up space, as do margin and padding.
Check out the box model by pressing ctrl + shift + i in your browser and hovering over an Also,
http://www.w3schools.com/css/css_boxmodel.asp
From inside to outside, there is padding, borderin, margin, outline.
The first three add size to your "box model". Outline does not.
If you specify a width or height, any padding, border, or margin will make your element not that specified width or height anymore. Needless to say, this makes for all kinds of headaches
One solution around this is to use box-sizing: border-box;
This makes specified padding and border actually be your specified width or height. Margin will still add to the dimension, which makes sense if you think about it.
http://css-tricks.com/box-sizing/
Also be sure to take care of prefixes so that it works on all browsers.
You may not want to deal with this at this point, but check out the example in the last link, as well as caniuse.com.
If you don't want to handle cross browser support manually, there is a library to automatically post-process your CSS to add the appropriate prefixes. This uses the caniuse.com database so as long as you update this library, your post-processed css file will have the up to date prefixes without you having to worry about keeping up with browser versions or individual css feature deprecations.
https://github.com/ai/autoprefixer
article on auto prefixing
http://css-tricks.com/autoprefixer/
I'm studying the CSS formatting of an absolutely positioned <input>.
I'd like it to "stretch" inside its container (which is also positioned "absolute") so that it leaves for instance 30px both left and right, and fills all the space within...
I already found a sample on w3.org site, which uses both left and right to create a kind of "frameset" in CSS.
I also read an article from A-List-Apart talking about this kind of technique and found several other questions here dealing similar troubles, but none of these focuses the specific issue I'm going to describe. I also found that I can wrap the inner <input> with a <div>, but I'd like to dig a bit more on this subject to understand why it is misbehaving...
Here is a working sample I made to test and clarify the idea.
In short it is something as simple as this:
<div id="sidebar">
<input type="text" value="input" />
</div>
with a style like this:
body { height: 100% } /* Required for percentage heights below */
#sidebar {
position: absolute;
top: 0;
height: 100%;
left: 0;
width: 160px;
}
#sidebar input {
position: absolute;
margin: 0;
padding: 0;
height: 21px;
left: 30px;
right: 30px;
width: auto;
}
The interesting point is on the last three lines, when I set left and right and leave width as "auto".
The outcome is that it only works as expected using Chrome (v.26), but in FF.20 or IE.10 it looks broken: the <input> extends beyond the right margin of its container div.. much the same you get when putting width:100% and only settings left position...
The funny part is that this approach with DIVs and inline-block SPANs works as expected across all three browsers.
Is it a bug on browsers' side? Is there a way to make it work without the workaround to enclose <input> with width:100% inside another <div> positioned in the described way?
Hope that someone has a clue on this.
PS: I'm focusing on "modern", html5 browsers, so I don't mind if it won't work on IE8 or older..
Observations
I'm surprised by this behavior. top-right-bottom-left absolute positioning works marvelously (and has for years) but it's ignored by IE 10 and FF on input type="text"
Red herring: your approach does work with input type="range" but not input type="number" in IE 10. Perhaps this is related to which inputs the browser takes sole responsibility for drawing, versus those inputs that may thinly wrap functionality already provided by the OS.
In FF (PC/Mac) I observed that the size property of the input seems to override anything but an explicit width assignment. For example, setting size=4 will make the input more narrow than desired. The observed width seems to be the result of an implicit size=20 value.
Workarounds
All that said, I do have a potential solution which doesn't require extensive changes to your code and works in IE9/10, FF (PC/Mac), Chrome (PC/Mac) and Safari (Mac).
Demo: http://jsfiddle.net/ws9hf/13/
#sidebar .x {
position: absolute;
box-sizing: border-box;
width: -webkit-calc(100% - 60px);
width: calc(100% - 60px);
left: 30px;
right: 30px; /* fallback */
}
This uses the cacl() function which has decent browser support. It's worth noting that this feature is deemed "at risk" by the W3, so its future may be uncertain.
As "cool" as the calc() function is—being pragmatic—I'd probably wrap the offending input(s) in another element and be done with it. You'll achieve wider browser support, and future compatibility.
You can wrap the input inside a container div, and perform the styling on that div.
here is an example
<div id="sidebar">
<div id="inputContainer">
<input type="text" value="input" />
</div>
</div>
body { height: 100% } /* Required for percentage heights below */
#sidebar {
position: absolute;
top: 0;
height: 100%;
left: 0;
width: 160px;
}
#sidebar #inputContainer {
position: absolute;
margin: 0;
padding: 0;
height: 21px;
left: 30px;
right: 30px;
}
#inputContainer{
width: 100%;
}
It is not exactly what you asked, but if you only care about modern browsers, you can use flexbox instead.
You just need to specify that you are using flexbox and want a vertical direction, then you can set a margin of 30px, rather than using positioning:
#sidebar {
/* stripped out additional styles and prefixes */
display: flex;
flex-direction: column;
}
#sidebar x {
margin: 0 30px;
}
See the demo at http://jsfiddle.net/ws9hf/8/
I have a fixed navigation bar on my website that stays at the top with links that take me to different sections further down the page. However, because my fixed nav bar has a height of 40px, the beginning 40px of every section is covered up. How would I offset where my links take me by 40px using either HTML or CSS?
Thanks.
You might try absolutely positioning "dummy" anchors 40 pixels above the top of each section. You can give them zero width/height and hidden visibility to ensure that these anchors don't affect how your page is displayed. When the user clicks one of the links in your fixed navigation bar, the window will scroll to the top of the dummy anchor, 40 pixels above the beginning of its actual section.
Example HTML:
<div class="navbar">
Anchor 1
Anchor 2
Anchor 3
</div>
<div class="section">
<span id="anchor1" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor2" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor3" class="anchor"></span>
Section Content
</div>
Example CSS:
body {
padding-top: 40px;
}
.navbar {
position: fixed;
width: 100%;
height: 40px;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid #ccc;
background: #eee;
}
.section {
position: relative;
}
.anchor {
display: block;
position: absolute;
width: 0;
height: 0;
z-index: -1;
top: -40px;
left: 0;
visibility: hidden;
}
For a working example, see http://jsfiddle.net/HV7QL/
Edit: CSS3 also includes the :target pseudo-class, which applies to an element whose id has been referenced by the href of a link in the document, or the hash value of the URL. You can apply a 40-pixel padding to the top of the :target that will be applied only to the section the user selects from the fixed navbar.
Example CSS:
.section:target {
padding-top: 40px;
}
This is semantically cleaner than the method described above, but won't work on older browsers.
Working example: http://jsfiddle.net/5Ngft/
I just happened to stumble across this problem myself today so I had been thinking about it for a bit already, but I think I just found a solution:
Add a padding-top: 40px; margin-top: -40px to the element that you want to jump to. The negative margin cancels the padding, but the browser still thinks that the top of the element is 40px higher than it actually is (because in fact it is, only the content of it starts lower).
Unfortunately, this might collide with already set margins and paddings, and if you're using a background on the targeted element it's going to mess it all up.
I'll see if I can work around that and post a jsfiddle, but in the meantime here's a basic answer at least :)
edited: I thought I had a solution for the background, but it didn't work. Removed again.
final edit:
It does kind of work if you know the background color of the wrapping element. In my example I know the text is on a white background, but the titles have a silver background. To prevent the title from having a background on the extra padding we set, instead I put it on a pseudo-element before it:
#three:before {
content: " ";
background: white;
display: block;
margin-top: -40px;
padding-top: 40px;
}
This way the extra padding has a white background again, but this only works if you already know what background it needs. Setting it to transparent for example will show the underlying background of the title itself, not of the article.
jsFiddle: http://jsfiddle.net/Lzve6/
Heading one is the default one you're having problems with.
Heading two is my first solution, guaranteed to work on almost all browsers
Heading three is using the :before pseudo-element, might not work on older browsers.