I am having problems with my sidebar_box, as it is displaying a unwanted white space at the bottom of my images.
The thing is that this seems to happen only when I place an image inside (this doesn't happen with text or ul lists)
You can see this jsFiddle
My HTML structure:
<div id="sidebar">
<div class="sidebar_box">
<div class="sidebar_header">Advertisement</div>
<img src="./images/square_add.png" width="180" height="150" />
</div>
</div>
The relevant CSS to reproduce:
*{
padding:0;
margin:0;
}
img{
border:0;
}
#sidebar .sidebar_box{
width:180px;
background:#fff;
border:1px solid #000;
}
#sidebar .sidebar_header{
width:180px;
background:#ddd;
border-bottom:1px solid #000;
}
I am clueless and I have already tried everything of my knowledge.
Add vertical-align: bottom to your image. This happens because images are displayed inline, meaning they have to leave space below in case of q, p or other letters that drop below the baseline.
write this:
img{
border:0;
vertical-align:top;
}
Check this http://jsfiddle.net/sKE6y/1/
Related
What I'm looking for is that when I hover over an image or text it will automatically shows a box that contains a text related to that image. As follows:
CSS :
.owners{
width:500px;
height:300px;
border:0px solid #ff9d2a;
margin:auto;
float:left;
}
span.own1{
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 250px;
width:310px;
letter-spacing: 1px;
line-height: 20px;
position:absolute;
text-align: center;
text-transform: uppercase;
top: auto;
left:auto;
display:none;
padding:0 0px;
}
p.own{
margin:0px;
float:left;
position:relative;
cursor:pointer;
}
p.own:hover span{
display:block;
}
HTML :
<div class="owners">
<table width="100%" height="100%" align="center" border="1">
<tr><td width="%" valign="top">
<p class="own"><img src="images/avater.jpg" width="100" height="100" />
<br />
<font style="font-size:15px;">Employee Name</font><span class="own1">some text here should be shown here</span></p>
</td></tr>
<tr><td width="%" valign="top">
<p class="own"><img src="images/avater.jpg" width="100" height="100" />
<br />
<font style="font-size:15px;">Employee Name</font><span class="own1">some text here should be shown here</span></p>
</td></tr>
</table>
</div>
The output for the above codes is a table that contains list of employee images and their names. So when I hover the mouse on top of them, a box shows that contains the text related to it BUT they are shown behind the images and names, by that I mean I am looking to make this box stand in front of the images not behind them. I hope this makes sense! I've tried changing position:absolute and position:fixed but none works as needed!
You can check this also : http://jsfiddle.net/g1o8vyqd/
JSFiddle
Just add the code and you should confirm there is no z-index higher than your hover element.
z-index:9;
to:
p.own:hover span{
display:block;
z-index:9;
}
Use z-index:1 to raise the element above the rest:
p.own:hover span {
display:block;
z-index:1
}
Fiddle: http://jsfiddle.net/g1o8vyqd/3/
Note, also, that your markup is not very good: besides the fact that table is being used incorrectly (it's for tabular data), you are using the font tag, which is obsolete. (In fact, it was deprecated in HTML 4)
Do you mean something like this?
p.own{
margin:0px;
float:left;
position:relative;
cursor:pointer;
opacity: 0;
}
p.own:hover span{
display:block;
opacity: 1;
z-index: 99;
}
Alihamra, It sounds like you are looking for a tooltip. I would recommend cleaning up your code like the previous answers/comments outlined and then trying to utilize something like this: http://www.menucool.com/tooltip/css-tooltip.
Thanks
Here is the html code
<div>
<div class="fractop"><span>11</span></div>
<div class="fracbottom">2</div>
</div>
<div>
<div class="fractop"><span>5</span></div>
<div class="fracbottom">2</div>
</div>
Here is the css code
<style>
.fractop{
border-bottom:solid black 0px;
display:inline-block;
float:left;
margin-top:20px;
text-align:center;
width:100%;
}
.fracbottom{
display:inline-block;
clear:left;
float:left;
width:100%;
text-align:center;
}
.fractop span{
border-bottom:solid black 3px;
}
</style>
I need to make the "divide by" line for fractions stay fixed for 2 digits. It need not become longer or shorter dynamically.
change your .fractop span to this
.fractop span{
border-bottom:solid black 3px;
width: 17px;
display: inline-block;
}
while your approach isn't the best and you're over complicating things, to give you an answer within that approach, change your CSS to this:
.fractop{border-bottom:solid black 0px; display:block; margin-top:20px; text-align:center; width:15px; margin:0; padding:0 3px;border-bottom:solid black 3px;}
.fracbottom{ display:block; margin-top:20px; text-align:center; width:15px; margin:0; padding:0 3px;}
see fiddle here and change it at will
Here,
I have a working demo in this fiddle - put an HR between your two numbers, then style it as a line - does as you prescribe. I also added some inline styling to the parent div to help. You can easily move that to it's own css class though.
http://jsfiddle.net/rrp46faj/2/
<div style="width:20px !important;"><div class="fractop"><span>11</span></div>
<hr>
<div class="fracbottom">2</div>
</div>
<div style="width:20px;"><div class="fractop"><span>5</span></div>
<hr>
<div class="fracbottom">2</div>
</div>
You can use this ⁄
Example : <div class="fractop">4.0000 ⁄ 5.3456</div>
You can find more details here http://webdesign.about.com/od/localization/l/blhtmlcodes-math.htm
You can also see MathJax
The goal is to achieve this effect without adding any html tag (div, hr, ...) each three divs.
That mean through css only.
What I thought would be an idea was to set the line-height to 150px and underlining it.
But it doesn't seem to produce the result.
The css I use for now produces the result without the underline:
.projectContainer{
/*line-height:150px;
text-decoration:underline;*/
}
.projectBlock{
position:relative;
display:block;
float:left;
width:200px;
height:150px;
}
.projectImage{
position:absolute;
top:0px;
left:0px;
width:200px;
height:112px;
background-size:contain;
background-position:0% 50%;
background-repeat:no-repeat;
}
.projectCaptcha{
position:absolute;
top:113px;
left:0px;
width:200px;
height:88px;
font-size:12px;
}
And the html is a list of:
<div class="projectBlock">
<div class="projectImage" style='background-image:url(...)'></div>
<div class="projectCaptcha">MUSÉE RATH, GENEVE MAURICE BRAILLARD</div>
</div>
in a:
<div class="projectContainer">
...
</div>
If the comment is removed the result is not what was planed:
Thank you and sorry for my english!
Sounds like you could just add a border-bottom to .projectBlock.
.projectBlock {
border-bottom: 1px solid black;
...
}
You might need to add some margin and padding above and below to get the spacing correct.
You can just use the border property, and if you only want to select certain divs use nth-child(an+b) pseudo-class.
Fiddle
I think you need to clear the floats for each container.
.projectContainer{
height:150px;
border-bottom:1px solid #777;
clear:both;
}
I'm writing a CSS for a store. I need a div that sets the buy button to the left, and a Prev and View Next images to the right, which is working.
My real problem is that sometimes the "buy" button will be not present, because of the PHP.
When the buy button is not present images must be centered, because if they are not, it will be empty space to the left side (where the buy button was)
At first i think on margin:0px auto, but this will need a constant width set, right?
I really thought at the beginning this will be very simple. But i got stuck/
fiddle
Simplified to get the idea
I think im just missing something basic that i cant see know.
HTML:
<div id="comprarbtn">
<div id="wrappcomprarbtn">
<input class="comprarbtn commonButton" type="button" value="Buy Now" id="buynowlogin">
<div id="naviminicc"> <img src="images/navmini_01.png" class="navmini1">
<img src="images/navmini_02.png" class="navmini2" rel="#mies1"> <img src="images/navmini_03.png" class="navmini3">
</div>
</div>
</div>
CSS:
.comprarbtn { width:175px;
line-height:51px;
background-image:url(image.jpg);
border:0px;
font-size:12px;
padding-left:10px;
cursor:pointer;
overflow:hidden;
text-indent:0px;
z-index:10;
}
#comprarbtn {
float:left;
position:absolute;
width:321px;
text-align:center;
height:51px;
z-index:1000;
display:table-cell;
background-color:#f4f4f4;
}
#wrappcomprarbtn { margin:0px auto;}
#naviminicc { width:145px; float:right;}
#naviminicc a { margin:0px; padding:0px; }
.navmini1 { cursor:pointer; margin:0px; }
.navmini2 {cursor:pointer; margin:0px; }
.navmini3 {cursor:pointer; margin:0px; }
#navmini { width:135px; max-width:135px;}
I'm not sure what's going on with the CSS and HTML you posted, but to achieve what you want to do in theory:
Give the wrapping div a fixed width large enough to contain both the button and the images
Give it margin: 0 auto to center it and text-align: center.
Make the inner contents display: inline
css:
.wrapper {
width: 200px; /* Large enough to contain everything */
text-align: center;
margin: 0 auto;
}
.wrapper .buttons {
display: inline;
}
I just wanted to create a newsbox just by using CSS without so many IMG or TABLE crap. It works quite well but there will always appear a space between my image and the colored bar under the picture which should be directly under the picture not with some space between. Here is my code :
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<img src="img/newsbox1.jpg" width="270" height="140" border="0" />
<div class="news_box_bar"></div>
</div>
</div>
</div>
#mainbody {
margin: 0 auto;
width: 900px;
padding-top:30px;
padding-bottom:30px;
}
.news_box {
float:left;
width:288px;
height:348px;
background-color:#DDDDDD;
margin-right:5px;
margin-left:5px;
border:1px;
border-style:solid;
border-color:#BBBBBB;
}
.news_box_inside {
float:left;
margin:9px;
width:270px;
height:330px;
background-color:#FCFCFC;
}
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
}
I tried to set the margin and padding to zero for the image or trying position: or top: but somehow I can't get rid of the space. Anyone got a good solution ?
Best regards,
Kris
Add this to your CSS:
.news_box_inside > img {
display: block;
}
Example: http://jsfiddle.net/grc4/TV4zT/
Kris,
If you inspect <img> element by default it's css property display is set to inline-block, SO I suggest to apply style on <img> element and make it display:block
<img src="img/newsbox1.jpg" width="270" height="140" border="0" style="display:block" />
DEMO
Just add a margin to your newsbar as showm: DEMO
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
margin-top:-5px;
}
.news_box_bar {
background-color:#540000;
margin-top:-5px;
height:43px;
border:1px solid #892d2d;
}
set this in your CSS class
use link below to see working solution for your problem
http://jsfiddle.net/v7NwR/
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<figure><img src="http://static.adzerk.net/Advertisers/a04d6b3e25c747f48ef794d13e765425.jpg" border="0" /></figure>
<div class="news_box_bar">sdfgsdfgsdfg</div>
</div>
</div>
</div>
css
.news_box{ float:left; border:5px #444 solid;}
figure{ font-size:0%;}
#mainbody{ color:#000;}
.news_box_bar{ background:red;}