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
Related
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.
In Chrome, when I hover over a certain div, adjacent divs are moved to the left by 1px. When I click the div I was hovering over, the adjacent divs are moved back into their original position.
I'm wondering what's the best method of figuring out why this is happening? I've inspected the pertinent divs in inspector and can't see any reason why it's happening. Is there something inherent to Chrome that I'm missing?
Issue can be seen here by hovering over the "Filter" box in the Office column.
Fiddle that's throwing a few errors.
EDIT: Once I enable "Show paint rectangles" and hover over Filter, a div (shown in green) looks like it creates that little gap where the red arrow is:
This is your tag:
mytag {
text-decoration: none;
color: #5695F3;
}
Use display:inline-block on hover will make not move other divs on hovering you element.
mytag:hover {
color: #00287D;
text-decoration: underline;
display:inline-block;
text-indent:0px;
}
Hope this helps.
Found out that it was select2's CSS that causing the issue. One of the div's overflow:visible was pushing other divs outwards.
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 am using display: inline-block; to keep some div's next to each other. I do not know why but on hover the div will move up. I think the amount it moves up has to do with the padding of an element in its non hover form(The .title class element). This is very odd and I cannot figure out why this is happening because all values are reset in the hover form. JSFiddle Note I'm using Sass so the css might look a bit weird
.option {
vertical-align:bottom;
}
Because you declare the elements inline, they follow the same vertical alignment rules as all flowing content of a page - sort of centered. Force it to a fixed position of the entire line and it's solved.
Adding the above line to the element I wanted to hover helped me solve this problem:
.example {
border: 10px solid transparent;
}
.example :hover{
border: 10px solid;
}
I have a navbar with a navbar-wrapper class which makes it floating at the top center of the browser. I'd like to have a rectangle zone behind it filled with blue color. How should I do it?
Consider this page http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse
I'd like to add a blue filled area before body and behind the navbar.
UPDATE
I have managed to do something similar to what I wanted by adding an empty jumbotron at the beginning of the body and by setting
.jumbotron{
margin-top:-90px;
background-color:rgb(20,7,91);
}
The problem is that it has rounded corner and the two top corners leave an annoying white space as you can see http://lowcoupling.com/post/59130887987/defining-project-plans-and-gantt-charts-in-eclipse
Any idea on how to work around it?
UPDATE
It was easy
.jumbotron{
margin-top:-90px;
background-color:rgb(20,7,91);
border-radius:0px;
}
assuming your navbar-wrapper class is 'navbar-wrapper'
.navbar-wrapper {
background-color: blue;
}
or, if like the example you link to
.navbar {
background-color: blue;
}
The basic idea for this might be using z-index. You said, before the body and behind the navbar.
Try this:
body {
// write body font, font-size, color etc
}
Then you can use z-index to make the navbar float over it (But remember, each element always floats over the body, so you don't need this; but still if you want to use it)
.navbar {
z-index: 2; // 2 to make sure, that others stay under it always
background-color: #hexforblue;
padding: 5px 10px; // to make it a rect.
}
After using this, the navbar will have a rectangular div floating behind.
Note: This will be the background for whole of the div, not for just a small portion of it.