I have a problem concerning responsitivity. I want this symbol "=" to hold all the menu when the screen is smaller(let say 1000px). I know I have to use responsitivity but I don't know how.
This is my index:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<title>Tagesmutter Kiel</title>
</head>
<body style="background-color: #41430e">
<!--a href="javascript:void(0);" class="icon" onclick="allLinksInOneDiv()">☰</a-->
<div id="menu">
<div class="icon-bar">
<a class="active" href="index.html"><i class="fa fa-home"></i></a>
</div>
<div class="dropdown_wohnen">
<button class="dropbtnWohnen">Wohnen</button>
<div class="wohnen_content">
Eingenwöhnung
Konzeption
</div>
</div>
<div class="dropdown_betreung">
<button class="dropbtnBetreung">Betreungskosten</button>
<div class="betreungskosten_content">
Betreuungskosten
Freie Plätze
Bilder
</div>
</div>
<div class="dropdown_tag">
<button class="dropbtnTag">Tagesablauf</button>
<div class="tag_content">
Tagesablauf
Tageskinder
Gästebuch
</div>
</div>
<div class="dropdown_kontakt">
<button class="dropbtnKontakt">Kontakt</button>
<div class="kontakt-content">
Kontakt
Urlaub
Über mich
</div>
</div>
</div>
<div class="banner">
<img class="mySlides" src="../img/img1.jpg" height ="270" style="width:100%" alt="bannerSlide">
<img class="mySlides" src="../img/img2.jpg" height ="270" style="width:100%" alt="bannerSlide">
<img class="mySlides" src="../img/img3.jpg" height ="270" style="width:100%" alt="bannerSlide">
</div>
<div class="info">
<h1>Hallo, liebe Eltern! </h1>
<p style="
padding-left: 10px"> Sie suchen eine Tagesmutter für Ihr Kind? <br>
Ich hoffe, dass ich Ihnen mit diesen Seiten einen kleinen Einblick
in meine Arbeit als Tagesmutter ermöglichen kann. ☺ </p>
<h5>Tagesmutter Irene</h5>
</div>
</body>
</html>
And now the stylesheet:
#menu
{
background-color: #78409a;
display: flex;
margin-top: -2%;
margin-left: 15%;
margin-right: 10%;
width: 68%;
}
.icon-bar { margin-right: 0.2%;}
.icon-bar a
{
float: right;
color: white;
font-size: 710%;
}
.active {background-color: #4CAF50;}
.dropdown_whohnen
{
position: relative;
display: inline-block;
}
.dropbtnWohnen
{
background-color: #4CAF50 ;
color: white;
padding: 33.25%;
font-size: 100%;
border: none;
cursor: pointer;
}
.wohnen_content
{
display: none;
position: absolute;
background-color: #d5416e;
min-width: 13.2%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.wohnen_content a
{
color: black;
padding: 6% 6%;
text-decoration: none;
display: block;
}
.dropdown_wohnen:hover .wohnen_content {display: block;}
.dropdown_wohnen:hover .dropbtnWohnen {background-color: #3e8e41;}
.wohnen_content a:hover {background-color: #ddd}
.dropdown_betreung
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnBetreung
{
background-color: #4CAF50 ;
color: white;
padding: 24.7%;
font-size: 100%;
border: none;
cursor: pointer;
}
.betreungskosten_content
{
display: none;
position: absolute;
background-color: #DAF7A6 ;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.betreungskosten_content a
{
color: black;
padding: 15px 15px;
text-decoration: none;
display: block;
}
.dropdown_betreung:hover .betreungskosten_content {display: block;}
.dropdown_betreung:hover .dropbtnBetreung {background-color: #3e8e41;}
.betreungskosten_content a:hover {background-color: #ddd}
.dropdown_tag
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnTag
{
background-color: #4CAF50 ;
color: white;
padding: 29.2%;
font-size: 100%;
border: none;
cursor: pointer;
}
.tag_content
{
display: none;
position: absolute;
background-color: #78409a ;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.tag_content a
{
color: black;
padding: 5% 5%;
text-decoration: none;
display: block;
}
.dropdown_tag:hover .tag_content {display: block;}
.dropdown_tag:hover .dropbtnTag {background-color: #3e8e41;}
.tag_content a:hover {background-color: #ddd}
.dropdown_kontakt
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnKontakt
{
background-color: #4CAF50 ;
color: white;
padding: 34.09%;
font-size: 100%;
border: none;
cursor: pointer;
}
.kontakt-content
{
display: none;
position: absolute;
background-color: #12d3df;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.kontakt-content a
{
color: black;
padding: 15px 15px;
text-decoration: none;
display: block;
}
.dropdown_kontakt a:hover {background-color: #ddd}
.dropdown_kontakt:hover .kontakt-content {display: block;}
.dropdown_kontakt:hover .dropbtnKontakt {background-color: #3e8e41;}
.banner
{
height: 270px;
margin-left: 15%;
margin-right: 10%;
width: 68%;
background-color: white;
}
.mySlides {display:none;}
.info h1, h5, h3
{
font-family: 'Tangerine';
font-size: 78px;
text-shadow: 10px 10px 10px #aaa
}
.info
{
background-color: #a6debb;
margin-top: -4%;
margin-left: 15%;
margin-right: 10%;
width: 68%;
font-family: 'Helvetica', serif;
font-size: 40px;
text-shadow: 22px 22px 22px #aaa;
}
.info p
{
padding-left: 10px;
font-family: 'Helvetica', serif;
font-size: 25px;
text-shadow: 22px 22px 22px #aaa;
}
table
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th
{
border: 1px solid #9a1838 ;
text-align: left;
padding: 8px;
}
tr:nth-child(even)
{
background-color: #dddddd;
}
#map
{
margin-left: 9%;
width: 80%;
height: 400px;
background-color: grey;
}
Please, can you help me with this? And I also have a display different depending on the browser ( Firefox vs chrome).
Based on your question it seems you want to build a mobile navigation menu that opens when clicking the symbol "=".
You need to do the following:
- HTML: Add a list within an unordered list, to hold the anchor links. This is the navigation text you will see when it is expanded. Attach an onclick functionality that will be used in below javascript.
- CSS: Style your navigation menu.
- Javascript: Create a function that reacts on the HTML onclick. This function will expand your navigation menu. Your function should be able to toggle the menu, meaning that same button should be able to open/close the menu.
...if your need further assistance please create a code snippet.
Related
I am incredibly new to html and css, so please bear with me. I am attempting to make a website for two airbnb listings, and the webpage looks fine on a computer: Display on Webpage Here
However, on mobile, everything looks completely different: Display on Mobile Here
.titlecard {
text-align: center;
}
.airbnb-embed-frame {
float: center;
display: block;
}
p {
font-family: sans-serif;
}
.navbar {
overflow: hidden;
background-color: #0494CE;
font-family: Arial;
}
.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-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.column {
text-align: center;
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
flex-direction: column;
}
.button {
background-color: white;
border: 2px solid #0494CE;
padding: 12px 28px;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-style: normal;
display: inline-block;
font-size: 16px;
color: black;
transition-duration: 0.4s;
}
.button:hover {
background-color: #0494CE;
color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0" />
<title>Seas The Day</title>
<link href="seastheday.css" rel="stylesheet" />
</head>
<body bgcolor="#FFFFFF">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn"> About
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Seas The Day Top Floor
Seas The Day Bottom Floor
</div>
</div>
Contact Us
</div>
<div class="titlecard">
<img width="50%" src="seastheday.png">
</div>
<div class="row">
<div class="column">
<div class="airbnb-embed-frame" data-id="667282659982690585" data-view="home" style="width:450px;height:300px;margin:auto">View On Airbnb<a href="https://www.airbnb.com/rooms/667282659982690585?check_in=2022-08-24&check_out=2022-08-31&guests=1&adults=1&s=66&source=embed_widget"
rel="nofollow">Seas The Day</a>
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
</div>
<div class="column">
<div class="airbnb-embed-frame" data-id="678907740859397970" data-view="home" style="width:450px;height:300px;margin:auto">View On AirbnbSeas The Day 2
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
</div>
</div>
<div class="row">
<div class="column">
Learn More
</div>
<div class="column">
Learn More
</div>
</div>
</body>
</html>
Is there any way that I can make it so this doesn't occur and the mobile browser looks similar to the desktop? What are my alternatives if this is impossible?
I'd recommend using flexbox instead of floats, which are an older and less efficient way to do your layout. In the code below I stacked the airbnb frames vertically for mobile and tablet view, then horizontally for desktop like you had them. I had to rearrange some of your html code to achieve this, and use media queries. It was easier for me to use style tags to add the CSS for this example. I also had to change the width of the airbnb-embed-frame and remove the inline style rules in the html for that, as the 450px width was causing problems with the layout in mobile view. I tried to put the code in the example setting for the answer but it wasn't showing the airbnb frames. I hope this answer is satisfactory, this is kind of my take on how I'd like to make it look.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0" />
<title>Seas The Day</title>
<link href="seastheday.css" rel="stylesheet" />
</head>
<style>
.titlecard {
text-align: center;
}
.airbnb-embed-frame {
float: center;
display: block;
}
p {
font-family: sans-serif;
}
.navbar {
overflow: hidden;
background-color: #0494CE;
font-family: Arial;
}
.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-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media (min-width: 1024px) {
.row{
display: flex;
justify-content: space-around;
}
}
.airbnb-embed-frame{
width: 300px;
margin: auto;
}
#media (min-width: 768px) {
.airbnb-embed-frame{
width: 450px;
}
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
.column-2{
margin: 30px;
}
.button {
background-color: white;
border: 2px solid #0494CE;
padding: 12px 28px;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-style: normal;
display: inline-block;
font-size: 16px;
color: black;
transition-duration: 0.4s;
}
.button:hover {
background-color: #0494CE;
color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
</style>
<body bgcolor="#FFFFFF">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn"> About
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Seas The Day Top Floor
Seas The Day Bottom Floor
</div>
</div>
Contact Us
</div>
<div class="titlecard">
<img width="50%" src="seastheday.png">
</div>
<div class="row">
<div class="column">
<div class="airbnb-embed-frame" data-id="667282659982690585" data-view="home" >View On Airbnb<a href="https://www.airbnb.com/rooms/667282659982690585?check_in=2022-08-24&check_out=2022-08-31&guests=1&adults=1&s=66&source=embed_widget"
rel="nofollow">Seas The Day</a>
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
<div class="column-2">
Learn More
</div>
</div>
<div class="column">
<div class="airbnb-embed-frame" data-id="678907740859397970" data-view="home" >View On AirbnbSeas The Day 2
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
<div class="column-2">
Learn More
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
What is a clearfix?
(10 answers)
background color in css not showing up
(2 answers)
Closed 1 year ago.
There is a logo in the bottom right, which I removed the link because it will not get the image due to where its located. Aside from that, the background behind it and the <div class="green"></div>is supposed to be colored with #104723; but it will not apply it?? Why is that?
I applied the color style as well as the background-color style and nothing happens, even if I include the !important tag.
.green{ color: #104723;}
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
padding: 0px auto;
margin: 0px auto;
height: auto;
min-height: 10%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#MSOZone {
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
line-height: 0;
font-size: 0;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
display: block;
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.ms-wpContentDivSpace {
height: auto !important;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.ms-webpartPage-root{
border-spacing:0px!important;
}
.ms-webpartzone-cell {
margin: 0px !important;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
#contentRow {
width: 101%;
}
.flexbox-container {
margin-top: -30px;
width: 100%;
height: 100%;
}
html, body {margin: 0; height: 100%; overflow-x: hidden !important; overflow-y: hidden !important;}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Projects Landing Page</title>
<link rel="stylesheet" href="css/site.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Active Projects Site</h1>
<h1 class="gold">Going Beyond</h1>
<div class="selector">
<a href="" target="_blank" class="btnselect">USMC Site
<i class="fa fa-caret-down"></i>
</a>
<div class="item-select">
Contract 1
Contract 2
Contract 3
Contract 4
</div>
</div>
<div class="selector">
<a href="" target="_blank" class="btnselect">Army Site
<i class="fa fa-caret-down"></i>
</a>
<div class="item-select">
Contract 1
Contract 2
Contract 3
Contract 4
Contract 5
Contract 6
</div>
</div>
<div class="selector">
<a href="" target="_blank" class="btnselect">DoD Site
<i class="fa fa-caret-down"></i>
</a>
<div class="item-select">
Contract 1
</div>
</div>
</div>
</div>
<div class="green">
<img src="" class="logo"/>
</div>
</body>
<script>
document.getElementsByTagName('title')[0].innerText = "Projects Landing";
</script>
</html>
.green{ color: #104723;}
sets the text color to green. There's no text in that div, so you don't see a change.
.green{ background-color: #104723; }
sets the background color to green, which is probably what you want.
Additionally, if the div takes up no space, none of this will make a difference. You'll want to make sure there's visible content in it too -- an img with no source is not that.
Use backgound-color to apply color in backgrounds.
I am having issues with my styling for a landing page on SharePoint.
SharePoint loves to write over HTML with its own which makes the styling a bit funky.
There are a few table elements that appear with the element selector in the developer tools on the page, but I do not believe those are interfering with my custom HTML. There are two s that appear and I believe is messing with my HTML/CSS. They are both #s4-bodyContainer & #contentRow. The more I look at it it seems that the #s4-bodyContainer is the one it will not fill. I have changed the margin of it to 0, as well as the width to 100% and the content still will not cover the whole width/height of the containing div?
Here is my relevant HTML/CSS:
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
Here is what they look like on page:
If I'm not mistaken, the CSS rules for the #s4-bodyContainer on SharePoint are not inline (from external file: corev15.css). Meaning you should be able to override them if you attach your CSS at the end of the master-page body. If it doesn't work you can resort to the !important tag to give your CSS properties precedence. checkout CSS Specificity.
Using ! important doesn't always fixes the issue. The problem basically with ! important is perhaps your styling library might also be using it. So try checking whether your margin and width property is being applied to that specific section through Google inspector or any other browser inspector. Try checking whether your styling software has made a property called max-width and whether it is being applied. And most of all if a little modification and fidlling with ! important doesn't work. Go for inline css..
That is an issue with space if image is used as original inline-element like an text element. Solution:
Just add
display:block; to .troopers
See example!
(Alternative: set line-height: 0; font-size: 0 to wrapper of image div.tst. That avoid unwhanted space from text effects as well.)
header {
text-align:center;
background: #104723;
overflow:auto;
}
.flexbox-container {
display:flex;
align-items:center;
background:#f2f2f2;
width: 100%;
}
#s4-bodyContainer {
margin: 0;
width: 100%;
}
#s4-workspace{
overflow: hidden;
margin: 0;
}
footer {
background: #104723;
color: #104723;
height: 85px;
width: 100%;
}
.headhead {
color: white;
}
.flexbox-container > * {
flex:1;
min-width:0;
margin:0;
}
.tst{
position: relative;
}
.troopers {
/* ADD ... */
display: block;
max-width:100%;
filter: drop-shadow(2px 2px 5px #000);
}
button {
display:block;
margin-top:50px;
}
.black {
font-size:25px;
color: #104723;
font-weight: bold;
}
.logo {
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
}
.gold {
font-size: 35px;
color: #b3ab7d;
font-weight: bolder;
margin-top: -15px;
}
.btn-group .button {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.selector {
float: left;
overflow: hidden;
}
.selector .btnselect {
background-color: #104723;
border: 1px solid;
color: #b3ab7d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.item-select {
display: none;
position: absolute;
background-color: #e7e7e7;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.item-select a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.item-select a:hover {
background-color: #ddd;
color: black;
}
.selector:hover .item-select {
display: block;
}
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0 }
.flexbox-container {
margin-top: 0px;
width: 100%;
}
html, body {margin: 0; height: 100%; overflow: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Example Landing Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--<header>
<h1 class="headhead">Active Projects</h1>
</header>-->
<div class="flexbox-container">
<div class="tst">
<img class="troopers" src="https://www.usxjobs.com/wp-content/uploads/2016/05/TROOPERS-2a.png" alt="troopers"/>
</div>
<div>
<h1 class="black">Welcome to the Projects Site</h1>
<h1 class="gold">Insert Sample Text</h1>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 1
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
</div>
</div>
<div class="selector">
<a href="" target="_blank"><button class="btnselect">Site 2
<i class="fa fa-caret-down"></i>
</button></a>
<div class="item-select">
Sub 1
Sub 2
Sub 3
Sub 4
Sub 5
</div>
</div>
</div>
</div>
<footer>
<img src="" class="logo"/>
</footer>
</body>
</html>
After a deep swipe of anything on the internet that could remotely helpful to this issue, I finally came across a similar topic on the MSDN :
The solution says to implement this:
.ms-webpartPage-root{
border-spacing:0px!important;
}
And it works!
I'm trying to re-create Google's home page to try and improve my very basic skills. I'm trying to apply word spacing to the links in the navbar (Gmail & Images) but I can't get it to work. Can anyone point out where I'm going wrong?
I've just realised list-style-type: none; hasn't altered anything either.
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border: 1px solid lightgray;
outline: none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166, 166, 166, 0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight: bold;
}
.divider {
width: 10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
list-style-type: none;
word-spacing: 30px;
}
<nav>
<div class="nav-wrapper">
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="googlemain.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
padding-left would work fine.
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border:1px solid lightgray;
outline:none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166,166,166,0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight:bold;
}
.divider {
width:10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
</style>
</head>
<body>
<nav>
<div class="nav-wrapper">
<ul>
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
</body>
</html>
Don't Required:
word spacing
<div class="dividerTwo"></div>.
Do only :
Apply some padding around .nav-wrapper a
.nav-wrapper a {
float: right;
list-style-type: none;
padding:0 .5em;
}
In this scenario you should use margin CSS property instead of word-spacing. The end CSS rule would look as follows:
.nav-wrapper a {
float: right;
list-style-type: none;
margin-left: 15px;
}
I am having an issue with the second level menu only in Safari. Top level and submenu work fine on mouse hover on chrome, firefox etc but when opened in Safari, only first menu is opening on hover. I have already tried other solutions available here and on other forums but it's still same.
.nav {
margin: 2% 10% 0 35%;
/*margin-bottom: 4px;
margin-top: 2%;
margin-left: 35%;
margin-right: 10%;*/
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family:"Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {
/*padding-left: 30px;*/
padding-left: 0px !important;
margin-left: 30px;
}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
margin-left: -200px;
margin-top: -50px;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
margin-left: 200px !important;
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css"/>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I have included the HTML and CSS code for the menu. I have also checked it on chrome using windows OS, and it works but the only issue is with safari browser.
There are a couple of suggestions I have that may help.
Firstly, I would not recommend using position: fixed; to position your submenus because fixed is a position relative to the browser window. You likely want the submenus to be positioned according to the parent, not the window.
Secondly, you have overflow: hidden; on .navbar-nav, which means anything that falls outside the borders of it should be invisible - which would include your submenus.
Here is a JSFiddle with a working example of your snippet with my suggestions, tested and working in Safari:
.nav {
margin: 2% 10% 0 35%;
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family: "Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: relative;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: absolute;
top: 0;
left: 100%;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/m59vk802/4/