When I hover over the link, the links are moving slightly. How can I solve this problem. Can't we solve it without using box-sizing property?
Here is my markup.
<body>
<div id="wrapper">
<nav class="paging">
<ul>
<li class="first">first</li>
<li>1</li>
<li>2</li>
<li><strong>3</strong></li>
<li>4</li>
<li><span>...</span></li>
<li>10</li>
<li>11</li>
<li class="last">last</li>
</ul>
</nav>
</div>
Here is the styling for the markup.
body{
margin:0;
color:#333;
font:14px/18px Arial, Helvetica, sans-serif;
background:#fff;
}
a{color:#3c8fdc;}
#wrapper{
width:600px;
margin:0 auto;
padding:45px 0 0;
}
.paging ul{
padding:0;
margin:0;
list-style:none;
overflow:hidden;
}
.paging li{
float:left;
text-align:center;
margin:0 4px 0 0;
}
.paging .first a,
.paging .last a{
text-align:left;
width:auto;
margin:0 9px;
}
.paging a{
width:24px;
padding:4px 0;
display:block;
}
.paging .first a:before,
.paging .last a:after{
display:inline-block;
vertical-align:top;
}
.paging .first a:before{
content:'<<';
margin:0 4px 0 0;
}
.paging .last a:after{
content:'>>';
margin:0 0 0 4px;
}
.paging strong,
.paging a:hover{
background:#f8f8f8;
border:1px solid #d9d9d9;
}
.paging strong{
display:block;
padding:4px 0;
width:22px;
}
.paging a:hover{
color:#000;
text-decoration:none;
}
.paging span{
display:block;
padding:4px 3px 0;
}
For further clarity I have placed a short GIF image which link can be found here.http://screen.w3.ua/Aug14/30191123.gif
At a very quick glance, it looks like you add a border. Change border to outline for a:hover. This can give compatibility issues with older IE, however.
Edit:
To overcome the hidden borders, replace
.paging ul{ overflow:hidden; }
with
.paging ul{ overflow:visible; }
Example
You should add box-sizing:border-box; to ur .paging a
hope it will help DEMO
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
Box Model without hover have no border
Box Model with hover have border of 1 px
But I suggest Demo (i.e. adding a transparent border to the anchor tags)
css
.paging a {
width:24px;
padding:4px 0;
display:block;
border:1px solid transparent; /* add this */
}
You're adding a border on hover, which pushes the box model out.
border:1px solid #d9d9d9;
If you don't want the border on regular state, simply make it the same as the background color, or provide padding to match the hover overall dimension.
The problem is that you are adding a 1px border to your links on hover. The easiest way to solve your problem is by replacing this css code:
.paging a{
width:24px;
padding:4px 0;
display:block;
}
with the following:
.paging a{
width:24px;
padding:4px 0;
display:block;
border: 1px solid transparent;
}
What we have done here, is adding a transparent 1px border. This takes care of the adding a border on hover, it now just replaces the color of the border.
Related
I was wondering if anyone could help me with an issue I'm having. I wanted the text "Liam's Digital Portfolio" to be in the centre of the webpage at the top in line with the navigation bar text. In addition, I then wanted the navigation bar to be on the far right hand corner as shown within the codepen link http://codepen.io/ldocherty1/pen/qRowVK.
I have only started programming and this is my second day and really want to improve, apologies if the code is not in the correct structure.
Below is my HTML code, within the codepen is my CSS if needed.
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li><b><center>Liam's Digital Portfolio<center></b></li>
</ul>
</div>
</body>
</html>
Thanks,
Liam.
I wish you all the best with your coding journey :) I will give you an easy solution to get the desired effect. First off, cut the padding-top from the body in the css:
padding-top: 180px;
Now from your html, remove
<li><b><center>Liam's Digital Portfolio<center></b></li>
Since this is your page title, it is standard practice to have it inside of h1 tags. Then we can center it with simple css. The html will look like this:
<h1 class="title">Liam's Digital Portfolio</h1>
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
</ul>
</div>
And now we can simply add this to the css
.title{text-align:center;}
With the padding-top removed and this added, the title will be in the center of the page inline with the navigation bar. I see you have a lot of issues with your css so I suggest you go through a good tutorial, like this one from w3schools http://www.w3schools.com/css/ . I hope this helps, and good luck!
Make the HTML changes as below
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li style="position:absolute;right:45%"><b>Liam's Digital Portfolio</b></li>
</ul>
CSS changes as below
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
h1 {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
li a:hover:not(.active) {
background-color:grey;
}
#Navagationbar {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
#Navagationbar ul {
list-style:none;
float:right;
margin:0;
padding:0;
}
#Navagationbar ul li {
display:block;
list-style:none;
margin:0;
padding:0;
}
#Navagationbar ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
color:white;;
text-decoration:none;
line-height:1.3em;
}
#Navagationbar ul li a:hover {
color:white;
}
#Navagationbar ul li a.active,
#Navagationbar ul li a.active:hover {
color:white;
}
body {
margin:0;
}
.page{
min-height:-590px;
background:linear-gradient(45deg, #999, #FFF);
}
#footer{
list-style:none inside none;
margin:0;
padding:0;
position:fixed;
right:0;
bottom:0;
left:0;
height:50px;
background-color:#1f1f1f;
font-size:0;
}
#footer li {
font-family:Arial;
float: right;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li {
font-family:Arial;
float: left;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li:last-child {
border-right:0;
}
body {
background:url('https://static.pexels.com/photos/34088/pexels-photo.jpg');
position:static;
height:400px;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
}
http://liveweave.com/BNM1Jj
I try to put both li element in same line occupying 50% of width but i could not get them in same line
i do not want to use table structure .
unable to put both li in same line why so ??
ul.primary_nav{
background-color:#494949;
}
ul.primary_nav li.selected{
background-color:#942F99;
color:#494949; float:left;
}
ul.primary_nav li{
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
}
ul.primary_nav li a{
display:block;
height:36px;
text-align:center;
color:#c5c5c5;
font-size:13px;
text-shadow:0px 1px 0px #2a2a2a;
text-decoration:none;
font-weight:bold;
}
ul.primary_nav li a span.icon{
display:block;
margin:auto;
width:22px;
height:22px;
}
please tell what i am missing
Make the following change:
ul.primary_nav li.selected{
background-color:#942F99;
color:#494949;
float:left;
}
ul.primary_nav li{
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
width:50%;
float:left;
}
Notice the float:left; that will get them on the same line.
Remove the whitespace between li elements and add box-sizing: border-box to ul.primary_nav li:
Demo
HTML:
<div class="moby_wrap">
<header>
<a id="logo" href="#">Header</a><br>
<ul class="primary_nav">
<li class="selected"><a><span class="icon about"></span>Rings & Pendants</a></li><li><span class="icon folio"></span>Earrings and Cufflinks</li>
</ul>
</header>
CSS:
ul.primary_nav li{
display:inline-block;
padding-top:5px;
padding-bottom:5px;
width: 50%;
box-sizing: border-box;
box-shadow:inset 0 0 1px #7d7d7d;
-webkit-box-shadow:inset 0 0 1px #7d7d7d;
border:solid 1px #921699;
border-radius:3px;
}
Option 1: (Which you might not want)
Make primary_nav rendered as a table & li as table cells
ul.primary_nav{
background-color:#494949;
border-radius:3px;
width:100%;
display:table;
}
ul.primary_nav li{
display:table-cell;
padding-top:5px;padding-bottom:5px;
width:50%;
width:50%;
box-shadow:inset 0px 0px 1px #7d7d7d;
-webkit-box-shadow:inset 0px 0px 1px #7d7d7d;
border:solid 1px #921699;
border-radius:3px;
}
Option 2:
Make li as float left with border none.
Then use another inside for styling.
ul.primary_nav li{
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
border:none;
float: left;
}
I think that you could have a better result using divs elements instead a ul.
Take a look a this code:
HTML
<header>
<div>
Header
</div>
<div class="menuitem">
Link 1
</div>
<div class="menuitem">
Link 2
</div>
</header>
CSS
header {
width: 100%;
text-align: center;
background-color: red;
}
div.menuitem {
width: 50%;
float: left;
text-align: center;
background-color: orange;
height: 50px;
}
It's an easy html structure, less css to write and a code more readable (and also fluid content).
Check out this codepen.
I got a menu bar on my website which is consisting of lists. The html looks like this:
<div id="menu">
<ul class="menu">
<li class="menu"><a class="menu" href="#">HOME</a></li>
<li class="menu"><a class="menu" href="#">MOSAIC</a></li>
<li class="menu"><a class="menu" href="#">SUCCESS</a></li>
<li class="menu"><a class="menu" href="#">MEMBERS</a></li>
<li class="menu"><a class="menu" href="#">CONTACT</a></li>
</ul>
</div>
And the css looks like this:
#menu {
margin-left: 10%;
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;
position:absolute;
}
ul.menu {
float:middle;
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
And my menubar looks like following at the moment:
It just takes 80% of the sites width, but the 5 elements doesn't take 20% of the 80% as expected. How can I fix my issue ? It would be also pretty awesome if you could explain to me how the correct answer is working if it is not obvious and self explaining.
My opinion is to use table-cell and apply the style in li element not in children ones like this:
#menu {
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
position:relative;
margin: 0 auto;
}
ul.menu {
width:100%;
padding:0;
margin: 0 auto;
list-style-type:none;
}
ul{
display:table;
}
li{
display:table-cell;
text-align:center;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-left:1px solid white;
vertical-align: middle;
}
fiddle
Any borders or padding will add to the width of the elements until you tell them not to with
box-sizing: border-box;
JSFiddle Demo
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#menu {
margin: 0 auto;
border-top:1px solid white;
border-bottom:1px solid white;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;}
ul.menu {
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
You are using borders.
Borders add 2px to every element.
box-sizing: border-box;
Is the solution
http://jsfiddle.net/Hc3au/
You need to change the position of #menu to relative or add an wrapper containing the list. I'm also pretty sure there is no float: middle, just right and left ( and none and inherit ).
Also I do prefer the following:
ul.menu > li
{
width: 20%;
}
ul.menu > li > a
{
width: 100%;
}
Why do you use the menu class on every element?
I have a HTML button, I have to display it just like smart phone dialpad. like number and ABC etc.
<a href="" class="button">
1
<span>ABC</span>
</a>
everything is fine except the text is not visible in the button. How can I solve that ?
You just need to change the style of the span to wrap correctly.
add display: inline-block; to your a span selector so that it looks like this:
a span {font-size:8px;
text-transform:uppercase;
display:block;
text-align:center;
line-height:0em;
margin-top:-5px;
font-style:italic;
display: inline-block;
}
The best solution is usually the simplest. In this case, just a one line addition.
All you need to do is add a height to your button element. Here is an updated fiddle: http://jsfiddle.net/2nv7A/8/
.button {
...
height: 100px;
}
Try this:
a span {
font-size:8px;
text-transform:uppercase;
display:block;
text-align:center;
line-height:0em;
margin-top:-15px; // pulled up the text a little more
margin-bottom:10px; // pushed down the margin at the bottom
font-style:italic;
}
Fiddle around with these and you'll find the best one for you
DEMO HERE
U can use overflow property to show the text cutting off and then can manage height of your element.
.button {
position: relative;
width: 62px;
overflow: visible;
/*border: 1px solid black;*/
border: 1px solid black;
border-radius: 12px;
/*border-radius: 7px;*/
Outline: none;
margin-left:2px;
margin-bottom:7px;
border-color:#ccc;
}
If you remove your positioning, decrease your line-height and then remove your span height (which was set to 0 preventing it from appearing) then it seems to work fine. Here
.button {
width: 62px;
/*border: 1px solid black;*/
border: 1px solid black;
border-radius: 12px;
/*border-radius: 7px;*/
Outline: none;
margin-left:2px;
margin-bottom:7px;
border-color:#ccc;
}
a{
display:inline-block;
vertical-align:top;
text-align:center;
text-decoration:none;
font-weight:bold;
line-height:25px;
overflow:hidden;
font-size:12px;
}
a span {font-size:8px;
text-transform:uppercase;
display:block;
text-align:center;
font-style:italic;
}
Decresea the line-height property of .a AND increase the line-height of a. span.
You need to change the margins on your span. Use this CSS:
a span {font-size:8px;
text-transform:uppercase;
display:block;
text-align:center;
line-height:0em;
margin-top:-10px;
font-style:italic;
margin-bottom:15px;
}
It's because you set the display:block for the span tag, which should be display:inline-block;:
a span {
font-size:8px;
text-transform:uppercase;
display:inline-block; /* <---- here */
text-align:center;
line-height:0em;
margin-top:-5px;
font-style:italic;
}
Fiddle
hey guys i'm trying to create a navigation system similar to the one you can find on starbucks.com. Here is the link to my sample: http://dl.dropbox.com/u/73992/js_tests/test.htm I am accomplishing the effect with navigation sample on the bottom but as you can see there are positioning problems. You can find the CSS in the source code. I figured this is the best way to test it. Thank you in advance for any help I can get it.
as per the suggestion here's the css
*
{
margin:0;
padding:0;
}
#nav
{
position:relative;
margin-top:3em;
margin-left:3em;
}
#nav ul
{
list-style-type:none;
}
#nav ul li
{
position:relative;
margin-top:10px;
}
#nav ul li ul li
{
margin-top:0px;
}
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
border-bottom:none;
z-index:20;
}
.content
{
position:relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
}
.content form
{
display:block;
margin:10px 10px 10px 10px;
}
.content p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.gallery
{
margin:10px 10px 10px 10px;
background-color:#ffffff;
border:solid 1px black;
}
.gallery img
{
display:inline-block;
margin:10px 5px 10px 0px;
float:left;
}
/*
This next section is identical but represents what happens w/ the absolute positioning.
*/
.content2
{
position:absolute;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
top:30px;
z-index:-5;
}
.content2 form
{
display:block;
margin:10px 10px 10px 10px;
}
.content2 p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.clear
{
clear:both;
}
if this helps this is what I am trying to accomplish
Give this a try. Change the position from absolute to relative, and remove the 30px top margin. You should be able to get the same effect as the 3 examples above yours.
.content2
{
position: relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
z-index:-5;
}
[EDIT]
First off, remove the "border-bottom:none;" so your h1 will still have bottom borders for that tabbed effect.
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
z-index:20;
}
Give your h1 a class, let's say "tabbed"
<li><h1 class="tabbed">Ex. 1</h1>
And probably use some negatives for your CSS.
h1.tabbed {
position:absolute;
top:-28px;
}
Give this one a try.
Put display:inline; on li
And float:left; on ul
I think it's your big problem, if I had understand well your problem.
float : left can solve your positioning problem. You have to add just two lines in your css
#nav ul li {
float: left;
margin: 0 15px;
position: relative;
}