Need advice on html as i am not expert on this.
I need to display following form buttons on a navigation bar on top of a web page but they are coming on different lines. I want this to be responsive so for smaller screens they adjust on different lines but if enough area , should display on nav bar in a single line. Tried few css but was not able to get it right.
Suggestion....
<body class="body">
<header>
<nav>
<ul>
<li><form action="/create" ><button type="submit">Create</button></form></li>
<li><form action="/update" ><button type="submit">Update</button></form></li>
<li><form action="/delete" ><button type="submit">Delete</button></form></li>
</ul>
</nav>
</header>
<div>
</div>
</body>
You Add CSS like this
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<body class="body">
<header>
<nav>
<ul>
<li><form action="/create" ><button type="submit">Create</button></form></li>
<li><form action="/update" ><button type="submit">Update</button></form></li>
<li><form action="/delete" ><button type="submit">Delete</button></form></li>
</ul>
</nav>
</header>
<div>
</div>
</body>
You can use:
li, form { display: inline; }
Related
I'm new to HTML and CSS and to improve my skills i've been trying to recreate differnt sites by myself. I'm currently trying to recreate the notion home page but i have an issue. my img div is not centring? This is probably an easy fix but if someone could help i'd apprectiate it :)
Here is my HTML:
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;500;700&display=swap");
:root {
--primary-text: #111111;
--secondary-text: #91908f;
--background: #fffefc;
--btn-primary: #e16259;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--b);
font-family: "Inter", sans-serif;
}
/* NAV */
.nav {
width: 100;
}
.logo {
max-width: 100%;
height: 55px;
margin-right: 70px;
margin: 15px 50px;
}
a,
a:link,
a:visited {
color: #111111;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav ul {
display: flex;
padding: 35px;
list-style: none;
}
.nav ul li {
padding-right: 20px;
text-decoration: none;
color: #91908f;
}
.nav {
float: right;
}
/* HERO */
.nav-img {
display: flex !important;
align-items: center;
justify-content: center;
}
<img class="logo" src="img/logo.png" alt="Notion Logo">
<div class="nav">
<ul>
<li>Product</li>
<li>Download</li>
<li>Resources</li>
<li>Pricing</li>
<li>Careers</li>
<li><span>|</span></li>
<li>Sign Up</li>
<li>Log In</li>
</ul>
</div>
<div class="hero">
<div class="hero-img">
<img src="img/hero.webp" alt="Illustration of 3 people using laptop computers on seperate desks with different expressions">
</div>
<h1>All-in-one workspace</h1>
<h4>One tool for your whole team. Write, plan, and get organized.</h4>
<form action="">
<input type="text" placeholder="Enter your email...">
<button class='btn-primary' type="submit">Sign Up</button>
</form>
<p>For teams & individuals - web, mobile, Mac, Windows</p>
</div>
..
There are different things you need to consider when learning to code, first of all, it's important to use the new html5 semantic element header where you can place your logo and nav
<header>
<img src="logo.png" alt="Notion Logo">
<nav>
Product
Download
Resources
Pricing |
Careers
Sign Up
Log In
</nav>
</header>
*note: a nav element doesn’t have to contain a list as mentioned in MDN, and you can style them easily. The img centering issue came from the header wrong styling .nav{float: right;} .nav{ width: 100} needs to have px, %, or vw example .nav{width: 100px;}, .nav{width: 60vw;}, .nav{width: 60%;} then you can easily center the other elements vertically like below
.center-vertically {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<header>
<div class="header-sub">
<img class="logo" src="img/logo.png" alt="Notion Logo" />
<nav>
Product
Download
Resources
Pricing |
Careers
Sign Up
Log In
</nav>
</div>
</header>
<div class="center-vertically">
<div class="centered-item">
<img src="https://www.notion.so/cdn-cgi/image/f=auto,w=1080,q=100/front-static/pages/product/hero.png" alt="Illustration of 3 people using laptop computers on seperate desks with different expressions" />
</div>
<h1>All-in-one workspace</h1>
<h4>One tool for your whole team. Write, plan, and get organized.</h4>
<form action="">
<input type="text" placeholder="Enter your email..." />
<button class="btn-primary" type="submit">Sign Up</button>
</form>
<p>For teams & individuals - web, mobile, Mac, Windows</p>
<div class="centered-item">anything you want to add</div>
</div>
You can style your header, and there is an awesome resource to follow to learn properly Freecodecamp
I am making a website for our voluntary association. Still learning web development.
Secondary vertical menue in Navigation menu (for example in activities tab) does not show over the content. I found that it was due to the content below which is possitioned as position:relative (col3 class) when I remove this position:relative the problems solves but I need to keep it as it is for later improvements, you can view the website in this link
http://slsaj.com/panduka/Contact.html
this screen shot shows the issue
actually I have the same problem in Home menue (it is also due to this postion issue coming from javascript and css I guess) hope I would be able to solve it too with the answer to this question
<
<div class="body1">
<div class="main">
<!-- header -->
<header>
<div class="headerbox">
<nav>
<div class="brand">
<h1>xxxxx Assoication in Japan </h1>
</div>
<div id="main-nav3">
<ul id="menu">
<li ></span>
<ul>
</ul>
</li>
<li ><a>Activities<span class="drop-down"></span></a>
<ul>
<li ><a href="" target="_blank" id="events" >Events</a></li>
<li><a href="tharanga.html" id="events2" >Tharanga Magazine</a></li>
<li><a href="Conference.html" >Research Conference</a></li>
</ul>
</li>
<li ></span>
<ul>
</ul>
</li>
<li id="menu_active">Contact<span class="drop-down"></span>
<ul>
</ul>
</li>
<li ></span>
<ul>
</ul>
</li>
</ul>
</div> <!-- menu -->
</nav>
</div>
</header>
<!-- / header -->
<!-- content -->
<article id="content">
<div class="wrapper">
<div class="box1">
<div class="line1 wrapper">
<section class="col1">
<h2><strong>O</strong>ur<span> Details</span></h2>
<strong class="address">
President:<br>
Telephone:<br>
E-Mail:<br>
Secretary:<br>
E-Mail:<br> <br>
Fb:
</strong>
Mr. xxxx<br>
080<br>
xxxx[at]gmail.com <br>
Ms. xxxxx<br>
xxxx[at]gmail.com <br> <br>
#xxxxxxxxx
</section>
<section class="col2 pad_left1"> <!-- This is the cause for this problem ***** -->
<h2 class="color2"><strong>S</strong>ubcribe to<span> email database</span></h2>
<p class="pad_bot1">
You can subcribe to out email database by filling the following form <br>
Subcribe !
</p>
</section>
</div>
</div>
</div>
<!-- This col2 position:relative is the cause for this problem ***** -->
.col2 {margin:0 6px;width:560px;position:relative}
#main-nav3 {
float: left;
width: 700px;
z-index: 30;
}
#main-nav3 ul {
font-size:12px;
list-style: none;
}
#main-nav3 ul li {
float: left;
}
#main-nav3 ul li:first-child {
border: none;
}
#main-nav3 ul li a {
display: block;
position: relative;
width: auto;
text-decoration: none;
font-size:17.8px;
}
#main-nav3 ul li a span.drop-down {
}
#main-nav3 ul li:hover {
background: pink;
}
#main-nav3 ul li ul {
display: none;
}
#main-nav3 ul li:hover ul {
background: brown;
display: block;
position: absolute;
}
#main-nav3 ul li ul li {
float: none;
display: block;
border-left: none;
position: relative; z-index:10;
}
#main-nav3 ul li ul li a {
width: auto;
border-top: dotted 1px #7dad16;
color: yellow;
In the .headerbox css class, opacity: 0.9; is causing the issue. comment that out.
also in #main-nav3 ul li ul {...} add z-index:10; which will fix the dropdown menu issue.
I have header that is moving when I scroll my page down. I have added several buttons to it, and they are moving with it.
My problem is that my drop-button is showing its content when I am not hovering over the button itself.
My code:
/*------------------------------------dropdown menu start*/
.dropbtn {
background-color: #B9B9B9;
color: white;
font-size: 30px;
font-weight:bold;
border: none;
cursor: pointer;
position: relative;
left: 300px;
top: -18px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
left: 300px;
background-color: #ffffff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: 18px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ffffff}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
color: #4d4d4d;
}
/*------------------------------------dropdown menu end*/
And a picture(black dot is a mouse location) :
What can I do to fix this?
Your problems run deep. I don't even really want to fix the entire menu because I'd basically be writing one from scratch and you can do that yourself, but what I will do is point out some issues with this to help you find your way:
The core of your design:
<div class="header-cont">
<div class="header">
<img src="">
<logotext>MyCompanyName</logotext>
<button>Home</button>
<div class="dropdown">
<button class="dropbtn">Products</button>
<div class="dropdown-content">
Product 1
Product 2
Product 3
</div>
</div>
<button>Locations</button>
<button>Contacts</button>
<button>History</button>
<div class="dropdown">
<button class="dropbtn">Language</button>
<div class="dropdown-content">
Language 1
Language 2
</div>
</div>
</div>
</div>
There are a number of things here I would never do:
<logotext> is not a valid HTML markup. You probably want a <span class="logotext"> or something along those lines.
Your navigation menu is comprised of <div>s with <button>s and other <div>s with <a> tags in them. This is a bizarre and confusing way to organize a menu. You should consider using <ul> tags and order your sub menu with <li> instead.
The problem you are directly running into is caused by the fact that you have your home <button> element with a left: 300px on it that your <div class="dropdown"> doesn't have.
A much easier and more logical way to organize a nav menu:
<ul id='menu'>
<li><a href='#'>Planets</a>
<ul>
<li><a href='#'>Mercury</a></li>
<li><a href='#'>Venus</a></li>
<li><a href='#'>Earth</a></li>
</ul>
</li>
<li><a href='#'>Stars</a>
<ul>
<li><a href='#'>Sun </a></li>
<li><a href='#'>Betelgeuse</a></li>
<li><a href='#'>Bellatrix</a></li>
</ul>
</li>
<li><a href='#'>Galaxies</a>
<ul>
<li><a href='#'>Milky Way </a></li>
<li><a href='#'>Andromeda</a></li>
<li><a href='#'>Antennae</a></li>
</ul>
</li>
</ul>
I just got this from google and here's the JSFiddle for it.
Here is a CodePen Example
Your HTML should have a mark similar to this as per your CSS
<div class="navbar">
<div class="navItem">Home</div>
<div class="navItem product-dropdown">
<span>Products</span>
<div class="dropdown-content">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</div>
Then as for styling something similar to this:
.dropdown-content{
display:none;
}
.product-dropdown:hover .dropdown-content {
display: block;
}
.navItem {
float: left;
padding: 10px;
}
li {
list-style-type: none;
}
Host Folder
If you click the link then click "all.html", you should see a page with an unfinished navbar. The lis in the list are stacking for some unknown reason. Could someone tell me why "Member Resources" and on are in a row below and how to fix that? I tried playing with the text-align, float, width, and margins of the containing div, the ul, and the lis but haven't gotten anywhere. Thank you (Note: Using Bootstrap v3.3.6)!
HTML:
<div class="row" id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
CSS:
#topnav{
display: inline;
}
#topnav *{
display:inherit;
}
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
}
#topnav li{
margin:0;
padding: 0 2.5%;
}
#topnav a{
text-decoration: none;
color:white;
margin: 0;
padding: 0;
font-weight:600;
}
SIDENOTE: Does anyone know why there is a scrollbar at the bottom of the page? There's no extra content to the right and I'm pretty sure there are no margins that'd be pushing it out that far. I see it on Chrome, anyone else see it and know why it's occuring?
You should set width of #topnav ul to 100% for setting it to full width.
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
width: 100%;
}
Second way to see a full width navbar is to do as the bootstrap guide say
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row" id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
</div>
</nav>
Look carefully to notice that the navbar is full width and of different color(left intentionally for you to notice). You can remove the background color from your ul and put it on your navbar class instead instead
Try this:
HTML
<div id="topnav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Sponsor
<li>
All the rest of the li's are like the ones above, I've ommitted them to save space
</li>
</ul>
</div>
CSS
#topnav{
display: inline;
}
#topnav *{
display:inherit;
}
#topnav ul{
list-style-type: none;
margin: 0;
margin-left: auto;
background-color: rgb(0,93,164);
padding: 1.5%;
display:inline-block;
width: 100%;
}
#topnav li{
margin:0;
padding: 0 2.5%;
}
#topnav a{
text-decoration: none;
color:white;
margin: 0;
padding: 0;
font-weight:600;
}
I am working on a redesign of a website, and I used the foundation framework to help make it responsive. Everything is working great, however the menu when made mobile sized, is overflowing off the side of the page. Attached is the html & css, any help would be appreciated!
HTML
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<!-- PUT LOGO HERE PLS -->
<li class="menu-text site-title">
<img src="img/logosean.png" alt="teddy bear head"> Teddy Bear Wheelchair Foundation
</li>
</ul>
<!-- NOT DOWN HERE SILLY, UP THERE -->
</div>
<div class="top-bar-right">
<ul class="menu">
<li class="navPush">Who We Help</li>
<li class="navPush">About</li>
<li class="navPush">Contribute</li>
<li class="navPush">Partners</li>
<li class="navPush">Contact</li>
</ul>
</div>
</div>
CSS
.top-bar,
.top-bar ul {
background-color: #4c1a1b;
font-family: "Lato", "Helvetica", sans-serif;
font-weight: 400;
color: #fcfae1;
}
.top-bar ul a {
color: #fcfae1;
list-style: none;
}
.navPush {
padding-top: 10px;
}
.top-bar ul a:hover {
color: #f6e497;
}
.site-title {
color: #fff;
font-weight: 900;
padding: inherit;
}
Text Cutting Off
Thanks
You are using class menu in ul which has predefined properties
.menu > li {
display: table-cell;
}
Therefore, in your CSS, write:
.menu > li{
display:inline-block;
}
or else change the menu class.
Hope it helps!