Here's my code. Can someone please help me understand why isn't my container div taking it's full height ?
I can only "fix" the problem by giving a fixed height, but I want it to take full height no matter how much content there is in it. It seems that something collapse, it won't expand and my footer keeps coming up.
Sorry if it is not clear and thank you for your answers.
/************* GLOBAL ***************/
* {
padding:0;
margin:0;
}
body{
margin: 0;
padding: 0;
background-color: #e6ccff;
font-size: 62.5%;
height: 100vh;
position:absolute;
}
.containerHead{
width: 80%;
height: 70px;
margin: 0 auto;
padding: 0 20px 0 20px;
/*border: 1px solid black;*/
}
.clr{
clear: both;
}
/************* HEADER *************/
header{
/*background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;*/
height: 70px;
background-color: rgba(0, 0, 0, 0.1)
}
.logo1 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: left;
}
.logo1 img{
display: inline-block;
width: 100px;
height: 60px;
}
.logo2 {
padding: 5px 10px 0 5px;
font-size: 20px;
float: right;
}
.logo2 img{
display: inine-block;
width: 100px;
height: 60px;
transform: rotateY(180deg);
}
.navbar {
overflow: hidden;
width: 70%;
margin: 0;
position: absolute;
top: 28px;
margin-left: 250px;
width: 50%;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
margin-left: 50px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li {
float: left;
margin-left: 10px;
background-color: rgba(0, 0, 0, 0.1)
}
.navbar ul li a{
display: inline-block;
padding: 10px 15px;
text-decoration: none;
color: rgb(255, 255, 35);
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-family: 'Raleway', sans-serif;
background-color: rgba(0, 0, 0, 0.1)
}
.nav-item1 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item1 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item2 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item2 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item3 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item3 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item4 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item4 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
.nav-item5 :after{
content:"";
display: block;
height: 2px;
width: 0px;
background-color: transparent;
margin: 3px auto 0;
transition: .5s;
}
.nav-item5 :hover:after{
background-color: rgb(255, 255, 35);
width: 100%;
}
/*************** BANNER *****************/
.banner{
width: 100%;
height: 550px;
background-image: url('basket.jpeg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-bottom: 5px outset #528;
position: relative;
z-index: 1;
}
.cali {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 400px;
background-image: url('cali.png');
background-size: cover;
z-index: 10;
transform: rotateZ(30deg);
}
/*************** CONTENT ****************/
.container{
width: 80%;
min-height: 100vh;
margin: 0 auto;
position: relative;
padding: 30px 30px 0;
/*border: 1px solid black;*/
clear:both;
background-color: #FFF;
height: 100vh;
overflow:hidden;
}
.title{
margin: 0 auto;
width: 380px;
text-align: center;
}
.box1 {
border: 1px solid black;
width: 80%;
margin: 0 auto;
position: relative;
top: 50px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: space-between;
}
/******************* FOOTER ***************/
footer{
background-color: #528;
height: 70px;
box-shadow: 5px 5px 25px 7px #417 inset;
}
<!DOCTYPE html>
<html lang="fr">
<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">
<title>California Purple Eagles</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="eagle.png">
</head>
<body>
<header>
<div class="containerHead">
<span class="logo1"><img src="eagle.png" alt=""></span>
<nav class="navbar">
<ul>
<li class="nav-item1">Home</li>
<li class="nav-item2">Our Team</li>
<li class="nav-item3">Match Schedule</li>
<li class="nav-item4">Gallery</li>
<li class="nav-item5">Contact</li>
</ul>
</nav>
<span class="logo2"><img src="eagle.png" alt=""></span>
</div>
<div class="clr"></div>
</header>
<div class="banner">
<div class="cali">
<div class="clr"></div>
</div>
</div>
<div class="container">
<div class="title" id="titleteam">
<img src="ourTeam.png" alt="" class="team">
</div>
<div class="box1">
<img src="https://via.placeholder.com/100" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div><br><br><br><br><br><br><br>
<footer>
</footer>
</body>
</html>
could you try this? Adding display flex and making the padding to 0 normally helps me.
.container{
width: 80%;
margin: 0 auto;
position: relative;
padding: 0;
/*border: 1px solid black;*/
clear:both;
background-color: #FFF;
height: 100vh;
display:flex;
overflow:hidden;
}
I'm not quite sure what are you trying to achieve, but if you want your .container element to expand with its content, remove the positioning of the content. In your case, remove the position: relative; from .box1 and also remove height: 100vh; and min-height: 100vh; from .container so it can calculate its height itself.
Related
I've been seeing a trend lately of navigation bars shaped like this:
Wavey Navbar
I want to create such a navbar in my website, however, I can't seem to figure out how to do this.
I'm using reactjs, so I'm basically working with Html & CSS. Everything I try keeps giving me sharp edges like in the next picture:
My Navbar
I'm not even sure that I'm doing it right, but I can't seem to get it to be smooth and the shadow for some reason is not appearing in the half circle.
My code is as follows:
.navbar {
flex-wrap: nowrap;
width: 100vw;
height: 65px;
align-content: stretch;
justify-content: space-between;
position: fixed;
bottom: 0;
left: 0;
box-shadow: 0 -3px 5px 0 rgba(0,0,0,.09);
z-index: 999;
}
.navLink {
width: 20%;
height: 100%;
flex-direction: column;
font-size: xx-small;
justify-content: center;
font-weight: 700;
-webkit-transition: all 1s;
transition: all 1s;
background-color: #FFFFFF;
align-items: center;
}
.selectedLink {
padding-bottom: 25px;
height: 40px;
background-color: white;
background: radial-gradient(circle at top, transparent 34px, #FFF 20px);
display: flex;
flex-direction: row;
}
.icon {
width: 26px;
height: 26px;
}
.selectedLinkImage {
border-radius: 200px;
margin-bottom: 37px;
background-color: #564cac;
padding: 7px;
border: 6px solid transparent;
box-shadow: 0 -3px 5px 0 rgba(0,0,0,.50);
}
<nav class="navbar">
<div class="navLink selectedLink" id="feed-link">
<img class="icon selectedLinkImage" src="/static/media/home-active.9de5b1c3.svg" alt="feed button">
</div>
<div class="navLink" id="discover-link">
<img class="icon" src="/static/media/discover.a882adf8.svg" alt="discover button">
</div>
<div class="navLink" id="map-link">
<img class="icon" src="/static/media/map.9188e95b.png" alt="like button"> </div>
<div class="navLink" id="like-link">
<img class="icon" src="/static/media/heart.754f2ae1.svg" alt="like button"> </div>
<div class="navLink" id="purchase-link">
<img class="icon" src="/static/media/purchased.9bc694d4.svg" alt="purchased button">
</div>
</nav>
I think the easiest way is to do this with an image:
.header {
width: 600px;
height: 250px;
background: rgb(102, 100, 150);
background: linear-gradient(90deg, rgba(102, 100, 150, 1) 0%, rgba(9, 88, 121, 1) 32%, rgba(0, 212, 255, 1) 100%);
position: relative;
padding: 15px;
}
.container {
position: absolute;
width: 600px;
height: 150px;
top: 100px;
display: flex;
flex-direction: row;
}
.circle {
background-color: lightblue;
border-radius: 50%;
width: 130px;
height: 130px;
position: absolute;
left: 75px;
top: 40px;
}
.cutout {
width: 150px;
height: 150px;
background-image: url('data:image/png;base64,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');
}
.left {
width: 50px;
height: 150px;
background-color: white;
border-radius: 15px 0 0 15px;
}
.right {
width: 400px;
height: 150px;
background-color: white;
border-radius: 0 15px 15px 0;
}
<div class="header">
<div class="circle"></div>
<div class="container">
<div class="left"></div>
<div class="cutout"></div>
<div class="right"></div>
</div>
</div>
I tried looking on google but couldn't find anything relevant. I think it's because I transformed it to 1.1 scale but then shouldn't the shadow also increase in size with it?
<body>
<div id="landing">
<nav id="main-nav">
<div class="container">
<div class="logo">
<img src="./img/logo_final-final.png" alt="">
</div>
<div class="nav-btns btns-container">
<div>Home</div>
<div>Store</div>
<div>Offers</div>
<div>FAQs</div>
<div>Contact Us</div>
</div>
</div>
</nav>
</div>
</body>
CSS- *{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
#landing{
position: absolute;
width: 100vw;
height: 100vh;
background: url(/html/img/landing\ background.png) no-repeat center center/cover;
}
#main-nav{
position: relative;
top: 5%;
margin: auto;
width: 90%;
background: #007FFF 0% 0% no-repeat padding-box;
box-shadow: 0px 10px 40px #00000029;
border-radius: 40px;
opacity: 0.9;
}
#main-nav *{
border: 1px black soli
}
#main-nav .container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
#main-nav .container .logo {
width: 7%;
height: 5%;
background-color: #FFFFFF;
border-radius: 3rem;
transform: scale(1.1);
z-index: 2;
box-shadow: 5px 10px #00000029;
}
#main-nav .container .logo img{
position: relative;
max-width: 100%;
height: auto;
}
I don't know how much more detail to write so if you will have any questions let me know.
Hello please try do this css if you agree.
#main-nav .container .logo {
box-shadow: 0px 0px 10px 1px #000;
}
it looks like the shadow to div.logo works fine
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
#landing{
position: absolute;
width: 100vw;
height: 100vh;
background: url(/html/img/landing\ background.png) no-repeat center center/cover;
}
#main-nav{
position: relative;
top: 5%;
margin: auto;
width: 90%;
background: #007FFF 0% 0% no-repeat padding-box;
box-shadow: 0px 10px 40px #00000029;
border-radius: 40px;
opacity: 0.9;
}
#main-nav *{
border: 1px black soli
}
#main-nav .container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
#main-nav .container .logo {
width: 7%;
height: 5%;
background-color: #FFFFFF;
border-radius: 3rem;
transform: scale(1.1);
z-index: 2;
box-shadow: 5px 10px #00000029;
}
#main-nav .container .logo img{
position: relative;
max-width: 100%;
height: auto;
}
<body>
<div id="landing">
<nav id="main-nav">
<div class="container">
<div class="logo">
<img src="./img/logo_final-final.png" alt="">
</div>
<div class="nav-btns btns-container">
<div>Home</div>
<div>Store</div>
<div>Offers</div>
<div>FAQs</div>
<div>Contact Us</div>
</div>
</div>
</nav>
</div>
</body>
Hey!
As you see in the picture I want to move the existing chatwindow to the right side where the red box is.
And I also need the box to change the height of itself when the window is made smaller.
The grid is from semantic.ui.
EDIT: On some request the whole css and parent html container is given. Hope this helps to solve the problem.
Thanks!
HTML:
<div class="two column doubling ui grid">
<div class="column">
<div class="ui segment">
1
</div>
</div>
<div class="computer only column">
<div class="chat_window">
<div class="top_menu">
<div class="buttons">
<div class="button maximize">
<h4 id="Online"></h4>
</div>
</div>
<div class="title">Chat</div>
</div>
<ul class="messages"></ul>
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper"><input class="message_input" placeholder="Type your message!" /></div>
<div class="send_message">
<div class="text">Send</div>
</div>
</div>
</div>
<div class="message_template">
<li class="message">
<div class="avatar"></div>
<div class="text_wrapper">
<div class="msgname"><a id="steamlink" target="_blank"><p id="msgname"></p></a></div>
<div class="text"></div>
</div>
</li>
</div>
</div>
</div>
CSS:
.chat_window {
width: 100%;
max-width: 450px;
background-color: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
background-color: #f8f8f8;
overflow: hidden;
}
.top_menu {
background-color: #fff;
width: 100%;
padding: 20px 0 15px;
box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
}
.top_menu .buttons {
margin: 3px 0 0 20px;
position: absolute;
}
.top_menu .buttons .button {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
position: relative;
}
.top_menu .buttons .button.close {
background-color: #f5886e;
}
.top_menu .buttons .button.minimize {
background-color: #fdbf68;
}
.top_menu .buttons .button.maximize {
background-color: #a3d063;
}
.top_menu .title {
text-align: center;
color: #bcbdc0;
font-size: 20px;
}
#Online{
margin: 0 0 0 20px;
color: #bcbdc0;
}
.messages {
position: relative;
list-style: none;
padding: 20px 10px 0 10px;
margin: 0;
height: 600px;
overflow-y: scroll;
}
.messages .message {
clear: both;
overflow: hidden;
margin-bottom: 10px;
transition: all 0.5s linear;
opacity: 0;
}
.messages .message.left .avatar {
background-size: 100%;
float: left;
}
.messages .message.left .text_wrapper {
background-color: #DFDFDF;
margin-left: 20px;
}
.messages .message .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
display: inline-block;
}
.messages .message .msgname {
font-weight: bold;
}
.messages .message .text_wrapper {
display: inline-block;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 6px;
width: calc(100% - 85px);
min-width: 100px;
position: relative;
}
.messages .message .text_wrapper .text {
font-size: 14px;
font-weight: 250;
}
.bottom_wrapper {
position: relative;
width: 100%;
background-color: #fff;
padding: 10px 10px;
bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
display: inline-block;
height: 50px;
border-radius: 5px;
border: 1px solid #bcbdc0;
width: calc(100% - 100px);
position: relative;
padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
border: none;
height: 100%;
box-sizing: border-box;
width: calc(100% - 40px);
position: absolute;
outline-width: 0;
color: gray;
}
.bottom_wrapper .send_message {
width: 90px;
height: 50px;
display: inline-block;
border-radius: 5px;
background-color: #563D7C;
color: #fff;
cursor: pointer;
transition: all 0.2s linear;
text-align: center;
float: right;
}
Picture:
Click here
I am trying to set three divs side by side with each equal width and height.
I am unable to remove that extra space at right at right most div. If I set its margin-right to 0 the rightmost div becomes bigger than other two.
Here is the fiddle.
Css:
.recordpopup {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba( 0, 0, 0, .8);
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.recordpopup .retry {
background-color: black;
border: 1px solid white;
xborder-radius: 8px;
box-sizing: border-box;
color: white;
font-family: ProximaNova-Regular;
font-size: 16px;
font-weight: bold;
xheight: 50px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
position: relative;
text-align: center;
top: 30%;
width: 40%;
z-index: 15000;
border-radius: 8px;
padding: 20px 10px;
background-image: url('images/gray_bar.png');
background-repeat: repeat-x;
background-color: white;
}
#product-wrapper {
overflow: hidden;
margin-top: 25px;
}
.product {
float: left;
width: 33%;
display: table-cell;
width: 33.33333333%;
}
.product .container {
margin-right: 10px;
padding: 10px;
background-color: #000;
}
.product .container img {
display: block;
margin: 0 auto;
width: 100%;
}
#closeRecord {
background: black none repeat scroll 0 0;
border: 2px solid white;
border-radius: 50%;
color: white;
cursor: pointer;
height: 25px;
right: -15px;
left: right;
position: absolute;
top: -10px;
width: 25px;
}
Html:
<div class="recordpopup">
<div class="retry">
<div id="closeRecord">x</div>
<div style="width: 100%;text-align: left;margin: 5px 0;font-size: 12px;color:#333;"><span class="TitleText">Lorem Ipsum Lorem Ipsum</span> </div>
<div id="product-wrapper">
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
<div class="product">
<div class="container">
<img src="images/circle.png">
<p>Dummy</p>
</div>
</div>
</div>
</div>
</div>
Here is my solution.
The key is removing the margin-right: 10px and adding
.product:nth-child(1) .container{
margin-right:5px;
}
.product:nth-child(2) .container{
margin: 0 5px 0 5px;
}
.product:nth-child(3) .container{
margin-left: 5px;
}
JSFiddle ===> https://jsfiddle.net/kjkk3f9d/1/
The margin-right: 10px was pushing out your divs, replace it with margin: 0 5px to give a uniform look
.product .container {
margin: 0px 5px;
padding: 10px;
background-color: #000;
}
https://jsfiddle.net/kjkk3f9d/3/
check out my fiddle:
https://jsfiddle.net/kjkk3f9d/2/
the important styles are
#product-wrapper {
overflow: hidden;
margin-top: 25px;
display: flex;
justify-content: space-between;
}
.product {
flex-basis:0;
flex: 1 1 auto;
margin: 5px;
}
I am getting problems with the website I'm working on while zooming in and out. The layout is getting messed while zooming.
The items in the header won't stay centered, but moving to the left while zooming out, or moving to the right while zooming in.
Also, I have a image background (in CSS) and it won't stay centered when zooming in. Could I get some help with this problem. Thanks
Here is the HTML and CSS code:
body,
html {
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
margin: 0 auto;
}
#header-wrapper {
background: #ebebeb;
width: 100%;
height: 50px;
position: fixed;
z-index: 10;
box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.65);
}
#header {
width: 80%;
height: 50px;
margin: 0 auto;
bottom: 20px;
position: relative;
}
#logo {
width: 128px;
height: 50px;
background-image: url("pictures/logo2.png");
margin-left: 250px;
float: left;
background-repeat: no-repeat;
position: relative;
top: 28px;
}
#nav-wrapper {
width: 650px;
height: 50px;
margin-right: 340px;
position: relative;
top: 35px;
}
#nav {
font-family: 'Roboto Condensed', sans-serif;
}
#nav li {
list-style-type: none;
display: inline;
padding: 10px;
font-size: 15px;
}
#home {
width: 100%;
height: 810px;
background-image: url("pictures/banner3-2.png");
background-size: cover;
position: fixed;
top: 50px;
}
#about {
width: 100%;
height: 820px;
background: #ebebeb;
position: relative;
top: 860px;
}
#lorem {
width: 100%;
height: 820px;
background: #46717f;
position: relative;
top: 860px;
}
#contact {
width: 100%;
height: 200px;
background: black;
position: relative;
top: 860px;
}
#header-wrapper a {
color: black;
}
#header-wrapper a:link {
color: black;
text-decoration: none;
}
#header-wrapper a:hover {
color: #46717f;
}
#header-wrapper a:active {
color: white;
text-decoration: none;
}
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/8bit-wonder" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<div id="wrapper">
<h1 id="homee"></h1>
<div id="header-wrapper">
<div id="header">
<div id="logo"></div>
<div id="nav-wrapper">
<div id="nav">
<ul class="nav">
<li>HOME
</li>
<li>ABOUT
</li>
<li>LOREM
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="home">
</div>
<div id="about">
</div>
<h1 id="aboutt"></h1>
<div id="lorem">
</div>
<h1 id="loremm"></h1>
<div id="contact"></div>
<h1 id="contactt"></h1>
</div>