I have a div containing only an image with a height of 400px. The div has no padding but it's height is 406px causing an ugly grey 6px horizontal stripe below its img.
The reason for the grey background is that comparable divs may contain a caption beneath their img.
What causes the extra 6px and how can I get rid of it?
P.s. I'm aware the HTML markup is not semantic/HTML5 but I'd rather not change it.
The basic markup is
<body>
<div>
<div class='img w960'>
<img src='timg-960-480.png' alt=''>
</div>
</div>
</body>
The CSS for this example is
body>div{
font-size:20px;
width:26em;
margin:5em auto;
text-align:justify;
}
div.img{
border:0px solid #fff;
border-radius:.5em;
background:#ddd;
margin:1em 0;
width:1px;
overflow:hidden;
display:table;
}
div.w960{
position:relative;
left:-7em;
}
div.w960 img{
width:40em;
}
div.img h3{
margin:0;
padding:1em;
font-size:20px;
font-style:italic;
}
Set line-height: 0 on your div.img. This will affect the image caption h3 but you can correct that with an extra CSS line. The image is set inline and sits on the text baseline.
body>div{
font-size:20px;
width:26em;
margin:5em auto;
text-align:justify;
}
div.img{
border:0px solid #fff;
border-radius:.5em;
background:#ddd;
margin:1em 0;
width:1px;
overflow:hidden;
display:table;
line-height: 0;
}
div.w960{
position:relative;
left:-7em;
}
div.w960 img{
width:40em;
}
div.img h3{
margin:0;
padding:1em;
font-size:20px;
font-style:italic;
}
I always solve this problem by setting the image's display property to block (display: block;).
Related
So I want my boxes to stay the same position even when I shrink my window.
But for now when I shrink them, they will resize and push the floating box to the bottom space and not making a line together.
.bodybox1
{
border:1px solid black;
width:45%;
background:white;
margin:1% auto 2% auto;
text-align:center;
font-size:2em;
padding:3%;
overflow:hidden;
}
.boxcoverblack
{
text-align:center;
width:120px;
padding:7%;
border:1px solid black;
margin-top:2%;
}
.signuparea
{
width:30%;
float:right;
border:1px solid black;
text-align:center;
padding:3%;
overflow:hidden
}
.signuptext
{
text-align:center;
width:180px;
padding:7%;
word-spacing:15px;
border:1px black solid;
line-height:35px;
}
.freeshipping
{
float:left; /*image*/
}
<div class="bodybox1">
<img class="freeshipping" src="https://via.placeholder.com/500x300" width="500" height="300" >
<div class="signuparea">
<div class="signuptext">Sign up to get freeshipping coupon code! ( per phone number )
</div>
<div class="boxcoverblack">Sign up</div>
</div>
</div>
help me please....
http://jsfiddle.net/abxf6c9h/
.bodybox1 {
display:flex;
justify-content:center;
border: 1px solid black;
width: 100%;
background: white;
margin: 1% auto 2% auto;
text-align: center;
font-size: 2em;
padding: 3%;
overflow: hidden;
}
Try this. I guess you want this box displayed as flexed. Tell me if that gave you a hint . I just added:
display:flex;
justify-content:center;
See my fiddle:
http://jsfiddle.net/abxf6c9h/1/
You need to use flexbox and a bit of arrangements :
use
display:inline-block
instead of
float:left
use vertical-align:top to remove the auto centering align from the wraping div
and finaly
display:flex;
flex-wrap:nowrap;
to the parent of the 2 involved divs
Here's the result
fiddle
I am trying to position text using div, but its not working well!
.background
{
background-image:url(bg.png);
width:600px;
height:500px;
margin-top:0px;
margin-left:0px;
}
.head1{
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
margin-top:100px;
margin-left:100px;
}
.background is the background image of the div whereas .head1 is a text within .background div.
You can see it in the html part!
<div class="background">
<div class="head1">There are 3 CRUCIAL things that you need to remember...</div>
<div class="points">
</div>
</div>
The text of class head1 are displayed at positions as they are defined! but it also bring the the background image with it!
It seems quiet confusing so I took a screenshot! please check it out!
Maybe my css is poorly coded. please help me out.
Add overflow: auto to parent div.
.background {
background: red;
width:600px;
height:500px;
overflow: auto;
}
.head1 {
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
margin-top:100px;
margin-left:100px;
}
http://jsfiddle.net/L7q5g6yu/2/
Zero margins on .background can be removed, zero margin is default value for divs.
OR
you can remove the inner div, see this code, it makes the same if you need the inner div just to align the text.
<div class="background">
There are 3 CRUCIAL things that you need to remember...
</div>
<style>
.background {
background: green;
width:500px;
height:400px;
overflow: auto;
padding: 100px 0 0 100px;
color:#d45151;
font-style: italic;
}
</style>
http://jsfiddle.net/L7q5g6yu/3/
Use the following style
.head1 {
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
padding: 100px 0 0 100px;
}
I've made this code for navigation bar.
HTML :
<div class="header-nav">
<div class="header">
<img src="../Pictures/LifeFrame/2.jpg" width="100%" height="100px" />
</div>
<div class="nav" align="center">
Home
Gallery
</div>
</div>
CSS :
.header-nav {
position:fixed;
top:0;
width:100%;
left:0;
right:0;
}
.nav {
height: 42px;
background-color:#FF0000;
}
a {
display:inline-block;
width:50%;
height:42px;
float:left;
}
but the text in tag a is on top not in middle. how to make the text in a tag with display inline block to middle ?
Since you're using float rule vertical-align may not work in this case so You can provide margins to this like following:
a{
display:inline-block;
width:50%;
height:42px;
float:left;
margin: 10px 0; /* add this */
}
OR
If you want to use vertical-align then you need to adjust width accordingly
a{
display:inline-block;
width:20%; /* reduce width */
height:42px;
/*float:left; */ /* remove this */
margin: 10px 0; /* add this */
vertical-align:middle;/* add this */
}
Demo
Updated Demo
Do you mean to center "Home" in the block you've created?
Try in css with padding.
a{
display:inline-block;
width:50%;
height:42px;
float:left;
padding-top: 2px;
}
Play with that
Try vertical-align: middle;
More info. on vertical-align: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Remove float and use vertical-align:
a{
display:inline-block;
width:50%;
height:42px;
vertical-align: middle;
}
Do it like this:
1) Keep your HTML as is.
2) Change your CSS as follows:
.header-nav {
position:fixed;
top:0;
width:100%;
left:0;
right:0;
}
.nav {
height: 42px;
background-color:#FF0000;
vertical-align:50%;
display:flex;
align-items:center
}
a {
width:50%;
float:left;
}
See fiddle here
You can try giving padding for the <a> tag
CSS:
a{
padding:10px 0;
display:inline-block;
width:50%;
height:42px;
float:left;
}
See the fiddle:
http://jsfiddle.net/xpfsyds2/
Add the following to your 'a' style:
line-height: 42px;
I'm having some trouble styling my news articles. This is preview of what I'd like to have:
On the left you always have an image (width is always the same, height isn't). On the right you have some information and a button on bottom aligned with the image.
<div id="newsItemImage">
<img src="" alt="" />
</div>
<div id="newsItemOther">
<p></p>
<button></button>
</div>
Float left on both of the divs. But the height of the two div's isn't the same. How can I make them equal?
This is what I have now:
.newsItemPic
{
width:333px;
border:1px solid black;
float:left;
height:100%;
}
.newsItemOther{
width:860px;
border:1px solid red;
float:left;
height:100%;
}
They are next to each other but the right content is not the same height as the image. So the image that's supposed to be under comes up under the content.
JSFIDDLE: http://jsfiddle.net/ZhD9Z/
Fiddle
as image is not responsive and it has 200px absolute width, i created one container width:500px;
then righttext must contain button itself but button must be aligned width image bottom, so righttext height equals with image height and button positioned at bottom:0
.eachNewsBox
{
padding:10px;
width:500px;
background-color:gray;
display:block;
float:left;
margin-top:20px;
}
.imgbox
{
display:block;
float:left;
height:100%;
position: relative;
}
.imgbox img
{
max-width:200px;
border:1px solid #000;
float: left;
}
.button
{
width:100px;
height:20px;
line-height:20px;
background-color:#FFF;
text-align:center;
margin-bottom:0px;
color:#000;
position:absolute;
bottom:0;
}
.rightText
{
float:right;
font-size:10px;
max-width:242px;
padding-left:10px;
color:#FFF;
height: 100%;
left:210px;
}
I set a background color for a div, but for some reason the color box is not underneath the text, but like 100px toward the top. This is my HTML code;
<div class="youtube_gallery_caption">The Fast Show - Unlucky Alf</div>
and This is CSS
.youtube_gallery_caption {
background:red;
color:black !important;
width:140px;
height:10px;
padding:10px;
position:relative;
z-index:99;
display:none;
}
Thank you.
Remove height and add line-height:30px...change the value to whatever height you want. Also, add overflow: hidden;. You might also want to add padding to just the left and right, versus all around, so you're not adding to the line-height. Instead this will remove any padding on the top and bottom padding:0 10px;
Try replacing your CSS with this:
.youtube_gallery_caption {
background:red;
color:black !important;
width:140px;
line-height:30px;
padding:0 10px;
position:relative;
z-index:99;
display:none;
overflow:hidden;
}
Your box has a height of 10px, and you font-size isn't specified so is likely larger.
Match up the font-size and line-height with the actual height of the div.
Eg: (using the 10px value):
http://jsfiddle.net/D2g9H/
.youtube_gallery_caption {
background:red;
color: black !important;
width:140px;
height: 10px;
font-size: 10px;
line-height: 10px;
padding:10px;
position:relative;
z-index:99;
}