Pretty simple question that I'm struggling to solve via Google. My main issue is that I can't seem to figure out how to resize dropdown menu box's borders horizontally. I tried max-width command in css, but it only does it for one side, and my text isn't centered inside that box.
Here's my project where I'm practicing my html/css/js skills: https://project01-assh.web.app
#charset "UTF-8";
#import "https://fonts.googleapis.com/css?family=Poppins:100,200,400,500,600,700,800|Nunito:300,400,600,700,800";
body {
background-color: #2250fc;
}
li {
list-style-type: none;
}
.dropdown {
text-align: center;
position: absolute;
top: 3%;
left: 90%;
transform: translateX(-50%);
color: #ffffff;
font-family: poppins, sans-serif;
font-size: 15px;
font-weight: 555;
display: inline-block;
}
#logo {
position: absolute;
top: 1%;
left: 1%;
color: #ffffff;
text-decoration: none;
font-family: poppins, sans-serif;
font-size: 40px;
font-weight: 800;
letter-spacing: 1.5px;
}
a {
color: #ffffff;
text-decoration: none;
}
h1 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
color: #ffffff;
font-family: poppins, sans-serif;
font-size: 40px;
font-weight: 400;
letter-spacing: .5px;
}
#main_button {
position: relative;
transition: .5s ease;
top: 1%;
left: 90%;
color: #ffffff;
height: auto;
width: auto;
max-width: 100px;
max-height: 100px;
}
nav ul li a {
display: block;
padding: 14px 24px;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li ul {
display: none;
position: absolute;
left: 10%;
top: 50px;
transform: translateX(-70%);
background-color: #fff;
padding: 10px;
border-radius: 15px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 200px;
border-radius: 4px;
}
nav ul li ul li a {
color: black;
font-size: 12px;
font-family: poppins, sans-serif;
font-weight: 555;
padding: 8px 14px;
}
nav ul li ul li a:hover {
color: #007bff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Project01" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project01</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="logo"> <span class="logo">АСБ</span> </div>
<h1> Автоматические Системы Безопастности</h1>
<div class="dropdown">
<nav>
<p></p>
<ul>
<li>Сервисы
<ul>
<li>Something01</li>
<li>Something02</li>
<li>Something03</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="particles-dots" class="particles"></div>
<script src="plugins/particles/particles.js"></script>
<script src="plugins/particles/particles-dots.js"></script>
</body>
</html>
Dropdown menu is to the right. I'd really appreciate if you can point out bad practices/mistakes in my code so far. I'm trying to learn web development the proper way as a long term career.
Thanks for your time and have a wonderful day!
Sorry for such basic request, I hope it's okay to ask it here.
if you want to resize the nav bar, you need to remove the 200px in li:
nav ul li ul li {
width: 200px;
border-radius: 4px;
}
and use padding or margin if you need more space.
Related
I am making a responsive navigation bar. When i am making it in mobile view with hamburger it is not working. I am using checkbox for this. When someone click the hamburger menu in mobile view the check box will checked and css of the check box with type checked will display it. Code is given below.
<!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">
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<script src="./javascript.js"></script>
<title>Pricing Page</title>
</head>
<body>
<!-- Navigation -->
<nav>
<input type="checkbox" id="check">
<div class="logo">
<h3>Spenflo</h3>
</div>
<div class="menus">
<ul class='menu'>
<li> Pricing</li>
<li> About </li>
<li> Blog </li>
<li> Contact </li>
<li class="login"> Login </li>
<li class="get-started"> Get Started </li>
</ul>
</div>
<div class="signup">
<button><a class="login-btn" href="/">Login</a></button>
<button><a class="get_started-btn" href="/">Get Started</a></button>
</div>
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
</nav>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
#font-face {
font-family: "Satoshi";
src: url(./fonts/Satoshi-Regular.otf) format("opentype");
font-weight: normal;
}
#font-face {
font-family: "Satoshi";
src: url(./fonts/Satoshi-Bold.otf) format("opentype");
font-weight: bold;
}
#font-face {
font-family: "p22MackinacPro";
src: url(./fonts/P22MackinacPro-BoldItalic_11.otf) format("opentype");
font-style: italic;
}
nav {
position: relative;
font-family: 'Satoshi';
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
}
nav .logo {
color: #D53987;
margin-left: 20px;
cursor: pointer;
}
nav .menus {
margin-left: 10%;
}
nav .menus ul {
display: flex;
gap: 10px;
list-style: none;
}
a {
text-decoration: none;
color: black;
}
nav .menus ul li {
font-size: 18px;
line-height: 100%;
cursor: pointer;
}
nav .menus ul .login,
.get-started {
display: none;
}
nav .signup a {
text-decoration: none;
color: #000;
}
nav .signup button {
background-color: #000;
font-size: 18px;
width: 180px;
height: 72px;
border: none;
top: 0px;
cursor: pointer;
}
nav .signup button .login-btn {
cursor: pointer;
margin-right: 30px;
}
nav .signup button .get_started-btn {
color: #fff;
cursor: pointer;
}
nav .signup button:first-child {
background-color: white;
width: auto;
height: auto;
}
.checkbtn {
font-size: 30px;
color: #000;
float: right;
line-height: 80px;
margin-right: 10px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#media screen and (max-width: 768px) {
.checkbtn {
display: block;
}
nav .menus ul {
position: fixed;
width: 100%;
height: 100vh;
left: 100%;
top: 9%;
background-color: red;
bottom: 15%;
text-align: center;
transition: all .5s;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.5s;
}
nav .menus ul .login,
.get-started {
display: block;
}
nav .menus ul li {
width: 90%;
margin: 10px 0;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.24);
}
nav .signup {
display: none;
}
nav #check:checked~nav .menus ul {
left: 0%;
}
}
I tried everything to do this using only css but nothing is working at all
I am currently having difficulties trying to get a bar I made using hover to appear in the a element bottom instead of the top, do you guys have any suggestions? I am new with CSS and been googling for the better part of 2 hours and cannot find a solution.
Heres the code I am using
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css.css">
<title>Untitled Document</title>
</head>
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
</ul>
</nav>
<body>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
nav {
background-color: red;
height: 40px;
width: 100%;
}
nav ul {
list-style: none;
padding-left: 0;
display: flex;
margin-top: 0;
justify-content: center;
}
nav li {
height: 40px;
padding: inherit;
}
nav li:hover {
background-color: white;
height: 5px;
}
nav a {
font-family: 'Oswald', sans-serif;
float: left;
font-size: 14px;
font-weight: 500;
line-height: 1;
padding: 18px 12px;
position: relative;
text-transform: uppercase;
}
Instead of setting the height of nav li, just set the padding of li and add border-bottom color to the hovered element. Also remove the padding of nav li a
nav {
background-color: red;
height: 40px;
width: 100%;
}
nav ul {
list-style: none;
padding-left: 0;
display: flex;
margin-top: 0;
justify-content: center;
}
nav li {
/* height: 40px; */
padding: 10px 15px;
}
nav li:hover {
border-bottom: 5px solid #fff;
}
nav a {
font-family: 'Oswald', sans-serif;
float: left;
font-size: 14px;
font-weight: 500;
line-height: 1;
/* padding: 18px 12px; */
position: relative;
text-transform: uppercase;
}
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
</ul>
</nav>
I did check the other questions, but none of them fixed my problem. When I resize the page, my elements are moving everywhere, all squashed up. I even tried doing a wrapper div, and that didn't help. Are we allowed to post web sites? Because I have the site live.
<!DOCTYPE html>
<html>
<head>
<title>Promises!-Contact</title>
<meta charset="UTF-8">
<style>
#body {
margin: 0 auto;
width: 370px;
height: 1%;
margin-top: 100px;
border-radius: 15px;
border: 5px dotted #00A396;
background-clip: content-box;
background-color: #F8B72E;
text-align: justify;
font-family: Kirvy;
overflow: hidden;
font-size: 13px;
}
#wrapper {
width: 100%;
margin: 0%;
padding: 0%;
}
p { padding: 10px;}
#title {
text-align: center;
font-size: 24px;
top-margin: 0px;
padding: 0px;
}
nav {
font-family: KBAStitchInTime;
font-size: 12px;
color: #EC225F;
right: 220px;
top: 140px;
position: relative;}
#dot1 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot2 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot3 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot4 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
a:link { color:#EC225F; text-decoration:none; }
a:visited{ color: purple; }
a:hover{ color: ;}
a:active {}
body {background-color: #262626;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<span id="dot1">.</span>About<br>
<span id="dot2">.</span>Pages<br>
<span id="dot3">.</span>Poems<br>
<span id="dot4">.</span>Home<br>
</nav>
<div id="body">
<p id="title">Contact!</p>
<p> I love getting mail! Find me at:</p>
</div>
</div>
</body>
</html>
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
I have this bare bones navigation that I am putting together and for some reason I am getting about a 40px left margin before the first link starts. I dont have a left margin on the div so not sure why it is happening. Of course it wont look good to be completely flush against the left side of the screen but id like to control any margin size myself.
I could not use jsfiddle for this because inside jsfiddle the error is not there. it renders fine.
With that said, this is the html file:
<!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>
<style type="text/css">
body {
background-color: #FFF;
margin: 0;
padding: 0;
}
#footer_enhanced {
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
line-height: 50px;
float: left;
background-color: #121212;
z-index: 999;
margin: 0px;
left: 0px;
}
#navigation_enhanced {
color: #000;
margin: 0px;
padding: 0px;
height: 50px;
float: left;
clear: both;
}
#navigation_enhanced ul {
list-style: none;
margin: 0;
}
#navigation_enhanced li {
float: left;
line-height: 50px;
}
#navigation_enhanced li a {
display: block;
text-decoration: none;
font-size: 1.125em;
color: #FFF;
margin-right: 0.375em;
padding-right: 0.375em;
padding-left: 0.375em;
letter-spacing: -1px;
}
#navigation_enhanced li a:hover {
color: #000;
background-color: #fff;
}
.current {
display: block;
text-decoration: none;
font-size: 1.125em;
color: #000;
background-color: #fff;
margin-right: 0.375em;
padding-right: 0.375em;
padding-left: 0.375em;
letter-spacing: -1px;
list-style: none;
float: left;
}
</style>
</head>
<body>
<div id="footer_enhanced">
<div id="navigation_enhanced">
<ul>
<li class="current">home</li>
<li>cat2</li>
<li>cat3</li>
<li>cat4</li>
<li>cat5</li>
</ul>
</div>
</div>
</body>
</html>
The "unwanted" space doesn't exist in a fiddle by default because they reset (incorrectly labeled as normalize) the css. By default, ul has a padding-left, but jsfiddle clears it.
ul {
padding-left: 0;
}