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;
}
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;
}
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've come here before with great results and appreciate the help. I've been searching and searching through my code to figure out what is going on and I can't quite get it. At my site http://www.hirelogo.com underneath the navigation there is a random space insert. I've removed div ".top" as I thought maybe that was causing the issue, but this is not to my knowledge. I've been dissecting with firebug, but find no overlap issues that may cause this. The area of random space I'm referring to is below the navigation "home,design team..ect" and the "step1, step 2 graphic" . I hope someone give me a little nudge to whats going on here.
Thanks
The following div is causing a space of 8px.
.top {
clear: both;
height: 8px;
margin-left: auto;
margin-right: auto;
width: 920px;
}
The image to the left has padding and line-height added to it as well:
.descrSplash {
clear: both;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
line-height: 150%;
padding-top: 40px;
width: 436px;
}
Finally the right image has 10px added above and below it. Also the image is large and can be cropped to raise it up unless you want to set a negative margin.
I am trying to write a CSS in which when the user writes text and it overflows instead of having a scrollbar or hiding, it just goes down like in a normal Word Document or so. I have this code:
#content-text {
width: 960px;
padding-left: 10px;
padding-right:10px;
text-align: left;
color:#000;
height:100%;
margin-left: 25px;
margin-right:25px;
}
The odd thing, is that while this code actually does what I want in IE in Firefox it overflows and becomes a scrollbar. I've tried overflow:auto; overflow:hidden; and overflow:inherit; just to see if any helped but no luck so far, and I honestly have no idea of why is this happening in Firefox, =/ would any of you know?
Update:
I tried with overflow:visible; but I just get the overflow...well visible but still it doesn't wraps. and ONLY in Firefox so far. =/
Update:
The only other thing that could be affecting is that I have another CSS code and the first is contained:
#content-title{
background-color: transparent;
background-image: url(../img/content-title-body.png);
background-repeat: repeat-y;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
height:auto;
position:absolute;
z-index :100; /* ensure the content-title is on top of navigation area */
width:1026px;/*1050px*/
margin: 160px 100px 5px 100px;
overflow: visible;
top: 55px;
}
and the HTML that uses this is:
<div id="content-title">
<div id="content-text"> Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!
</div>
</div>
So your css is probably fine. For example on my page I have css is like this:
textarea.input_field2 {
margin: 10px 10px 10px 0px;
width: 440px;
height: 150px;
background:#696969;
color: white;
border: none;
font-size: 14px;
text-align: left;
vertical-align: middle;
}
Then in the body I call it up like this:
<textarea rows="9" cols="9" class="input_field2" name="user_comments"></textarea>
It works fine.
But make sure when you test it you test it with something like Lorem Ipsum, words with spaces and not one long string like 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' cause that will force a scroll bar probably. Also check your html and css for validation.
Try: overflow: visible.
There must be more to the story than you are showing here. I used the CSS provided and I am seeing the same behavior in both Internet Explorer and Firefox. The page is rendered 960 pixels wide and when the browser width is less than this, a horizontal scroll bar is rendered.
If you specify a width on an element, the browser is not going to render it less than this value. If you remove the width declaration from your example, the element will only render as wide as it needs to.
If this is not the answer you are looking for, please provide more code to give us the whole picture.
Add word-wrap: break-word; to your #content-text