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;
Related
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;
}
}
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 can't seem to get my div to align side by side inside a div, can someone see where the problem is? I am trying to position the divContainer element with a height up to the buttonPanel element and the 2 testDiv elements positioned side by side. I also tried setting the testDiv element with float: left but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<style type="text/css">
* {
font-family: tahoma;
font-size: 8pt;
}
#buttonPanel {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
background-color: buttonface;
}
#buttonPanel hr {
margin: 0;
}
#buttonPanel button {
margin: 10px;
width: 75px;
}
#divContainer {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 45px;
border: 2px solid #FFFF00;
}
.testDiv {
display: inline-block;
width: 50%;
height: 100%;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="divContainer">
<div id="test1" class="testDiv">test1</div>
<div id="test2" class="testDiv">test2</div>
</div>
<div id="buttonPanel">
<hr/>
<button id="btnOK">OK</button>
<button id="btnCancel">Cancel</button>
</div>
</body>
</html>
Let me give you an example:
you have two div left-div say ldiv and right-div say rdiv.These divs are inside main-div say mdiv
ie
<div class = "mdiv">
<div class="ldiv">
</div>
<div class="rdiv">
</div>
</div>
then you css shoul be like this:
#mdiv{}
#ldiv {float:left;}
#rdiv{ float:left;}
Make the following changes to your code: http://jsfiddle.net/ak9Gs/. box-sizing instructs the browser to take padding and borders into account when sizing an element.
CSS:
.testDiv {
width: 50%;
height: 100%;
border: 2px solid blue;
box-sizing: border-box;
}
.testDiv:first-of-type {
float: left;
}
.testDiv:first-of-type {
float: right;
}
You are giving width as 50% and border with 2px that's why your div'a were not placed sise by side. If you remove border you can get your div's as you need.
DEMO
CSS:
.testDiv {
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#ccc;
}
.testDiv:first-child{
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#f0f0f0;
}
I gave color difference instead of border for both test div's.
change the testDiv class to have display of inline then they will be side by side
.testDiv {
display: inline;
width: 50%;
height: 100%;
border: 2px solid blue;
}
Hope this helps.
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.
I'm having trouble with extra padding (4px) between two IMG tags. This occurs in Firefox 7.0.1, Safari 5.1.1, Chrome 11.0.696.68, and Opera 10.53 on a Mac (Snow Leopard).
I have uploaded the example here:
http://husnoo.com/img_extra_space/img_extra_space.html
With a screenshot of what it looks like:
http://husnoo.com/img_extra_space/shot.png
The 4 pixels between the two IMGs shouldn't be there.
Thanks!
Nawal.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Title here</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
toolbar {
background-color: #ddd;
margin: 0px;
padding: 0px;
width: 32px;
height: 32px;
}
#tool1 {
background-color: #0dc;
margin: 0px;
padding: 0px;
width: 32px;
height: 32px;
}
#tool2 {
background-color: #6dc;
margin: 0px;
padding: 0px;
width: 32px;
height: 32px;
}
</style>
</head>
<body>
<div id="toolbar">
<img id="tool1" src="select.png">
<img id="tool2" src="transform_move.png">
</div>
</body>
</html>
Don't break lines between images instead of
<img id="tool1" src="select.png">
<img id="tool2" src="transform_move.png">
do
<img id="tool1" src="select.png"><img id="tool2" src="transform_move.png">
You have to remove the space between the two img tags.
Or you can add display:block; to them and float:left;