Simple background color div without white space - whitespace

Trying to create a content box that has a background color of white. It is inbetween the header div and footer div which are both images. I can't get it to align with the two divs AND have it without white space, only one or the other.
This is the CSS:
#content {
background-color:#ffffff;
width:1024px;
margin: 0 auto;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
padding: 0;
display: inline-block;
}
How do I get the content box to align with the rest of the page and not have any whitespaces?
This is what it looks like at the moment, I want to get rid of the space between the HELLO box and the images above and below it.

It doesn't seem as a clean solution to me, but here I go:
#content {
margin-top: -15px; margin-bottom: -15px;
}
Actually I don't know if -15px is good enough, you should try your own values.

It's not a great solution, but with the given information it's the only one i can come up with.
CSS
#content {
background-color:#ffffff;
width:1024px;
margin: 0 auto;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
padding: 0;
display: inline-block;
position:relative;
}
#topWhiteFix, #botWhiteFix {
position:absolute;
left:0px;
height:12px;
width:100%;
background:#FFFFFF;
}
#topWhiteFix {
top:-12px;
}
#botWhiteFix {
bottom:-12px;
}
HTML
<div id="content">
<div id="topWhiteFix"></div>
<div id="botWhiteFix"></div>
HELLO
</div>
(Untested)

Related

Position figcaption vertically centered and next to image?

I have an image and a caption within a figure tag. I was wondering how I can get the figcaption positioned next to the img and vertically centered, like the image attached.
Here's a jsfiddle I set up.
Thank you!
Here you go, just replace the css with following:
html { font-family: 'Helvetica-Neue', Arial, Helvetica; font-size: 1em; line-height: 1.4; letter-spacing: 1px; color:white; }
figure { float:left; padding:20px; display:block; background:#ffa2df; position:relative; }
.width { width:50%; }
.height { height:15em; }
img { width:auto; height:100%; float:left;}
figcaption { background:#5800ff; height:100%; display:flex; justify-content: center;
flex-direction: column;
text-align: center;
float:left;
}

CSS cut-off corners on image (<img> tag) without div

I'm trying to get a CSS-only solution for a cut-off bottom right corner on every image in a page.
So far, I have come up with this:
img::after {
content: url(/images/whitecorner.png);
height: 20px;
width: 20px;
display: inline-block;
float: right;
}
But the doesn't appear in the document anywhere. (I'm using the Chrome inspector).
I hope someone can point me in the right direction. Thanks in advance!
Example
You can not use ::after with img.
Same with inputs, this is because they are self closing (/>) and hold no content.
What you could do is something like this:
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
and then use
.cut-image::after{
/*styles*/
}
In my example I used:
HTML:
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
CSS:
.cut-image{
position:relative;
float:left;
margin:0 5px;
overflow:hidden;
}
.cut-image::after {
content: '';
position:absolute;
bottom:0;
right:0;
height: 0px;
width: 0px;
border-left:40px solid transparent;
border-top:40px solid transparent;
border-bottom:40px solid white;
border-right:40px solid white;
}
img is an inline element and :before or :after won't work , you'll have to wrap the img with a div
this is probably what you need:
http://jsfiddle.net/h7Xb5/1/
this is the css:
div {
width:300px;
height:300px
}
div:hover:before {
content:"";
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
background:url(http://www.linobanfi.it/immagini/lino_banfi_3.jpg) no-repeat center center;
}

Centering image and text within a div

In my asp.net mvc4 view I have some nested divs to show an image and under it a text like below:
<div id="Outer1" class="elementStatus">
<div class="image"> <!-- THIS IS THE IMAGE -->
<img id="MyImg1" src="#Url.Content("~/images/Image.gif")">
</div>
<div class="text"> <!-- THIS SHOWN THE TEXT UNDER IMAGE-->
Statuts Text
</div>
</div>
and the css:
.elementStatus
{
visibility: hidden;
}
.image{
float: left;
margin-top: 2px;
padding-top: 1px;
padding-left: 10px;
width: 35px;
}
.text{
float: left;
margin-top: 1px;
padding-left: 14px;
padding-bottom: 2px;
width: 35%;
font-weight: bold;
font-size: 1em;
}
I want that the image in the first div to be centered horizontally and vertically in the div where it is placed. The same for the second div, I want the text to be centered horizontally and vertically within its div. So how to do it?
Please, do not downvote!
Recommend a background image:
.image {
background-image: url('~/images/Image.gif');
background-repeat: no-repeat;
background-position: center;
background-size: 35px 35px;
}
For the text:
.text {
text-align: center;
}
For vertical text alignment:
.text {
line-height: 35px;
height: 35px;
}
This is a pretty broad question but it's easily solved using flexbox (assuming you're supporting newer browsers). Going to remove vendor prefixes for the sake of clarity but you'll want something like this:
#Outer1 {
display: box;
box-align: center;
box-orient: vertical;
box-pack: center;
}
http://jsfiddle.net/VqwLH/
Since you have updated saying you need support for older browsers, I think you can use display: table-cell for the parent container:
#Outer1 {
display: table-cell;
height: 500px;
width: 500px;
border: 1px solid red;
vertical-align: middle;
text-align: center;
}
http://jsfiddle.net/VqwLH/1/

Text overflow ellipsis, in span between floated left span and a floated right span

I am having trouble ellipsis text (.title) found in between a span that is floated left and a span that is floated right. When overflow occurs .length is pushed down onto a new line. How can I fix this?
JS FIDDLE:
http://jsfiddle.net/VfHdS/6/
HTML:
<div class="song">
<span class="tracknumber">4</span>
<div class="title">This is the song tittle!!!!!!!!!!!</div>
<span class="length">4:31</span>
</div>
CSS:
.song {
font-size: 14px;
padding: 2px 20px;
}
.tracknumber {
margin-right: 10px;
}
.title {
color: #262626;
display:inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.length {
float: right;
}
Using the sample html you provided I set up a fiddle. Setting the .title element to display block is what gets the ellipses to show up.
http://jsfiddle.net/f4uUJ/
I've also repositioned the track number and play time absolutely so the song title can be 100% width. You just need to add padding to the track to give the title some breathing room.
CSS
.song {
font-size: 14px;
padding: 2px 40px 2px 20px;
position:relative;
}
.tracknumber {
position:absolute;
left:0;
top:2px;
}
.title {
white-space: nowrap;
width: 100%;
display:block;
overflow: hidden;
text-overflow:ellipsis;
}
.length {
position:absolute;
right:0;
top:2px;
}

li Background Image Not Showing

I have looked through a tonne of posts which have similar issues, but I just can't figure out my problem. Please could someone help, it is driving me insane.
The below code is for my Site Navigation. I would like the background to be an image rather than just a background colour. I would also like the background image to change on hover. As our Meerkat friends would say...Simples!....but not for me.
<div class="sub-menu" id="sub-menu">
<ul>
<li><a class="on" href="#" title=" You Are Here ">ยป Overview</a></li>
<li>Endorsements</li>
<li>The Detail</li>
<li>Funding</li>
<li>Apply Online</li>
<li><a class="end" href="graduates-terms.html" title=" Terms & Conditions ">Terms</a></li>
</ul>
</div>
div.sub-menu { position: relative; width: 920px; height: 40px; padding: 0; margin: 0; border-top: solid 1px #FFFFFF; }
#sub-menu ul { list-style: none; padding: 0; margin: 0; }
#sub-menu li { float: left; margin: 0; }
#sub-menu li a { padding: 0 30px; width: 93px; height: 40px; line-height: 36px; text-align: center; float: left; display: block; color: #FFFFFF; text-decoration: none; background-color: #555555; border-right: solid 1px #858585; }
#sub-menu li a:hover { color: #050505; background-color: #f3b607; }
#sub-menu li a.on { background-color: #555555; color: #FBAF5D; cursor: default; }
#sub-menu li a.end { width: 89px; }
#sub-menu li a.end-on { text-align: center; float: left; display: block; color: #FBAF5D; text-decoration: none; border-right: none; }
/* Hide from IE5-Mac \*/
#sub-menu li a{ float: none }
/* End hide */
#sub-menu { font-weight: normal; font-size: 14px; font-family: verdana; }
Thank you, I really appreciate your help.
In your question subject, you said you wish to put background image to "li" tag, but as per the code you have shown, you have given background to "a" tag.
You can put background image and color both together to any of the tag "li" and "a"
Eg.
background: #00ff00 url('smiley.gif') no-repeat fixed center;
For details refer:
http://www.w3schools.com/cssref/css3_pr_background.asp
If you want to put hover effect as well, implement it on anchor "a" tag. Because old browsers like ie6 doesn't have inbuilt support for li hover effect.
Use following pattern.
a{
background: url('img1') no-repeat fixed center;
}
a:hover{
background: url('img2') no-repeat fixed center;
}
Hope it helps you.

Resources