My question is about unintended overflow. I made a web page yet the body overflows all other elements. I have set the width to 50% 100% 150% and no matter what i do, 1/4 of the body overflows. I tried adjusting div elements width and still could not fix the problem
https://codepen.io/pnkonx/pen/LgPwKE
body{
background-color:#f7ce58;
color: #5e1c10;
font-family: stylish, sans-serif;
height: 100%;
width: ;
here is a link to the project i am working on.
h1 is the guilty one.
h1 {
font-size: 20px;
margin-left: 60%;
width: 65%;
}
Remove the margin value and use text-align: right instead.
For the next times, use this short snippet to fix it quickly.
* {
border: solid 1px red;
}
Related
I'm really not sure what is happening here. I've commented out areas of code that I suspected it would be, made sure it wasn't a glitch, there's something I'm obviously not seeing here. Hope one of you web design experts can help me here.
* {
margin: 0;
padding: 0;
font-family: "Montserrat";
}
I've tried setting overflow-x to hidden which fixes it, the problem is that when I do that the overflow-y seems to be automatically set to auto instead of visible and doesn't change when I set it manually to visible.
http://jsfiddle.net/jg10vzcx/
The culprit is the .sub-text element. It is a block level paragraph element with a default width of 100%. You are positioning it with left: calc(50% - 15vw) in order to center it. In doing so, it is extending past the viewport (because it has a width of 100%) and it is creating a horizontal scrollbar.
You can remove the left positioning and simply add text-align: center to the element in order to center it.
Updated Example
.sub-text {
position: relative;
margin-top: 2vh;
/* left: calc(50% - 15vw); */
font-size: 2vw;
text-transform: uppercase;
text-shadow: 0 0 1vw black;
text-align: center;
}
This happens only when I do a selection in the page and move the mouse to the right. Can you help? please look the attached picture.
In order for us to help you, you should be posting code snippets instead of a link to your website. It's against the rules as #Harry stated to do anything otherwise.
That said, I think the issue is coming from the fact that you're using elastics widths with your site. Keep in mind that when you do this, you need to watch your padding as in some browsers, they expand the widths beyond the max screen size.
I think the issue for you is coming about as you have:
article.header {
background-color: #1949CF;
padding: 3px;
padding-top: 7px;
}
coupled with
.module {
width: 100%;
float: left;
display: block;
clear: both;
}
both being called near the beginning of your code:
<article class="module header">
Thus, the padding: 3px; is extending the width: 100%; set by .module to essentially overflow your container.
To see this, use the Chrome -> Inspect Element tool by right clicking on your website. By hovering over your <article class="module header"> section, you will see that the width being shown is beyond the max width of your browser window.
This may not be the only spot in your code that needs fixed, but this should get to on the right track of how to debug your issue.
You can set the body's width at 100% with overflow: hidden.
body {
background-size: 100%;
background-position: center 1%;
background-repeat: no-repeat;
font-family: "Arial Narrow", Arial;
font-stretch: condensed;
font-size: 0.9em;
text-align: center;
overflow-x: hidden;
padding: 0;
margin: 0;
width: 100%;
}
I am making a "Starcraft II" website for my clan. And I want the navigation bar to contain the text "ALLOYE" and stick to the bottom of the navigation bar. I have tried this code:
vertical-align:text-bottom;
But the text seems to say about 10 pixels over the bottom. Is it becouse some hidden border or something?
This is my total HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="title">
<strong>ALLOYE</strong>
</div>
</div>
</body>
</html>
And here is the CSS code:
body{
margin: 0; padding: 0;
color: #fff;
font-family: "Segoe UI",Arial,Sans-Serif;
}
.nav{
position: absolute;
width: 100%;
height: 7%;
background: -webkit-linear-gradient(#FFB441, #FF9A00);
background: -o-linear-gradient(#FFB441, #FF9A00);
background: -moz-linear-gradient(#FFB441, #FF9A00);
background: linear-gradient(#FFB441, #FF9A00);
}
.title{
position: relative;
vertical-align:text-bottom;
font-size: 65px;
}
If you temporarily set a border on both classes, you will see what is happening.
Once you see that, try putting the 7% height onto the .title instead.
Then do the following to see what happens:
change the height of your browser window to very short heights.
look in different browsers (IE, Chrome, Firefox etc)
look at it on your phone
Press F12 when in your browser and experiment
Good luck.
It is likely that the .nav height (7%) is causing the overlap. If you set this to px instead of a % you should be able to force the 'ALLOYE' below the bar.
Something like the below:
.nav
{
position: absolute;
width: 100%;
height: 15px;
background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
You want something like:
.nav{
position: relative;
width: 100%;
height: 80px;
background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
.title{
position: absolute;
font-size: 65px; /* This large a font has significant whitespace at the bottom */
bottom: -15px; /* Compensate for font whitespace. Tweak to fit your font /*
}
But other than that, as Ruskin suggests in his answer, you probably want to set a fixed height on your navigation.
Remove the height: 7%; from .nav and add it to .title:
(Updated CSS):
body{
margin: 0; padding: 0;
color: #fff;
font-family: "Segoe UI",Arial,Sans-Serif;
}
.nav{
position: absolute;
width: 100%;
background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
.title{
position: relative;
vertical-align:text-bottom;
font-size: 65px;
height: 7%;
}
Fiddle:
http://jsfiddle.net/Wae6n/3/
Use the bottom CSS property on the element containing the absolute positioning property (in this case, it's .nav). Set the bottom property's attribute to 0%. Your css should look something like this :
.nav{position: absolute;bottom:0px;}
First off, I think you need a reset, as I am not seeing the space in my jsfiddle with no changes to your code (http://jsfiddle.net/R6dTU/).
Then I'd actually follow a different approach here. I'd absolutely position the title so that it is
.title{
position: absolute;
bottom: 0;
}
I'd also recommend not using percentage heights without a min-height, unless you don't mind your text being cropped off screen.
Also, keep in mind that vertical-align: text-bottom; aligns the text to the bottom of the descenders (e.g., the tails on lower case p's and q's), so you will not quite get the effect you're looking for with this. Position absolute is more reliable.
Per #ANeves's comment, The reset is not the 'best practice' solution here, but it may be a quick fix. The proper solution would be to
Use a proper tag for your header text. divs should only be for elements that cannot be otherwise classified. I'd suggest a h1 tag here
Set margins and padding on this tag, and set a line-height, otherwise it may change between browsers (this is what the reset is a quick fix for)
I'm using this following code:
body {
margin-bottom: 40px;
margin-right: 30px;
margin-left: 30px;
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
Everything is good from the top and sideways but the page doesn't reach to the bottom. How can I get it to reach all the way to the bottom?
Add height: 100%;
http://jsfiddle.net/uTG2R/
EDIT:
It appeared that it wasn't only the html and body that needed to have their height set, but the table within was the actual culprit. By defining the height of the html and body tags we could then set the defined height of the table tag.
Try this in CSS
body {
margin-bottom: 40px;
margin-right: 30px;
margin-left: 30px;
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
background-color: gray;
height: 100%;
}
html, table
{
height:100%;
}
Please correct your code at <body style=""> remove style="". it should be <body>
Make body have 100% of the browser height
Body looks to its parent (HTML) for how to scale the dynamic property,
so HTML needs to be set too.
Add height: 100%; to your css. This should do what you require.
By the provided link 84.229.230.105:8080/NiceTry2/MyServlet, what you need is additionally to the body height, set also the height to 100% on the HTML tag.
CSS
html {
height: 100%;
}
EDITED:
Just builded a Fiddle with a more accurate sample to solve the problem you are having without causing another one:
The Fiddle here!
Since the solution of 100% to stretch the body all the way down does solve the issue, the margin at the top and bottom of the body tag causes a certain overflow of the body tag, since 100% + 40px + 40px is always bigger than 100% :)
The Fiddle suggests that the HTML and BODY tags have 100% x 100% of the view port size, and using one absolutely positioned div to wrap the entirely page content. The mentioned wrapper gets the required margins.
Strangly enough, my website is rendering fine in Internet Explorer but fails in Mozilla based browsers.
Here is a screenshot:
Does anyone see why "right-panel" does not go all the way to the right? You can see how it is not lined up with the right edge of "top-panel":
#container
{
margin: 0 auto;
width: 750px;
background-color: #ffffff;
}
#top-panel
{
padding-left: 10px;
background-color: #000000;
text-align: left;
width: 100%;
height: 88px;
}
#left-panel
{
padding-top: 10px;
text-align: center;
background-color: #ffffff;
border-right: 1px dashed #000000;
float: left;
width: 250px;
}
#right-panel
{
background-color: #ffffff;
float: right;
width: 449px;
}
.clear
{
clear:both;
line-height:0;
}
If anyone wants to see the actual site it is: Math Relay
When you apply width:100% and use padding-left:10px also, it computes the width first, and then applies the padding, so actually your #top_panel CSS declaration is the problem. Try setting it to a fixed width for that.
it is the padding-left:10px; in the #top-panel
Set that to 0 and you'll see them line up.
Try using FireBug, that's how i found the issue.
The Padding-Left:10px is causing an extra 10 pixels to appear on the right hand side.
Along the lines of the other answers, but hopefully explaining what's happening behind the scenes, too:
The width: 100% on #top-panel refers to the width of the div's content area, excluding borders, padding and margin. Thus, when you specify both width: 100% and padding-left: 10px the width of #top-panel including padding is actually 10px + 750px (the padding plus 100% of the width of #container.)
The best solution in my opinion is to remove width: 100% from #top-panel. This will make the div take up the entire width of the parent element withut overflowing the #container.
The page looks ok in Internet Explorer since IE incorrectly includes padding and border when calculating the width of the div if the page is rendered in quirks mode. More details about this bug can be found here.
It's your #top-panel that's 10px bigger that your #container because of your padding-left: 10px;
Just add 10px to your #container and it will be good.
Remove the width: 100% from #top-panel.