I'm working on the following page: http://jlecologia.com/index.php
I want the whole block at the left to be clickable. In Firefox it's fine, but in IE6 the cursor doesn't even change to a hand. Any ideas?
I'd recommend that you move the block styling (like you're doing with the LI) to the actual link itself. So for example (copied from your stylesheet)...
#left ul li {
float: left;
list-style-type: none;
}
#left ul li a {
width: 100%; /* You might not need this */
margin-top: 40px;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFFFFF;
display: block;
background-image: url(../images/button-fond.png);
background-repeat: repeat;
background-position: 0px 0px;
text-decoration: none;
}
Related
I'm not sure why, but past a certain font size the text inside my navigation bar shows up on two lines. The box size isn't being updated for some reason in Chrome and Safari but still works fine in Firefox.
Firefox
Chrome
What would be the difference between these web browsers that would have such an effect on my code?
<nav id="topTab">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
<div>
<h1>
<b href="http://localhost:8000/home.html" title="Home">Example1</b></h1>
</div>
</nav>
CSS:
#media only screen and (min-width : 1024px) {
a {
background: #fcfcfc;
color: #000;
text-align: center;
text-decoration: none;
font-family: 'Gloria Hallelujah';
}
#topTab{
position:relative;
}
nav#topTab {
float: left;
width: 100%;
overflow: hidden;
}
nav#topTab ul {
float: left;
clear: left;
position: relative;
list-style: none;
margin: 0;
padding: 0;
left: 50%;
}
nav#topTab ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
nav#topTab ul li a {
display: block;
padding: 0 5% 0 5%;
margin: 0 15% 0 3%;
font-size: 2.2em;
}
nav#topTab ul li a:hover {
background: #000;
color: #fff;
}
h1 {
position: relative;
text-align: center;
top: 20%;
}
h1 b {
font-size: 2.3em;
text-decoration: none;
color: black;
font-weight: bold;
font-family: 'Caveat Brush';
}
}
Your unordered list is floated. Floating an element removes it from the "natural" flow of the document and as a consequence, your text is trying to adjust to this "unnatural" flow.
You have to clear your floats to restore the flow again. This can be done by adding an element with clear: both style attached to it. In this case, you would add clear both to your div wrapping the heading tag.
div {clear: both}
In my PSD file I have a nav bar with some light effect in the background. I'm a bit concerned whether should I slice the whole nav bar and then add text or just slice it into smaller pieces? Which would be the best practice?
I'm new to this subject so any ideas would be so much appreciated.
You for sure want to cut the nav bar images into pieces. Add them to the background of each of the nav bar links with css. It will save you a big headache later.
Here is a good example of a jsfiddle
Css
#nav {
display: block;
height: 40px;
line-height: 35px;
list-style: none outside none;
margin: 20px auto 0 auto;
position: relative;
max-width: 750px;
min-width: 750px;
width: 78.2%;
}
#nav li {
display: inline;
text-align: center;
float:left;
}
#nav li a{
color: #fff;
display: block;
float: left;
font-family: HelveticaNeue-light,Helvetica,sans-serif;
font-size: 1em;
height: 100%;
padding: 0px 23px 0;
text-align: center;
text-decoration: none;
line-height: 40px;
background:#4D4D4D;
position: relative;
}
#nav li a span {
position: absolute;
left: 0;
top: 40px;
display: none
}
#nav li a:hover, #nav .active a {
background: url("path/to/image.png") no-repeat bottom center #a4c723;
color: #4d4d4d;
}
#nav li a:hover span, #nav .active a span {
display: block;
}
if you mean gradients, you can use gradient generator http://www.colorzilla.com/gradient-editor/
As for me, using as few images as possible is best practice. Draw your navbar with css, good luck
so this is how my navigation looks:
Quite unbalanced right.. my minds kinda fkd up. I have no idea what I am doing already. I'd like to ask some help how to center it out. This is the code of the css:
.navigation {
width: 886px;
height: 84px;
background: url('../img/nav_bg.png') no-repeat;
margin: 0 auto;
}
.navigation ul {
margin: 0;
padding: 0;
list-style: none outside;
padding-top: 22px;
padding-left: 63px;
}
.navigation ul li {
display: inline-block;
list-style-type: none;
}
.navigation ul li a {
display: block;
text-align: center;
line-height: 40px;
color: #fff;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
text-transform: uppercase;
font-size: 14px;
}
Flexbox is not yet 100% supported cross-browser
As you can see from this link: http://caniuse.com/#feat=flexbox
Flebox nowadays is quite well supported but if you carefully look at those symbols on each square you notice that the support is not full but partial on some browsers (especially mobile).
Global (with prefix)
82.47% + 10.5% = 92.97%
unprefixed:
71.8% + 0.38% = 72.18%
You should to add a prefix if you really want to use it.
**
Using a different method - display:table;
**
On the other hand, I suggest you to use another approach which is much more stable and supported on all browsers:
Look at the support of display:table;
Link: http://caniuse.com/#search=display%3Atable
To solve your problem you can remove all your padding-top with fixed values and use vertical-align:middle and display:table-cell. This way no matter what is the height of the ul it will be always vertically centered.
Center horizontally the ul element using text-align:center;
Center vertically the ul by setting the .navigation container with display:table; and the ul element with display:table-cell; and vertical-align:middle;
Code example:
.navigation {
width: 100%;
height: 84px;
background: lightgrey;
margin: 0 auto;
display:table;
}
.navigation ul {
padding: 0;
list-style: none outside;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.navigation ul li {
display: inline-block;
list-style-type: none;
}
.navigation ul li a {
display: block;
text-align: center;
line-height: 40px;
color: #fff;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
text-transform: uppercase;
font-size: 14px;
}
Check Jsfiddle: http://jsfiddle.net/a_incarnati/bmkspm69/1/
Flexbox might be able to help you here. To center your li's with flexbox all you would have to do is add these styles to .navigation ul
.navigation ul{
display:flex;
justify-content: center;
align-items:center;
}
Give a text-align: center to the ul.
In general, for centering some elements inside a parent, parent should have text-align:center and the childs should have display: inline-block or display: inline.
HTML:
<ul>
<li>A</li>
<li>B</li>
<ul>
CSS:
ul {
width: 400px;
text-align: center;
}
li {
display: inline-block;
}
it would be great, when I can click the <li> container and in it is the <a> ..
So my container is width: 100px and height: 100px but my tag only width: 20px and height: 15px.
So I can only click on the text in the tag.
Can I change that?
<li>
SEM
</li>
CSS:
.menu ul li {
background-image: url("../images/menu_background.png");
background-position: 1px center;
background-repeat: repeat-x;
border-color: #000000;
border-right: 1px solid #000000;
float: left;
font-family: 'Open Sans',sans-serif;
font-size: 16px;
height: 38px;
list-style-type: none;
padding: 0 34px;
vertical-align: middle;
}
.menu ul li a {
color: #FFFFFF;
display: block;
line-height: 35px;
text-decoration: none;
}
that doesn't work..
Set a block context property on it.
li a {
display:block;
}
You should apply display: block to your 'a' tag
An example : http://jsfiddle.net/e49Tg/
You can try li > a { display: block; } in your stylesheet. Make sure you prefix the li with the appropriate ul class or selector, just so you keep your change isolated to that occurrence.
I can't clearly get what your problem is, if you want an <a> tag to be sized, the solution is as proposed: the "display" property should be either "block" or "inline-block".
In case you want it to have the same size as the parent it should also have the size directives, like:
li a { display: block; width:100%; height: 100% }
and if you want it to be so when clicked, a pure css solution would be
li a:active {
display: block; width:100%; height: 100%;
}
If this isn't answer to your question, explain more.
I need to make a css navigation according to the following style:
DESIRED LOOK
Below are the designs that I have done:-
1)Exhibit A - made using sprites
Note: Ignore the arrangement of the menu items
Pros: works well and has the desired look
Cons: if there is a need to add another menu item, another image must be manually made for that particular menu item. ie. not extensible
2)Exhibit B
Pros: very extensible. If another menu item must be added, new extra images need not be made. Only the menu name need to be typed in the html code.
Cons: the hover effect is not the same as the desired look.
My Requirement
Is to use Exhibit B, along with the hover effect from Exhibit A, but without having to add extra images when a menu item is created(this is what happens in Exhibit A, although it has the desired hover effect).
My approach:
Start working with Exhibit B
For the hover effect in the case of a single menu item use 3 images
a)left most edge
b)repeating slice of the middle area
c)right most edge
Is this correct ?
Is this possible ?
Is there a better way? A link to a tute would be fine.
Thanks
1] css code for Exhibit A
#charset "UTF-8";
* {
margin:0;
padding:0;
list-style: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
.clear {
clear:both;
}
.nav-container {
width: 960px;
}
#navMenu{
display: inline;
margin: 0;
padding: 0px;
position: relative;
z-index: 5;
}
#navMenu li{
float: left;
display: inline;
}
#navMenu li.navRepeat{
float: left;
display: inline;
background-image:url("../images/navigation_repeat.gif");
width:425px;
height:40px;
}
#navMenu li.navRepeatEnd{
float: right;
display: inline;
background-image:url("../images/navigation_repeat_end.gif");
width:1px;
height:40px;
}
a.navReservations{
display:block;
float:left;
width:89px;
height:40px;
background-repeat:no-repeat;
background: url("../images/reservations.gif")
}
a.navReservations:hover{
background: url("../images/reservations.gif") 0 40px;
}
a.navRentals{
display:block;
float:left;
width:62px;
height:40px;
background-repeat:no-repeat;
background: url("../images/rentals.gif")
}
a .navReservations {
float: left;
display: inline;
height: 100px;
width: 400px;
}
a.navRentals:hover{
background: url("../images/rentals.gif") 0 40px;
}
a.navTariffs{
display:block;
float:left;
width:59px;
height:40px;
background-repeat:no-repeat;
background: url("../images/tariffs.gif")
}
a.navTariffs:hover{
background: url("../images/tariffs.gif") 0 40px;
}
a.navFleet{
display:block;
float:left;
width:64px;
height:40px;
background-repeat:no-repeat;
background: url("../images/fleet.gif")
}
a.navFleet:hover{
background: url("../images/fleet.gif") 0 40px;
}
a.navTools{
display:block;
float:left;
width:56px;
height:40px;
background-repeat:no-repeat;
background: url("../images/tools.gif")
}
a.navTools:hover{
background: url("../images/tools.gif") 0 40px;
}
a.navReports{
display:block;
float:left;
width:71px;
height:40px;
background-repeat:no-repeat;
background: url("../images/reports.gif")
}
a.navReports:hover{
background: url("../images/reports.gif") 0 40px;
}
a.navSystem-Management{
display:block;
float:left;
width:133px;
height:40px;
background-repeat:no-repeat;
background: url("../images/system_management.gif")
}
a.navSystem-Management:hover{
background: url("../images/system_management.gif") 0 40px;
}
2] css code for Exhibit B
#navigation {
width: 959px;
height: 36px;
margin: 0;
padding: 0;
background-image: url(images/navigation-bg.gif);
background-repeat: no-repeat;
background-position: left top;
border: 1px solid #CCC;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
display: inline;
margin: 0px;
}
#navigation ul li a {
height:27px;
display: block;
float: left;
color: #000;
text-decoration: none;
font-family: Arial;
font-size: 12px;
font-weight: bold;
background-image: url(images/navigation-separator.gif);
background-repeat: no-repeat;
background-position: right center;
padding-top: 6px;
padding-right: 15px;
padding-left: 15px;
vertical-align: 10%;
padding-bottom: 4px;
}
#navigation ul li a:hover {
color:#FFF;
background-image: url(images/navigation-hover.gif);
background-repeat: repeat-x;
background-position: left top;
}
#navigation ul li#active a {
color:#363636;
background: url(images/navigation-hover.png) repeat-x left top;
}
Well you technically only need two sprites, a wide left + body of the tab and a right side. By wide, I mean, 400px or some arbitrarily wide size that you don't anticipate hitting. You're trading a kb for easy of use. You can accomplish this by having markup like:
<ul class="list">
<li>Text</li>
</ul>
with css like:
ul.list
{
list-style-type: none;
margin: 0;
}
ul.list li
{
float: left;
background: url(leftpluswide.png) top left no-repeat;
}
ul.list li a
{
background: url(right.png) top right no-repeat;
}
The only caveat is that since the right.png will be overlapping the background on the li, you'll need to make sure that it doesn't have any transparency.
Also for completeness sake, you might need to apply a height to the li and the a (which will potentially require a display:inline-block or a line-height to take it) to make everything line up well.