Im starting to learn HTML and CSS and i want to ask how can i move the button under the logo. As I said im kinda new to this soo please dont be to harsh on me haha. I tried to mess with display, justify-content and align-items, but im not sure that i'm looking at the right place.
P.S The button itself isnt made by me. I just changed it a bit so my first html+css documents would not look that bad. And course I'm not doing this commercially, just for my own satisfaction and learning.
Site
Code
You can use onClick event handler on img html tags. So, you don't need buttons under images. However, if you want to do it, you can use z-index css property.
img{
z-index:1;
}
button{
z-index:0;
}
Related
I'm currently working on an online code editor. (like jsfiddle codepen etc...)
I got everything working, but I ran into one problem; If a user does something like this:
button {
background-color: red;
}
It also changes the properties of my "run code" and "reset" button I made.
same thing with other things like a div;
div {
padding: 500em;
}
because this will also change the div's Im using in my own code.
I fixed the issue using !importand tags after every line in my css but I'm wordering if there is any other way to fix this? or is !importand really the only way.
As said in the comment by CBroe. To do this you can use iframe.
A more original solution would be to create a web component with a shadow root (which isolate the style too). The support for this is not too bad even if it's fairly new :
But, I've used it myself and it's a little bit harder to understand at first
I'm having a problem with the menu I just coded: https://jsfiddle.net/nL124rLq/1/
I am using a general selector (~) on my css and I think this might be a mistake, because it might be the origin of my problem:
#nav #link1:hover ~ #flydown {
left:0;
display:block;
}
#nav #link2:hover ~ #flydown {
left:-100%;
display:block;
}
... and so on.
As you can see, everything works fine but when I stop hovering on the anchors, the sliding menu under the links disappears. I understand my code is not made for this to work correctly, but I can't figure out a way of making it work.
I am going to add content (sub-menus) to the coloured areas that form the slider, so they must be clickable and must remain visible when the user hovers over them.
If it's any help, I got the idea from this site: http://www.tiffany.es/
Thank you guys very much in advance and excuse the relatively vague question!
Okay, so I found the solution, more or less. #Michael_B 's help was awesome! The resulting code looks horrible though. Oh well, it works!
Basically I added this to every single link that I have on the nav (link1, link2... etc.):
$("#link1").on("mouseover", function () {
$(".flydown").addClass('permahover1');
});
$(".flydown").mouseleave(function () {
$(".flydown").removeClass('permahover1');
});
...and added the following CSS once for every element in my menu (permahover1, permahover2 etc.) to specify their different positions with left:0%, left:-100%, etc:
.flydown.permahover1 {
left:0%;
display:block;
}
It got really dirty in no time. But I don't know a better solution. Here's a working JSFiddle:
https://jsfiddle.net/nL124rLq/4/
As always, thank you guys very much for your help!
I need your help.
The Title in the green Box "News" appears right under this Link.
http://www.mjart.ch/category/news/
But because of this weird Template I'm using, there are sometimes some imperfections. On this Site here
http://www.mjart.ch/portfolio/
the Green title seems to disappear behind the padding border. I really don't know why.
What I found out is that there are 2 different CSS styles. The first one that works is a .blog-title and the second one is a .single-title. But both are same styled. I would be happy about some help.
Hi if you dont want to change the structure of the template you can add this css rules
.page-id-21 .single-page{
margin:0;
}
.page-id-21 .single-page .single-content{
margin-left: 25px;
}
I added a .page-id-21 class, otherwise in the contact page you will add a margin.
This can be a solution, another is to search the correct template page, if it's a premium plugin it will have it, and you dont need to add the css rules.
http://www.artwars.net
Please take a look at the footer with logos two of the logos links bedpr and stormtrooper aren't working.
It is better to view the code through the browser than me paste it.
Appreciate the help.
Ant
Your markup is messy:
<div id="logo118" <a href="http://www.bedpr.com/"><img src="http://www.artwars.net/wp-content/themes/artwars2/images/bedpr.jpg" width="145" height="40"></div>
That's no valid HTML. You should close the starting div tag. I think you forgot the ">".
edit:
Take a look at the div's: The swarowski logo's div is missing
float:left; //So just add it there.
Also it has a
margin-left:360px;
instead of
left:360px; //This should not force design problems, just to improve your layout
Now, you have to adjust logo113 and logo115. Just like this:
top:-20px; //instead of -50px
Should work now.
I have a menu that's been giving me quite some trouble. What I'm trying to do is make the menu links, when clicked, reveal a drop down secondary division. However, it's acting as if the menu being revealed is floating and I can't seem to figure out why.
Here's the ideal design I want:
http://jsfiddle.net/WeL6j/7/
Notice how the grey division is affected and slides down as well.
I'd like the same thing to happen with the divs that hold 01, 02, etc and the one with the green 01. Basically all the content below the menu. I've posted a fiddle of my code just to give an idea of what it's doing and so you can edit it in real time. I haven't created any fallback code for it, so it's only really viewable in chrome. (sorry) It's also going to be messy as I've been moving things around trying to get it to work properly. Anyways, here's what I have so far.
-removed-
Thanks in advance for the help, Brian.
Try this:
http://jsfiddle.net/ETaqa/63/
BTW, you should really format the nesting. It was confusing figuring out the div levels.
Hi you can define some properties in you css as like this
.content {
position: relative;
top: -7px;
z-index: 10;
}