swindmiller Posted December 7, 2014 Share Posted December 7, 2014 I am just learing CSS and am very new so I know this is a very basic and stupid question. I know what I have is wrong but i was just playing with different settings to try to get what I wanted. I am trying to duplicate this (just the lower row of icons): I came up with this (I know the colors are wrong): My problem is with the size (width in particular). Here is my CSS and HTML: #menu li{ width: 550px; height: auto;display: inline; font-size: 58px; text-align: center; background-color: #8AD9FF; border-radius: 0px; margin: 0px; border: 5px solid #0000ff;} <body><div id="menu" class="midRoundBorder"><ul><li><a href="Speakers.html"><img src="../../images/Speakers.png" alt="Speakers" /></a></li><li><a href="Standby.html"><img src="../../images/Standby.png" alt="Standby" /></a></li><li><a href="Settings.html"><img src="../../images/Settings.png" alt="Settings" /></a></li><li><a href="Search.html"><img src="../../images/Search.png" alt="Search" /></a></li></ul></div> The png's are just white icons and the size of those are fine but I cannot get the light blue part of the image (width) to change without making the icon bigger. Again I know I am doing this wrong but need an example doing it the correct way Thanks, Scott Link to comment Share on other sites More sharing options...
Ingolme Posted December 8, 2014 Share Posted December 8, 2014 There are many possible solutions. If the light blue part is actually part of the image, then you can't make it larger, but you can set the background color of the list item to the same color as the background of the image. You can use padding to increase the width and height of the list item. Personally, I would use transparent PNG images for the icons so that any color could be used in the background. I would use icons as background images so that text could be placed in the links instead. It's important to have text in your links so that search engines and screen readers can know what the link is. People with visual disabilities have programs that read the text out to them, if there is no text, they cannot "click" on the link. Link to comment Share on other sites More sharing options...
tejasamrute Posted December 8, 2014 Share Posted December 8, 2014 <!DOCTYPE html><html><head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/font-awesome.css" /> <style type="text/css"> .container { width:920px; height:auto; margin:0 auto; background-color: #C96; } .container ul li { margin:0; padding:0; list-style:none; } .container li { font-family: Arial, Helvetica, sans-serif; float: left; width: 117px; background-color: #001932; height: auto; border:1px solid #e0e0e0; text-align: center; color: #FFF; font-weight: bold; } .container li .fa { text-align:center; font-size:35px; padding-top:10px; padding-bottom:3px; } .container li a { display:block; color:white; text-decoration:none; width: 117px; height:100%; } .container li a:hover { background: #536d85; /* Old browsers */background: -moz-linear-gradient(top, #536d85 0%, #07233e 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#536d85), color-stop(100%,#07233e)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #536d85 0%,#07233e 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #536d85 0%,#07233e 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #536d85 0%,#07233e 100%); /* IE10+ */background: linear-gradient(to bottom, #536d85 0%,#07233e 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#536d85', endColorstr='#07233e',GradientType=0 ); /* IE6-9 */color:yellow;}.container li a:hover .fa { color:white;} </style> </head><body><div class="container"> <ul> <li><a href="#"><i class="fa fa-home"></i><br>Home</a></li> <li><a href="#"><i class="fa fa-volume-off"></i><br>Speaker</a></li> <li><a href="#"><i class="fa fa-search"></i><br>Search</a></li> <li><a href="#"><i class="fa fa-music"></i><br>Playlists</a></li> <li><a href="#"><i class="fa fa-music"></i><br>Artists</a></li> <li><a href="#"><i class="fa fa-music"></i><br>Decades</a></li> <li><a href="#"><i class="fa fa-music"></i><br>Compilation</a></li> </ul> <div style="clear:both"></div></div></body></html> I have used font awesome instead of images for the icons... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now