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.
Related
I am having a bit problem aligning the content in the container to match all the other items in the container, and what else should I do to optimise my css code , I am a beginner to CSS and I was just practicing this project from frontendmentor , I'll be grateful if you could help me with this
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="styles.css" />
<title>Frontend Mentor | Profile card component</title>
</head>
<body>
<div class="container">
<div class="top-content"><img src="images/bg-pattern-card.svg" /></div>
<div class="middle-content">
<img src="images/image-victor.jpg" alt="" />
<h3 class="name">
Victor Crest<span> </span><span class="age">26</span>
</h3>
<p class="location">London</p>
</div>
<hr />
<div class="bottom-content">
<ul class="numbers">
<li>80K</li>
<li>803K</li>
<li>1.4K</li>
</ul>
<ul class="description-numbers">
<li>Followers</li>
<li>Likes</li>
<li>Photos</li>
</ul>
</div>
</div>
</body>
</html>
CSS
#import url(https://fonts.google.com/specimen/Kumbh+Sans);
:root{
--Dark-cyan: hsl(185, 75%, 39%);
--Very-dark-desaturated-blue: hsl(229, 23%, 23%);
--Dark-grayish-blue: hsl(227, 10%, 46%);
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background:url(images/bg-pattern-top.svg),url(images/bg-pattern-bottom.svg) ;
background-color: var(--Dark-cyan);
background-repeat: no-repeat;
background-position: -90% -500px,175% 400px;
font-family: "Kumbh Sans",sans-serif;
color:var(--Dark-grayish-blue);
font-size:18px;
}
.container{
background-color: #fff;
height:45%;
width:30%;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin:10rem auto;
border-radius: 12px;
position: relative;
}
.top-content,.bottom-content{
width: 100%;
}
.top-content{
width: 100%;
height:33%;
}
.top-content img{
width: 100%;
}
.middle-content img{
border-radius: 50%;
border:6px solid #fff;
position: absolute;
top:30%;
left:37%;
}
h3{
margin-top:70%;
color:#000;
}
.age{
color:var(--Dark-grayish-blue);
padding-left: 0.5em;
}
p.location{
position:relative;
left:35px;
padding:1.25rem 0;
}
ul{
display: flex;
justify-content: space-around;
padding-top:1rem;
}
ul.numbers li{
font-weight:700;
color: #000;
}
ul.description-numbers li{
padding-bottom:1rem;
font-size: 15px;
letter-spacing: 0.1em;
}
ul li{
list-style: none;
}
hr{
height:1px;
opacity: 0.5;
width: 100%;
background-color: var(--Dark-grayish-blue);
}
TRY THIS OUT AND LET ME KNOW
Add a center class to your top container.
<div class="container center">
Add this CSS code to your stylesheet
.center {
margin: auto;
width: 50%;
}
I would change the html a little bit for that.
<ul class="bottom-content">
<li>
<span>80K</span>
<span>Followers</span>
</li>
<li>
<span>803K</span>
<span>Likes</span>
</li>
<li>
<span>1.4K</span>>
<span>Photos</span>
</li>
</ul>
And the css
.bottom-content {
display: flex;
justify-content: space-around;
}
.bottom-content > li {
display: flex;
flex-direction: column;
align-items: center;
}
I'm trying to make this page: page
But the header and the section part overlap. I can get it down by adding padding-top: 75px but I'm not sure if that's correct. What is the right thing to do to fix this?
And in the navbar in the example, the space between the list items is more than mine, but I gave the same padding. What is the problem?
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #eee;
}
html,body{
font-family: sans-serif;
height: 100%;
}
header{
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
position: fixed;
min-height: 75px;;
padding: 0 20px;
}
.logo{
width: 60vw;
}
.logo > img{
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20px;;
}
nav > ul{
width: 35vw;
display: flex;
justify-content: space-around;
}
li{
list-style: none;
}
a{
color: #000;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<div class="logo">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="" class="header-img">
</div>
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>How It Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<section id="hero">
<h2>Hadcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" placeholder="Enter your email...">
<input type="submit" id="submit">
</form>
</section>
</body>
</html>
Always use fix for inner div not the outer div
As you have given position fixed to navbar, just give it :
Position:absolute;
And make innner div in it then give this div position relative
Position:fixed;
I'm making a simple web page for practice and attempting to incorporate an image gallery, but I think I messed up my divs somehow because when I add content to the main part like image thumbnails they cause a weird gap between the header and left navbar. It's probably some simple solution but I'm super beginner so it's escaping me. Any help at all is appreciated, thanks in advance!
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<title>Lab 8</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img class= "image" alt="flower" src="flower.jpg"style="max-width:100%;height:auto;">
<h1 class="header">Photos By Doug</h1>
<div id ="wrapper">
<main> Here is some content info about Doug Kowalski Photography
<img src="desert.jpg" class="thumbnail" height="100" width="100" />
<img src="hills.jpg" class="thumbnail" height="100" width="100"/>
</div>
<div class="nav">
Home<br>
Journals<br>
Books<br>
Nature<br>
Contact<br>
</div>
<img class ="image2" alt="vine" src="vine.jpg"style="max-width:100%;height:auto;">
</main>
</body>
</html>
And CSS:
body {
background-color: #88abc2;
margin:0;
}
.image{
height: 250px;
border-radius:5px;
background-repeat: no-repeat;
padding-bottom:10px;
float:left;
width: 25%
}
.header{
display:flex;
padding-top: 100px;
color: white;
text-align: center;
font-size: 50px;
font-family: papyrus;
background-color:#49708A;
justify-content: center;
align-items:center;
}
#wrapper {
height:100%;
margin: 10px;
padding: 0px;
width:67%;
}
.nav {
height: 100%;
width: 20%;
padding-top: 40px;
background-color:#49708A;
}
.nav a{
padding-left:3px;
padding: 6px 6px 6px 32px;
font-weight: bold;
color: #EBF7F8;
text-decoration: none;
font-size: 25px;
display: block;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
}
.nav a:hover {
color: #CAFF42;
}
main{
padding-top: 38px;
text-align:left;
padding-left: 30%;
}
.image2{
height:10%;
width:15%;
position: absolute;
right: 0px;
bottom: 0px;
right:0px;
bottom: 0px;
}
.thumbnail:hover {
position:relative;
top:-25px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
}
Edit: and a photo of the area in question:
Do you mean like this?
I saw this:
<div id=wrapper>
<main>
</div>
</main>
Edit: Mistyped styles.css
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 just started playing around with HTML and CSS a few weeks ago and would appreciate some help. I am looking for an elegant way to align several elements in a header.
I am unfamiliar with using grids. I tried using display: inline-block and display: table but i didnt get it to work the way Id like to. So I had to use floats, which works, but i feel like its forced.
Id also like to have the content appear in the same range as .nav-content, but I guess 55% of the container will be different than 55% of the header?
Anyways, heres the code:
* {
box-sizing: border-box;
}
.container {
max-width: 100%;
height: 100%;
}
/******************************************
Header / Navbar
*******************************************/
.navigation {
width: 100%;
border-bottom: solid 1px #eee;
position: fixed;
Z-Index: 500;
font-size: 14px;
box-sizing: border-box;
font-weight: 400;
font-style: normal;
line-height: 1.6;
min-height: 65px;
padding-top: 10px;
}
.nav-content {
width: 55%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.nav-logo,
.navigation li {
float: left;
}
.nav-right,
.nav-btn {
float: right;
}
.nav-left {
font-size: 26;
padding-left: 1%;
padding-top: 0.5%;
}
.nav-left li {
margin-right: 1%;
margin-left: 1%;
}
.navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-right {
padding-right: 1%;
margin-top: -25px;
}
<head>
<meta charset="UTF-8">
<meta name="description" content="We are medium. We write about startups.">
<meta name="keywords" content="Medium, blogging, startups, entrepreneurship, Unternehmer, Gründung, Unternehmensgründung, gründen, Venture Capital, Business Angel, Investor, Wagniskapital, Risikokapital">
<meta name="author" content="William Middendorf">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Medium</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container">
<div class="navigation">
<!--Navigation-->
<div class="nav-left">
<ul>
<li><i class="fa fa-bars"></i>
</li>
<li><i class="fa fa-search"></i>
</li>
</ul>
</div>
<div class="nav-content">
<div class="nav-logo">Blogger</div>
<div class="nav-btn">
<button class="wrt-btn">Schreib' einen Artikel</button>
</div>
</div>
<div class="nav-right">
<ul>
<li>Log In
</li>
<li>Register
</li>
</ul>
</div>
</div>
<!--End of Navigation / Header-->
</div>
<!--End of Container-->
</body>
Float is bad way to go here. You will not be able to center them later in mobile view, if needed.
Use display: inline-block; and don't leave spaces or new lines is html code between the buttons, to avoid gap between them.
using inline-block and width percentages and text-align, you can avoid using floats and margins. here's a demo: http://jsfiddle.net/swm53ran/349/
.section, li, .nav-logo, .nav-btn {
display:inline-block;
}
.nav-left, .nav-right, .nav-content {
width: 32%;
}
.nav-right {
text-align: right;
}
.nav-logo, .nav-btn {
width: 49%;
}