I have seemed to encounter an unknown space below the div pair.
I have used the bootstrap grid concept and made use of rows and columns to have 2 adjacent Divs.
Then I have used CSS to make the div fill the whole space of the screen but I seem to get unaccounted for white space below the divs.
I have already tried including an advanced CSS reset.
Here is the html :
#half_box_1 {
width: 50%;
height: 100vh;
background-color: #FFAEAB;
}
#half_box_2 {
width: 50%;
height: 100vh;
background-color: #FFC0FA;
}
#following_div {
height: 500px;
width: 100%;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Kshitij Dhyani</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="materialize.css">
<link rel="stylesheet" type="text/css" href="my_portfolio.css">
<!-- FONTS -->
</head>
<body>
<div class="row">
<div class="col-lg-6" id="half_box_1">asd</div>
<div class="col-lg-6"
id="half_box_2"></div>
</div>
<div id="following_div"></div>
</body>
</html>
I am unable to comprehend this unaccounted space.
Since you probably have noticed (by the comments), your code seems to work fine.
Your problem seems to be somewhere else in your CSS.
First, try to use the following CSS to see if it works:
* {
padding: 0 !important;
margin: 0 !important;
}
If that worked, you can delete it and you need to start debugging.
Open up Chrome DevTools and go to Sources -> Page and find your CSS file(s). Try to delete each CSS block one after the other. If there is no more space between, you may found out where the problem is.
this is default margin, Please add this code body{margin: 0;padding: 0;} in css
Related
I'm trying to add a background color to my header but it's not adding it when i have it written in the css file.
HTML Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="CSSPage.css">
</head>
<!--
<style media="screen">
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
</style>
-->
<header id="background-color">
<hr>
<p>Sample</p>
<hr>
</header>
</html>
CSS Code: CSSPage.css
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
It only works when it's on HTML but not when it's on the css file.
I've also tried adding !important but it didn't do anything.
The rest of the styles for other id works except this one.
Just change style class(#background-color{...}) as well as id to some other name if possible (other than background-color) and try.
I'm an idiot. Apparently the CSS file doesn't get applied even if you add new things to it if you don't manually save. I'm sorry for wasting everyone's time. It works now. Thank you for pointing me into JsFiddle's direction. Since it worked perfectly there.
I am making a hangman game. And I am working on styling everything. I am including CSS reset in my HTML and I think it is causing my tags to error out. Like my H1 tag isn't working now. Any thoughts?
The H1 tag should make my text big and bold. However that is not working. The linked stylesheet I am using is empty right now. When I remove the CSS Reset link the H1 then works correctly.
<!DOCTYPE html>
<html>
<head>
<title>Hangman</title>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="container" id="gamebox">
<h1>Hang-Person</h1>
</div>
</body>
<script src="assets/javascript/game.js"></script>
</html>
The last script tag is outside the body tag. It should be inside
Be aware to not repeat the same properties for each object in CSS.
Example:
In reset.css:
body {
margin: 0;
text-align: center;
}
And in style.css:
body {
margin: 20px;
text-align: justify;
}
It might cause the browser to get confused, I recommend you to do CSS reset in only one of your stylesheets. You can do it in the other one as well, but it won't be as efficient.
Here you have the universal CSS reset code:
* {
margin: 0;
padding: 0;
}
After this, you can specify the margin or padding to every element, although it violates the DRY (Don't Repeat Yourself) principle.
CSS Working example:
* {
margin: 0;
padding: 0;
}
.object1 {
padding: 70px;
}
It would be more helpful if you post the CSS code for better answers.
Last but not least, the last <script src="assets/javascript/game.js"></script> tag should be inside the body tag.
EDIT: try with the universal CSS reset code and keep the linked stylesheet.
I have an image that is 1007px x 81px that I am using as the logo of a website and I cannot center it WITHOUT using margin-left. I have tried margin: 0, auto;
.navbar-brand {
width:100%;
height:auto;
margin-left: 35%
}
I am assuming you mean center horizontally, since your element has a width, you can simply set its margin-left:auto; and margin-right:auto;
But setting something to width:100%; will actually take up the full size of its parent, and that means you need to center the parent, not the child.
I've put a little snippet (at the bottom of my post) to do this. There are a few confusing things about this question as it stands.
I'm not sure if you intended to modify the navbar-brand class already present in bootstrap, or if you are intending to make a new class, with its own name.
If your image is so wide, it's probably alone on a row of your website, with nothing else beside it, which makes the layout much simpler.
If the below isn't what you're looking for, perhaps the issue can be more thoroughly debugged by you posting the HTML in question, a screenshot, or a fiddle of it not working as intended.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.navbar-brand {
text-align: center;
float: none;
height: auto;
}
.navbar-brand>img {
display: inline;
}
</style>
</head>
<body>
<div class="navbar-brand">
<img width="1007" height="81" />
</div>
</body>
</html>
So this is a weird one, I'm getting a small margin at the very top of my page even though I've applied the standard CSS reset. If I open the inspector in Chrome / Firefox / or even gasp IE, I see that the body is reading my margin:0 reset, but still adding a gap regardless.
Gap:
Chrome Web Inspector that shows margin:0 is being honord:
So, the super duper weird part here is that if throw an important like margin: 0 !important; , the gap goes away. I've used this exact template set up many many times without issue. Hopefully someone sees something that is eluding me right now.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/css/Reset.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/Site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.9.0.js"></script>
<link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500' rel='stylesheet' type='text/css'>
<script type="text/javascript">var base_url = 'http://localhost:64789/';</script>
</head>
<body>
<div id="wrap">
<h2>Index</h2>
</div>
</body>
</html>
CSS
Note: Site.css is an empty file at this point, as I just started this project.
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form {
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
}
a {
text-decoration: none;
}
* {
font-family: 'Ubuntu', sans-serif;
}
body {
background: #f0f6e8 url(../images/gradbackground.jpg) repeat-x 0 top;
}
#wrap {
width: 100%;
background: transparent url(../images/leaves.jpg) no-repeat center top;
}
The margin is on the <h2>, not the <body>. There must be some other selector for h2 that is adding the additional top margin. In your own Site.css styles, include margin-top: 0 for the h2
Bootstrap is probably overriding it from another element. Check the elements it is nested in for margin being set in main.css.
I have been doing web design for a little over a year now, but still have strange things happen on the front end sometimes. I am creating a simple template for personal use using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Matt's Template</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" />
<link rel="stylesheet" href="CSS/general.css" type="text/css" />
</head>
<body>
<section class="container">
<h1>Matt's Template</h1>
</section>
<!-- Javascript Libraries -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
<!-- My Javscript -->
</body>
</html>
If I view this code in my Chrome browser, it appears that the body is shifted about 15px down from the html tag. However, my css explicitly tells the html and body tags to have no padding or margin. So why is there this space?? This has happened before and I am not really sure how I solved it. There must be some obvious answer. Here is my css too.
html, body {
height:100%;
width:100%;
padding:0;
margin:0;
}
.container {
height:100%;
width:960px;
position:relative;
margin:0 auto;
padding:0;
background:#E0E0E0;
}
The problem is that your <h1> still has its default margin, you have only taken off the default <body> margin of 8px, but not the other elements which have default UA styles. You should look into using a reset so you can 'start from scratch' for each element.
http://jsfiddle.net/qfSZ5/3/
Try adding
h1 {margin:0}
or
h1 {display:inline-block}
if you want to keep its margins inside the parent.
jsfiddle
That's because h1 has a default margin assigned by the browser; that could be kinda messy.
Some people just do this in order to prevent default margins and padding:
* {
margin: 0;
padding: 0;
}
And that literally means:
"Hi browser, please nullify all the defaults margins and padding on all the existing elements. Thanks!"