I have created a scrolling new bar, I want to put the content in the bar center,
I defined a css:
.myfont {
font-size: 18pt;
padding-bottom: 0px;
text-align: center;
}
but text-align: center doesn't work, how to write the css? Here is my fiddle.
Dude you forgot to use the class http://jsfiddle.net/ZKKFU/35/
<div id="newsbar" class="myfont"></div>
Instead of making any further changes to mark up, you just need to make your class .myfont to have a display:block;. This will make the div to understand text-align:center; to a div with a width of 100%.
For Instance,
.myfont {
font-size: 18pt;
padding-bottom: 0px;
text-align:center;
width:100%;
display:block;
}
WORKING DEMO
try to give value of width and use float it solve your problem :)
.myfont {
font-size: 18pt;
padding-bottom: 0px;
text-align:center;
width:100%;
float:left;
}
Demo
Related
This container stubbornly refuses to center. Demo: http://codepen.io/Diego7/pen/KzXgZN
I've tried just about every centering code I can find on the web, to no avail.
Removing width: 90%; from the css aligns the container to the left, even though margin: 0 auto; is telling it to center.
Sorry if this question isn't up to StackOverflow's 'standards', but codingforums.com are down at the moment :(
Thanks heaps!
HTML
<div class="container">
<article>
<header>
<img src="https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png" width="972px"><br />
<h2>Information</h2>
</header>
<p>There's currently is no information available. Sorry.</p>
<footer>
© 2016
</footer>
</article>
</div>
CSS
##import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
}
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
background: #fff;
border-radius: 6px;
box-sizing: container-box;
}
article header h2 {
color: #282828;
font-size: 1.2em;
font-weight: normal;
display:inline;
line-height: 1.3;
}
article p {
font-size: 1em;
display:inline;
line-height: 1.5em;
color: #282828;
max-width: 972px;
}
article footer {
font-size: .9em;
display:inline;
color: #999;
}
a {
color: #2790ae;
text-decoration: none;
outline: none;
}
a:hover {
color: #0f6780;
}
Your .container is already centered: if you change background to red you will see it. And, if you add text-align property its content will be centered too.
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
border-radius: 6px;
box-sizing: container-box;
text-align:center;
background: red;
}
If you make the width a bit narrower (like 70%), you see that it IS centered.
by the way: " list-style:none;" has no effect whatsoever, and "box-sizing: container-box;" should be "box-sizing: content-box;"
Looks like you're centering the <div class="container">, but it doesn't look like it, because you're looking at the image.
If you want the image to take up the entire <div> element (so that any centering takes effect on both), try something like the following, instead of using an <img> element:
div.container {
background-image: url(https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png);
}
There are other properties you can use to fiddle with precisely how the image is displayed. You can find more info here.
If you are using container after float tag. It can create problem sometimes. So to avoiding this user <div class="clear"></div>. Also clear class properties would be:
.clear{
clear:both;
margin:0px;
padding:0px;
height:0px;
font-size:0px;
line-height:0px;
float:none;
}
Hope it will be helpful..
I have two labels in the footer of my mobile website. Sometimes the title of the selected product is large and it comes very close to the price as shown below:
THE HTML:
<div style="margin:5px;">
<span class="stickyProductctName">This is a really really really rea</span>
<div class="stickyPrice">$1142.00</div>
</div>
The styles for both the elements are shown below:
#stickyFooter .stickyProductctName {
text-transform: uppercase;
width: 85%;
}
#stickyFooter .stickyPrice {
font-weight: bold;
width: 15%;
float: right;
margin-right: 20px;
}
How can I improve it? Wrap it!
This behavior is because you have a total width of the elements of 100% and a margin-right of 20px. It is overflowing.
put the margin-right on the .stickyProductctName;
add display:inline-block; to .stickyPrice
How bout stack them on top of each other for mobile view?
CSS:
#stickyFooter .stickyProductctName {
text-transform: uppercase;
display: block;
text-align: center;
}
#stickyFooter .stickyPrice {
font-weight: bold;
text-align: center;
}
Here is a JSFiddle.
http://jsfiddle.net/shannabarnard/Ls75o3cr/
Firstly, you need to put both elements in a span, it doesn't work well semantically to have one as a span and the other as a div contained within another div.
Change your widths, and give the price both a left and right padding.
HTML:
<div style="margin:5px;">
<span class="stickyProductctName">This is a really re ally reall yreally really re ally really re reall y really really rereally really really re rea</span>
<span class="stickyPrice">$1142.00</span>
</div>
CSS:
.stickyProductctName {
text-transform: uppercase;
float: left;
display:inline;
width:85%;
}
.stickyPrice {
font-weight: bold;
width: 10%;
float: right;
margin: 0 10px;
}
The mistake is that you used margin instead of padding. As long as border-box is being used (It is standard on frameworks), padding eats the inside of containers instead of adding it. All you need to change is:
#stickyFooter .stickyPrice {
font-weight: bold;
width: 15%;
float: right;
padding-right: 20px;
}
In case you don't have border-box on the site, here is a good article about it. Frameworks usually use a rule like this:
* {
box-sizing: border-box;
}
I'm trying to make a simple 3-cell div that will show a list of ratings for cigars. I want the left cell to be a square image of the cigar, the middle to be the name, and the right to be the rating. The code works fine until I add the image - it then seems to add an 8px border on the bottom of the image, revealing the cell's background color. Using Wordpress (if that helps). Any help is appreciated!
This is the page: http://cigardojo.com/best-cigars/
HTML
<div class="ratingWrapTopRated">
<div class="cigarImage"><img src="http://cigardojo.com/wp-content/uploads/2014/08/cigar-test.jpg" alt="test" width="90" height="90" class="alignnone size-full wp-image-14045" /></div>
<div class="cigarName">Opus XXX Power Ranger</div>
<div class="numericalScoreTopCigars"></div>
</div>
CSS
.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0 auto;
display:table;
font-family:Helvetica, Arial, sans-serif;
margin-bottom: 10px;
}
.cigarImage {
background:#fff; color:#fff;
display:table-cell;
width: 90px;
}
.cigarName {
background:#ff5100; color:#fff; text-align:center;
display:table-cell;
vertical-align:middle;
text-transform: uppercase;
}
.numericalScoreTopCigars {
background:#000; color:#fff; text-align:center;
width:25%;
display:table-cell;
vertical-align:middle;
font-weight:bold;
border-left: 4px solid; border-color: #fff;
}
Add line-height: 0; to .cigarImage and you will get rid of it. Many people will tell you to use display: block; and that will work but that is not the real problem. The problem is that img tags are inline and you get that space because you get the image plus the line-height it is in that container, and that creates the space you see below your image. The correct solution to that is to add what I just told you.
So edit your class like this:
.cigarImage {
background:#fff; color:#fff;
display:table-cell;
line-height: 0; /* Here is the solution */
width: 90px;
}
And you will get that working right :)
This is because images are inline (that is, they're treated like they're on a line of text) by default, and the bottom of them is aligned to the "baseline" of the line of text, not the absolute bottom. Below the image you get the space from the rest of the line below the baseline. If you just set the image to display: block; it should get rid of it (then it won't be considered part of a line of text, and will instead be its own block).
Just add a padding right of 5px or so on the .cigarImage class. You should also increase your image height or decrees the height of the info bar next to your images as they dont line up.
In your class ratingWrapTopRated class set line-height to 0:
.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0;
display:table;
font-family:Helvetica, Arial, sans-serif;
padding-bottom: -8px;
margin-bottom: 10px;
line-height: 0; /*here*/
}
Im currently creating a print css! Because i have to print on a template i use mm as unit!
My problem is how you can see that the red text is not aligned to the top of the white box, it seems like the white box has a padding! I would like to have the text exactly 1 mm below the red line. I tried to give the text a margin-top:1mm but the text stayed at the position! http://jsfiddle.net/WkhPb I would like to keep mm as unit what do i have to change? Thanks
My html:
<div id="box">
<div id="adress">
<a>Das ist Box 1</a>
</div>
</div>
Css:
#box{
height:40mm;
width:90mm;
background-color:yellow;
padding-left: 6mm;
padding-right: 5mm;
padding-top: 2mm;
}
#adress {
border: 1px solid red;
width: 30mm;
height: 20mm;
background-color: white;
}
#adress a {
color: red;
font-size: 2mm;
margin-left: 1mm;
margin-top: 0mm;
line-height: 0mm;
}
http://jsfiddle.net/WkhPb/
You can use position : absolute on your link
http://jsfiddle.net/WkhPb/3/
#adress a {
color: red;
font-size: 2mm;
position:absolute;
top:1mm;
left:1mm;
}
and position:relative on the parent
Remove the padding and margin that is applied by the browser and set it to 0;
Secondly You must set the display property of the link to block or inline-block to be able to apply margin.
*{
padding:0;
margin:0;
}
#address a{
display:block;
}
DEMO FIDDLE
You said: "I would like to have the text exactly 1 mm above the red line.."
fiddle
change your css to this:
#adress a {
color: red;
font-size: 2mm;
margin-left: 1mm;
margin-top: -2mm; /* changed */
line-height: 0mm;
display:block; /* added */
}
You need to add a line-height of 3mm on the containing div to match your font and give it the 1mm margin from the top you require. You probably would want to put a padding on the sides of the div as well so the text doesn't sit right on it.
#adress {
line-height:3mm;
padding:0 1mm;
}
Use:
padding: 0px;
Inside #adress.
I currently have a simple header set up in HTML, and am using CSS to style it. I have created multiple styles: '#header' and '#header #right'. When I use 'float: right;' for the second style I mentioned, it moves the text down almost completely under the header.
Code:
index.html:
<html>
<link rel="icon" type="image/png" href="images/favicon.png">
<link href='main.css' type='text/css' rel=Stylesheet>
<head>
<title>FriendSub</title>
</head>
<body>
<div id='header'>
<font size='+3'>FriendSub </font>
<a href='index.php'>Home</a> |
<a href=''>Subscribers</a> |
<a href=''>Subscriptions</a>
<div id='right'>
<p><a href=''>Log in</a> | <a href='register.php'>Register</a></p></div></div>
</body>
</html>
main.css:
#charset "utf-8";
/* CSS Document */
#header {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
background-color: #093;
border-top-left-radius: 18;
border-top-right-radius: 18;
width: 96%;
height: 58px;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 14px;
padding-right: 14px;
color: #FFF;
font-weight: bold;
text-shadow: #000 0.1em 0.1em 0.2em;
}
#header a {
color: #FFF;
text-decoration: none;
text-shadow: #000 0.1em 0.1em 0.2em;
}
#header a:hover {
color: #CCC;
}
#header #right {
float: right;
width: 220px;
background-color: #093;
}
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #CCC;
width: 1000;
height: 58px;
margin-left: auto;
margin-right: auto;
padding-top: 14px;
padding-left: 14px;
padding-right: 14px;
padding-bottom: 600;
font-weight: bold;
border-bottom-left-radius: 18;
border-bottom-right-radius: 18;
line-height: 1%;
}
JSFiddle here: http://jsfiddle.net/aKtep/
try adding a <div style='clear:both'></div> right after you close #right and see what happens
A quick solution (assuming I understand your desired result) is to rearrange the elements so the item you want to float to the right is the first in header. Floated elements are removed from the normal flow of the document, and often are pushed to the next line unless they have enough space. However, if the floated element comes first, subsequent elements will arrange themselves around it. See fiddle.
Remove the p tag from around the Login/Register link, modify the #header #right to include a padding-top:10px; You're also using too many divs when you don't really need to (divitus)
You need to specify a width of units for your container #header that will accommodate all of its content.
All I did here was change #header width from 96% to 960px
I guess I'm not 100% sure on what you're asking but it sounds like your normal header is pushing the right header down below it. From what I can see, it may have to do with your header container having a width of 96%. Then the #right #header has a width of pixels and the original header container might not have enough room left for that many pixels. Try changing the width of #header #right to a %
A word of advice, don't use ID's so much. You are creating very high specificity that can be a pain for you later on.
As mentioned before, you should use clear: float after the #right segment.
The reason for this is that the clear property is related directly to the float property. It specifies if an element should be next to the floated elements or if it should move below them. This property applies to both floated and non-floated elements.