I've created an utterly simple page with only a few elements. I have a white border around my 'content div' and can't figure out what is causing it. It is appearing only top and left of my content. I've tried removing it with .body { border: 0; }, but that did not help. Also a few other things with regard to my CSS, but solved it.
Here is my HTML code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Olivera Miletic graphic desig</title>
<link rel='stylesheet' href='style.css' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="mainText">
<p> OLI<span class="secondColor">APPARENTLY </p>
<p class="stayTuned"> SOON. STAY TUNED. </p>
</div>
<div>
<p class="meanWhile"> meanwhile WORK / BE / TW / <a href="mailto:miletic.olivera#gmail.com" > MAIL </a>
</p>
</div>
</div>
</body>
</html>
Here is my CSS:
.container {
position: absolute;
width: 100%;
height: 100%;
overflow:hidden;
background-color: #6600cc;
padding: 20px 0px 0px 50px;
display: box;
}
.body {
margin: 0;
}
.mainText {
font-family: 'Open Sans', sans-serif;
font-size: 64px;
color: #FF0066;
font-weight: bolder;
line-height: 0%;
margin-bottom: 70px;
}
.secondColor {
color: #00ccff;
}
.stayTuned {
font-family: 'Open Sans', sans-serif;
font-size: 25px;
color: #ffffff;
font-weight: bolder;
}
.meanWhile {
font-family: 'Open Sans', sans-serif;
color: #ffffff;
font-weight: lighter;
}
a {
color: #ffffff;
text-decoration: none;
}
Here is the JSFiddle https://jsfiddle.net/1yL1ta5x/ and the code:
Also, would appreciate advice how to optimize it for, at least, mobile and desktop views of the webpage and/or any other optimization to my code is welcome. I am an absolute beginner, so bear with me. Thanks.
Regards,
Some browsers/frameworks/environments add default margin, padding values to either the body or the html.
You have to override the margins/padding to the html or body for the white space to disappear.
Just add the following:
html, body {
margin: 0;
padding: 0;
}
EDIT
To answer your second question as to why there is scroll on your container div, this happens because the div occupies 100% width and height of its parent and also occupies the 20px padding-top and 50px padding-left.
Hence the container div overflows its parent thus producing a scroll.
A general fix would be to apply box-sizing: border-box to container so that the padding is included in the width and height.
.container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #6600cc;
padding: 20px 0px 0px 50px;
box-sizing: border-box;
}
Check updated fiddle: https://jsfiddle.net/1yL1ta5x/1/
I would suggest you to read more about box-sizing, and the css box model as a whole.
Remove the .body and replace it to body.
.body is applied to the class named body, while you want to select the tag, which would be just body.
Alternatively, add class="body" to your body tag.
Related
#header {
margin: *<--This one*
position: fixed;
width:100%;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
overflow: auto;
margin:0 auto;
display: block;
}
I am building a website in which I encountered that the <h1> element goes behind the fixed navbar. I tried to find the optimal solution for this.
I figured out that many people made an extra <div1> container which had the same height as that of the navbar and then used another <div2> element to write whatever they have to show to the user.
I had a problem with this solution actually my navbar is a responsive one. So I have to make the <div1> element responsive too, using #media.
Then experimenting with margin I found that leaving the margin blank gives me the optimal one. It doesn't requires me to add the <div1> container.
I found this helpful. Since I am newbie in Programming, I don't know if these type of shortcuts are not good to be used.
P.S. I used "Brackets" editor and the live preview was shown in Google Chrome.
edit: the #header is the container for the navbar and is fixed. position:fixed.
It causes everything until the next ; to be treated as invalid and dropped.
It is not a shortcut, it is a longer way to achieve the same effect as not typing margin: position: fixed; at all.
CSS was designed to be very forgiving of errors. There are multiple reasons for this.
Imagine you're using a background-gradient which older browsers might not understand. Your whole CSS code would break.
That's why CSS just continues with the next statement that it can find. For example:
.foo {
color: white;
background: black;
background: linear-gradient(red, yellow);
}
CSS reads the file top to bottom, so first the black background shall be applied and after that the gradient background will be applied. Which will lead to a red/yellowish background in modern browsers.
Without CSS error handling our whole CSS would die in old browsers.
In your case however, CSS reads the following statement:
#header {
margin: position: fixed;
}
Which is an syntax error and neither of those will be applied. CSS will just continue with your width: 100% statement.
When you use a fixed header, you should give margin-top to the next element that is equal to the height of the fixed header, so that it starts after the fixed element. But this will work only if your header is of fixed height. In case your header is not of a fixed height and changes with viewport then add a resize function on body that calculates the height of header on each resize and gives the same value as marginTop to the next element after the fixed element.
body{
margin: 0;
}
#header {
top : 0;
position: fixed;
width:100%;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
overflow: auto;
height: 65px;
}
#nav-bar a{
display: block;
padding: 9px 16px;
text-align: center;
float: left;
color:azure;
text-decoration:none;
}
#nav-bar a:hover{
background-color: rgba(49, 248, 23, 0.94);
}
.nav-right{
float:right;
font-size: 17px;
text-align: center;
}
#media(max-width:600px){
#nav-bar{
position: relative;
display: flex;
flex-direction: column;
}
.nav-right{
display: flex;
flex-direction: column;
}
}
.logo {
font-family: 'Great Vibes', cursive;
font-size: 30px;
}
#header-img {
height:35px;
width:30px;
}
h2 {
text-align: center;
background: linear-gradient(0deg,red,yellow);
padding: 14px;
}
#form {
display:flex;
justify-content: center;
margin-bottom: 21px;
}
#email {
height: 21px;
width: 250px;
border-radius: 3px;
border-color: #938e8e;
}
section {
position: relative;
top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Bookworms Site</title>
<link href="style-sheet.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Limelight" rel="stylesheet">
</head>
<body onresize="myFunction()">
<main>
<header id="header">
<div id="nav-bar">
<img src="book.jpg" id="header-img"> The Bookworms Site
<div class="nav-right">
About
Features
Pricing
</div>
</div>
</header>
<div id="abc" style="margin-top: 65px;">
<h2> Hurry!! Offers until Next 20 Hours!!</h2>
<form id="form">
<section>Email:</section>
<input id="email" type="email" placeholder="Enter Your Email">
<button type="submit" url="">Submit</button>
</form>
</div>
</main>
<script>
function myFunction() {
document.getElementById( "abc").style.marginTop = document.getElementById( "header").clientHeight + "px"
}
</script>
</body>
</html>
With my tags I am trying to stop it from auto creating a line space.
<h1>Title</h1>
Here is my current css rule.
h1
{
font-family: Blackadder ITC;
text-align: left;
}
And in my body rule I have this
body
{
text-align: center;
}
When I add this to my css h1 rule
display: inline;
It does prevent the h1 tags from automatically creating a line space but then it overrides the:
text-align: left;
rule, therefore the text centers in the middle of the page, and I don't want that.
Is there a way to make the text go in the left hand side of the page, as well as to prevent it from creating automatic line spacing?
You can just go ahead and remove the margin on the <h1>.
body {
text-align: center;
margin: auto 0;
}
nav {
position: relative;
}
h1 {
font-family: Blackadder ITC;
text-align: left;
margin: 0;
}
.button {
position: absolute;
top: 0;
right: 50%;
border-width: thin;
border-style: groove;
border-color: alpha;
margin: 3px 0;
}
.paragraph {
background-color: blue;
padding: 10px;
color: white;
font-family: calibri;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<link href="Main.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<h1>Title</h1>
Button 1
</nav>
<br/>
<div class="paragraph">
<h2>Title</h2>
<p>
Information
</p>
</div>
</body>
</html>
EDIT: I had given previously given the solution to reduce the line spacing (which is the space between two lines) on the h1 element. I guess you wanted both the h1 and the button on the same line, which was not clear in the question. To have your two elements in the same line, you can either make use of positioning (like I have done above), or make use of floats after setting the display of h1 to inline.
I have two divs inside of a parent div, but when I inspect the page, the two divs are not in a container, even though I have wrapped the div around the other 2 divs.
I want to add characteristics to the parent div, instead each div individually.
Advice?
<!DOCTYPE html>
<head>
<title>Lavu Explore</title>
<link rel="stylesheet" type="text/css" href="styles_sample.css">
</head>
<body>
<div id="sell_section">
<h2>Sell, Manage, & Market in one easy system</h2>
<hr class="hr_1">
<div class="box1">
<img id ="terminal_img" src="http://i.imgur.com/D5T6lY1.png">
</div>
<div class="box1">
<p style="text-align:left">Choosing a new Point of Sale (POS) is an opportunity. Lavu is not just accepting payments - Lavu is business management on the iPad. Upgrade your business with the Cloud POS system that was developed specifically for the restaurant / hospitality industry. Lavu has the tools you need to improve efficiency and the bottom line. Love your business.</p>
</div>
</div>
</body>
</html>
styles_sample.css
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: auto;
position: relative;
overflow: auto;
padding: 0 5%;
max-width: 990px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h2 {
text-align: center;
font-family: DIN;
font-size: 40px;
color: #8b8b8b;
text-align: center;
width: 100%;
font-weight: normal;
}
p {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #8b8b8b;
font-size: 16px;
line-height: 150%;
}
.hr_1 {
position: relative;
padding: 0;
margin: 2% auto;
height: 0;
width: 400px;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aecd37;
border-bottom: 1px solid #aecd37;
}
.box1 {
width: 50%;
min-width: 50%;
position: relative;
min-height: 1px;
}
#media (min-width: 830px) {
.box1 {
float: left;
}
}
#media (max-width: 830px) {
.box1 {
width: 100%;
}
}
You didn't insert html start tag after your doctype, it should look a little like this
<!doctype html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
+1 on Johnny's answer, and also markup is slightly out of whack:
You style have style rules added to .hr_1 element, while it appears you would want to have them added to #sell_section - that's the id of the wrapping div.
I'm having a little trouble understanding exactly what you are after. The way I understand it you might want to do something like add a border or background-color to your #sell_section DIV. And at different sizes the styles are not being applied like you would like them to? If so, then the culprit is because you are floating your child/nested DIVs. Floating can be a bit tricky to understand at first. It is definitely one of those concepts that takes a bit of practice and knowledge to understand fully.
Here's the short of what happens when you float something:
When an element is floated it is taken out of the normal flow of the
document.
What does that mean? If you have this structure:
<div class="outer">
<div class="inner">inner</div>
<div class="inner">inner</div>
</div>
and the following CSS:
.outer {
background-color: red;
}
.inner {
float: left;
width: 50%;
}
the background color of .outer would not be visible because the child DIVs are floated and do not take up any space within their parent DIV. Although other elements within the parent DIV (floated or not) with them.
The solution? The most popular is know as clearfix. Apply that to the element that contains floated elements and it will behave as if those elements were not floated and took up space.
I found the answer to my problem! I didn't realize that floated elements do not take up space in a div. So to correct it, I added overflow:auto to my containers. This solved the problem completely. Now I can add borders and backgrounds to my divs without wondering why they aren't stretching the length of the whole container.
Here's a shrunken version of a webpage. The black is the background color for a header div I made. My question is how do I eliminate the blue area above and to the sides of it? I would like it to look more like the second image. I tried margin: 0px; for top, left, and right, but nothing changed. Any suggestions?
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="calendar.css">
</head>
<body>
<div id="header">
</div>
</body>
</html>
Here is the CSS:
body {
background-color: #00FFFF;
font-family: Verdana, Tahoma, sans-serif;
}
#header {
background-color: black;
height: 40px;
width: 100%;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
add margin:0 to the body tag
body {
background-color: #00FFFF;
font-family: Verdana, Tahoma, sans-serif;
margin:0;
}
The problem is not that your DIV has a margin, but rather that the BODY has a margin. Most browsers add this by default, but you can eliminate it with
body{ margin: 0; }
in your CSS. Some people like to get rid of these things that browsers add with something called a cssreset. This would give you more of a blank slate to begin with.
I want the elements within my top logo div to be centered. I'm not sure quite how to do that.
My navigation div is not matching up with the logo div. There is still space between the divs even tho I have set the margins to 0px.
My placeholder graphic for some reason has more padding on the bottom than anywhere else within the logo div. What do I need to do to change that?
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
#logo {
background-color: black;
width: 100%;
color: rgb(255,200,0);
margin: 0px;
}
#logo p {
display: inline;
}
#logo h2 {
display: inline;
}
#logo a {
float: right;
color: rgb(255, 200, 0);
text-decoration: none;
font-size: 1.25em;
padding: 10px;
}
#navigation {
background-color: rgb(255,200,0);
width: 100%;
margin: 0px;
}
body {
margin: 0px;
font-family: Arial, Helvetica, Verdana;
}
</style>
</head>
<body>
<div id="logo">
<p>
<img src="picture.jpg" >
</p>
<h2>SUBSCRIBER PORTAL</h2>
LOG-IN
CONTACT US
</div>
<div id="navigation">
<p>
This is just a navigation test.
</p>
</div>
<div id="contents">
<p>This is just some dummy text. Dummy. </p>
</div>
</body>
</html>
1) give the img { vertical-align:middle; }. also remove the around the img.
2) have you tried padding:0;?.
3) padding-bottom:-<value here>px; or you could try just padding:0; or padding-bottom:0;.
I'm not sure about the questions, because they are not really setup well.
Use position: absolute; in your CSS for your navigation and logo or a tags to specify exactly where you want them to appear. Such as this example:
#logo {
position:absolute;
top: 170px;
left: 300px;
}