I have these boxes that contain social icons at the end of each webpage of my website. I didn't write the code for it because I'm editing a template so I didn't really do anything. However, one of the pages has a messed up box. They all share the same CSS and the HTML for it is the same as on other pages so I can't figure out why this single page is acting up. I've carefully compared the pieces of code on other pages just in case I have mistakenly changed something but there's no difference and now I'm stumped. What can possibly be wrong? My code snippets below, if someone might kindly help me look at it.
HTML:
<!DOCTYPE HTML>
<html>
<body>
<section id="footer">
<ul class="icons">
<li><span>Twitter</span></li>
<li><span>Facebook</span></li>
<li><span>Google+</span></li>
</ul>
<div class="copyright">
<ul class="menu">
<li>© 2022 by Me. All rights reserved.</li>
<li>Privacy</li>
<li>Terms of Use</li>
</ul>
</div>
</section>
</body>
</html>
And the CSS:
<style>
footer
{
margin-top: 1em;
}
br.clear
{
clear: both;
}
/* Sections/Articles */
section,
article
{
margin-bottom: 3em;
}
section > :last-child,
article > :last-child
{
margin-bottom: 0;
}
section:last-child,
article:last-child
{
margin-bottom: 0;
}
.row > section,
.row > article
{
margin-bottom: 0;
}
/* Images */
.image
{
display: inline-block;
border: 0;
}
.image img
{
display: block;
width: 100%;
}
.image.featured
{
display: block;
width: 100%;
margin: 0 0 2em 0;
}
.image.full
{
display: block;
width: 100%;
}
.image.left
{
float: left;
margin: 0 2em 2em 0;
}
.image.centered
{
display: block;
margin: 0 0 2em 0;
}
.image.centered img
{
margin: 0 auto;
width: auto;
}
/* Lists */
ul.default
{
list-style: disc;
padding-left: 1em;
}
ul.default li
{
padding-left: 1.5em;
margin-top: 1.5em;
}
ul.default li:first-child
{
margin-top: 0;
}
ul.icons
{
cursor: default;
}
ul.icons li
{
display: inline-block;
}
ul.icons a
{
display: inline-block;
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
text-align: center;
border: 0;
}
ul.menu
{
cursor: default;
}
ul.menu li
{
display: inline-block;
line-height: 1em;
border-left: solid 1px #dad9d9;
padding: 0 0 0 0.5em;
margin: 0 0 0 0.5em;
}
ul.menu li:first-child
{
border-left: 0;
padding-left: 0;
margin-left: 0;
}
ul.actions
{
cursor: default;
}
ul.actions li
{
display: inline-block;
margin: 0 0 0 0.5em;
}
ul.actions li:first-child
{
margin-left: 0;
}
ol.default
{
list-style: decimal;
padding-left: 1.25em;
}
ol.default li
{
padding-left: 1.25em;
margin-top: 1.5em;
}
ul.default li:first-child
{
margin-top: 0;
}
</style>
Thanks!
Related
I am building a personal website, and want to get a dropdown menu working. So far the first part is working, but the second (dropdown in dropdown) isn't.
It is the "Alternate History" line that isn't showing up.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
#links img,
footer img,
li img,
h1 img,
h2 img,
h3 img,
p img,
.dropme img {
height: 1em;
}
footer {
clear: both;
text-align: center;
padding-top: 2em;
}
body {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 1em;
background: #111;
color: #eee;
}
html {
padding-bottom: 500px;
}
dt {
color: orange;
margin-top: 2px;
}
dd {
margin-bottom: 2px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-align: center;
text-shadow: -1px 3px 3px rgba(0, 0, 0, 0.68);
}
h1 {
color: red;
}
h2 {
color: goldenrod;
}
h3 {
color: teal;
}
a {
color: lime;
text-decoration: none;
}
a:hover {
color: red;
}
.menubar li a {
display: block;
}
.menubar {
display: inline-block;
margin: 0;
padding: 0;
zoom: 1;
}
nav {
margin-left: auto;
margin-right: auto;
font-size: large;
text-align: center;
}
.menubar li {
display: block;
float: left;
width: 100px;
min-height: 1.5em;
background: #222;
border: #444 solid 2px;
padding: 3px;
margin: 4px;
}
.menubar li:hover {
background: #000;
}
.menubar a {
text-decoration: none;
}
.menubar li ul {
visibility: hidden;
position: absolute;
padding-top: 10px;
}
.menubar li:hover ul {
visibility: visible;
padding-left: 0;
margin-left: -7px;
}
.menubar li ul li {
float: none;
position: relative;
width: 150px;
text-align: left;
}
code {
color: green;
/* overflow-x: auto; */
}
/* pre { */
/* background: var(--color256); */
/* border: 1px solid var(--color8); */
/* border-radius: 4px; */
/* padding: 5px; */
/* display: block; */
/* align: center; */
/* max-width: 900px; */
/* /1* background: #1d2021; *1/ */
/* } */
<!DOCTYPE html>
<html lang="en">
<head>
<title>Smash Civilization's Homepage</title>
<link rel='stylesheet' type='text/css' href='style.css'>
<meta charset="utf-8" />
</head>
<body>
<nav>
<ul class="menubar">
<h1><big>Smash Civilization</big></h1>
<div id="links">
<div class="cat">
<li>Home</li>
<li>About</li>
<li>Literature
<ul>
<li>Category</li>
<ul>
<li>Alternate History</li>
</ul>
<li>Dewey Decimal</li>
</ul>
<li>Issues</li>
<li>Podcasts</li>
<li>Talks</li>
<li>Vision</li>
</div>
</div>
</ul>
</nav>
</body>
</html>
What do I need to fix to get this working correctly? Any help is most appreciated!
Layout of what I'mm trying to achieve
I've done the top half of the nav bar and I'm trying to do the second part where the boxes (represent words), which I have circled in the image. I'm trying to directly make that section below the logo sign centered like the image shows but I am unsure on how to do that.
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
/* align-items: center; */
justify-content: center;
}
header {
background: #ffe9e3;
height: 100px;
}
.logo {
text-align: center;
margin: 0;
display: block;
}
.business {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
.menu {}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav class=m enu>
<ul>
<li>Hair</li>
<li>Nails</li>
<li>Makeup</li>
<li>Face</li>
</ul>
</nav>
<nav class=b usiness>
<ul>
<li>List Your Business</li>
</ul>
</nav>
<<div class="menu">
<nav>
</nav>
</div>
</div>
</header>
I have done the way you wanted it to look
CSS Part :
* {
padding: 0;
margin: 0;
}
body {
background: #333333;
min-width: 100vw;
min-height: 100vh;
}
.header {
height: 150px;
background: pink;
}
.logo {
padding: 10px;
text-align: center;
}
.nav > ul {
display: flex;
justify-content: space-evenly;
padding: 10px;
margin-top: 20px;
}
.nav > ul > li {
width: 100px;
list-style: none;
border: 2px solid #000;
border-radius: 20px;
}
.nav > ul > li > a {
text-decoration: none;
color: #fff;
font-size: 1.3rem;
padding: 3px 5px;
display: flex;
justify-content: center;
}
check the whole code here: https://codepen.io/the-wrong-guy/pen/GRoyKMa?editors=1100
And you have made a lot of syntax errors like not giving double quotes to the class names
I am trying to implement a responsive top navigation bar into my website. After several trials it's still not working properly and I can't understand where I went wrong.
Could you please tell me if there are any mistakes ?
I attached below the script for the top navigation bar and the script for responsive.
Thank you very much for your help.
Turo
#main_nav {
background-color: #FFFFFF;
position: sticky;
top: 0;
position: -webkit-sticky;
margin: collapse;
border-bottom: 0.2em solid #F8FBF9;
z-index: 10;
box-shadow: 0.2em 0.3em 0.8em #E5E4E3;
}
#main_nav ul {
padding: 0;
margin: 0;
text-align: center;
}
#main_nav ul li {
display: inline-block;
width: 19.7%;
}
#main_nav ul li a{
color: #FF0D90;
padding: 1em 0;
font-family: Monaco, monospace;
font-weight: lighter;
font-size: 1.2em;
text-decoration: none;
text-align: center;
display: inline-block;
width: 100%;
}
#main_nav ul li a:hover {
color: #5CA3F9;
background-color: #F8FBF9;
}
.sel_nav{
background-color: #FAFCFB;
}
#media screen and (max-width: 480px) { /* CSS Rules */
body {
width: 100%;
padding: 0;
margin-right: 0;
margin-left: 0;
overflow: scroll;
}
#main_nav {
position: relative;
margin-right: 0;
margin-left: 0;
width: 100%;
height: 100%;
text-align: center;
}
#main_nav ul {
width: 19%;
padding: 1%;
text-align: center;
margin: 0;
}
#main_nav ul li {
display: block;
width: 100%;
vertical-align: middle;
text-align: center;
margin: 0 auto;
margin-left: 120%;
}
#main_nav ul li a {
display: block;
text-align: center;
vertical-align: middle;
padding: 0.5em 3em 0.2em 1.5em;
}
Try the below code, it should work. You had some unnecessary width and padding in your code and you don't need to use display: inline-block; for each and every elements. Here's a cleaner code:
#main_nav {
display: inline-block;
overflow: hidden;
background-color: #FFFFFF;
top: 0;
position: sticky;
position: -webkit-sticky;
margin: collapse;
border-bottom: 0.2em solid #F8FBF9;
box-shadow: 0.2em 0.3em 0.8em #E5E4E3;
width: 100%;
}
#main_nav ul {
list-style-type: none;
text-align: center;
display: flex;
justify-content: space-around;
padding: 0;
}
#main_nav ul li {
display: inline-block;
}
#main_nav ul li a {
color: #FF0D90;
text-decoration: none;
font-family: Monaco, monospace;
font-weight: lighter;
font-size: 1.2em;
padding: 1.5em 1.5em;
}
#main_nav ul li a:hover {
color: #5CA3F9;
background-color: #F8FBF9;
}
#media screen and (max-width: 480px) {
#main_nav {
display: block;
}
#main_nav ul {
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#main_nav ul li {
display: block;
}
#main_nav ul li a {
display: inline-block;
padding: 0.5em 3em;
}
}
<nav id="main_nav">
<ul>
<li>HOME</li>
<li>NATURA</li>
<li>CITTA'</li>
<li>IMMAGINI</li>
<li>CONTATTI</li>
</ul>
</nav>
To test responsiveness, test it out at JSFiddle.
it's my first year on coding and i'm doing this for a school Project. We have to do a responsive site and i'm already facing a problem when trying to add a navbar to my site. Whenever i add it, it just goes too much to the left and wont go in the middle. I tried searching google for help but none of them worked so thought i'd register here to ask. Thanks in advance!
body {
background: white none;
color: black;
/* jätetään ylämarginaalia navigointipalkin tilan verran */
margin-top: 0em;
/* jätetään vasempaan laitaan marginaalia saman verran kuin
laitaan tuleva linkkialue vie */
margin-left: 24.5%;
padding: 0.5em;
margin-right: 24.5%;
margin-top: 10
}
body {
background-image: url("8.jpg");
}
#logo {
margin-left: 0px;
margin-top: -180px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #89F52B;
}
<ul>
<li>Etusivu</li>
<li>Pelit</li>
<li>Palaute</li>
<li>Yhteystiedot</li>
<li>Lomake</li>
</ul>
<div id="logo">
<img src=""/>
</div>
If you want your menu items centered inside the whole menu bar, just do as #Pete said:
li {
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
text-align: center; <-----------
}
body {
background: white none;
color: black;
/* jätetään ylämarginaalia navigointipalkin tilan verran */
margin-top: 0em;
/* jätetään vasempaan laitaan marginaalia saman verran kuin
laitaan tuleva linkkialue vie */
margin-left: 24.5%;
padding: 0.5em;
margin-right: 24.5%;
margin-top: 10
}
body {
background-image: url("8.jpg");
}
#logo {
margin-left: 0px;
margin-top: -180px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: Green;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #89F52B;
}
<ul>
<li>Etusivu</li>
<li>Pelit</li>
<li>Palaute</li>
<li>Yhteystiedot</li>
<li>Lomake</li>
</ul>
<div id="logo">
<img src=""/>
</div>
I am not entirely sure this is possible with CSS, but I know it is with Jquery. If it is possible only with CSS, I would appreciate help that way as I don't understand Jquery at all.
I am looking to make a breakpoint at 800px. I need to hide all the li items except the logo at this breakpoint.. How do I make an exception the to logo, which is an li item as well?
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
span {
margin: 0px;
padding: 0px;
}
h1 {
margin: 0 0 14px 0;
}
h2 {
margin: 0 0 10px 0;
}
.wht {
color: #fff;
}
.clear {
clear: both;
}
/*Vivid Page Settings*/
header {
width: 100%;
background-color: #fff;
border-bottom: #000 1px solid;
}
.vd-hide {
display: none;
}
.vd-settings-wrapper {
width: 15%;
max-width: 200px;
}
.vd-user-settings {
width: 48px;
height: 48px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 12px 2px 0 21px;
}
.vd-currency-selector {
width: 58px;
height: 21px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 12px 2px 1px 2px;
}
.vd-language-selector {
width: 58px;
height: 21px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 3px 2px 0 2px;
}
/*Vivid Main Navigation*/
.vd-navigation-wrapper {
display: flex;
}
.vd-nav-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 75%;
height: 78px;
margin: 0 auto;
text-align: center;
}
.vd-nav-wrapper ul {
font-family: 'Montserrat', sans-serif;
/* text-align: center; */
list-style: none;
padding: 0;
margin: 0;
}
.vd-nav-wrapper li {
text-decoration: none;
list-style: none;
display: inline-block;
margin: 25px 20px;
vertical-align: middle;
}
.vd-nav-wrapper a {
text-decoration: none;
list-style: none;
display: inline-block;
margin: 18px 20px;
vertical-align: middle;
}
.vd-logo-img {
margin: 0px;
padding: 0px;
}
/*Vivid Checkout Settings*/
.vd-cart-wrapper {
width: 10%;
z-index: 10;
}
.vd-cart-selector {
width: 48px;
height: 48px;
border: 1px solid #000;
background-color: #fff;
margin: -11px 31px 0 2px;
position: absolute;
top: 23px;
right: -9px;
}
<div class="vd-navigation-wrapper">
<div class="vd-settings-wrapper">
<div class="vd-user-settings">
</div>
<div class="vd-currency-selector">
</div>
<div class="vd-language-selector">
</div>
</div>
<div class="vd-nav-wrapper">
<ul>
<li>Shop</li>
<li>About</li>
<li class="vd-logo-img"><img src="img/vivid_logo.png"/></li>
<li>Lookbook</li>
<li>Contact</li>
</ul>
</div>
<div class="vd-cart-wrapper">
<div class="vd-cart-selector"></div>
</div>
</div>
This is the selector you need. I think it's self explanatory:
.vd-navigation-wrapper li:not(.vd-logo-img) {
display: none;
}
Edit Thanks to Hajji Tark for pointing out Edge and FF do not support :not() selector. The workaround is to set display:none for all lis and override it for the exception:
.vd-navigation-wrapper li {
display: none;
}
.vd-navigation-wrapper .vd-logo-img {
display: block; /* use inline-block or list-item if appropriate */
}
Haven't understood your #media queries requirements. Let me know if you need help with those. Basically you need to wrap it in a
#media (min-width: 800px) { /* rules here */ }
or
#media (max-width: 800px) { /* rules here */ }
If you want a specific case for 800px (equal to), you can use
#media (min-width: 800px) and (max-width: 800px){ /* rules here */ }
#media only screen and ( max-width: 800px ) {
li[class!="vd-logo-img"] { display: none; }
}
Media Queries
Here, I used the CSS media queries to determine the page document current size, if it gets to 800px, then the styles will be applied to the document.
Selector
I used the attribute selector to target all the <li> element excluding the <li class="vd-logo-img"> with a class equal to "vd-logo-img"
Another option:
.vd-navigation-wrapper li {
display: none;
}
.vd-navigation-wrapper li.vd-logo-img {
display: block;
}
This is possible because CSS applies the more restrictive rule.
In your Css:
.vd-nav-wrapper li { display: none )
.vd-logo-img { display: initial }
You can use css media query and :not() trick to hide all li without the logo.
See the css section. Live On Fiddle works fine on every browser.
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
span {
margin: 0px;
padding: 0px;
}
h1 {
margin: 0 0 14px 0;
}
h2 {
margin: 0 0 10px 0;
}
.wht {
color: #fff;
}
.clear {
clear: both;
}
/*Vivid Page Settings*/
header {
width: 100%;
background-color: #fff;
border-bottom: #000 1px solid;
}
.vd-hide {
display: none;
}
.vd-settings-wrapper {
width: 15%;
max-width: 200px;
}
.vd-user-settings {
width: 48px;
height: 48px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 12px 2px 0 21px;
}
.vd-currency-selector {
width: 58px;
height: 21px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 12px 2px 1px 2px;
}
.vd-language-selector {
width: 58px;
height: 21px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 3px 2px 0 2px;
}
/*Vivid Main Navigation*/
.vd-navigation-wrapper {
display: flex;
}
.vd-nav-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 75%;
height: 78px;
margin: 0 auto;
text-align: center;
}
.vd-nav-wrapper ul {
font-family: 'Montserrat', sans-serif;
/* text-align: center; */
list-style: none;
padding: 0;
margin: 0;
}
.vd-nav-wrapper li {
text-decoration: none;
list-style: none;
display: inline-block;
margin: 25px 20px;
vertical-align: middle;
}
.vd-nav-wrapper a {
text-decoration: none;
list-style: none;
display: inline-block;
margin: 18px 20px;
vertical-align: middle;
}
.vd-logo-img {
margin: 0px;
padding: 0px;
}
/*Vivid Checkout Settings*/
.vd-cart-wrapper {
width: 10%;
z-index: 10;
}
.vd-cart-selector {
width: 48px;
height: 48px;
border: 1px solid #000;
background-color: #fff;
margin: -11px 31px 0 2px;
position: absolute;
top: 23px;
right: -9px;
}
#media only screen and (max-width:800px) {
.vd-nav-wrapper ul li:not(.vd-logo-img){
display: none;
}
}
<div class="vd-navigation-wrapper">
<div class="vd-settings-wrapper">
<div class="vd-user-settings">
</div>
<div class="vd-currency-selector">
</div>
<div class="vd-language-selector">
</div>
</div>
<div class="vd-nav-wrapper">
<ul>
<li>Shop</li>
<li>About</li>
<li class="vd-logo-img"><img src="img/vivid_logo.png" /></li>
<li>Lookbook</li>
<li>Contact</li>
</ul>
</div>
<div class="vd-cart-wrapper">
<div class="vd-cart-selector"></div>
</div>
</div>