I am a newbie to web developing, lately I have been practising some basic HTML, CSS, and Javascript(jQuery), I'm reverse engineering some websites in order to practice skills. However, I came across a question that is troubling me already for hours. Here is the question:
I want to make a navbar that looks like the first picture, when you hover over the "Sports" icon, the drop-down list shows. As you can see in the second picture, it is a "div-in-li" HTML (so it is the drop-div that shows), I tried to make the same thing, however, the div always stays the same length as its parent element--li, does anybody know any way to keep the "li" stay its length and make the "div" inside of it expand beyond the limit of the "li" element????
Any solutions are good, doesn't matter it's CSS or Javascript...
The drop-down "div" that contains a "ul" and 3 pictures
The "div"-in-"li" element
You can position the li element as absolute or float it. Right now, li is positioned as block level and will envelop the div.
Related
My button is described like this
Link 1
Now I have another 4 similar buttons to place beside in a horizontal row besides.
Link 2
Link 3
Link 4
Link 5
I want position: fixed;, as I need those buttons to be on the navigation bar and always present relative to the browser window.
Because of the fixed attribute I can not have display:inline-block or display:inline;.
I did not want to copy the the button 5 times and each time just change the property of position. I thought I could have a general class which would specify what would be the height from the top of the page for the buttons, and then write in the horizontal shift using
<div style="right:10px;">
Link 2
</div>
This is does not work, any containers or attributes added to div can not affect the button position even though in it the right distance is not stated.
I know I can do it it by having multiple distinct classes in my CSS for buttons, but they would be exactly the same except for horizontal alignment and this seems like a wasteful way to go about doing so.
fix the navbar as a whole (and not the single nav items). In that fixed nav container you can use inline-blocks
It's the second time I have to use <ul> to create navigation menu with image and text in each anchor. The first time I managed to do this without fully separating the logic but now it seems a little bit more complicated so I want to solve my current problem and also, to know if there's a general approach to this task since I think it's very common but I'm not able to find clear implementation.
First is the example - JSFiddle as you can see, I have problem with styling/positioning the text in a nice, proper way. What I want is the image(bullet) to stay at the top-left corner as it is right now and I want all text to go right from the image. As you can seen in the first <li> when I get certain height the text i going under the image.
For some time now I was thinking about what is the way to make customizeable anchors with image and text. I've had this idea of using two spans so I can have more freedom on styling but as you can see in the example, it's either - me not knowing how ti use <span> properly or it's not best suitable for this case. If the text content is too big the text goes under, also the fact that with the margin only the first row is affected.. It seems to me that this is not the right way, so how can I style my anchor list (in this certain example) and is there a more generic way which will allow me to change some things related only to the text or to the image without having to remake the whole structure?
Images that are UI elements should be CSS backgrounds, not inline images. Positioning CSS backgrounds is easy because it doesn't interfere with the contents within the element. It's also better to put all the stylnig on the A-tag (other than positioning), not on the LI.
<li>Link<br />12.12.12</li>
CSS:
a.bullet {
background-image:url(...your image path...);
background-repeat:no-repeat;
display:block;
min-width:175px;
width: 100%;
min-height:60px;
padding: (what you want);
margin: (what you want)
}
I'm working on a website where I want to display a giant image slideshow in the background along with a quote and a link, which for technical purposes (EDIT: described in comment below) must reside in the same parent element. On top of all that I'm displaying my content, and at one point I want the background image to display through the content, which I have accomplished by setting a margin between two of my content elements (#header and #main). It's a little hard the describe, but I hope this jsfiddle gives an idea of what I'm doing.
The problem is that link and quote displayed in the background is not clickable, since the click is instead directed at the element above displayed (#header). I know about pointer-events: none; but that's no good since I need IE support and being able to interpret clicks in the #header element.
I guess this is in some way attributable to stacking context mentioned in this answer, but I just can't get it right. I'm unable to get the desired layout without using a negative z-index on #background, while the links inside #background would probably need to be put in a parent of higher z-index. The reasonable thing would probably be to put it somewhere else in the markup, but as stated above the link is related to the rest of the content inside #background. Is it possible to make the links stacking context render "above" the stacking context of its parent element?
The code is a bit too long to do any good here, and not really that complex, so please refer to aforementioned jsfiddle.
Make the giant image a background of the <body> and don't create an element with a negative z-index for it. Then your link will be clickable - DEMO
Please see link below:
http://cssmenumaker.com/builder/111528
I am trying to figure it out. What I don't understand is how it works - I cannot fathom how the sub-menus remain hidden and don't interfere with the rest of the page.
Allow me to explain further - when I tried to make my own I had it in my mind that I would have to hide and show the submenus (I was using DIV tags thinking I was clever) but that when made visible they would then take their place in the DOM and move everything else out of the way (something I obviously wanted to avoid but don't understand entirely how to accomplish). When I tried to make mine using JS it didn't work as I wanted. I changed the 'display' and 'visibility' properties of the nested DIV tags (sub-menus) to 'none' and 'hidden' respectively until an onmouseover event and it just doesn't work correctly and I have no idea how to make something work like the example.
I am looking at the hover commands and cannot see how this makes the sub-menus invisible until hovered over. I can also only see the display:block command as the only reference to how they are displayed but do not understand how they don't move everything else out of the way when displayed.
Does this make any sense? Can anyone explain how the example works, what the DOM model looks like and how all the parts of the DOM are interacting with each other? W3C is not much help here.
My impression was that the DOM model is static and will display things in box fashion unless you add some complex z-index or some other method so what am I missing here? I would also prefer a pure CSS solution which is why I posted the example above, I want to understand all this much more than I currently do.
Much obliged to any help!
The answer is: position absolute.
Position absolute removes the elements from the static flow, thus not pushing away the other elements. To control the absolutely positioned elements, you can wrap them in a relative positioned element: the offset parent. This way, you can create blocks/menus/etc. with absolutely positioned elements within, in a normal flow.
For a brief explanation: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
The display none/block part is just hiding/showing the submenu's. If a parent got :hover, you can show the submenu with display: block.
I am doing a popup on a clients site for their new restaurant location. The base site is kind of a cookie cutter type site, and very messy (I'm not sure if I should attribute this to the problem). Everything was going fine until I added some divs that were positioned relatively and had width and height to the absolute div "pop-up". Now, the popup pushes the base site down, and the popup goes behind (it has a z-index of 10?). Here is the brand new css:
http://addproxy.net/sites/testing_space/css/style.css
and the site is down a level:
http://addproxy.net/sites/testing_space/
And a mockup of the desired effect (disregard the backslashes, hit max of href):
//http://addproxy.net/sites/testing_space/popup-mockup.jpg
The divs that seemed to trigger the problem were the .coupon class
Any help will be greatly appreciated!
You placed the original content inside of your new div's.
To make it look like your image that would be the id="coupons" div. Just so we're clear it's the one that starts like this:
<div id="coupons">
<div class="coupon" style="background:url(images/bg1.png);">
You need to move that div (and all it's contents) to just after the end tag of the id="popup" div.