I am trying to place a div underneath other div's. Instead of being placed underneath each other they overlay.
An overview of how the page looks:
I am using bootstrap to style it. I am using a fixed navbar with the brand logo in the middle. Underneath the navigation bar I placed an image.
The div for the navbar and for the image stack nicely but when I try to add another div underneath the image it instead overlays with the image and goes underneath the navbar not underneath the image.
Ideally I would like to place the navbar and image divs inside container but I have had no success in trying to do so.
Index.html
<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
<!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- AnjularJs -->
<script src="js/angular.min.js"></script>
<!-- css files -->
<link rel="stylesheet" href="navBar.css">
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand">Name</a>
</div>
</div>
<!-- End of Navigation Bar -->
<div class="arrow"></div>
<!--Image-->
<div class=bkgimage><h1>Slogan</h1></div>
<!--End of image -->
<!-- Want to add another div here -->
</body>
</html>
navBar.css
body {
padding:0px;
margin:0px;
}
.navbar-brand {
display:inline-block;
float:none;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-style:italic;
font-size: 50px;
font-weight: bold;
font-variant: small-caps;
}
.navbar {
position:relative;
margin: 0px;
padding:10px;
text-align:center;
background-color: #00b3b3;
border:none;
}
.arrow {
position:absolute;
left:50%;
margin-left: -20px;
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #00b3b3;
z-index:2;
}
.navbar-default .navbar-brand {
color:white;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
color:white;
}
.bkgimage {
position: absolute;
background-image: url('test.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:75%;
}
.bkgimage h1 {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-style:italic;
font-size: 40px;
font-weight: bold;
font-variant: small-caps;
text-align: center;
margin-top: 150px;
}
Because your .bkgimage div has position: absolute the next div doesn't know the .bkimage divs position and naturally goes to the bottom of the next block level element which is positioned relatively e.g. your .navbar-fixed-top div.
One quick fix here looking at your css would be to use relative positioning and viewport height measurement for the size of container the following for your .bkimage div:
.bkimage{
position: relative;
background-image: url('http://placehold.it/300x250');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:75vh;
}
and for your .bkgimage h1 Set margin-top to -20px (to push under the arrow) and instead use padding-top: 150px which fixes your box model layout for this container (your margin pushes down from the previous div, your padding pushes down the internal content of a div e.g.
.bkgimage h1 {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-style:italic;
font-size: 40px;
font-weight: bold;
font-variant: small-caps;
text-align: center;
padding-top: 150px;
margin-top: -20px;
}
Also as Koschtik mentions, you need to address the structure of your HTML for Bootstrap to work properly. The above fix works with your current HTML, but you will run into problems quite rapidly with markup structured like that
It might be better to use float CSS rather than the position attribute.
Firstly add height 100% to the body and html:
html, body {
height:100%;
}
Change .bkgimage to float instead of position:
.bkgimage {
float:left;
}
Working Example
Related
The current issue I have is when I resize my browser window, bigger especially, the images I've added in disappear off the screen, or overlap with the text above it.
I've tried aligning it differently, but again, I find that either it's not worked, or it'll disappear off the page. Potentially because my text and my image aren't talking to one another, and are just sitting on the page together, but I'm not sure how to fix this so any suggestions and help would be greatly appreciated.
Also had a little trouble resizing my button, I've tried targeting the height/width in both HTML and CSS, but it doesn't seem to make a difference.
Current issue: the button's disappeared off the page completely, and the image has overlapped the text.
Current Issue
Expected outcome: Ideally would look something like below, but button would be smaller, higher etc. Text would ideally be more bulky in a paragraph, so it's not just 1 line that runs across the entire page, but maybe 3 or 4 lines centered.
Expected Outcome
Thank you!
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>The Impossible Journey</title>
<link rel="icon" href="assets/images/buttons/website_browser_icon.png">
<style>
#font-face{
font-family:myFirstFont;
src: url('assets/fonts/makoa.ttf');
}
#font-face{
font-family:mySecondFont;
src: url('assets/fonts/simplicity.otf');
}
.div1 {
font-family: myFirstFont;
font-size: 10em;
position:relative;
left:50%;
transform: translate(-50%, 10%);
text-align: center;
}
.div2 {
font-family: mySecondFont;
font-size: 3.71em;
position:relative;
text-align: center;
left:50%;
transform: translate(-50%, 50%);
text-align: center;
margin: 0px 100px 0px 0px;
}
.image {
position: fixed;
align-content: space-between;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
}
body {
background-image: url('assets/images//bg_rain.png');
margin:0;
padding:0;
background-size:cover;
}
.button {
position: fixed;
padding-top:40px;
padding-left: 3000px;
float:left;
}
</style>
</head>
<body>
<a href="index.html"><div class="button">
<img src="assets/images/buttons/home_rollover_over.gif" onmouseover="this.src='assets/images/buttons/home_rollover_under.gif'"onmouseout="this.src='assets/images/buttons/home_rollover_over.gif'" ></div>
</a>
<div class="div1"; style="color:black";style="align: middle">Chapter 1: <br>The Stranger</div>
<div class="div2"; style="color:black";style="align: middle">Text Text Text</div>
<div class = "image"; style="align: middle"><img src="assets/images/narrative/man_liferaft.png"></div>
</body>
</html>
there are many mistakes on your code:
- you put ; to separate html tag attributes, you should put it inside the style attribute instead, to separate the styles
- you don't need position: relative just to center the text, you can use text-align
- you also don't need the left: 50% and transform: translate() to center the text, this is a hack when something is difficult to center
- when you using position other than relative (absolute and fixed), you don't need float: right
- also when using position, you can just move it using top, bottom, left, or right, don't make the element bigger by padding it, unless if its necessary
- you can't use justify-content or align-items if you don't use display: flex
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>The Impossible Journey</title>
<link rel="icon" href="assets/images/buttons/website_browser_icon.png">
<style>
#font-face{
font-family:myFirstFont;
src: url('assets/fonts/makoa.ttf');
}
#font-face{
font-family:mySecondFont;
src: url('assets/fonts/simplicity.otf');
}
.div1 {
font-family: myFirstFont;
font-size: 10em;
text-align: center;
color: black;
}
.div2 {
font-family: mySecondFont;
font-size: 3.71em;
text-align: center;
color: black;
margin: 0px 100px 0px 0px;
}
.image {
text-align: center;
}
body {
background-image: url('assets/images//bg_rain.png');
margin:0;
padding:0;
background-size:cover;
}
.button {
position: fixed;
top: 40px;
right: 40px;
}
</style>
</head>
<body>
<div class="button"><img src="assets/images/buttons/home_rollover_over.gif" onmouseover="this.src='assets/images/buttons/home_rollover_under.gif'"onmouseout="this.src='assets/images/buttons/home_rollover_over.gif'" ></div>
<div class="div1">Chapter 1: <br> The Stranger</div>
<div class="image"><img src="assets/images/narrative/man_liferaft.png"></div>
<div class="div2">You decide to set a path toward the object. As you draw closer, you discover it's a man, passsed out on an inflatable life raft. You tie his life raft to the boat, haul him aboard and wait for him to wake up. <br> Your journey continues.
</div>
</body>
</html>
If you want to view your image after the paragraph, then you shouldn't be using position: fixed. you have to use position: relative also to center align the image you can use flex property.
This is how you CSS should look like, you can adjust the margin paddings as you want.
.div1 {
font-family: myFirstFont;
font-size: 10em;
position:relative;
text-align: center;
}
.div2 {
font-family: mySecondFont;
font-size: 3.71em;
position:relative;
text-align: center;
margin: 0px 0px 0px 0px;
}
.image {
position: relative;
align-content: space-between;
justify-content: center;
align-items: center;
display:flex;
}
body {
background-image: url('assets/images//bg_rain.png');
margin:0;
padding:0;
background-size:cover;
padding:0 15px;
}
.button {
position: fixed;
padding-top:40px;
right: 40px;
float:left;
}
#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>
I am making a website and I am trying something new, except when I try to create a background for my H1 element I have no way of making sure the background color borders fit to the top of the screen, left and right.
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="site.css"
<body>
<title>Test Tab</title>
<div class="main">
<h1>Website Heading</h1>
</div>
</body>
</html>
.main {
font-family: Arial, Verdana, sans-serif;
text-align: center;
font-size: 20px;
background-color: #00ff00;
background-position: 10px;
}
You need to change your CSS to this:
html,body {
margin:0;
padding:0;
}
.main {
font-family: Arial, Verdana, sans-serif;
text-align: center;
font-size: 20px;
background-color: #00ff00;
background-position: 10px;
}
.main h1 {
margin:0;
}
JSFiddle
You need to make sure you set your body to have no padding or margins and also make sure your h1 doesn't have any margin either. That way it will happily sit at the top of your page.
Alright, so I've tried a lot of different things here but I just can't seem to get my menu bar to stretch all the way across the page. There's a small gap on the left side. Am I just missing something here?
Also so far this is the only way I've been able to get my footer somewhat centered at the bottom of the page. Every time I set the left and right margins to auto it puts the footer in line with the menu bar. Is there a better way to do this as well?
Thank You.
<!DOCTYPE html>
<html>
<head>
<title>Connor Lepert: Homepage</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="icon" href="logo.png">
<style>
#font-face {
font-family: Vanadine;
src: url(vanadine.ttf);
}
body {
background-image: url(bckgrnd.jpg);
background-size: 100%;
background-repeat: no-repeat;
font-family: sans-serif;
color: white;
}
a {
color: white;
font-family: Vanadine;
text-decoration: none;
}
a:hover {
color: yellow;
}
p {
color: white;
font-family: Vanadine;
}
footer {
position: fixed;
display: block;
margin-left: 45%;
margin-right: 45%;
text-align: center;
margin-top: 320px;
}
#siteid {
margin-left: auto;
margin-top: auto
}
#menubar {
background-color: #ABADB0;
width: 100%;
height: 20px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
text-align: center;
word-spacing: 20px;
position: fixed;
}
#header {
display: block;
margin-left:auto;
margin-right: auto;
text-align: center;
margin-top: 330px;
}
</style>
</head>
<body>
<div id="siteid"><img src="logowhite.png" width="50px" alt="Personal logo"/></div>
<div id="header"><img src="header.png" width="400" alt="Lepert"/></div>
<div id="menubar">
Home
About
<a href=mailto:clepert13#gmail.com>Contact</a>
Portfolio
ScrapYard
</div>
<footer>©<a href=> 2015 by Connor Lepert </a> <br> <p></p> </footer>
</body>
</html>
You must just add a margin:0 to your body
I create a wrapper class and wrap the code that needs to be centered within it. Here's an example:
.wrapper {
margin: 0 auto;
width: 960px;
}
<html>
<div class="navbar">
<div class="wrapper">
<p>Content goes here</p>
</div><!--wrapper-->
</div><!--navbar-->
</html>
You just need to make sure that you place the wrapper class before the content, but after the background that needs to repeat. That is shown in my example. Otherwise, you'll have everything centered like it needs to be, but your background will cut off because it's being contained in a 960px area.
Like Artefact already said, adding margin:0 to your body will remove the gap beneath your menubar.
Just a little explaining:
This gap is caused by your browser, in fact every browser has some presets for some elements (i.e. the size of a h1 and how links are displayed) and those presets differ from browser to browser.
For this reason most people will use css resets to have a clean starting point for their own css.
There are several resources for resets out there like the one from meyerweb that you can use or you can simply write your own.
98.214.131.200/index.php
<html>
<head>
<title>Peoria Triathlon Club</title>
<meta charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Forum</li>
<li>Join</li>
<li>Members</li>
<li>Events</li>
<li>Training</li>
<li>Facebook</li>
<ab>Peoria Triathlon Club</ab>
</ul>
<ul id=main>
<p>Main</p>
</ul>
</body>
</html>
98.214.131.200/style.css
body {
background:#000 url(bg.jpg) center top no-repeat;
background-size: cover;
color: #c1c1c1;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin:0;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#main{
display:inline-block;
float:left;
}
How do I make things in the main div appear below the background picture and still have the navigation bar at the top?
Current code can been seen at http:// 98.214.131.200
Change your "main" container to a div instead of a ul (unless you have a compelling reason to make it a ul...you can always have a ul inside your main div).
Add a margin-top property to your #main css to bump it down from the nav bar an appropriate amount.
So in index.php:
<div id="main">
<p>Main</p>
</div>
And in style.css:
#main {
margin-top: 240px; /* Adjust as needed */
}
You can dump the display: inline-block from your main css, and you may not need the float:left either depending on your subsequent intentions.
You may also need to drop the background-size: cover from your body's css, or the image may grow to cover you main div as well.
I can't see exactly what you're trying to achieve, but you can add a "padding-top" to your body equal to the height of your background image.
body { padding-top: 50px; } //assuming your bg.jpg is 50px height
And check if you really need that float on your #main.
try this
body {
background-color: #000000;
background-image: url("bg.jpg");
background-position: center top;
background-repeat: no-repeat;
color: #C1C1C1;
font-family: Arial,Verdana,Helvetica,sans-serif;
margin: 0;
}
#main {
margin-top: 370px;
}