I just started to follow some simple video about web site development.
Since I don't want to just go through instructions given, I stumbled upon small issue: why div id="header" is not centered even with option margin: 0 auto, declared in css? Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FLASTER</title>
<!-- <link rel="stylesheet" href="css/styles.css"> -->
<style>
body {
background: black;
margin: 0;
padding: 0;
font-family: "Helvetica", "Arial";
}
#wrapper {
width: 960px;
height: auto;
background: white;
border-left: 5px solid blue;
border-right: 5px solid blue;
overflow: auto;
margin: 0 auto;
padding: 10px;
}
#header {
width: 100%;
height: 100px;
border-bottom: 3px solid red;
border-left: 3px solid blue;
border-right: 3px solid blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div> <!-- End of header -->
<div id="content">
</div> <!-- End of content -->
<div id="footer">
</div> <!-- End of footer -->
</div> <!-- End of wrapper -->
</body>
</html>
Auto margins will centre the box (including the padding and the border) so long as the total width of it is 100% or less. (If it is exactly 100% then centred, left-aligned and right-aligned will look identical.).
The header element is not centred for two reasons:
It doesn't have margin: 0 auto
Even if it did, the box has a content-width of 100% and 6 pixels of borders as well, so it ends up being left aligned with the right-most 6 pixels being pushed out to the right.
If you set width: auto then it will adjust the content width to fill the container (accounting for the borders) which will centre it on the page (since its container is centred).
Set width: 100% in #wrapperor if you want maximum width you can set max-width: 960px; width:100%;
#wrapper {
width:100%
height: auto;
background: white;
border-left: 5px solid blue;
border-right: 5px solid blue;
overflow: auto;
margin: 0 auto;
padding: 10px;
}
or
#wrapper {
max-width: 960px;
width:100%
height: auto;
background: white;
border-left: 5px solid blue;
border-right: 5px solid blue;
overflow: auto;
margin: 0 auto;
padding: 10px;
}
If you want to center a block, you must set it to a width less than 100% and use margin:auto.
If you want to center the content within a block, you use text-align:center.
It has width: 100%, so, what to center? Set a width less than 100% (for ex. 50%), add text-align: center; to its parent (#wrapper ) and see the result.
#wrapper {
text-align: center
}
#header {
width: 50%;
border: 3px solid blue;
margin: 3px auto;
}
Related
I created a div with a border-radius 4% and wanted to add a div inside it. But now the border-radius is getting affected. How can I add the new div without affecting the previous border-radius.
If I add same border radius for the inner div
Without any border-radius
body {
background: #4FA2AD;
}
.upper {
background-color: #035961;
height: 30%;
}
.main {
background-color: antiquewhite;
height: 50vh;
width: 25%;
margin: 25vh auto;
border-radius: 4%;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
}
<body>
<div class="main">
<div class="upper">
</div>
</div>
</body>
Overflow hidden will cut off any content that goes outside of the parents border, including any overlap at the corners.
overflow: hidden;
This is sometimes not a viable solution (Where you require content to overflow or extend the container) however since you have a fixed size, it is valid in this case.
body {
background: #4FA2AD;
}
.upper {
background-color: #035961;
height: 30%;
}
.main {
background-color: antiquewhite;
height: 50vh;
width: 25%;
margin: 25vh auto;
border-radius: 4%;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
overflow: hidden;
}
<body>
<div class="main">
<div class="upper">
</div>
</div>
</body>
I have a basic HTML showing the safe zones used in broadcast. However, when I add text to the divs I have set up, it throws the alignment out of place.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="browserClock.css">
</head>
<body>
<div id="safeAction">Safe Action Area
<div id="safeText">Safe Text Area
</div>
</div>
</body>
</html>
html {
width: 1920px;
height: 1080px;
margin: 0;
padding: 0;
background-color: black;
}
body {
margin: 0;
width: 100%;
height: 100%;
background-position: 0 0;
}
#safeAction {
width: 1786px;
height: 1003px;
margin: 37px 66px 37px 66px;
border: 1px dashed white;
}
#safeText {
width: 1728px;
height: 971px;
margin: 16px 28px 16px 28px;
border: 1px dotted white;
}
Without the text, it lines up as per the EBU standard pixel spacing. With text it does not.
This is happening because the inner div with id safeText is positioned relative to the other contents of the div it is in. To fix this, set the position of safeText to absolute and use top to set the the distance from the top of the inner div to the top of the outer div (in your case 16px) instead of the top-margin. Finally, give the body relative positioning so that it is determined a parent.
JSFiddle
body {
margin: 0;
width: 100%;
height: 100%;
background-position: 0 0;
position: relative;
}
#safeAction {
width: 1786px;
height: 1003px;
margin: 37px 66px 37px 66px;
border: 1px dashed white;
}
#safeText {
width: 1728px;
height: 971px;
margin: 0px 28px 16px 28px;
border: 1px dotted white;
top: 16px;
position: absolute;
}
I was going to work with some JSON to fill in content as an exercise, but while putting together my initial HTML I ran into an issue simply trying to have a couple links on either side of the page. I have a main-container div, and inside I have the two links, and another div, which I was going to put the JSON content.
This question has nothing to do with the JSON content to be clear, I just got stuck on the css of trying to position the two tags right. I've got height: 100% for the html, body, main-container, and second div. The closest I've got is floating the two tags to the left and right, then using an overflow: auto on the main-container, but the problem is that when you shrink the page, the a tags overflow the descendant div, and also, regardless of the size, there is a weird bar at the bottom of the page, with a scrollbar.
Here is the jsfiddle:
https://jsfiddle.net/g8qeko98/
Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkboxes from JSON</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="main-container">
<a id="home" href="#">Home</a>
<a id="details" href="#">Details</a>
<div class="checkboxes">
</div>
</div>
</body>
</html>
Here are my styles:
html, body {
height: 90%;
margin: 0;
padding: 0;
}
body {
background: #7FA1E5;
}
#main-container {
overflow: auto;
height: 100%;
}
a {
background: darkslategray;
text-align: center;
font-family: calibri;
text-decoration: none;
margin: 2%;
}
#home {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: left;
}
#details {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: right;
}
.checkboxes {
background: #A3B7E5;
height: 100%;
margin: 5%;
box-shadow: 1px 1px 1px black;
border-radius: 10px;
}
First of all, you don't need that height of 90% on html and body. I don't see any weird bars on bottom but my guess is you're referring to the result of setting that height.
Second, you just need to set your values a little more carefully to prevent items from overlapping.
html,
body {
margin: 0;
padding: 0;
}
body {
background: #7FA1E5;
}
#main-container {
overflow: auto;
height: 100vh;
}
a {
background: darkslategray;
text-align: center;
font-family: calibri;
text-decoration: none;
margin: 20px 5%;
}
#home {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: left;
}
#details {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: right;
}
.checkboxes {
background: #A3B7E5;
height: 100%;
margin: 60px 5%;
box-shadow: 1px 1px 1px black;
border-radius: 10px;
}
<div id="main-container">
<a id="home" href="#">Home</a>
<a id="details" href="#">Details</a>
<div class="checkboxes">
</div>
</div>
https://jsfiddle.net/eqpbkozr/
Here is my code taken from the codepen: http://codepen.io/rags4developer/pen/ONoBpm
Please help me to fix these problems.
How do I prevent the the main div & footer from spilling out of the container div ? overflow: hidden for container will not always work !
How do I make the container div height equal to page height without setting its height to a fixed percentage ?
HTML:
<body>
<div id="container">
<div id="nav">nav links 1,2,3 etc</div>
<div id="main">
<!--no text here-->
<div id="left">left panel</div>
<div id="right">right panel</div>
</div>
<div id="footer">footer</div>
</div>
</body>
CSS:
* {box-sizing: border-box;}
html {height: 100%;}
body {height: 100%;}
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
}
#nav {
border: 4px solid red;
height: 15%;
}
#main {
border: 4px solid black;
height: 100%;
background: gray;
}
#left {
border-top: 4px solid green;
border-left: 4px solid green;
border-bottom: 4px solid green;
float: left;
width: 15%;
height:100%;
/*I will make this gradient later*/
background: #9e9999;
}
#right {
border: 4px solid blue;
float: right;
width: 85%;
height: 100%;
border-radius: 20px 0 0 0;
background: white;
}
#footer {
border: 4px solid pink;
clear: both;
}
I am not completely sure if I understand you correctly, but your heights (i.e. the heights within the #container div) add up to 15% + 100% + the height of the footer = at least 115% of the #container height plus the footer height, which causes the "spilling over".
I changed the #content height to 80% and added height: 5%; to the footer in this fork of your codepen: http://codepen.io/anon/pen/EKeOdm
Now everything remains within the #container. Is this what you want?
The clearfix solution still works well for floated elements, IMO. Try removing the height styles and add this:
#main:before,
#main:after {
display: table;
content: "";
}
#main:after {
clear: both;
}
Further: http://nicolasgallagher.com/micro-clearfix-hack/
Using display table should fix this.
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
**display: table;**
}
#content {
border: 4px solid black;
background: gray;
height: 100%;/*Not sure 100% of what ? Parent ???*/
**display: table-row;**
}
I have a site with 4 div tags:
Header (for navigation etc)
Logoheader (for a Logo)
content (my site content)
footer (for additional information)
the header and logo div should have a fix height and both should be 100% in their widht.
the footer div has a fix height of 132px and should be at the very bottom of the page.
The content div should fill the rest of the space which is left between the logoheader and the footer.
Here my code:
html:
<html>
<head>
<title>test</title>
<link href="_css/main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="headerWrapper"></div>
<div id="logoWrapper"></div>
<div id="contentWrapper"></div>
<div id="footerWrapper"></div>
</body>
</html>
css:
body, html {
background-color: green;
margin: 0;
padding: 0;
}
#headerWrapper {
background-color: #ff6b2b;
height: 45px;
}
#logoWrapper {
background-color: white;
width: 100%;
height: 100px;
border-bottom: 1px solid black;
}
#contentWrapper {
margin-left: auto;
margin-right: auto;
height: 100%;
width: 70%;
background-color: red;
}
#footerWrapper {
background-color: #ff6a2b;
height: 132px;
border-top: 1px solid black;
}
The outcome isnt really what I was looking for, maybe someone can help me to fix this problem. Because the whole site should be visible without scrolling.
Greetings :)