The text in my li's don't seem to be centering I am using margin: 10px auto; and it isn't working, also I tried using the margin: 0 auto to center the whole ul but that isn't working either
here is the css
ul.mainpackages {margin: 0 auto; height: 40px; width: 100%; }
ul.mainpackages li {
border-top-width: 4px;
border-bottom-width: 4px;
border-top-style: double;
border-bottom-style: double;
border-top-color: #FDFECD;
border-bottom-color: #FDFECD;
height: 40px;
width: 300px;
background-color: #DDEFEF;
display: inline-block;
margin: 0px 60px;
}
ul.mainpackages li p{
margin: 10px auto;
font-size: 16px;
}
and the html
<ul class="mainpackages">
<li class="first1"><p>Pick a package that suits you!</p></li>
<li class="last1"><p>Special deals & offers!</p></li>
</ul>
Your paragraph is 100% wide, so when you try to center it...
You should either set the width or text-align: center inside the paragraph
You need to explicitly specify a width on the <p> before using margin: 0 auto;
ul.mainpackages li p{
margin: 10px auto;
font-size: 16px;
width: 180px;
}
jsfiddle
Related
I am working on a simple redesign for a project I did awhile back, just for practice. I have a left column that remains a certain size no matter what I seem to do. When the content in the main area becomes too great, the left column looks cut off. How do I get this column to extend with the content of the page? Here is the css I have for my containers and the column:
#outerWrapper {
background-color: #fff;
margin: 0 auto 0 auto;
min-width: 760px;
text-align: left;
width: 80%;
}
#outerWrapper #header {
background-color: #8ab573;
border-bottom: solid 1px #628152;
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 10px 10px 10px 10px;
}
#outerWrapper #contentWrapper #leftColumn1 {
background-color: #eef6ed;
border-right: solid 1px #8ab573;
float: left;
padding: 10px 10px 10px 10px;
width: 24%;
height: auto;
}
#outerWrapper #contentWrapper #content {
margin: 0 0 0 26%;
padding: 10px 10px 10px 10px;
}
#outerWrapper #contentWrapper .clearFloat {
clear: left;
display: block;
}
#outerWrapper #footer {
background-color: #eef6ed;
border-top: solid 1px #8ab573;
padding: 10px 10px 10px 10px;
Thanks for any suggestions, I know it's really simple I'm just having code block I guess :/
I am currently creating a UL menu, and I'm having some difficulties. Whenever I am trying to move down the text in the LI it is making the div bigger.
HTML Code:
<ul class="accordion">
<li class="files">
Dashboard<span>0</span>
</li>
</ul>
CSS Code:
.accordion li > a {
display: block;
position: relative;
min-width: 110px;
padding: 0 20px 0 50px;
height: 50px !important;
color: #C8C8C8;
font: bold 12px/32px Arial, sans-serif;
text-decoration: none;
}
So whenever I change the padding to this:
padding: 5px 20px 0 50px;
It makes the div 55px in height, when it should be 50px. Hope someone can help me with this! Thank you.
Here is how box-sizing/padding and line-height work. My personal opinion is that line-height is the best option and a lot more easy to calc.
They can be used together for a truly awesome combo!
Line-height/Padding CSS
.lH {
width: 80px;
height: 50px;
text-align: center;
display: block;
border-radius: 5px;
border: 2px solid rgba(0, 0, 0, 0.4);
background: #ff7200;
line-height: 50px;
margin-bottom: 50px;
}
Box-sizing CSS
.bS {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 80px;
height: 50px;
text-align: center;
display: block;
border-radius: 5px;
border: 2px solid rgba(0, 0, 0, 0.4);
background: mediumSeaGreen;
padding: 12px 0;
}
JSFIDDLE
Alright, so I have searched the Internet, I have looked at at the very least twenty different posts on this site, and spent several hours with this issue and either I am blind, or perhaps rustier at this than I thought. I have two divs within a wrapper- the left div is float:left, and I want to space them apart from one another, but when I add padding or margin to the left side of the right div nothing happens. If I manually add space using the code for space, it pushes the paragraph down rather than over. I am at a loss, I tried using inline-block display, I tried floating the right paragraph. The only thing that sort of worked was adding right padding to the left box, but because the content in the left box is centered it then messed up the display of the left box. I uploaded the site contents so you could see what I am talking about, and the stylesheet is pasted below. Any help with this would be greatly appreciated! I usually just use tables and iframes, but I got yelled at for that so I was trying to do this the "right way" (I guess?) for a friend. http://www.djcproductions.net/GSFlook/
/* CSS Reset */
* { margin: 0; padding: 0; }
body {
font-family:Tahoma, Geneva, sans-serif;
background-color:#282828;
}
#container {
width: 1024px;
height: 1200px;
background-image:url(../images/body_bg.jpg);
background-repeat: repeat-x 0 0;
margin: 0 auto;
padding: 0 2px;
}
#header {
width: 1024px;
height: 88px;
}
#nav {
clear: both;
height: 34px;
width: 1024px;
background-image:url(../images/nav_bg.jpg);
}
#nav ul {
float: left;
}
#nav ul li {
display: block;
float: left;
height: 34px;
list-style-type: none;
padding: 0 1px 0 0;
}
#nav ul li a {
color: #ffffff;
display: block;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
height: 100%;
line-height: 34px;
padding: 0 0 0 18px;
}
#nav li a span {
display: block
float: left;
height: 100%;
padding: 0 18px 0 0;
}
#nav li a:hover, #nav li.active a {
background: url(../images/atab.jpg) no-repeat center;
color: #fff;
cursor: pointer;
text-decoration: none;
}
#homegallery {
width: 1024px;
max-height: 302px;
padding: 37px 0 0 49px;
}
#preview_box{
width: 390px;
height: 236px;
background-image:url(../images/preview_bg.jpg);
background-repeat:no-repeat;
padding: 24px 0 0 0;
}
#preview_shadow{
width: 390px;
height: 236px;
background-image:url(../images/filler.png);
float: left;
padding: 0 0 0 0;
}
.shadow{
-moz-box-shadow: 2px 5px 5px 1px #ccc;
-webkit-box-shadow: 2px 5px 5px 1px #ccc;
box-shadow: 2px 5px 5px 1px #ccc;
}
#content{
padding: 118px 0 0 33px;
}
#scroller{
background-image:url(../images/scroller_bg2.jpg);
background-repeat:no-repeat;
position: relative;
width: 202px; /*marquee width */
height: 267px; /*marquee height */
overflow: hidden;
padding: 0 0 0 0;
float: left;
}
#scroller_content{
width: 98%;
position: absolute;
padding: 20px 0 0 0;
}
#scroll{
font-family:Tahoma, Geneva, sans-serif;
color: #8f8f8f;
}
#scroll li{
padding-top:5px;
list-style-type:none;
}
#company_info{
font-family:Tahoma, Geneva, sans-serif;
color: #000000;
width: 90%;
padding: 0 0 0 0;
}
p {
font-family:Tahoma, Geneva, sans-serif;
text-indent: 30px;
line-height: 25px;
}
The div
<div id="company_info">
Is not floating, but the div to the left of it with id=scroller is.
For a quick solution, you will need to make #company_info:
#company_info {
float: left;
width: 70%;
margin-left: 20px;
}
Also make sure to clear float after those two divs!
You didn't post HTML so I made my own markup, with the parameters you were looking for:
HTML
<div class="container">
<div class="left">
<p>Services</p>
</div>
<div class="right">
<p>Our company</p>
</div>
CSS
p {margin-left: 30px; font-family: Arial, sans-serrif; color: #FFF;}
.container {
margin: 0 auto;
width: 620px;
height: 400px;
padding: 10px;
background: #CCC;
}
.container .left {
margin: 0 auto;
float: left;
width: 300px;
height: 390px;
background: #999;
}
.container .right {
margin: 0 auto;
float: right;
width: 300px;
height: 390px;
background: #666;
}
jsFiddle
I'm trying to center text within a DIV, not just horizontally but vertically too - I've played around with the CSS for a long time and can't seem to get this to work -
My code is here: http://jsfiddle.net/K2sys/46/
h6 {
font-size: 32px;
color: #FFFFFF;
}
h6:hover {
color: #000000;
}
.griditem {
position: relative;
display:inline-block;
margin-right: 17px;
margin-bottom: 17px;
background-color: #777;
width: 32%;
height: 500px;
max-width: 612px;
min-width: 389px;
text-align: left;
}
.titles {
padding: 0px;
bottom: 0px;
position: absolute;
left: -1px;
right: -1px;
top: -1px;
-moz-border-radius: 1px 1px 0 0;
border-radius: 1px 1px 0 0;
text-align: center;
display: none;
background: rgba(0, 0, 0, 0.5);
-moz-border-radius: 1px 1px 0 0;
border-radius: 1px 1px 0 0;
vertical-align: middle;
}
.griditem:hover > .titles {
display: block;
}
<a class="griditem" href="http://www.bbc.co.uk" style="background-image:url('http://news.bbcimg.co.uk/media/images/64623000/jpg/_64623471_clinton_pa.jpg'); background-size:100% 100%;\">
<div class="titles">
<h5>Title</h5><h6>Subtitle</h6>
</div></a>
Can anybody tell me where I'm going wrong?
Basically I want 'Title' & 'Subtitle' to be in the center of the '.griditem' box on rollover. I'm sure this is really simple, but I've been staring at this so long now I'm overlooking the obvious... Any help would be greatly appreciated!
Thanks!
you can center text horizontally with text-align:center; but to align it vertically you need to add the next 2 lines to the div
display:table-cell;
vertical-align:middle;
I am trying to make a parent div fit it's width to an image displayed. I am having a lot of trouble in doing so, it seems to auto adjust to very large.
Image: http://puu.sh/1vsqA
content is the body part
image is the white box the image is contained in
image img is the actual image inside the box itself.
CSS:
html, body
{
margin:0;
padding:0;
border:0;
height:100%;
width:100%;
}
body
{
background-image: url('./page_bg.gif');
background-repeat: repeat;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:12px;
}
#navlinks
{
width: 100%;
height: 28px;
line-height: 28px;
background-color: #000;
color: #FFF;
}
#links
{
list-style-type: none;
float: left;
padding-left: 5px;
margin: auto;
}
#links li
{
float: left;
padding-left: 5px;
padding-right: 5px;
}
#content
{
display: block;
padding: 40px 40px 40px 40px;
}
#image
{
display: inline-block;
border: 1px solid #CCC;
border-color: #CCC #AAA #AAA #CCC;
padding: 3px;
margin-left: auto;
margin-right: auto;
background: #fff;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
max-width: 1107px;
}
#image img
{
}
You could try setting #image to display: inline-block. I could be wrong but I 'think' that's what you're looking for.
Here is a link example: http://jsfiddle.net/RBWYL/
Please try to float:left your parent div