Hi,
I have the following HTML :
<div class="controlTitleContainer ">
<label for="test">Titel</label>
<div class="q"> </div>
</div>
The CSS looks like this
.controlTitleContainer .label
{
font-size: 0.94em;
color: #778899;
display:inline;
}
.controlTitleContainer .q
{
background-image: url("Images/Common/Icons/questionMark_15x14.png");
height: 14px;
width: 15px;
float:left;
}
The problem is that the div will be placed to the left of the label instead of to the right? Why?
I have tried to switch the div to a span with no success. Also If I change the div to a img intead then it will work but there is some unvanted margins that I can´t remove with the div element.
Pleas advice
Edit1: The confusions in the question should now be fixed, sorry for that.
MySolution : I created two div elements (one for text and one for icon) and then set float to left on both.
You're quite confused. You talk about IMG in question title, then you present SPAN in your code and afterwards talk about DIV in your text.
But I guess all three refer to SPAN in your code since you do set a background image to your SPAN element.
Solution
Anyway. Your span is floated left according to your CSS. If you remove the following line in your style sheet, your span will appear to the right of your label:
float: left; /* <- remove this */
Edit: I suppose your question got downvoted due to this confusion. If you want the community to help with detailed answers the least you could do is to take the time to formulate your question with the same amount of care as you expect back.
Do you not want the image to the right of the label? You have specified float: left;. You may also want to change .label to label in line one of the css code.
You could use the "CSS :after Selector"
Link : http://www.w3schools.com/cssref/sel_after.asp
Floats can be tricky... I would just make sure that the label is inline or inline-block, and that your image or image container also is inline or inline-block. They would then be aligned as text on a row. Yeay!
Related
I am using tooltips in bootstrap3.
If you hover over the gap between the lines in the 'Position' column in the table example, the tool tip will disappear. Notice that the mouse pointer changes from arrow to 'text'.
How do I get it so that the tooltip is always displayed when hovering over the cell.
Note that I tried to move the tooltip to the parent td, but this is no good because when hovering it brings in a div which breaks the table formatting.
I believe it should be possible to solve this using CSS.
JSFiddle
Thanks for the answers which got me to the solution.
Either using div (not span) solves the issue, or declaring the following css:
[data-toggle="tooltip"]{
display: block;
}
this happen because the td have a padding of 8 px- to fix it try that:
[data-toggle="tooltip"]{
display: block;
cursor: pointer;
padding:8px;
}
.table>tbody>tr>td{
padding:0;
}
So, I've looked around SO, and I've found the inverse of this question mostly everywhere. That makes me feel this is either a rarer occurrence, or something trivial that I just can't figure out.
https://jsfiddle.net/je5dpqrL/
The above jsFiddle shows that I have an <h2> element within which I've put an anchor tag with the pull-right class of Bootstrap. Since I want the anchor to display in a smaller font, I'm using font-weight and font-size. Now, since it's floating, the text is centered.
Is there any way to align the text so that the baseline of the Title and the <a> element is the same?
You can adjust the vertical position of the <a> with line-height (and use for example em to make it relative size):
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
line-height:4em
}
This is what you need https://jsfiddle.net/p05bu4c2. Create a span inside the link
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
}
.cl span {
line-height: 1;
vertical-align: bottom;
}
h2 {
border:1px solid #ff0000;
}
<h2>Title <a class='pull-right cl'><span>Stuff</span></a></h2>
So, The following code seems to work:
<h2>Text<a class="pull-right"><span class="text-right" style="display:inline-block">Test</span></a></h2>
Turns out that adding an .inside-block to an element inside the .pull-right class seems to fix it. No need to play around with line-heights
JSFiddle: https://jsfiddle.net/je5dpqrL/10/
EDIT: Thanks to Diamond for this suggestion of adding an element inside the <a> tag, although the CSS is completely different from the one suggested by him.
Like the title says I can't get the background of the a element to be one solid color. Instead my code make each line the color. I have even tried wrapping the php element in a new div and setting that background color but it does the same thing. Any advice is useful.
Site: http://www.whatsatyourcore.com, bottom widget titles
The html:
<a class="teaser-title-top" title="Social customer service and your marketing strategy" href="http://whatsatyourcore.com/?p=78"> Social customer service and your marketing strategy</a>
CSS:
.teaser-title-top { background: black;}
a.teaser-title-top {
color: #fff;}
The above "code boxes" are an example. The first one is what the background is doing on my titles. The second one is what I want it to be.
if you wrap it in a div and set that divs background-color that should work. The element you are setting the background-color for needs to be a block-level element (a div is) you can set an element to display as a block level element with display: block; else it will just color the background of the inline content.
you are styling the anchor which is only going to stlye what's in it. Try something like:
<div id="title-box">
<div class="teaser-title-top">
Social customer service and your marketing strategy
</div>
</div>
And then style the .teaser-title-top
As with the other answers, you can style a wrapper element. However if you want to style just the anchor text directly, try this...
The issue is the line-height of your text. AS you can see, it is spaced out. If you. The height of the line, compared to the size of the text, is bigger.
As an example, set #bottom a { line-height: 100%; } (which is what teh font-size is set to) and you'll see the gap go away. You'll also see the spacing go away. You can "bring back" the spacing with top/bottom padding, as well as changing the line-height.
Try this hope it works
#bottom .teaser-title-top {
color: white;
}
In your css file
I have several paragraphs that I would like to indent, although only the first lines of these paragraphs.
How would I target just the first lines using CSS or HTML?
Use the text-indent property.
p {
text-indent: 30px;
}
jsFiddle.
In addition to text-indent, you can use the :first-line selector if you wish to apply additional styles.
p:first-line {
color:red;
}
p {
text-indent:40px;
}
http://jsfiddle.net/Madmartigan/d4aCA/1/
Very simple using css:
p {
text-indent:10px;
}
Will create an indentation of 10 pixels in every paragraph.
Others have mentioned the best way to implement this via CSS, however if you need a quick fix with inline formatting, simply use the following code:
<p style="text-indent: 40px">This text is indented.</p>
Source: https://www.computerhope.com/issues/ch001034.htm
I was also having a problem getting the first line of a paragraph (only the first line) to indent and was trying the following code:
p::first-line { text-indent: 30px; }
This did not work. So, I created a class in my CSS and used it in my html as follows:
in CSS:
.indent { text-indent: 30px; }
in html:
<p class="indent"> paragraph text </p>
This worked like a charm. I still don't know why the first code example did not work and I did make sure that the text was not aligned.
Here you go:
p:first-line {
text-indent:30px;
}
Didn't see a clear answer for a CSS newbie, so here's an easy one.
first indent all lines (1), than outdent the first line (2)
padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
I ran into the same issue only I had multiple <p> tags I had to work with. Using the "text-indent" property wanted to indent ALL of the <p> tags and that's not what I wanted.
I wanted to add a fancy quote image to a list of testimonials, with the css background based image at the very beginning of each quote and the text sitting to the right of the image. Since text-indent was causing all subsequent paragraphs to indent, not just the very first paragraph, I had to do a bit of a workaround. The same method applies if you aren't looking to do an image though.
I accomplished this by first adding an empty div to the beginning of the paragraph I wanted indented. Next I applied a small width and height to it to create the invisible box and finally applied a left float to make it flow inline with the text. If you are using this for an image, make sure to add a margin to the right or make your width a bit wider for some white space.
Here's an example with the CSS inline. You can easily just create a class and add it to your CSS file:
<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
I'm working on a website for a small law office. In the side-menu, I'm trying to highlight the "current page". I have tried changing the background of the LI, but this doesn't quite do the trick; the list item doesn't spread to the full width of the menu, so it looks bad.
Here's a jsfiddle. I would like the yellow section to highlight like the pink section is highlighted: filling up the full vertical and horizontal space, not just highlighting the text.
Any suggestions on how to do this? I've included the style tag in the html just for example, obviously, and my real solution will be a little different when it's done. But I can't move forward until I figure out how to somehow highlight the entire line.
One little issue: you're mixing em and px units for layout. This makes it a lot harder when trying to make things line up.
I've implemented it using a .selected class that would be applied to the selected elements, and a special case for the elements which are sub-menu items:
.selected
{
display: block;
background-color: #FCFFEE;
width: 15.4em;
margin-left: -0.6em;
padding-left: 0.6em;
}
.subMenuItem.selected
{
display: block;
background-color: #FCFFEE;
width: 13.4em;
margin-left: -2.6em;
padding-left: 2.6em;
}
And a jsFiddle fork of your original with the changes: http://jsfiddle.net/CkKc7/2/.
Good luck.
Remove the padding-left from the ul. Also remove the width.
Add display: block to the <a> tags.
Add the removed padding-left back, but on the <a> tags instead.
http://jsfiddle.net/7fEYx/4/
<li class="menuItem">Contact</li>
Is that what you are trying to achieve?
You should apply your style to the LI parent of the A tag, or make the A tag element block-level. Also, consider using a class instead.