html - set the horizontal scrollbar when browser is shrink - html

I'm trying to get that my web page appears a horizontal scrollbar when the user shrink his/her browser, but instead everything is getting shrink, but that's not the way I would like, I have try it a lot of things (such as overflow-y etc.) here is my website (try to resize it):
http://prepaestatal9.site11.com/news.php
here is the html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="shortcut icon" href="images/favicon.ico">
<link href="styleregistration.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<body>
<div id="mainBlank">
<h1 style="text-align: center;">Noticias</h1>
<div id="refresh"><table style="width:50%;"><tr><td colspan='2' style='background-color:#f96267;'>no se</td></tr><tr><td style='background-color:#bde0e4;'>no importa</td> <td style='background-color:#bde0e4;'>2014-01-02 19:22:38</td></tr><tr><td colspan='2' style='background-color:#885878; text-align:center;'>nueva noticia<br />
no hay clase</td></tr><tr style='height:40px; border-left:none;'></tr><tr><td colspan='2' style='background-color:#f96267;'>yoooo</td></tr><tr><td style='background-color:#bde0e4;'>dssd</td> <td style='background-color:#bde0e4;'>2014-01-02 19:16:39</td></tr><tr><td colspan='2' style='background-color:#885878; text-align:center;'>ds<br />
ds</td></tr><tr style='height:40px; border-left:none;'></tr><tr><td colspan='2' style='background-color:#f96267;'>hih</td></tr><tr><td style='background-color:#bde0e4;'>bhj</td> <td style='background-color:#bde0e4;'>2014-01-02 19:16:12</td></tr><tr><td colspan='2' style='background-color:#885878; text-align:center;'>ft<br />
yf<br />
yt</td></tr><tr style='height:40px; border-left:none;'></tr></table></div>
</div>
</body>
</html>
a simple table inside a div called mainBlank inside the body
and here is the css codestyleregistration.css
#font-face
{
font-family: yano;
src: url(fonts/yano.woff);
}
body {
width: 100%;
font-family:yano;
background-image: url(images/dirtyred.png);
background-repeat:repeat;
position:relative;
margin: 0;
}
#mainBlank{
border-radius:5px;
background-image: url(images/word.png);
-moz-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;
margin-left: 10%;
margin-right: 20%;
margin-top: 15%;
/*margin-bottom: 1%;*/
height: 30%;
color: black;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1%;
padding-right: 1%;
}
and thanks for the help.

You are doing everything in percentages of the browser size. Your margins left, right, etc and even your height.
It looks alright, but everything is simply going to be a percentage of the browser width. So, when you resize it, everything else will resize as well. No one can really give you specific code, because you are the designer of your website. Try giving your #mainBlank
width:700px;
margin:auto;
and removing all of the margin and padding values. Adjust from there.

I would suggest trying the solution #Adonis K has provided.
overflow-y: scroll
forces a vertical scroll bar.
That being the the case I would assume that
overflow-x: visible
could work for horizontal although I have not used this (I believe in no Horizontal scroll bars due to aesthetics)
If that doesn't work try
overflow-x: scroll
or alternatively
html {
overflow-x: scroll;
}
or
html {
overflow-x: visible;
}

You should use overflow-x for that:
#mainBlank {
overflow-x: visible;
}
"The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element."
Documentation | Demo
Another solution is to use a static width like #smts mentions but instead of just a static value you could use something like this:
#mainBlank {
width: 700px;
margin: auto;
max-width: 100%;
}
This way, if the width of the element is larger than the width of the screen, then it will shrink down to the screen's maximum width.

Related

HTML Text in Button not working / overlapping

I have buttons inside a nav and the content of the buttons are overlapping, I wans't able to figure out what was causing it.
How can I prevent overlapping of the button contents?
body,html
{
padding: 0;
margin: 0;
}
nav
{
background-color: #e05138;
height: 82px;
width: 100%
}
button
{
display: inline-block;
text-align: center;
background-color: white;
text-decoration: none;
border: none;
border-radius: 20px;
padding: 30px;
margin: 5px;
float: right;
width: 100px;
line-height: 5px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<button type="button" name="Contact">Contact</button>
<button type="button" name="About Me">About Me</button>
</nav>
</body>
</html>
You want to make sure you keep your line height >= your text size.
You have the line-height at 5px and the text size is going to be using the browser default which is ~14-16px.
Try setting your line height to 1.
button{
line-height: 1;
}
Explain to me why.... if the line height is not the issue, simply changing the line height to 1 exactly how I said fixes the issue of the text laying on top of each other, which is verbatum the question.
https://jsfiddle.net/rifi2k/nh9w80j6/
The proof is in the fiddle...
Although there is little reason to set a fixed height or width on the button, there may be a requirement to have a fixed width or height on your button, and setting a line height of 5px when you don't have an equal text height is not going to do you any favors down the road when those two words do end up stacking on top of each other, which is the case with a fixed width on that button.
So pretty much in my opinion the lesson to be learned from this example is not don't fix the width or height, its don't set a 5px line height when your text height is 16px... Anyone else care to disagree...
OVERLAPPING, not WRAPPING. overlapping is a line-height issue, wrapping is a fixed width issue
you need to define the height of your buttons with "height" instead of "margin"
you can see the fixed code here:
https://codepen.io/parisotdev/pen/qLoPbg
button {
display: inline-block;
text-align: center;
background-color: white;
text-decoration: none;
border: none;
border-radius: 20px;
height: 60px; /*this was margin: 30px*/
margin: 5px;
float: right;
The reason that the button content is overlapping is because you are using a fixed width of 100px. Since there's not enough of space for the contents, naturally it's forced to push the rest of the content to a new line.
What you can do here is to not use a fixed width and let the buttons decide for their own width.
body,html
{
padding: 0;
margin: 0;
}
nav
{
background-color: #e05138;
height: 82px;
width: 100%
}
button
{
display: inline-block;
text-align: center;
background-color: white;
text-decoration: none;
border: none;
border-radius: 20px;
padding: 30px;
margin: 5px;
float: right;
/* width: 100px; */ /* COMMENTED THIS OUT */
line-height: 5px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<button type="button" name="Contact">Contact</button>
<button type="button" name="About Me">About Me As much text as needed</button>
</nav>
</body>
</html>

How to make a div full width

I'm using a theme where it's content is set to 1200px. The problem is I want to create a DIV that is full width to the screen's edge and then offset the margin-left to offset the difference. (I'm guessing this is the easiest way)
How do I calculate the width of the column between the side of the screen to the left side of the 1200px grid? And then calculate that difference into the width of the DIV I'm trying to create so that the DIV is full width, regardless of what screen size it's being viewed on?
I'm aware I can do this with fancy editors like Visual Composer, but they are too clunky and make the site slower..
the following seems to work for text, but I can't get an image to stretch across the screen full width unless I make it larger and overlap the screen size. I need it to touch from screen side to screen side
.blue_section {
width: 200% !important;
margin: 0px -50% 0px -50% !important;
padding: 0px 0px 0px 0px !important;
background-color: #0088CC;
}
.blue_content {
width: 1200px !important;
height: 100% !important;
margin: 0px auto 0px auto !important;
padding: 10px !important;
}
If you want to make a div to the full width of the screen, then simply use this code:
div {
/* I added this just for fun */
background-color: skyblue;
color: white;
font-family: Century Gothic;
padding: 5px;
text-align: center;
/* The code that you need to copy */
position: absolute;
left: 0px;
right: 0px;
top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>Hello World!</div>
</body>
</html>
Here is an example right from w3schools:
https://www.w3schools.com/cssref/func_calc.asp
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>
<div id="div1">Some text...</div>
Do you mean something like this?
<div style="width:1200px;right:0px; top:100px; height:200px;background-color:lightgray;">Hello</div>
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
About calculating the width of the column: If it's not an issue, this is easily resolvable using Javascript.
var col = document.findElementById("id-of-your-column-div");
var screenFill = document.findViewById("screen-filler");
screenFill.style.marginLeft = col.clientWidth;
You can do:
<style>
.mydiv{
width:1150px;
margin: auto 0;
}
</style>
the width:1150px it for using 25px the margin on each side left and right
Just add css to your div and add following code -
div {
height: 100px;
background-color: blue;
margin -8px;
}
This should probably work.
You need to add negative margin because browsers usually tends to add some margins to the contents of its webpages.

Div to fit page and expand/scroll

I have a page which I set a div where all the content will be placed. I had the div working as I wanted it, but when I went onto my admin page which displays all the records, I noticed I couldn't scroll down to see the rest.
I managed to fix this so I could scroll downwards if the content when further down the page. However, pages which require to scroll down have a scrollbar on the right side of the div instead of the actual page (far right). I'v used overflow-y:hidden to remove the scrollbar, but I'm then unable to scroll down.
I'm curious to see if anyone has any suggestions in order to remove the scrollbar from the div and only have the standard scrollbar show when needed. This is the current code:
Current
HTML
<html class="no-js" lang="en">
<head>
<title>Home</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/Base.css"/>
</head>
<body>
<div class="wrapper">
<p> Duplicate text to test </p>
</div>
</body>
</html>
CSS
*
{
margin: 0;
padding: 0;
}
html
{
height: 100%;
}
body
{
background-image:url('../images/background.png');
font-family: Arial;
color: #000000;
font-size: 14px;
height: 100%;
}
.wrapper
{
width: 62.5%;
height: 100%;
overflow:auto;
background: #fffac8;
margin: 0 auto;
box-shadow: 0px 0px 10px 0px #000000;
}
If overflow:auto is removed from the div, I can scroll down like any normal page, but then the div is cut to the standard page.
Overflow removed from div (Want it like this but with the div still stretching when needed)
In the .wrapper CSS rule, try using min-height instead of height.
.wrapper
{
width: 62.5%;
min-height: 100%;
overflow:auto;
background: #fffac8;
margin: 0 auto;
box-shadow: 0px 0px 10px 0px #000000;
}
Remove height: 100%; from wrapper div. It is by defult height: auto; By giving them height: 100% you are forcing .wrapper to follow the height of its parent. And as you know if it become overflown then it'll automatically take scroll. So don't keep that, its not necessary. I hope it works in your case.

CSS/HTML: Center text in window without scroll bars

I've looked everywhere to center text in a window and I believe I found the best solution (I believe... I'm up for other suggestions). However, I get these annoying scroll bars on both sides no matter how large or small the window is.
Can you guys take a look at this code/fiddle and let me know why the scroll bars are there and how to remove them?
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Asset', cursive;
font-size: 100px;
text-shadow: 4px 4px 4px #aaa;
width: 100%;
height: 100%;
}
div {
position:absolute;
height:100%;
width:100%;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
}
</style>
</head>
<body>
<div>
<h1>HELLO</h1>
</div>
</body>
</html>
http://jsfiddle.net/rYe7V/
Fiddle: http://jsfiddle.net/rYe7V/1/
Just add to body:
margin: 0;
you can remove the scrollbars like this. http://jsfiddle.net/rYe7V/2/
body
{
overflow: hidden;
}

DIV element does not cover all of its content

I have an issue with the div on my page. It's the only one I have, and it covers the middle of my page. With a few tweaks in CSS, I made it go all the way down.
The problem though, is that the video(which is inside the div element), is sneaking out like so:
Here's the HTML:
<html>
<head>
<link rel="shortcut icon" href="Images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="Style.css" media="screen" />
<title>Arthur</title>
<meta content="text/html" charset="windows-1251">
</head>
<Body background="Images/background2.jpg">
<IMG class="imgborder" src="Images/button.png" align="left" height="50">
<div id="wrapper" style="background-color:black; width:60%; margin-left: auto ; margin-right: auto ;">
<center><img width="60%" src="Images/logo2.png"></center>
<BR><BR>
<center><img class="imgborder" height="300" src="Images/muller.jpg"></center>
<Font size="5" color="crimson" face="Calibri">
<Center><P align="justify">... </P>
<P align="justify">...</P>
<P align="justify">...</P></Font></Center>
<Center><iframe width="640" height="360" src="..." frameborder="5"
allowfullscreen></iframe></Center>
<Font size="5" color="crimson" face="Calibri"><P>Thomas Muller</P></font>
</div>
</body>
</html>
And here's the CSS:
#charset"utf-8";
/* CSS Document*/
/*This section is for links*/
a:link {
font-weight:normal;
color:crimson
}
a:visited {
font-weight:normal;
color:Crimson;
}
a:hover {
font-weight:bold;
color: Royalblue;
font-variant:small-caps;
}
/*This section is for a paragraph section*/
p {
font-style:normal;
font-size:18px;
}
blue {
color:crimson;
}
/*This section is for the image's black border.*/
.imgborder {
border-color: crimson;
border:thick;
border-style:outset;
}
.body {
background-color: #0000FF;
}
html, body {
height:100%;
}
#wrapper {
margin: 0 auto;
width: 990px;
height:100%;
overflow:hidden;
position:relative;
}
#navigation {
margin: 0 auto;
width: 990px;
height: 55px;
background-color: #fff;
}
#bottom Half {
margin: 0 auto;
width: 990px;
height: 100%;
background-color: #4d3c37;
}
div {
/* set div to full width and height */
width: 100%;
height: 100%;
}
p {
margin-left:2cm;
margin-right:2cm;
}
The only solution I can think of is manually tweaking the black frame's height, or perhaps adding a
overflow: hidden;
property to the frame (in your rather difficult-to-understand tag system, I believe it would be <Center>).
Right now, the <iframe> element is overflowing from its parent container (the black box). By specifying a height for this box, you can control the size.
By specifying overflow: hidden, you can hide the box's overflow - thus doing one of two things:
Hiding anything that leaks out of the box, preventing elements that are larger than the box's size to show parts that will seem "unbound" by the container's edges
If the elements are chosen properly with semantic HTML, many elements that are not bound by height and width will automatically size themselves to fit their contents
Another possible solution would be to specify position: relative and/or float: none for both the container and its children, which sometimes solves the problem.
To emphasize again, it's difficult for us to test and debug the code you've given us because it is effectively out of date.
Use inherit for the styles of the video. Like display style attribute can be 'inherit', as well as height and width.