I'm trying to make a copy of a website as my first CSS/HTML exercise.
I can't figure out how to make the menu list so it has its background filling the box (extending until the right border).
Picture of what I have now (right side of the picture, red lines show where the background should go) and what I want to get (left side).
My code.
I've tried so far to achieve it e.g. with 'width' and 'display' parameters, but e.g. display: block; remove the lines between text. I'm out of ideas.
display: block;
width: 100%;
margin-bottom: 2px;
to the #menu
spans are inline elements so they cannot have width or height. You should put a background-color to your li elements instead of your spans.
.menu{
background-color: grey; //Change it to your custom colour.
}
Also, you cannot have more than one element with the same ID. You have to put them as a class.
Updated JSFiddle.
Related
I have a series of 50% width elements that are next to each other, and I want to give each of them a 20px white border to separate them, the reason for this is that I have a responsive layout and I always want there to be 40px white space in between the elements.
I have a hover effect over them too, but when you use border on the main element, when you hover over the border or outline, you trigger the hover effect, which I don't want.
http://jsfiddle.net/keleturner/6PqJt/
Try hovering on the red border and outline (outline you need to hover in between the two blocks to trigger hover).
The only solution I found was to add a new element to wrap everything inside the .main and give it a border there, but that is very non-semantic and having to extra markup for something like this doesn't seem right.
the line
.main:hover .inside { background: blue; }
is wrong, it should be
.main .inside:hover { background: blue; }
http://jsfiddle.net/6PqJt/5/ EDIT - updated fiddle to fix bottom .main - also added some css to fix the hover of the second one
I have an issue with inline list elements.
The issue is that when I limit the width of my menu, which contains inline list elements, to put it onto multiple lines (for mobile devices) the right-side of elements is being cut off.
Here's a JSFiddle showing this: http://jsfiddle.net/vk2bK/7/
The menu in the orange with:
width: 210px;
background-color: #ffc20e;
In this JSFiddle the right-side of the 2nd list element is cut off. There's lots of space beside it in the div with the class 'menu', so it's not because of that. I assume it's because of some inline list property I'm unaware of.
How do I prevent the right-sides of inline list elements being cut off when the list expands onto a second line?
Simple CSS fix should do it.
You need to modify the li elements so they are inline block with a defined width:
.menu li {
display: inline-block;
width: 90px;
}
See it here: http://jsfiddle.net/vk2bK/21/
EDIT
I played around with it, see if this is what you want: http://jsfiddle.net/vk2bK/22/
ok i found a solution : JsFiddle
.menu a {
display: inline-block;
}
.menu a {
width:80px;
background-color: #7dc242;
line-height: 30px;
margin: 3px;
}
i removed the lists and made all elements inline-block u can edit their width and height if u need to.
I am designing a website where its whole background color is light green (#F5FFF6 to be exact), and now I need to create a fieldset who's background color is white (#FFFFFFF). My CSS markup is below:
#page_content {
width: 100%;
height: auto;
min-height: 100%;
position: relative;
background-color: #F5FFF6;
}
#fieldset {
background-color: #FFFFFF;
}
It kinda worked on the "light-green page background color" and my fieldset's color is white which what I wanted too. But I noticed that the area where my fieldset is positioned, the background color of the page was white too instead of that light-green. The rest were all light-green except to that area. So I tried creating another fieldset and boom! The same thing happened to the first fieldset - the area behind my fieldset was white again.
I do not understand the exact problem. If you don`t want the whole width of the page to be white just give the fieldset a width and so the background color of the page will remain green.
#fieldset {
background-color: #FFFFFF;
width: 100px;
height: 150px;
}
i made an example:
http://jsfiddle.net/aKGmc/2/
if this does not help you please upload a jsfiddle with it so i can take a look at the problem
Ids (selectors prefixed with a #) should be unique to one single element.
If you want to target more than one element of a category, use a class and the appropriate selector (<div class="something"> and .something {}) or a generic selector (div {}).
That behavior is normal.
You chose to apply the white background to an element (Fieldset) and you got the white background relative to that area. So if that is not ok, you probably want to achieve something else.
I'm using an <ol> to show a code snippet with line numbers. Since I'm showing program code, I disable wrapping (and enable indentation) by setting white-space: pre on li, which means an li's content can extend past the right margin and cause the page to have a horizontal scroll bar. So far so good.
The problem comes when I want to set background colors on some of the lis to call out particular lines of code. I can set background-color on the li, but the color only extends to the right margin of the page; in fact, the last 10 pixels or so of text (an amount equal to the body's right margin) has no background color. And if I scroll horizontally, it's even worse: the background color scrolls left off the page. The background-color is only one browser-width wide (minus the page margins).
Here's a fiddle illustrating the problem. If you scroll right, I want the background to be blue for as far as there's text.
How can I get the background-color to fill the full width of the content, even if the page scrolls horizontally?
You can "shrink-wrap" each li's content with a combination of float and clear, as in this answer.
li {
white-space: pre;
background: blue;
float:left;
clear:left;
min-width:100%;
}
The last line is from koala_dev's answer. It forces shorter-content elements to have full-width background.
Fiddle
You can use display: inline-block to make each list item fit its content. Combine this with min-width:100%; to make shorter-content lis stretch to full container's width.
li {
white-space: pre;
background: blue;
display: inline-block;
min-width:100%;
}
Demo fiddle
This is not possible with using directly a li item.
But a simple span inside the li fixes this.
Here is the relevant code:
span {
white-space: pre;
}
.highlight {
background: blue;
}
Your markup would be along the lines of:
<ol>
<li><span> Code Here... </span></li>
<li><span class="highlight"> Code Here... </span></li>
</ol>
The reason for this is. If you change the li's display to anything else than list-item it will lose it's numbering. (In Chrome at least.) So this way you get both with just a bit more overhead.
A jsfiddle showcasing it: http://jsfiddle.net/tp6Um/4/
I found a way to kind of fix your problem
li
{
white-space:pre;
display:block;
width:150%;
}
set the percentage accordingly
I have used two div tags in my blog to wrap programming codes. The first one is used to set outline box with fixed width with the following CSS class:
.outlinebox {
width: 435px;
border-width: 1px; /* sets border width on all sides */
border-style: solid;
border-color: #666666;
padding: 5px
}
The second div is used as inner box to set nowrap for codes with the class:
.nowrappercodesinner {
width: auto;
padding: 5px;
overflow: auto;
white-space:nowrap;
}
I use those div tags for my codes in my blog. They work fine until I tried to add third div as inner area with a specific background colour. For example:
<div class="outlinebox">
<div class="nowrappercodesinner">
<div class style=""background-color:#cccccc;">
...
</div>
</div>
The problem is that the background colour does not extend to the right when I move the horizontal scroll bar to the right. I am not sure if there is any way that the inner background colour will fill no matter where the scroll bar is moved.
Here I have one example in my recent blog: Zip Files with PowerShell Script. You can see the problem in the third code block.
overflow: auto;
in the innermost div might help. At least it had the desired effect when I added the property in Firebug. I find it strange, still, because I thought auto is supposed to be the default setting.
EDIT: Default value for overflow seems to be visible.
Perhaps I'm missing something, but why do you need the third div? Couldn't you just put the background color on the second div? I tried this on your blog in webkit's inspector and it displayed just fine.
<div class="outlinebox">
<div class="nowrappercodesinner" style="background-color:#cccccc;"></div>
</div>