so I'm messing around with jsfiddle..
http://jsfiddle.net/3mfnckuv/3/
For those of you who play Destiny, this is Destiny inspired haha..
but anyway, a few questions :)
1) Why is there the white space underneath the image?
2) I'm trying to put the image and description side by side. I wrapped the image in a div, then used inline block, rather than float. Is this a good approach?
3) How can I move the description div, higher and align it with the top edge of the picture?
4) I removed whitespace caused by inline-bock using margin-left: -4px. Is this a good approach?
5) Is it a good practice to set width and height to 100% on the body and html?
<ul class="test-2">
<li>
<div class="image"><img src="http://vignette4.wikia.nocookie.net/destinypedia/images/9/92/Invective_icon.jpg/revision/latest?cb=20150912145552" alt="invective" width="50px" height="50px"></div>
<p>Invective</p>
</li>
</ul>
html, body {
width: 100%;
height: 100%;
}
.test-2 li {
list-style-type: none;
}
.image, p {
display: inline-block;
border: 1px solid black;
}
Thanks guys
1) Why is there the white space underneath the image?
The default vertical-align of your image is baseline by default. Change it to top, bottom, or middle to get rid of the white space.
2) I'm trying to put the image and description side by side. I wrapped the image in a div, then used inline block, rather than float. Is this a good approach?
Sure. White space in your HTML between the image and the text will be rendered as white space on your page when using display: inline or display: inline-block. With float: left, the white space is collapsed.
3) How can I move the description div, higher and align it with the top edge of the picture?
Set the vertical-align: top on the element containing the text.
4) I removed whitespace caused by inline-bock using margin-left: -4px. Is this a good approach?
No. That white space is an actual space character. Collapse it using float: left or remove it from your html.
5) Is it a good practice to set width and height to 100% on the body and html?
Maybe. Won't hurt. This was a trick that helped columns fill the page. Today we can just set min-height: 100vh instead. The vh and vw units, representing view height and view width, respectively, are very handy.
Here I think I fixed your problems. Try this out. You needed to make your image class in the img tag. Also I put your p tag inside the same div as the image.
Here is CSS
body {
width: 100%;
height: 100%;
}
.test-2 li {
list-style-type: none;
}
p {
position: absolute;
top: -1px;
left: 110px;
}
.image {
display: inline-block;
border: 1px solid black;
}
Here is the div in HTML
<div><img class="image" src="http://vignette4.wikia.nocookie.net/destinypedia/images/9/92/Invective_icon.jpg/revision/latest?cb=20150912145552" alt="invective" width="50px" height="50px"><p>Invective</p></div>
Also when using css you don't have to put html for the body just body will do fine.
Related
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'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 have a DIV that is 100% width..... inside a grid system .. the total grid is 1140px..
anyway inside the div that is 100% i inserted a image...
problem is if the div background is black... there is like 1cm at the bottom that still shows the black color.
like this
http://jsfiddle.net/hb3QK/3/
<div style="background:black; width:100%;">
<img src="http://i42.tinypic.com/ofq9tg.png" >
should i be using a float on the image? or using a display:block?
here you do
http://jsfiddle.net/cancerian73/hb3QK/4/
img {
height: auto; /* Make sure images are scaled correctly. */
width: 100%; /* Adhere to container width. */
display:block;
}
add display: block; to style of image.
or you can add if you need to keep it inline.
line-height: 0;
to the image style.
So I am designing a website right now (pretty nooby at HTML and CSS) but I made a design on Photoshop beforehand so that I could go right through the coding and make the website how I wanted. Well I have an issue. I have two DIV elements inside of a bigger container DIV that won't line up side-by-side, despite using inline-block. Here is the css code:
.contentContainer {
display: block;
width: 700px;
height: 250px;
margin: 20px auto;
}
.topContainer {
height: 230px;
padding: 10px;
background-color: white;
}
.topThumbnail {
display: inline-block;
width: 370px;
height: 230px;
}
.topThumbnail img {
width: 370px;
height: 230px;
}
.topInfo {
display: inline-block;
margin-left: 10px;
width: 300px;
height: 230px;
}
.topInfo p {
width: 300px;
height: 230px;
background-color: pink;
}
The contentContainer is the highest DIV holding my topContent and topThumbnail so I thought I'd throw it into the provided code.
And the HTML code:
<div class="topContainer">
<div class="topThumbnail">
<img src="YT.png" />
</div>
<div class="topInfo">
<p>Testing the information area of the top container or something along those lines</p>
</div>
</div>
Can't post pictures to explain the issue.. need 10 reputation.. will make it hard to describe.
In the design the two containers for the Thumbnail and the Info are supposed to be side-by-side and aligned at the top. The thumbnail is supposed to be on the left of the topContainer and the Info is supposed to be to the right of the thumbnail with a margin of 10. For some reason the info is not going to the right-side of the thumbnail but rather going under it. I have ALREADY set the margin to 0 to fix the default margin issues.
display: inline-block is working correctly in your example. What you need to add is vertical-align: top to your .topInfo div, and get rid of the default margin on your .topInfo p tag. Also, you need to make sure that there is enough room for the .topInfo div to sit to the side of the .topThumbnail div, otherwise it will wrap to the next line.
Like this:
http://jsfiddle.net/hsdLT/
A cleaner solution: I would look at ditching the display:inline-block CSS proporties on these elements altogether and just float them to the left. Then clear the floats by assigning clear:both to the .topInfo css property.
It's less code then your route will be and it's more structurally sound. :D.
.topThumbnail,
.topInfo {
float:left;
}
.topInfo {
clear:both;
}
Other people have already answered this with the solution, but I think it is important to understand why inline-block elements behave this way. All inline, table, and in this case, inline-block elements have the vertical-align property. The default value is set to baseline, hence the need to set vertical-align: top;.
See the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
This other discussion is also helpful: Vertical alignment for two inline-block elements not working as expected
I have a problem concerning CSS and HTML.
I'm trying to wrap a DIV around another element (an UL in this case) and having it wrap around it and at the same time keeping both centered. As an added bonus I can't set a specific width since the width of the content inside the wrapping DIV have to be dynamic (since this is basically a template).
I've tried floating, and that works as far as wrapping goes, but then the thing ends up either to the right or to the left.
I'm going a bit crazy over this, and google is no help!
Thanks in advance!
UPDATE:
Sorry about not including code or images. This is what I'm trying to do illustrated with images:
One state of the UL width
Another state of the width
The wrapping DIV can't stretch the full width of the container. It has to wrap around the UL.
The dark grey is the DIV around the UL. I need the DIV to wrap around the UL (which has a horizontal layout) no matter the width of the content, since like I said above, the content of the UL is going to by different from time to time. The text in the LIs are going to change.
I also need it to be centered. I've made it work with float left and float right, but I need it to be centered.
This is the code I'm currently using for the container DIV and the UL and LI elements:
#container{
height: 100px;
width: 500px;
font-size: 14px;
color: #grey;
display: table-cell;
vertical-align: middle;
}
#container ul{
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
#container li{
background: url(checkmark.png) center left no-repeat;
display: inline;
padding-left: 20px;
margin-right: 5px;
}
#container li:last-child{
margin-right: 0;
}
UPDATED
I got it. Is it this you were looking for?? http://jsfiddle.net/vZNLJ/20/
#wrapper {
background: #ccc;
margin: 0 auto; /* to make the div center align to the browser */
padding: 20px;
width: 500px; /* set it to anything */
text-align: center;
}
#wrapper ul {
background: #aaa;
padding: 10px;
display: inline-block;
}
#wrapper ul li {
color: #fff;
display: inline-block;
margin: 0 20px 0 0;
}
#wrapper ul li:last-child {
color: #fff;
display: inline-block;
margin: 0;
}
<div id="wrapper">
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
This is an old post, but what you can do now is:
<div style="display: flex; justify-content: center;">
<div style="display: inline-block;">
<input type="button" value="Example Button" />
</div>
</div>
The problem isn't wrapping the DIV around the content, but getting the content to state it's actual size, therefore pushing the DIV boundaries out. There are several things that need to be considered when tackling this issue. Not just from an existing UL or LI tag, but a DIV within a DIV.
I use custom tags to help describe layouts cleaner. Custom tags are DIV tags, thus their properties must be manipulated by CSS in order to get the proper behavior.
<layout-linear horizontal>
<control-label>Label 1</control-label>
<control-label>Label 2</control-label>
<control-label>Label 3</control-label>
<control-label>Label 4</control-label>
<control-label>Label 5</control-label>
</layout-linear>
This layout suggests that the contents .. the control-label(s) tags .. will be display in a horizontal row. To get the border for the layout-linear tag to wrap around the content of the control-label tags, there are several things to do:
layout-linear[horizontal]
{
display : block;
box-sizing: border-box;
border : 1px solid black;
padding : 1px 1px 1px 1px;
white-space: nowrap;
width : 100%;
clear : both;
text-align : center;
}
First, the box-sizing property must be set to border-box. This will force the linear-layout (DIV) tag to wrap around content. Padding, Border, Margin will insure that an empty DIV tag displays. Other tricks to make an empty DIV tag display are to use or :after { content:.; visibility: hidden; }.
If you don't want the control-label tags to wrap, adding white-space : nowrap.
I will discuss text-align when I discuss the float property of the control-label tag.
The next part requires the inner DIV tags (control-labels) to properly specify their box-sizing type and borders.
control-label
{
display : inline-block;
/* float : left; */
box-sizing: border-box;
border : 1px solid black;
margin : 5px 5px 5px 5px;
padding : 5px 5px 5px 5px;
}
Display : inline-block, causes the control-label tags to flow left to right. Display : Block, will cause the tags to stack up vertically.
Float is commented out specifically to draw your attention to the fact that float will cause the layout-linear tag shrink to its smallest box size, based on the margins, padding, and border.
To have the control-labels flow right to left, add text-align : right to the layout-linear tag. Or in this specific case, set text-align : center.
Again, box-sizing is used to tell the control-label (DIV) tag to wrap around it's content completely. Not just the text, but the edges of the box as drawn by the border, padding and margin settings.
This arrangement of CSS properties is what causes the outer and inner boxes to be rendered properly, or as expected.
Happy Coding.
You didn't supply code, but take a look at this fiddle I just setup, which might help:
http://jsfiddle.net/qXDJr/
Please let me know if I'm misunderstanding what you mean. Example code will always help for future reference.
This might help.
If you cant set the width you can just add align='center' in the div wrapping ul
<div align="center">
<ul>
<li>MenuItem</li>
<li>MenuItem</li>
<li>MenuItem</li>
</ul>
</div>