I have the following code:
<p><font size='5'><b>Loop Main</b></font><br><HR align='left' WIDTH='60%'></p>
The problem is that under Loop Main, I get some spacing and then the HR show up. Is there a way to get the
ruler right underneath the text without any spacing between them?
You should use css. And yes, you can acheive what you would like.
p.main {
margin-bottom:0;
padding-bottom:0;
font-weight:bold;
}
hr {
padding-top: 0;
margin-top:0;
}
<p class="main">Loop Main</p>
<hr>
If you would like the <hr> up even closer to the text, you will have to use positioning, like so:
p.main {
margin-bottom:0;
padding-bottom:0;
font-weight:bold;
}
hr {
padding-top: 0;
margin-top:0;
position: relative;
top: -4px;
}
<p class="main">Loop Main</p>
<hr>
Of course, probably even a better solution is just to put a border-bottom on the <p> like:
p.main {
margin-bottom:0;
padding-bottom:0;
font-weight:bold;
border-bottom: 1px solid gray;
}
<p class="main">Loop Main</p>
you could try something like
<HR align='left' Width='60%' style='margin-top: -3px;' />
or you could use css to change the line height property of the HTML <p> attribute
Related
Is there any HTML tag that has big text, similar to h1, but that is also inline displaying? I mean that does not go in a new line.
I guess no other such HTML tag, but you can try this:
DEMO
h1
{
border:1px solid red;
}
.text
{
line-height:0px;
height:auto;
font-size:32px;
font-weight:bold;
border:1px solid red;
}
<h1>Hey There</h1>
<span class="text">Hey There</span>
<h1 style="display: inline;">...</h1> - no new line before;
<h1 style="white-space: nowrap;">...</h1> - no break line inside;
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
I'm trying to align a button and some text at the bottom of a div much like the example below with the Price and the Check it out button. What's the best way to do this. I've made a div, styled it to get the text, and picture right. I just need to attach the button to the right-hand side and the price to the left, inline with each other.
Similar to the product displays in the website thisiswhyimbroke.com
http://www.thisiswhyimbroke.com/
^^ Price and the Check It Out button. How do I achieve this?
Try like this: DEMO
Try to use reset you CSS first.
CSS:
*{
padding:0;
margin:0;
}
#priceAndButton {
width:100%;
display:block;
height:30px;
line-height:30px;
}
#priceAndButton h4 {
float:left;
vertical-align:middle;
}
#priceAndButton img {
float:right;
}
Hope this helps you
I have created a working fiddle with your requirements:
http://jsfiddle.net/8993H/
HTML:
<div id="main-container">
<div class="img-div"><img src="http://tiwibzone.tiwib.netdna-cdn.com/images/beer-chug-flowmeter1-300x250.jpg"/></div>
<div class="rhs">
<div class="button-nav">
<span class="price">$35.00</span>
<span class="check-btn"><button>Check It Out</button></span>
</div>
</div>
</div>
CSS:
#main-container{
width:100%;
border: 1px solid #aaa;
}
.img-div{
width:50%
}
.img-div img{
width:100%;
}
.rhs{
width:48%;
float:right;
position:relative;
}
.button-nav{
position:absolute;
bottom:10px;
width:100%;
}
.price{
float:left;
}
.check-btn{
float:right;
}
Try this:
button{
float:right
}
#price{
float:left
}
Here i created one working fiddle for your requirement.. You can re use this CSS. Hope This will help you.
HTML
<div class="desc">
<img height="200px" width="200px" src="http://www.clker.com/cliparts/8/2/2/6/11971154711712468971BigRedSmile_A_screwdriver_1.svg.med.png"/>
<p>Move over sliced bread, the water jet pack is officially the greatest thing ever. For only sixty eight grand you can own your very own water thrusting jetpack. It can lift you up to 30 feet high and thrust forward at 30 miles per hour – practically guaranteeing certain death.</p>
<div class="button">
Check it out
</div>
<div class="price">$500.00</div>
</div>
CSS
.desc{
text-align:jstify;
width:50%;
}
.button a{
background-color: #faab37;
color: white;
display: block;
float: right;
padding: 7px 8px;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.button a:hover{
background-color:#f9bd66;
}
Hope This is What your expected output
i have very simple scenario but i am really stuck with it and need your help please .
this is what i have to do .
This is a div with righ and bottom border and and image in its top . I have to display text same as this one . For this i am using bootstrap like this
<div class="span4" >
<h1 class="BoldText">
GET A QUOTE
</h1>
<span class="SimpleText">
INSERT TEXT HEREINSERT TEXT HEREIN-SERT TEXT HEREINSERT TEXT HEREINSER
</span>
</div>
now problem is that i have to show it in middle of box , if i set margin-left to h1 and <span> tag this is how it looks like this padding also does not work here . will someone guide me how do i adjust it . it seems simple but i am really unable to get it .
I would set widths:
http://jsfiddle.net/4YUtW/
.span4 {
width:300px;
border:1px solid #666;
}
h1 {
width:226px;
display:block;
margin:0 auto;
}
.SimpleText {
width:226px;
display:block;
text-align:justify;
margin:0 auto;
}
but, there are probably better solutions... Of course, you will have to change values to fit your needs.
You will need to set up your CSS as such:
#img {
background:transparent url('http://thebuzzdoha.com/wp-content/uploads/2014/06/fifa-world-cup-wallpaper-hd.jpg') top center no-repeat;
height:200px;
width:100%;
margin:0 0 20px 0;
}
.span4 {
border:1px dotted Black;
margin:0 auto;
width:400px;
text-align:center;
}
.span4 a {
color:Black;
text-decoration: none;
font-family: sans-serif;
}
.SimpleText {
display:inline-block;
margin:0 auto;
width:70%;
text-align:justify;
}
You can see this here->http://jsfiddle.net/5KjXq/
Hope this helps!!!
So, if you're not particularly attached to using bootstrap, doing this in pure html and css is relatively simple and usually a whole lot easier to read than the bootstrap spit-out code. I have made a fiddle with an example: http://jsfiddle.net/6aJJ5/1/. Hope that helps!
How can I get a line, text and then a line in a straight line?
code. Here is the jsfiddle of my html. I use inline property to make them appear in a straight line. But they do not change.
How to do so that they appear like
---------------------- About Me ---------------------
(^^dotted line above should actually be single line.)
Use this -
#about_me1 hr, #about_me1 h3{
display: inline-block;
vertical-align: middle;
}
Here's updated Fiddle
Try this and have a look to display:inline-block in style
<header id="about_me">
<div id="about_me1">
<hr size="5" align="left" color="black" style="display:inline-block;width:30%;">
<h3 style="display:inline;">About Me</h3>
<hr id = "line" size="5" align="left" width="30%" color="black" style="display:inline-block;width:30%;">
</div>
</header>
Use only one element to show border, which will work in every resolution and reusable:
<header id="about_me">
<div id="about_me1">
<h3><span>About Me</span></h3>
</div>
</header>
#about_me1 {
border-top: 2px solid #FF0000;
position: relative;
margin-top:15px;
}
h3 {
position: absolute;
top: -18px;
text-align:center;
width:100%;
padding:0;
margin:0px;
}
h3 span {
background:#fff;
display: inline-block;
padding: 5px;
}
Demo