Why is this the default padding for twitter bootstrap on the body?
body {
padding-top: 60px;
padding-left: 20px;
}
I was under the impression that "reset" css-ish files usually removed all padding/margins.
The padding on the body overrides the the .css files.
As odupont mentioned, "It's useful when you have a navbar navbar-fixed-top at the top of your page"
The padding will set a 20px vertical clearance between the top-fixed positioned nav bar and your document's body. As show in the above code, padding-top: 60px;
40px vertical padding, to clear out the height of the top-fixed nav-bar, that has a 40px height. And then, 20px vertical clearance between the nav-bar and body. So, 60px for the padding-top was declared.
That css thing was inserted in the body for specificity purpose, it overrides whatever padding styling you have in the .css file.
Try to comment the above code, and see the result.
It's useful when you have a navbar navbar-fixed-top at the top of your page, like the example on Bootstrap Doc.
If you have a div and wanted to have the background of the div stretch across the page, consider using negative margins equivalent to the padding on the body, and then adding the padding to the div:
margin-left: -20px;
padding-left: 20px;
margin-right: -20px;
padding-right: 20px;
Related
I have a website at http://www.vjpp.nl and want to remove the padding on both sides of the header, content and footer.
In the header I found this:
.fusion-header {
padding-left: 30px;
padding-right: 30px;
When I set both to 0px it doesn't change anything. Basically what I need is that the button and logo are aligned with the menu bar without any padding. Same goes for the content and footer (social media logos). I can't find a solution, does anyone know?
Also change
.fusion-header-wrapper .fusion-row {
padding-left: 0px;
padding-right: 0px;
/* max-width: 1000px; */
}
You have a max-width of the element .fusion-header-wrapper .fusion-row inside the header, which is centered and thus has a gap to the header. Remove this max-width and it will work.
I'm trying to create a horizontal nav menu using css, but I'm having problems getting the buttons the same size, since they all adjust to the text length. I've tried several tips: fixed width, padding, text-align, using em instead of px. Some of them seems to work if I use display:block for a vertical menu, but as soon as I change to display:inline it doesn't work anymore.
Here's my code for the navigation bar:
#navigation li {
display: inline;
padding: 20px;
text-decoration: none;
font-size: 2em;
background-image: url(../pics/skylt.png);
background-size: 175px 60px;
background-repeat: no-repeat;
background-position: 0px 10px;
}
inline elements adjust to the size of their contents.
You could try using inline-block combined with a width (ok) or min-width (better) to get them to the same size.
Or, if you want to go a slightly more complicated route, you could use display:table-cell with a few details to enforce that they're always equal sizes.
Id like to know why my inner wrap of the desktop css for this site is not working.
Basically if set innerwrap to margin:0 auto; and width: auto; there is no problem, but it's not centered on the footer or main div
When I have innerwrap as it's currently set margin:0 auto; and width:960px; you'll notice that the page presents a horizontal scroll bar after resizing the window a bit, and all the content is squished to the left with a white background starting to become visible.
Is there anyway to have it transition fluidly to the next tablet size layout without have a scroll bar appearing and content getting squished?
It shows Scrollbar because of the padding you apply in .innerwrap
Read this article about the Box Model
Use of padding on the sides of certain elements when applying 100% width to parent element its not recommendable because it adds width to the whole group, and since you,re using the browsers width it shows the scrollber to see the extra space you added.
My humble advice is that if you want a block element to appear centered apply an margin:auto style rule whenever is possible, the same also has to be displayed as a block element with no float.
Remove this:
.innerwrap {
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
width: 80%;
}
Keep This
.innerwrap {
margin: auto;
width: 960px;
}
Since you are applying fixed margins for you social icons they will show misplaced, so don't use fixed margins for centering them, use percentage width instead.
you may want use a common class for aligning them
.social {
background-position: center center;
background-repeat: no-repeat;
display: block !important;
float: none;
height: 150px;
margin: auto;
padding-top: 50px;
width: 30% !important;
}
For a.twittersocial and a.twittersocial:hover and the rest of the social links just keep the background properties.
Create a determined class if you need to apply common style rules to several elements (if there are many of them) and avoid usage of ID selectors whenever is possible, use classes instead (.daclass).
Use a web inspector like Firebug to track down styling errors.
Good luck Developer!
I have a div container (header)
div.header {
width: 1024px;
height: 115px;
background-color: black;
}
which contains a h1 named header_title with a text inside:
#header_title {
font: 80px 'Oxygen', sans-serif;
letter-spacing: -8px;
margin-left: 25px;
text-shadow: 500px 35px 18px white, 300px -50px 30px lightblue;
}
Exactly below header div i have my menu, like you see in my image.
If I set a text shadow that will go out the div, (the 4th letter, a 'g') ho can I make it displaying anyway and don't be cut off?
I tried overflow: visible, and z-index solution, but it doesn't work =(
Thanks.
Markup for header:
<div class=header>
<h1 id=header_title>Programmazione</h1>
</div> <!-- fine header -->
<div class=menu>
etc......
Try deleting the height property of the header and give it a padding-bottom of about say 15px for the shadow. That should do the trick.
I don't your HTML markup to test and be sure, but I believe that what is happening is that the the shadow is going outside the header div. I see no reason in the CSS you've provided that it wouldn't be.
What is happening is that the menu image that follows is blocking it. For most browsers, if you are positioning items by default (ie not absolutely, not relatively, not fixed) then, in situations where they overlap, the following neighbor is above. Also, if you are positioning elements this way, the z-index does not affect them. z-index only works on relative, absolute, and fixed elements.
One solution is to give both elements position:relative; and then the position your header div higher than the menu using z-index.
I need to create a dialog box using custom images created by a designer. For purposes of this discussion, this the correct answer for my application. The dialog box must be able to withstand changes in width and height. This is easy to do with a table, but I want to maintain a table-less design, so I figured that I could do this using 3 rows of DIV's. For example, float an image to the left, float an image to the right, and put a DIV in between then with the image set to the background so that text can be entered over it.
Here is demo of my failed attempt to do this: (just one row shown)
http://www.seaburydesign.com/rounded/demo.html
As you can see, this almost working. But the DIV in the middle is only the size of the content inside of it, even though I have set the height and width. I need to keep the width flexible.
Any ideas on how to fix this?
Remove the following line:
display:inline;
Besides being useless in this case (the inline behavior is already working because of the floats) "inline" property doesn't allow you to set the element's width or height. For a clearer understanding, read w3c's article.
If you make the rounded corners of your images white instead of transparent, you can apply the background-image to the header-tag instead of the middle div. This will create the impression that the middle div has the same height as both images.
Update
If possible (depending on what browsers you need to support), you could do rounded corners with CSS3's border-radius property, instead of using images. That would be something like:
header {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
You could also try this border-radius CSS-generator to find the properties that suit you best.
The css display: inline in your container div's voids any setting for width. Use display: block; float: left; margin: 0 XXpx; for your div (with XX being the width of the images on the sides).
Edit:
Concretely this would be:
div#yourdiv {
background-image: url("images/module_header_bg.jpg");
color: white;
display: block;
float: left;
font-weight: bold;
height: 42px;
width: auto;
}
and both img tags
img {
float: left;
}
This creates a dynamic sized box for your content, or you set width of the div to a specific value like width: 300px instead of width: auto.