Image overlapping in div focus - html

I can't figure out how to make a div move when another div is clicked.
Here is a jsfiddle demo: https://jsfiddle.net/vufosn18/ (make sure you make it fullscreen so the image doesn't overlap with the text)
I have been googling around for a bit and can't find anything, so I tried:
#feas:focus #construct{
margin-top: 300px;
position: absolute;
}
When I click on feasibility it gives construction management a margin-top of 300px.
Any help is appreciated, if your answer could be in JavaScript/CSS that would be great.

It would be hard to fix all your issues in one answer. But I'll try to get you going:
Everything is absolute, I think this is not recommended for your case. Read more
You are using ID's everywhere, causing lots of duplicate styles. Try changing this to classes. This will be much easier to manage small changes.
I recommend checking that you are working html strict, this may prevent having rare situations in different browsers. (FYI)
To answer your question:
There are a lot of plugins out there that are easy to use. I suggest you to use one of them instead:
https://jqueryui.com/accordion/
A step by step example (just googled it)
..
For what you want to show in each tab you can have independent html/css. By default is img and p relative. So they won't overlap then.

here is a simple animation
Click on hello and the div with the word world will move down
function click(){
document.getElementById('bottom').style.top="50px"
}
document.getElementById('top').addEventListener('click',click,false)
#top{
width: 50px;
height:50px;
border:solid;
}
#bottom{
position:relative;
top:0px;
width: 50px;
height:50px;
border:solid;
transition-property:top;
transition-duration:3s;
}
<div id="top">
hello
</div>
<div id="bottom">
world
</div>

Related

CSS Creating a non-rectangular header for a hybrid app page

I am in the process of designing the layout for the pages of a hybrid Cordova/Android app where I need to use a non-standard, not rectangular, header. The shape I wuold like to get is like the one shown below
I am trying to accomplish this with pure CSS3 and have got a fairly decent result thus far as shown below.
body,html{padding:0;margin:0}
.ust
{
height:4vh;
width:100vw;
position:relative;
background-color:orange;
display:block;
}
.oval
{
position:absolute;
height:12vh;
width:160vw;
top:1vh;
left:-30vw;
border-radius:100%;
background-color:orange;
display:block;
}
.timer
{
position:absolute;
height:10vh;
width:10vh;
border-radius:100%;
background-color:orange;
left:calc(50vw - 5vh);
top:9vh;
}
<div class='ust'>
<div class='oval'> </div>
<div class='timer'> </div>
</div>
My effort does not look quiet as nice as the version I am trying to copy principally because of the way the "timer" element meets the "oval" - in a sharp corner. The roundedness of the junction in the sample image is missing.
I have tried to work in the roundedness using the timer::before/after pseudo-elements and playing with their individual borders but try as I might I cannot get that concave junction effect.
I'd be most grateful to anyone who might be able to suggest a way to accomplish this.
A great way to do that is with a clip path. This is a great website that generates the CSS code you need of the path to create that unique shape:
https://bennettfeely.com/clippy

How to stop the content from overlapping the header?

Umm...hi!
I'm new here and am a self-taught amateur (read:google-searching-experiment-dude).
I created a fairly basic webpage but when I scroll down, the content overlaps the header. I don't really know how to explain this,so I'll link everything:
https://youtu.be/R05oISKKaXE
Oh, another thing:I'm sure I have a lot of redundant stuff.
Thanks.
Hello and welcome to stackoverflow!
When posting questions related to html/css/javascript you can use a tool like jsfiddle to create a demo of the problem and post it here, so it is easier for others to help you!
You could try removing the relative position in your .body class and the fixed position on your .header class, that alone might solve your problem.
You have to change the z-index of your elements to make them display on top of each other in a defined order.
Considering a piece of HTML that looks like this,
<div id="header"></div>
<div id="content"></div>
You can set the z-index of each element like so:
#header {
position:fixed;
z-index:1;
}
#content {
position:relative;
z-index:2;
}

Evenly separated DIV's technique not working

A couple of days ago, I found my self with something that I never have thought before, but went on research to solve it out.
I have a menu, and inside it, I have its items. I wanted to these items to fill the entire width of its parent; I found some solutions, including these one (which I personally think is the most simple, and don't use any hacks to do the job):
HTML
<div id="menu">
<div class="menu_item">Item 1</div>
<div class="menu_item">Item 2</div>
<div class="menu_item">Item 3</div>
</div>
CSS
div#menu {
display:flex;
justify-content:space-between;
}
div.menu_item {
white-space:nowrap;
}
Where I found it, there was even an working example at JSFiddle. I created a new blank document, and tried it there, and worked.
But, unfortunately, this simply doesn't work in my already complete website. I've thought many things: my tags are inheriting properties, there may be a conflict amongst previous properties, and a lot more. I've tested them all, and still nothing. The only thing I haven't done yet is to start from scratch again (for obvious reasons).
So, my question is, do you have any idea of what could possibly be happening? Anything at all?
PS: I've tried all of this locally on my PC, but the website is already online. If you want to check it out: http://geesufmg.com (just to be clear, where I'm trying this is where the buttons "Home", "Engenharia de sistemas", "Sobre o curso", etc, are - the container is div#menu and items are div.menu_item).
That still works, you just need to add it to your a tag's parent which is div.container in your actual code, not div#menu:
div.container{
display:flex;
justify-content:space-between;
}
div.menu_item {
white-space:nowrap;
}
UPDATE
On further inspection of your code the issue is you are using .container in more than one place (which is fine because it's a class but adding those properties to it is going to effect other places). You need to target .container under a specific identifier (in this case #menu):
#menu .container{
display:flex;
justify-content:space-between;
}
#menu .container a{
white-space:nowrap;
}
FIDDLE

Css twitter widget stays outside the element in firefox

I've added this twitter widged to one of the site's i manage and for some reason, in every browser but firefox it looks good but in firefox this happens
bam it jump to the side for no reason i solved this by putting overflow:hidden; to the class textwidget
but then everything is gone in the rest of the browsers?
could anyone help me find a solution for this.
All help is very much appreciated
p.s. the site can be found here
Popdrommen
After successfully defeating your popup window, I have come to a conclusion that something like this should help you:
.textwidget {
clear: both;
}
Best thing to do in my opinion, is create a div, set its size, and then apply the overflow:hidden attribute to it, (remember to position it relativly)
Then inside that div put the twitter stuff.
<div style="width:200px; height:500px; position:relative; overflow:hidden">
<!-- Twitter stuff here //-->
</div>

Clicking through layers/divs

If I have two layers on a page, split horrizontally, with the second layer overlapping part of the first layer, is it possible to make it "click through"?
I have links in the first layer, which the second layer overlaps, which stops the links from being clickable. Is there a way to make the layer display, but be click through, while still having it's own links clickable?
edit:
Here is an example, with html and a stylesheet.
The test links become unclickable when inline with the header in Layer3, but below that they are fine. Is there a way to rectify this?
<title>Test</title>
<link rel="stylesheet" href="test.css" type="text/css">
<body>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">Brands</h3>
</div>
<div id="Layer2" class="Layer2"><h1>TEST</h1>
<div id="rightlayer">
TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>
</div>
</div>
<div id="Layer3" class="Layer3"><h1>Ed Hardy Auctions</h1>
</div>
</div>
</body>
</html>
And the css
#Layer0 {
width:100%;
height:100%;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;
}
#Layer1 {
position:absolute;
left:10px;
width:200px;
margin-top:17px;
font-size:1.0em;
padding-left:12px;
padding-top:8px;
}
#Layer2 {
background:#fff;
margin-left:199px;
color:#000;
}
#rightlayer {
float:right;
}
.Layer3 {
position:absolute;
top:67%;
padding:20px;
width: 100%;
}
Thought I would update this as I'd been struggling with this for a few hours and think i've found a solution. Looked into using Jquery but the CSS property:
pointer-events:none;
...did exactly what I wanted.
It is not possible if you want the divs to stay in their current x,y, (and most importantly) z - only the "top" layer is clickable.
Addendum post OP edit:
Think of CSS layout as if you were physically working with bits of paper (this is much easier to visualise if you give all your "layer" divs a different background colour). The rendering engine cuts out a bit of paper in the dimensions you give it (or it works out) for each element it finds. It does this in the order it encounters them putting each bit of paper on the page as it goes - the last item is going to be on top.
Now you've told the rendering engine to put your 3rd div in a position where it overlaps the 2nd. And now you expect to be able to "see" the covered content. Wouldn't work with paper, won't work with HTML. Just because it's transparent doesn't mean it's not taking up space.
So you have to change something.
Looking at your CSS and markup (which honestly could be cleaned up, but I'll assume there's other mark-up you're not showing us which justifies it) there's a couple of easy win ways:
1). Set a z-index of -1 on Layer3 - z-index is how you can change the layering order from the default (as encountered). This just moves the entirety of Layer3 below the rest of the page so what was hidden becomes exposed, but also vice versa depending on content.
2). Change the width from 100% to e.g. 80%, or more likely given your use of pos:abs set left:0px and right:199px; (I'm guessing that padding-left on Layer2 is an intended column width?). The cost of this is that your Layer3 is no longer 100% width
3). Google "CSS column layout" and find a pattern that reflects what you need and adapt that. Every CSS layout which can be done has been done a million times already. Standard techniques exist which solve your problems. CSS is hard if you haven't built up the experience, so leverage the experience of others. Don't reinvent wheels.
It would be a mammoth job, but it is possible.
You would need to capture the click event on the top layer/div, and find the cursor x-y position.
Then find all links in the layer/div underneath the top layer, and see if it's position on the screen falls around the current mouse position.
You could then trigger the click of the matched link.
I would use jQuery (if you are not already) for this and then re-post with a jQuery tag if you run into troubles.
It is hard to tell without seeing some code.
You could try setting z-index on the bottom layer but that works on elements that have been positioned with absolute, relative or fixed (position:absolute).
edit after seeing code:
Add position:relative; z-index:100; to #rightLayer.
Or you could remove the width:100% from .Layer3.
You may want to refactor your code and go with a two column layout for #rightLayer and .Layer3.
css
#Layer0 {
width:100%;
height:100%;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;
}
#Layer1 {
width:200px;
margin-top:17px;
font-size:1.0em;
padding-left:12px;
padding-top:8px;
}
#Layer2 {
background:#fff;
margin-left:199px;
color:#000;
}
#rightlayer {
float:right;
}
.Layer3 {
}
html
<div id="Layer0">
<div id="Layer2" class="Layer2">
<h1>TEST</h1>
</div>
<div id="Layer1" class="Layer1">
<h3 align="left">Brands</h3>
</div>
<div class="content">
<div id="rightlayer">
TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>TEST><p>
</div>
<div id="Layer3" class="Layer3">
<h1>Ed Hardy Auctions</h1>
</div>
</div>
</div>
I'm assuming from the example that the links in the rightlayer are the only links that need to be clicked, and that you don't have links in the other layers. If so, you could solve the problem by changing the z-index order of the divs.
Layer1 and Layer3 have position absolute, so if you add a position style (absolute or relative) to Layer2, you will be able to pull that div to the front, also pulling the rightlayer div to be in a higher layer than Layer3.
I added the following to the CSS:
#Layer2 {
position: relative;
z-index: 1;
}
From what I can see that leaves the current page setup just the way it is, but pulls all the elements (including the rightlayer with the links) to the front, so you'd be able to click all the links in it.
For debugging purposes I suggest adding background colors to all the different layers to get an idea of the z-index order of the different layers. With the background color in place it was quite easy to spot the layer that was falling over the links, but also to verify that the new z-index order makes the links available.
Hope this helps!
I submitted a bug years ago to the Firefox Bugzilla saying that there was this very bug in Firefox.
I was told by a Mozilla engineer that this was not actually a bug and that it is the correct behaviour as per the HTML/CSS specifications.
Unfortunately I can't find the original bug to reference as it was about 6 years ago.
The reason I submitted the bug was because I could click through the top div onto the links below when using IE (6 I think) but Firefox would not let me.
As usual, it turned out hat IE had the incorrect implementation and Firefox was working as intended by the spec.
Just because a div is transparent does not mean you should be able to click through it.
I'm not sure how you could get around this with JavaScript or CSS. I would take a step back and have a re-think about what you're trying to achieve and how you're trying to achieve it.
Greg
Can you not simply set the width of the div to auto (the default for absolute positioning - i.e. just delete the width:100% from .Layer3).
That way the div will only be as wide as is necessary, rather than unnecessarily overlapping the links.