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;
}
Related
Hi I have a cordova app and I need to build a chat.
http://jsfiddle.net/jGLvk/1355/
I put the divs with position absolute to when the keyboard on the phone appears all the content move to up too.
So, when I did that the content doesn't show the scroll. How Can I resolve this?
<div class="page-content messages-content" style="position:absolute; width:100%; bottom:48px; top:auto;">
<div class="messages" style="position:absolute; width:100%; bottom:10px; top:auto; overflow-y:auto;">
Pay attention on this lines, where all the new messages will
be inserted.
Thanks.
I was able to solve it with overriding inline styles. Not sure if you should use it (I'm actually sure that you shouldn't)
.messages-auto-layout {
position: static !important;
}
I'm not sure if this is helpful because those styles are most probably applied via JS so there must be a way how to solve it in a more smarter way. Maybe stripping off all JS styles and use only css? I have never build an App using Cordova so I might be missing some context here.
Here is the link --> http://jsfiddle.net/9rsgdrw5/1/
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>
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'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>
Soooo... I was working on this page using jsFiddle and it doesn't work the same on the actual page!
http://jsfiddle.net/8Hpmj/8/
http://ktaadn.me/about/
The ktaadn.me example isn't left-justified and filling the width below the logo.
What did I do wrong?
If you need inspiration this is my seductive, unhelpful cat.
http://4.bp.blogspot.com/-NVtngGt43Rs/Tcmmw6RR-zI/AAAAAAAABOI/UPYJJHpAlk8/s640/IMG_9728.jpg
Thanks!
add padding:0; to .nav1
and width:100% to the anchor tags odd.a and such
that should fix it.
tip: do not use these css grid frameworks if you are not very solid at it.
good luck man.