Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have this html and css code. http://jsfiddle.net/Pp9Z6/
I can't figure out why I'm not able to click inside the EditText and Button widgets.
If you right-click the edit, and choose 'inspect element', you know why. The element that you're inspecting turns out to be a div. It's because div 'main-nav' is an overlay over almost the entire page.
And that is due to this CSS:
div {
position:absolute; height:100%; width:100%;
display: table;
}
You could solve it by adding z-index: -1; to that CSS, but the real question is why that div is there in the first place. There's probably a better way to align your main navigation. Actually, it seems to work just fine (or at least the same) when I remove that entire CSS definition: http://jsfiddle.net/Pp9Z6/2/
remove height:100% rule form your div style. It is overlapping your entire page.
You have a gigantic div that keeps you from clicking the input, or the button... I strongly advise your to review you page layout, but if you want to solve this praticular problem, wrap the login area to a div, and set its position to relative. It will get in front of the #main-nav
http://jsfiddle.net/Pp9Z6/3/
div {
position:absolute; height:100%; width:100%;
display: table;
}
above div Overlapping the rest of the content. so u can't access element
just remove position:absolute; and see it will work or modify the code as below
div {
position:absolute; height:100%; width:100%;
display: table;
z-index:-1;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
As a novice web developer I've been trying to build myself a personal webpage from scratch. However I've encountered a problem.
Here's my webpage, it looks ok but when you click any of the links on the left side, and turn a # to display:block from display:none you can see the "bleeding" on the bottom.
I have no idea why this happens, so I'm linking my repo which contains the html and the css for the page.
Put a simple CSS in your Canvas Tag
style="position:fixed"
and its Done
If I understood your question you want to remove the green band at the bottom of the page.
It comes from your background-color:
body {
/* background-color: #A7DBD8; */
}
Juste remove it and it's ok ;)
Remy
Changing the style on the canvas element from
display: inline-block;
to
display: block;
fixes this.
Delete the :
<div class="footer">
from the index.html because you're not using it
Your panes are a fixed width and height: 620px, 500px respectively. If you add padding-top: 100px to a pane (as you did with #links div), it will increase your height to 600px and push things down.
The quick fix is to, instead of adding padding-top: 100px to your #links div, add it to the first paragraph in your #links div.
#links p:first-child {
padding-top: 100px;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Here is my code.
http://codepen.io/anon/pen/MwoLdR
The text of my sections are overlapping, and the background-color: #xxxxxx; of every section is not showing up.
This may be a position issue, but when I change position: relative; to absolute, the text aligns to the left even though it is set as center.
This may also be a height issue, because in the browser the dimensions sometimes show up as "880px x 0px".
just change the line-height of the h2 in your css, as well as the "strong" tag to fix the overlap, and give your "section" tags a static height. The problem with percentage based heights is if the parent container (in this case the body) has no specified height, the children will have a height of 60% of 0 which is 0. Thats why the content wasnt visible.
.second strong {
color: #32B432;
line-height:40px;
}
h2 {
line-height:24px;
}
here is a working example
An even easier way would be to use
body {
height:100%;
}
rather than
body {
min-height:100%;
}
if you dont mind a static body. here is an example of that.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
http://thepositiveclassroom.princetonsquarepress.com/dd-product/the-positive-classroom-method/
On this page the Take A Look button is staying to the bottom of its div, and I can't for the life of me figure out how to fix it.
Floated elements need be first in html markup. Or remove float and add display: inline-block;
Take out the empty <p> tags that are encapsulating the "Not Sure" text.
Remove the float:right; from the button.
Then add display:inline-block; to the button. If you want more space between the top and bottom borders, add padding to .product_sample_download
You got to put the
html .singular-dd-product #primary #content .entry-header p {
padding-bottom: 4px;
float: left;
}
on float:left!
Edit: You have a very wicked responsive-design-rule-set.
I would go for
.p ( before button )
{ display:inline-block; }
a. ( the button )
{ display:inline-block; }
Then you can work with vertical-align.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I need a help. Plz see the attached image. I am trying to make grid using html ul li with any height. I am trying to put column one after another without any white space in between . But unfortunately 4th column is going bottom. How to fix ?
ul.brik{
margin-left:-5px;
}
ul.brik li{
display:inline-block;
width:32.5%;
margin-left:5px;
vertical-align:top;
}
Assuming you don't mind ordering your columns vertically instead of horizontally, and you don't need this to work in older browsers:
display: flex;
flex-flow: column wrap;
With possibly some other flexbox properties should get you that layout.
This is happening because each ul appears at the top of the line it is currently in. Once a line break is introduced, the next ul will appear where you see it.
To solve this, separate each column by a div, and put the uls inside.
You'll need to set the display of the divs to inline-block for them to stack horizontally.
i'm not quite sure what it is you're looking for. it looks like you separate them with more divs, also i think for your purposes you can add a
min-height:50px;
max-height:250px
overflow:hidden;
/* you could also try*/
position:absolute;
top:20px;
left:20px;
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have a page set up however I am having trouble aligning the news articles to the center of the page.
Here is a link to what I have so far -
http://casb1.cloudapp.net/1016/1be61016ff9a717aa34c2adf7c5aa79e/3D%20Design/news%20articles/news.html
Basically I need the red area to always be the same distance from the edges, even when it expands. Is this possible?
The red container has the css of position:absolute
Any help would be hugely appreciated.
PS. this is only my first week of learning css and html so please forgive me if it is something simple.
Thanks
I think you don't need the position:absolute you can delete this property and add this:
.collection {
display:table;
margin:auto;
}
There's a lot that can be impoved, but going to your question, I'd do something like this:
.collection {
position: static;
display: inline-block;
}
.roundcont {
text-align: center;
}
You basically need to remove the position: absolute; attribute from your .collection element and change its display to inline or inline-block and then set text-align center; to its parent div so now it looks centered.