I've tried to make the white space disappear to no avail! Below I've pasted my code. The problem occurs between .jumbotron and .footer. I know it must be something with the margin or padding, maybe with the .jumbotron h2.
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/main.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Niall's Portfolio</title>
</head>
<body>
<audio src="/Users/kmahford/Music/iTunes/iTunes Media/Music/Hiatus Kaiyote/Choose Your Weapon/16 Only Time All the Time_ Making Friends with Studio Owl.m4a" autoplay></audio>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>ZAH</h1>
</div>
<div>
<ul class="pull-right">
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h2>making <span>rustic</span> <span id="and">and</span> <span>modern</span> meet.</h2>
</div>
</div>
<div class="footer">
<p>© Che Co.</p>
</div>
</body>
</html>
CSS:
/* Jumbotron */
.jumbotron {
height: 600px;
background: url("https://images.unsplash.com/photo-1432821596592-e2c18b78144f?q=80&fm=jpg&s=a4598570a3286ea23369fdefe46953ba") no-repeat center center;
background-size: cover;}
.jumbotron h2 {
margin-top: 0;
text-align: center;
color: #1E91B2;
padding-top: 300px;
font-size: 50px;
font-weight: 400;}
.jumbotron span {
font-weight: 800;}
.jumbotron #and {
color: #FF8208;
font-weight: 400;}
The jumbotron class has a 30px bottom margin by default. Remove it:
div.jumbotron {margin-bottom:0;}
jsFiddle example
Note that this is the reason for the spacing issue and you have to override Bootstrap's CSS with your own by making your CSS more specific in order for it to take effect.
What's happening is that within your footer, the <p> has a margin that is pushing the footer down.
What you want instead is to add this piece of CSS:
.footer p{
margin:0;
}
If I guess right you should change on the jumbotronclass the margin, like this:
CSS
.jumbotron{
margin-bottom: 0;
}
jsfiddle
if you also don't want the whitespace on the bottom of your page, set the margin from the p tag also to zero.
Related
This question already has answers here:
Center image using text-align center?
(28 answers)
How to center image horizontally within a div element?
(23 answers)
Closed 4 years ago.
I was told to put a working code up that's why I have so much code up here but the part I am trying to focus on is aligning the top "resumania" logo in the center. When I put align: center; or text-align: center; it won't align. The class I am using for that is "logo." What am I doing wrong ??
<!DOCTYPE html>
<html>
<body>
<link href="https://fonts.googleapis.com/css?family=Ultra" rel="stylesheet">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--NEED HELP RIGHT HERE-->
</head>
<div class="box">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="/Users/mtaslagyan/Desktop/resumania/images/cartoonmanquestion.JPG" alt="cartoon guy with a question mark above him">
</div>
<div class="col-md-8">
<h1 class="heading" align="center">Welcome to Resumania!</h1>
</div>
</div>
</div>
</div>
<a href=/Users/mtaslagyan/Desktop/resumania/majorlinks/testpage.html>check this out</a>
</body>
<style>
a {
color: #2d2d2d;
}
.logo{
width:200px;
border-radius:10px;
text-align: center;
}
.box{
width:100%;
background-color:#f6f6f6;
}
.heading{
color:navy;
padding: 80px 100px 0px 0px;
font-family: 'Ultra', serif;
}
</style>
</html>
One way is to wrap the <a> with a block element, like a <div> then you can use text-align:center
a {
color: #2d2d2d;
}
.wrapper {
text-align: center;
}
.logo {
width: 200px;
border-radius: 10px;
}
.box {
width: 100%;
background-color: #f6f6f6;
}
.heading {
color: navy;
padding: 80px 100px 0px 0px;
font-family: 'Ultra', serif;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="wrapper">
</div>
<div class="box">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="/Users/mtaslagyan/Desktop/resumania/images/cartoonmanquestion.JPG" alt="cartoon guy with a question mark above him">
</div>
<div class="col-md-8">
<h1 class="heading" align="center">Welcome to Resumania!</h1>
</div>
</div>
</div>
</div>
You can give the css property display:flex; align-items:center to your parent class (ie) for class "box"
try this.if you give the class logo for the a tag i mean the parent of your logo image that will be much better otherwise the a tag will be full width.
.logo {
width: 200px;
border-radius: 10px;
margin: 0 auto;
display: block;
}
You may refer to this jsfiddle.
enter code here
I'm a beginner programmer and I'm not sure why my <header> and <section> divs are overlapping one another. I thought that since they were block elements, <section> would start below <header>. Any thoughts? Is there something I need to add in my CSS?
<!DOCTYPE html>
<html>
<head>
<title>Greg's List</title>
<meta charset="utf-8" name="description" content="This is the challenge page for the CSS Layout Lesson in Thinkful. Here I'll be creating a search page for Greg's List">
<!-- reset -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min. css">
<!--styles-->
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header>
<nav class="container">
<h1 class="title">Greg's List</h1>
<ul class="links">
<li class="posts">Post</li>
<li class="account">Account</li>
</ul>
</nav><!--end of nav-->
</header><!--end of header-->
<section class="search">
<form>
<input class="search-bar">
<img src="images/magnifying-glass.png" class="search-pic">
</form>
</section><!--end of section-->
</body>
</html>
CSS
header {
width: 100%;
height: 60px;
background-color: Gainsboro;
position: fixed;
}
h1 {
font-family: Arial;
}
.title {
display: inline-block;
margin-top: 12px;
margin-left: 20px;
}
ul {
display: inline-block;
float: right;
}
li {
display: inline-block;
margin-right: 20px;
font-size: 25px;
}
Remove position: fixed from header css.
Remember, when you ask question:- Make sure you add the complete code as there is no div in your code
I popped your CSS and HTML into this JSFiddle but am not seeing any immediate issues.
That being said, I noticed that you have a float: right; on your <ul> but you don't clear it anywhere, and so this could cause elements to overlap. Assuming you've used floats elsewhere, you need to be sure to clear:both; at each level you float elements, like so:
CSS
.clear {
clear: both;
}
HTML
<nav class="container">
<h1 class="title">Greg's List</h1>
<ul class="links"> <!-- FLOATED ELEMENT -->
<li class="posts">Post</li>
<li class="account">Account</li>
</ul>
<div class="clear"></div> <!-- CLEAR FLOATS -->
</nav><!--end of nav-->
I don't think you've really included enough information (you mentioned overlapping div elements, but then posted HTML that didn't contain a single div), so I'm shooting in the dark here.
EDIT: Check out Nirjhar Vermani's answer to your question as well. You have a position: fixed; on your header, which I originally assumed was intentional, however this would cause your header to stay in a static position in the window and ignore the elements around it.
I'm having trouble positioning my vertical navigation bar to the left of my content Div. Here is what I have and what I want:
The problem, is that it's a fixed position so it's different for monitors that are not a similar size. So I'm guessing I'll need to have relative positioning but I'm not too sure on how to do it.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href= "styles/styling.css" />
</head>
<div class="container">
<ul class="nav">.....(Just nav bar stuff)
<div class="content">
<h1>abcd</h1>
<p>abcd</p>
</div>
CSS
.content {
background-color: #FFFFFF;
width: 650px;
padding: 20px;
margin: auto;
word-wrap: break-word
}
.container {
position: fixed;
top: 151px;
left: 420px;
}
Thanks!
Fixed position will help you keep your menu visible when you scroll down. Otherwise, you should not use it.
<div class="container">
<div class="one-third column">
<ul class="yourmenu">xxx</ul>
<div class="filler"></div>
</div>
<div class="two-thirds column">
Your page content here
</div>
</div>
<style>
.container {width:960px;margin:auto;}
.column {float:left;position:relative;}
.one-third {width:320px;}
.two-thirds {width:640px;}
.filler {width:100%;height:10px;}
.yourmenu {position:fixed;top:100px;} /* do not define left, because it will fix the screen and not the column div */
</style>
Use percent (%) instead of pixels (px).
I'm creating a basic page that should look like Figure 1 in this link: http://www.w3.org/wiki/HTML_structural_elements
The only thing is, instead of text for the heading, I want to place an image. I am trying to style the image in CSS to size and center it.
Right under the heading I have an ul which is my navigation bar. Then I have the context which will be a couple paragraphs. Lastly I have the footer.
My problem is, when I try to style the header, I end up having to use "background-image" and the header goes behind the navigation bar rather than the very top of the page.
HTML BODY Example:
<body>
<div id="header">
<div id="nav">
</div>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
What do I have to type in CSS for the header as an image?
<html>
<head>
<title>CSS image placement</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
#headline1 {
background-image: url(images/newsletter_headline1.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top: 68px;
margin-bottom: 50px;
}
#headline2 {
background-image: url(im`enter code here`ages/newsletter_headline2.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top: 68px;
}
</style>
</head>
<body>
<div id="headline1">Some text … </div>
<div id="headline2">Some more text .. </div>
</body>
</html>
Just make a block-level image:
<div id="header">
<img src="mypic.png" />
<div id="nav"></div>
</div>
CSS:
img {
display: block;
margin: 0 auto;
}
Today I came across this code. It works as I would expect in Chrome, but it is adding a margin on a wrong element with Firefox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Site Title</title>
<style type="text/css" media="screen">
body {
background-color: #aaa;
margin: 0;
}
#header {
background-color: #fff;
}
#logo {
float: left;
}
#menu {
float: right;
}
.container {
width: 960px;
margin: 0 auto;
}
.main {
margin-top: 36px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
<div class="container main">
Content
</div>
</body>
</html>
Firefox seems to add the margin in the .main rule to the content div, which was expected, and to the header div too.
If I add some text inside the header it would work as expected and the header won't have that margin:
<div id="header"> Some text here
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
</div>
I can also add some text after the header block and it would also do the trick for Firefox.
I can't figure out why is Firefox adding that margin to the header element.
Very strange problem, I don't see why this happens.
It however seems to help when you add a padding of at least 1px to .container.
Also check this demo.
The problem has something to do with the container with automatic height and floating children...
Adding display:inline-block; to the #header will make it works in every browser (well except old IE), will include in the white box the right-floated div too (that now is not), and will continue to adjust the height automatically.
Fiddle: http://jsfiddle.net/AndreaLigios/VfAq7/1/