-
Posts
-
Hi there,
above my main nav ive created a thin line that should appear behind the highlight box – only currently its sitting on top of it. How do I arrange the layers so that the ‘thin’ line sits behind the thick orange highlight box?
Ive tried playing around with z-index:-1; but nothing happens.
Can anyone shed any light?
Andy
Hi,
It is not behind the highlight box, rather on top of it. Maybe move the highlight box up a bit.
#top .avia-menu-fx {
z-index: 0;
top: 29px;
}Regards,
Ismael
Hi there – Tried to change the z-index (tried it multiple ways, even swapping gravitas of number values but it still didnt work.
Heres my css…
/*
DESKTOP STYLES
Add styles inside the media query below that you only want to be applied to the desktop layout of your site */
@media only screen and (min-width: 768px) {
/* Desktop styles go here */
/* CREATES TOP MENU FEINT LINE */
#top .main_menu {
z-index: -1 !important;
height: 30px;
border-bottom-color: #5e5957 !important;
border-bottom-width: 1px;
border-bottom-style: solid !important;
}
/* Main Menu – HIGHLIGHT BLOCK */
#top .avia-menu-fx {
z-index: 0 !important;
display:block;
position:absolute;
top: 30px;
border-style:solid;
border-width:2px;
}
}
cheers
andy
This code won’t work because you can’t give #top .main_menu a negative z-index value. The #top .main_menu element is the container of the main menu and you’d hide the entire menu if the container is covered by other elements with a higher z-index. Personally I’d just change the position of the “color” bar with:
#top .avia-menu-fx {
top: 29px;
}Then it will overlap the border and you’ll have the same effect.
Hmmm. I think I’ve tried that first time around so I decided to explore layering and found z-index. Couldnt find much on it but figured it worked a bit like my 3d packages. How wrong I was. Anyway, what am I doing wrong?
Cheers
Andy
Just re-read your email and what you’re suggesting can’t actually put the box on top of the feint line which is what I’m trying to do. It just aligns it at the top but graphically its wrong. Can you suggest another way to achieve it?
Cheers
Hi,
Please try this
Lets look at your requirements:
1) Don’t want thin line sitting on top of highlight box
2) Want the ‘thin’ line positioned *behind* the thick orange highlight box
Please try this css, at very bottom of custom.css
@media only screen and (min-width: 768px){
#top .main_menu {
z-index: 1 !important;
height: 32.5px !important;
}}Lets see if code solved requirements:
Yes it does. Though because the orange thingy is 4px high , positioning it will require the orange thingy to be 1px thicker. easiest way.
Thanks,
Nick
Perfect, although sarcasm aside Nick, I really couldnt have worked that out myself in a million years. Ive tried everything although I was on the right track with the Z-Index. It was the .5px extra that seemed to fix it. Is that a magicians secret or would you explain how the trick is done?
Have to say Im very grateful by the way Nick. Ive done a lot of the site already offline and occasionally throw up a few questions just because they take a while. However, ive implemented and learnt a hell of a lot and most of it thanks to you.
Cheers for that – including the thrown in sarcasm!!!
Andy
Hi Andy,
No sarcasm. Just thought that solution too simple to be the right one and was sure i misread your post. So not to seem a fool, i wanted to show my logic that it answered your question. lol.
Site lookin good!
Nick
Ta,
It was very simple but somehow I couldnt see the huge neon sign-post to the maze saying “exit here’!!
As I have your attention….. I want to remove borders, spacing of a gallery but just for one part of my website. How do I write the CSS code?
I know the page ID is 1739 (.page-id-1739) & I know the code to remove borders etc………
#top div .avia-gallery img { float: left; border-style: solid; border-width: 0 !important;
padding: 2px; width: 100%; border-radius: 0;}
How do I put them together soo it only effects that page ID number section? I want the gallery to be normal everywhere else. I managed to do it with a tiled png on the home page but cant make it work with this
Cheers
Andy
Hi,
You normally use #top first (unless you want to target using classes found in the html tag) , then you add any class found in <body> specific to the page to target it then you just add the rest.
#top.page-id-1739 div .avia-gallery img{ float: left; border-style: solid; border-width: 0 !important;
padding: 2px; width: 100%; border-radius: 0;}if the above dont work, take out the div
Thanks,
Nick
Thats perfect. Great for adapting other things too so its a great bit of knowledge to have.
Just to push this further.
How could I have two galleries on a page in different places and have one display a border and the other without. Is it possible to target within a page ID without having to do a lot more coding? Its not crucial but I thought it might come in handy to know. Ive set up a test page here.
http://www.andypeck.co.uk/1739-2/
BTW – can you explain why the URL for this page has the ID showing even though I changed the permalink structure to /%pagename%/ – it doesnt happen anywhere else
Cheers
Hi,
If you are interested I wrote yesterday some deep stuff about css media queries and the cascade .. counterfeiting and the cascade. https://kriesi.at/support/topic/responsive-problem#post-120098
—
You can have, and if gallery has a unique id assigned to it as some advanced elements do, then its a piece of cake, if it doesn’t than it takes a bit more trickery to target them. Basically you will need to look at each one in relation to the html tags in front of each of them, and see if there is any differentiation you grasp and use. You can always go into the code and manually add an extra css tag via php. However if in some situations its almost impossible to do, there are really complex css selector targeting like .. target 3rd paragraph after 2nd div that comes after an image class for which you have a class name. stuff like…ul li:nth-child(3) { }
You can examine some low level advances targeting here http://devsnippets.com/article/5-advanced-css-pseudo-class.html
The page is called like that because you took too long to give it a title, so since wordpress auto-saves revisions, it saved itself under that name so when you added a title the slug itself remained the page ID. To change it , you need to change the slug since there is no law that your page slugs must match page titles. To turn on slugs, http://www.clipular.com/c?8102009=detVhaytfA8MCcl1vMBSHRGYFek&f=.png just open the top panel in pages and posts and portfolio items and click the slug check box. Just remember rules of slugs: no spaces, only small letters, and can use minus sign – and underscore _ (minus sign is standard in place of spaces). And slug should not be more than 60 characters long. 0-9 a-z _ + only.
—-
Damnn. I think u can win best enfold site , i know best one i seen, and I look at em all day and twice on Sunday (thats today). I should have copied your css from your previous attempts, what a waste.
—-
any reason you got a white vertical line separating the sidebar i guess on the page you linked from last post?
—
I don’t think the calendar works. Somethings wrong with it.
—
I just looked and you are in luck. avia-gallery-1 and avia-gallery-2 are in play. Here is css for avia gallery 1 already changed and an identical set would be needed for gallery to so just change 1 to 2 in each selector. You may have some selectors from avia-gallery though that you wont be able to kill since their specificity may be higher, so those will require aditional css, though try this.
#top div .avia-gallery-1 {
overflow: hidden;
padding-bottom: 2px;
clear: both;
}
#top .avia-gallery-1 .avia-gallery-thumb a {
float: left;
width: 20%;
opacity: 1;
display: block;
}
.main_color .avia-gallery-1 img {
background-color: #24444E;
color: #E6D9CF;
}
#top div .avia-gallery-1 img {
float: left;
border-style: solid;
border-width: 1px;
padding: 7px;
width: 100%;
border-radius: 0;
}
#top .avia-gallery-1 .avia-gallery-thumb a:hover {
opacity: 0.5;
}
.avia_transform .avia-gallery-1 img.avia_start_animation {
-webkit-animation: avia_appear 0.9s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-animation: avia_appear 0.9s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-animation: avia_appear 0.9s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation: avia_appear 0.9s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
opacity: 1;
}
.alternate_color .avia-gallery-1 img{
background-color: #305F72;
color: #E6D9CF;
}don’t forget, make 2nd copy with -2 instead of -1 if you want the 2 gallerys different.
—
i thought before u wrote u are in late 60s , u 3 years older than me and not 70.
Nick
late 60’s!!!!! lol – im 46 for god sake.
I spend most of my time working for very large businesses as a Creative Director (Disney, Goldman, BBC, Pernod) and have worked across a wide range of formats (online & print campaigns) but im mostly known for my event and video work. Trouble is I never have time to do my own stuff but I thought it might be fun to cobble my own video portfolio together instead of buying off the shelf. So im forcing myself – bit by bit to have a go. I possibly should have just worked in Dreamweaver but I thought i’d try taking on a blogging tool and tweak it from there. To be honest I could have got help from one of my past teams but that would defeat the object of doing it myself. Besides I like meeting new talent and forming new friendships.
Anyway, I digress… Im actually working on the previous darker chocolate version offline (not the current coral color you see) but it helps remind me which is which. I know I shouldnt test this way but tnh nobody knows im doing this myself and I found it harder getting support inside maintenance mode.
Ive thrown up quite a lot of stuff already but I keep challenging myself to do more which is why I like asking you stuff. Its even better that youve been so keen to help – not everyone is so obliging but thats quite understandable.
Now before I shuffle away to my retirement home!! Ive seen a lot of sites where they have rollover effects on icons. Im guessing most of these are Java script but I was wondering how hard would it be to make an icon font change color on Rollover (say orange to a deep orange) and then link to a part of the site for its Down state?
Thanks as always
time for my hot chocolate and my sleeping pills!!
Andy
Hi,
I use Dreamweaver still. Only because I used it since it came out in late 90s and been using it since then even though i use it as a notepad, ignoring all those buttons and gadgets. You got a mac, so you can use Coda2 which isn’t made for windows, a good IDE.It’s all a waste when working with WordPress though, or at least I never could get comfortable with any of it.
All animations you see today are jQuery and CSS powered, with css taking over more and more. As soon as ie8 and ie9 browsers die, can hopefully do it all in next generation css. like less or sass which fuse css with a scripting language so can use logic.
The easiest way to animate anything is by using a css selector and then an identical selector but this time with :hover at the end. You can put one image for hover, and another image for normal view, and as soon as a mouse hovers above the image or letter, or any html tag, can get css to do something.
Those glyph icons can be animated any way you want with css which you are starting to understand. The problem is that you cant dynamically switch classes or id’s in the html code on a live site using css alone. or changing a link destination with css alone. So graphics people are today forced into learning javascript, which despite the name is a serious language when compared to php. So there you have it.
Thanks,
Nick
Cheers Nick,
I think thats one of those nice to have issues ill get round to when my site is up. Although, I think I might treat it as a ‘next steps’ challenge once im set. I think we close topic on this one for now although im sure ill be posting again verrrrrry soon
Cheers for everything.
Btw… was that you following my vimeo account?
- The topic ‘Layering CSS Drawn elements’ is closed to new replies.