I have this site here: http://jamessuske.com/freelance/seasons/
At the bottom you will see social media icons and the issue I am having is when I put my mouse over them, they are not clickable, only when I move my mouse to the left a little bit and I do not understand what I did wrong:
HTML
<ul class="social-media">
<li class="twitter"> </li>
<li class="instagram"> </li>
<li class="facebook"> </li>
</ul>
CSS
ul.social-media{
padding-top:30px;
}
ul.social-media li{
float:left;
padding-left:5px;
list-style:none;
}
ul.social-media li.twitter{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
}
ul.social-media li.instagram{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-26px;
width:25px;
height:26px;
}
ul.social-media li.facebook{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-52px;
width:25px;
height:26px;
}
Any help would be appreciated. Thanks.
The size of the clickable area depends on the content of the a tag. Your a tag does not have any content.
One solution is to apply your background image directly to the a tag and changing the display attribute to block.
ul.social-media li.twitter a {
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
display: block;
}
Note that we also need to set display to block since the anchor tag is an inline element by default. The width and height attributes only have an effect on block elements.
It's because of the padding-left you have set on the li element
it is probably because your links are so small.
try this :
.social-media a {
display:block;
height:100%;
width:100%;
}
So they fill entire <li> and stand over sprite.
Related
I'm displaying a series of boxes as <li>s like this:
I want the text vertically centered in the boxes, but as you can see they are way too low. This is my HTML:
<div class="pagelinks">
<ul>
<li>1</li>
<li>2</li>
...
<li>6</li>
</ul>
</div>
and my CSS:
.pagelinks { float:right; margin:0; }
.pagelinks li {
display:inline-block;
width:20px;
height:15px;
border:2px solid #394E7E;
margin:0;
font-weight:bold;
text-align:center;
}
.pagelinks a, .pagelinks a:hover { text-decoration:none; }
I already had a look at vertically-align, but I think it will align the <li> in the <ul>, not the text in the <li>.
How do I fix this?
PS: in the accepted answer to a similar question it was suggested to use <sub>/<sup>, but I'm sure that not the way to do it.
Use line-height.
li{
line-height:15px; // the hight of the li
}
DEMO
Add line-height: 15px; to your li class
FIDDLE
The example you posted is incorrectly formatted HTML. The <a> tag should be inside the <li>.
Also, remove the height from the <li> elements and just use line-height on the <a> tags.
JSFiddle Example
I'm working on a "flat design" website, and I've decided to use Simple Icons. I wanted the background of the Simple Icon to get darker while the white overlay image stays the same. So, I created a list (it's a navbar). I also put an anchor inside of the list item. I tried setting the background image to the anchor as the icon, and the background color to the list item to whatever I wanted. I also tried adding a transition to the list item to change the background color, but that didn't work so I just got rid of it. Here is the CSS for that entire piece of the site:
div#nav{
float:right;
width:auto;
height:37px;
padding-top:15px;
padding-right:15px;
padding-bottom:5px;
background-color:rgba(100,100,100,0.3);
border-left-color:rgba(255,255,255,0.2);
border-right-color:rgba(255,255,255,0.2);
border-right-width:1px;
border-right-style:solid;
border-left-width:1px;
border-left-style:solid;
border-top-width:1px;
border-top-style:solid;
border-top-color:rgba(255,255,255,0.2);
margin-top:102px;
margin-left:2px;
}
#nav ul{
padding:0;
list-style:none;
margin:0;
}
#nav ul li{
width:32px;
height:32px;
margin-left:15px;
display:inline-block;
background-color:#000000;
border:0;
}
#nav ul li a{
z-index:10;
}
#facebook{
width:32px;
height:32px;
background-image:url('images/facebook.png');
}
And here is the HTML:
<div id="nav">
<ul>
<li><a id="facebook" ></a></li>
<li><a id="twitter" ></a></li>
<li><a id="youtube" ></a></li>
</ul>
</div>
In the CSS, I didn't include styling for the id "twitter" or "youtube" because I'm just trying to get it to work with one for now. Can anyone make the simple icons appear AND make the transition work? I'll provide the simple icons. The icon images are inside a folder called "images" inside of another folder called "_css" which contains the CSS file itself.
https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-32.png
Add
display: block;
to your anchors
anchor tags are naturally display inline and since you have no content in the anchors so you will not see them despite giving them the dimensions
display: block;
add this to your <a> tags
fiddle : http://jsfiddle.net/9CFGK/
I am trying to make a navigation bar with the following code , but i can't seem to get the outer div to be of the same height as that of the unordered list inside.
I tried display:inline-block too but it doesn't seem to work.
Here is the html,
http://jsfiddle.net/jairajdesai/7Lyss/
HTML :
<div id="top_navigation_menu">
<ul id="top_navigation_list">
<li class="top_navigation_options">Home</li>
<li class="top_navigation_options">Places</li>
<li class="top_navigation_options">Travel</li>
<li class="top_navigation_options">Stay</li>
<li class="top_navigation_options">FAQs</li>
</ul>
</div>
CSS :
#top_navigation_menu{
position:absolute;
top:14%;
min-width: 50%;
background-color:#eee;
color:white;
}
#top_navigation_list{
list-style-type: none;
}
.top_navigation_options{
display:inline;
}
Use display:inline with Ul and display:inline-block with li css class. Something like this
#top_navigation_list{
list-style-type: none;
background-color:#000;
display:inline;
}
.top_navigation_options{
display:inline-block;
}
JS Fiddle Demo
Just add margin: 0 in #top_navigation_list to remove the default margin of an unordered list.
Updated JsFiddle
Is it possible to style DIVs so they look like follows:
with simple code
<div class='menubar'><div class='menu'>item1<br/>item2</div>...</div>
This is for menu. I wish just to resize selected DIV.
The features should be follows:
1) DIVs are placed from left to right without specifying absolute positions.
2) DIVs are taller than container DIV but don't stretch it
UPDATE
Please explain with DIVs or SPANs, I failed to use LEFT with them. I need to learn, not get ready solution.
This is pretty basic stuff.
1) don't use divs, use a list
2) float the child element
<ul class='menubar'>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
and the according css:
ul.menubar{
/*some fancy css*/
height:<x>px; /* is needed since it would collapse otherwise*/
}
ul.menubar > li{
float:left;
/* more fancy css */
}
Here you go with a fancy demo.
set a width to your divs, then use float:left; ?
this won't stretch the container
you can also use display:inline-block; (on the divs) and set text-align:center; to the container.
But it will stretch the container.
This will depend on what browser you want it to work for. For ie8 and below i suggest not using this code. Inbox me if you'd prefer an all browser version but to ignore ie 5.5, 6, 7 and 8 its best.
First of all for the menu I find it easier to use the unordered list method than a selection of divs and their ID's and classes. Heres a small example.
HTML List
<ul id="menu">
<li>
list1
</li>
<li>
List2
<ul>
<li>
Option2
</li>
</ul>
</ul>
CSS for the menu:
body, html {
padding:0px;
margin:0px;
width:100%;
}
body{
background:#FCFCFC;
}
#menu{
background:#333333;
list-style-type:none;
padding:0px;
margin:0px;
}
#menu > li {
padding:0px;
margin:0px;
display:inline-block;
}
#menu > li > a {
color:#FFFFFF;
text-decoration:none;
font-size:20px;
font-weight:bold;
}
#menu > li > ul {
display:hidden;
position:absolute;
}
#menu > li:hover > ul{
display:block;
}
thats the basics anyway. Once you've got that your ready to go!;
I have this ul menu:
<ul id="superfish-1">
<li class="active-trail">Inicio</li>
<li class="trail">Quienes somos</li>
<li class="trail">Contacto</li>
</ul>
and I need to align it horizontally.
I saw this question but positioning the ul as postion:relative; and setting left:50% didn't make it.
I also found this question but in my case I can't set the width manually because the menu load its content dinamically, then the width changes all the time.
This is what I need:
Write like this:
#superfish-1{
text-align:center;
}
li{
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;/*For IE7*/
}
Check this http://jsfiddle.net/SdkKd/
Add margin:0 auto; to css of ul.
Check this fiddle: http://jsfiddle.net/dURBJ/1/