I'm trying to do a static HTML & CSS webpage using flexbox but my conten doesn't fit into the window in Chrome browser. I can scroll horizontally, so I have more space horizontally than the browser window size.
This is an screenshot showing the problem. The margins are the same in the two sides of the wrapper, but the content is not fitted to 100% width of the browser window, so I can scroll horizontally, which is not what I want.
I've tried the same code in Safari and works perfectly. Is this an issue with flexbox in Chrome or what am I missing? Thanks.
This is my HTML:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS Stylesheets-->
<link rel="stylesheet" href="css/vendor/normalize.css">
<link rel="stylesheet" href="css/vendor/font-awesome.css">
<link rel="stylesheet" href="css/vendor/devicons.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- Header -->
<header>
<nav>
<ul>
<li>ELEMENT 1</li>
<li>ELEMENT 2</li>
<li>ELEMENT 3</li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main>
<div class="main-wrapper">
<div class="search-bar">
<form>
<input type="text" placeholder="Search">
</form>
</div>
</div>
</main>
</body>
And this is my SCSS:
/* 2. HEADER */
nav {
width: 100%;
text-align: center;
background-color: $dark-grey;
& ul {
max-width: $width;
margin: auto;
display: flex;
}
& li {
flex: 1 1 0;
}
& a {
display: block;
color: $white-alpha;
padding: 30px 0px;
transition: color 0.3s ease;
}
& a:hover {
color: $white;
transition: color 0.3s ease;
}
& a.active {
color: $white;
}
}
/* 3. MAIN*/
main {
background-color: $light-grey;
padding: 30px 0px;
}
.main-wrapper {
max-width: $width;
margin: auto;
}
/* 3.1. SEARCH BAR */
.search-bar {
padding-bottom: 20px;
& input {
height: 45px;
width: 100%;
border-bottom: 1px solid $medium-grey;
border-radius: 2px;
text-indent: 20px;
}
}
As far as I can tell, your margins and box-model are likely the problem + you are using the & improperly.
You may also want to look into the default page margin and setting the box-model to border-box site wide.
https://www.paulirish.com/2012/box-sizing-border-box-ftw/
For questions like these, make a CodePen or jsFiddle etc, with only the bare bones of what is needed to recreate the situation you are having trouble with. http://codepen.io/sheriffderek/pen/e76eb24c23c789accffe6a18fcfdd8c0 - even my example has more style than needed...
One more suggestion - if you are new to flex-box, it really helped me to write out the individual properties like flex-grow flex-shrink flex-basis instead of the short-hand + always explicitly set the flex-direction or any other defaults.
html { // sort out box-model
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body { // reset body margin default
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
html {
background: lightblue;
}
header, main {
padding: 1rem;
}
header {
background: white;
}
nav {
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
#media (min-width: 500px) {
flex-direction: row;
}
}
li {
flex: 1 1 0;
}
a {
display: block;
padding: 1rem;
&:hover {
background: black;
color: white;
}
&.actiive {
color: red;
}
}
}
main {
background: gray;
}
.main-wrapper {
max-width: 960px;
margin: auto;
}
.search-bar {
//
input {
height: 45px;
width: 100%;
text-indent: 20px;
background: black;
color: white;
border: 1px solid black;
}
}
Related
Im trying to align the ul lis under an input box and send the span element to the right of the input box
I read other threads and how to send the span to the left with justify-content: space-between; but that doesn't want to work too. Also tried to add margin to the list to push the text around but it doesn't feel right not to mention that I still cant figure out how to stick the delete span to the right. Here is my jsfiddle https://jsfiddle.net/h0w6yp1x/
.list { justify-content: space-between;}
.list li { justify-content: space-between;}
Define a wrapper div between li tags. And make it flexbox, then justify content of this wrapper div.
Like this:
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
Working code is below:
const DOM = {
input: document.querySelector('.user-input'),
list: document.querySelector('.list'),
btnAdd: document.querySelector('.btn-add'),
btnDelete: document.querySelector('.btn-remove')
}
let addItem = function() {
if (DOM.input.value === '') {
return;
} else {
const html = `<li> <div class="li-wrapper">${DOM.input.value} <span class="btn-remove">delete</span></div> </li>`;
DOM.list.insertAdjacentHTML('beforeend', html);
DOM.input.value = '';
}
};
let removeItem = function(element) {
element.parentNode.parentNode.removeChild(element.parentNode);
}
DOM.btnAdd.addEventListener('click', function() {
addItem();
});
DOM.list.addEventListener('click', function(e) {
let element = e.target;
if (e.target && e.target.matches("span.btn-remove")) {
removeItem(element);
}
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
height: 100%;
background: #d53369;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom right, #cbad6d, #d53369);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom right, #cbad6d, #d53369);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-repeat: no-repeat;
background-attachment: fixed;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 100px auto;
width: 360px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)
}
.container h1 {
text-align: center;
}
.user-inerface {
display: flex;
justify-content: center;
align-items: center;
}
.user-input {
border: none;
padding: 5px;
}
.btn-add {
border: none;
padding: 5px;
}
.list {
border: 2px solid black;
width: 100%;
text-decoration: none;
list-style: none;
display: flex;
flex-direction: column;
line-height: 20px;
color: #9400D3;
}
.li-wrapper {
display: flex;
justify-content: space-between;
}
.list li:nth-child(2n+2) {
opacity: 0.8;
}
.list li:hover {
opacity: 0.7;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Todos</h1>
<div class="user-interface">
<input type="text" class="user-input" placeholder="New todo">
<button class="btn-add">Add</button>
</div>
<ul class="list">
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
<li>
<div class="li-wrapper"> Random Text1 <span class="btn-remove">delete</span></div>
</li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>
If you set the .list li selector to have display: flex then that appears to cause the items in the list box to show the text on one side and the delete on the other.
I got a little problem with my recent attempt to learn about HTML and CSS.
Here is the ting: I got myself a HTML page which shows ~100 divs representing a list on the left side. However I want the parent div to contain a scrollbar but its length to be limited by the viewport.
The problem is, when I open the page, the whole body is streched to fit the full list which is not, what I want. Below is a pic with some sample data to show you because my english is not the best. The elements for the "sidebar" get generated by JavaScript and are just divs with text inside (I don`t know, if paragraphs would be better)
Snapshot from browser window
As you can see, the scrollbar is on the right border and when I scroll the whole body is scrolled. I would rather like to have a scrollbar within the "list" and just scroll this without moving the viewport around.
Here is my CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
display: flex;
flex-direction: column;
margin: 0;
}
/*--------------------
* Header
*------------------*/
header {
display: flex;
align-items: center;
height: 60px;
background-color: #4d4d4d;
}
header h1{
flex: 1;
color: white;
font-size: 24px;
font-family: Tahoma;
}
header ul {
display: flex;
flex: 1;
list-style-type: none;
height: 100%;
margin: 0;
}
header li {
flex: 1;
color: white;
text-align: center;
font-family: Tahoma;
font-size: 20px;
padding-top: 30%;
}
header li:hover {
background-color: #333333;
}
header img {
background-color: none;
height: 20px;
width: 20px;
}
/*--------------------
* Main area
*------------------*/
main {
flex: 1;
display: flex;
margin: 1%;
}
/*--------------------
* Sidebar
*------------------*/
#sidebar {
display: flex;
flex: 1;
overflow: auto;
}
#sidebar div {
flex: 1;
text-align: center;
}
#sidebar .th{
text-transform: capitalize;
}
/*--------------------
* Details
*------------------*/
#details {
flex: 4;
margin-left: inherit;
}
And here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<ul>
<li id="btnPerson">Persons</li>
<li id="btnCompany">Companies</li>
<li id="btnSave">Save</li>
<li id="btnLoad">Load</li>
<li id="inpChoose">Choose file</li>
<li id="btnSearch"></li>
</ul>
</header>
<main>
<div id="sidebar"></div>
<div id="details"></div>
</main>
<script src="src/main.js"></script>
<script src="src/ui.js"></script>
<script src="src/init.js"></script>
</body>
</html>
Here is some code to reproduce my problem:
var sidebar = document.getElementById("sidebar");
var table = document.createElement("div");
table.className = "table";
sidebar.appendChild(table);
for (var i = 0; i < 50; i++) {
var e = document.createElement("div");
e.innerHTML = "blabla";
table.appendChild(e);
}
I hope some smart people can help me with this
Cheers
Mirodin
You should wrap your div id="details" inside another div work as a wrapper and use this css:
.wrapper{
overflow:scroll;
height:100px;}
Why not use table?
I have the following HTML5 code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
max-width: 960px;
margin: 0 auto;
font-size: 120%;
}
header, nav {
margin: 0;
padding: 0;
border: 1px solid black;
}
header {
border-color: red;
}
img.mainpicture {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<img class="mainpicture" src="http://s29.postimg.org/ajjbb0n07/apic.jpg" alt="A picture"/></header><nav>Navigation area.</nav>
</body>
</html>
Can someone please explain why there is about 5 pixels of empty space between the <header> and the <nav> content, and how can I remove it?
By adding
header {
padding-bottom: 1px;
}
to the CSS file, the height of the white space is extended by one pixel, so it doesn't seem to have anything to do with the padding of <header>.
EDIT: I would like to do it without using <nav style="position: relative; top:-7px;">.
Set display block on the image for fixing fitting issues.
body {
max-width: 960px;
margin: 0 auto;
font-size: 120%;
}
header,
nav {
margin: 0;
padding: 0;
border: 1px solid black;
}
img.mainpicture {
width: 100%;
display: block;
}
<header>
<img class="mainpicture" src="//lorempicsum.com/futurama/960/200/2" alt="A picture" />
</header>
<nav>
Navigation area.
</nav>
Just add
img.mainpicture{
.....................
.....................
vertical-align: top;
}
That will fix the issue:)
It could be because of the inner elements having a margin, that is protruding outside! And also since you have an <img />, give a display: block; to it. Try overflow: hidden; for both header, nav:
header, nav {
overflow: hidden;
}
header img {
display: block;
}
Set the property margin-bottom equal to zero.
margin-bottom: 0;
How do I hide scroll bars? The scroll bar appears even if the content is empty, but I don't want that.
Here is my HTML Code :
<html>
<head>
{# ... #}
{% block stylesheets %}
<link href="{{ asset('bundles/gestionconferenceapplication/css/style.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
</head>
<body>
<div id="body_wrapper">
<div id="container">
<!-- Start of Page Header -->
<div id="page_header">
<h1><span>Photos Site</span></h1>
</div>
<!-- End of Page Header -->
<!-- Start of Navigational Menu -->
<div id="nav_menu">
<ul>
<li id="menu1"><a href="{{ path('_acceuil', {'name': 'khalil comme toujours'}) }}" ><span>Acceuil</span></a></li>
<li id="menu2"><span>About Me</span></li>
<li id="menu3"><a href="{{ path('_creerConference') }}" ><span>Nouvelle Conference</span></a></li>
<li id="menu4"><span>Portfolio</span></li>
<li id="menu5"><span>Contacts</span></li>
<li id="menu6"><span>Links</span></li>
</ul>
<div class="clearthis"> </div>
</div>
<!-- End of Mavigational Menu -->
<div class="clearthis"> </div>
<!-- Start of Welcome to my Site -->
<div id="welcome">
<div class="content_header">
<h2><span>Welcome to my Site</span></h2>
</div>
<div class="content">
{% block content %}
{% endblock %}
</div>
<div class="clearthis"> </div>
</div>
<!-- End of Welcome to my Site -->
</div>
</div>
<!-- Start of Page Footer -->
<div id="page_footer">
Web design by Free Website Templates
</div>
<!-- End of Page Footer -->
</body>
</html>
And here is the CSS file :
* {
margin: 0px;
padding: 0px;
}
body {
padding: 80px 0px 0px;
background: url('../images/background_top.gif') #c4b8a1 repeat-x;
color: #695d47;
font-family: verdana, arial, sans-serif;
font-size: 12px;
text-align: center;
}
a {
color: #695d47;
background-color: inherit;
text-decoration: underline;
}
a:hover {
color: #ab9c7e;
background-color: inherit;
}
span {
display: none;
}
img {
border: none;
}
ul {
list-style-type: none;
}
li {
list-style-type: none;
}
p {
margin: 0px 0px 15px;
text-align: justify;
line-height: 15px;
}
.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
visibility: hidden;
}
#body_wrapper {
padding: 5px 0px 10px;
width: 100%;
background-color: #fff;
color: inherit;
position : relative;
min-height: 100%;
}
#container {
margin: 0px auto;
width: 758px;
text-align: right;
padding-bottom: 20px;
position : relative;
min-height: 100%;
}
#container .content_header {
margin: 20px 0px 0px auto;
width: 730px;
height: 40px;
background: url('../images/content_header_bg.gif') repeat-x 0% 0%;
}
#container .content {
margin: 3px 150px 0px 28px;
width: 580px;
text-align: left;
}
/* Page Header */
#page_header {
background: url('../images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #6a604e;
float: left;
}
#page_header h1 {
width: 280px;
height: 125px;
overflow: hidden;
background: url('../images/website_title.gif') no-repeat 50% 50%;
}
/* Navigational Menu */
#nav_menu {
margin-left: 9px;
padding-left: 19px;
float: right;
background: url('../images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #b3a386;
text-align: center;
font-family: tahoma, arial, sans-serif;
}
#nav_menu a {
color: #b3a386;
background: inherit;
}
#mav_menu a:hover {
color: #857860;
background: inherit;
}
#nav_menu ul {
width: 450px;
height: 125px;
overflow: hidden;
}
#nav_menu li {
float: left;
border-width: 0px 1px 1px 0px;
border-color: #c1b7a5;
border-style: solid;
font-size: 20px;
}
#nav_menu li#menu3, #nav_menu li#menu6 {
border-right: none;
}
#nav_menu li a {
display: block;
width: 149px;
height: 62px;
text-decoration: none;
}
#nav_menu li a:hover {
color: #857860;
background-color: #f4eee2
}
#nav_menu li a span {
padding-top: 17px;
display: block;
}
/* Welcome to my Site */
#welcome .content_header h2 {
height: 28px;
background: url('../images/welcome_header.gif') no-repeat 0% 0%;
}
#welcome p {
width: 420px;
float: right;
}
/* Page Footer */
#page_footer {
padding: 9px 10px 6px;
font-weight: bold;
float: none;
clear: both;
height:40px;
}
#page_footer a:hover {
background-color: inherit;
color: #4f4635;
}
What I want to achieve is that when I don't have enough content then, the scroll bars should hide and the footer of the page remains visible (in the bottom of the page(i.e browser bottom)) without moving scroll bar.
I tested several styles like : position absolute and position:relative in #page_footer and #body_wrapper but Its not working.
I added a DOCTYPE and the problem is solved
but another problem appeared :
the footer fill a large place :
even if I fixed the width, (width:40px)
do you have any idea
Auto Hiding Scroll bars
Concept:-
You can use CSS overflow property to hide the scroll bars. If you apply overflow:hidden on any component of the webpage or on the whole page, the scroll bars will become permanently hidden.
Check this example where scroll bars are visible in a text area.http://jsfiddle.net/qtAqq/1/
Now to hide these scroll bars we will apply overflow:hidden this text area. As you can see the Text is more than the text area but scroll bars are hidden.http://jsfiddle.net/hnyVc/1/.
But We don't want to do that as scroll bars are useful when site has content more than the screen size. So we will use overflow:auto. See this example http://jsfiddle.net/EZr89/
Solution for your Problem:-
As you can see using overflow:auto hides the scroll bars when page has less content and makes scroll bars visible when page has more content than display size. So just add the following code to your page css styles you can auto hide the scroll bars when page has less content:
html
{
overflow:auto;
}
Fixing Footer at the Browser Bottom
You can use postion:fixed; and bottom:0px; on you page footer to fix it at browser bottom. Add this code to your page css styles:-
#page_footer {
padding: 9px 10px 6px;
font-weight: bold;
float: none;
clear: both;
width:100%;
height:40px;
background: url('../images/background_top.gif') #c4b8a1 repeat-x;
/*Add this Code to fix the footer at browser bottom*/
position:fixed;
bottom:0px;
}
Other Issues/Problems in your code
1)Add to your page html at top of all the code.
2)You have coloured the whole body with the darker colour which makes the footer looking big. It can be solved by setting the body color to white and adding a header div with darker color after the container div.
3)You have set a limited width for container div which makes the header look smaller at the center of the page. It could be fixed by giving container div 100% width and placing an inner container div with the limited width to be aligned in center of the page.
Check the code with these problems fixed here:-
find main html and css styles in the zip file here: http://www.keepandshare.com/doc/5182191/yoursite-zip-2k?da=y
Let me know if it helps
add this style to your body
body{
margin:0px;
padding:0px;
overflow:hidden;
}
I'm working on a brand new website and I'm trying to just get the basic layout going. I am using the ASP.NET MVC 4 generated HTML and I would like to get the DIV named body to fill the available space after making room for the header and thus anchoring the footer to the bottom of the browser window. However, what I'm getting right now is three panels just stacked on top of each other.
I would like a solution that would work if the browser supported HTML5 and one if it didn't
Please note I've inlined comments in the CSS to try and explain what I've tried.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("Title", "Index", "Home")</p>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - ACME. All rights reserved.</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>
#RenderSection("scripts", required: false)
</body>
</html>
CSS
body {
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF THE BODY ITSELF WOULD SPAN */
/* WITH NO OTHER CSS APPLIED TO THE body ELEMENT */
/*height: fill-available;*/
/*height: 100%*/
}
/* general layout
----------------------------------------------------------*/
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
#body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF I COULD GET THIS ELEMENT TO SPAN */
/* WITHOUT ANY OTHER CSS APPLIED TO THE body TAG */
/*height: fill-available;*/
/*height: 100%*/
}
.main-content {
/*background: url("../Images/accent.png") no-repeat;*/
padding-left: 10px;
padding-top: 30px;
}
.featured + .main-content {
/*background: url("../Images/heroAccent.png") no-repeat;*/
}
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 20px 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
/* social
----------------------------------------------------------*/
ul#social li {
display: inline;
list-style: none;
}
ul#social li a {
color: #999;
text-decoration: none;
}
a.facebook, a.twitter {
display: block;
float: left;
height: 24px;
padding-left: 17px;
text-indent: -9999px;
width: 16px;
}
a.facebook {
background: url("../Images/facebook.png") no-repeat;
}
a.twitter {
background: url("../Images/twitter.png") no-repeat;
}
Just snap the header and footer at the bottom of the page using fixed positioning.
header, footer{ position:fixed; left:0; right:0; z-index:1; }
header{ top:0; }
footer{ bottom:0; }
Then you can give your body the background your div#body had before. The div gets no background and will expand as much as needed.
div#body{ background:none; }
body{ background:#eee; }
This will look like the div would fill the remaining space of the page. Finally give your header and footer a background so that you can't see the background of the body under it.
header, footer{ background:#fff; }
By the way I would suggest removing body margins. body{ margin:0; }
I believe it's a bit impossible to do that with just CSS. You can make a webpage with 100% height like this:
html{
height: 100%;
}
body{
height: 100%;
}
#body{
height: 100%;
}
And then for header, body and footer you can do like this:
header{
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color: #f00;
}
#body{
bottom: 100px;
left: 0;
position: absolute;
right: 0;
top: 100px;
background-color: #fff;
}
footer{
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
background-color: #ff0;
}
It might work for a bit, but it'll break at some point. When you resize your browser, it'll be running out of room for your #body. If you want a better solution, you should use javascript. In your javascript, calculate how much space you have for your #body, then either adjust the height of header and footer. Or adjust the #body instead.