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.
Related
For some reason my html and css isn't taking up the entire width of the page, even though I set margin and padding to 0, and width to 100%. It's always worked before, but I have no idea why it isn't working this time. The only thing that has been implemented so far is the just the background and navbar. I have attached an image to demonstrate how it appears right now. Any help would be appreciated.
*{
margin: 0;
padding: 0;
width: 100%;
box-sizing: border-box;
font-family: sans-serif;
}
body{
overflow-x: hidden;
}
.container{
width: 100%;
height: 100vh;
background: #42455a;
}
.navbar ul{
display: inline-flex;
margin: 50px;
}
.navbar ul li{
list-style: none;
margin: 0px 20px;
color: #b2b1b1;
cursor: pointer;
}
.logo img{
width: 30px;
margin-top: -7px;
margin-right: 48px;
}
.active{
color: #19dafa !important;
}
<!DOCTYPE html>
<html>
<head>
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- CSS File -->
<link rel="stylesheet" type="text/css" href="check.css">
<title>Webpage title</title>
</head>
<body>
<div class="container">
<div class="navbar">
<ul>
<!-- logo -->
<li class="logo"><img src=""></li>
<li class="active">Home</li>
<li>Services</li>
<li>Product</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
You're using Bootstrap.css, which defines a max-width: 540px rule on any element with class="container" when the browser viewport width is wider than 576px:
To fix this, use a different class name other than container, or extend the .container rule in your own stylesheet to set max-width: none;.
But, in my frank opinion, the best solution is to not use Bootstrap.css and to instead take responsibility for styling your own website. I feel Bootstrap has gotten bigger and bigger over the years it takes just as much effort to "learn Bootstrap" as it does to learn how to write one's own base common stylesheet.
I currently have a navbar as such:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
And the following image at the bottom of the container:
<img class="img-responsive" src="Images/test.png" alt="">
<!-- End of container -->
However the image underneath overlaps the text. How can I style the image such that it "pushes" everything on the page down so that it doesn't overlap any text (the same way a navbar behaves)
its simple, just provide a width and height to image. If this is what you want
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent
element (resize the browser window to see the effect):</p>
<img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460"
height="345">
sdadsada
</div>
</body>
</html>
You could place your image outside of your navbar if it isn't already. Otherwise you can add display: block to your image to push it to its own line. Further you can use margins or positioning to align it correctly.
body {
font-family: sans-serif;
}
nav {
display: inline-block;
background-color: #eee;
}
ul {
overflow: auto;
padding: 1rem 2rem;
list-style-type: none;
}
li {
float: left;
margin: 0.25rem 0.5rem;
}
a {
text-decoration: none;
text-transform: uppercase;
color: #555;
}
img {
display: block;
width: 5.65rem;
}
<nav>
<ul>
<li>
item 1
</li>
<li>
item 2
</li>
<li>
item 3
</li>
</ul>
</nav>
<img src="http://i.imgur.com/iyzGnF9.jpg">
A crude solution would be to add a line break with the <br/> tag. This method would separate the image from the navbar. Another solution would be to place a spacer tag between the two. This can be done by adjusting the height of a <div> tag.
While you certainly don't have to, I use an API that allows me to assign a class name of
spacer(height of spacer in pixels)
Or, for example, if I wanted a height of 250 pixels,
spacer250
while the API changes the height of the tag on the call of function
$scs.createSpacers('div');
If you would like to use the API, the library is found at this link.
I am unable to center the footer on the page. All content is centered on the page and set to 1280px, so it does not take up the entire width of the page. The issue is that everything on the page is centered except the footer. It is the correct width, but the footer is pushed hard left. Any ideas what I am missing?
This is what the footer looks like currently:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../Css/Style.css">
<link rel="icon" type="png" href="../Pictures/Icon.png">
<meta charset="utf-8"/>
<meta name="description" content="xxx">
<meta name="keywords" content="xxx">
<meta name="author" content="xxx">
<title>xxx</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>xxx</h1>
<h2>xxx</h2>
</div>
<div>
<hr/>
</div>
<div id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">Manage Income</li>
<li class="menuitem">Manage Bills</li>
<li class="menuitem">View Calendar</li>
</ul>
<a id="signout" href="SignOut.html">Signout</a>
</div>
<div class="pie"></div>
</div>
</body>
<footer>
<a id="contact" href="xxx.html">Contact Us</a>
</footer>
</html>
footer{
display: block;
width: 1280px;
height: 35px;
text-align: center;
bottom: 0px;
position: fixed;
float: none;
margin: auto;
background-color: #B6B6B4;
}
Your example code appears to align correctly for me.
Note that your width of 1280px means that the text will be centered at exactly 640px (half of 1280px), and this is likely outside of your viewport at smaller widths, meaning it will seem as though your text is not central.
To remedy this, use a percentage-based width instead, such as 100% to indicate that your footer should occupy the full width available:
footer {
display: block;
width: 100%;
height: 35px;
text-align: center;
bottom: 0px;
position: fixed;
float: none;
margin: auto;
background-color: #B6B6B4;
}
<footer>
Test
</footer>
As you can see in the above example, the text is visible even though the viewport is narrow.
Note that it's also possible that your footer's CSS is being overridden by a selector with higher specificity. You can use the F12 Debugger to ensure that your rules are being applied correctly.
Hope this helps! :)
Im trying to use a full screen image as my headers background but for some reason the image is not showing up and I cant figure out what im doing wrong. Can someone help? The image is in the same folder as the html and css files btw.
CSS
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header{
background-image:url(headerbackground.png);
width: 100%;
height: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div id="header">
<ul class="col-4">
<li>SOBRE</li>
<li>TRABALHOS</li>
<li>CONTACTO</li>
</ul>
</div>
</header>
</body>
</html>
Since you've given your header div (#header) no explicit height and floated the only child it has, it collapses and acts like it has no content. Either give it a height or add overflow:auto to the CSS rules for it.
Agree with #j08691.
Working with html layout and css, it's always helpful, for me at least, to add following css:
border: 1px solid green; //or any color you like
so that we can see clearly how is the layout.
additional, in case you have issue with src image size, you may use
background-size: cover;
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.