opera mini / mobile behaves strange on menu links links, they are not visible (actually, as the site renders they become visible for a second, and then they are not visible anymore, but the text is selectable.). On other browsers, everything is fine. Anyone knows the reason for that?
(i tried with media queries disabled, same thing)
html code
<div id="navbox">
<nav>
<ul>
<li>Usluge</li>
<li>Cvijeće</li>
<li>Galerija</li>
<li>O nama</li>
<li>Kontakt</li>
</ul>
</nav>
</div>
css code
#navbox {
width: 620px;
float: left;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
#navbox nav {
width: 620px;
float: left;
margin-top: 66px;
}
#navbox li {
width: 68px;
float: right;
list-style: none;
margin-left: 24px;
background: rgb(230,230,230);
}
#navbox a {
display: block;
padding: 134px 0px 0px 0px;
border: 0px solid rgb(195,195,195);
color: rgb(171,74,119);
text-decoration: none;
text-align: center;
}
Try this in your CSS:
#navbox nav {
width: 620px;
float: left;
margin-top: 66px;
}
#navbox li {
float: right;
list-style: none;
margin-left: 24px;
background: rgb(230,230,230);
}
#navbox a {
display: block;
padding: 15px 20px; //adjust to your liking
border: 0px solid rgb(195,195,195);
color: rgb(171,74,119);
text-decoration: none;
text-align: center;
}
#media screen and (max-width:767px){
#navbox nav {
width:100%;
}
}
If it doesn't work out for you, can you post a link to your page so we can take a look?
Related
I'm trying to edit a website and put the logo in the same line as the navigation bar. The problem is, my logo hides behind the bar. I've tried using float, but with no results. The position of both is good, I just don't know how to make the logo display on top of the navigation bar.
.logo {
display: inline-block;
vertical-align: top;
width: 200px;
height: 50px;
float: left;
margin-left: 80px;
.navigation-bar > a {
float: right;
position: relative;
Thank you for any help!
Try This code for CSS & HTML
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 10px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
<div class="header">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="Cryptic Concepts" hight="10px" width="200px"/>
<div class="header-right">
Home
News
<a class="active">About</a>
</div>
</div>
this is an example with the Google logo, I got the code from W3 Schools
it looks like this
I tried to make a responsive header for my website, it's all ok, but i can not set the margins of the links to 0. You cand see in the image: https://imgur.com/s5EzL6n
What i want to achieve is to make all that grey background 100% width.
I followed this youtube video: https://www.youtube.com/watch?v=lYw-FE60Dws
I probably set some things wrong, i am sure, but i am a beginner.
HTML:
<header>
<div class="container">
<div id="branding">
<img src="logo.png">
<a class="toggle">Meniu</a>
</div>
<nav>
<ul class="active">
<li class="current">Acasă</li>
<li>Despre</li>
<li>Servicii</li>
<li>Proiecte</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
CSS:
/* responsive header*/
.toggle{
display: none;
position: absolute;
right: 10px;
top: 26px;
padding: 5px;
cursor: pointer;
text-decoration: none;
}
#media (max-width: 940px){
.toggle{
display: block;
}
header .toggle{
padding: 0 0;
font-size: 18px;
}
header ul li{
display: block;
width: 100%;
background-color: grey;
}
header ul.active{
display: block;
}
header ul li a{
display: block;
text-align: center;
}
header nav{
margin: 0;
width: 100%;
}
header ul li{
width: 100%;
}
}
/*normal page*/
header a{
color: #fcfcfc;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding-right: 25px;
}
header li{
float: left;
display: inline;
padding: 0 20px 0px 20px;
}
header #branding{
float: left;
height: 90px;
margin-left: 35px;
}
header a{
color: #fcfcfc;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding-right: 25px;
}
there is a default padding for ul, you have to remove it when you don't need it. Just add 0px to the ul and you will have a 100% div
Try to use css box models to solve such cases
https://www.youtube.com/watch?v=xF0dhepbzD8
I'm learning basic CSS currently, I'm trying to create a little mockup product page that uses a grid system with 4 columns. It looks and works fine on chrome, but on Firefox it breaks like such. Here's how it looks like on Firefox:
I can't seem to figure out how to fix it, I've tried changing the margins/padding from various locations but to no avail, it's still messing up on Firefox.
Here's my CSS:
html {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
background: #232526; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #232526 , #414345); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #232526 , #414345); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
* {
box-sizing: border-box;
}
.menu {
background-color: #17534b;
position: absolute;
width: 99.23%;
height: 8vh;
}
ul.nav {
width: 100%;
}
ul.nav li {
list-style: none outside none;
display: inline-block;
width: 19%;
text-align: center;
}
ul.nav li a {
display: block;
text-align: center;
padding: 1.5em;
color: #ffffff;
letter-spacing: 1px;
font-size: 15px;
text-transform: uppercase;
text-decoration: none;
}
ul.nav li a:hover {
background-color: #000000;
color: white;
}
ul.nav li.li-ultimate{
text-transform: uppercase;
color: #eef2ff;
font-size: 25px;
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
height: 100vh;
}
.welcome {
height: 100vh;
background-color: #ffffff;
}
.content {
display: table-cell;
vertical-align: middle;
}
.welcome h1{
font-size: 3em;
display: block;
color: black;
font-weight: 300;
}
.welcome h2 {
font-size: 1.5em;
display: block;
color: black;
font-weight: 200;
}
.productsheader {
color: #ffffff;
}
.productsheader h1{
text-align: center;
color: #ffffff;
font-size: 3em;
}
.products{
height:100vh;
}
ul.rig {
padding: 5%;
list-style: none;
font-size: 0px;
margin-left: -2.5%;
}
ul.rig li {
display: inline-block;
padding: 10px;
margin: 0 0 2.5% 2.5%;
background: #ffffff;
border: 1px solid #ddd;
font-size: 16px;
vertical-align: top;
box-shadow: 0 0 5px #ddd;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul.rig li img {
max-width: 100%;
height: auto;
margin: 0 0 10px;
}
ul.rig li h3 {
margin: 0 0 5px;
text-align: center;
}
ul.rig li p {
font-size: .9em;
line-height: 1.5em;
color: #999;
text-align: center;
}
ul.rig.columns-4 li {
width: 22.5%;
}
Along with the relevant HTML:
<section class="products">
<div class="content">
<div class="productsheader">
<h1>
Our Proudly Presented Products
</h1>
</div>
<ul class="rig columns-4">
<li>
<img src="images/1.jpg"/>
<h3>Is-it-even-a-cup Cup - $100</h3>
<p>Life's true questions.</p>
</li>
<li>
<img src="images/2.jpg"/>
<h3>Flute Looking Cup - $150</h3>
<p>Looks like a flute.</p>
</li>
<li>
<img src="images/3.jpg"/>
<h3>Uterus Looking Cup - $350</h3>
<p>Modelled after a woman's uterus. Probably.</p>
</li>
<li>
<img src="images/4.jpg"/>
<h3>Artistic Cup - $1</h3>
<p>Artsy...ish...</p>
</li>
<li>
<img src="images/5.jpeg"/>
<h3>Ancient Cup - $500</h3>
<p>Or at least we think its old. Sure does look it.</p>
</li>
<li>
<img src="images/6.jpg"/>
<h3>Chinese Poetic Cup - $250</h3>
<p>The cup feels empty when you drink, but you're empty when you don't.</p>
</li>
<li>
<img src="images/7.jpg"/>
<h3>Dragonfly Cup - $25</h3>
<p>Pretty little dragonfly...On a cup.</p>
</li>
<li>
<img src="images/8.png"/>
<h3>FIFA World Cup Brazil - $50</h3>
<p>Technically a cup...</p>
</li>
</ul>
</div>
</section>
Are there any tips to also prevent this from happening in the future when I work on another css project?
ul.rig {
padding: 5%;
list-style: none;
font-size: 0px;
margin-left: -2.5%;
width: 960px; // choose your width like 960px
margin: auto; // auto work with display : block for centering
display: block; // block work with margin : auto for centering
}
So I'm trying to figure out a way to make the tabs in my navigation bar clickable as well as the link text. Adding padding: 20px 30px; makes the second to last tab shift up and the text shift to the right. I'm willing to do some major alterations so please any answer is a good one.Here's my HTML.
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>
Heres the CSS...
#tab_container
{
background-color: #222;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
}
#tabs
{
float: left;
margin-top: 0px;
width: 100%;
max-width: 970px;
background-color: #222;
padding-top: 20px;
text-align: center;
}
#nav
{
width: 100%;
max-width: 970px;
text-align: center;
}
ul
{
float: left;
max-width: 970px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
text-align: center;
}
ul li
{
display: inline-block;
text-align: center;
width: 158px;
height: 70px;
background-color: black;
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin:0 auto;
padding: 0;
}
ul li a
{
color: #54544b;
text-decoration: none;
text-align: center;
margin: 0px auto;
line-height: 70px;
padding: 20px 30px;
}
a:hover
{
color: #CF7BA1;
}
.active a
{
text-decoration: underline;
color: #CF7BA1;
}
set display-blocks to A:
ul li a {
display:block;
height:100%;
width:100%;
line-height:XXpx;
}
I'm working on a new responsive design and I'm having an issue with my menu that I cannot figure out. Basically I want the background of the menu item to turn white when you hover over it and the text to turn blue. Right now, the text turns blue but the background will not turn white.
HTML Code:
<div class="header">
<div class="header_content">
<div class="logo">
<img src="images/new_logo.png" class="hdr_logo">
</div>
<div class="main_menu">
<ul>
<li>ABOUT US</li>
<li>OPERATIONS BRANCH</li>
<li>LOGISTICS BRANCH</li>
<li style="border-right:0;">COMMUNITY</li>
</ul>
</div>
</div>
</div>
CSS:
.header {
background: url('images/header2.png') repeat-x top left;
width: 100%;
height: 150px;
color: #FFF;
margin: 0;
padding: 0;
}
.header_content {
width: 960px;
margin: 0 auto;
height: 150px;
padding: 0;
}
.logo {
float:left;
width:120px;
}
.main_menu {
float:left;
height: 30px;
margin-top: 120px;
line-height: 30px;
padding: 0;
width: 830px;
}
.main_menu ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
overflow: hidden;
height: 30px;
}
.main_menu li {
float: left;
border-right: 1px solid #FFF;
text-align: center;
padding: 0;
margin: 0;
padding-left: 2%;
padding-right: 2%;
overflow: hidden;
height: 30px;
cursor: pointer;
}
.main_menu li:hover {
background-image: none;
background-color: #FFF;
color: rgb(33,47,57);
}
EDIT: Problem Resolved
The floated li was not a block element so you could not change it's background color. As soon as I added display:block; to the li it resolved this issue.
Seems to work fine for me: http://jsfiddle.net/s3JT9/
.main_menu li:hover {
background-image: none;
background-color: #FFF;
color: red;
}
I changed the color to red to illustrate.