I'm currently trying to follow a tutorial to make an image gallry a-la-Apple but for now, I got a little problem that I can't understand the reason.
Here's the JSFiddle: JSFiddle.
If you check correctly, you should see a white space on top of the second and third li item of the submenu in the slider. The first one doesn't have it.
There's the wanted result: Tutorialzine
If someone can find the reason, it would be appreciated!
Note: I'm using Twitter Bootstrap!
Rule #1 for list-based menus: Put all styling on the A-tag using display:block. Do not style the LI tag except for floats/positioning.
See my tutorial: http://preview.moveable.com/jm/ilovelists/
Related
I am using Responsive Hexagon Grid as my base layout. After clicking a hexagon, I want a Modal to show up. For that I'm using Materialize CSS. However, After importing materialize CSS, the hovering effect of hexagon.css is completely messed up!
Is there any way I can solve this and get original hover effect like below? I'm new to this stuff.
https://github.com/web-tiki/responsive-grid-of-hexagons
See the error here:
http://imgur.com/a/IhO5Q
(You may need to Google about Materialize CSS as I'm not allowed to post more than two links here).
I'm answering my own question here:
The conflicting code was for h1 tag. You just have to remove bottom padding from h1 tag to get things work!
I am usually pretty used to find out my own issues when it comes to Bootstrap styling and elements, but this one.. just keeps giving me a headache, and therefore i need to ask you guys here.
I'm overriding some bootstrap styles, like the dropdown (hamburgermenu trigger dropdown) so it goes on top of other elements, rather than moving it downwards..
If you inspect my JSFiddle example after expanding the menu you see that i'm missing the relation to :
.navbar-default .navbar-nav>.active>a
.. the styling is completely gone, and i dont know why.
Here is a link to my JSFiddle
Found the issue.
its here in this HTML
<a id="lnkTeamOverviewMobile" style="color:black" class="visible-sm" href="/EventCalendar" href="javascript:__doPostBack('ctl00$lnkTeamOverviewMobile','')">Eventkalender</a>
you have a class visible-sm which is set to display:none!important in bootstrap.css , If you use this class you are saying that to display this element only when you are in a small device, And Computer Monitors are usually Medium..
Remove the class visible-sm and it must work fine
Working Demo
I am trying to understand html/css menu bar and my problem is at the display property,
I do know about this property very well, but if you take a look at this Link,
just a simple menubar, but the problem is that i dont understand why does the li tag and the a tag at the css style include display property inside them when the float do the job and you can delete them and the menu looks the same, i know that there is a resone for thoes display properies to be there at thoes both tags styles but i dont get it, if can some one please help me understand why the display property with the value of inline at the li css style, and with value of block at the li a at the css style, and again its not that i dont know about this property it just i dont understand why its there, thank you all and have a nice day.
display:inline used in li's is to make li aligned Horizontal or side by side.
display:block is used in li a so the a should take the complete with of the li so that if you click anywhere inside li the <a> tag will work & will not only work on clicking on the text.
I need a wee bit of help with css formatting on my website. Please see the provided screenshot, which relates to http://www.zerogravpro.com/.
css problem http://zerogravpro.com/temp/zgp_formatting.jpg
Problem #1: My orange-background box in the Testimonial sections goes quite a bit lower than I want it. How do I force it to move up, directly beneath the word "Testimonials"?
Problem #2: See the nice "More" button with the green ball and arrow in it? When I tried to use the same exact style down in my Testimonials box, it shows up as just a boring link. I want it to look the same as the button. I'm guessing that the style only gets invoked when it has the right hierarchy, but how can I fix this without messing up any other styles?
I provided the link to my website, so you can view it in Firebug and see exactly what the styles are, etc. Thanks!!
The Box below Testimonials is so low because there are two <br>-Tags below this line:
<p class="dotline"></p>
Remove them and it will fit.
And for the more button, you should add the class more to this <p>-Tag (untested):
<div id="testimonial6" style="">
<p></p>
</div>
The styles describing the button-like more-element is applied to a paragraph with class="more". However, the paragraph also includes a lot more rules than just the button, so you should try to extract the CSS regarding the button in order to make it reusable.
When it comes to positioning of the lower link, if you want to place it near the header you really need to move it closer to the header in the DOM.
There's an empty p element with the class of 'more' right above the testimonial box. Remove it and the testimonial box will be pulled up. Give it an appropriate margin top, and it will look good.
As for the button, here's my attempt at it -> http://jsfiddle.net/joplomacedo/c3vqh/
Please take a look at this nav menu
Currently it looks like below
What I'm trying to achieve, is result shown below (I made this on Photoshop)
Is that possible to get this result with CSS3? If yes please help me. Can't figure out, how to get this result
Here we go
http://jsfiddle.net/DBzSD/11/
I have used CSS pseudo elements to display them you can replace with normal elements if you want but that wont be a very wise choice.
Secondly i have used the data-attribute to show the value of the number , you can dynamically change the number with very minimal amount of javascript and that will automatically change the numbers shown in the box :-)
Hope that helps ..
Sorry i failed to find out your hover effects :-(
I can't find where you specify the border on the hover event, but I would make the green line part of the div, and then use the triangle as an image inside the div.
Have a look at this fiddle http://jsfiddle.net/Neograph734/DBzSD/8/