In my web application, I have some divs and spans that make table like structure.
the pseudo code is,
<head>
<style>
span{
display:inline-block;
width:auto;
}
.tblbody
{
font-family:'Segoe UI';
font-size:20px;
color:#2A2A2A ;
padding : 0px;
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
padding-left:9px;
}
</style>
</head>
<body>
<div>
<span style="width: 240px;" class="tblbody">
<span style="width: 240px;" class="tblbody">asia</span></span>
<span><span><br>
<span style="width: 240px;" class="tblbody">india</span></span>
<br><span><br>
<span style="width: 240px;" class="tblbody">china</span</span>
<br><span><br><span style="width: 240px;" class="tblbody">pakisthan</span></span><br><span><br>
<span style="width: 240px;" class="tblbody">bangladesh</span></span><br></span>
</body>
In the first row, the span that contains the continent name is moving downwards leaving space above it.
how can I move the span upwards?
thanx :)
Write vertical-align:top to your span. Write like this:
span{
display:inline-block;
width:auto;
vertical-align:top
}
You have padding-top: 5px try changin it to padding-top: 0px
Related
I am trying to align two headers, an h1 and h2 element, in the same row.
I used this code to create a number in a circle which represents the first header and a headline "Device name" which is the second header:
.circle {
border-radius: 45%;
width: 30px;
height: 20px;
padding: 0.5px;
background: #E6354A;
border: 3px solid #E6354A;
color: #FDFEFE;
text-align: left;
font-size: 5px;
}
<table cellpadding='0' cellspacing='0' border='0' border-collapse='collapse' style='width:98%; text-align: center; margin: 0 auto;'>
<tr>
<td colspan='4' <div style='clear:both'>
<div class='circle'>
<h1 style='font-weight: bold; text-align: left; font-size: 13px; margin-top: 0;'>" + obj.value[0].DEVICE_OVERALL_SCORE.toFixed(2) + "</h1>
</div>
<h2 style='font-weight: light; text-align: left; font-size: 16px; margin-top: 0;'> Device name: " + grci.name + " </h2>
</div>
<hr />
</td>
</tr>
</table>
For some reason the circle with the number inside appears in one row and the device name header appears in a row beneath it. Can someone tell me how to make them appear side by side?
It is due to fact that divs and headings are block elements by default, which means they take up all of the space and make other block elements have a separate row. To change this, you would require either to float them, set them as flex, grid, or inline-block element.
I approached to set them as inline-block since it is the fastest, but it really comes down to requirements.
<style>
.circle {border-radius: 45%;width: 30px;height: 20px;padding: 0.5px;background: #E6354A;border: 3px solid #E6354A;color: #FDFEFE;text-align: left;font-size: 5px;}
.circle, h2 {display: inline-block;}
</style>
<table cellpadding='0' cellspacing='0' border='0' border-collapse ='collapse' style='width:98%; text-align: center; margin: 0 auto;'>
<tr>
<td colspan='4'>
<div style= 'clear:both'>
<div class='circle'>
<h1 style='font-weight: bold; text-align: left; font-size: 13px; margin-top: 0;'>" + obj.value[0].DEVICE_OVERALL_SCORE.toFixed(2) + "</h1>
</div>
<h2 style = 'font-weight: light; text-align: left; font-size: 16px; margin-top: 0;'> Device name: " + grci.name + " </h2>
</div>
<hr />
</td>
</tr>
</table>
you can't have 2 header side by side at the same time, because the definition of header is a one row at the top of the table. So make sure you use the correct definitions.
Wrap the headers in a div and make it flex
<style>
div {
display: flex;
}
h1 {
widht: 50%;
}
</style>
<div>
<h1>HEADER1</h1>
<h1>HEADER2</h1>
</div>
Flex direction is row by default, note that I apply width: 50% to create two even columns. You may want to align and justify as well, have a look at align-items and justify-content properties.
Several years ago (read as 10 years) I would use a HTML snippet that would take a SPAN / Anchor tag and hook it to a graphic in shape of a button using CSS. But for some reason I must be missing something as it no longer works.
Example html:
<div id="process1" class="loc_1">
<table>
<tr>
<td class="columnOne">
<span class="processTitle">Example</span>
<span class="updateIndicator">12/28/2014</span>
</td>
<td>
<div class="loc_1">
<span class="templateName"><img src="flag.gif" alt="Location 1" />Example Link</span>
<span class="templateLinks"><a target="_blank" href="Example.doc" class="linkTemplate"></a></span>
</div>
</td>
</tr>
</table>
</div>
Associated CSS:
div span.templateName{
float: left;
width: 270px;
height:auto;
text-align: left;
margin-top:7px;
overflow:visible;
}
div span.templateLinks {
float: left;
margin-left: 10px;
text-align: left;
margin-top:7px;
}
div span.templateLinks a.linkTemplate{
float: left;
width:45px;
background:transparent url("button.gif") 0px 0px no-repeat;
}
div span.templateLinks a.linkTemplate:hover{
background:transparent url("button_over.gif") 0px 0px no-repeat;
}
Specifically, the "span class="templateLinks"..." section does not render the graphic button. Everything else renders as normal, and no errors or warning are generated.
Thoughts or comments?
add the height of the button to the div span.templateLinks a.linkTemplate
Ugh! Thank you Nickfmc!
The key was the height:
div span.templateLinks a.linkTemplate{
float: left;
height:28px;
width:45px;
background:transparent url("button.gif") 0px 0px no-repeat;
}
I swear I tried the height parameter multiple ways in the CSS without success, yet simply adding it within the SPAN tag works. Something so simple yet a pain when it work previously.
Thank goodness for the this forum!
I'm looking for a way to set the pressable area for a close icon. so if the icon is 19X19, the area to press will be 39X39.
The div is the container of the clost botton, and i want to change it.
I don't want to set a fixed height, because it strach somtimes, in the other hand, there is no height at all to father, and his father...
<div class="ui-pnotify-closer" style="cursor: pointer; visibility: visible;">
<span class="glyphicon glyphicon-remove" title="Close"></span>
</div>
So I thought to do something like that:
.ui-pnotify-closer{
margin: -10px -10px -10px 10px ;
padding: 10px 10px 10px 10px;
height: 40px;
}
But this is very not elegant.
Any other ideas?
I think you are looking something like below.
HTML
<div class="test">
<span><img src="test.gif" width="19" height="19" border="0" /></span>
</div>
CSS
.test
{
background-color:#ff00ff;
padding:10px;
cursor:pointer;
display:inline;
}
Fiddle Demo
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
How can I have my text between an <HR> line?
For example: http://jsfiddle.net/VrvvX/
<div id="outerDiv">
<button id="myButton">Do This</button>
<br>-----------or do something else-<br>
<table id="mytable">
<tr>
<td>Blah:</td>
<td><select id="foo"></select></td>
</tr>
<tr>
<td>Blah:</td>
<td><select id="foo"></select></td>
</tr>
</table>
Rather than having ----- I'd like to have a pretty <hr> tag which works like a separator between the button and the table.
Set two <hr/> tags to display: inline-block and put a width on them with the text in between. Like this fiddle. Though you may want to adjust the positioning of it.
In addition to Tomás solution, you could create a HR class and add content: attr(data-content); to it. And then use the following HTML <hr class="hr-1" data-content="CONTENT HERE"/>.
This way you can fill in the content through HTML rather than CSS.
Fiddle:
https://jsfiddle.net/xqeuzrg7/
You could do something like this :
<div style="background: url('line-background.png') 50% 50% repeat-x;width: 100%;text-align: center;">
Do this
</div>
Of course you can adjust width or play with padding: 0 ?px;
EDIT :
If you want to hide background under the title you can do :
<div style="background: url('line-background.png') 50% 50% repeat-x;width: 100%;text-align: center;">
<span style="background: white;padding: 2px;"> Do this</div>
</div>
I think this is not the best practice to do this but you can use this css for the <hr/> tag and it will properly work:
hr {
padding: 0;
border: none;
border-top: 1px dashed #CCC;
color: #333;
text-align: center;
font-size:12px;
}
hr:after {
content:"or do something else";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
I have updated your example, see if this is what you want:
http://jsfiddle.net/VrvvX/146/