I copied the "mega menu" navbar from W3Schools to a blank page and attached custom CSS, but as soon as I attach the bootstrap CSS file, the header layout is changed completely and the dropdown content doesn't show up anymore. I added two images below the snippet to show what exactly happens. I tried finding the CSS conflict with element inspector without success. I also tried different versions of bootstrap.css but all versions are causing the same navbar to become misplaced.
/* HEADER CSS */
/* Custom */
.navbar {
height:100px!important;
border-bottom:5px solid rgba(55,175,75,1.00)!important;
background-color:rgba(255,255,255,1.00)!important;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"!important;
}
.brand {
margin-top:9px!important;
width:175px!important;
}
.brand-link {
background-color:rgba(255,255,255,0.00)!important;
}
.brand-link:hover {
background-color:rgba(255,255,255,0.00)!important;
}
.navlink {
margin-top:45px!important;
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,1.00)!important;
font-size:1.10em!important;
font-weight:300!important;
}
.navlink:hover {
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,0.35)!important;
}
.droplink {
}
.droplink:hover {
}
.dropbtn {
margin-top:45px!important;
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,1.00)!important;
cursor:pointer!important;
font-size:1.10em!important;
font-weight:300!important;
}
.dropdown-content {
margin-top:-2px!important;
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .header {
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .header-title {
margin-top:0!important;
margin-bottom:8px!important;
color:rgba(255,255,255,1.00)!important;
font-size:1.35em!important;
}
.dropdown-content .droprow {
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .dropcol {
background-color:rgba(55,175,75,1.00)!important;
}
/* Default */
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Naamloos document</title><h3></h3>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="navbar">
<a href="/index.htm" class="brand-link">
<img src="/img/brand.png" class="responsive brand" alt="navbar brand icon">
</a>
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div class="header">
<h2 class="header-title">Mega Menu</h2>
</div>
<div class="row droprow">
<div class="column dropcol">
<h3 class="header-title">Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column dropcol">
<h3 class="header-title">Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column dropcol">
<h3 class="header-title">Category 3</h3>
Link 1
Link 2
Link 3
</div>
<div class="column dropcol">
<h3 class="header-title">Category 4</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Without any bootstrap CSS file attached (blue area is image), while mouse over dropdown button!
With bootstrap CSS file attached (blue area is image), also while mouse over dropdown button!
https://getbootstrap.com/docs/3.3/
Try Bootstrap 3 and check if that still happens to you.
Found the solution!
I completely removed the .navbar class and all corresponding CSS classes from the bootstrap.css file and replaced it with the W3Schools navbar CSS.
As this is a testing site I can do this, but I would not recommend it as a definitive solution. It may cause problems later (I haven't experienced any so far).
Related
I'm currently trying to create a responsive navigation which is only a hamburger menu when on a mobile/tablet but am unsure how to hide it and stop it from working when it's on desktop. This is my first time playing around with CSS so it's a bit messy. The * is where the #media was when I was trying to get it to work. As I didn't know what to do I messed around with display:none but unsurprisingly it hid the entire navigation. There is quite a bit more wrong with this but i'm fixing it a step at a time. Unfortunately, I did this before I found out that mobile-first would have been better.
.button{
background-color: inherit;
border:none;
color: #4054b4;
padding: 64px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
font-family: 'Lato' , sans-serif;
transition:0.3s;
}
.dropdown {
float:center;
overflow:hidden;
display:inline-block;
}
.button:hover, .button:hover {
background-color: #4054b4;
color: #ffffff;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4054b4;
width:100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content {
display: block;
}
.colum {
float: left;
width:25%;
padding: 10px;
background-color: #4054b4;
height: 250px;
}
.colum a {
float: none;
color: white;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
font-family: 'Lato' , sans-serif;
}
.colum a:hover {
background-color: #4054b4;
}
.col {
float: right;
width:25%;
padding: 10px;
background-color: inherit;
height: 250px;
}
.col a {
float: none;
color: inherit;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
font-family: 'Lato' , sans-serif;
}
.row:after {
content: "";
display:table;
clear: both
}
****
.open {
float:right;
color:#4054b4;
margin:1em 0 0 1em;
cursor:pointer;
display:block !important;
}
.nav{
width: 0;
height: 100vh;
z-index: 3;
position: fixed;
overflow: hidden;
background-color: #4054b4;
transition: 0.3s;
}
.nav a {
display: block;
color: #ffffff;
padding: 1em 0;
transition: 0.4s;
}
.close {
float: center;
margin: 1em 0 0 1em;
}
****
</style>
<body>
<div class="w3-container" style="box-shadow:0 0.4% 0.8% rgba(0,0,0,0.2)">
<div class="w3-bar w3-white ">
<div class="wrapper ">
<div class="nav " id="nav">
×
<div class="dropdown ">
<button class="button dropdown"> Button </button>
<div class="dropdown-content ">
<div class="header ">
<h2 style="color:white"> Header </h2>
<div class="row ">
<div class="colum ">
Page
</div>
</div>
</div>
</div>
</div>
<div class="dropdown ">
<button class="button dropdown "> Button</button>
<div class="dropdown-content ">
<div class="header ">
<h2 style="color:white"> Header </h2>
<div class="row ">
<div class="colum ">
PAge
</div>
</div>
</div>
</div>
</div><span id="open" class="open " onclick="openNav()">☰</span>
</div>
</div>
<script>
function openNav() {
document.getElementById("open").style.display = "none";
document.getElementById("nav").style.width = "100%";
}
function closeNav(){
document.getElementById("open").style.display = "block";
document.getElementById("nav").style.width = "0";
}
</script>
That would be better if you could dynamically add the hamburger menu by checking if device type is mobile or tablet, not just hide and show with css, so i found something you might be interested if you not yet know. Look at this
Thank you, this is my first action in stackoverflow
Start with Bootstrap
and here: https://getbootstrap.com/components/#navbar). It makes this kind of thing really simple and stops you from reinventing the wheel.
To do what you are wanting you will need to set CSS media queries for the correct display. This is exactly what bootstrap does.
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
If you want to do it yourself I would start with learning about media breakpoints and look at
Bootstrap hamburger menus:
Bootstrap 5
Bootstrap 4
If I want to change the background color of my text inside the parallax scrolling effect there's a white bar on top of it. I tried changing every color that I wrote down but it didn't disappeared. You can see the white bar here. Do I need to change a color in CSS or do I need to need to create a new div?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.parallax {
background-image: url("pexels-philippe-donn-1169754.jpg");
/* specific heigh */
min-height: 500px;
/*parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
</head>
<body>
<div class="header">
Space, Universe And Other Stuff
<div class="header-right">
<a class="active" href="#home">Home</a>
Chat
Personal Projects
Contact
About
</div>
</div>
<div class="parallax"></div>
<div style="height:700px;background-color:lightgrey;font-size:36px">
<div style="padding-left:20px">
<h1>Text</h1>
<p>Text....</p>
<p>More text...</p>
</div>
<div class="parallax"></div>
</body>
</html>
Default margin to h1 is causing the issue.
....
<div style="padding-left:20px">
<h1 style="margin-top:0px">Text</h1>
<p>Text....</p>
<p>More text...</p>
</div>
....
you should add a class instead of adding style attribute
It appears to be the <h1> tag's default margin sticking out the top. Try clearing the margin with
h1 {margin: 0;}
If you do need some gray space above the <h1> you could add padding instead.
Set margin: 0; on your h1 element.
* {
box-sizing: border-box;
}
h1 {
margin: 0;
}
.parallax {
background-image: url("https://i0.wp.com/www.fmxexpress.com/wp-content/uploads/2020/09/pexels-philippe-donn-1169754.jpg");
/* specific heigh */
min-height: 500px;
/*parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
Space, Universe And Other Stuff
<div class="header-right">
<a class="active" href="#home">Home</a>
Chat
Personal Projects
Contact
About
</div>
</div>
<div class="parallax"></div>
<div style="height:700px;background-color:lightgrey;font-size:36px">
<div style="padding-left:20px">
<h1>Text</h1>
<p>Text....</p>
<p>More text...</p>
</div>
<div class="parallax"></div>
</body>
</html>
Background
I am trying to make a template for a git repo web viewer so it better matches with the rest of my website. I am starting with the top navigation bar. I have been able to put the items I want: logo, menu item links, select menu for branch, and search box.
Problem
I placed the div container for the select menu first and the div container for the search box second. Yet, the two appear in reverse order. I want them back in the correct order as I placed them in the code.
Code
Note: for best results, use a wide window. I will work on responsiveness once this is working.
/*
* Add a black background color to the top navigation
*/
.topnav {
overflow: hidden;
background-color: #444;
}
/*
* Make a style for fixing the menu to the top.
*/
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/*
* Style the links inside the navigation bar
*/
.topnav a {
float: left;
display: block;
color: #eee;
text-align: center;
padding: 12px 12px;
text-decoration: none;
font-size: 16pt;
}
/*
* Add an active class to highlight the current page
*/
.active {
background-color: #6666;
color: #eee;
}
/*
* Style image in topnav.
*/
.logo {
width: 20px;
height: 20px;
}
/*
* Style image in topnav.
*/
.topnav-image a {
float: left;
display: block;
color: #eee;
text-align: center;
text-decoration: none;
font-size: 16pt;
}
/*
* Right-aligned section inside the top navigation
*/
.topnav-right {
float: right;
}
/*
* Style the right aligned links inside the navigation bar
*/
.topnav-right a {
font-size: 16pt;
}
/*
* Hide the link that should open and close the topnav on
* small screens
*/
.topnav .icon {
display: none;
}
/*
* Change the color of links on hover
*/
/*
* Add a dark background on topnav links and the dropdown button on hover
*/
.topnav a:hover {
background-color: #555;
color: #fff;
}
.topnav .branch-container {
float: right;
}
.topnav .branch-container select {
padding: 5px;
margin: 4px;
border: none;
border-radius: 8px;
font-size: 16pt;
color: #eeeeee;
background-color: #666666;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin: 4px;
font-size: 16pt;
border: none;
border-radius: 8px;
background: #666666;
color: #eeeeee;
}
.topnav .search-container button {
/*float: right;*/
/*padding: 10px 10px;*/
display: none;
margin-top: 4px;
margin-right: 8px;
background: #ddd;
font-size: 16px;
border: none;
cursor: pointer;
background: #444;
color: #eee;
}
.topnav .search-container button:hover {
background: #666;
color: #eee;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #eee;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #eee;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #eee;
}
/*
* Format the footer.
*/
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #cccccc;
color: black;
}
/*
* Style the links inside the footer.
*/
.footer a {
float: left;
display: block;
color: black;
text-align: center;
padding: 8px 8px;
text-decoration: none;
font-size: 12pt;
}
/*
* Right-aligned section inside the footer.
*/
.footer-right {
float: right;
}
/*
* Hover effect of footer items.
*/
.footer a:hover {
background-color: #dddddd;
color: black;
}
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/*
* Format the main content.
*/
.main {
/*padding: 16px;*/
margin-top: 70px;
margin-left: 16px;
margin-right: 16px;
margin-bottom: 50px;
}
h1.title {
font-weight: normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Repos: Ali Kakakhel</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<div class="fixed">
<nav class="topnav" id="mytopnav">
<div class="topnav-image">
<img src="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png" class="logo">
</div>
RepoName
<div class="topnav-right">
About
Summary
Refs
Log
Tree
Commit
Diff
Stats
<div class="branch-container">
<select>
<option value="Master">Master</option>
<option value="Branch1">Branch1</option>
<option value="Branch2">Branch2</option>
<option value="Branch3">Branch3</option>
</select>
</div>
<div class="search-container">
<form action="/action_page.php">
<input type="text" id="SearchInput" placeholder="Search...">
<button type="submit" id="SearchButton" onclick="javascript:alert('Hello World!')"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</nav>
</div>
<div class="main">
<h1 class="title">Title</h1>
<p>
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated they
live in Bookmarksgrove right at the coast of the Semantics, a large
language ocean. A small river named Duden flows by their place and
supplies it with the necessary regelialia. It is a paradisematic
country, in which roasted parts of sentences fly into your mouth.
</p>
</div>
<div class="footer" id="myfooter">
<a>Description</a>
<div class="footer-right">
<a>Owner</a>
</div>
</div>
<script>
var input = document.getElementById("SearchInput");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("SearchButton").click();
}
});
</script>
</body>
</html>
I'm doing a site in Shopify and I'm using supply theme, I want to use my own menu instead of using Shopify menu. I wrote code in HTML and CSS but I was wondering if it is possible for someone to help me to change following code in liquid because my friend does not know any HTML and CSS and for him, it's easier to change it through the liquid.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
<div style="padding:16px">
</div>
</body>
</html>
Even though I agree with drip's comment:
StackOverflow is not a "Write the code for me" platform.
Here is some helpful information, Liquid is templating language and there are many places to get you started with Liquid:
Shopify - Liquid reference
Shopify - Getting started Guide
Shopify Partners Blog - Learning Liquid
I am a beginner in coding, and I have to create a website for a school project. I tried to resolve the problem myself but it just don't work.
I wanted to add a search bar to my website so I followed a tutorial, and it worked on a blank new html page, but when I copied paste on my html page project I have this lightgray frame that comes around the search bar , where does it come from and what to delete/change ? thank you :)
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 01-mars-2017, 14:52:23
Author : jonathan
*/
/* syling my paragraphs */
div {
font-family:Times New Roman;
}
body {
font-family: Arial;
background-color: white;
}
p {
color: darkgreen;
font-size:30px;
font-family:Arial;
}
.highlight {
color:darkgray;
}
/* styling navigation */
#search {
width: 200px;
padding: 7px;
}
#submit {
padding: 7px;
background: #669999;
color: white;
margin-letf: -5px;
cursor: pointer
}
#submit:hover {
background:#333;
transition: all 0.40s;
}
.header-logo {
display:block;
height:240px;
width:240px;
background:url(images/wolf.png) no-repeat;
text-indent:50%;
white-space: nowrap;
overflow: hidden;
margin: 0 auto;
}
nav {
border-bottom:2px solid black;
border-bottom-color: #669999;
}
li{
display:inline-block;
text-align: center;
margin-right:20px;
}
nav a:link, nav a:visited {
color:gray;
font-size:15px;
text-decoration: none;
}
nav a:hover {
background-color: #99ddff;
}
nav a:active {
background-color: yellow
}
/* Bordered form */
form {
border: 3px solid #f1f1f1;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Extra style for the cancel button (red) */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the avatar image inside this container */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 40%;
border-radius: 50%;
}
/* Add padding to containers */
.container {
padding: 16px;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title> HTML by Jo</title>
<meta charset="UTF-8">
<meta name="description" content="I by mistake deleted all the files
so i'm starting all over again">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="wolf.css">
</head>
<body>
<!-- navigation -->
<header>
<h1>
<a class="header-logo" href="http://localhost:8383/Grey%20wolf/index.html"></a>
</h1>
</header>
<nav>
<div style="text-align:center">
<ul>
<li>Login</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul></div>
<form action="https://google.com">
<input type="text" placeholder="Search..." maxlength="20" id="search">
<input type="submit" value="Go!" id="submit">
</form>
</nav>
<!-- the content -->
<div>TODO write content</div>
<p>Here is a paragraph.</p>
<p class="highlight">Another paragraph.</p>
<h3 class="highlight">this is a heading h3</h3>
link to codeacademy
</body>
</html>
Your form has this property set there:
form{
border: 3px solid #f1f1f1;
}
To fix it change it to:
form{
border: 0;
}
or try using the parent element which is the better way to go,
nav form{
border: 0;
}
thanks for your answers it works :)
I tried to modify the different borders but I have actually not seen that one :/
and now I try to add pictures but the browser doesn't show them what should I do ?
I place this before a paragraph :
<img src="images/model1.jpg" alt="model women 1">
<img src="images/model2.jpg" alt="model women 2">
<img src="images/model3.jpg" alt="model women 3">
Have you even taken a look to your CSS? It's fairly commented
/* Bordered form */
form {
border: 3px solid #f1f1f1;
}
It appears to be the border of nav. Try the following CSS:
nav {
border-bottom: none;
}