My problem is hard to explain (especially when knowledge of English is at the primary level)
My test site: ----
On page is over than html code, you can see scroll to right. (On small resolution)
Picture of this: http://i.imgur.com/arCoPt7.png
How to fix that problem ?
If, something is not clear, and somebody don't understand my problem please ask.
(I am not giving CSS becouse is too much of code, so everything is in source code of website)
Sorry for my bad English...
your problem is the class statystyki inside the class menu.
in your p element you have width:100% and float left and the other elements right.
So you exceed the total width of 100%.
Try to make a width that dont exceed the 100% and also is best if you clear the floats.
Remove the extra margins and check all the divs width.
or simply add
this style to your body.
body {
width: 100%;
overflow: hidden;
}
http://haleem.itspiders.net/
Related
My HTML page is divided into two sections:
LEFT : there is a table
RIGHT: there is a div including its text
I want that the table would be high like the div, and it should adjust automatically when the div's height changes.
(I tried it in CSS: body, html, table {height:100%}, but this is not what I want).
PS:
The div arrives at the bottom of the page, so I can adapt the table at the height of the page.
Can someone please help me to do this?
i think that, you can try use variable in css, and then substitute it for table height and div. I don't know exactly what, you mean.
PS. maybe you should use this selector: table, div { min-height: ... ;}
If you're talking about having equal heights on both columns, this can easily be achieved with Flexbox.
Check this page out
https://davidwalsh.name/flexbox-column
I ran into this issue while implementing a sticky footer solution. I have the footer working well, but my body element which encompasses everything within the tag just will not auto-extend beyond a random point further down that can only be reached by scrolling down (it's a lengthy page). My intention is for the body container (does that sound morbid or what?) to auto extend past all the div elements it contains. Isn't that what it's supposed to be doing? Right now there are still div elements sitting further down from where it ends, and the footer is sitting in the middle of my page right below it. If I can't achieve this behavior, I'll have to set the body to a fixed position in css, which I don't want to do.
Using the following CSS styling doesn't work, probably because my content extends beyond a page.
html, body {min-height: 100%; height: 100%;}
Can someone articulate what the most likely issues could be? Also, feel free to make any constructive comments on my code. This is my first web project.
Here's a link to my HTML code on CodePaste: HTML Code
And here's a link to my CSS code: CSS Code
Lastly, a link to a screenshot of my webpage showing the issue. Screenshot
The green bar is the footer, and the red border is the body element styled in css so it can be viewed. You'll see it ends right after the picture.
I'm pretty sure your main problem is setting the height of the body tag. Try not giving it a height (no max-height or height tags) or giving it height: auto to make it expand as its contents.
It could also be that you are setting child elements to positon: absolute which means that the parent will collapse to the size of whatever non-absolute elements are inside it.
Also, why the <p1> tags? They should be just <p>.
Code criticism:
It was extremely difficult to figure out what the problem was and I'm not sure that I gave the correct solution because of the way you showed your code. In future, try to give your code as a JSFiddle or a Codepen.
Also, consider using a CSS framework which will reduce the amount of CSS code you write a lot. I would suggest Bootstrap or Materialize but Bootstrap is more widely used.
Don't forget to follow CSS guidelines which will make your code more readable.
You could stretch the element to the full height of the window using vh.
.container{
height: 100vh;
}
You could then position your footer to the bottom using absolute position.
footer{
position: absolute;
bottom: 0;
}
I've used this in the past for full page landing pages that aren't meant to scroll.
I don't exactly know what the question is asking, but I experimented a bit and figured that if you remove the 1 from the <p1> so you would have a normal <p> tag, it moves the text up completely. I have a very rough JS Fiddle.
Thanks to all who contributed. Based on suggestions from Sankarsh and Ori, I was able to solve the problem. Once I changed my div to just as they suggested, I noticed it began functioning as I intended and forcing the parent element down beneath it. Unfortunately, that only solved the problem for that element alone. That led to me discovering the element had a default "static" position, while most of my other elements were set to "absolute". After changing the positions of the bulk of my content to "relative" or "static", everything is working as intended!
TLDR: If you want a child element to stay within the boundaries of its parent element, you need to set the child's position to "static" or "relative". You cannot use "absolute". This way, instead of overflowing beyond the border of the parent, the child will automatically extend the parent's border to its intended position.
I'm working on a website in which sometimes the pages might not cover the entire height of the screen (due to less content), which creates empty white space below the footer. I'm trying to solve this by always keeping the footer below the viewport. I've tried many ways to do this, but all of them solve one problem and create another.
Here is a jSFiddle for what I have so far.
The only time it actually worked was when I set height:100% to the body and html, but this makes the content overflow the body in the DOM, which I'm trying to avoid. Also, because the site needs a boxed layout, I need to wrap the page-content and footer with the #page-wrapper div as used in the code.
Please let me know if there is a way to achieve this, with the given markup.
Thanks!
Edit: Here is a slightly updated jSFiddle
I think you can do this by absolutely positioning the footer and making the page-wrapper relatively positioned. The catch is that you'll have to size the page-wrapper using JS based on the height of the HTML element. Something like:
$('#page-wrapper').height($('html').height());
but you may need to tweak the position quite a bit unless you use
* { box-sizing: border-box; }
I have an issue with the border-radius of div container2 for the links list with the resolutions at the top of the page like 240x320 etc. Its going around everything instead of just left-column2 and right-column2. Container2 is used a second time in the code without issue so i don't understand it.
At first i thought it was a problem with a closing tag but checked the code and everything is fine.
Heres my fiddle. Hopefully someone knows whats going on with it.
Maybe it has to do with the box-model . width + padding.
To include padding into width and use width:100% on child , you can switch the box model with box-sizing: DEMO
.container1,
.container2 {
box-sizing:border-box;/* add prefixed rules if needed */
}
SEE: W3C
It was pointed out that i had mistaken an open div for a closed div. Thats why i was having issues with the border.
I have now searched for hours, but haven't found a solution yet. I hope anyone out there can help me :)
I searched and found the following script: http://jsfiddle.net/tcaVN/81/
This script is great but if the div#center isn't full of content, it looks like the following: jsfiddle.net/tcaVN/80/
I actually want to resize it to 100% height even if it isn't full of content. Is this possible and if yes: How?
I really don't get it.
Many thanks in advance!
Edit: Thank you all for your help!
With my own design it now looks like this: http://jsfiddle.net/tcaVN/102/
The problem is, that you now can scroll even if there is no content.
Edit2: I have found the issue! There was a padding too much in #content.
my answer is here..
http://jsfiddle.net/tcaVN/101/
edit:
http://jsfiddle.net/tcaVN/103/ ( this is with text which extends beyond body, just added to show that css changes works for both the cases.. )
what i did was added
height:100% to html,body and #bind
and added min-height:100% to #center
based on this
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
This should work.
The likely problem is that you assume that the body and html containers default to 100% width and 100% height. This is not the case. By default, the width is 100% but the height adjusts to the content inside the html/body containers.
Hopefully I understood your question.
this one will work, even if the content exceeds the div.
setting min-height: 100% instead of fixing height:100% ensures a flexible div.