I have the following month selector:
It has a left and a right button with the text of the current month inbetween.
As you can see it doesn't look ok.
HTML:
<div id="seletor">
<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-w" href="#" id="subtrair">subtrair</a>
<div id="mescorrente"></div>
<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-e" href="#" id="somar">somar</a>
</div>
CSS:
#subtrair, #mescorrente, #somar {
display:inline-block;
vertical-align:top;
}
#subtrair, #somar {
margin-top:2px;
}
#mescorrente {
font-size:20px;
text-transform:uppercase;
padding:0 6px; /* optional padding.. */
margin-bottom:10px;
white-space: nowrap;
}
I tried all sorts of options in the display settings, like display:table and display:inline but it did not work.
In Chrome Dev Tools, if I uncheck and check again display:inline-block; it works!
What is wrong with this code?
Change the CSS for #mescorrente.
#mescorrente {
min-width: 200px;
text-align: center;
}
You can use this:
<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-e" href="#" id="somar" style="float:right;">somar</a>
or
#somar {
margin-top:2px;
float:right;
}
but as long as you use px in your parameters, if the above ways does not help, you can set the distance form the left side like this:
#somar {
margin-top:2px;
left: 150px;
}
Just a slightly different approach - floating the three components left inside the div, then positioning the div - FIDDLE.
Did you want to do anything more with it?
CSS
#seletor {
width: 300px;
margin: 30px auto;
}
#subtrair, #mescorrente, #somar {
float: left;
vertical-align: top;
margin-left: 10px;
}
#subtrair, #somar {
margin-top:2px;
}
#mescorrente {
font-size: 20px;
text-transform: uppercase;
padding:0 6px; /* optional padding.. */
margin-bottom: 10px;
white-space: nowrap;
}
You have two options that I see here. Either you can create multiple div elements and display them inline, or you could use
<span>
element, as it is intended to display elements inline natively.
http://www.w3schools.com/tags/tag_span.asp
I would recommend using the span element, as I've had good success using this method, so long as you want them truly inline and not staggered/relatively aligned via script.
Related
I was wondering, what's the best way to achieve this:
What I want
Instead of this, that is the default situation:
How can I align the top of a inline element with the top of it's container? I just saw a lot of answers and methods, and I'm confused. What's the best practice? Until now I just used negative margin, but to me it looks more like a dirty and unstable trick than a clean e reliable solution.
The default behavior you want to 'fix' is because of the way the computer font metrics are calculated. Recently a very good article on this topic has been published.
You need to get the difference between "ascent" metric and the capital height of your font somehow and then move the text up by this value. Unfortunately, it's impossible with CSS currently, so some hardcoded font-specific 'magic numbers' seem inevitable here.
It totally depends on the font how much space there is on top of a normal capital Letter, e.g. to leave space for the dots on top AAÄAA
But what works was to reduce the line-height for the first line or the top margin relative (in em so it will fit for all font-sizes) to the text size. Just play around with it a little:
*::first-line {
line-height: 0.7em;
}
You need to use position property. Below is the sample code
#met {
font-size: 30px;
background-color: green;
float:left;
display:inline-block;
z-index: 1;
}
.na{
position:relative;
}
.na p,
.na a {
position:relative;
top: -5px;
}
a {
vertical-align:top;
}
#tim {
font-size: 20px;
background-color: blue;
}
First part is okay here with line-height:21px; . Couldn't find what worng with p tag even after removing padding and margins
#met {
font-size: 30px;
background-color: green;
float:left;
display:inline-block;
}
a {
line-height:21px;
vertical-align:top;
}
#tim {
font-size: 20px;
background-color: blue;
#met {
font-size: 30px;
background-color: green;
float:left;
display:inline-block;
}
a {
line-height:21px;
vertical-align:top;
}
#tim {
font-size: 20px;
background-color: blue;
margin: 0; padding: 0;
}
p{
margin: 0;
padding: 0;
}
<div>
<div class="na" id="met">
<a>TITLE</a>
</div>
<div class="na" id="tim">
<p class="dummy">
Dummy dummy dummy text<br>
<span id="sp-dum">one two three it's a dummy</span>
</p>
</div>
</div>
Write in style vertical-align:top is good way to display all the content in the top of the line fopr all columns
Here is my code:
<p class="section1comments">
<span class="jan">January 20 2011 by David LaHuta in A Closer Look </span>
<span class="comments">
(1) Comments<sup><img src="slice/comment-icon.jpg" alt="" /></sup></span>
</p>
css:
.section1comments, .section2comments {
font-weight: bold;
color: #747476;
border-bottom: 1px solid #D4D4D4;
padding-bottom: 5px;
clear: both !important;
}
.section1comments
{
width:100%;
}
.jan
{
width:79%;
}
.comments
{
width: 18%;
margin-left:15px;
}
these two span alignment is not working properly when resize the window.
Can anyone help me to fix this issue?
Thanks in advance,
Give following css to get your expected result.
span {
display: inline-block;
}
It will take full width of parent. And comments span will show on right side when you resize the window.
Fiddle
Edit:
Another option is use display:table-cell to span element and display:table to it's parent.
span {
display: table-cell;
}
Updated Fiddle
I'm trying to make a simple 3-cell div that will show a list of ratings for cigars. I want the left cell to be a square image of the cigar, the middle to be the name, and the right to be the rating. The code works fine until I add the image - it then seems to add an 8px border on the bottom of the image, revealing the cell's background color. Using Wordpress (if that helps). Any help is appreciated!
This is the page: http://cigardojo.com/best-cigars/
HTML
<div class="ratingWrapTopRated">
<div class="cigarImage"><img src="http://cigardojo.com/wp-content/uploads/2014/08/cigar-test.jpg" alt="test" width="90" height="90" class="alignnone size-full wp-image-14045" /></div>
<div class="cigarName">Opus XXX Power Ranger</div>
<div class="numericalScoreTopCigars"></div>
</div>
CSS
.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0 auto;
display:table;
font-family:Helvetica, Arial, sans-serif;
margin-bottom: 10px;
}
.cigarImage {
background:#fff; color:#fff;
display:table-cell;
width: 90px;
}
.cigarName {
background:#ff5100; color:#fff; text-align:center;
display:table-cell;
vertical-align:middle;
text-transform: uppercase;
}
.numericalScoreTopCigars {
background:#000; color:#fff; text-align:center;
width:25%;
display:table-cell;
vertical-align:middle;
font-weight:bold;
border-left: 4px solid; border-color: #fff;
}
Add line-height: 0; to .cigarImage and you will get rid of it. Many people will tell you to use display: block; and that will work but that is not the real problem. The problem is that img tags are inline and you get that space because you get the image plus the line-height it is in that container, and that creates the space you see below your image. The correct solution to that is to add what I just told you.
So edit your class like this:
.cigarImage {
background:#fff; color:#fff;
display:table-cell;
line-height: 0; /* Here is the solution */
width: 90px;
}
And you will get that working right :)
This is because images are inline (that is, they're treated like they're on a line of text) by default, and the bottom of them is aligned to the "baseline" of the line of text, not the absolute bottom. Below the image you get the space from the rest of the line below the baseline. If you just set the image to display: block; it should get rid of it (then it won't be considered part of a line of text, and will instead be its own block).
Just add a padding right of 5px or so on the .cigarImage class. You should also increase your image height or decrees the height of the info bar next to your images as they dont line up.
In your class ratingWrapTopRated class set line-height to 0:
.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0;
display:table;
font-family:Helvetica, Arial, sans-serif;
padding-bottom: -8px;
margin-bottom: 10px;
line-height: 0; /*here*/
}
I am trying to create a button for my link which has the name on the button
and allows the user to click on it and go to the link.
Also I'm not sure why but my link "click-able range" seems to be extended.
Here is the Code:
<body>
<div id="container">
<div id="link">My Favorite Website</div>
</div>
</body>
Here is the CSS:
#container {
width:960px;
margin-left: auto;
margin-right: auto;
padding: 30px 0px;
}
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
}
#link {
padding: 7px;
font-size: 15px;
font-weight: bold;
font-style: italic;
}
Thanks!
Your link is inline element so you need to make it block or inline-block to add your styles so:
CSS
a {
display:inline-block;
}
Having a block element within an inline one is causing your problems.
By default, anchors are displayed inline. You need to display it a little differently, as inline-block:
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
display:inline-block;
}
JSFiddle
Remove div tag into a tag..
Demo
<div id="container">
My Favorite Website
</div>
just add this to #link in css
appearance:button;
-moz-appearance:button;
-webkit-appearance:button;
is an inline element. To make it behave like a block level element, you need to define its display property in CSS.
a {display:block;} or a {display:inline-block;}
and your link "click-able range" seems to be extended, because you are using a , which is a block level element, inside your tag.
Block level elements take the entire width of its container.
You need to redefine its bevavior.
link{display:inline-block;} or #link{display:inline;}
Can someone help me to bring the arrows and the text on one line? (see image) The link tag should fill out the "th" (display:block).
HTML:
<th colspan="1" rowspan="1" class="ui-state-default">
example
<span class="ui-icon ui-icon-carat-2-n-s"></span>
</th>
CSS:
.ui-icon { width: 16px; height: 16px; background-image: url(../images/ui-icons_222222_256x240.png); }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
table#example th a {
display:block;
}
table#example th span {
float: right;
}
Can I may be realize that with the z-index CSS-attribute or something like that?
Try adding float left to the anchor:
table#example th a {
float: left;
display:block;
}
Are you sure you want to be using tables for this? If you're using tables purely for layout; don't. There's a few ways to do this using css:
Method 1:
HTML
<a class="link" href="http://www.example.com">example</a>
<span class="arrows"></span>
CSS
.link, .arrows {
float: left;
}
.link {
margin: 0px 10px; /* Spacing either side of link */
}
Method 2
HTML
<a class="link" href="http://www.example.com">example</a>
<span class="arrows"></span>
CSS
.link {
display: inline;
margin: 0px 10px; /* Spacing either side of link */
}
Change the CSS so that the <a> and <span> both float left:
table#example th a {
float: left;
}
table#example th span {
float: left;
}
Example here.