I am applying dynamic classes "float-left", "float-right" and "float-center" to the Lists to position them properly where I want, but for centering as there is no float:center; I tried with margins, inline-block; text-align:center.. but nothing works.. please check this fiddle
ul.tabs .center {
margin:0 auto;
text-align:center;
overflow:hidden;
}
.float-center li{
display:inline-block;
}
http://jsfiddle.net/443E2/
Use the following code:
.float-center {
text-align: center;
}
.tabs.float-center li {
display: inline-block;
float; none;
margin-left: -4px; /* Fix for white spaces between li while using inline-block */
}
.tabs.float-center li:last-child {
border-right: 1px solid #999;
}
See the update jsfiddler
Check this fork - http://jsfiddle.net/GzS7X/
I changed this to centre the content of the <li>:
.tab_content {
padding: 20px;
font-size: 1.2em;
text-align:center;
}
Related
I personalize a part of my Prestashop site and i don't know what I can use for center this element :
Image
Css :
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
margin: 25px 25px 25px 25px;
display: none;
background-color: white;
overflow: hidden;
}
If you wanna center the words inside the container exist the property css text-align
You must have include the html too if you want a better answer and what have you tried.
As an example, these elements were centered using css, text-align:center;
I'm using Wordpress and their twentythirteen theme. With this theme I would like to position and align the site title and tagline text to the upper right of the header. When I try to do so it's always positioned under my logo for some reason. I played with the position CSS property with no luck, it's still positioned under the logo.
Sample of the CSS file
.site-title {
font-size: 30px;
line-height: 0.5;
padding: 5px 0 10px;
text-align:right;
position: relative;
}
.site-description {
font: 300 italic 18px "Source Sans Pro", Helvetica, sans-serif;
text-align:right;
}
.site-header {
margin:10px auto 0 auto;
max-width:980px;
padding:0;
background-color:#ffffff;
background-size: 980px auto;
border-top:2px solid #efefef;
border-bottom:1px solid #cdcdcd;
box-shadow: 0 3px 3px #dedede;
-moz-box-shadow: 0 3px 3px #dedede;
-webkit-box-shadow: 0 3px 3px #dedede;
-o-box-shadow: 0 3px 3px #dedede;
}
.site-header .site-title:hover {
text-decoration: none;
}
.site-header .home-link {
min-height: 50px;
}
.header-logo {
max-width:60%;
display:block;
padding-top:3px;
position:relative;
}
Here's my testing website so you can see exactly what I'm talking about:
mywptestsite.is-great.org
What am I missing here?
Thanks in advance,
Kim
The problem is that you are encapsulating your site title in an h1 tag, so it is positioning it in a new line.
You could fix the issue by putting both your logo and your site title in the same <div> element, and add float: left; to your header-logo class, and float: right; to your site-title class.
You can try this - add these few lines to title and tagline css classes:
.site-title {
position:absolute;
top:20px;
right:20px;
}
.site-description {
position:absolute;
top:50px;
right:110px;
}
You can change top and right values to get desired positions of course...
You can use float on the image, title, and description to get those two elements onto the right. You will also need to use a clearfix technique on .home-link to get the element to wrap around all floated elements.
CSS
.header-logo { float: left; }
.site-title{ float: right; clear: none; }
.site-description { clear: right; }
Apparently my brain has turned to mush this morning. I feel certain the answer is obvious but I can't figure out what I'm doing dumb. I'd guess it's something wrong with the CSS so here's that:
.fulldiv {
border:2px solid green;
background:white;
margin: 10px 0 10px 5px;
width:97.5%;
}
.fulldiv h2 {
background:green;
padding: 10px 5px;
margin:0;
}
.fulldiv p {
padding: 5px 5px;
margin:0;
}
.thirds {
border:2px solid cyan;
background:white;
margin: 10px 0;
width:31.5%;
float:left;
margin-left:5px;
}
.thirds h2 {
padding: 10px 5px;
background:cyan;
margin:0;
}
.thirds p {
margin:0;
padding: 5px 5px;
}
The full shenannigans can be seen at this
JS Fiddle.
Shouldn't the third .hicon div be separate from the the previous one? Why are the three thirds divs chilling inside the final div? What am I overlooking?
You need to add:
<div style='clear:both;'></div>
After the final .thirds div in order to clear the floats you have in place and resume the document flow.
Alternatively you can use a css clearfix on the nth-child(3) of .thirds (or add a clearfix class directly)
Looks like a case for clear fix! I've added in the microclearfix by Nicolas Gallagher, but there are plenty out there.
http://jsfiddle.net/C9MZp/4/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
This is part of a more complex dynamic template code so I'm trying to keep the structure as is but trying to style the text so that the cast members line up with the directors below.
Right now the cast gets wrapped to 3 lines but it does not keep its indenting. Anyone know how I could style it to hold its indented look.
http://jsfiddle.net/N2y88/
http://jsfiddle.net/N2y88/2/
try something like this
.support p span:first-child {
color: #81848A;
display: inline-block;
padding-right: 10px;
text-align: right;
width: 50px;
float:left;
}
.support p span:last-child {
display: inline-block;
float:left;
width:400px;
}
.support .cast, .support .director{
color:blue;
}
.support p {
color: #D0D0D0;
margin: inherit;
padding: 0.1em 0;
clear:both;
}
I hope you can help my with a exercise I have been stacking. I am wondering why the header is not appears in blue - as I actually have assigned: Please not the header area. I have assigned color "blue". BUt I have tried any color as well. The header keeps white
This is the CSS Code. (HTML is ok according to Dreamwaver)
Thanks a lot!
Best regards from Berlin, Germany.
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
font: 1.1em/1.3em Georgia, "Times New Roman", Times, serif;
/*1.1em/1.3 typischer Code für: Schriftgröße 1.1em und Zeilenhöhe 1.3em*/
}
h1, h2, h3 {
padding: 0.7em 0;
}
p {
padding: 0.3em 0;
}
/*-------- CONTAINER POSITION (#CONTAINER)----------*/
#container {
margin: 1em 6%;
background-color:#ffffff;
border:1px solid #1166cc;
}
/*-------- TOP AREA POSITION (#HEADER)----------*/
#header {
background-color: blue;
}
#header h1 {
color: white;
float: left;
width: 65%;
padding: 0.5em 2%;
}
#header form {
padding: 0.4em 1%;
float: right;
background-color: #77aadd;
width: 20%;
margin: 0.5em;
}
#header input {
padding:5px;
background-color: #ffffff;
border: 2px solid;
font-size: 1em;
color: #999999;
width: 70%;
}
/*-------- CONTAINER NAVIGATION POSITION (#NAVBAR)----------*/
#navbar {
clear:both;
background-color:#77aadd;
padding: 0.1em;
}
#navbar ul {
padding: 0.6em;
}
#navbar li {
display:inline;
list-style:none;
}
#navbar li a {
padding: 0.3em;
color: #fafafa;
}
/*-------- CONTENT POSITION (#CONTENT)----------*/
#content {
float: left;
width: 65%;
padding: 0.5em 3%;
}
/*-------- INFOBAR DESIGN (#SIDEBAR)----------*/
#sidebar {
float:right;
padding: 0.5em 3%;
font-size: 0.95em;
background-color:#cceeff;
width: 23%;
}
/*-------- FOOTER POSITION (#FOOTER)----------*/
#footer {
clear:both;
background-color:#5599dd;
text-align: right;
color: white;
}
#footer p {
padding: 0.5em;
}
Use firebug to debug it.
Select the elemnt (with the arrow icon) then see the CSS style panel. It will tell you all css styles and where they were defined for the element.
Double check your use of ID's and Classes.
Make sure your Header container has a height value (Use Firebug). If you are using floating elements in your Header, remember to place <div style='clear:both'></div> just before closing Header Container.
Add position, width and height to #header, for example:
#header {
background-color: blue;
position: absolute;
width: 80%;
height: 20%;
}
If you don't, the browser have no way of knowing how big #header is supposed to be.
Also, use http://validator.w3.org to check that your code is OK. It's much more reliable than Dreamweaver. At least Dreamweaver 8, that I'm using; later versions may be better.
By the way, if you're learning HTML, CSS or one of several other computer languages, http://www.w3schools.com is a great resource.