How can I make the following span to be left-aligned with its parent, in this case, the DIV with id of “rightPanel”?
Currently, the following code displays the span content to the right with Safari browser.
<div id="rightPanel">
<span style="background-color:##ACE1AF; white-space:nowrap;">
my stuff goes here...
</span>
</div>
Thanks.
Use the following CSS:
#rightPanel {
text-align: left;
}
Or, if you want to use inline styles (not recommended) as you did in your span tag:
<div id="rightPanel" style="text-align: left">
Related
I have the following piece of CSS code
<div class="ws-contact-info">
<div class="col-sm-4">
<h2 style="text-align: center;">Phone:</h2>
<p style="text-align: center;">(077) 4223 0866</p>
</div>
</div>
h2, p {display: inline-block;}
The formatting and sizing of text is exactly how I want but it is displayed in a column on my the top of my homepage.
Phone:
(077) 4223 0866
I would like it to display as follows
Phone:(077) 4223 0866
Could anyone kindly help?
As mentioned here, h2 and p tags are block elements, meaning they're displayed beneath each other because they take 100% of the width, if you want them to show besides each other, you can use display: inline-block or display: flex (there are a few more options for that). You can also write them on the same line and/or use spans to differentiate them with styling.
h2, p { display: inline-block }
or
<h1 style="display: inline-block">Hi</h1>
You can use inline-block like that to show them in the same line and you can change the margin to center it again.
<div class="ws-contact-info">
<div class="col-sm-4">
<h2 style="text-align: center; display: inline-block; margin-left: 40%;">Phone:</h2>
<p style="text-align: center; display: inline-block; margin: auto;">
(077) 4223 0866
</p>
</div>
</div>
Also i suggest you to check display types for further information about how to display like the way you want them.
Both h2 and P tags are block element. If you need to show the content in same line you need to add below css
h2,p{
display:inline-block;/*or use display: flex or display:inline
}
Else, you may change the HTML(without css) tag like below
<div class="ws-contact-info">
<div class="col-sm-4">
<h2 style="text-align: center;">Phone:<span>(077) 4223 0866<span></h2>
</div>
</div>
Okay so I have an image,
<div class="column">
<img src="images/picture.jpg" id="first" title="firstpic">
<span id="firstspan">This is what should appear when hovering over first image</span>
</div>
Now, how do I make it so that "firstspan" only shows up when someone hovers over the "first" image? Here is what I tried for the css.
#firstspan {
display: none;
}
#first:hover #firstspan {
display: block;
}
but this doesn't seem to work. Any idea on what is wrong?
Also, is there a way for #first to be positioned inside the image on the bottom? Rather than outside the image?
Try this
img#first:hover ~ #firstspan {
display: block;
}
DEMO.
.column:hover #firstspan {
display: block;}
Demo
Your solution doesn't work because your image tag and span tag are siblings. Your rule is looking for a parent to descendant relationship.
If you can wrap your image tag and span tag in a DIV and move the id for the image tag to this new container DIV your CSS should work.
<div id="first">
<img>
<span id="firstspan"></span>
</div>
Try like this:
<div class="column">
<img src="images/picture.jpg" id="first" title="firstpic">
<span id="firstspan"> your text </span>
</div>
#firstspan {
display: none;
}
.column:hover #firstspan{
display: inline;
}
How do I form a div to have the same dimensions as those of the content housed by it , and not any larger ?
The div that I currently has a larger width than that of the three divs that i have placed inside it.How can i get it to fit the inner div's size?
Here is the link to what i have now :: http://jsfiddle.net/jairajdesai/Fd5hQ/
HTML :
<div id="initial_options">
<div class="option_button" id="option_1">
<big>1</big> <span class="supplementary_text">text goes here</span>
</div>
<div class="option_button" id="option_2">
<big>2</2></big> <span class="supplementary_text">text goes here</span>
</div>
<div class="option_button" id="option_3">
<big>3</big> <span class="supplementary_text">text goes here</span>
</div>
</div>
CSS :
#initial_options {
position:relative;
top:18%;
left:0;
z-index:10;
background-color:#eee;
}
.option_button{
width:20%;
border-radius:none;
}
#option_1{
background-color:#013adf;
}
#option_2{
background-color:#f7fe2e;
}
#option_3{
background-color:#ff0000;
}
Inline element like <span> wraps around the content and more. Either you can use this or you can set the display property as inline.
div {
display: inline;
}
However setting to display as inline will not give you any option to add top/bottom margin and padding. If you want to add that too, you should use inline-block as the property.
div {
display: inline-block;
}
use display:inline-block; without paddings, margins and floats
I am looking to create the effect shown in the following image:
Where the black background behind the text staggers, rather than creating a black box when the string wraps. Can this be achieved with just CSS on a dynamic string?
This is actually the default behaviour for inline elements, such as span.
The following code should have this effect.
<span style="background-color: black; color: white">EYES ON<br/>FILM</span>
Note that the <br/> is there for illustrative purposes, it will also work if the text is wrapped by the browser.
If you need to do this for a div, make sure to set the display: inline style on it.
Here is how you do it. The basic idea is to wrap each word in a separate div and nest those divs within another div with a width that wraps the inline divs.
<style>
.foo {
display: inline;
background-color: #000;
color: #fff;
margin: 0;
}
.wrapper {
width: 100px;
}
</style>
<div class="wrapper">
<div class="foo">Here </div><div class="foo">is </div><div class="foo">some </div><div class="foo">text </div><div class="foo">exciting </div><div class="foo">isn't </div><div class="foo">it </div>
</div>
Something along these lines?
http://jsfiddle.net/wxDa7/
<style>
#a
{
width:50px;
font-size:20px;
line-height: 90%;
text-transform:uppercase;
}
#a .b
{
background-color:black;
color:white;
}
</style>
<div id="a">
<span class="b">Test test </span>
</div>
This autobreaks at a defined width. Use %nbsp; to get the extra space after the text.
It works putting the text inside a <span> inside a <p>, or using the Teletype Text Element (<tt>), or <code> tag.
<tt> is not accepted in HTML5.
Example jsfiddle:
http://jsfiddle.net/gmDWP/
I am trying to place a search text box on the right hand side of the header and I can't seem to figure out how to do it using Bootstrap 2.0.1.
The code I am trying is
<div class="page-header">
<h1 class="span2">
Parts
</h1>
<div class="span4">
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on">
<i class="icon-search"></i>
</span>
<input type="search" class="span3" placeholder="Search" name="search" id="search"/>
</div>
</div>
</div>
</div>
</div>
But it the search text box is not being pushed to the right with the spans and offsets and the line on the bottom of the header is not being pushed to the bottom of the tag. Any ideas?
Adding float: right to the first div tag nested within .page-header works for me. You also need to remember to clear your floats, this is the reason the line at bottom of the header is not being pushed to the bottom of the tag.
So adding the following CSS would resolve your problem:
.page-header {
overflow: hidden; /* clear floats */
}
.page-header div {
float: right; /* float search content right */
}
Working example: http://jsfiddle.net/7zds9/
Edit
For some reason, as pointed out by #PlTaylor, the input field wraps onto a new linein Chrome. This can be fixed using the following CSS:
.input-prepend input {
float: left;
}
Working example: http://jsfiddle.net/7zds9/1/
You can use this:
input {
float: right;
}
http://jsfiddle.net/dXJb8/
Or you can use position: fixed; to set the location of your search box.
http://jsfiddle.net/dXJb8/1/