I can't figure out why my columns are stuck on the left like that and not spread out.
nav {
float: left;
}
nav ul {
margin: 0;
padding: 10px;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 3px;
position: relative;
}
nav a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #59b4ff;
}
nav a:before {
content:'';
display: block;
height: 1px;
width: 100%;
background-color: #ffffff;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 225ms;
}
nav a:hover::before {
width: 100%;
}
nav::after {
content: '';
display: table;
clear: both;
}
body {
font-family: Arial, Helvetica, sans-serif;
padding: 20px;
background: #3d3d3d;
}
.topnav {
float: right;
overflow: hidden;
background-color: none;
}
.topnav a {
float: left;
display: block;
color: rgb(255, 255, 255);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: rgb(255, 255, 255);
}
.topnav a.active {
background-color: rgb(14, 110, 189);
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #59b4ff;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: rgb(255, 185, 185);
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: none;
padding: none;
}
.topnav input[type=text] {
border: 1px solid rgb(255, 255, 255);
}}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 70%;
}
/* Right column */
.rightcolumn {
float: right;
width: 25%;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Copyright Information */
.footer {
background-color: rgb(116, 116, 116);
color: rgb(255, 255, 255);
text-align: center;
width: 100%;
height: 30;
clear: both;
padding: 10px 0px 10px 0px;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- META TAGS-->
<meta charset="UTF-8">
<meta name="description" content="Gamer Hub is a place for gamers to connect, compete, speedrun and show off their skills.">
<meta name="author" content="Joshua Vanyo">
<meta name="keywords" content="Gamer, Hub, Social, Network, Speedrunning, Challenges, Achievements">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- LINKS -->
<link href="https://fonts.googleapis.com/css?family=Work+Sans:300">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script src="script.js"></script>
<title>Gamer Hub</title>
</head>
<body>
<!-- TOP NAVIGATION PANEL -->
<div class="topnav">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Browse..." name="search">
<button type="submit">Submit</button>
</form>
</div>
</div>
<nav>
<ul>
<li>Profile</li>
<li>Stats</li>
<li>Friends</li>
<li>Leaderboards</li>
<li>Tournaments</li>
<li>Explore</li>
</ul>
<nav>
</div>
<!-- COLUMNS -->
<br><br><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
</div>
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg" style="height:100px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg">Image</div><br>
<div class="fakeimg">Image</div><br>
<div class="fakeimg">Image</div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>
<!-- FOOTER -->
<div class="footer">
Copyright © 2019 Joshua Vanyo
</div>
</body>
</html>
You should remove this rule:
nav {
float: left;
}
The reason is that your left and right navs are inside of a nav element and when you float an element it will "shrink wrap" its width.
Another idea is to wrap those two navs in a div instead of a nav element.
UPDATE: there is a tag that is not closed:
<nav>
<ul>
<li>Profile</li>
<li>Stats</li>
<li>Friends</li>
<li>Leaderboards</li>
<li>Tournaments</li>
<li>Explore</li>
</ul>
<nav><!-- close this tag -->
That last <nav> should be </nav>.
Related
* {
box-sizing: border-box;
}
body {
font-family: 'Times New Roman', Times, serif;
padding: 10px;
background: #f1f1f1;
}
.header {
text-align: center;
background-color: rgb(255, 255, 255);
padding: 20px;
margin-bottom: 15px;
}
.header h1{
font-size: 30px;
}
.navbar {
overflow: hidden;
background-color: rgb(52, 52, 52);
position: sticky;
top: 0;
box-shadow: 5px 5px 10px rgba(52, 52, 52, 0.753);
}
.drop {
float: left;
overflow: hidden;
}
.drop .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
}
.navbar .a {
float: left;
display: block;
color: white;
text-decoration: none;
text-align: center;
padding: 14px 16px;
font-size: 20px;
}
.navbar .a:hover {
background-color: white;
color: black;
}
.drop-content {
display: none;
position: absolute;
background-color: rgb(234, 234, 234);
min-width: 160px;
z-index: 1;
}
.drop-content .a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.drop:hover .drop-content {
display: block;
}
.leftside {
float: left;
width: 75%;
}
.rightside {
float: left;
width: 25%;
padding-left: 20px;
}
.fakeimg {
background-color: rgb(176, 176, 176);
width: 100%;
padding: 20px;
}
div .fakeimg:hover {
border: 1px solid black;
cursor: pointer;
}
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 30px;
text-align: center;
background-color: rgb(248, 248, 248);
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.leftside, .rightside {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<!--This is a link to the CSS.-->
<link rel="stylesheet" href="first_webpage.css">
<body>
<!--This is our header.-->
<div>
<header class="header">
<h1>First Webpage</h1>
</header>
</div>
<!--This is a navigation bar.-->
<div class="navbar">
Home
Projects
Contact
<div class="drop">
<button class="dropbtn">Dropdown
<i></i>
</button>
<div class="drop-content">
Link 1
Link 2
Link 3
</div>
</div>
About
</div>
<!--This is the first and main colum.-->
<div class="row">
<div class="leftside">
<div class="card">
<h2>Title One</h2>
<h5>Description, May 31, 2022</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<figcaption>Section 1.1 City</figcaption>
<p>This is subsection title</p>
<p>This is the first paragraph of the main section.
This also my first webpage. It definitly looks
like something from the <i><a href="https://www.nytimes.com/">
New York Times</a></i>. It's coming out pretty good;
i just need to continue taking it one step at a time.
Nonetheless, I will contue on with this section and
not bore you. Enjoy the rest of my layout.</p>
</div>
<div class="card">
<h2>Title Two</h2>
<h5>Description, May 31, 2022</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<figcaption>Section 1.2 Flowers</figcaption>
<p>This is a second section Title</p>
<p>This is a second paragraph, I really don't know
what to write. It's not like this is an engligh
101 class. i mean jesus. Talking about jesus, do
you know they're making a jesus game... i mean
what has the gaming industry come to?</p>
</div>
</div>
<div class="rightside">
<div class="card">
<h3>About Me</h3>
<div class="fakeimg" style="height: 100px;">Image</div>
<p>Some text about me so that the visiter may
know a bit more about the developer that they're
interested in...</p>
</div>
<div class="card">
<h3>Popular Posts</h3>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Social Media</h3>
<p>Some social media pages that individuals can
follow me on....</p>
</div>
</div>
</div>
<!--This is a footer-->
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
I'm trying to create a dropdown menu for my dropdown button; as I create the dropdown button everything seems to be fine, however, once I put the position to "absolute" it does not allow me to view the content that is within the dropdown button even when I'm hovering over it. I tried changing the position to anything other than "absolute" and it does allow me to view the content, but it would either stretch the navigation bar down to make room for the options or place the content lower than where the button is located. Can anyone help me out with this problem? I provided the full code for my html and CSS because I think it may be clashing with another code.
I'm a complete beginner and I'm trying to make a navigation bar.
I'm trying to make a navigation bar that works and looks like this one from this webpage (different colors):
https://www.swiss.com/ch/EN/prepare/check-in
I've come so far:
I want each column in .dropdown-content to be the same width as the ones in .column
That means the orange column "hello world1" to be the same width as "Category 1" and so forth.
And I also want both columns that are underneath each other to be connected as in the link above. Whenever I hover over the .dropdown-content, I want the background-color of .column to change as well.
Here is my snippet:
* {
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 {
color: #fc7b03;
background-color: #B5B5B5;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fc7b03;
width: 100%;
left: 0;
box-shadow: 0px 3px 26px 0px #fc7b03;
z-index: 1;
opacity: 95%;
}
.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: #B5B5B5;
height: 250px;
opacity: 100%;
}
.header2 {
float: left;
width: 33.33%;
padding: 1px;
background-color: #fc7b03;
height: 150px;
opacity: 100%;
font-size: 12px;
}
.header22 {
float: left;
position: relative;
width: 95%;
margin-left: 2.5%;
padding: 1px;
background-color: #fc7b03;
opacity: 100%;
font-size: 12px;
}
.header2:hover {
background-color: #B5B5B5;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
color: #fc7b03;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
.row2::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;
}
}
<link href="/resources/header/header.css" type="text/css" rel="stylesheet">
<body>
<!-- this is the dropdown navigation panel -->
<!-- Load font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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="row2">
<a href="http://google.com">
<img src="https://image.shutterstock.com/image-vector/real-estate-logo-260nw-1615688014.jpg" style="width:50px; height:50% ">
<br>
<span style="display: block" class="header22">
Hello world1
</span>
</a>
<a href="http://google.com">
<span style="display: block" class="header22">
Hello world2
</span>
</a>
<a href="http://google.com">
<span style="display: block" class="header22">
Hello world3
</span>
</a>
-->
<!--
<a href="#">
<div class="header2">
<img src="https://image.shutterstock.com/image-vector/real-estate-logo-260nw-1615688014.jpg" style="width:50px; height:50% ">
<h2>Mega Menu</h2>
</div>
</a>
<div class="header2">
<h2 >Mega Menu2</h2>
</div>
-->
</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">
<h3>balbllalba</h3>
<p>Hover over the "Dropdown" link to see the mega menu.</p>
<p>Re</p>
</div>
<div style="padding:16px">
<h3>Responsive Mega Menu (Full-width dropdown in navbar)</h3>
<p>Hover over the "Dropdown" link to see the mega menu. </p>
</div>
</body>
EDIT:
I've been able to get a bit further, however i still can't get "Hello world" and "Category 1" to act as one unit under "hover". Not a huge problem, but for now i'm satisfied with what i've got:
* {
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 {
color: #fc7b03;
background-color: #B5B5B5;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fc7b03;
width: 100%;
left: 0;
box-shadow: 0px 3px 26px 0px #fc7b03;
z-index: 1;
opacity: 95%;
}
.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: #B5B5B5;
height: 250px;
opacity: 100%;
}
.header22 {
float: left;
width: 33.33%;
padding: 1px;
background-color: #fc7b03;
height: 150px;
opacity: 100%;
font-size: 12px;
}
.header22s {
float: left;
position: relative;
width: 95%;
margin-left: 2.5%;
padding: 1px;
background-color: #fc7b03;
opacity: 100%;
font-size: 12px;
border: solid;
}
.header2:hover {
background-color: #B5B5B5;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
color: #fc7b03;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
.row2::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;
}
}
.column:hover , .header22:hover{
animation-duration: 1.5s;
animation-name: border;
animation-iteration-count: infinite;
}
#keyframes border {
from {
border: solid white;
border-width: 2px;
}
to {
border: solid #D3CFCF;
border-width: 2px;
}
}
/* not used stuff
.column:hover {
background-color: #B5B5B5;
transition-property: border-color;
transition-duration: 1.5s;
border: solid #dbd8cf;
border-width: 2px;
}
*/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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="row2">
<a href="http://google.com" class="header22" id="ga">
<img src="https://image.shutterstock.com/image-vector/real-estate-logo-260nw-1615688014.jpg"
style="width:50px; height:50% ">
<br>
<span style="display: block">
Hello world1
</span>
</a>
<a href="http://google.com" class="header22">
<span style="display: block">
Hello world2
</span>
</a>
<a href="http://google.com" class="header22">
<span style="display: block">
Hello world3
</span>
</a>
<!--
<a href="#">
<div class="header2">
<img src="https://image.shutterstock.com/image-vector/real-estate-logo-260nw-1615688014.jpg" style="width:50px; height:50% ">
<h2>Mega Menu</h2>
</div>
</a>
<div class="header2">
<h2 >Mega Menu2</h2>
</div>
-->
</div>
<div class="row">
<div class="column" id="ga">
<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>
Here you go!
* {
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 {
color: #fc7b03;
background-color: #B5B5B5;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fc7b03;
width: 100%;
left: 0;
box-shadow: 0px 3px 26px 0px #fc7b03;
z-index: 1;
opacity: 95%;
}
.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: #B5B5B5;
height: 250px;
opacity: 100%;
}
.column-top {
float: left;
width: 33.33%;
padding: 10px;
opacity: 100%;
}
.header2 {
float: left;
width: 33.33%;
padding: 1px;
background-color: #fc7b03;
height: 150px;
opacity: 100%;
font-size: 12px;
}
.header22 {
float: left;
position: relative;
width:33.33%;
margin-left: 2.5%;
padding: 1px;
background-color: #fc7b03;
opacity: 100%;
font-size: 12px;
}
.header2:hover {
background-color: #B5B5B5;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
color: #fc7b03;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
.row2::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;
}
.column-top {
width: 100%;
height: auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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="row">
<div class="column-top">
<img src="https://image.shutterstock.com/image-vector/real-estate-logo-260nw-1615688014.jpg" style="width:50px; height:50% ">
<a href="http://google.com">
<span style="display: block" class="header22">
Hello world1
</span>
</a>
</div>
<div class="column-top">
<a href="http://google.com">
<span style="display: block" class="header22">
Hello world2
</span>
</a>
</div>
<div class="column-top">
<a href="http://google.com">
<span style="display: block" class="header22">
Hello world3
</span>
</a>
</div>
</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">
<h3>balbllalba</h3>
<p>Hover over the "Dropdown" link to see the mega menu.</p>
<p>Re</p>
</div>
<div style="padding:16px">
<h3>Responsive Mega Menu (Full-width dropdown in navbar)</h3>
<p>Hover over the "Dropdown" link to see the mega menu. </p>
</div>
#font-face {
font-family: Raleway;
src: url(../font/Raleway-Regular.ttf);
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
color: black;
font-family: 'Raleway';
background-color: white;
scroll-behavior: smooth;
}
/* Navigation */
.nav {
color: white;
min-height: 70px;
line-height: 70px;
text-align: left;
background-color: #222629;
border-bottom: 3px solid #86C232;
}
.menu a {
float: left;
text-decoration: none;
color: white;
line-height: 40px;
height: 40px;
padding: 5px 12.5px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 25px;
}
.menu a:hover {
background-color: #6B6E70;
text-decoration: underline;
text-decoration-color: #86C232;
}
.logo {
padding: 0 5px 0 5px;
font-size: 34px;
}
.logo a {
color: #86C232;
}
.logo a:hover {
background-color: #222629;
}
label {
margin: 0 0 0 20px;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: left;
}
#toggle {
display: none;
}
/* Search Bar */
.search-box {
position: absolute;
top: 3.5%;
left: 97.5%;
transform: translate(-50%, -50%);
background-color: #2F3640;
height: 30px;
border-radius: 30px;
padding: 10px;
}
.search-box:hover {
left: 92%;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
color: #E84118;
float: right;
width: 30px;
height: 30px;
border-radius: 50%;
background: #2F3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
text-decoration: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 30px;
width: 0px;
}
/* Content Div */
#welcome {
width: 100%;
height: auto;
}
.welcome {
color: white;
margin: 0;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
padding-top: 10%;
}
.content {
margin: 0 12.5% 0 12.5%;
}
.categories-box-1,
.categories-box-2 {
display: flex;
flex-direction: column;
}
h3 {
padding-left: 20%;
text-align: center;
text-decoration: underline;
}
.boxes {
margin: 10px;
width: 80%;
}
.boxes a {
text-decoration: none;
color: black;
}
.boxes ul {
padding-left: 35%;
}
.boxes ul li {
list-style: none;
padding: 5px 10px 5px 10px;
}
.boxes ul li a:hover {
border-bottom: 2px solid #86C232;
}
/* Footer */
.footer {
color: white;
float: left;
width: 100%;
text-align: center;
background-color: #222629;
}
/* Media Query */
#media only screen and (max-width: 1400px) {
/* Navigation */
label {
display: block;
cursor: pointer;
}
.menu {
margin: 0;
width: 100%;
display: none;
text-align: center;
background-color: #222629;
}
.menu a {
float: none;
clear: left;
display: block;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #EAEAEB;
margin: 0;
padding: 0;
}
.menu a:hover {
background-color: #6B6E70;
text-decoration: underline;
text-decoration-color: #86C232;
}
.menu .border-nav {
border-top: 1px solid #EAEAEB;
}
#toggle:checked+.menu {
display: block;
}
.logo {
float: right;
padding-right: 20px;
padding-top: 10px;
}
.logo a {
border: none;
}
.search-bar-input {
padding-right: 38%;
}
/* Content */
.categories-box-1,
.categories-box-2 {
display: flex;
flex-direction: column;
}
.boxes {
width: 95%;
}
.boxes ul {
padding-left: 20%;
}
}
#media only screen and (max-width: 680px) {
.search-bar-input {
padding-right: 8%;
padding-bottom: 3.5%;
}
content {
margin: 0 5% 0 5%;
}
#showcase #welcome {
margin-top: -19px;
}
.boxes ul {
padding-left: 20%;
}
}
#media only screen and (max-width: 480px) {
.search-bar-input {
padding-right: 8%;
padding-bottom: 3.5%;
}
.content {
margin: 0 2% 0 2%;
}
h3 {
padding-left: 0;
}
.boxes ul {
padding-left: 2%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home | Physical Model </title>
<!--Website CSS-->
<link href="css/collapse.css" type="text/css" rel="stylesheet">
<!-- Icon CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="css/application.css" type="text/css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<div class="logo"><a><i class="fa fa-cog" ></i></a></div>
Home
Construction
Dynamics
Fluids
Heat Transfer
Material Science
Mechanics
Statics
Thermodynamics
</div>
</div>
</nav>
<div class="container-4">
<div class="search-box">
<input class="search-txt" type="text" placeholder="Search..." name="">
<a class="search-btn" href="#"><i class="fas fa-search"></i></a>
</div>
</div>
<content>
<div id="showcase">
<img id="welcome" src="img/welcome.jpg" width="1900px" height="900px">
</div>
<div class="content">
<div class="categories-box-1">
<div id="box-1" class="boxes">
<section id="construction">
<h3>Construction</h3>
<ul>
<li>Crane Rigging Angles</li>
<li>Excavation and Earthwork Pressure</li>
</ul>
</section>
</div>
<div id="box-2" class="boxes">
<section id="dynamics">
<h3>Dynamics</h3>
<ul>
<li>Collision and Deformation: When Worlds Collide</li>
<li>General Planar Motion: Armor Attack</li>
<li>General Planar Motion: The Helicopter</li>
<li>General Planar Motion: The Oil Rig</li>
<li>General Planar Motion: The Slider</li>
<li>General Planar Motion: The Tank</li>
<li>Projectile Motion</li>
<li>Rectilinear Motion</li>
<li>Relative Motion: Choo Choo Train</li>
<li>Rotation: No Slip Wheel</li>
<li>Rotation and Moment of Inertia: A Day at the Races</li>
<li>Rotational Kinematics: The Ferris Wheel</li>
</ul>
</section>
</div>
<div id="box-3" class="boxes">
<section id="fluids">
<h3>Fluids</h3>
<ul>
<li>Fluid Properties</li>
<li>Head Loss</li>
<li>Hydrostatics</li>
<li>Internal Flow and Losses</li>
<li>Laminar and Turbulent Flow: Smoke Tunnel</li>
</ul>
</section>
</div>
<div id="box-4" class="boxes">
<section id="heattran">
<h3>Heat Transfer</h3>
<ul>
<li>Conservation of Energy: Ice Melting Blocks</li>
<li>Radiant Energy: Parabolic Concentrator</li>
</ul>
</section>
</div>
</div>
<div class="categories-box-2">
<div id="box-5" class="boxes">
<section id="matsci">
<h3>Material Science</h3>
<ul>
<li>Deformation: Bending a Knife Blade</li>
<li>Deformation: Shape Memory Alloys</li>
<li>Primary and Secondary Creep: Creepy Plastic</li>
</ul>
</section>
</div>
<div id="box-6" class="boxes">
<section id="mechanics">
<h3>Mechanics</h3>
<ul>
<li>Axial Strain</li>
<li>Beam Bending: Foam Beam</li>
<li>Design of Axial Members</li>
<li>Elastic vs. Plastic</li>
<li>Load Conditions: Rubber Shapes</li>
<li>Paper Stress Concentrations</li>
<li>Shear Demonstrator</li>
<li>Stress/Strain: A Strainge Transformation</li>
<li>Stress/Strain Transformation: The Big Book of Shear</li>
<li>Thermal Expansion</li>
<li>Thin Wall Pressure Vessels - Balloons</li>
<li>Thin Wall Pressure Vessels - Hot Dogs</li>
<li>Thin Wall Pressure Vessels
<li>Torsion: Tower of Torque</li>
</ul>
</section>
</div>
<div id="box-7" class="boxes">
<section id="statics">
<h3>Statics</h3>
<ul>
<li>Concentrated Cable Loads: The Ski Gondola</li>
<li>Coulomb Friction: Fun with Friction</li>
<li>Force Vector: Amazing Weight Loss Program</li>
<li>Frame Demos</li>
<li>Friction: Belt Friction</li>
<li>Loading: Distributed Student Loading</li>
<li>Mechanical Advantage: Pulleys - Equilibrator Challenge</li>
<li>Mechanical Advantage: The Torque Tester</li>
<li>Moments: Lug Wrench vs. Breaker Bar</li>
<li>Moments: Moments and Couples</li>
<li>Moments: The Persuader</li>
<li>Moments: Varignon's I-Beam</li>
<li>Truss Design: K'NEX Trusses</li>
<li>Truss Design: Ruler Truss</li>
<li>Truss Design: Wacky Fun Noodle</li>
<li>Truss Design: Wooden Truss 2D</li>
<li>Truss Design: Wooden Truss 3D</li>
<li>Uniformly Loaded Cables</li>
<li>Zero Force Members</li>
</ul>
</section>
</div>
<section id="thermodynamics">
<div id="box-8" class="boxes">
<h3>Thermodynamics</h3>
<ul>
<li>2nd Law - Direction</li>
<li>2nd Law - Losses</li>
<li>Boiling Point: The Hand Boiler</li>
<li>Boiling Properties</li>
<li>Closed vs. Open Systems</li>
<li>Conservation of Mass: Molasses Madness</li>
<li>Density and Buoyancy: The Lava Lamp</li>
<li>Otto Cycle: Engine Knock</li>
<li>Psychrometry</li>
<li>Total Energy - Fan Box</li>
<li>Total Energy</li>
<li>Vapor Power Cycle: The Little Engine That Could</li>
</ul>
</div>
</section>
</div>
</div>
</content>
<footer>
<div class="footer">
<p>Tyler Kautz, Trevor Swann, Jacob Stambaugh. Copyright © 2019. Some Rights Reserved.</p>
</div>
</footer>
</body>
</html>
I am having trouble with my search bar icon. It is shifting down when I hover over it. Can anyone tell me why and how to fix it? I have messed with margins and everything to try and get it fixed but nothing is working. I've also included a link below if that helps.
https://jsfiddle.net/tylerk9001/eb42nofx/
Change this:
.search-box {
position: absolute;
top: 3.5%;
right: 0;
background-color: #2F3640;
height: 30px;
border-radius: 30px;
padding: 10px;
}
Delete this:
.search-box:hover {
left: 92%;
}
I have searched and tweek around and the last image still shows up very close to the second. This is a very simple responsive web layout that, for some mistake, it is not displaying properly. this keeps asking me for more details but I have no more details to give.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
widows: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
.button_1 {
height: 38px;
background: #e8491d;
border: none;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
}
/* Header */
header {
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 4px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 12px;
}
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../Assets/for\ rent.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
text-align: center;
color: #3433FF;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}
/* For Tenants */
#cozy {
padding: 15px;
background: #35424a;
}
.button_1 {
float: right;
margin-top: 15px;
}
/*Boxes*/
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#main {
margin-top: 20px;
}
#main .box {
float: left;
text-align: center;
width: 33%;
padding: 10px;
display: inline-block;
}
#main .box assets {
width: 100px;
}
/*Footer*/
footer {
padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: #e8491d;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="description" content="Properties for lease">
<meta name="keywords" content="lakeland, oldsmar, lutz">
<meta name="author" content="SAGS PROPERTIES LLC">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SAGS PROPERTIES</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./css/style.css" />
<script src="main.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span>SAGS Properties LLC</span></h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Lutz</li>
<li>Oldsmar</li>
<li>Lakeland</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Well Managed Properties</h1>
<p>In Lutz, Oldsmar and Lakeland</p>
</div>
</section>
<section id="cozy">
<div class="container">
<button type="submit" class="button_1">Tenants Click Here</button>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lutz.jpg">
<h3>Lutz</h3>
<p>Lakeview at Calusa Trace</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lakeland.jpg">
<h3>Lakeland</h3>
<p>Cobblestone Landing</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Oldsmar.jpg">
<h3>Oldsmar</h3>
<p>Gardens at Forrest Lakes</p>
</div>
</div>
</section>
<footer>
<p>SAGS PROPERTIES LLC © 2018</p>
</footer>
</body>
</html>
There are no more details to give. Making a question is as frustrating as learning this!!!
So I am new to coding and stuff and I am wondering why there is a space of the body in between the divs in this fiddle?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
The green part which is the body is showing in between the second navbar and the two text divs. Anyone know whats wrong cause I can't find it.
The h4 and the p elements have a margin set. You can see that using the "inspect" option right clicking the element in the browser.
its good to use:
* {margin:0;padding:0;}
this will remove every space in your document.
note: in html, document itself have default space. so by above CSS you can remove them easily.
it is a good practice to use above CSS in your every stylesheet files.
This happens because you have not reset the default margins of header elements.
Reset defaults using
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
At the top of your sheet.
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
Green is body color. Where is no element with background-color there is body color because nothing is overlapping it.
CSS boxmodel will be helpfull: https://www.w3schools.com/css/css_boxmodel.asp
Margin property is external part of an element.
Solved :
h3,h4,p{
margin:0;
}
body {
margin: 0;
padding: 0;
background-color: green;
}
#color-1 {
background-color: #d3d3d3;
}
#color-2 {
background-color: #fff;
}
.top-navbar {
width: 100%;
height: 50px;
}
.top-navbar a {
padding: 14px 16px;
text-align: center;
float: right;
display: block;
color: black;
text-decoration: none;
}
.top-navbar a:hover {
background-color: #8a8a8a;
}
.image {
width: 100%;
height: 491px;
background-color: red;
}
.top-bar-2 {
width: 100%;
height: 50px;
text-align: center;
}
.top-bar-2 a {
padding: 14px 16px;
text-align: center;
display: inline-block;
color: black;
text-decoration: none;
}
.top-bar-2 a:hover {
background-color: #8a8a8a;
}
.collection {
height: 300px;
width: 100%;
text-align: center;
background-color: blue
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<!-- body -->
<body>
<div class="top-navbar navbar" id="color-1">
About
Art
Home
</div>
<div class="image">
<img src="sgrumble.png" alt="sg-rumble" class="front-image">
</div>
<div class="top-bar-2 navbar" id="color-1">
Project
Champions
divname2
divname3
</div>
<div class="about-text" id="color-1">
<h4>title</h4>
<p>short info text about text text text text text text text text text</p>
</div>
<div class="collection art" id="project color-2">
<h3>text</h3>
<p>text.</p>
<div class="project-blue">
<img src="/asset/images/project-ashe256x256.png" class="project-ashe">
</div>
you can specify (add to existing) the following css and the spaces will be removed.
.about-text {
overflow: hidden;
}
.collection {
overflow: hidden;
}