Hi guys i have a problem with overlap this is a full header with a background image and i have some content also a button but is pushing out of header,how i can fix this?
What i am trying to do is full header with a background but i am stuck here.
Thank you for helpLook what is the problem
html, body {
height: 100%;
padding:0;
margin:0;
}
h1{
margin:0;
}
.wrap{
margin:0 auto;
width:950px;
height:100%;
}
header {
background:url("https://unsplash.com/#aidanjjmeyer?photo=ckrUhWyTde8");
background-size:cover;
background-repeat:no-repeat;
width:100%;
height:100vh;
}
.text{
text-align: Center;
position: relative;
top: 50%;
}
.menu{
padding-top:30px;
}
.bar1 , .bar2 , .bar3{
width:35px;
height:3px;
background-color:#262626;
margin:6px 0;
}
.btn{
border:1px solid aqua;
background:transparent;
font-size:25px;
color:white;
outline:none;
}
#about{
height:300px;
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="custom.css">
<title>Journal</title>
</head>
<body>
<header>
<div class="wrap">
<div class="menu">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="text">
<h1>Brooke Journalist</h1>
<button class="btn">Contact</button>
</div>
</div>
</header>
<section id="about">
</section>
</body>
</html>
Related
This question already has answers here:
How to align 3 divs (left/center/right) inside another div?
(21 answers)
Closed 1 year ago.
My question is why is that third div( class= "right") goes downward??
I tried using vertical-align:top; also but didn't work.
I want div.nav to be at mid and div.right to be at right with all three of them being at the same top postition
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.left{
float:left;
display:inline-block;
}
.nav{
display:block;
width:20%;
margin:auto;
}
.right{
float:right;
display: block;
vertical-align: top;
}
.group:before,
.group:after{
content:"";
display:table;
}
.group:after{
clear:both;
}
.group{
zoom:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
Answering your question
You used display: block;. display: block will take a 100%. If you want the div to only take the width of the item itself then use display: inline-block;
Fixing your code
Use display: flex; with justify-content: space-between; and remove all the other stuff. You can also add other divs in the header but flex will position them perfectly
That means you can also remove the classes from the divs in the header
Optimized Code:
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
header {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
Example with more Divs in the header:
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
header {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</header>
</body>
</html>
floatting elements will make a break before floatting if anything in the regular flow stands before it , that's why .right shows right under .nav.
You can set .nav after the floatting elements in the code, so it doesn't disturb the floatting elements.
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.left{
float:left;
}
.nav{
display:block;
width:20%;
margin:auto;
}
.right{
float:right;
}
.group:before,
.group:after{
content:"";
display:table;
}
.group:after{
clear:both;
}
.group{
zoom:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="right">right</div>
<div class="nav">Nav</div>
</header>
</body>
</html>
Nowdays, flex or grid is used for this
flex
body {
margin: 0px;
padding: 0px;
background-color: red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.top-header {
display: flex;
}
.nav {
width: 20%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
grid
body {
margin: 0px;
padding: 0px;
background-color: red;
}
.top-header {
display: grid;
grid-template-columns: auto 20% auto;
justify-content: space-between
}
.left {}
.nav {}
.right {}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.left{
float:left;
display:inline-block;
width: 50%;
}
.nav{
display: inline-block;
}
.right{
display:inline-block;
float:right;
display: block;
vertical-align: top;
}
.group:before,
.group:after{
content:"";
display:table;
}
.group:after{
clear:both;
}
.group{
zoom:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
Try using display:inline-block; on all divs. Then you can set the location of the nav with width of the first div
I have a login modal and I want there to be a blue background. I do not understand what is wrong with my CSS.
I want the div for my content to be 200px height and 300px wide. I thought giving it a specific height and width would fix the issue but it has not.
I expect my content to have a white background in a 200px by 300px white box,but the white bakcgound will not show.
* {
margin: 0;
padding: 0;
}
html,
body {
box-sizing: border-box;
overflow: hidden;
height: 100%;
}
body {
min-height: 100%;
min-width: 100%;
background: url("images/newnewgirls.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.container {
height: 100%;
width: 100%;
overflow: hidden;
}
.container2 {
width: 80%;
margin: auto;
text-align: center;
}
header {
padding: 1em;
margin: 0;
}
header #branding {
float: left;
}
header #branding img {
width: 55%;
}
header nav {
float: right;
margin-top: 0.5em;
}
header nav li {
display: inline;
padding: 1em;
}
header nav li a {
text-decoration: none;
}
#login-modal {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#login-content {
border: 10 px solid black;
height: 300px;
width: 500px background-color:white;
text-align: center;
}
input[type=text],
input[type=password] {
display: block;
margin: 0 auto;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="apple-touch-icon" sizes="180x180" href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="32x32" href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="16x16" href="images\free_horizontal_on_white_by_logaster.jpg">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="resolve.css">
<title>Resolve - Real Women, Real Feedback</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<img src="images/lasttry.png" alt="resolvelogo">
</div>
<nav>
<li>Home</li>
<li>How It Works</li>
<li>Contact</li>
<li>FAQ</li>
<li><button id="login" class="button">Log In</button></li>
<div id="login-modal">
<div id="login-content">
<span class="close">×</span>
<form>
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<button>Log In</button>
</form>
</div>
</div>
</nav>
</header>
<section>
<div class="container2">
<div>
<h1>Guys</h1>
<h2>dhkjsdhkjh duhfsduhfdiu fudshfisduhus usihfksdjfhsdiuh ushfkjdshfidsu kjhfudihf dihakdhf djkhksdj idhjdsshf siudhk shadjkhfisdu fskjahfdudd jkshfiusdh feuidhdhsui dsduhskdj.</h2>
<button>Get Started</button>
</div>
<div>
<h1>Ladies</h1>
<h2>Resolve is an easy and fun way to make quick cash while you help guys turn into men you would date! Give them honest feedback that would help them improve. Receive five dollars for every review! </h2>
<button id="login">Get Started</button>
</div>
<div class="appad">
<h2>App Coming Soon!</h2>
</div>
</div>
<script src="resolve.js"></script>
</body>
</html>
There are two mistakes in your CSS.
It's #login-content and not .login-content. Since it's an id.
You're missing a semi-colon after width.
#login-content {
border: 10 px solid black;
height: 300px;
width: 500px;
background-color: white;
text-align: center;
}
Working snippet with the changes:
*{
margin:0;
padding:0;
}
html, body{
box-sizing:border-box;
overflow:hidden;
height:100%;
}
body{
min-height:100%;
min-width:100%;
background: url("images/newnewgirls.jpg");
background-size:100% 100%;
background-repeat: no-repeat;
background-position:center center;
position:relative;
}
.container{
height:100%;
width:100%;
overflow:hidden;
}
.container2{
width:80%;
margin:auto;
text-align:center;
}
header{
padding:1em;
margin:0;
}
header #branding{
float:left;
}
header #branding img{
width:55%;
}
header nav{
float:right;
margin-top:0.5em;
}
header nav li{
display:inline;
padding:1em;
}
header nav li a{
text-decoration:none;
}
#login-modal{
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
position: absolute;
top:0;
left:0;
display:flex;
justify-content: center;
align-items: center;
text-align:center;
}
#login-content{
border: 10 px solid black;
height:300px;
width:500px;
background-color:white;
text-align:center;
}
input[type=text], input[type=password]{
display:block;
margin: 0 auto;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="apple-touch-icon" sizes="180x180" href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="32x32" href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="16x16" href="images\free_horizontal_on_white_by_logaster.jpg">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="resolve.css">
<title>Resolve - Real Women, Real Feedback</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<img src="images/lasttry.png" alt="resolvelogo">
</div>
<nav>
<li>Home</li>
<li>How It Works</li>
<li>Contact</li>
<li>FAQ</li>
<li><button id="login" class="button">Log In</button></li>
<div id="login-modal">
<div id="login-content">
<span class="close">×</span>
<form>
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<button>Log In</button>
</form>
</div>
</div>
</nav>
</header>
<section>
<div class="container2">
<div>
<h1>Guys</h1>
<h2>dhkjsdhkjh duhfsduhfdiu fudshfisduhus usihfksdjfhsdiuh ushfkjdshfidsu kjhfudihf dihakdhf djkhksdj idhjdsshf siudhk shadjkhfisdu fskjahfdudd jkshfiusdh feuidhdhsui dsduhskdj.</h2>
<button>Get Started</button>
</div>
<div>
<h1>Ladies</h1>
<h2>Resolve is an easy and fun way to make quick cash while you help guys turn into men you would date! Give them honest feedback that would help them improve. Receive five dollars for every review! </h2>
<button id="login">Get Started</button>
</div>
<div class="appad">
<h2>App Coming Soon!</h2>
</div>
</div>
<script src="resolve.js"></script>
</body>
</html>
The element has the ID login-content, not a class. Change .login-content to #login-content on your CSS.
I have the menu on the bottom of the page, and I'm trying to center the wrapper div
with logo and buttons inside the doc. The centering doesn't work. Can you guys tell me why?
I want the logo to float to the left, and buttons to float to the right, but the wrapper div must be centered.
Here's the code:
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
margin-left:30px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
To center a block level element horizontally, the easiest method is to apply a width and set margin-left and margin-right to auto (or margin: auto; or margin: 0 auto;).
Since you already have a width on .navigation, just apply margin: auto to .navigation and it will center horizontally.
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
margin: auto;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
margin-left:30px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
By default html elements are left aligned. (like your .navigation)
if you add a margin:auto on a block element(note: wrapper div is a block element) it will add up the remaining space to the viewport and add a left-margin and right-margin to the block element, so it will look centered.
So, giving a margin:auto styling to the wrapper div will do the job.
just like this:
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
margin:0 auto;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
I'm having difficulty fixing a problem in my html/css code for the position attribute. I want to have a word "Social" to the right and bottom with a fixed position so I can scroll with it in the same spot. I can't even get it to the right and bottom regardless of what positioning it is. Please tell me where my problem may be stemming from so I can fix it.
<head>
<meta charset="utf-8" />
<title>Template_</title>
<!--><meta name="generator" content="Geany 1.27" /></-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.container{
position:relative;
width= 100%;
height= 100%;
overflow=scroll;
}
.banner{
<!--></-->
position:absolute;
margin:5px;
width:90%;
right: 0px;
}
.banner .test{
<!--></-->
font-weight: 900;
font-size: 3em;
margin:10px;
font-variant: small-caps;
}
.banner .logo{
<!-->controls images within banner</-->
position: ;
}
.social_bar{
width: 300px;
border: 3px solid #73AD21;
}
#social_strip{
<!-->post button on either left or right to remain fixed
through scrolling
position:fixed;
right:0;</-->
position: fixed;
bottom: 0px;
right: 0px;
}
.content_container{
<!-->contain all content within container, relative to
overall container</-->
position: relative;
margin:5px;
padding:5px;
}
</style>
</head>
<div class="social_bar" id="social_strip">social</div>
<body class="container">
<div class="banner">
<p>Banner</p>
<div class="test">
<p>Test</p>
</div>
</div>
<div class="content_container">
<p>Content</p>
</div>
</body>
remove your comments on html style. It will work.
I am not sure of this.
But in css, you need /* */ to comment.
(e.g)
/* This is a comment */
<head>
<meta charset="utf-8" />
<title>Template_</title>
<!--><meta name="generator" content="Geany 1.27" /></-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.container{
position:relative;
width= 100%;
height= 100%;
overflow=scroll;
}
.banner{
position:absolute;
margin:5px;
width:90%;
right: 0px;
}
.banner .test{
font-weight: 900;
font-size: 3em;
margin:10px;
font-variant: small-caps;
}
.banner .logo{
position: ;
}
#social_strip{
position: fixed;
bottom: 0px;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
}
.content_container{
position: relative;
margin:5px;
padding:5px;
}
</style>
</head>
<div class="social_bar" id="social_strip">social</div>
<body class="container">
<div class="banner">
<p>Banner</p>
<div class="test">
<p>Test</p>
</div>
</div>
<div class="content_container">
<p>Content</p>
</div>
</body>
i'm doing a project for learning purpose. i have a problem of getting left and right div's inside the main div. if anyone can point me out where is the problem in the code it will be most appreciated. thank you
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="template/css/test_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_wrapper">
<div class="wrapper">
<div class="head"></div>
<div class="nav"></div>
<div id="main">
<div class="left">some data</div>
<div class="right">some data</div>
</div><!--end main-->
<div class="footer">
</div><!--end footer-->
</div><!--end wrapper-->
</div><!--end main_wrapper-->
</body>
</html>
CSS code
#charset "utf-8";
/* CSS Document */
body,td,th {
font-family: Arial, Helvetica, sans-serif;
margin-top:0px;
background-color:#FF0000;
}
#main_wrapper {
width:950px;
margin:auto;
background-image: url(../images/bg_a.png);
background-repeat:repeat-y;
}
.wrapper {
background-color:#009900;
margin-left:5px;
margin-right:5px;
}
.head {
height:115px;
}
.nav {
height:30px;
}
#main {
padding:10px;
margin:5px;
background-color:#0099FF;
}
.left {
width:600px;
float:left;
}
.right {
width:300px;
float:right;
}
.footer {
height:50px;
}
try this:
#main {
padding:10px;
margin:5px;
background-color:#0099FF;
overflow: hidden;
}