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>
Related
Please help.
When mouseover on "Products" tab the "services" items shifts to the right. I need help on the CSS settings.
* {
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%;
position: relative;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 4px;
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;
}
<table width=960 border=0 cellspacing=0 cellpadding=0 align=center bgcolor='#bbeeff' style='padding:10px'>
<tr>
<td>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- <div class="header">
<h2>...</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 class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- <div class="header">
<h2>...</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">
<p>home page ....</p>
</div>
</td>
</tr>
</table>
.dropdown-content {
position: absolute;
position: relative;
}
These two are mutually exclusive. What you actually want is to put position: relative on the parent element, .dropdown.
You will also have to remove overflow: hidden on the parent .dropdown and .navbar or the dropdown, which is outside of the element's frame, will not show.
Finally, because you've floated everything and nothing has a defined width, you will have to set a non-% width/height on some elements. I added height: 46px to your navbar and width: 500px to your .row.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
height: 46px;
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;
position: relative;
}
.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: 4px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.row
{
width: 500px;
}
.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;
}
<table width=960 border=0 cellspacing=0 cellpadding=0 align=center bgcolor='#bbeeff' style='padding:10px'>
<tr>
<td>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- <div class="header">
<h2>...</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 class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- <div class="header">
<h2>...</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">
<p>home page ....</p>
</div>
</td>
</tr>
</table>
I'm trying to line up 3 images and some text on one 'line', the first 2 images are lined up fine, same with the text but the 3rd image refuses to and i'm not sure why.
here is my code so far:
* {
box-sizing: border-box;
}
body {
display: inline-block;
width: 800px;
height: 1000px;
}
.logo {
padding: 5px;
display: inline;
}
.pfp {
display: inline;
}
.msg {
display: inline;
}
.userid {
text-decoration-color: white;
background-color: rgb(250, 250, 250);
text-align: left;
width: 50px;
border-radius: 20%;
display: block;
font-size: 10px;
margin-left: 160px;
margin-top: -18px;
}
<div class='logo'>
<img src='logo.jpg' , width=1 00px>
</div>
<div class="pfp">
<a href="Profile Page.html">
<img src='pfp.jpg' , width=5 0px>
</a>
</div>
<div class='userid'>
<span>[user_id]</span>
</div>
<div class='msg'>
<a href='messages.html'>
<img src='messages.jpg' , width=5 0px>
</a>
</div>
Your .userid also needs to be displayed inline or inline-block so the next item can be inline with it. Right now it's displayed as block so it's shoving anything after it to the next line.
* {
box-sizing: border-box;
}
body {
display: inline-block;
width: 800px;
height: 1000px;
}
.logo {
padding: 5px;
display: inline;
}
.pfp {
display: inline;
}
.msg {
display: inline;
}
.userid {
text-decoration-color: white;
background-color: rgb(250, 250, 250);
text-align: left;
width: 50px;
border-radius: 20%;
//display: block;
display: inline;
font-size: 10px;
margin-left: 160px;
margin-top: -18px;
}
<div class='logo'>
<img src='logo.jpg' , width=1 00px>
</div>
<div class="pfp">
<a href="Profile Page.html">
<img src='pfp.jpg' , width=5 0px>
</a>
</div>
<div class='userid'>
<span>[user_id]</span>
</div>
<div class='msg'>
<a href='messages.html'>
<img src='messages.jpg' , width=5 0px>
</a>
</div>
How the page layout should look^
As shown by the screenshot, the two images in this html code are making a white space on the right side of the page. There is no padding nor does the image itself extend beyond where it apparently does - what is causing this unnecessary white space and how do I remove it?
CSS below:
.Text {
color: #bd8729;
font-family: sans-serif;
}
body {
margin: 0;
font-family: serif, sans-serif;
background-color: #F7F6F6;
}
/** {*/
/*background: #000 !important;*/
/*color: #0f0 !important;*/
/*outline: solid #f00 1px !important;*/
/*}*/
.topnav {
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.leftSide {
position: relative;
float: left;
width: 55%;
}
.leftPicture1 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
float: left;
width: 45%;
max-width: 100%;
height: auto;
display: block;
}
.leftPicture2 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
float: right;
width: 45%;
max-width: 100%;
height: auto;
display: block;
}
.rightSide {
position: relative;
float: right;
width: 45%;
}
.form {
border-radius: 5px;
position: relative;
float: left;
background-color: #F7F6F6;
width: 50%;
padding: 20px;
height: 120%;
border: 20px black;
}
.insideForm {
background-color: white;
border: black 5px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: white;
color: #111011;
padding: 12px 20px;
border: #bd8729;
align-items: center;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #bd8729;
}
.rightPicture1 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
width: 80%;
margin-right: 0px;
max-width: 100%;
height: auto;
}
.rightPicture2 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
width: 80%;
max-width: 100%;
height: auto;
}
.centerDiv {
position: relative;
text-align: center ;
}
.footer {
width: 100%;
height: 100px;
background-color: #303233;
z-index: 10;
margin-top: 1000px;
position: relative;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css" media="screen and (max-width:900px)">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<div class="topnav" id="myTopnav">
<img src="logo.png" style="float: left; padding-top: 25px; padding-left: 25px; width: 10%;">
<img src="icon.png" style="float: right; padding-top: 25px; padding-right: 25px; width: 3%;">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="leftSide">
<div class="centerDiv"><h2 class="Text"> Experience the best golf and so much more at Portugal's #1 Golf
Resort </h2></div>
<img src="748A5226_RT.jpg" alt="Golf Course showing two ponds" style="width: 100%;">
<div class="centerDiv">
<p class="Text">Ranked at #4 in Golf World's Top 100 Continental Europe 2019 list, Monte Rei is the perfect end
of year
destination, pairing excellent golf and attractive resort experiences.
</p>
</div>
<p class="Text">
<ul style="list-style-position: inside">
<li> Award-winning golf on Monte Rei's Signature Jack Nicklaus North Course</li>
<li> Refined dining options, from formal evening dining to relaxed poolside lunches</li>
<li> Activities, from yoga and cycling to guided local tours, ensure that no moment is wasted</li>
<li> Variety of package options available, including other Algarve golf courses</li>
<li> Only 45 minutes from Faro airport</li>
</ul>
</p>
<div class="leftPicture1">
<img src="img.jpeg" width="95%">
</div>
<div class="leftPicture2">
<img src="img3.jpg" width="95%">
</div>
</div>
<div class="rightSide Text">
<div class="form">
<div class="insideForm">
<form action="/action_page.php">
<div class="centerDiv"><h2> Find out more today </h2></div>
<hr>
<p> Simply enter your details or call Monte Rei’s team on +351 281 950 950. Terms and conditions apply.
</p>
<input type="text" id="name" name="firstname" placeholder="Name">
<input id="email" name="email" placeholder="Email">
<input type="text" id="phone" name="phone" placeholder="Phone">
<input type="checkbox" name="tsandcs" value="Checked"> Check this box to indicate that you have read and
agree to the terms of the Monte Rei Data Policy<br>
<input type="submit" value="SEND">
</form>
</div>
</div>
<div class="rightPicture1">
<img src="Swimming%20pool.jpg" width="95%">
</div>
<div class="rightPicture2">
<img src="Monte_Rei_Exterior_01_Jack_Hardy_2018.jpg" width="95%">
</div>
</div>
<div class="footer">
<img src="logo.png" style="float: left; padding-top: 25px; padding-left: 25px; width: 10%;">
<img src="icon.png" style="float: right; padding-top: 25px; padding-right: 25px; width: 3%;">
</div>
</body>
</html>
Is there anything that I am missing here? I have had this problem before and I was unable to fix it.
EDIT: New screenshot showing supersized image
Have you tried
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
It seems like you are struggling with box model sizes
https://www.w3schools.com/css/css3_box-sizing.asp
You have added a width of 95% to the img tag:
<img src="img.jpeg" width="95%">
Change this to 100% or remove and add to your styles eg:
.leftPicture1 img {
width: 100%;
}
Here is the code. Hope it will help you. if any changes please let me know.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
* {
margin: 0;
padding: 0;
}
*,
::after,
::before {
box-sizing: border-box;
}
.logo-wrap {
display: flex;
justify-content: space-between;
}
.Text {
color: #bd8729;
font-family: sans-serif;
}
body {
font-family: serif, sans-serif;
background-color: #F7F6F6;
}
.topnav {
padding: 20px;
}
.content-part {
padding: 20px 0;
display: flex;
width: 100%;
}
.left-part {
margin: 15px 0;
padding: 0 20px;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.leftSide {
width: 70%;
}
.leftPicture1 {
padding-left: 20px;
padding-bottom: 20px;
}
.leftPicture2 {
padding-left: 20px;
padding-bottom: 20px;
}
.rightSide {
width: 30%;
}
.left-images {
display: flex;
}
.form {
border-radius: 5px;
background-color: #F7F6F6;
padding: 0 20px 20px 20px;
}
.insideForm {
background-color: white;
padding: 10px;
border: black 5px;
}
input[type=text],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: white;
color: #111011;
padding: 12px 20px;
border: #bd8729;
align-items: center;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #bd8729;
}
.rightPicture1 {
padding-left: 20px;
padding-bottom: 20px;
height: auto;
}
.rightPicture2 {
padding-left: 20px;
padding-bottom: 20px;
height: auto;
}
.centerDiv {
position: relative;
text-align: center;
margin-bottom: 20px;
}
.footer {
width: 100%;
height: 80px;
background-color: #303233;
position: relative;
display:flex;
justify-content:space-between;
padding:20px;
}
#media screen and (max-width: 767px) {
.topnav a:not(:first-child) {
display: none;
}
.content-part,.left-images{
display:block;
}
.leftPicture1,.leftPicture2{padding-left:0}
.leftSide,.rightSide{width:100%;}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<div class="logo-wrap">
<img src="https://dummyimage.com/100x50/000000/ffffff.png">
<img src="https://dummyimage.com/100x50/ff00ff/ffffff.png">
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="content-part">
<div class="leftSide">
<div class="centerDiv">
<h2 class="Text"> Experience the best golf and so much more at Portugal's #1 Golf
Resort </h2>
</div>
<img src="http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg" alt="Golf Course showing two ponds" style="width: 100%;">
<div class="left-part">
<div class="centerDiv">
<p class="Text">Ranked at #4 in Golf World's Top 100 Continental Europe 2019 list, Monte Rei is the perfect end
of year
destination, pairing excellent golf and attractive resort experiences.
</p>
</div>
<div class="points-Text">
<ul style="list-style-position: inside">
<li> Award-winning golf on Monte Rei's Signature Jack Nicklaus North Course</li>
<li> Refined dining options, from formal evening dining to relaxed poolside lunches</li>
<li> Activities, from yoga and cycling to guided local tours, ensure that no moment is wasted</li>
<li> Variety of package options available, including other Algarve golf courses</li>
<li> Only 45 minutes from Faro airport</li>
</ul>
</div>
</div>
<div class="left-images">
<div class="leftPicture1">
<img src="http://lorempixel.com/output/nature-q-c-640-480-6.jpg" width="100%">
</div>
<div class="leftPicture2">
<img src="http://lorempixel.com/output/technics-q-c-640-480-5.jpg" width="100%">
</div>
</div>
</div>
<div class="rightSide Text">
<div class="form">
<div class="insideForm">
<form action="/action_page.php">
<div class="centerDiv">
<h2> Find out more today </h2>
</div>
<hr>
<p> Simply enter your details or call Monte Rei’s team on +351 281 950 950. Terms and conditions apply.
</p>
<input type="text" id="name" name="firstname" placeholder="Name">
<input type="text" id="email" name="email" placeholder="Email">
<input type="text" id="phone" name="phone" placeholder="Phone">
<input type="checkbox" name="tsandcs" value="Checked"> Check this box to indicate that you have read and
agree to the terms of the Monte Rei Data Policy<br>
<input type="submit" value="SEND">
</form>
</div>
</div>
<div class="rightPicture1">
<img src="http://lorempixel.com/output/business-q-c-640-480-8.jpg" width="100%">
</div>
<div class="rightPicture2">
<img src="http://lorempixel.com/output/transport-q-c-640-480-3.jpg" width="100%">
</div>
</div>
</div>
<div class="footer">
<img src="logo.png">
<img src="icon.png">
</div>
</body>
</html>
I am attempting to recreate buttons that I have already created for my desktop site by using the same css styling on the mobile buttons. i have tried deleting the css one line at time and it doesn't seem to be the css (after all the same css works for the desktop buttons.
The problem: I want the buttons to be completely styled but instead it is leaving the stock button and adding the style as a border
#clients-title {
background: #f4f4f4;
padding: 1rem 0;
}
#clients-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid .cr-btn {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#clients-btn-grid .cr-btn:hover {
cursor: pointer;
background-color: #333;
}
#media(max-width: 800px) {
#clients-btn-grid {
display: none;
}
}
.mobile-grid {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#media(min-width: 800px) {
.mobile-grid {
display: none;
}
}
<section id="clients-title">
<div class="grid-items">
<h2 class="m-heading text-center">
<span id="client-r" class="text-primary">Client</span> Resources
</h2>
</div>
<div id="clients-grid">
<div class="grid-items">
<h2>
TD Ameritrade Access
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://www.advisorclient.com/login'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
American Equity
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
IRS-Where's My Refund?
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'">LOGIN</button>
</div>
</div>
</div>
<div id="clients-btn-grid">
<div class="grid-items">
<button onclick="location.href='https://www.advisorclient.com/login'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'"class="cr-btn">LOGIN</button>
</div>
</div>
</section>
If you click full screen after running the code you can see the buttons displaying correct.
SOLUTION: Instead of targeting the div that the button is in I just needed target the parent div with buttons e.g
#clients-grid button {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
You did not style buttons inside #clients-grid. I also recommend you to use the same button tags for desktop and mobile view, because it would be a desaster if you have to change a link for example.
Just delete the .mobile-grid div around the button tags and style the buttons like in the desktop view.
added
button {
background-color: #4C9FCF;
color: white;
border: none;
}
button:focus{
outline:none}
#clients-title {
background: #f4f4f4;
padding: 1rem 0;
}
#clients-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid .cr-btn {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#clients-btn-grid .cr-btn:hover {
cursor: pointer;
background-color: #333;
}
#media(max-width: 800px) {
#clients-btn-grid {
display: none;
}
}
.mobile-grid {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
button {
background-color: #4C9FCF;
color: white;
border: navajowhite;
}
button:focus{
outline:none}
#media(min-width: 800px) {
.mobile-grid {
display: none;
}
}
<section id="clients-title">
<div class="grid-items">
<h2 class="m-heading text-center">
<span id="client-r" class="text-primary">Client</span> Resources
</h2>
</div>
<div id="clients-grid">
<div class="grid-items">
<h2>
TD Ameritrade Access
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://www.advisorclient.com/login'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
American Equity
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
IRS-Where's My Refund?
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'">LOGIN</button>
</div>
</div>
</div>
<div id="clients-btn-grid">
<div class="grid-items">
<button onclick="location.href='https://www.advisorclient.com/login'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'"class="cr-btn">LOGIN</button>
</div>
</div>
</section>
So i'm trying to place some text under an image but for some reason it stays on the right till the container ends and then goes under the image.
I want it to be fully under the image.
And here is the code:
.post {
margin-top: 3px;
width: 80%;
font-size: 20px;
border-bottom: 1px solid #ddd;
}
.post h2 {
font-size: 20px;
cursor: pointer;
}
.post h2:hover {
color: #0099FF;
}
.post img {
display: block;
width: 95%;
height: auto;
float: left;
position: relative;
}
.post p {
display: block;
top: 7px;
font-size: 13px;
color: #999;
}
.rating {
display: inline-block;
}
.rate {
display: inline-block;
height: 34px;
width: 44px;
border: 1px solid #ddd;
border-radius: 3px;
text-align: center;
cursor: pointer;
line-height: 30px;
margin-bottom: 25px;
margin-left: 5px;
}
.rate:first-child {
margin-left: 0;
}
.rate:hover {
border: 1px solid #999;
}
.rate img {
position: relative;
top: 7px;
left: 12px;
width: 20px;
height: 20px;
}
.social {
display: inline-block;
height: 34px;
float: right;
}
.social a img {
display: inline-block;
height: 34px;
width: auto;
margin-right: 10px;
}
<div class="post">
<h2>I know I'm a douche for wearing sunglasses at night but...</h2>
<img src="http://img-9gag-fun.9cache.com/photo/a77Pzr2_700b.jpg" />
<div class="postfooter">
<p>Over 9000 points · 56 comments</p>
<div class="rating">
<div class="rate">
<img src="up.png">
</div>
<div class="rate">
<img src="down.png">
</div>
<div class="rate">
<img src="comment.png">
</div>
</div>
<div class="social">
<a href="#">
<img src="facebook.png">
</a>
<a href="#">
<img src="twitter.png">
</a>
<a href="#">
<img src="googleplus.png">
</a>
</div>
</div>
Also it looks alright in chrome for some reason and not alright in FF.
Add css for .postfooter
.postfooter {
clear: both;
}
This will ensure it's on its own line.