On this site: https://new.fbhsfoundation.com/give-now/ I have figured out how to add a custom style for a single nav but I want to make the background surround the text (I.e. more padding left and right of the yellow color) but I can't figure it out.
This is the code I tried and then applied the custom CSS to the menu item but it only did the background color not the padding:
.yellow li.menu-item a { padding 5px; }
Find and remove the padding property for .menu li and add a padding style for the .yellow class.
.menu li{
min-width: 36px;
margin: 0 12px;
/*padding: 0*/
}
.yellow{
background-color: #ffe400;
padding: 0 20px;
}
or better still, use the id of the list element(li) to add the padding style.
li#menu-item-46{
padding: 0 10px;
}
Use 12 pixels of padding instead of the 12px margin.
.menu li {
min-width: 36px;
margin: 0px;
padding: 0px 12px;
}
Related
So I have a containing element whose width gets smaller as the screen get smaller #Aa, this element has a <nav> element that contains a <ul> element and some <li> elements as menu items.
When #Aa can no longer contain all the <li> elements the page layout is broken.
What I would like to happen is what is suppose to happen when
overflow:hidden is used. I applied this rule to #Aa.
I thought this was the purpose of overflow:hidden. I entered it manually through the web inspector.
Here is some of the relevant CSS
nav {
white-space: nowrap;
float: right;
}
nav ul li a {
display: inline-block;
padding: 0 20px;
line-height: 60px;
color: #2e2c60;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .1em;
}
nav ul li {
display: inline-block;
float: left;
border-left: 1px solid #ffffff;
position: relative;
list-style: none;
background: rgba(255, 255, 255, .25);
}
nav ul li:hover{
background: rgba(255, 255, 255, 0.5);
}
nav ul li:last-child{
border-right: 1px solid #ffffff;
}
Please try below code,
nav {
float: right;
width: 75%;
height: 60px;
overflow: hidden;
}
and add float:left to logo image
Well, you'll have to put codes for "nav" according to the resolution in your media queries.
In short:
You need to define the height, or max-height (more suitable for this example) in order for overflow to work, otherwise it would just expand, since is the expected behavior
element {
display: none;
}
Try removing this from the inline style of the #left-column element:
<section style="display:none;" id="left-column">
I have come across a slight problem, I set my nav bar to 100% width, and now i have a gap on the right hand side of my page and a horizontal scroll bar for the page, I do not know why it has done this. Please see code attached.
he code is:
nav {
width: 100%;
height: 35px;
text-align: center;
background-color: #42C2DA;
padding: 6px;
margin-bottom: 50px;
}
nav ul {
padding: 7px;
margin: 1px;
width: 100%;
}
nav li {
display: inline;
padding: 5px;
margin: 5px;
}
nav li a {
color: white;
text-decoration: none;
padding: 4px;
}
nav li a:link a:visited {
font-weight: bold;
}
Could someone explain where i am going wrong... or what is happening here.
I dont have 10 rep so cant post a pic.
Your nav bar has padding:6px; this adds 6px to all sides of the div, meaning the actual width of that element isn't 100%, but rather 100% + 12px.
To fix this, try using box-sizing: border-box, which makes it so that your padding is calculated into your specified 100% width.
Horizontal scroll bar is probably because You've set:
width: 100%
padding: 6px
And for that reason You will have total width: 100% of viewport + 12px
Set box-sizing: border-box and this fix Your problem - more info about box-sizing.
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 build a simple list and added to it css. Now the vertical menu works.. the problem is in the section of the css. The list items area is bigger than the links themselves. That means that if the user clicks on the area, nothing happens cause the links area doesnt cover all the lists items area.
#sidebar1 li {
list-style: none;
position: relative;
width: 120px;
height: 30px;
padding: 0 20px;
background-color: black;
line-height: 30px;
cursor: pointer;
}
#sidebar1 li a {
text-decoration: none;
color: white;
}
What I thought to do was to match the links padding or width to that of the lists width. So wherever the users clicks on the menu's item a link will be clicked. Thats problem is that i tried it and it didnt work
Move most of the styling to the A-tag and fix a few things:
#sidebar1 li{
list-style: none;
position: relative;
margin:0 <-- added
padding:0 <-- added.
}
#sidebar1 li a{
text-decoration:none;
color: white;
width:120px;
height: 30px;
padding:0 20px;
background-color: black;
line-height: 30px;
cursor:pointer;
display:block <-- this is important
}
Just use display: block to make the a element fill the available horizontal width of the parent element:
#sidebar1 li a{
text-decoration:none;
color: white;
display: block;
height: 100%;
}
The height: 100% forces the a to inherit the full height of the parent element. Remove padding from the parent li, otherwise you'll enforce a space between the edges of the a and the li.
Further, in your li I've not only removed the padding (which simply causes problems as noted above), but also the cursor: pointer, as if the user hovers over the link the cursor will change automatically, if they're not over the link then the cursor's type, that of pointer, is merely confusing when clicking produces no effect:
#sidebar1 li {
list-style: none;
position: relative;
width:120px;
height: 30px;
background-color: black;
line-height: 30px;
}
I have a horizontal menu. I want to have a border around the menu (not the entire-row, only the space menu is covering). When I put border on ul, it covers the entire row, when I put border on li, it has border between menu items as well.
<ul id="menu" style = "text-align:left;">
<li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...
</li><li>...anchor stuff...</li>
</ul>
Here is the CSS:
ul#menu
{
padding: 0 0 0px;
position: relative;
margin: 0 0 0;
text-align: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li a
{
padding: 0px 0px;
margin-right:20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
}
Kill display: inline on the list items and float them left instead. Float the container as well, which will ensure that it's only as wiide as its contents. Finally, set overflow: hidden on the ul.
Declare ul with display:inline-block. It'll cause ul to take only space necessary to display its contents, not 100% of it.
An example
Use display: inline-block on the ul and add the border to the ul.
If you need IE6 compatibility:
#menu li {
border-top: 1px solid #000;
border-bottom: 1px solid #00;
}
You might be able to use li:first-child (I can't remember, and don't have a copy of IE6 to test with) to apply:
#menu li:first-child {
border-left: 1px solid #000;
}
But you'll likely have to add either a class-name, or id, to the first and last li elements to give them the appropriate border-left and border-right.