I have a little problem, there is a little problem on my menu, there is a little space between the ul border and the li background, here's my code:
Menu code:
.menu_base {
margin-left: auto;
margin-right: auto;
margin-top: 0;
list-style-type: none;
padding: 0;
overflow: hidden;
width: 75%;
border: 3px solid;
border-top: 0px solid;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color: #ff6eff;
}
.button {
float: left;
}
.button a {
padding: 15px 15px;
display: block;
text-align: center;
text-decoration: none;
color: #ff6eff;
font-family: sans-serif;
}
.button a:hover {
background-color: #ff6eff;
color: white;
}
<ul class="menu_base">
<li class="button">Accueil</li>
<li class="button" style="float: right">Inscription</li>
<li class="button" style="float: right">Connexion</li>
</ul>
Excepted result: (From Firefox)
https://i.stack.imgur.com/e62BM.png
Actual result: (From Chrome)
https://i.stack.imgur.com/x3wYU.png
Did you add the normalize CSS to the top op your CSS file?
All browsers sort of add their own style which can cause problems when adding CSS to your site. By normalizing the CSS you get the same margin, padding etc for all browsers. You can use Eric Meyers normalize CSS. Just copy the CSS from the link below and add it to the top of your CSS file.
You can find it here: https://meyerweb.com/eric/tools/css/reset/
Related
I would like add a border-bottom that displays when I hover over it with the mouse. I want it to override the border underneath so it looks like it changes colour. An example of this can be found here http://www.formaplex.com/services (in the nav bar)
Here is a jsfiddle https://jsfiddle.net/ey006ftg/
Also, a small question: does anyone know why there is a small gap in-between the the links (can be seen when hovering from link to link) and how to get rid of it.
Thanks
Just add this to your css:
nav a {
border-bottom: solid transparent 3px;
}
Here's a jsfiddle with the above code: https://jsfiddle.net/AndrewL32/ey006ftg/1/
You can use a negative margin to overlay the border below, as shown:
nav {
border-top: 1px solid grey;
border-bottom: 3px solid black;
width: 100%;
font-size:0;
}
nav ul {
width: 1056px;
margin: 0 auto;
text-align: center;
width: 1056px;
}
nav ul li {
display: inline-block;
width: 17%;
}
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
}
nav a:hover {
color: orange;
transition: 0.2s;
border-bottom: solid orange 3px;
margin-bottom: -10px;
}
a {
color: black;
text-decoration: none;
outline: 0;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
As for fighting the inline gap, seeing as you defined a font-size later for the a tag, I would just add a font-size:0, which I added to nav in the above Snippet.
fiddle demo
Simply set your default border to transparent - change color on hover
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: solid transparent 3px; /* add this! */
transition:0.3s; /* or even this :) */
}
Try this fiddle
To set border-bottom the way you want, you have to add border to anchor tag like this:
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 3px solid black;
}
and to make sure the space between menu items is gone use a little fix adding negative margin to your li tags inside menu like this:
nav ul li {
display: inline-block;
width: 17%;
margin-right: -4px;
}
I programmed a website with a fixed menu on the top, but in the Internet Explorer 11 it moves around for half a second or something like that when I click a button in the menu. In other browsers it works fine. What can I change to remove the bug, I think it has to do with my CSS code.
It would be very nice if someone could help me.
I want the buttons to be the same in IE and Mozilla, Chrome. I think that the IE is always a bit different to the other browsers.
Here is my CSS code for the Navigation menu:
/* CSS Menu Navigation Bar */
#cssmenu
{
position: relative;
margin: 0 auto;
clear: both;
}
#cssmenu a
{
list-style: none;
margin: 0;
padding: 0;
border: 0;
line-height: 1.5;
}
#cssmenu li
{
border: 1px solid transparent;
padding-top: 7px;
display: block;
float: right;
margin: 0 10px;
}
#cssmenu ul
{
margin: 0 auto;
padding: 0;
text-align: center;
padding-right: 20px;
margin-bottom: -70px;
max-height: 80px;
}
#cssmenu li a
{
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
width: 70px;
border: 1px solid #dfdfdf;
text-decoration: none;
display: block;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
font-size: 17px;
font-family: Verdana, Tahoma;
color: #292F33;
}
#cssmenu li:hover a
{
border-bottom: 3px solid #30B0FF;
display: block;
color: #30B0FF;
clear: both;
font-size: 17px;
font-family: Verdana, Tahoma;
transition-duration: 0.05s;
transition-delay: 0.03s;
}
/* screen smaller than 1325px */
#media only screen and (max-width : 1325px),
only screen and (max-device-width : 1325px)
{
#menu
{
min-width: 1020px;
}
#cssmenu li a
{
padding-top: 10px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 10px;
width: 60px;
font-size: 15px;
border: 1px solid transparent;
}
#cssmenu li:hover a
{
font-size: 15px;
}
}
And here is the important HTML code:
<!-- Menu -->
<div id="menu">
<li style="list-style: none;"> <img id="image" src="images/head.png"/><br><i> {by Ivan Ilic}</i></li>
<div id='cssmenu'>
<ul>
<li><a href='lazarus.html'>Lazarus</a></li>
<li><a href='scratch.html'>Scratch</a></li>
<li><a href='html.html'>HTML</a></li>
<li><a href='c-sharp.html'>C#</a></li>
<li><a href='c++.html'>C++</a></li>
<li><a href='index.html'>Home</a></li>
</ul>
</div>
</div>
The "flash" you're seeing is the default active background color. When you click, it flashes gray, which gives the appearance of movement. You need to have a CSS Style Reset to override the default background color in IE. Alternatively, you can simply change the active style itself.
Example:
:active { background:transparent; }
The style reset will prevent most cross-browser styling differences by overriding all the different default styles that browsers tack on. I tested this with F12 Developer Tools and it eliminated the flash.
Edit:
The use of document.write() to add the style sheet is slowing down in IE. Essentially the content is being painted, and then "fixed" once the styles are loaded. Link the style sheet without JS and the flash will disappear.
So I'm making a site for a school project and I want to know how I can remove the whitespace on the sides of the menu when hovering over the first and last links. Here's the fiddle.
Sorry if my code is not that great, I'm a beginner...
Also I notice that my menu is staying still but everything else is going crazy with positioning when in different resolutions. How do I get it so everything stays in relatively the same position in different resolutions?
Thanks.
Oh and here's the html:
<body>
<h1 class='titles'>Phosphorus 4 Dummies</h1>
<nav>
<ul class='menu'>
<li id='home'><a href='#'>Home</li></a>
<li id='phys'><a href='#'>Phys. Prop.</li></a>
<li id='chem'><a href='#'>Chem. Prop.</li></a>
<li id='facts'><a href='#'>Fun Facts</li></a>
</ul>
</nav>
<p class='info'>Phosphorus is a very reactive element in the Nitrogen Group. It has 15 protons, 16 neutrons, and 5 valence electrons. It is a non-metal so it can be found on the right side of the zig-zag along with other non-metals. Its symbol is a simple P.</p>
<img src='http://images-of-elements.com/red-phosphorus.jpg' id='redPhosphorus' height=300px />
And the css:
body {
margin: 300px;
padding: 0px;
}
.titles {
font-size: 72px;
font-family: Helvetica, sans-serif;
text-align: center;
position: relative;
bottom: 100px;
}
.menu {
position: relative;
width: 760px;
bottom: 330px;
margin: auto;
margin-bottom: 0px;
text-align: center;
border: 2px solid black;
border-radius: 5px;
padding: 0;
font-size: 0;
}
.menu li {
font-size: 36px;
font-family: Helvetica, sans-serif;
display: inline-block;
position: relative;
top: 0;
float: none;
}
.menu li a {
text-decoration: none;
color: black;
padding-right: 11px;
padding-left: 11px;
padding-top: 0px;
padding-bottom: 1px;
border-right: 2px solid black;
margin: 0;
}
.menu li:nth-child(4) a {
border: none;
}
.menu li a:hover {
background-color: orange;
}
There is whitespace because your menu is set at a width: 760px, but your menu list does not fit all the way across, so there is white space.
Also, to make it responsive, you need to use media queries.
UPDATE:
If you know the expected results [height, width, etc] you have to give your <nav> the set width, and the <ul> to a larger width, but add overflow: hidden and height: 41px
Here is a fiddle to experiment with. You did not have an ideal layout, but I've worked with what you gave. If anyone finds a better solution I would be more than happy to observe.
i took a look at your code, you nested the elements wrongly, make sure to close the a tag first
<li><a></li></a>
should be:
<li><a></a></li>
I have a Div bar with a white background in which my breadcrumb lives.
Here you can see a screenshot:
How can i align the text vertically?
Here is my CSS:
/* Breadcrumb */
#breadcrumb {
position: relative;
background: white;
padding: 4px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
behavior: url(/scripts/PIE.htc);
font-size: .9em;
color: #526472;
}
#breadcrumb ul {
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumb li {
float: left;
padding-left: 5px;
}
#breadcrumb a {
padding-right: 10px;
background: url(../images/div_breadcrumb.gif) no-repeat right center;
color: #526472;
margin-right: 5px;
}
And my HTML:
<div id="breadcrumb" class="clearfix">
<ul>
<li style="white-space: nowrap;">
<a style="white-space: nowrap;" href="">Home</a>
</li>
<li style="white-space: nowrap;">
Visual collaboration solutions
</li>
</ul>
<div id="shareThis" class="fl_right"> Share: </div>
</div>
Due to incomplete code, it's a bit hard to tell, but I'm guessing that you're either missing some markup, or that there are other styles messing with your breadcrumbs.
The following works just fine to display items in a horizontal row (your styles, my HTML).
<html>
<head>
<style>
#breadcrumb { position: relative; background: white; padding: 4px; border-radius:2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; behavior: url(/scripts/PIE.htc); font-size: .9em; color: #526472;}
#breadcrumb ul { margin: 0; padding: 0; list-style: none; }
#breadcrumb li { float: left; padding-left: 25px;}
#breadcrumb a { padding-right: 10px; background: url(../images/div_breadcrumb.gif) no-repeat right center; color: #526472; margin-right: 5px;}
</style>
</head>
<body>
<div id="breadcrumb" class="clearfix">
<ul>
<li>Home Visual collaboration solutions</li>
<li>La</li>
<li>Ti</li>
<li>Da</li>
</ul>
</div>
</body>
</html>
If you are using ul and li tags properly, you might try using Firebug or the Chrome developer tools to detect whether or not other styles are being applied.
Try:
li{display: inline}
You could also use
li{display:inline-block}
That way your li elements wont lose their block properties
Here's the example :
http://jsfiddle.net/bFe35/1/
Try to edit your CSS file, by adding vertical-align:middle; to your #breadcrumb ID, like this:
#breadcrumb {
position: relative;
background: white;
padding: 4px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
behavior: url(/scripts/PIE.htc);
font-size: .9em;
color: #526472;
vertical-align:middle;
}
At some point my floating link list has ended up with an indent, causing the last link to go onto a new line (or over the side of the div if I set a width for the ul).
I literally don't know where to start looking for this problem. I'm just going to go ahead and link to the website. Here's the HTML for that section:
<div id="navigation">
<ul id="navLinks">
<li>Home</li>
<li>Alston</li>
<li>Booking</li>
<li>Photos</li>
</ul>
</div>
And here is what I believe is the only CSS affecting it:
#navigation {
position: relative;
//width: 210px;
//height: 600px;
margin: 2px 0;
font-size: 90%;
font-weight: normal;
clear:both;
overflow:hidden;
}
//NAVIGATION BAR STUFF
#navLinks {
list-style-type:none;
//display:inline;
margin-left:auto;
margin-right:auto;
width: 100%;
padding:0;
text-align:center;
text-decoration: none;
overflow:hidden;
}
ul#booking {
color:rgb(84, 154, 14);
}
ul#navlinks {
text-algin: center;
margin: 0;
padding: 0;
}
ul#navLinks li { display: inline;
list-style-type: none;
line-height: 150%;
margin-right: 10px;
margin-left: 10px;
background-color: #fff; }
ul#navLinks li a
{
float: left;
text-align:center;
background-color: #ADF16A;
color: #000000;
text-decoration: none;
border-left: 0px;
border-top: 0;
border-bottom: 0;
border-right: 1px;
border-style: solid;
border-color: #7AE015;
width:161px;
padding:3px 0px;
}
ul#navLinks a:hover
{
background-color: #CC7A00;
}
ul#navLinks .lastLink{
border:0;
}
//ul#navLinks a
//END OF NAVIGATION BAR STUFF
The entire CSS is here
Thanks!
Your #navLinks has some left padding thrown in by browser default (in my cas, -webkit-padding-start: 40px;). If you define padding-left: 0;, that will be overridden.
You did cover this base in Line 195 of your style1.css, which has ul#navlinks { but that needs to be ul#navLinks {.
Make sure you're spell-checking your text-aligns, and capitalizing classes and IDs in your CSS file when they're capitalized in your CSS file.
If you add a css reset file to your site it should fix your problem, which is related to padding/margin on your UL.
A css reset file, amonst many other things, sets the padding and margin on all elements to zero - allowing you the freedom to style everything exactly as required.
http://meyerweb.com/eric/tools/css/reset/