I'm currently working on a site for a small business when i ran into a problem, when trying to apply a border radius to a div it only applies it to the left side, i have searched google and stack overflow for a similar answer but haven't found anything.
body
{
background-color: #e0e0e0;
}
#banner
{
background-color: #404040;
height: 10em;
border-radius: 1em;
box-shadow: -0.1em 0.3em;
}
#bannerimg
{
height: 65%;
margin-left: 1em;
margin-top: 1em;
}
#container
{
margin-left: 20em;
margin-top: -7em;
overflow: hidden;
border-radius: 1em;
}
.list
{
float: left;
padding: 1.5em;
font-size: 2em;
color: #067411;
background-color: #e0e0e0;
}
<header id="banner">
<div id="container">
<a class="list">Services</a>
<a class="list">Remote Support</a>
<a class="list">Home</a>
<a class="list">About Us</a>
<a class="list">Contact Us</a>
<div>
</header>
If anyone has an answer it would be greatly appreciated
The background color is overlapping the header div.
body
{
background-color: #e0e0e0;
}
#banner
{
background-color: #404040;
height: 10em;
border-radius: 1em;
box-shadow: -0.1em 0.3em;
}
#bannerimg
{
height: 65%;
margin-left: 1em;
margin-top: 1em;
}
#container
{
margin-left: 20em;
margin-top: -7em;
overflow: hidden;
border-radius: 1em;
}
.list
{
float: left;
padding: 1.5em;
font-size: 2em;
color: #067411;
/*background-color: #e0e0e0;*/
}
<header id="banner">
<div id="container">
<a class="list">Services</a>
<a class="list">Remote Support</a>
<a class="list">Home</a>
<a class="list">About Us</a>
<a class="list">Contact Us</a>
<div>
</header>
By adding flexbox styling you can get the result you wish.
body{
background-color: #e0e0e0;
}
#banner{
background-color: #404040;
height: 7em;
border-radius: 1em;
box-shadow: -0.1em 0.3em;
display: flex;
padding: 5px;
}
#bannerimg{
height: 65%;
margin-left: 1em;
margin-top: 1em;
}
#container{
background-color: #e0e0e0;
display: flex;
margin-left: auto;
margin-right: auto;
border-radius: 1em;
align-items: center;
}
.list{
padding: 1.1em;
font-size: 1.2em;
color: #067411;
}
<header id="banner">
<div id="container">
<a class="list">Services</a>
<a class="list">Remote Support</a>
<a class="list">Home</a>
<a class="list">About Us</a>
<a class="list">Contact Us</a>
</div>
</header>
Related
I'm having problems trying to make the bottom of my div to look like this.
I tried using border radius to get the curved result at the bottom right but I don't know how can I create this straight line at an angle.
Here's my current code.
<div>The code is in the link</div>
Check out this code and use the transform property Perspective
transform: perspective(value);
The mention thing is an illustration used as the background image. It would be a good practice if you try it so check out my Codepen Work for source code.
.innerlayer{
width: 650px;
height: 400px;
background-color: #00bcd4;
margin: auto;
transform: perspective(1000px) rotatey(18deg);
border-bottom-right-radius: 35%;
}
.outerlayer{
position: relative;
padding: 0px;
}
.tophidden{
width: auto;
height: 80px;
background-color: #fff;
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
}
<div class="outerlayer">
<div class="tophidden">
<div class="innerlayer"></div>
</div>
</div>
Watch it in full screen view
I suggest you to use :before pseudo element, and skew it.
Here you can find your modified code
body {
margin: 0;
}
.navbar {
// make sure wrapper of pseudo has position: relative
position: relative;
&:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
background: linear-gradient(72deg, rgba(100,36,220,1) 0%, rgba(118,107,254,1) 100%);
// set border radius size
border-bottom-right-radius: 10rem;
// set skew angle
transform: skewY(-2deg);
transform-origin: left bottom;
}
.container {
display: flex;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
max-width: 1270px;
width: 100%;
padding: 1.125rem 1.5rem 1.125rem 1.5rem;
}
.logo {
color: white;
margin-right: 3em;
text-transform: lowercase;
font-size: 42px;
align-items: center;
font-weight:700;
}
nav {
display: flex;
margin-top: 1em;
}
.primary-nav {
display: flex;
align-items: center;
}
.nava {
font-size: 20px;
font-weight: 400;
}
a {
color: white;
margin-right: 1em;
}
.second-nav {
display: flex;
align-items: center;
}
.contact-nav {
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
color: #5008d9;
background:white;
border-radius: 360px;
padding: 0.9rem 2rem 0.9rem 2rem;
}
.cda {
display: flex;
justify-content: space-between;
padding-top: 5em;
padding-bottom: 5em;
}
.cta-left {
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
margin-top: 5em;
padding-bottom: 15em;
}
h2 {
color: white;
font-size: 70px;
font-weight: 600;
line-height: 1.0;
}
p {
color: white;
}
.cta-right {
width: 50%;
}
img {
width: 100%;
}
.cta-p {
margin-top: 2em;
}
.learn-more {
margin-top: 3em;
}
.learn {
font-size: 20px;
font-weight: 500;
text-transform: uppercase;
color: black;
background:#00dadc;
border-radius: 360px;
padding: 0.9rem 4rem 0.9rem 4rem;
}
}
<header>
<div class="navbar">
<div class="container">
<nav>
<ul class="primary-nav">
<a class="logo" href="#">Agency</a>
<li><a class="nava" href="#">Home</a></li>
<li><a class="nava" href="#">About Us</a></li>
<li><a class="nava" href="#">Our Services</a></li>
<li><a class="nava" href="#">Support</a></li>
</ul>
</nav>
<nav>
<ul class="second-nav">
<li><a class="contact-nav" href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="cda">
<div class="cta-left">
<h2>Creative <br> Design Agency</h2>
<p class="cta-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Etiam vel dolor id nulla gravida blandit.</p>
<div class="learn-more">
<a class="learn" href="#">Learn More</a>
</div>
</div>
<div class="cta-right">
<img src="images/doge.jpeg" alt="">
</div>
</div>
</div>
</div>
</header>
I was coding my website when I realized that my Type to search button is quite high on the Website. Is there a way that I can get that to come down a bit? Here is my code For this project. Also if you see anyway that I can improve this website please tell me, also could you please help give me some tips on how I can make my code neater and more readable. Over all the type to search is the biggest problem to fix but if you see some others please let me know. Thank you!
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<link href="context/styles.css" rel="stylesheet" type="text/css">
<link href="Webfonts/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul class="navbarlist">
<li class="navbarimg"><img class="navbarlogo" src="img/LOGO.png"></li>
<li class="navbarelementL">Browse</li>
<li class="navbarelementL">Today's Deals</li>
<li class="navbarelementR">Shopping Cart</li>
</ul>
<div class="searchbox">
<input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#"></a>
<i class="fas fa-search"></i>
</div>
</div>
<div class="banner">
<img class="titleimg" src="img/TITLE.jpg">
</div>
<div class="row">
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
</div>
</div>
<div class="bottomnav">
<div class="bottomlogo">
<img class="navbarlogo2" src="img/LOGO.png">
</div>
<div class='nav'>
<div class='left'>
<ul>
<li class="bottomelement">About Us</li>
<li class="bottomelement">Affiliates</li>
</ul>
</div>
<div class='right'>
<ul>
<li class="bottomelement">TOS</li>
<li class="bottomelement">Fourth </li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
/*General*/
h2{
font-family: 'Ubuntu', sans-serif;
justify-content: center;
margin: auto;
}
body{
margin:0;
padding:0;
}
/*Navbar*/
.navbar{
float: left;
width: 100%;
background-color: rgb(248, 138, 180);
}
.navbarlogo{
width: 60px;
height: auto;
}
.navbarlist{
list-style-type:none;
font-family: 'Ubuntu', sans-serif;
}
.navbarelementL{
display: inline-block;
margin-right: 10px;
transition-property: all;
transition-duration: 1s;
float: left;
}
.navbarelementL:hover{
display: inline-block;
margin-right: 10px;
font-size: 20px;
}
.navbarelementR{
display: inline-block;
margin-right: 10px;
transition-property: all;
transition-duration: 1s;
float:right;
}
.navbarelementR:hover{
display: inline-block;
margin-right: 10px;
font-size: 20px;
}
/*end*/
.navbarimg{
display: inline-block;
margin-right: 30px;
float:left;
}
.popupnavimg{
display: inline-block;
margin-right: 30px;
float:left;
}
.popupimg{
width: 40px;
height:auto;
}
.searchbox{
position: absolute;
top: 35px;
left: 50%;
transform: translate(-50%,-50%);
background: rgb(255, 255, 255);
height: 50px;
border-radius: 40px;
padding: 5px;
}
.searchbox:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.searchbox:hover > .search-btn{
background: white;
}
.search-btn{
color: black;
float: right;
width: 50px;
height: 50px;
border-radius: 50%;
background: skyblue;
display: flex;
justify-content: center;
align-items: center;
transition: 0.7s;
}
.search-txt{
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.7s;
line-height: 40px;
width: 0;
}
.fas{
position: absolute;
margin-left: 18.0px;
margin-top: 18.5px;
size: 40px;;
}
.titleimg{
width:100%;
}
/*grid1*/
/* Three image containers (use 25% for four, and 50% for two, etc) */
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 10px;
}
body {
margin:0
}
body {
margin:0
}
.bottomnav {
width: 100%;
background-color: rgb(248, 138, 180);
position: relative;
}
.navbarlogo2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 120px;
text-decoration: none;
position: absolute;
filter: brightness(10);
top: 15px;
left: calc(50% - 60px) /*center top left corner then remove half logo width (120px)*/
}
/*bottombar*/
.nav {
display: grid;
grid-gap: 120px;
grid-template-columns: 1fr 1fr;
}
.nav ul {
padding-left: 0;
}
.nav ul li {
list-style: none;
text-align: center;
padding-left: 0;
}
.left,
.right {
flex: 1;
}
.bottomelement{
font-size: 20px;
}
.bottomelement:hover{
font-size: 25px;
transition-duration: 1s;
}
Try adding margin-top to
.search-txt {
//...
margin-top: 7px;
}
Check the fiddle here
To answer your other questions, normally IDE's has formatting options included. Else you can use online sites like cleancss.com for CSS or htmlformatter.com for HTML or beautifier.io for JavaScript.
This is NetBeans. I have tried to include an external CSS file but when used externally the images all get really enlarged. Whereas my I use the same styling within the html file using internal styling the images are of correct ratio.
body {
width: 100%;
height: 100%;
margin: 0;
}
.header {
background-color: #000;
color: #fff;
border-color: #080808;
min-height: 50px;
border: 1px solid transparent;
}
.inner header {
width: 80%;
margin: auto;
}
.logo {
float: left;
height: 50px;
padding: 15px;
font-size: 20px;
font-weight: bold;
padding-left: 90px;
}
a {
text-decoration: none;
background-color: transparent;
color: #ededed;
}
.header link {
float: right;
font-size: 14px;
height: 50px;
padding: 15px 15px;
font-size: 16px;
font-weight: bold;
}
#su {
float: right;
height: 50px;
padding: 15px 90px;
}
#l {
float: right;
height: 50px;
padding: 15px 0px;
}
.content {
min-height: 600px;
}
.banner-image {
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
color: #f8f8f8;
background: url(image/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image {
padding-top: 12%;
width: 80%;
margin: auto;
}
.banner-content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow: hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
margin-left: 200px;
}
.button {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.container {
width: 90%;
margin: auto;
overflow: hidden;
}
.items {
width: 30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float: left;
margin-left: 1%;
}
.thumbnail {
display: block;
max-width: 100%;
height: auto;
}
.caption {
color: #000;
padding: 0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer {
background-color: #000;
color: #fff;
font-size: 14px;
text-align: center;
}
<html>
<head>
<title>Lifestyle Store</title>
</head>
<body>
<div class="header">
<div class="inner header">
<div class="logo">
Lifestyle Store
</div>
<div class="header link">
<div id="su">
Sign Up
</div>
<div id="l">
Login
</div>
</div>
</div>
</div>
<div class="content">
<div class="banner-image">
<div class="inner-banner-image ">
<div class="banner-content">
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF on premium brands</p>
<form>
Shop Now
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<img src="image/camera.jpg" class="thumbnail">
<div class="caption">
<h2>Cameras</h2>
<p>Choose among the best from the world</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/watch.jpg" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/shirt.jpg" class="thumbnail">
<div class="caption">
<h2>Shirts</h2>
<p>Our exquisite collection of shirts</p>
</div>
</a>
</div>
</div>
<footer>
<div class="container">
<p>Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p>
</div>
</footer>
</body>
</html>
Have you linked the CSS file correctly in this line? Try dragging and dropping the file directly into the HTML to ensure the location and name is correct.
href="assignment1/public_html/style.css"
Edit:
The current link you have is saying that you have the index.html file outside of the 'assignment1' folder. If you have your HTML file inside 'public_html' then the stylesheet link should be the following.
href="style.css"
So I'm using hero image for my website which is 100 vh high. Now the image is positioned absolutely, so I could position other elements like logo, nav and text on the image relatively to it. After this section, I want to start new section with new image and other text, but once I start new row, column and try to put new image with h1 text, it's hiding behind earlier image. What I mean is that I want a new section with new image and <h1> text appear under the hero image and not overlap it or hide under it as it is now hiding. It's not floated or anything, my floats are cleared, so I don't get it why is this hapenning.
Here is some codepen so you would understand what is hapenning.
<div class="container-fluid clearfix">
<div class="row">
<div class="col-lg-12">
<div class="hero_img">
<img class="logo" src="assets/logo.png"></img>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
☰
</button>
<div class="collapse">
<div class="col-xs-12">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
</ul>
</div>
</div>
<div class="black_box clearfix"><h1>Kolding Bike Marathon</h1></div>
<div class="black_box_sub clearfix"><p>Bring activity to your life again</p></div>
<button type="button" class="btn btn-outline-secondary">Register now</button>
<button type="button" class="btn btn-success">Learn more</button>
</div>
</div>
</div>
</div>
</div>
<div class="section_one">
<h1>heyyyyy</h1>
</div>
.hero_img {
background-image: url("assets/hero.jpg");
width: auto;
height: 100vh;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 999;
overflow: hidden;
clear: both;
}
.hero_img {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
}
.logo {
position: relative;
left: 20px;
top: 20px;
z-index: 1002;
width: 5%;
min-width: 50px;
}
.nav {
position: relative;
top: 0;
z-index: 1000;
margin-top: 20px;
/*margin-right: 15px;*/
padding: 20px;
/*float: right;*/
width: auto;
flex-direction: column;
background: #555;
/*width: 100%;*/
filter: opacity(0.93);
}
a {
text-decoration: none;
color: white;
display: block;
border-bottom: 1px solid #444;
}
a:hover {
color: #999;
}
.nav-item {
display: block;
}
.navbar-toggler {
/*float: right;*/
display: flex;
justify-content: right;
position: relative;
z-index: 1000;
margin-top: 15px;
margin-right: 15px;
color: white;
float: right;
}
.black_box {
position: relative;
width: 45%;
min-width: 400px;
text-align: center;
z-index: 1000;
background: black;
margin-top: 10%;
padding: 10px 30px;
clear: both;
}
.black_box h1 {
color: white;
/*font-family: 'PT Sans', sans-serif;*/
font-family: 'Montserrat', sans-serif;
font-weight: 600;
letter-spacing: 1.5px;
}
.black_box_sub {
position: relative;
width: 30%;
min-width: 310px;
text-align: center;
z-index: 1001;
background: black;
margin-top: 2%;
clear: both;
margin-left: 90px;
}
.black_box_sub p {
color: white;
padding: 5px 25px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
padding-top: 10px;
padding-bottom: 0px;
}
Codepen: http://codepen.io/Limpuls/pen/NpbwYp
There are multiple items to clean up in the code, but to keep the images from overlapping you can remove both entries of position: absolute; from the .hero_img class.
After that, remove the padding left and right from all of the media queries of container-fluid. This may affect and other padding that was needed in that container but would be a quick path to do what you are asking.
How do I put these <a>'s in the center of the div, next to each other with 40px of space in between them inside of a 100% width div?
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
#container {
width: 100%;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>
You can do this by using display:flex and justify-content:center on #container
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
a.explore:first-child {
margin-right:40px;
}
#container {
width: 100%;
display:flex;
justify-content: center;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>
These aren't buttons...they're links...there's a difference.
However, flexbox is ideal here:
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
#container {
width: 100%;
display: flex;
justify-content: center;
padding: 1em;
background: #c0ffee;
}
a:first-child {
margin-right: 20px;
}
a:last-child {
margin-left: 20px;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>