I have a div and I want to indent my text, say 40px from the left. For that, I write
#rightheader{
float: right;
width: 70%;
height: 120px;
background-color: #336699;
padding-top: 20px;
}
Now, the confusion is that whenever I add padding-left: 40px; into the above, the total width of the div also incresases. Isn't padding euivalent to internal indentation.
By the way, how can indent my text without the need to modify my div width ??
You want to have a look at box-sizing: border-box.
It would make the padding: be calculated inside of the box's width.
Also read about the CSS Box Model.
#rightheader{
float: right;
width: 70%;
height: 120px;
background-color: #336699;
padding-top: 20px;
text-indent: 40px;
}
Related
I'm using Wordpress theme Canvas by Woothemes. I'm trying to center the site description text underneath the logo. Here is the site: http://barkhascustomsourcing.com
Here is the current CSS I am using. It's not responsive, I know, but I need to re-write so it is.
#logo .site-description {
display: inline-block !important;
line-height: 25px;
margin-left: -330px;
padding-bottom: 20px;
padding-top: 20px;
text-align: center;
width: 1000px;
}
Any suggestions?
To make this properly responsive you will have to do a lot more than only adjust this class. Heres how you can implement it for your header section:
#logo { width: 100%; }
#logo > a {
width: 100%;
max-width: 350px;
margin: 0px auto;
display: block;
}
#logo > span.site-description {
width: 100%;
max-width: 1000px;
margin: 0px auto;
display: block !important;
}
By making the outer and inner box following the full width but constraining them with max-width will make them responsive.
Now, this is only a small part of your site. I'm not doing the entire thing for you here, but you get the general gist. It also requires you to look at almost any elements, as resizing will require you to make elements that take up a natural; height and expand as their width decreases. So actually, you cannot use any pixel based widths or heights anywhere, only max-widths and max-heights.
PS: Next time you ask a question, please include what you have tried yourself. Show us that you are not outsourcing your work to us :)
Following things you need to update.
#logo {
margin: 0px auto;
width: 100%;
text-align: center;
}
#logo .site-description {
line-height: 25px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
width: 100%;
display: block !important;
}
This is very odd to me, and although I've searched, everyone seems to have the opposite problem to me (a floated div shrinking)!
I have this page: http://www.tameside.gov.uk/test/news, which uses PHP to generate the divs at the top for various news stories, and it works fine. However the items (which are floated divs) are in a div which is floated left, which for some reason isn't shrinking to those items (which are it's only contents).
As far as I was aware, a floated div always shrunk to it's contents, but this particular one is expanding to 100% of the page it seems. I've coloured the background of the containing div in grey to show you what I mean.
I want it to shrink to the contents so that I could use a centering trick, and it would then center the div no matter how many divs are in the top news items. But because it's not shrinking, the trick obviously isn't working.
The CSS for each of the news item divs is below:
.news-top-item {
border-radius: 10px;
border-color: #3f7dae;
border-style: solid;
border-width: 2px;
float: left;
width: 19%;
text-align: center;
margin-right: 0.5%;
height: 13em;
padding-top: 0.5em;
cursor: pointer;
position: relative;
}
They've also got a span inside that has a little CSS attached to it to make the whole thing a link:
.news-top-item span {
display: inline;
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 2;
background-image: url('/tmbc_images/include/1pixel.gif');
cursor: pointer;
}
I doubt that's interfering, but have put it in just in case.
The outer div has only 'float: left' and the background colour applied to it.
Any help would be much appreciated.
Thanks,
James
You shall remove float:left and use display:inline-block instead
.news-top-item {
border-radius: 10px;
border-color: #3f7dae;
border-style: solid;
border-width: 2px;
display:inline-block;
width: 19%;
text-align: center;
margin-right: 0.5%;
height: 13em;
padding-top: 0.5em;
cursor: pointer;
position: relative;
}
And add text-align:center in your containing div
width:100%;
height:100%;
is 100% of windows size ...
Try
width:auto;
height:auto;
use absolute units instead of percentages to define measurements for the inner elements:
.news-top-item {
border-radius: 10px;
border-color: #3f7dae;
border-style: solid;
border-width: 2px;
float: left;
width: 200px; /* <--- */
text-align: center;
margin-right: 2px; /* <--- */
height: 13em;
padding-top: 0.5em;
cursor: pointer;
position: relative;
}
On my webpage over at http://www.replyonline.co.uk/avaya/16312_UC_ms/costs/index.html you will see a twitter div named #twitter.
As you can see, it looks out of position and needs to be after the 4 #about divs to the left of it, but also needs to line up with the others. It looks pushed down currently.
I've fiddled with the CSS but haven't had any luck.
Here's the CSS for the about boxes and the twitter box:
#about{
width: 260px;
min-height: 140px;
float: left;
margin: 0 35px 10px 0;
background: url(../images/about_grad.jpg) bottom right;
display: block;
}
#twitter{
float: right;
width: 260px;
margin-bottom: 20px;
height: 290px;
overflow: auto;
font-size: 11px;
background: #ececec;
}
Thanks
I added a wrapper div (no styling) around the a linked items and removed the float:right attribute of the twitter box - that seemed to work.
Just remove float: right from #twitter.
I am trying to vertically center one div (containing a search bar) inside another (a top banner). I was under the impression that to do so you did the following:
#banner {
height: 35px;
width: 100%;
}
#searchbar {
height: 15px;
position: relative;
top: 50%;
margin-top: -7.5px; /* half of the height */
}
This works fine until you add the margin-top at which point it is applied to the #banner as well.
Is there an alternative way to do this, or am I just doing it wrong?
Here's a jsFiddle of my actual code.
I use line-height with the value being the same as height of parent div.
As seen here: http://jsfiddle.net/vkJ78/24/
CSS:
#banner {
background-color: #770E17;
height: 35px;
width: 100%;
border-bottom: 1px solid #333;
}
#src {
width: 300px;
height: 15px;
border: 1px solid #333;
padding: 3px;
}
#srcdiv {
width: 308px;
margin: 0px auto;
position: relative;
line-height: 35px;
}
EDIT: Per recommendation from NGLN, this will also fix horizontal centering, #srcdiv and #src having equal widths.
You have to add overflow: hidden to #banner. To clear the float, I guess.
Then, modify the negative margin to margin-top: -11px in #srcdiv (you have to sum the div height, the border, and the padding for the total height)
http://jsfiddle.net/vkJ78/1/
Give margin:0px and padding:0px and remove margin-top
body {
margin:0px;
padding:0px;
}
I have a similar problem to this question Why does my floated left div go to the next line in IE6 using the 960.gs?
In my design, the subcategories should be 4 per row. They look fine in FF,Safari,Chrome, but in ie6 they only show 3 per row. I tried creating a different css for ie6, but it didnt work, also i tried reducing the width and padding of each row, but still i have 3 subcategories per row.
I asked again because i bet the solution can be very specific to the css you have.
try setting width of each .subcategory at 24% or max 237px
.subcategory
{
width:24%;
}
updated
in category.css change in this way:
.subcategory {
FLOAT: left; MARGIN-BOTTOM: 15px; WIDTH: 24%; HEIGHT: 230px; TEXT-ALIGN: center
}
.category-item-image {
DISPLAY: block; BACKGROUND: #fff; MARGIN: 5px 30px; WIDTH: 170px; PADDING-TOP: 5px; HEIGHT: 170px; oveflow: hidden
}
.subcategory-image {
DISPLAY: block; BACKGROUND: #fff; MARGIN: 5px 30px; WIDTH: 170px; PADDING-TOP: 5px; HEIGHT: 170px; oveflow: hidden
}
Problems are
MARGIN: 5px 34px;
and
WIDTH: 25%;
I've tried to set them at 30px and 24% and in IE6 it works!