I'm trying to get buttons that are all the same size, however I'm new and therefore stuck, here's my CSS code :
.bannerArea nav ul li{
list-style:none;
display:inline;
padding: 10px 30px;
background-color:#0C0C0C;
opacity:0.7;
text-align:center;
text-shadow:none;
}
http://www.webpagetemplates.org/web-page-templates/download/preview/wpt0054/
Notice the buttons ? They are all the same size, like I want. And also, how do I center the actual buttons and not just the text?
Top tip: putting a test case into a JSFiddle will give people a clearer idea of your problem, and thus provide you with an answer.
Having said that, you want to use display: block instead of inline and then set a width:
.bannerArea nav ul li{
list-style:none;
display:block;
width: 25%; /* Adjust this accodringly */
padding: 10px 30px;
background-color:#0C0C0C;
opacity:0.7;
text-align:center;
text-shadow:none;
}
Related
There is a gap between #Content-header and #sub-header which i want to fix. Here is the Css code. I want to remove the vertical margin between the two divs. The html code can be checked out at JSfiddle link provided.
CSS:
#content{
float: right;
width: 799px;
overflow: auto;
font-size: 14px;font-size: 1.4rem;
font-weight: bold;
}
#content-header{
background-image: url("../images/content-header.png");
background-repeat: repeat-x;
}
#content-header ul{
padding: 10px 0 15px 30px;
}
#content-header ul li{
background-image: url("../images/filter-back.png");
background-repeat: repeat-x;
border: 1px solid #BBB;
list-style: none;
display: inline-block;
padding: 5px;
}
#sub-header ul{ padding-left: 0;}
#sub-header ul li{
/*background-image: url("../images/sub-header.png");
background-repeat: repeat-x;*/
list-style-type: none;
display: inline;
}
JSFIDDLE
CSSDeck
If you want to reduce margin in any area use margin property and !important
#content-header{
margin: 0 !important;
}
If you create a JsFiddle example, we can make a better assessment of the issue, but if you try and give both the #content-header and the #sub-header a margin:0; then you can reset the default margin values from the user agent.
#content-header,
#sub-header {
margin:0;
padding:0;
}
It is good practice to begin your HTML/CSS pages with a css reset file, which takes all of the main html elements and resets their margin and padding to 0 (along with other attributes). That way you won't have unexpected margins and padding that show up and you can have ultimate control across browsers of your styles.
A good set css resets that I like to use is from: http://www.cssreset.com/
You might need to clear the two containers, as you are using floats.
Try adding clear: both; overflow: hidden; to #content-header element.
Also, you should wrap <span class="switch"...</span> with <li></li> tags.
I am trying to make a list of links, 6 links in a row.
The problem is I do not know how many links there will be. It could be only 2 or 25.
Please take a look at this fiddle.
I must be doing something wrong with the css because:
If for example there are just 3 links, the border of the .toplist div is not covering the whole length of the wrap div.
Also, I can't get more then two divs aligning before a new row appears.
This is not that important, but In IE6, even if I use overlow:auto I don't see a background for my ul (if I set one), and also, if I set margin-bottom for the ul I don't see it.
Any ideas on whats wrong with the css?
Ty
I made a few changes to your original fiddle to my fiddle. Check this out:
.wrap {
width:960px;
margin:0 auto;
border:1px solid #000
}
.toplist {
border:1px solid #0f6;
padding:0 0 0.5em 1em
}
.toplist ul {
list-style:none;
overflow:hidden;
margin:0;
padding:0;
}
.toplist ul li {
float:left;
width:15%;
margin-right:1em;
line-height:1.4em;
border-bottom:solid 1px #222;
}
.toplist ul li a, .toplist ul li .cat {
display:block;
font-size:0.7em;
}
.content{
background-color:#FF2E2E;
color:#FFF;
margin-top:100px;
heyight:40px
}
Hope this works. :) It works in IE 6 too! :)
I have gone from this:
www.gofar.org
To this:
www.gofar.org/homepagetest.html
I have tried to remove the one block seperator on the far right end of the nav bar. I am lost.
I tried putting it in a div but what I really need to do is make the background image (green) go from the left side of the header to the edge of the right side.
Just do not know how.
here is the css
ul#saturday{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:normal;
background:transparent url("bgOFF.gif") repeat-x top left;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
border-bottom:4px solid #336666;
overflow: hidden;
color: #003;
text-align: center;
z-index: auto;
}
I even tried putting it in a table but it never fits across the entire header.
This may help.
/* Remove left padding from header */
.twoColFixLtHdr #header {
padding: 0 10px 0 0px;
/* padding: 0 10px 0 20px; OLD - Delete this line*/
}
/* Add left padding to ul */
ul#saturday {
padding-left: 10px;
}
/* Remove border bg from last anchor */
ul#saturday li:last a {
background-image: none;
}
Also, Read/watch these on chrome inspector tools,
you can edit the CSS live in the browser which
makes things easier for beginners and experts alike.
https://developers.google.com/chrome-developer-tools/docs/videos
you can try instead of using width:100%, change it to the width of the white container. That way it would go all the way across. Width:100% only sets it to as large as the content.
I am having trouble with aligning jQuery tags, I've used a bit of a code and changed it and styled it myself, however the align seems to be leaving a space on the left, which I don't want, and I'm not sure how to get rid of it. Here's what I mean...
http://postimage.org/image/8k5rcz941/
This is the CSS code:
.usual {
color:#111;
padding:15px 20px;
margin:8px auto;
}
.usual li { list-style:none; float:left; }
.usual ul a {
display:block;
padding:6px 10px;
text-decoration:none!important;
margin:1px;
margin-left:0;
font:10pt Verdana;
color:#FFF;
background:#444;
}
.usual ul a:hover {
color:#FFF;
background:#111;
}
.usual ul a.selected {
margin-bottom:0;
color:#fff;
background:#003663;
border-bottom:1px solid snow;
cursor:default;
}
.usual div {
padding:10px 10px 8px 10px;
*padding-top:3px;
*margin-top:-15px;
clear:left;
background:snow;
font:8pt Verdana;
border: 1px solid #d0d0d0;
}
.usual div a { color:#000; font-weight:bold; }
Hope you can help me shift this to the left, I've been trying to figure out what it is, and just can't :(
Thanks and regards.
I'm guessing that the ul has a margin or padding applied. Remove it:
.usual > ul {
margin: 0;
padding: 0;
}
.usual has a left padding of 20px. Is that what you're trying to get rid of?
Inspect your elements in either Google Chrome or using the Web Developer add-on for FireFox. Find the element and check all it's inherited styles; chances are likely, like icktoofay says, you probably have inheritance somewhere. If doing like he said, adding margin & padding = 0 for the UL, you can try the hack !important
.usual ul {
margin: 0 !important;
padding: 0 !important;
}
But note that if you have any other margin/padding that is used on the UL element, you will lose those, either using !important or not because margin: 0 sets all 4 sides. To target just the left side:
.usual ul {
margin-left: 0 !important;
padding-left: 0 !important;
}
Sometimes the hack won't work, that's why it's important to check your inheritance by inspecting the elements in the browser first.
I'm having an odd top padding/margin in Firefox.
Given this HTML:
<ul>
<li><textarea>item 1</textarea></li>
<li><textarea>item 2</textarea></li>
<li><textarea>item 3</textarea></li>
<li><textarea>item 4</textarea></li>
</ul>
And this CSS:
ul
{
margin:0;
padding:0;
list-style:none;
border:1px solid black;
width:300px;
}
ul li
{
margin:0;
padding:0;
height:17px;
}
ul li textarea
{
margin:0;
padding:0;
border:1px solid black;
font-size:11px;
height:15px;
}
When the list renders, the first element is displayed with a small extra top-margin causing the textareas inside to overflow the list as seen here:
http://jsfiddle.net/asgerhallas/2fwJZ/
I do not have this issue in Chrome. Does anyone has an explanation and a way to get rid of it?
Add display: block to ul li textarea:
http://jsfiddle.net/2fwJZ/1/
Or, add vertical-align: top:
http://jsfiddle.net/2fwJZ/2/
The problem in this case is that Firefox defaults to vertical-align: text-bottom for textarea elements, whereas Chrome defaults to vertical-align: baseline.
you can all so add line-height:1; if you gust want a different
approach