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
Related
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.
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.
*{
margin:0;
padding:0;
border:0;
font-family: Helvetica, sans-serif;
-webkit-text-size-adjust:none;
}
#menubar * { padding: 0; margin: 2; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
#menubar ul{
text-align:center;
}
#menubar ul li { display:inline-block; padding: 2px; position: relative; margin-left:-10px; margin-right:-20px; margin:invisible; }
#menubar ul a { display: table-cell; vertical-align: middle; width: 80px; height: 30px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
#menubar li:after{
border-left:50px solid black;
border-right:60px solid black;
content:"";
position:relative;
left:-12px;
top:-18px;
z-index:-1;
display:block;
height:1px;
}
Ive got this code on the header and ive set the margin and border to 0 but im still getting a blank white space on the sides when i preview the webpage. Any suggestions?
This is the webpage that i have made and its for mobiles so if you want to get the proper user experience you could browse it with your mobile phone http://obdkey.comyr.com/Home.html
this is a temporary domain for the website
Your body still has 5px padding on it, set it to:
body {
padding:0px;
}
You have a
<br />
that's causing the white space at the bottom of the page.
Also your width is set to 95%, which is causing the space on the right.
Unsure as to whether that's intentional or not, but thought it worth a mention in case you were trying to get rid of that white space as well.
body { padding: 5px;
this may be your problem, try removing this attribute.
if someone could help me with this, would be great! I have some images on my webpage, and I want to make a small effect, when I'm moving the mouse over the image, should appear ADD button, in the center of the image, and around the button to be a background-color with opacity effect.
I have this HTML code:
<span class="img1" style="opacity: 1;"><img class="prodimg" src="img/naturale_pi_5_large.jpg" alt="Lily Pink Bag"></span>
<span class="img2" style="opacity: 0; visibility: visible;">
<div class="buttoncont">
Add to Cart
</div>
</span>
and also this CSS:
.buttoncont{
display:block;
width:92px;
margin:0;
background:#c33a56;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#content .productlist .product .foot .buttoncont {
right:0;
position:absolute;
bottom:0;
}
.buttoncont a,
.buttoncont input {
display:block;
color:#ffffff;
width:100%;
height:30px;
line-height:30px;
text-align:center;
font-family: Arial, sans-serif;
font-size:90%;
background:url('img.jpg');
border:0;
padding:0;
cursor:pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.buttoncont input:hover {
text-decoration:underline;
}
.miniproductlist .imagecontainer img {
vertical-align:middle;
display:inline;
max-width:100%;
outline:#ffffff 1px solid;
}
.miniproductlist .img2 {
position:absolute;
top:0;
left:0;
visibility:hidden;
width:100%;
height:81px;
}
Thanks in advance!
If you are wrapping everything in a container than you can simply accomplish this with CSS ONLY
.container button {
display: none;
}
.container:hover button {
display: inline-block;
}
Now what we are doing here is we are hiding the button, and on hovering the container div, we are showing it, alternatively you can use visibility: hidden; but that will take up space where display: none; wont
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;
}