I had this code and it worked good. The footer information was at the bottom of my screen in the middle:
div#footercenter p { font-size: 0.9em; }
<div id="footercenter">
<p>© XXXX </p>
</div>
I wanted to change it to this:
div#footercenter {}
div#footer-message { font-size: 0.9em; color: #EEEEEE; display: inline;}
div#footer-copyright { font-size: 0.9em; color: #EEEEEE; display: inline; }
<div id="footercenter">
<div id="footer-copyright">xxx</div>|
<div id="footer-message">yyy</div>
</div>
Now my text is to the left and not in the center. Does anyone have any idea how I can make it go back to the center?
Dave
You mean like this? : http://jsfiddle.net/jomanlk/DHA9A/
You just need to add text-align to center
div#footercenter {text-align: center}
Should be as simple as this:
#footercenter {
text-align:center;
}
But you may need to do this as well if you have other styles interfering:
#footercenter div {
float:none;
display:inline; /* or inline-block */
}
A <div> is a block element that should be used for defining collections of elements rather than explicitly for text content. There's nothing wrong with your markup but you have set your divs to then have a display:inline which means they only occupy the width of their content. The divs will also bunch up to the left by default.
The better approach would have been to contain the text within 2 span elements and then simply set the text-align property of the parent div to center.
See the following;
div#footercenter { font-size: 0.9em; color: #EEEEEE; text-align:center; }
<div id="footercenter">
<span>xxx</span>|
<span>yyy</span>
</div>
Try
div#footercenter {
text-align:center;
}
<div id="footercenter">
<span id="footer-copyright">xxx</span>|
<span id="footer-message">yyy</span>
</div>
Rewrite your footercenter class as
div#footercenter {text-align:center;}
Set the width for the div you wanna apply the text-align property to and then assign text-align : center.
Related
I made a list with divs, that is displayed fine in Opera, but not in IE.
This is what is happening, in first scene, a line break for some rows, at last span from divs - that contains the class shortcut: http://i.imgur.com/D5wZEdb.png
These are the span and .shortcut styles:
.ui-context-menu .row span{
font-size:16px;
font-family:'Segoe Ui',Arial,sans-serif;
font-weight:400
}
.ui-context-menu .row .shortcut{
float:right;
margin-left:40px;
margin-right:15px
}
In the class row, I did:
.ui-context-menu .row{
display:table;
width:100%;
height:25px;
cursor:default;
padding-right:18px
}
And the class ui-context-menu is a bit normal, but I add a property on to make overflow hidden.
The HTML may turn something so:
<div class="ui-context-menu" data-which="none" oncontextmenu="..." id="context-menu" style="display:none;left:8px;top:50px">
<div class="row able" onmousedown="..." onclick="...">
<div class="base">
<div class="context">
<span>
Load
</span>
<span class="shortcut">
CTRL+O
</span>
</div>
</div>
</div>
</div>
This is an quick fiddle for tests: http://jsfiddle.net/erpngfwv/2/
How can I fix this?
Add this class ".ui-context-menu .row span" float
.ui-context-menu .row span{
float: left;
font-family: "Segoe Ui",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
}
I am trying to add text next to the circle.
HTML
<div class="row">
<div class="col-sm-2">
<span><div class="circle"></div></span><p>available</p>
</div>
</div>
CSS
.circle {
width:10px;
height:10px;
border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
background: green;
}
Right now, the circle is on top <p> tag.
I am trying to add two circle: available and a red one saying not available. Also, if you know a better way to do this, please let me know.
Thanks,
The div takes up 100% of the width by default, which is why your p tag wraps to the next line. You can set e.g. display:inline-block on the div to change this behaviour.
See this fiddle for your two circles.
Just add the following code :
.col-sm-2 > span, .col-sm-2 > p {
display: inline-block;
}
What this does is it causes the two elements span and paragraph <p> tags to become inline-block and hence align on the same line.
See this below :
.circle {
width:10px;
height:10px;
border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
background: green;
}
.col-sm-2 > span, .col-sm-2 > p {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-2"> <span><div class="circle"></div></span>
<p>available</p>
</div>
</div>
You could use a icon instead. I like the font awesome icon set http://fortawesome.github.io/Font-Awesome/icon/circle/:
You just add the fontawesome Css files and in your html add:
<i class="fa fa-circle">available</i>
I have this sample:
http://jsfiddle.net/3gmeK/298/
CSS and HTML:
div { padding:10px 20px; background-color:#F51; }
p { text-align:left; padding:5px; background-color:#333; color:#fefefe; }
<div>
<p>
There are many fish in the sea! So lovely!<br>
many fish in the sea! So lovely!
</p>
</div>
I want my text in its current form is aligned in the center.
I do not want to use "text-align: center;"
Inside this div my text means to be in current form.
I hope I managed to explain better what they want to do.You can help me solve this problem?
Thanks in advance!
This can be done by adding an extra span around the text:
Add text-align: center; to p
Add an extra span around the text
Add a new span selector with display: inline-block; to make the span center in relation to the p and text-align: left; to shift it's text to the left
div {
background-color: #F51;
padding: 10px 20px;
}
p {
background-color: #333;
color: #fefefe;
padding: 5px;
text-align: center;
}
span {
display: inline-block;
text-align: left;
}
<div>
<p>
<span>There are many fish in the sea! So lovely!<br>
many fish in the sea! So lovely!</span>
</p>
</div>
You can also try this,
Add <span> tag for content and add this css
p span{ display: table;margin:auto;}
http://jsfiddle.net/3gmeK/304/
In my footer I want to make 3 different sections of paragraphs-at left, middle and right. The 3 paragraphs should sit next to each other, not below each other.
This is how I was trying to do, but I failed to figure it out.
<footer>
<div id="footer_box">
<p id="footer_text_left">
should sit at the left.
</p>
<p id="footer_text_middle">
should sit in the middle.
</p>
<p id="footer_text_right">
should sit at the right.
</p>
</div>
</footer>
.CSS:
#footer_box{
border-top:2px solid #009933;
padding-bottom:75px;
background-color:#3366CC;
}
#footer_text_left{
font-size:15px;
color:black;
font-family:Euphemia;
}
#footer_text_middle{
font-size:15px;
color:black;
font-family:Euphemia;
}
#footer_text_right{
font-size:15px;
font-family:Euphemia;
color:black;
}
First option:
p {
float: left;
}
Second option:
p {
float: left;
width: 30%;
margin: 0 1%;
}
Third option (best):
p {
display: inline-block;
}
Another thing I saw was that every paragraph had the same rules, you could set the font properties on the body or global paragraph so you won't need to set it on everything.
That would look like this:
body {
font-size:15px;
font-family:Euphemia;
color:black;
}
Or if you want it just on the footer paragraphs:
footer p {
font-size:15px;
font-family:Euphemia;
color:black;
}
This is Extremely easy to do, either by making the <p>'s inline-block, or float:left them:
#footer_box p{
display:inline-block;
}
inline-block, (or inline) is the best way to do it, as float:left, has some unwanted effects, such as the <p>'s no longer effect the height of their parent, as can be seen in this JSFiddle, compare it with the one below.
JSFiddle
See this SO question about it: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
Just capture the paragraph into a div and add style. For example
<div style="float: left; margin-right: 20px">
Here's how I did for a paragraph containing picture: https://jsfiddle.net/xomkq7dv/7/
I have been looking for a way to center an anchor tag vertically according to a span tag, which are both encased within div tag.
My HTML
<div id="project_list">
<div class="title">
Example Project
<span class="show_details">Show Details</span>
<div style="clear: both"></div>
</div>
</div>
My CSS
div#project_list {
border: 2px solid #000000;
}
div#project_list div.title {
background: grey;
padding : 10px;
}
div#project_list div.title a {
font-size: 1.231rem;
}
div#project_list span.show_details {
background: orange;
float : right;
padding : 13px 5px;
}
I have also create a JSFiddle here, so you may see what I am speaking about.
Thank you to everyone in advance as I have been racking my brain on how to do this for a couple days now.
You could set the line height to match the button height:
a { line-height:46px; }
Note: I just used a but you will probably want to add a class so the style doesn't get applied to all anchor tags.
http://jsfiddle.net/GxqTh/2/
#OpenNoxdiv- try adding padding to your a tag; 20px seemed to center nicely for me. - see below
#project_list div.title a {
padding-top:20px;
}