I want these 2 div tags so they are on top of each other. I have defined both of them as inline blocks because I need to give them properties like float, padding, border. Even after defining both the div tags as inline-block both of them are partially on same line.
Help appreciated :)!
<div id="legend" style="border:1px solid black; max-width:75%; float:right; display:inline-block;">
<table style="padding: 2px;">
<tr>
<td><span style="color:red; font-weight: bold;">*</span></td>
<td>some text goes here.</td>
</tr>
<tr>
<td><span style="color:red; font-weight: bold;">**</span></td>
<td>Some text goes here again</td>
</tr>
<tr>
<td><span style="color:red; font-weight: bold;">**</span></td>
<td>yup..some other text goes here again.dfdsfdsfsf</td>
</tr>
</table>
</div>
<br/>
<br/>
<div id="backToSearch"style = "display:inline-block;">
<button id="btnBackToSearch" class="k-button k-button-icontext"><span class="k-icon k-i-arrowhead-w"></span> Back To <span data-bind="text: backButtonText"></span></button>
</div>
Try:
<div id="legend" style="border:1px solid black; max-width:75%; float:right;">
<table style="padding: 2px;">
<tr>
<td><span style="color:red; font-weight: bold;">*</span>
</td>
<td>some text goes here.</td>
</tr>
<tr>
<td><span style="color:red; font-weight: bold;">**</span>
</td>
<td>Some text goes here again</td>
</tr>
<tr>
<td><span style="color:red; font-weight: bold;">**</span>
</td>
<td>yup..some other text goes here again.dfdsfdsfsf</td>
</tr>
</table>
</div>
<div style="clear:both"></div>
<div id="backToSearch">
<button id="btnBackToSearch" class="k-button k-button-icontext"><span class="k-icon k-i-arrowhead-w"></span> Back To <span data-bind="text: backButtonText"></span>
</button>
</div>
https://jsfiddle.net/cj1s9q0g/
Changes:
Remove display:inline-block as div is block by default and block will be on top of each other.
Add a div with clear:both to clear the float:right
display:inline-block; sets them in the same line..
Set them as display:block;, and they should be on top of each other
EDIT: As #Khanh TO says; Divs are display:block; as default, so you don't need to write that.
Set them as
display:block;
clear:both;
Related
Hi I'm trying to colour the tds of my table, but I want to specifically colour the background text within the td instead of the whole block. Is this possible ? I currently can target the images correctly but the text is a bit tricky.. http://jsfiddle.net/8gr2q5vm/3/
<td style="background-color: grey;"><img class="picture" src="#"></img></td>
<td class="birthday">Birthday: 1/1/1921 </td>
<td class="name">Name: barry</td>
</tr>
</table>
Wrap your text in a span and then style your span element.
<td style="background-color: grey;"><img class="picture" src="#"></img></td>
<td class="birthday"><span style="background-color: grey;">Birthday: 1/1/1921</span></td>
<td class="name"><span style="background-color: grey;">Name: barry</span></td>
</tr>
</table>
It would be better if you would have an external CSS file. And then you could import it and do some general styling like this:
td img, td span {
background-color: grey;
}
.text {
background: #ff3300;
}
<table>
<td style="background-color: grey;">
<img class="picture" src="#"></img>
</td>
<td class="birthday"><span class=text>Birthday: 1/1/1921</span>
</td>
<td class="name"><span class=text>Name: barry</span>
</td>
</tr>
</table>
I am doing a website about the property plan, my customer required that when their customer hover on the text, the image at the center will change, is there any method that can do by using only css?
<div>
<img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="imgcenter">
<table class="plantable">
<tbody>
<tr>
<td style="color:#469785;">Type <b>E</b></td>
<td style="color:#9BB8A0;">Type <b>F</b></td>
<td style="color:#9DB77F;">Type <b>G</b></td>
<td style="color:#9FA278;">Type <b>G1</b></td>
<td style="color:#C9AE77;">Type <b>H</b></td>
</tr>
</tbody>
</table>
</div>
When the user hover at Type E, the imgcenter will change to image E, when the user hover at Type G, the imgcenter will change to image G, how can i do that?
Here is the solution that i found which can be use
http://fiddle.jshell.net/tbz9nL4g/
<style>
.hover_image {position:relative;}
.hover_image .img1{position:absolute; display:none; z-index:99;}
.hover_image:hover .img1{display:block;}
.hover_image .img2{position:absolute; display:block; z-index:99;}
.hover_image:hover .img2{display:none;}
</style>
<div>
<a href="#" class="hover_image"> link text
<span class="img1"><img src="http://www.imagingshop.com/images/sharptone/hdr-2.jpg" /></span>
<span class="img2"><img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
</span>
</a>
</div>
However there is some problem regarding this coding, which when I add another text, this code unable to work
http://fiddle.jshell.net/tbz9nL4g/2/
Use the data attribute to store data-img in a tag and use that on hover
//js
$('a').hover(function(e){
if(e.type==='mouseenter' || e.type==='mouseover'){
$('.imgcenter').prop({'src':$(this).data('img')});
}else if(e.type==='mouseleave'){
$('.imgcenter').prop({'src':$('.imgcenter').data('img')});
}
})
img{width:300px;height:300px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img data-img="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="imgcenter" />
<table class="plantable" border=1>
<tbody>
<tr>
<td style="color:#469785;"><a data-img="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" href="">Type <b>E</b></a></td>
<td style="color:#9BB8A0;"><a data-img="http://www.rodalesorganiclife.com/sites/rodalesorganiclife.com/files/images/animal_bird_300.jpg" href="">Type <b>F</b></a></td>
<td style="color:#9DB77F;"><a data-img="https://sanaakosirickylee.files.wordpress.com/2012/05/chirping-birds.jpg" href="">Type <b>G</b></a></td>
<td style="color:#9FA278;"><a data-img="http://img1.cookinglight.timeinc.net/sites/default/files/image/2005/09/0509p113-bird-m.jpg" href="">Type <b>G1</b></a></td>
<td style="color:#C9AE77;"><a data-img="http://orig10.deviantart.net/6a53/f/2012/074/3/0/profile_picture_by_birds_love_us_all-d4sv1v2.jpg" href="">Type <b>H</b></a></td>
</tr>
</tbody>
</table>
</div>
I have divs as shown in the FIDDLE , the div content gets overlapped with the header resulting in hiding of the content data ie "Sample data 1".
<div id="header">
<div id="firstdiv">
<table border="0px" width="100%" style="background-color:rgb(2, 44, 72)">
<tr>
<td id="test1" style="width:90%;" align="left">test
</td>
</tr>
</table>
</div>
</div>
<div id="content">
<table border="0">
<tr>
<td>Sample data 1
</td>
</tr>
<tr>
<td>Sample data 2
</td>
</tr>
<tr>
<td>Sample data 3
</td>
</tr>
<tr>
<td>Sample data 4
</td>
</tr>
</table>
</div>
//CSS
#header
{
position:relative;
}
#firstdiv
{
float:left;width:100%;
position:absolute;
color:white;
}
Thanks
Remove the absolute positioning from the #firstdiv element. The left float also seems unnecessary.
See here: http://jsfiddle.net/k8Vut/2/
Add some padding to header: http://jsfiddle.net/k8Vut/3/
#header
{
padding-top: 25px;
}
Since your firstdiv is absolute it'll start from top: 0 position and hence overwrites the relative positioned header. So if you add some padding, it'll move the header a little below and make space for firstdiv
I want the text inside my table to word-wrap. The constraint is that I can't change the HTML since it's generated by the server.
I created a JSFiddle
In case it's not working:
<div style="width: 25%">
<table class="af_selectManyCheckbox" id="pt1:r1:1:smc1" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="af_selectManyCheckbox_label" valign="top"/>
<td valign="top" class="AFContentCell" nowrap="">
<div class="af_selectManyCheckbox_content">
<div>
<span class="af_selectManyCheckbox_content-input">
<input class="af_selectManyCheckbox_native-input" type="checkbox" value="0"/>
</span>
<label class="af_selectManyCheckbox_item-text">It allows a component to partially refresh another component whose partialSubmit property is set to true.</label>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Here you go.
WORKING DEMO
The CSS Code:
.col-md-3 label {
white-space: normal;
}
Hope this helps.
I have a Div tag that for some reason is padding the left side with approx 50px.
The following is the html and mind you nono of the "class" have padding-left"
<body>
<div class="popHeaderMain" align="center">
<div class="PopHeader">
Keller Williams Realty | (704) 602-0271
</div>
<div class="popLoginHeader">
<table>
<tr>
<td style="font-size:10px;">Username: <input type="text" name="username" /></td>
<td style="font-size:10px;">Password: <input type="password" name="password" /></td>
<td style="vertical-align:bottom;"><input name="login" type="submit" value="Login" /></td>
</tr>
</table>
</div>
</div>
<!-- ImageReady Slices (backgroundPage.psd) -->
<div style="padding-top:20px; width:900px;" align="center">
<table id="Table_01" width="900" height="1200" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td rowspan="2" style="background-image:url(images/backgroundPage_01.png); background-repeat:no-repeat; width:20px; height:410px;">
<td rowspan="2" style="padding-top:8px; background-image:url(images/backgroundPage_02.png); background-repeat:no-repeat; height:380px; width:455px;">
<div style="padding-left:25px; padding-top:0px; font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#F0F0F0;">
Preview House Address
</div>
<div style="padding-top:20px; width:450px;">
<div style="padding-left:10px;">
<img src="images/GibsonHouse3.jpg" alt="GibsonHouse" border="0" style="width: 437px; height: 300px;"/>
</div>
</div>
</td>
<td style="padding-top:0px; background-image:url(images/backgroundPage_03.png); background-repeat:no-repeat; width:405px; height:58px;">
<div style="padding-top:0px; padding-left:50px; font-family:Georgia, 'Times New Roman', Times, serif; font-size:14px; heigh:58px;">Preview House 1 out of N of houses in area</div>
</td>
<td rowspan="2" style="background-image:url(images/backgroundPage_04.png); background-repeat:no-repeat; width:20px; height:410px;">
</tr>
<tr>
<td style="background-image:url(images/backgroundPage_05.png); background-repeat:no-repeat; width:405px; height:352px;"></td>
</tr>
<tr>
<td style="background-image:url(images/backgroundPage_06.png); background-repeat:no-repeat; width:20px; height:766px;"></td>
<td colspan="2" style="background-image:url(images/backgroundPage_07.png); background-repeat:no-repeat; width:860px; height:766px;"></td>
<td style="background-image:url(images/backgroundPage_08.png); background-repeat:no-repeat; width:20px; height:766px;"></td>
</tr>
<tr>
<td style="background-image:url(images/backgroundPage_09.png); background-repeat:no-repeat; width: 20px; height:24px;"></td>
<td colspan="2" style="background-image:url(images/backgroundPage_10.png); background-repeat:no-repeat; width:860px; height:24px;"></td>
<td style="background-image:url(images/backgroundPage_11.png); background-repeat:no-repeat; width:20px; height:24px;"></td>
</tr>
</table>
</div>
Can anyone help me please
The padding-left phantom was actually being inherited from the body tag. The width was set to 800px instead of 900px.
I don't see any anomalous left-padding. There is an empty cell on the left side of your table, 20px wide. Is that what you mean? Try temporarily changing the border attribute of the table to border="1" to get a better idea where the cells are.
For testing in Firefox, I would strongly recommend getting Firebug if you don't have it already. One of many benefits is that as you mouse over the elements in the HTML tab you'll see their padding highlighted.
Your body tag width is set to 800px. Change it to 900px. :)