So, I'm making a website and in the navbar, I floated some of the links to the right. However, when I do this, the links leave the vertical center and drop downwards. When I apply padding though, nothing happens. I know there are other versions of this question on Stack Overflow, but I've tried the answers and they don't work. Here's my code
/* Start Variables */
:root {
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper {
width: 100%;
padding: 2% 10%;
box-shadow: 5px 10px 8px #888888;
}
.leftside {}
.rightside {
float: right;
}
.options {
text-decoration: none;
margin-bottom: 20%;
}
.linkhome {
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-bottom: 20%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Example | Home</title>
<link rel="stylesheet" href="/css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Navbar -->
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Our Work
About Us
Our Food
Culture
</div>
</div>
</div>
</nav>
<!-- End Navbar -->
</body>
</html>
Any help is greatly appreciated
Thanks!
Make your .navbar-wrapper a flexbox.
.navbar-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
Related
I'm looking for a way to raise text up so that it can mirror the other text that is on the top left portion of the webpage.
I have text that is centered perfectly on the top left portion of my navbar. I have other text that has appeared on the top right potion of my page - semi near the navbar. I am looking for a way to raise the portion of text up so that it is level with the text in the top left portion, while keeping its placement in the top right area of the webpage.
The h3 element text is in perfect placement (top left)
The text in the div elements under the "navbar-right" class is centered to the top right of the webpage - which is correct- but it is not level with the text in h3 element.
Literally any help with this would be awesome. Thank you.
I tried looking around, yet couldn't find an exact answer. Hoping for any help or advice.
~ HTML ~ :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link type="text/css" rel="stylesheet" href="cleanstyle.css" />
<link href="//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body>
<div class="navbar">
<h3>Example</h3>
</div>
<div class="navbar-left"></div>
<div class="navbar-right">
<div>Home</div>
<div>About</div>
<div>Portfolio</div>
<div>Contact</div>
</div>
</body>
</html>
~ CSS ~ :
#import url(//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold);
body {
margin: 0px;
font-family: "SoDo Sans SemiBold",Helvetica Neue,Helvetica,Arial,sans-serif;
}
.navbar {
padding: 20px;
font-size: 16px;
justify-content: space-between;
}
.navbar-right {
justify-content: right;
display: flex;
padding-right: 25px;
font-size: 16px;
text-align: right;
}
h3 {
padding-left: 20px;
text-align: left;
}
.navbar-left div {
text-transform: uppercase;
font-weight: 600;
}
.navbar-left,
.navbar-right {
display: flex;
align-items: center;
}
.navbar-left > *,
.navbar-right > * {
margin: 10px;
}
li {
text-align: right;
padding: 20px;
}
You may set the .navbar as a parent element to both .navbar-left and .navbar-right with display:flex and justify-content: space-between.
Your <h3> will be under the .navbar-left, and navigation div elements will under the .navbar-right
#import url(//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold);
body {
margin: 0px;
font-family: "SoDo Sans SemiBold",Helvetica Neue,Helvetica,Arial,sans-serif;
}
.navbar {
padding: 20px;
font-size: 16px;
justify-content: space-between;
display: flex;
}
.navbar-right {
justify-content: right;
display: flex;
padding-right: 25px;
font-size: 16px;
text-align: right;
}
h3 {
padding-left: 20px;
text-align: left;
}
.navbar-left h3 {
text-transform: uppercase;
font-weight: 600;
}
.navbar-left,
.navbar-right {
display: flex;
align-items: center;
}
.navbar-left > *,
.navbar-right > * {
margin: 10px;
}
li {
text-align: right;
padding: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link type="text/css" rel="stylesheet" href="cleanstyle.css" />
<link href="//db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body>
<div class="navbar">
<div class="navbar-left">
<h3>Example</h3>
</div>
<div class="navbar-right">
<div>Home</div>
<div>About</div>
<div>Portfolio</div>
<div>Contact</div>
</div>
</div>
</body>
</html>
So I'm working on a website and I wanted to try including bootstrap in it. I've used the navbar tags and some custom CSS but I can't remove the margin. So basically the navbar looks weird because of it.
Heres the code:
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Hilo | Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
</head>
<body class="body-fr">
<nav class="navbar" role="navigation">
<div class="container-fluid nav-container-fr">
<ul class="nav-nav">
<li class="nav-item-fr">Home</li>
<li class="nav-item-fr">Streams</li>
<li class="nav-item-fr">Followed</li>
<li class="nav-item-fr nav-icon-fr"><i class="lnr lnr-user fs-40"></i></li>
<li class="nav-item-fr nav-cog-fr"><i class="lnr lnr-cog fs-40"></i></li>
</ul>
</div>
</nav>
</body>
</html>
Css:
* {
margin: 0;
padding: 0;
}
.body-fr {
background-color: #333;
}
nav {
margin: 0;
padding: 0;
width: 100%;
}
.navbar {
margin: 0px;
padding: 0px;
}
.nav-container-fr {
width: 100%;
display: flex;
justify-content: space-around;
text-align: center;
background-color: #222;
}
.nav-nav {
justify-content: space-around;
list-style-type: none;
list-style: none;
display: inline;
margin: auto;
margin-bottom: 5px;
}
.nav-size {
font-size: 30px;
}
.nav-item-fr {
text-align: center;
display: inline-flex;
margin: 0 30px;
}
.nav-icon-fr {
margin-top: 5px;
margin-left: 470px;
margin-right: -40px;
}
.nav-cog-fr {
margin-right: -50px;
}
.fs-20 {
font-size: 20px;
}
.fs-40 {
font-size: 40px;
}
.fs-60 {
font-size: 60px;
}
.fs-80 {
font-size: 80px;
}
.fs-100 {
font-size: 100px;
}
.fs-120 {
font-size: 120px;
}
Can I please get some help?
And please ignore my messy code I'm still new t bootstrap and I don't really feel like fixing the CSS right now.
You could try setting:
margin: 0 !important;
Or you could get more specific with the selector.
If you are in Chrome for instance, and right click on the element in question, you should see that it has a more specific selector.
Just as an example:
html body nav {
margin: 20px;
}
Is more specific than:
nav {
margin: 0;
}
So a margin of 20px would be applied in this case.
I am looking to reproduce a style of site and I would like to do for the background like them that is to say alternate the design: printed circuit boards, dark gray backgrounds, printed circuit boards, dark gray fonts, but I do not see how to do in my case someone could help me please?
The site : https://hydra.bot/ (screen of what I want to reproduce : https://prnt.sc/13kmrkc)
I attach below my 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.0">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Kurium Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Support
</div>
<div class="right"> <!-- Socials -->
Social 1
Social 2
</div>
</nav>
</header>
</head>
<body>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
font-weight: 500;
width: 100%;
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
}
.topbar {
height: 80px;
background-color: #fff;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%; /* new */
}
.topbar nav {
display: flex;
width: 100%; /* new */
}
/* new class */
.middle {
margin: 0 auto;
}
/* end new */
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
}
.topbar nav a:hover, .topbar nav a.active {
color: #000;
}
.header-logo {
cursor: pointer;
width: 25vh;
}
h1 {
text-align: center;
color: #fff;
}
I was thinking of creating a div containing my background in order to define a precise style in my css, but I never did that so I don't really know how to do it (How to do it the right way). For the moment I was trying in my css thanks to my body class but it's not famous. If someone has an idea I'm interested. I would like that it is responsive at most of course because I try to respect the responsive since the beginning of the creation of my site
Your initial idea of using DIVs is indeed correct.
HTML
<div class="circuit"> Some content for the first part of the page</div>
<div class="dark"> Some content for the second part of the page</div>
<div class="circuit"> Some content for the third part of the page</div>
CSS
.circuit {
background-image:url(URL_OF_THE_IMAGE);
}
.dark {
background-color:#HEXCODE;
}
I'm trying to code a simple website with a navbar under the header. The problem is that the position of the navbar elements is directly influenced by the length of the header element, but only when the header element has a float:left css rule.
The two elements are in separate divs and don't share any css rules.
I've already tried using justify-content, align-items, margin: auto etc. It seems as if the only way to fix the issue is to remove the float:left rule from the header text, but I need to keep it.
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="style.css" />
<head runat="server">
<title>Lewis</title>
</head>
<body>
<form id="form1" runat="server">
<div id="header-bar">
<h1>Lewis' Website</h1>
<img src="images/headericon.jpg" />
</div>
<div id="navbar">
<nav>
Home
About
Posts
</nav>
</div>
</form>
</body>
</html>
css
#header-bar img {
width: 150px;
height: 150px;
border-radius: 50%;
padding-right: 10%;
padding-left: 10%;
}
#header-bar h1 {
font-family: Arial;
font-size: 70px;
color: white;
padding-left: 10%;
float: left;
}
#navbar {
background-color: white;
margin: 0px;
}
#navbar nav a {
font-size: 35px;
margin: 0 15px;
}
Here is your CSS now fix it as per your design requirement.
#form1 {
display: flex;
justify-content: space-between;
align-items: center;
}
My nav bar is under the slideshow. I want it over but i can't figure out. I tried some absolute and relative positions but it doesn' work. Please find my a solution and if you have time give me a logical explaning.
My html page
<!DOCTYPE>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width", initial-scale=1">
<link rel="stylesheet" type="text/css" href="all.css">
<title>
</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"</script>
<!Daca e IE><script src="http://html5shim.googlecode.com/svn/trunk/htm5.js"></script><!End>
</head>
<body>
<nav>
Logo
Home
Projects
Colections
Philosophy
Contact
Facebook
</nav>
<div class="cycle-slideshow">
<img src="images/233H.jpg" alt="blabla">
<img src="images/233H1.jpg" alt="blabla">
<img src="images/233H2.jpg" alt="blabla">
</div>
</body>
<footer>
</footer>
</html>
My css page
img {
max-width: 100%;
}
.cycle-slideshow {
width: 100%;
max-width: 2000px;
}
nav {
position: fixed;
text-align: center;
width: 100%;
height: 45px;
background-color: black;
opacity: 0.8;
}
nav a {
display: inline-block;
text-decoration: none;
font-family: verdana;
font-size: 14px;
color: rgb(239,239,239);
margin: 15px 32px 0 32px;
}
nav a:hover {
color: pink;
use z-index property for this
nav {
position: fixed;
text-align: center;
width: 100%;
height: 45px;
background-color: black;
opacity: 0.8;
z-index:10;
}
use maximum if slider also used
z-index
The nav position is being ignored because it is set to fixed. To solve this add padding to the slideshow that equals the height of the nav.
.cycle-slideshow{
padding-top: 45px;
}