I have my social menu text-aligned:center but it's still is off quite a ways. Here's my code and a jsfiddle to demonstrate the trouble. As you can see it has more open space on the left than right. I want to even it out.
jsfiddle
HTML
<div id="wrapper">
<div id="header">
Erratic Fox
</div>
<div id="social">
<ul>
<li>Facebook</li> —
<li>Deviant Art</li> —
<li>YouTube</li> —
<li>Steam</li>
</ul>
</div>
</div>
CSS
body {
margin-top: 10px;
background-color: #E5E5E5;
}
#header {
color: #404040;
width: 50%;
margin: auto;
background-color: #ffffff;
font-size:100px;
text-align: center;
}
#social {
font-family: Roboto;
font-size: 18px;
line-height: 100px;
text-align: center;
height: 100px;
width: 50%;
background-color: white;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
#social a {
text-decoration: none;
color: #404040;
transition: 1s color;
-moz-transition: 1s color;
-webkit-transition: 1s color;
}
#social a:hover {
color: #427FED;
transition: 1s color;
-moz-transition: 1s color;
-webkit-transition: 1s color;
}
#social li {
margin-right: 30px;
margin-left: 30px;
display: inline;
}
Add
#social ul {
padding-left:0;
}
Demo
Try to implement this:
ul { padding: 0; margin: 0; }
Related
I am trying to get my navbar with my logo on the left and the tabs on the right to be mobile responsive. The viewpoint meta tag drops my logo down below the nav tabs when in mobile view. It also has a scrolling function in javascript. Is it too late for me to go back in and add breakpoints with media queries? Is there an easy fix to this solution? I've tried everything and can not seem to make it work.
.nav_bar {
align-items: center;
position: relative;
height: 80px;
width: 100%;
transition: 0.2s ease;
color: rgb(78, 78, 78);
}
.nav_bar ul li a.active-page {
border-bottom: 1px solid;
}
.nav_bar .nav_ {
margin: 0;
padding: 0;
display: inline-block;
float: right;
margin-right: 5%;
}
.nav_bar .nav_ .item {
list-style: none;
display: inline-block;
font-size: 18px;
padding: 5px;
font-weight: 300;
line-height: 80px;
margin-right: 20px;
transition: 0.5s ease;
}
.nav_bar .nav_ .item a {
text-decoration: none;
color: inherit;
}
.nav_bar .logo {
color: rgb(50, 50, 50);
float: left;
display: inline-block;
margin-top: 10px;
margin-left: 5%;
width: 40px;
height: 40px;
transition: 0.5s ease;
}
.nav_bar img {
height: 40px;
width: 40px;
float: left;
:
}
.scrolled {
background-color: rgba(62, 62, 62, 0.4);
color: white;
transition: 0.5s ease;
}
.scrolled.nav_bar {
height: 50px;
background-color: rgba(62, 62, 62, 0.8);
transition: 0.5s ease;
}
.scrolled.nav_bar .nav_ .item {
line-height: 40px;
transition: 0.5s ease;
}
.scrolled.nav_bar .logo {
float: left;
display: inline-block;
margin-top: 5px;
margin-left: 5%;
width: 40px;
height: 40px;
] transition: 0.5s ease;
}
<div class="nav_bar">
<ul class="nav_">
<li class="item">
<a href="index.html" class='active-page'>Home</a>
</li>
<li class="item">
About
</li>
<li class="item">
Work
</li>
<li class="item">
Contact
</li>
</ul>
<div class="logo">
<img class="logo" src="jhlogogrey.png" alt="">
</div>
</div>
code a specific screen ratio in CSS, and within that block adjust your container’s position, padding and with.
How can i center my logo (img) and menu links horizontal. I want the logo to be at the left and menu at right but horizontal centered.
here's my code!
thanks
<div class="menu-container">
<div class="logo">
<img src=https://app.box.com/representation/file_version_186133299510/image_2048/1.png class="logo">
</div>
<nav class="menu">
Branding
Logos
Illustration
Web
Poster
Letters
All
About
</nav>
</div>
<div class="main-intro">
<h2>Let's create something great together!</h2>
</div>
---CSS---
* {
padding: 0px;
margin: 0px;
}
.menu-container{
background-color: gray;
margin: 30px;
position
}
.logo {
height: 10em;
display: inline-block;
padding: 1em;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
}
.menu {
float: right;
margin: 2em; 2em; 0; 0;
display: inline-block;
vertical-align: center;
}
https://codepen.io/Randomood/pen/KmJpWX?editors=1100
try removing the height of your logo from you css?
.logo {
display: inline-block;
padding: 1em;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
}
EDITED:
* {
padding: 0px;
margin: 0px;
}
.menu-container{
background-color: gray;
margin: 30px;
position: relative;
padding: 1em;
}
.logo {
height:10em;
border: 1px solid red;
display: inline-block;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
}
.menu {
float: right;
margin: 4.5em 0em;
display: inline-block;
vertical-align: center;
}
Just try doing this to your "menu-container"
.menu-container{
display:flex;
flex-direction:row;
justify-content:center;
background-color: gray;
margin: 30px;
}
Codepen
I am currently designing the navigation bar for my website and I've come across a problem in firefox. I have my logo to the left and my navigation content to the right, but the entire navigation content is being pushed out of the nav div (only on Firefox). What can I do to fix it?
Firefox:
http://i.cubeupload.com/OoAJIe.png
Chrome:
http://i.cubeupload.com/QXo2KS.png
Here is my HTML:
<div class="nav" id="nav">
<div class="nav_content">
<ul>
<li class="logo"><img src="images/Spendr.png" /></li>
<li class="tab btn"><button>Kurv: 0</button></li>
<li class="tab txt">Nye varer</li>
<li class="tab txt">Udsalg</li>
<li class="tab txt" id="kategorierMenu"><a>Kategorier</a></li>
</ul>
</div>
</div>
Here is my CSS:
.nav {
width: 100%;
background: #262626;
transition: background 0.5s, border 0.5s, color 0.5s, height 0.5s, padding-top 0.3s, opacity 0.5s;
position: fixed /*fixed*/;
z-index: 999;
height: 71px;
float: left;
}
.nav_content {
max-width: 1150px;
width: 90%;
height: 100%;
background: none;
margin: 0 auto;
white-space: nowrap;
}
.nav ul li, .nav ul li a {
list-style: none;
text-decoration: none;
display: inline-block;
} .nav .tab{
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
}
.txt a {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
height: 100%;
padding-top: 26px;
box-sizing: border-box;
transition: background 0.3s;
}
.txt a:hover {
cursor: pointer;
background: #1A1A1A;
}
.nav .tab { border-radius: 3px; }
.nav .txt a {
padding-left:18px;
padding-right: 18px;
}
.logo img {
height: 36px;
width: auto;
margin-top: 18px;
float: left;
}
Since you're floating the .tab elements right, add .logo { float: left; } and that will make the list items all float on either side of the menu.
.nav {
width: 100%;
background: #262626;
transition: background 0.5s, border 0.5s, color 0.5s, height 0.5s, padding-top 0.3s, opacity 0.5s;
position: fixed/*fixed*/
;
z-index: 999;
height: 71px;
float: left;
}
.nav_content {
max-width: 1150px;
width: 90%;
height: 100%;
background: none;
margin: 0 auto;
white-space: nowrap;
}
.nav ul li,
.nav ul li a {
list-style: none;
text-decoration: none;
display: inline-block;
}
.nav .tab {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
}
.txt a {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
height: 100%;
padding-top: 26px;
box-sizing: border-box;
transition: background 0.3s;
}
.txt a:hover {
cursor: pointer;
background: #1A1A1A;
}
.nav .tab {
border-radius: 3px;
}
.nav .txt a {
padding-left: 18px;
padding-right: 18px;
}
.logo img {
height: 36px;
width: auto;
margin-top: 18px;
float: left;
}
.logo {
float: left;
}
<div class="nav" id="nav">
<div class="nav_content">
<ul>
<li class="logo">
<img src="images/Spendr.png" />
</li>
<li class="tab btn"><button>Kurv: 0</button></li>
<li class="tab txt">Nye varer</li>
<li class="tab txt">Udsalg</li>
<li class="tab txt" id="kategorierMenu"><a>Kategorier</a></li>
</ul>
</div>
</div>
You could also change the menu to a flex layout and use an auto margin on .logo to separate the elements.
.nav {
width: 100%;
background: #262626;
transition: background 0.5s, border 0.5s, color 0.5s, height 0.5s, padding-top 0.3s, opacity 0.5s;
position: fixed/*fixed*/
;
z-index: 999;
height: 71px;
float: left;
}
.nav_content {
max-width: 1150px;
width: 90%;
height: 100%;
background: none;
margin: 0 auto;
white-space: nowrap;
}
.nav ul li,
.nav ul li a {
list-style: none;
text-decoration: none;
display: inline-block;
}
.nav .tab {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
}
.txt a {
float: right;
font-family: DroidSans, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
transition: color 0.3s;
height: 100%;
padding-top: 26px;
box-sizing: border-box;
transition: background 0.3s;
}
.txt a:hover {
cursor: pointer;
background: #1A1A1A;
}
.nav .tab {
border-radius: 3px;
}
.nav .txt a {
padding-left: 18px;
padding-right: 18px;
}
.logo img {
height: 36px;
width: auto;
margin-top: 18px;
float: left;
}
.nav ul {
display: flex;
}
.logo {
margin-right: auto;
}
<div class="nav" id="nav">
<div class="nav_content">
<ul>
<li class="logo">
<img src="images/Spendr.png" />
</li>
<li class="tab btn"><button>Kurv: 0</button></li>
<li class="tab txt">Nye varer</li>
<li class="tab txt">Udsalg</li>
<li class="tab txt" id="kategorierMenu"><a>Kategorier</a></li>
</ul>
</div>
</div>
I'm not really sure how to explain this, as I'm still new to coding, but I am attempting to make a profile layout for HEX, and I keep having this issue come up on every one I make:
I noticed that when I edit my scrollbox, the white space changes its size accordingly. The bigger the scroll box, the bigger the space and vice versa. Here's the code to my last profile:
body {
background-image: url(http://i.imgur.com/X3qmTN2.png);
background-repeat: no-repeat;
background-attachment: scroll;
height: 100px;
padding-bottom: 0;
font-family: Arial, sans-serif;
color: #e80812;
text-alignment: justify;
}
#nav {
width: 400px;
line-height: 80px;
padding-top: 670px;
}
#nav a:link, #nav a:visited, #nav a:active {
display: block;
font: 14px "arial";
text-transform: uppercase;
text-decoration: none;
text-align: center;
letter-spacing: 2px;
color: #ab4860;
padding: 7px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
transition: all .5s ease-out;
}
#nav a:hover {
letter-spacing: 5px;
color: #74194e;
padding: 7px 2px;
}
.hex {
position: relative;
top: 600px;
left: 100px;
background-color: transparent;
text-align: center;
}
.owl {
position: relative;
top: 800px;
left: 100px;
background-color: transparent;
text-align: center;
}
.club {
position: relative;
top: 1000px;
left: 100px;
background-color: transparent;
text-align: center;
}
b { color: #ab4860; }
u { color: #ab4860; }
i { color: #ab4860; }
<div id="nav">
<div class="hex">Back to HEX</div><br>
<div class="owl">Owl Me</div><br>
<div class="club">Club Rainbow Brigade</div><br>
</div>
<div align="left">
<div style="overflow:auto;position:relative;width:700px;height:720px;top:-350px;left:390px;margin-right:-546px;margin-bottom:-300px;">
Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>
</body>
Is there something I need to add, or remove in my code? Did I mess up somewhere and I can't see it?
I edit your code and get a working solution:
html, body {
margin:0;
padding:0;
}
body {
background-image:url(http://i.imgur.com/X3qmTN2.png);
background-repeat: no-repeat;
color:#e80812;
font-family:arial, sans-serif;
height:1660px;
text-align: justify;
width:1300px;
}
#nav {
line-height:80px;
position:absolute;
top:640px;
width:400px;
}
#nav a:link,
#nav a:visited,
#nav a:active {
color: #ab4860;
display: block;
font-family:arial;
font-size:14px;
letter-spacing:2px;
padding:7px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
transition:all .5s ease-out;
}
#nav a:hover {
color:#74194e;
letter-spacing:5px;
padding:7px 2px;
}
.hex {
position:relative;
text-align:center;
}
.owl {
position:relative;
text-align:center;
top:15px;
}
.club {
position: relative;
text-align: center;
top:30px;
}
.content {
height:850px;
left:390px;
overflow:auto;
position:absolute;
top:640px;
width:910px;
}
b, u, i {
color: #ab4860;
}
<div id="nav">
<div class="hex">Back to HEX</div>
<div class="owl">Owl Me</div>
<div class="club">Club Rainbow Brigade</div>
</div>
<div align="left">
<div class="content">Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>
</div>
There was some typos in your HTML and CSS code. I solved this and do some changes to place all the elements to the right place.
A working fiddle you can find here: http://jsfiddle.net/hhf2kpLd/
The BR tags were your downfall, I've changed a few other things too.
<div id="nav">
<div class="hex">Back to HEX</div>
<div class="owl">Owl Me</div>
<div class="club">Club Rainbow Brigade</div>
</div>
http://jsfiddle.net/link2twenty/xxvkzz28/
The div
<div style="overflow:auto;position:relative;width:700px;height:720px;top:-350px;left:390px;margin-right:-546px;margin-bottom:-300px;">
Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>
Makes your content to be out of the delimited area of your html content. Use your Browser Inspector to see it. I think that some browsers will interpret your code in a different way and the result will be different (with some blank space for example).
Can you first upload your img on another site (like casimage.com) cause it's lock on my side (proxy limitation) ? And then you should structure your site on a different way, with no relative or absolute position.
I made some changes to your code, by this mode the menu's texts are positioned in his place. Top and left are 0 pixels. See the snippet in fullpage:
body {
background-image: url(http://i.imgur.com/X3qmTN2.png);
background-repeat: no-repeat;
background-attachment: scroll;
height: 100px;
padding-bottom: 0;
font-family: Arial, sans-serif;
color: #e80812;
/* text-alignment doesnt exists, it's text align*/
text-align: justify;
}
#nav {
width: 400px;
line-height: 80px;
padding-top: 670px;
}
#nav a:link, #nav a:visited, #nav a:active {
display: block;
font: 14px "arial";
text-transform: uppercase;
text-decoration: none;
text-align: center;
letter-spacing: 2px;
color: #ab4860;
padding: 7px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
transition: all .5s ease-out;
}
#nav a:hover {
letter-spacing: 5px;
color: #74194e;
padding: 7px 2px;
}
.hex {
position: relative;
top: 0;
left: 0;
background-color: transparent;
text-align: center;
}
.owl {
position: relative;
top: 0;
left: 0;
background-color: transparent;
text-align: center;
}
.club {
position: relative;
top: 0;
left: 0;
background-color: transparent;
text-align: center;
}
b { color: #ab4860; }
u { color: #ab4860; }
i { color: #ab4860; }
<div id="nav">
<div class="hex">Back to HEX</div><br>
<div class="owl">Owl Me</div><br>
<div class="club">Club Rainbow Brigade</div><br>
</div>
<div align="left">
<div style="overflow:auto;position:relative;width:700px;height:720px;top:-350px;left:390px;margin-right:-546px;margin-bottom:-300px;">
Text here. <b>Bold.</b> <u>Underlined.</u> <i>Italic.</i></div>
I'm not sure why hover isn't working for this page, the other work fine. Can anybody find a solution to this, because I tried but for some reason I can't get it to work?
My CSS code is below my HTML.
I think it the issue may lie here but I can't seem to figure it out.
Everything seems fine to me when I validated it.
Could it be I used too many hover for this CSS?
HTML
<body>
<input type="checkbox" id="menutoggle">
<label for="menutoggle" class="menu-icon">☰</label>
<header>
<div id="brand"><img src="http://www.grazinburger.com/images/menu_icon.png" alt="menu"></div>
</header>
<nav class="menu">
<ul>
<li id="video">Favorites</li>
<li id="portfolio">Portfolio</li>
<li id="blog">Blog</li>
</ul>
</nav>
</body>
CSS
body {
font-family: sans-serif;
}
a { color: red;
text-decoration: none;
}
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
}
header {
width: 100%;
height: 50px;
margin: auto;
color: red;
}
#brand {
float: left;
line-height: 50px;
color: #EEE;
font-size: 25px;
font-weight: bolder;
font-family: 'Anonymous Pro', ;
}
#brand img {
max-width: 12%;
}
nav { width:100%;
text-align:center;
}
nav a:hover {
background-color: black;
opacity: .4;
}
nav a {
display: block;
padding: 15px 0;
border-bottom: 1px solid gray;
color: antiquewhite;
font-family: 'Anonymous Pro', ;
font-weight: bold;
font-size: 1.25em;
}
nav li:last-child a {
border-bottom: none;
}
.menu li {
border-left: none;
}
#video {
background-image: url(http://clearancebinreview.com/wp-content/uploads/2011/01/1-30-11_news_video_game_backgrounds1.jpg);
}
#portfolio {
background-image: url(http://www.digitalgov.gov/files/2015/01/600-x-400-Composite-image-of-file-transfer-background-Wavebreakmedia-Ltd-Wavebreak-Media-Thinkstock-488641549.jpg);
background-position: center;
}
#blog {
background-image:url(../img/Anime-Panti-Ando-with-Gun-and-Sword-600x375.jpg);
background-position: top;
}
.menu {
width: 240px;
height: 210px;
position: absolute;
left: -240px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
padding: 10px 20px;
color: aquamarine;
cursor:pointer;
float: right;
}
#menutoggle {
display: none;
}
#menutoggle:checked ~ .menu {
position:absolute; left: 0; }
Hover appears to work for me:
https://jsfiddle.net/bd2d6jac/
Assuming your referring to nav a:hover