I have this piece of code:
HTML:
<h3 class="section_title">Lorem ipsum <span class="c">Text</span></h3>
CSS:
.main_description .section_cost .section_title {
font-size: 18px;
border-bottom: 1px solid #ffffff;
padding-bottom: 5px;
margin-right: 60px;
}
I want to move the text inside the span to the max right side of the h3 underline even if i change the text inside the span to a longer or shorter one.
Image
you can use float
span{float: right}
Here is something about this CSS Layout - float and clear
Set the right attribute:
right: 0;
position: relative;
That sets the offset from the right hand side.
Edit:
I forgot about setting the position as well.
Related
Whole code : http://jsfiddle.net/3TQq6/
I'm making theme for my blog.
In the title part, there is a problem.
<div class="post_title">
<br/>
<h2>[##_article_rep_title_##]</h2>
<span class="post_cate">나만보기</span>
<span class="post_date">[##_article_rep_date_##]</span>
</div>
h2 tag will show the title of the article.
first span tag will show the category of the article.
second span tag will show when the article upload.
They are in one line.
h2 and span starts from left side, second span starts from right side because of float.
When I run the code, two spans have different vertical position.
http://goo.gl/vZwSzz
second span is placed higher than the first span.
I want that two span tags have the same vertical position.
but don't move first span tag. I want to adjust the second to the first.
How can I move the second span?
You can try the following:
DEMO
Remove float: right from .post_date, and then add the following css rules:
.post_title {
position: relative;
}
.post_date {
position: absolute;
bottom: 6px; /* Adjust this to match the height of .post_cate */
right: 0px;
}
There's two ways to do it. One is to keep the float right and position it properly with margin-top pushing the date down:
.post_date {
margin-top: 16px;
}
This positions it when everything is all on one line, but if there's multiple lines the date will be off. The second method is to use position: absolute to align it to the bottom:
.post_title {
position: relative;
}
.post_date {
position: absolute;
right: 0;
bottom: 9px;
}
Results: http://jsfiddle.net/3TQq6/1/
Try this, fiddle
<div class="post_title">
<br/>
<h2>[##_article_rep_title_##]</h2>
<span class="post_cate">나만보기</span>
<span class="post_date">[##_article_rep_date_##]</span>
<br/>
</div>
.post_title h2 {
display: inline;
float: left;
font-size: 15pt;
}
.post_title span {
color: #bababa;
line-height: 30px;
}
.post_cate {
float: left;
}
.post_date {
float: right;
}
I will make a jQuery plugin for one of my projects, and I am trying to simulate an input with divs and spans to make it "richer".
Instead of having [ input ], I will have [ span (containing a A for removing) + input] so the user will not see the difference because he will be typing on a real input without borders, and the result (when accepted) will appear in a small rectangular box at the left of the field.
But I have one problem: there's always a gap between the top of the div and the span containing the left text. Same for the input, the two do not have the same margin for the top and bottom.
I am trying to remove that incorrect top margin (or padding), it looks like 3px from the top and 2px for the bottom. I seem to have tried everything and I always end up to have too much pixels on the top of the span & input.
I have reproduced my problem here (only a few lines of css code):
http://jsfiddle.net/JB9Uq/1/
<div class="input-reference"><span>Content in span <i class="icon-remove">x</i></span><input type="text"></div>
I'd need some assistance on that, I tried margins, paddings, line height, display:inline-block... but it still does not seem to work.
Thank you for your help.
I think that is what you looking for
1. add a float left
2. add height and line height
<div class="input-reference"><span>Content in span <i class="icon-remove">x</i></span><input type="text"></div>
input, textarea, span {
font-family:sans-serif;
font-size:12px;
outline: none;
margin: 0;
border: 1px solid transparent;
}
.input-reference{
display: inline-block;
border: 1px solid #DDDDDD;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.input-reference:after{
content: "";
display: block;
clear: both;
}
.input-reference span,
.input-reference input{
display: inline-block;
float: left;
padding: 0 5px;
/*adjust your height here*/
line-height: 20px;
height: 20px;
}
.input-reference span{
background-color: #53A9FF;
color: #fff;
}
UPDATE
check jsfidle
http://jsfiddle.net/c5q7hauv/
Following simple list, where in every h4, there is a span at the end.
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus <span class="goto">o</span>
</h4>
</li>
<li>
<h4>Digital Signage <span class="goto">o</span></h4>
…
</ul>
Screenshot of the page's source:
The CSS for the span looks like this …
.items .goto {
font-family: 'QuaySans-Icons';
font-size: 1.6em;
position: relative;
float: right;
}
The final thing looks like this:
The problem I have with this is that when decreasing the width of the browser window (I'm working on a responsive webdesign) the span-icon is breaking into the next line.
Do you have any creative solution or idea on how to prevent this from happening?
Kind regards and thank you in advance,
Matt
If you want the icon to keep inline with the last word in your text line, you can simply do:
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus<span class="goto">o</span></h4>
</li>
<li>
<h4>Digital Signage<span class="goto">o</span></h4>
</li>
</ul>
and the CSS might be:
.items {
list-style: none;
margin: 0;
padding: 0;
}
.items li {
border-bottom: 1px solid gray;
margin: 0;
padding: 0;
}
.items h4 {
margin: 0;
}
.items .goto {
background-color: gray;
font-size: 1.6em;
margin-left: 10px; /* optional */
}
If there is no white space between your work and the span, the motif will simply follow the word if the li element is forced to flow into a second line.
You can use margin-left to create visual spacing or insert a   entity before the span, quite a few ways to do. The details depend a bit on what effect you want.
Fiddle: http://jsfiddle.net/audetwebdesign/VsBet/ (two examples of how to do it)
Keeping Icon Right Justified
Here is one approach to pinning the icon to the right of the h4 element:
.ex2.items h4 {
position: relative;
line-height: 1.5;
outline: 1px dotted blue;
padding-right: 2.00em;
}
.ex2.items .goto {
background-color: wheat;
line-height: 1.00;
font-size: 1.6em;
position: absolute;
right: 0;
bottom: 0.0em;
height: 1.00em;
width: 1.00em;
outline: 1px dotted red;
}
Use absolute positioning of the span to keep it to the right and bottom of h4. If h4 forms to line, the icon will follow the second line. You may need to adjust the positioning depending on the icon size. If you allow the icon to grow in size, you may get other issue in extreme cases. I might fix the icon to a px height or width (or a max value). Finally, set some padding-right in h4 to prevent the icon from overlapping the text as the window gets smaller.
Note I explicitly specified line-height values to accentuate the issue around not knowing the height of the icon. You may need to adjust these to vertically position the icon.
Decrease your font-size when you have less space. I guess you have the problem in media with max-width:480px. I found decreasing the font-size a good alternative to keep the design consistent in responsive sites
I've mocked it up on the demo, however it is a bit raw.
.items {
padding:0;
margin:0;
/*width:180px;*/
}
.items li {
border: 1px solid red;
list-style-type: none;
position: relative;
}
.items h4 {
margin:0; padding:0; font-size:16px; padding-right:10px;
}
.items .goto {
margin-top: -10px;
position: absolute;
right: 0;
top: 50%;
}
DEMO
Check the following link and decrease the width of browser.
RESULT
I've created a sprite at a website I'm using to learn CSS at http://flexibletheme.tumblr.com/, however since the width is set at 24px the text tries to make a small vertical column.
Anyway to get it to render normally with 24px of margin on the right?
You should put your sprite inside of a nested <span> instead of wrapping it around your link text. Like this:
<span class="sprite"></span>Sample Link
Be sure to either float your sprite to the left or make it display:inline-block; so that it can retain a width and height but still be inline with your link text.
ditch the width:24px; add padding-left:24px
You should wrap the element around your sidebar unordered list and children instead of closing it before it does anything:
<aside>
<ul>
<li>stuff</li>
</ul>
</aside>
Then give it a width, or let content and sidebar float and clear them after. (I'd also recommend looking into stuff like grids for ease.. http://978.gs/)
write this white-space: nowrap; in your a tag
#links li a{white-space: nowrap;}
If IE7 support (and below) is not an issue, you could use :before pseudo element without adding any extra mark-up:
#links a {
display: block;
position: relative;
padding: 2px 2px 2px 30px;
min-height: 20px;
line-height: 24px;
}
#links a:before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 24px;
height: 24px;
background: url(http://static.tumblr.com/wgijwsy/itFlt1l8x/links.png);
}
a#rss:before { background-position: -24px 0 }
a#facebook:before { background-position: 0 -24px }
a#twitter:before { background-position: 0 -48px }
Otherwise, add span inside the anchors and replace a:before with a span.icon.
And move the h2 outside of your ul. That's invalid HTML.
I have a dialog box where I want to have two button side by side .One button will be "Done" button and other will be "close" button.
html:
clickme
Css:
a.embeddedBrosweWindowDoneButton {
margin:10px 900px 0;
text-align:center;
display: block;
width:50px;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
/* button color */
background-color: #173553;
/* rounded corner */
border-radius: 5px;
/* drop shadow */
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
/* text shaow */
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
I already have a "done" button .I want to have another button called close buton by side of done button . How can i have two buttons in line. I tried but one button was over the other button.
a.embeddedBrosweWindowDoneButton:hover {
background-color: #6D7B8D;
}
You have display set to block. It needs to be set to inline-block.
If you set it to block, the elements will reside on their own line within their parent container. Use inline-block to let them reside on the same line.
Put each button in a div and have the float attribute set to left.
.buttondiv {
float: left;
}
This CSS-style:
display: block;
Makes the buttons set themselves on different rows. If you apply float: right; on them both, you'll be able to set them beside eachother. Note that you a) might want to add a clearfix and b) invert the order of your elements (adding done before the second button) as float: right has a tendency to shift them unexpectedly.
Clearfix:
<div style="display: block; clear: both; height: 1px;"></div>
Add the element above to the "bottom" of the element that wraps the buttons, so that they won't "break loose" from their place and float outside the box.
Since it's got a display:block;, you can specify it's width, and then float it left or right, depending on how you would like to have the layout be. Once one is floated, the other one will wrap to the other side of it.
Here's a good article about floats: http://css-tricks.com/795-all-about-floats/
Using nobr can help you solve this problem.
<td>
<nobr><input type="submit" value="Submit">
<input type="button" value="Return"></nobr>
</td>