I am currently learning how to code html and css and I am not trying to copy them I just want to learn how to do it like that. Yes it's a CS:GO gambling site I know. I want to learn how to add the font awesome icon and make it clickable and also how to add a padding around only that icon. The website: skinup.gg
My Test Website: https://jsfiddle.net/a2yweme3/
HTML:
<!--Default Stuff-->
<title>CS:GOAbyss</title>
<!--Script Links-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/script.js"></script>
<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/style.css">
<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">
<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<body>
<!--Website Sidebar-->
<div id="sidebar">
<ul>
<li>TEST LINK</li>
<li>TEST LINK</li>
<li>TEST LINK</li>
<li>TEST LINK</li>
<li>TEST LINK</li>
<li>TEST LINK</li>
</ul>
</div>
</body>
CSS:
/* Default Stuff */
body {
margin:0px;
padding:0px;
font-family:"Open Sans", sans-serif;
}
/* Website Sidebar */
#sidebar {
background:rgb(41,41,41);
width:180px;
height:100%;
position:absolute;
left:0px;
top:0px;
}
ul {
margin:0px;
padding:0px;
}
ul li {
list-style:none;
padding:10px;
border-bottom:2px solid #111;
display: block;
}
ul li a {
background:rgb(41,41,41);
color:#ccc;
text-decoration:none;
margin:10px;
}
ul li:before {
content:'\f1ce';
font-family:'FontAwesome';
padding:10px;
background:rgb(125,125,125);
text-align:center;
}
Pretty simple with font-awesome icons, but you can make custom icons by creating pictures and adding :hover to create a hover effect on the pics (it's how that skin site is doing it).
JsFiddle
Updated: JsFiddle
Add icons like this:
<li>
<a href="#" class="navbarLinks">
<div class="icons">
<i class="fa fa-money"></i>
</div>
<div class="textInfo">TEST LINK
</div>
</a>
</li>
And create a hover effect on the fontawesome icon by doing this:
.fa-money:hover{
color: #000;
}
Related
I'm learning uikit and trying to add curved borders to different sections of my page, but I can't figure it out.
The example I'm trying to follow looks like this, which is how I'd like it to look:
header{background-color:#000000;width:100%;height:200px;font-size:100px;text-align:center;}
nav{background-color:#000000;width:20%;height:1300px;float:left;font-size:20px;text-align:center;color:#FFFFFF;}
section {background-color:#CCCC99; width:80%;height:1300px;float:left;font-size:20px;text-align:center;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>4WAP - Exercise1</title>
<link rel="stylesheet" href="css/uikit.css" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css" />
<script src="jquery/jquery-3.1.0.js"></script>
<script src="js/uikit.min.js"></script>
</head>
<body>
<header></header>
<nav>
<div class="uk-panel uk-panel-box">
<h3 class="uk-panel-title">This is the Main Menu</h3>
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav> <!--main menu start-->
<li class="uk-parent">Main Option One - Click Me To See More or Less
<ul class="uk-nav-sub">
<li>More One</li>
<li>More Two</li>
</ul>
</li>
<li>Main Option Two</li>
<li>Main Option Three</li>
</ul></div>
</nav>
<section></section>
</body>
</html>
Can you guys give me a hand? Thanks in advance
using uikit you can add the .uk-border-rounded class to a element. or manually add border-radius:5px; to a elements css.
I am giving different type of curved bordered divs:
.normal{
position:absolute;
left:5px;
top:5px;
width:100px;
height:200px;
border:1px solid red;
border-radius:10px;
}
.medium{
position:absolute;
left:15px;
top:15px;
width:100px;
height:200px;
border:1px solid green;
border-radius:30px;
}
.rounded{
position:absolute;
left:25px;
top:25px;
width:100px;
height:100px;
border:1px solid blue;
border-radius:50%;
}
<div class="normal"></div>
<div class="medium"></div>
<div class="rounded"></div>
I'm trying to stylise my text in CSS and here's what gets displayed.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<title></title>
</head>
<body class="wrapper">
<!-- header for: ALL PAGES --->
<header id="header">
</header>
<!-- end header for: ALL PAGES --->
<!-- navigation bar for: ALL PAGES --->
<nav>
</nav>
<!-- end navigation bar for: ALL PAGES --->
<!-- paragraph for: THIS PAGE ONLY --->
<section id="welcome_p">
</section>
<!-- end paragraph for: THIS PAGE ONLY --->
<!-- images for: THIS PAGE ONLY --->
<section id="plan_options">
</section>
<!-- end images for: THIS PAGE ONLY --->
<!-- footer for: ALL PAGES --->
<footer id="footer">
<div id="left_side_footer">
<p class="footer_heading">About</p>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Get to Know John</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Moon Lit Disco's</span>
</a>
</div>
<div id="middle_of_footer">
<p class="footer_heading">Terms and Policies</span>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Cookie Policy</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Terms and Conditions</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Privacy Policy</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Copyright and Trademark</span>
</a>
</div>
<div id="right_side_footer">
<p class="footer_heading">Website</p>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Feedback</span>
</a>
</div>
<div id="copyright">
<p class="legal_paragraph">Logo / site design: Trey Taylor and Charlie Wubs</p>
<p class="legal_paragraph">©2014 Moon Lit Disco's</p>
<p class="legal_paragraph">Version:2014.1.0</p>
</div>
</footer>
<!-- end footer for: ALL PAGES --->
</body>
</html>
any my CSS:
/* SECTIONS */
/* CLASSES */
.legal_paragraph{
font-family:"Helvetica", "Arial", sans-serif;
text-align:right;
font-size:10px;
color:black;
padding:1px;
}
.footer_paragraph{
font-family:"Helvetica", "Arial", sans-serif;
font-size:1em;
color:black;
display:block;
text-decoration:none;
}
.footer_link{
text-decoration: none;
}
.footer_heading{
display:inline;
font-family:"Century Gothic";
font-size:17px;
color:black;
text-decoration:underline;
background-color:white;
display:inline;
width=100%;
}
.fp{
text-decoration:none;
color:black;
font-size:1em;
display:block;
font-family:"Helvetica", "Arial", sans-serif;
}
/* STYLE */
a{
text-decoration:none;
}
#footer a.footer_link:hover span{
border-bottom:1px solid black;
border-top:1px solid black;
width:100%
}
#line_break{
}
#left_side_footer{
display:table-cell;
float:left;
padding-right:360px;
padding-bottom:30px;
}
#right_side_footer{
display:table-cell;
float:right;
}
#middle_of_footer{
display:table-cell;
float:center;
}
What I want:
The text to be not underlined, same size and font (for some reason it doesn't do that)
get it so it is all inline
get that legal stuff below it all
Any help would be must appreicated!
Without doing all the work for you something like this should work.
Will need some styling from here, suggest looking at http://www.codecademy.com/
HTML
<footer>
<ul class="left">
<li>About</li>
<li>Get to know John</li>
<li>Moon Lit Disco's</li>
</ul>
<ul class="left">
<li>About</li>
<li>Get to know John</li>
<li>Moon Lit Disco's</li>
</ul>
<ul class="left">
<li>About</li>
<li>Get to know John</li>
<li>Moon Lit Disco's</li>
</ul>
<div class="clearLeft">
<p>Logo / site design: Trey Taylor and Charlie Wubs</p>
<p>© 2014 Moon Lit Disco's</p>
<p>Version:2014.1.0</p>
</div>
</footer>
CSS
.left{
float:left;
}
.clearLeft{
clear:left;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
Should get you started :)
If you want the text not to be underlined, then you need to style the anchor.
Example:
footer a {
text-decoration:none;
}
.footer_link a {
font-size:1em;
}
Since your footer is an HTML5 element, you don't really need an ID of #footer. Semantically, anyway.
You also don't need spans. You can just use the parent class to style the font size.
You're also missing a closing paragraph tag, which might be why it's not taking the paragraph styles.
Cleaning up your code, your HTML should be more like this (head area is removed, but it's fine):
<body class="wrapper">
<!-- header for: ALL PAGES --->
<header></header>
<!-- end header for: ALL PAGES --->
<!-- navigation bar for: ALL PAGES --->
<nav></nav>
<!-- end navigation bar for: ALL PAGES --->
<!-- paragraph for: THIS PAGE ONLY --->
<section id="welcome_p"></section>
<!-- end paragraph for: THIS PAGE ONLY --->
<!-- images for: THIS PAGE ONLY --->
<section id="plan_options"></section>
<!-- end images for: THIS PAGE ONLY --->
<!-- footer for: ALL PAGES --->
<footer>
<div class="column">
<p class="footer_heading">About</p>
<ul>
<li>Get to Know John
</li>
<li>Moon Lit Disco's
</li>
</ul>
</div>
<div class="column">
<p class="footer_heading">Terms and Policies</p>
<ul>
<li>Cookie Policy
</li>
<li>Terms and Conditions
</li>
<li>Privacy Policy
</li>
<li>Copyright and Trademark
</li>
</ul>
</div>
<div class="column">
<p class="footer_heading">Website</p>
<ul>
<li> Feedback
</li>
</ul>
</div>
<div id="copyright">
<p>Logo / site design: Trey Taylor and Charlie Wubs
</p>
<p>© 2014 Moon Lit Disco's</p>
<p>Version:2014.1.0</p>
</div>
</footer>
</body>
And CSS:
.column {
font-family:"Helvetica", "Arial", sans-serif;
font-size:1em;
color:black;
display:block;
text-decoration:none;
float:left;
margin-right:13px;
width:30%;
}
.column a {
text-decoration: none;
color:black;
}
.column ul {
list-style:none;
margin-left:-40px;
}
.footer_heading {
font-family:"Century Gothic";
font-size:17px;
color:black;
text-decoration:underline;
background-color:white;
}
#copyright {
clear:both;
font-family:"Helvetica", "Arial", sans-serif;
text-align:right;
font-size:10px;
color:black;
padding:1px;
}
#copyright a {
text-decoration:none;
color:black;
}
See Fiddle: http://jsfiddle.net/v6o9wg43/
For some reason my background color does not cover the entire page width on my mobile device, However, it looks fine on a regular desktop. I cannot find the problem.
Here is my style.css:
#media only screen and (min-width : 250px) and (max-width : 780px)
{
#pageHeader{
border:none;
background-color:"background-color:#F5F5DC";
}
#pageHeader nav {
height:300px;
width:100%;
}
#pageHeader nav ul {
padding-left:0;
width:100%;
}
#pageHeader nav ul li {
width:100%;
text-align:center;
margin-left:25px;;
}
#pageheader nav a:link, #pageHeader nav a:visited {
height: 60px;
padding: 5px 23px;
text-decoration: none;
dislay: block;
width:100%;
}
#pageHeader img{
width: 100%;
height: auto;
margin-bottom: 3%;
}
}
Here is my html:
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
</head>
<body>
<div id="pageHeader" style="background-color:#F5F5DC">
<img src="style/logo.jpg" name="logo" width="431" height="94" alt=""/>
<br />
<br />
<nav>
<ul>
<li >Home</li>
<li style="margin-left:25px">All Products</li>
<li style="margin-left:25px">Blog Using Ruby</li>
<li style="margin-left:25px">User Javascript Page</li>
<li style="margin-left:25px">Submit Concerns using Perl</li>
<li class="active" style="margin-left:25px">About Us using HTML5</li>
<li style="margin-left:25px">Asp Help Pages</li>
<li style="margin-left:25px;"><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
</nav>
</div>
</div>
<h1 align="center">About Us</h1> </br> </br>
<div align="center" id="pageBody">
<table width="100%" border="0" cellpadding="6">
<tbody>
<tr>
<td> Code omitted </td>
</tr>
</tbody>
</table>
<div id="pageFooter">
Copyright |Admin Log In
</div>
</div>
</body>
</html>
Look that you have an extra tag when you close your
<div id="pageHeader" style="background-color:#F5F5DC">
If you are using more code, and floating some tags, dont forget to put the "overflow:hidden" in the container that "contains" the tags floated!
Remove the explicit height on the nav element - let the flow content dictate that rather than setting it explicitly. If you clear fix the floats in the unordered list using the CSS-
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
(See http://css-tricks.com/snippets/css/clear-fix/)
The list will take the height of its contents.
You will also want to remove the margin left on the list item elements (these are at 100% plus the 25px margin), replacing it with padding-left and setting box-sizing: border-box on the list items (or just set the margin to zero when at a smaller viewport width as your design doesn't seem to need it).
The unordered list will need to look something like this-
<ul class="group">
<li>Home</li>
<li>All Products</li>
<li>Blog Using Ruby</li>
<li>User Javascript Page</li>
<li>Submit Concerns using Perl</li>
<li class="active">About Us using HTML5</li>
<li>Asp Help Pages</li>
<li><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
In either case you should remove the inline margin-left: 25px styles - you will find it much more maintainable to keep these externally in your CSS.
http://www.mohrdevelopment.com
I'm currently only testing the website with 2 browsers:
Rockmelt & Chrome.
Rockmelt problem:
When opened in rockmelt browser, everything functions correctly except for the "About" tab. When it is pressed my header dissapears. I even tried copying the code from one of my other tabs that looked the same (but didn't have the header problem) but the problem still prevailed.
Chrome problem:
Initially when the website is opened in Google Chrome, the navigation bar is aligned vertically. However if you press some of the other tabs, the bar aligns horizontally like it's supposed to (even if you go back to home tab). But if you click around on the tabs fast, there's a chance that the bar aligns vertically again.
I hope someone is able to help me with this problem, since i cannot see the logic in it.
My HTML Code for Home tab:
<html>
<head>
<!-- Meta information -->
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<!-- Favicon -->
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
<!-- Title -->
<title> Jonas - Development page </title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header of page -->
<div class="headerdiv">
<h1 class="header">Mohr Development</h1>
</div>
<!--Navigation bar-->
<ul class="navigation">
<li class="current"><em class="home"/>Home</li> <!-- Current selection -->
<li><em class="photos"/>Photos</li>
<li><em class="projects"/>Projects</li>
<li><em class="about"/>About</li>
<li><em class="contact"/>Contact</li>
</ul>
<div class="wrap">
<div class="content">
<br>My new selection
<form action="" method="get">
<ul>
<li>
<label for="name"><font color="white">Enter your name:</font></label>
<input id="name" name="name"/>
</li>
<li>
<label for="comments"><font color="white">Your comments</font></label>
<textarea id="comments" name="comments"></textarea>
</li>
<li>
<label for="css"><font color="white">Do you like CSS?</font></label>
<input type="checkbox" name="css" id="css" />
</li>
<li>
<label for=""><font color="white">Favorite Language?</font></label>
<input type="radio" /> CSS
<input type="radio" /> HTML
<input type="radio" /> JavaScript
<input type="radio" /> PHP
</li>
<li>
<input type="submit" value="Go!"/>
</li>
</ul>
</form>
</div> <!-- Wrap end -->
<!-- Sidebar -->
<aside>
<h2>Sidebar</h2>
<ul class="sidebar">
<li class="sidebarli">Lol1</li>
<li class="sidebarli">Lol2</li>
<li class="sidebarli">Lol3</li>
<li class="sidebarli">Lol4</li>
</ul>
</aside>
</div> <!-- Content end -->
<div class="footer">
<p>Copyright © Mohrdevelopment.com</p>
</div> <!-- Footer end -->
</body>
</html>
My HTML Code for About tab:
<html>
<head>
<!-- Meta information -->
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<!-- Favicon -->
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
<!-- Title -->
<title> Jonas - Development page </title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header of page -->
<div class="headerdiv">
<h1 class="header">Mohr Development</h1>
</div>
<!-- Navigation bar -->
<ul class="navigation">
<li><em class="home"/><b>Home</b></li>
<li><em class="photos"/><b>Photos</b></li>
<li><em class="projects"/><b>Projects</b></li>
<li class="current"><em class="about"/><b>About</b></li>
<li><em class="contact"/><b>Contact</b></li>
</ul>
<div class="wrap">
<div class="content">
<form action="" method="get">
<ul>
<li>
<label for="name"><font color="white">Enter your name:</font></label>
<input id="name" name="name"/>
</li>
<li>
<label for="comments"><font color="white">Your comments</font></label>
<textarea id="comments" name="comments"></textarea>
</li>
<li>
<label for="css"><font color="white">Do you like CSS?</font></label>
<input type="checkbox" name="css" id="css" />
</li>
<li>
<label for=""><font color="white">Favorite Language?</font></label>
<input type="radio" /> CSS
<input type="radio" /> HTML
<input type="radio" /> JavaScript
<input type="radio" /> PHP
</li>
<li>
<input type="submit" value="Go!"/>
</li>
</ul>
</form>
</div> <!-- Wrap end -->
<!-- Sidebar -->
<aside>
<h2>Sidebar</h2>
<ul class="sidebar">
<li class="sidebarli">Lol1</li>
<li class="sidebarli">Lol2</li>
<li class="sidebarli">Lol3</li>
<li class="sidebarli">Lol4</li>
</ul>
</aside>
</div> <!-- Content end -->
<div class="footer">
<p>Copyright © Mohrdevelopment.com</p>
</div> <!-- Footer end -->
</body>
</html>
My CSS Code:
body {
font-family:sans-serif;
background: url(images/background4.png);
margin:0px;
}
/********************\
******* Header *******
\********************/
.header
{
background: url(images/Header.png);
text-indent:-9999px;
width:1092px;
height:132px;
margin:auto;
}
.headerdiv{
width:100%;
margin:0;
background:gray;
}
/********************\
*** Navigation Bar ***
\********************/
.navigation {
background:black url(Navigation/Navigation/nav_background.png);
height:40px;
margin-bottom:0px;
padding-left:10%;
font-size: 0; /*remove whitespace*/
display:block;
width:100%;
}
.navigation li{
display:inline-block;
line-height: 40px;
font-size:16px;
}
.navigation li a{
display:block;
color:#FFFFFF;
padding: 2px 10px;
}
.navigation li a em{
height:32px;
display:inline-block;
padding: 0 5px 6px 60px;
font-weight:bold;
vertical-align: middle;
background-position: 0 50%;
font-size:16px;
}
.navigation li a:hover{
color:#00CCFF;
background: url(Navigation/Navigation/nav_hover.png) no-repeat;
text-decoration:none;
padding: 2px 10px;
}
.navigation .current a {
color:#FFFFFF;
background:url(Navigation/Navigation/nav_hover.png) no-repeat;
padding: 2px 10px;
}
/*Navigation bar icons*/
.navigation li a em.home, em.photos, em.projects, em.about, em.contact{
background-repeat: no-repeat;
margin-bottom:5px;
}
.navigation li a em.home {
background-image: url(Navigation/Icon_images/home.png);
}
.navigation li a em.photos{
background-image: url(Navigation/Icon_images/Photo.png);
}
.navigation li a em.projects{
background-image: url(Navigation/Icon_images/projects.png);
}
.navigation li a em.about{
background-image: url(Navigation/Icon_images/about.png);
}
.navigation li a em.contact{
background-image: url(Navigation/Icon_images/Contact.png);
}
/*Navigation bar icons STOP*/
/* Main Wrapper */
.wrap {
margin:auto;
width:80%;
background:yellow;
}
/********************\
******* Content ******
\********************/
.content
{
background:url(images/outlets.png);
float:left;
width:80%;
height:auto;
min-width:500px;
min-height:900px;
display:inline;
color:white;
border-bottom-left-radius: 50px 50px;
}
.content h1, p, form, label{
color:white;
}
/********************\
******* Sidebar ******
\********************/
aside{
background: url(images/egg_shell2.png);
float:left;
width:20%;
height:inherit;
min-height:900px;
min-width:125px;
display:inline;
border-bottom-right-radius: 50px 50px;
}
aside ul {
padding-left:1px;
list-style:none;
}
/********************\
****** General *******
\********************/
ul a {
text-decoration:none;
color: #666;
}
ul a:hover {
text-decoration:underline;
color:black;
}
li {
list-style:none;
margin-bottom:20px;
}
label {
display: block;
cursor: pointer;
color: #292929;
font-family:sans-serif;
padding-bottom:8px;
}
form ul {
padding-left:0px;
}
textarea {
width:400px;
height:220px;
}
#contact {
padding-left:5px;
font-weight:bolder;
}
#Andapp{
margin-top:50px;
}
/********************\
******* Footer *******
\********************/
.footer{
float:left;
height:150px;
width:100%;
background-color:gray;
margin-top:100px;
text-align:center;
}
<ul class="navigation">
<li class="current"><em class="home"/>Home</li> <!-- Current selection -->
<li><em class="photos"/>Photos</li>
<li><em class="projects"/>Projects</li>
<li><em class="about"/>About</li>
<li><em class="contact"/>Contact</li>
</ul>
<em> tags aren't closed. It's probably best to abstract away the styling into your CSS files and focus on content in the HTML.
You can run your HTML through the W3C Validator tool to help you with these sorts of errors.
I have a problem with my menu. I only want four menu items to appear at any time, meaning that if there’s an overflow, it’ll be clipped, and the user will have to scroll down.
I tried setting overflow-y, hoping to see it get clipped, but instead, a horizontal scroll bar appears.
HTML
<link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/screen.css' type="text/css" media="screen, projection" />
<link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/print.css' type="text/css" media="print" />
<div class="container">
<div id="menu">
<ul>
<li>profile
<ul>
<li>overview</li>
<li>partners
<ul>
<li>Lim Hong Lian</li>
<li>Teo Su Seam</li>
<li>Marina Baracs</li>
</ul>
</li>
<li>associates
<ul>
<li>Jocelyn Yang Liwan</li>
<li>Tsai Ming Ming</li>
</ul>
</li>
<li>team</li>
</ul>
</li>
<li>projects
<ul>
<li>featured projects
<ul>
<li>HELLO</li>
</ul>
</li>
<li>project list
<ul>
<li>current
<ul>
<li>all</li>
<li>urban</li>
<li>resort</li>
<li>spa</li>
<li>restaurant</li>
<li>others</li>
</ul>
</li>
<li>completed</li>
</ul>
</li>
</ul>
</li>
<li>publications
<ul>
<li>books</li>
<li>magazines</li>
</ul>
</li>
<li>contacts
<ul>
<li>Singapore</li>
<li>Milan</li>
<li>Beijing</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
#menu ul
{
list-style-type:none;
position:absolute;
padding: 5px 0px;
margin:0px;
width:100px;
}
#menu
{
position:relative;
border-top-color:#afafaf;
border-top-style:solid;
border-top-width: thin;
font-size: 11px;
margin-top:5px;
height:80px;
}
#menu ul ul
{
display:none;
position:absolute;
padding:5px 0px;
left:150px;
top:0px;
height:80px;
}
Javascript (jQuery)
$(document).ready(function(){
$('#menu ul li a').click(function(){
if(!$(this).hasClass('current'))
{
var relatives = $(this).parent().siblings();
relatives.find('ul').css('left',150).hide();
relatives.find('.current').removeClass('current');
$(this).siblings().animate({'left':'-=20', 'opacity':'toggle'},'slow');
$(this).addClass('current');
if($(this).attr("href") != "#"){
var url = $(this).attr("href").split('#!')[1];
$('#content').slideUp('slow', function(){$(this).load(url, function(){$(this).slideDown('slow')});})
window.location = base_url+url;
}
}
$(this).parent().siblings().find('.black').removeClass('black');
$(this).addClass('black');
return false;
});
})
Demo on JS Fiddle.
Here is a screenshot: I only want “all”, “urban”, “resort”, and “spa” to appear initially.
Not sure you can limit the number of elements, but you can set the height and set the overflow to auto, so if it's higher then specified width there will be a scrollbar.
<ul class="inner-ul">
<li>all</li>
<li>urban</li>
<li>resort</li>
<li>spa</li>
<li>restaurant</li>
<li>others</li>
</ul>
.inner-ul {
height:50px;
overflow-y: auto;
}
Hard to tell from the question and fiddle (and I can't see the image) but I think you need
overflow-x: auto;
Here's a good resource for overflow: http://www.brunildo.org/test/Overflowxy2.html
Change height to 70px and add "overflow:auto;" to your menu css statement