I need to resize my <li>WORD HERE NEEDS RESIZING</li>
Here is some code for example
<li> Home </li>
<li > Computer Repairs </li>
<li > <a href="#" > Shop </a> </li>
<li> About </li>
<li> Contact </li>
Use the css font-size:
li a {
font-size: 30px;
}
<li> Home </li>
<li > Computer Repairs </li>
<li > <a href="#" > Shop </a> </li>
<li> About </li>
<li> Contact </li>
Or you can add classes:
.resize {
font-size: 30px;
}
<li> Home </li>
<li > Computer Repairs </li>
<li > Shop </li>
<li> About </li>
<li> Contact </li>
NOTE: 30px is just an example value, use whatever you want.
You can do that like so:
li {
font-size: 16px; // or any other value
}
OR
li a {
font-size: 16px; // or any other value
}
BTW: If you can't figure this out, I suggest to check out resources online W3Schools
li a{
font-size:28px;
}
<li> Home </li>
<li > Computer Repairs </li>
<li > <a href="#" > Shop </a> </li>
<li> About </li>
<li> Contact </li>
font-size 28 is only for example you can use whatever you want as per you requirement
Related
Hello I am having a problem that when I make my top area non scroll able the area almost completely disappears.
Before Fixed Picture
html for header
<section id="header">
<div class="container">
<ul class="top-nav">
<li>
<a href="#" class="choose-language" data-toggle="popover" id="languageChooser" data-original-title="" title="">
English
<b class="caret"></b>
</a>
<div id="languageChooserContent" class="hidden">
<ul>
<li>
العربية
</li>
<li>
Azerbaijani
</li>
<li>
Català
</li>
<li>
中文
</li>
<li>
Hrvatski
</li>
<li>
Čeština
</li>
<li>
Dansk
</li>
<li>
Nederlands
</li>
<li>
English
</li>
<li>
Estonian
</li>
<li>
Persian
</li>
<li>
Français
</li>
<li>
Deutsch
</li>
<li>
עברית
</li>
<li>
Magyar
</li>
<li>
Italiano
</li>
<li>
Macedonian
</li>
<li>
Norwegian
</li>
<li>
Português
</li>
<li>
Português
</li>
<li>
Română
</li>
<li>
Русский
</li>
<li>
Español
</li>
<li>
Svenska
</li>
<li>
Türkçe
</li>
<li>
Українська
</li>
</ul>
</div>
</li>
<li>
Login
</li>
<li>
Register
</li>
<li class="primary-action">
<a href="/cart.php?a=view" class="btn">
View Cart
</a>
</li>
</ul>
<img src="/assets/img/logo.png" alt="WebKing Web Services">
</div>
</section>
html for navbar
Toggle navigation
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="primary-nav">
<ul class="nav navbar-nav">
<li menuitemname="Home" class="" id="Primary_Navbar-Home">
<a href="/index.php">
Home
</a>
</li>
<li menuitemname="Store" class="dropdown" id="Primary_Navbar-Store">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Store
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li menuitemname="Browse Products Services" id="Primary_Navbar-Store-Browse_Products_Services">
<a href="/cart.php">
Browse All
</a>
</li>
<li menuitemname="Shop Divider 1" class="nav-divider" id="Primary_Navbar-Store-Shop_Divider_1">
<a href="">
-----
</a>
</li>
<li menuitemname="Select Your Perfect Plan" id="Primary_Navbar-Store-Select_Your_Perfect_Plan">
<a href="/cart.php?gid=1">
Select Your Perfect Plan
</a>
</li>
<li menuitemname="symantec" id="Primary_Navbar-Store-symantec">
<a href="/index.php?rp=/store/ssl-certificates">
SSL Certificates
</a>
</li>
<li menuitemname="Shop Divider 2" class="nav-divider" id="Primary_Navbar-Store-Shop_Divider_2">
<a href="">
-----
</a>
</li>
<li menuitemname="Register a New Domain" id="Primary_Navbar-Store-Register_a_New_Domain">
<a href="/cart.php?a=add&domain=register">
Register a New Domain
</a>
</li>
<li menuitemname="Transfer a Domain to Us" id="Primary_Navbar-Store-Transfer_a_Domain_to_Us">
<a href="/cart.php?a=add&domain=transfer">
Transfer Domains to Us
</a>
</li>
</ul>
</li>
<li menuitemname="Announcements" class="" id="Primary_Navbar-Announcements">
<a href="/index.php?rp=/announcements">
Announcements
</a>
</li>
<li menuitemname="Knowledgebase" class="" id="Primary_Navbar-Knowledgebase">
<a href="/index.php?rp=/knowledgebase">
Knowledgebase
</a>
</li>
<li menuitemname="Network Status" class="" id="Primary_Navbar-Network_Status">
<a href="/serverstatus.php">
Network Status
</a>
</li>
<li menuitemname="Contact Us" class="" id="Primary_Navbar-Contact_Us">
<a href="/contact.php">
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li menuitemname="Account" class="dropdown" id="Secondary_Navbar-Account">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Account
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li menuitemname="Login" id="Secondary_Navbar-Account-Login">
<a href="/clientarea.php">
Login
</a>
</li>
<li menuitemname="Register" id="Secondary_Navbar-Account-Register">
<a href="/register.php">
Register
</a>
</li>
<li menuitemname="Divider" class="nav-divider" id="Secondary_Navbar-Account-Divider">
<a href="">
-----
</a>
</li>
<li menuitemname="Forgot Password?" id="Secondary_Navbar-Account-Forgot_Password?">
<a href="/pwreset.php">
Forgot Password?
</a>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</section>
Code:
section#header {
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
Now when I add the position fixed and try to make it uncontrollable the white part and logo area no longer scroll however before i even begin to scroll my menu bar is pushed up and out of position.
Picture now fixed you can see the menu bar has changed its location. Here is the new code
section#header {
position: fixed;
width: 100%;
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
This is not a z-index issue as this is happening before i even scroll down the page.
I have been stuck for days I would really be grateful for any help.
UPDATE: Okay I have the fixed menu where it is supposed to be but now I am having this issue with every page and I have no idea why every div and section has moved up as if the header doesnt exist. mind you this is before any scrolling begin. Please feel free to visit webking.com and navigate to any page to see what I mean.
As you can see a huge mess
Thanks
So here is my last corrections :
1st step fix the header :
section#header {
position: fixed; /* We want the header fixed at top */
z-index: 1000; /* We want header over other elements when scrolling */
/* margin: -5px 0 0 0; */ /* Remove seems not needed */
height: 60px; /* We should fix the header height */
width: 100%; /* header will take all available width */
background-color: #fff;
border-radius: 5px 5px 0 0;
}
2nd step fix the menu :
section#main-menu {
/* margin: 60px auto 0; */ /* It is not the place for the marin-top. We don't need this */
position: fixed; /* We want the menu fixed at top */
width: 100%;
background-color: #006687;
top: 60px; /* We want menu above the header so we shift the menu of the height of the header */
z-index: 1000; /* We want menu over other elements when scrolling */
}
3rd step correction of the content :
Here, I don't understand why (maybe need more investigations) but
the browser take the margin-top of the section#main-body and
apply it to the header. It's is not what we want and it's here we
will fix it with this :
We will add and apply the margin-top trick to the
.container inside the section#main-body
like this :
section#main-body .container {
margin-top: 100px; /* header : 60 + menu : 40 */
}
I would like to create a multi dropdownlist which always will display downwards. I am able to drop it to the side but how do i drop it only downwards? I have been searching the web for a while but i can't find a simple solution for this.
I am using Angular 5 as my language, so maybe there are some methods in angular i can use?
To illustrate what i mean look at the picture below.
This is a copy of my working code which goes sideways, and as we can see there are a lot of submenues and that is why a treestructure which goes downwards would be better to use in this case.
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
<div class="container">
<div class="row">
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Top folder
<span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Build Verification</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Daily (Commit)
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Data Processing
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Toolbar
<ul class="dropdown-menu">
<li>
Project Browser
</li>
<li>
Hardware Browser
</li>
<li>
Monitor
</li>
<li>
Data Search
</li>
<li>
Meta Data
</li>
</ul>
</li>
<li class="dropdown-submenu">
Tasks
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Setup
<ul class="dropdown-menu">
<li>
Hammer
</li>
<li>
Manger
</li>
<li>
Shaker
</li>
<li>
DOFSetup
</li>
<li>
Analysis Setup
</li>
</ul>
</li>
<li class="dropdown-submenu">
Measurement
<ul class="dropdown-menu">
<li>
Standard Measurement
</li>
</ul>
</li>
<li class="dropdown-submenu">
Processing
<ul class="dropdown-menu">
<li>
Time Data Review
</li>
<li>
Standard Processing
</li>
<li>
Time Editor
</li>
</ul>
</li>
<li>
Analysis
</li>
</ul>
</li>
</ul>
</li>
<li>
Hardware Setup
</li>
<li>
Data Viewer
</li>
<li>
Array Analysis
</li>
<li>
ODS Analysis
</li>
<li>
Shock Response Analysis
</li>
<li>
Angle Domain Analysis
</li>
<li>
Modal Analysis
</li>
<li>
Correlation Analysis
</li>
<li>
Data Recorder
</li>
</ul>
</li>
<li>
CI
</li>
</ul>
</li>
<li>
Deploy (Install)
</li>
<li>
Front-end Setup
</li>
<li>
Correlation Analysis
</li>
<li>
Laser
</li>
<li>
Model Analysis
</li>
<li>
Angle Domain Analysis
</li>
<li>
Shock Response Analysis
</li>
<li>
ODS Analysis
</li>
<li>
Array Analysis
</li>
<li>
Data Processing
</li>
<li>
Frontends
</li>
<li>
Data Recorder
</li>
<li>
Container
</li>
<li>
Data Viewer
</li>
<li>
Hardware
</li>
<li>
Test Environment
</li>
</ul>
</div>
</div>
</div>
Do you mean to achieve such downwards?
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
margin-left: -32px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
display:none;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Top folder
<span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Build Verification</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Daily (Commit)
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Data Processing
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Toolbar
<ul class="dropdown-menu">
<li>
Project Browser
</li>
<li>
Hardware Browser
</li>
<li>
Monitor
</li>
<li>
Data Search
</li>
<li>
Meta Data
</li>
</ul>
</li>
<li class="dropdown-submenu">
Tasks
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Setup
<ul class="dropdown-menu">
<li>
Hammer
</li>
<li>
Manger
</li>
<li>
Shaker
</li>
<li>
DOFSetup
</li>
<li>
Analysis Setup
</li>
</ul>
</li>
<li class="dropdown-submenu">
Measurement
<ul class="dropdown-menu">
<li>
Standard Measurement
</li>
</ul>
</li>
<li class="dropdown-submenu">
Processing
<ul class="dropdown-menu">
<li>
Time Data Review
</li>
<li>
Standard Processing
</li>
<li>
Time Editor
</li>
</ul>
</li>
<li>
Analysis
</li>
</ul>
</li>
</ul>
</li>
<li>
Hardware Setup
</li>
<li>
Data Viewer
</li>
<li>
Array Analysis
</li>
<li>
ODS Analysis
</li>
<li>
Shock Response Analysis
</li>
<li>
Angle Domain Analysis
</li>
<li>
Modal Analysis
</li>
<li>
Correlation Analysis
</li>
<li>
Data Recorder
</li>
</ul>
</li>
<li>
CI
</li>
</ul>
</li>
<li>
Deploy (Install)
</li>
<li>
Front-end Setup
</li>
<li>
Correlation Analysis
</li>
<li>
Laser
</li>
<li>
Model Analysis
</li>
<li>
Angle Domain Analysis
</li>
<li>
Shock Response Analysis
</li>
<li>
ODS Analysis
</li>
<li>
Array Analysis
</li>
<li>
Data Processing
</li>
<li>
Frontends
</li>
<li>
Data Recorder
</li>
<li>
Container
</li>
<li>
Data Viewer
</li>
<li>
Hardware
</li>
<li>
Test Environment
</li>
</ul>
</div>
</div>
</div>
I want to separate the screen into three columns using a ul tag, and I want to have a normal (vertical) list inside the first column. I tried this but it does not work:
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle"></li>
<li class="content_right"></li>
</ul>
Try the following code. I hope it helps.
#content_seperator,
.content_left,
.content_middle,
.content_right {
display: flex;
}
.content_left,
.content_middle,
.content_right {
flex: 1 1 0
}
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle">Middle</li>
<li class="content_right">Right</li>
</ul>
you may use,
#content_seperator{
display: block;
}
#content_seperator li{
display: inline-block;
vertical-align: top;
}
#content_seperator li ul li{
display: block;
}
you can give width for 'li' by using class.
I am working on making a collapsible element
I want to access
<div id="class1">
<ul>
<li> <a href="#" >link 1</a></li>
<li> <a href="#" >link 2</a></li>
<ul class="submenu">
<li> <a href="#" >link 1-1</a></li>
<li> <a href="#" >link 1-2</a></li>
</ul>
</ul>
I want to change the color of linki 1-1 when the link 2 is active or hide it when the link 2 is inactive.
Hope I am being clear here.
Just created a rough mockup for achieving the desired result. Please note there are many ways of achieving and this is only a way
$("#drop").click(function() {
$(".item").toggle("active")
})
.active {
display: block;
}
.item {
display: none
}
.item a {
text-decoration:none;
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="class1">
<ul>
<li> link 1
</li>
<li> link 2
<ul class="submenu">
<li class="item"> link 1-1
</li>
<li> link 1-2
</li>
</ul>
</li>
</ul>
I have a div that has two UL's inside of it. I want to apply list-style:none to the first UL's LI element (it only has one).
However, when I try to do this, it applies to the 2nd UL as well. Please help!
div.com-amazon-webstore-LeftNavBrowse-2 ul:nth-child(1) li {
list-style: none!important;
}
div.com-amazon-webstore-LeftNavBrowse-2 ul.linkList.browseLadder li {
list-style: initial;
}
<div class="com-amazon-webstore-LeftNavBrowse-2">
<ul class="linkList browseLadder">
<li> <a href="http://www.test.com/b/class=tier1&ie=UTF8">
Products
</a>
</li>
<ul class="linkList browseLadder">
<li> <span class="current"> Hot & Cold Therapy</span>
</li>
<li> <a href="http://www.test.com/b/6831886011">
PT & Chiro Supplies
</a>
</li>
<li> <a href="http://www.test.com/b/6831888011">
Massage Products
</a>
</li>
<li> <a href="http://www.test.com/b/6831889011">
Exercise & Fitness
</a>
</li>
<li> <a href="http://www.test.com/b/6831890011">
Pain Relief Gels
</a>
</li>
<li> <a href="http://www.test.comb/6831891011">
Rehabilitative Care
</a>
</li>
<li> <a href="http://www.test.com/b/6831893011">
Footcare
</a>
</li>
<li> <a href="http://www.test.com/b/6831894011">
Hand Therapy
</a>
</li>
</ul>
</ul>
</div>
div ul:first-child li {
list-style: none;}
your second list is inside first one that does not make it a direct child of div. so you can select the first list directly with.
.com-amazon-webstore-LeftNavBrowse-2 > ul > li
for the second list you can use selector
.com-amazon-webstore-LeftNavBrowse-2 > ul > li
.com-amazon-webstore-LeftNavBrowse-2 > ul > li {
background-color:gray;
}
.com-amazon-webstore-LeftNavBrowse-2 > ul > ul > li {
background-color:green;
}
<div class="com-amazon-webstore-LeftNavBrowse-2">
<ul class="linkList browseLadder">
<li> <a href="http://www.test.com/b/class=tier1&ie=UTF8">
Products
</a> </li>
<ul class="linkList browseLadder">
<li> <span class="current"> Hot & Cold Therapy</span> </li>
<li> <a href="http://www.test.com/b/6831886011">
PT & Chiro Supplies
</a> </li>
<li> <a href="http://www.test.com/b/6831888011">
Massage Products
</a> </li>
<li> <a href="http://www.test.com/b/6831889011">
Exercise & Fitness
</a> </li>
<li> <a href="http://www.test.com/b/6831890011">
Pain Relief Gels
</a> </li>
<li> <a href="http://www.test.comb/6831891011">
Rehabilitative Care
</a> </li>
<li> <a href="http://www.test.com/b/6831893011">
Footcare
</a> </li>
<li> <a href="http://www.test.com/b/6831894011">
Hand Therapy
</a> </li>
</ul>
</ul>
</div>
You can cjange background color to whatever you want.