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.
Related
Just a small issue.
I have set the list-style-image to the url with the image I wish to use which is a 32*32px png.
Zoom in issue:
The list becomes compressed and moves into the adjacent div.
Zoom out issue:
The list become more spaced out and extends vertically downwards until the list ends.
I have tried to fix its size by setting its padding and margin to 0, as well as height and width to auto, and specific values, to no avail.
I can provide a code snippet if needed but I won't do so at the time of posting in the event that there's a simple fix.
Take a look at: https://jsfiddle.net/bernardbaker/pg3xu2ca/
I've used a HTML list element with a background (sprite sheet).
You could do the same with a single column sprite sheet.
li {
list-style: none;
position: relative;
padding-left: 20px;
height: 18px;
width: 12px;
background-image: url('https://scotthsmith.com/projects/social-icons/blue/IconGrid.svg');
background-size: 100px 100px;
background-position: 0px 0px;
}
It also solves the zoom in and zoom out issue.
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!
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;
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.
(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.
#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}
Thanks for your help.
Tara
If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.
As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:
ul#list-nav {
overflow: hidden;
}
ul#list-nav li {
width: 16.66%;
float: left;
display: block;
margin: 0;
padding: 0;
}
ul#list-nav li a{
display: block;
margin-left: 1px;text-decoration: none;
padding: 5px 0;
background: #754C78;
color: #EEE;
text-align: center;
}
That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px
what i currently see in IE8 is:
the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.
After my fix I see this:
To me it looks like theres nothing really wrong with the content.
In ie6-ie9 the menu seems to be failing in some way.
and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..
Note that the extra letter s seems to be somewhere between #menu and #content .containers.
Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.
The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )
add clear:both; on menu container.
note: is broken in Firefox to