My plain old CSS menus are appearing behind jQuery UI stuff like tabs! Even though the z-index of the containing divs are correct. Is there a way to resolve this?
/* dropdown menu container */
#navigation-1 li ul.navigation-2 {
margin:0;
padding: 5px;
display:none;
position:absolute;
top:71px;
left:-71px;
border-radius: 4px;
border: 3px solid #ea453c;
background:white;
width: 730px;
box-shadow: 0 1px 6px #999;
z-index: 999;
}
Yes. try to explore or experiments the position in the css like : relative, fixed, absolute etc.
Note: your not able to use z-index if your div/element doesnt have a position like relative, fixed, absolute etc. :D
I used Firebug to explore the CSS more carefully and found the the ui-menu class already has position set to absolute. I then added this rule:
.ui-menu{
z-index: 10;
}
You may have to experiment with the exact value depending on circumstances but that value brought my menu items safely above the tabs. You could add a more specific selector for the menu's parent container if you only want to apply this to a specific menu.
Related
I have made an element sticky but I don't arrive in defining the area in which the elements should stay sticky. The current area was not picked by me but was defined automatically when I applied the position:sticky. Obviously I want full control over the space my sticky elements uses as active area, and I want to pick precisely where the element must stop during the scrolling.
The element uses roughly 50% of it's space where it's supposed to stay sticky.
Here is the url in question: https://www.varamedia.be/website-laten-maken/restaurants/
I get my inspiration from the google marketing platform sales page. Here you see the same kind of behaviour I'm trying to replicate: https://marketingplatform.google.com/about/enterprise/
Probably I'm missing something here... Thanks a lot for any kind of help.
I read through SO but did not find a proper answer to this question, hence the new thread.
Here is the custom CSS I added in my WP child theme style.css file:
.stickyimage{
width:100%;
background:orangered;
height:0px;
font-size:24px;
color:#fff;
text-align:center;
line-height:60px;
/*following codes is for sticky */
position:sticky;
top:0; /* it's up to you */
}
body {
direction: ltr;
color: #a1a1a1;
background-color: #FFFFFF;
line-height: 24px;
background-repeat: repeat;
background-attachment: fixed;
overflow-x: visible;
overflow-y: visible;
background-position: 0 0;
letter-spacing: 0.01em;
word-spacing: 0.01em;
}
If you are still struggling with this, I inspected your web page and may have found the problem.
The problem lies in the parent container of #sidebar, its position: relative causes the unexpected behavior.
To fix this you can overwrite its CSS. To target the parent div of #sidebar you can simply do:
div > #sidebar {
position: static;
}
The code above targets div elements which have a #sidebar element as child. You can change its position to anything but absolute, relative, sticky or fixed. More information on CSS positioning here.
The key takeaway here is if you want to dynamically position an element, make sure its parent is statically positioned to avoid unexpected behavior.
I wrote in parenthesis and in all caps, the things I am confused about in my homework instructions.
This is my homework instructions:
On the first line of your "main.css" file create a comment that reads "general". Under that comment write the following
Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.
Add the css line from the templates page (on the course website) that groups some selectors and sets them all to "display block".
Skip one line and write a comment that reads "wrapper". Under that comment write a css id of "wrapper" and add the following properties.
Give it a width of 1024px
Give it a margin property with the values of 0 and auto (margin: 0 auto centers the page on the browser window. We have to have a width to allow it to show that it is centered.)
Skip one line and write a comment that reads "main".
Put a border of 1px solid #000 around the left, right bottom of the main element.
(NOT SURE IF I DID THIS PORTION CORRECTLY ^)
Add a padding of 10px to the main element. We add a padding so the content will not butt up against the edge of the main element
Using a contextual selector select all the images within the divisional element with the id of "images" and set each image height to 90px, width to 120px and a margin of 20px around the image. We are using CSS to resize our images.
(NOT SURE HOW TO WRITE A CONTEXTUAL SELECTOR TO SELECT ALL THE IMAGES WITH THE DIV ELEMENT WITH THE ID of "images")
This is what I have created but am not sure if it is correct:
/* general */
Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.
*{margin: 0; padding: 0;}
article, aside, figure, footer, header, main, menu, nav, section {display: block;}
<style>
/* wrapper */
#wrapper {width: 1024px; margin: 0 auto; }
/* main */
main{border-left: solid 1px #000; border-bottom: solid 1px #000; border-right: solid 1px #000; padding: 10px; }
div images, #images {height: 90px; width: 120px; margin: 20px; }
</style>
The wording in your homework is incredibly poor, but what I believe you're looking for is to target all elements with an ID of images contained within a DIV. This would be:
div #images {
height: 90px;
width: 120px;
margin: 20px;
}
This will target any element with the ID of images inside any DIV, even if there is an element in between them (such as <div><span><img id="images"></span></div>). Note that you can also target direct descendants with >. div > #images will target <div><img id="images"></div>, but not <div><span><img id="images"></span></div>.
Keep in mind that having multiple elements on the page with the same ID is invalid markup, and the page will fail to validate correctly. The only situation where this would be valid is if your teacher is meaning to have a single element called #images on multiple different pages. You should use classes for targeting multiple elements on the same page. It's possible your teacher meant for you to use a class, which would be div .images.
As for your border, you have done it correctly, though note that you can set all four borders at once with the shorthand border:
main {
border: solid 1px #000;
padding: 10px;
}
Also, keep in mind that your second line should also be in a comment, or else it will throw a syntax error:
/*Using the universal selector set the margin and padding to zero for all elements. We are doing this to eliminate all the default margin and padding that the browsers add.*/
Hope this helps! :)
Hi i will try to answer this the best that i can, i am only a programming student so this is my best shot :)
First of all, id's has to be unique you cant have two identical id's on the same page.
If you have etc
<div id="test"></div>
<div id="test"></div>
And you try to style it like #test{background-color: red} only the last div will actually have a red background.
But basically this is what he wants:
/*--GENERAL--*/
*{
margin:0;
padding: 0;
}
/*--WRAPPER--*/
#wrapper{
width: 1024px;
margin: 0 auto;
}
/*--MAIN--*/
main{
border-left: 1px solid #000;
padding: 10px;
}
div #images img{
height: 90px;
width: 120px;
margin: 20px;
}
Examples of contextual selector
I hope this will help you with your programming journey! :)
I'm currently working on a CSS Dropdown menu and I've run into the following issues:
Each successive sub menu overlaps its parent menu by an increasing amount.
Attempting to fix item 1 by setting the left attribute (each submenu already has position:absolute) does not work and throws off the position of the menu wildly.
Whenever a submenu is shown, the right padding is automatically increased causing a gap between the menu and the bottom border of the menu items.
In the CSS I use display: table-* (the star being any of the table-related display values) in order to make vertical centering of text easier and to more easily keep the selected menu item at the top of the list (see display: table-header).
I would really like to know both solutions and causes for the above issues.
For reference, I've created a fully functional JsFiddle.
I made a fiddle here http://jsfiddle.net/xUWdj/
Changes made:
Got rid of all the table displays, the only reason you were using it was for vertical alignment, you can utilize line-height on the <a>'s instead.
All submenu <ul>'s now are positioned based off it's parent by left: 100%; & top: 0;
You should now be able to style/position the rest of the menu to how you want it.
Edit:
Here's a version that allows you to continue using the table-group-header http://jsfiddle.net/HSh5n/2/
Changed li a { display: block; line-height: 30px; }
Added margins to move the ul's to -42px 0 0 130px
I guess the biggest thing with tables is that since they're inline elements, you can't assign position: relative to table-cells, so that's why you couldn't use the left or top properties. I haven't browser tested this, but I'd always double check if you go this route.
If you add right border to your li a{...} you can get an idea about what's causing the overlaps.
li a {
display: table-cell;
border-bottom: solid 1px #cccccc;
border-right: solid 1px #cccccc;
text-decoration: none;
color: rgba(89,87,87,0.9);
height: 30px;
padding: 5px;
vertical-align: middle;
cursor: pointer;
}
http://show.bbflame.ru/border/
How to make parent(#div1) hide child's corners
Child dont overflow parents
It's currently not possible to overflow the borders. The closest you can get is adding a border-radius to the second element, which is just enough to not exceed the border.
#div1{
-webkit-border-radius: 50px;
border-radius: 50px;
}
#div2 {
-webkit-border-radius: 14px;
border-radius: 14px;
}
Fiddle: http://jsfiddle.net/jK7TP/
#div1 {
overflow: hidden !important; /*to make sure it will work always*/
}
should hide any overflowing object inside #div1 if javascript moves the child inside #div1 you have a chance it won't work as it should, try using a mask or give the css properties by javascript so the properties are assigned at the same time.
I have a site that I've inherited, and am going a bit insane with the CSS. There's a div that has a height of 185px - it shows in Computed Styles, and it's very obviously being applied to the divs with the same class. However, the height doesn't show up anywhere in the stylesheet, and it doesn't show up under Applied Styles or Inherited From in the element inspector. (See screenshot.) I need to get rid of the height, as it's causing some issues with truncating content (we don't want to use overflow:scroll because there are many of these divs on the page - one per database record - and that's an awful lot of scrollbars.)
The div class is search-result, and you can see in the right pane the height:185px attribute. Here's the code we actually have in our stylesheet for that class plus sub-elements:
#content .search-result {
margin-bottom: 1em;
border-bottom: 1px solid #ccc;
padding: 1em 0;
}
#content .search-result .image-box {
float: right;
margin: 0 0 1.5em 30px;
font-size: .75em;
text-align: center;
}
#content .search-result .image-box img {
border: 1px solid #eee;
margin-bottom: .5em;
}
#content .search-result ul {
list-style: none;
margin: 0 0 1em;
}
I've also run grep on the entire site install, and the text "185px" doesn't exist anywhere on the server that I can find. Where else could this "ghost" style be getting set?
Looking at your CSS, it looks like 'em' units are being utilized, which looking at chrome's element inspector, it shows the unit as 'px', even when I explicitly list it as 'em'. Check around for height values declared in 'em' as well. Also I recommend using the "Styles" dropdown below computed styles to figure out which specific rules could be setting the height.
Off the top of my head, I'd say that, because "div.search-result" has no declared height, it's expanding to the height (plus any padding, margins, borders, etc.) of the "div.image-box" and anything else that is a descendent of "div.search-result".
Possible reasons:
Height could have been set to the child elements. Check for them.
Check if any other unit of measurement, like %, em have been used.
Checking the css values in computed styles won't help you. Check in the CSS tab