Home
Search results “Css li list style none”
CSS video tutorial - 65 - CSS list style type property vs HTML ul tag
 
06:53
CSS video tutorial - 65 - CSS list style type property vs HTML ul tag CSS list-style-type property: It is used to specify the bullet symbol to be displayed in front of list items of html ol or html ul. Values: decimal | decimal-leading-zero | upper-alpha | lower-alpha | upper-roman | lower-roman | none | disc | circle | square etc. ========================================= Follow the link for next video: CSS video tutorial - 66 - CSS list style image property vs HTML ul tag https://youtu.be/sTsbQO1aAXo Follow the link for previous video: CSS video tutorial - 64 - CSS list style type property vs HTML ol tag https://youtu.be/ABbNOJlaFBE ======= CSS Questions & Answers ============ 1. Which CSS property is used to remove bullets from unordered list? a. list-style-bullet b. list-style-type c. list-type-style d. list-bullet-type Answer: b 2. How do you create a list that displays its list item with square bullet? a. list-type:square b. list-style-type: square c. list-type-style: square d. list:square Answer: b =========================================
Views: 2244 Chidre'sTechTutorials
CSS video tutorial - 67 - CSS list style position property vs HTML ul tag
 
04:30
CSS video tutorial - 67 - CSS list style position property vs HTML ul tag CSS list-style-position property: It is used to specify the position of the bullet symbol with respect to list item’s border area. Values: outside | inside Example code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Demo</title> <style type="text/css"> ul > li { border:1px solid red; } </style> </head> <body> <ul style="list-style-type:none; list-style-image:url('checkmark.png'); list-style-position:outside;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html> ========================================= Follow the link for next video: CSS video tutorial - 68 - Understanding CSS box model basics https://youtu.be/k7D-IVVFZJU Follow the link for previous video: CSS video tutorial - 66 - CSS list style image property vs HTML ul tag https://youtu.be/sTsbQO1aAXo ======= CSS Questions & Answers ============ =========================================
Views: 2489 Chidre'sTechTutorials
How to Remove Bullets from an Unordered List in CSS
 
02:05
Remove bullets from unordered list and clean the code by removing padding and margin. An Easy way is the best way. #csstutorial #removebulletsfromlist #unorderedlist ► VISIT MY OFFICIAL SITE FOR USEFUL RESOURCES https://www.filipdelac.com ► WANT TO LEARN SOMETHING NEW? https://www.udemy.com/user/delacio/ ► RECOMMENDED VIDEOS: Transcribe Audio Recording to Text FOR FREE!: https://youtu.be/ioZe0xVWTNE Movie Maker Tutorial for Beginners: https://youtu.be/aoc5ppLhPbE ► HELP FILIP CREATE MORE FREE VIDEOS ON YOUTUBE: https://paypal.me/filipdelac https://www.patreon.com/filipdelac ► SHARE THIS VIDEO: https://youtu.be/KZiwHzmrcME ► LET'S CONNECT: Facebook: https://www.facebook.com/filipdelac2 Twitter: https://twitter.com/FilipDelac Project Resources: http://www.mediafire.com/download/b2tmgbnppklc80k/Remove_bullets_from_unordered_list.7z Tools: Brackets, FREE code editor http://brackets.io/ Emmet, super speed coding addon http://emmet.io/ Beautify, turning your ugly code into beautiful script https://github.com/brackets-beautify/brackets-beautify Transcription: Alright guys! Let's remove some bullets from on ordered list. But first of all, let's let's check some magic of Emmet, don't worry it's very simple when you get hang of it what is this? Okay, let's, let's say we want to add 20 rows of our li tags, and we just write this: ul we want ul to have li tags 20 times and we want to have text inside this li tags to write these are awesome tagz. Are you ready for some magic? Bammm these are awesome tags and of course and this is Emmet! And guys don't skip it, don't don't don't, it's just awesome. But let's get back to our tutorial. To remove this we just add to our ul tag in our CSS file, we just add this: list style type none. Will don't have any bullets right here but we had these indentations. So, to clean these things up, let's say, let's add padding zero and the margin also zero. And that you guys we have these clean ul without any bullets inside. And this is guys in just a few minutes. Okay, stay safe, keep coding, and bye-bye.
Views: 5193 Filip Delac
CSS video tutorial - 66 - CSS list style image property vs HTML ul tag
 
03:18
CSS video tutorial - 66 - CSS list style image property vs HTML ul tag CSS list-style-image property: It is used to specify the image to be used as a bullet symbol Value: url(‘image path’); Note: image size should be 12 x 12 Example Code: Example code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Demo</title> </head> <body> <ul style="list-style-type:none; list-style-image:url('checkmark.png'); "> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html> ========================================= Follow the link for next video: CSS video tutorial - 67 - CSS list style position property vs HTML ul tag https://youtu.be/TKdQutEgnDg Follow the link for previous video: CSS video tutorial - 65 - CSS list style type property vs HTML ul tag https://youtu.be/ppS1r17756A ======= CSS Questions & Answers ============ =========================================
Views: 2701 Chidre'sTechTutorials
CSS Tutorial 11 - Styling Unordered Lists
 
09:22
In this video, we talk about how to style unordered lists using CSS, changing things like font color, font family, padding, margins, and the display settings. We also learn how to change the style of the bullet points, as well as how to make lists into navigation menus, which are more accessible to those who may be visually impaired. If you have any questions, comments, or suggestions for this video, or anything at all, please don't hesitate to ask! TechnicalCafe Blog: http://TechnicalCafe.com TechnicalCafe Twitter: http://Twitter.com/TechnicalCafe TechnicalCafe Forums: http://TechnicalCafe.net Jamie's Twitter: http://Twitter.com/Jamiemcg
Views: 20268 TechnicalCafe
CSS video tutorial - 64 - CSS list style type property vs HTML ol tag
 
08:05
CSS video tutorial - 64 - CSS list style type property vs HTML ol tag CSS list-style-type property: It is used to specify the bullet symbol to be displayed in front of list items of html ol or html ul. Values: decimal | decimal-leading-zero | upper-alpha | lower-alpha | upper-roman | lower-roman | none | disc | circle | square etc. ========================================= Follow the link for next video: CSS video tutorial - 65 - CSS list style type property vs HTML ul tag https://youtu.be/ppS1r17756A Follow the link for previous video: CSS video tutorial - 63 - CSS text shadow, CSS box shadow property https://youtu.be/1nl2V1jtme0 ======= CSS Questions & Answers ============ =========================================
Add Remove Active Class On Click - Html CSS and Javascript
 
06:14
Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: Skylike - Dawn Link: https://youtu.be/Jg9nDEtqWV0
Views: 23336 Online Tutorials
How to create CSS list styles in Urdu/Hindi Tutorial 8 of 15
 
12:16
In this video I show you how to style lists on your web page. Using the list-style properties in CSS, we turn an unordered list into an ordered list. To create the list in css two kinds of tags use ul and ol. list style css css li css list style type list style image html list style ul list style list style none css ul ul css style list li css list decoration list style type css ul li css ul style list style ol list style css ul li list css css ul list style css list style color css list style image list style color li list style css list style none bullet images style type css list style type color html ul li ........................................................................................................ style type list style image html list style style list list decoration list style ol list style list style color li list style bullet images list style html list style type list style disc list type style html li style list type image list style type image li styles html style type list style type color unordered list list property list style type html list type none html list decoration li type type style list style options html ol style html list types ............................. For more Videos Subscribe my channel:-https://www.youtube.com/channel/UCeXQ... Visit our Facebook page:-https://www.facebook.com/Jibrar/ visit our website:- http://jibraracademy.com/
Use Display Inline-Block CSS to Create a Horizontal Nav Menu
 
07:59
Use display inline-block to treat a block element as inline while still retaining abilities to affect size, margins, and padding like it is a block element.
Views: 33290 Ralph Phillips
How to attach your css stylesheet with your page | create menu with ul
 
04:30
your CSS is Discription ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } li a { display:block; text-align:center; color:white; padding: 14px 16px; text-decoration:none; background-color:ff0000; width:150; } li a:hover{ background-color:cc0000; }
Views: 17 MediaPlus HD
Bulleted List HTML, Change the color of Bullets | Quick Tutorial
 
02:25
This video is going to show you how to change the bullet color of a list using two different methods. Follow Us Facebook: http://bit.ly/2srBAX7 Twitter: http://bit.ly/2tAEvgG Instagram: http://bit.ly/2tbfnKn Discover more Tutorials on: http://www.22bulbjungle.com html bullet points, html bullet, ordered list html, css list style type, bulleted list, html ordered list, ul list style, bullet point html, html unordered list, html bullet code, bulleted list html, css li text color, royal enfield bullet color, how to change color of unordered list in html, list style bullet Subscribe to us : https://www.youtube.com/channel/UCaU1VsZaFQ1hHq8P2dGrJMw?sub_confirmation=1 CSS important Override | How to override !important https://www.youtube.com/watch?v=62IThMK9pzg CSS Font Shorthand | Combining font values into one property https://www.youtube.com/watch?v=vV-D4QUV99s CSS Font Shorthand Combining font values into one property https://www.youtube.com/watch?v=cZcqDBR5Zj4 CSS Background Image Color Overlay https://www.youtube.com/watch?v=2D62KK_WAGo Make a DIV the same Width and Height as Image https://www.youtube.com/watch?v=ksYaUXsJu_Y MARGIN VS PADDING watch here: https://www.youtube.com/watch?v=MwBqer-xRy8 Change CSS Selection Color. watch: https://www.youtube.com/watch?v=Zgj5gKxx6aY Add custom Fonts in CSS: https://www.youtube.com/watch?v=D2bO-_RX7MA CSS Placeholder Color https://www.youtube.com/watch?v=HHhC67Gtalo How to disable someone from copying texts in your website: https://www.youtube.com/watch?v=a2MS1jd9M_w How to properly add background image with CSS: https://www.youtube.com/watch?v=dfqR3sEnj6k How to center a div inside a div: https://www.youtube.com/watch?v=RCoQOS4s5ls How to create unordered list without bullets: https://www.youtube.com/watch?v=_KXobsfRlPQ
Views: 6792 garnatti one
CSS - (Part 1) Vertical Navigation Bar / List
 
09:03
Example is at http://codepen.io/zFunx/pen/wgrOYz Part 2 (Adding Sliding Animation) : https://youtu.be/CXt1yQtxo0w My website : http://zfunx.xyz/ CSS used : body,html{ padding:0; margin:0; height:100%; } .navList{ padding:0; margin:0; list-style-type:none; background-color:#eee; width:150px; height:100%; float:left; overflow:auto; } .navList li a{ text-decoration:none; color:#000; padding:8px; display:block; transition:0.3s; } .navList li a:hover{ color:#fff; background-color:#aaa; } .navList li a[href="#three"]{ color:#fff; background-color:#000; } .content{ height:100%; overflow:auto; }
HTML video tutorial - 31 - html ul tag and html li tag
 
06:13
HTML video tutorial - 31 - html ul tag and html li tag HTML ul tag for Un Ordered List: We use ul tag to create un ordered lists in html. We use li tag to add list items to ordered or un ordered list. There is one attribute with respect to ul tag, that is type. type attribute takes values like: disc, square, circle and none. ========================================= Follow the link for next video tutorial: HTML video tutorial - 32 - Nesting lists in html https://youtu.be/Q1zJ14jqCTs Follow the link for previous video tutorial: HTML video tutorial - 30 - html ol tag and html li tag https://youtu.be/InR4D-B4L8k ======= HTML Questions & Answers ======== 1. Three types of unordered list are a. rect, round, dimond b. rect, circle, disc c. square, round, disc d. square, circle, disc Answer: d =========================================
Views: 12314 Chidre'sTechTutorials
CSS Basic(5)  - Vertical and horizontal menus
 
05:01
1. customize ul and li tags using CSS for Vertical and horizontal menus 2. li {float:left;} for horizontal menu, default vertical menu 3. ul{list-style-type:none;} to remove list style 4. a{width:200px;} to define item width in the menu More about this video: http://jiansenlu.blogspot.ca/2012/04/css-menu-generators.html
Views: 2412 Jiansen Lu
Professional hover Dropdown Menu Using Pure html & Css Within 22 Minutes
 
22:15
Hi Friends, I am Jeykumar M, I am the co-founder, member of w3farmers and Web frontend / UI / UX Designer and Developer at w3farmers. w3farmers channel is giving you a videos of landing (welcome) page, website design and development, website sections like top and side navbars (fixed navbar, transparent navbar, animated navbars, responsive navbars), dropdown menu using only css, and javascript, testimonials, login pages, contact pages, blog pages design and development, image slider or slideshow or carousels, and css tips tricks and techniques, responsive web design, boostrap, font-awesome, google fonts, jquery and more stuffs.... We gives you a series of web ( Website Or Webpage ) design and development tutorials for free, landing ( Welcome ) pages design, Website ( Webpage ) Design basics has been going now, Today, i described you "How To Create Professional Dropdown Menu When Hovering Over The Button Using Pure CSS & HTML Within 22 Minutes". from this video series you can learn basic, intermediate and advanced level html, css, some css transition animation ( transition-duration, transition-delay, transition-timing-function and etc ) , button hover effects, background images using background url method, transparent backgrounds, relative and absolute positioning,floating elements in navbar menu, navbar creation, responsive design, css percentage units and pixel units, css z-index, css transform, css before and after pseudo elements, how to create dropdown-menu, and how to create caret symbol (triangle shape ), how to create a dropdown menu with caret symbol, how to join the caret symbol to dropdown menu, css visibility : hidden and visibility : visible properties, css opacity property and it's values, :hover pseudo class, border-radius properties and it's values, css border properties, css background properties and its values, css box-shadow property, css flex layout ( display:flex ) , and how to centering elements horzontally and vertically using flex layout and css transform and translate property and more stuffs... steps to do this, 1. open the texteditor as you wish ( Brackets, Visual Studio Code, Sublime Text, Atom such a popular text editors ), i am using in this video is brackets text editor. 2. first create a page with .html extension, 3. create a html elements like html, head, body, div ( .dropdown-menu ), a ( .dropdown-toggle ), ul ( .dropdown- menu ), and li tags. 4. now styling, begins, we are using internal styling ( within the style tag ). first html, body have 100% width to take the device's 100% width and height. when, give 100% to the body, the scroll in y-axis appears, because body have default margin of some pixels, so, put the margin 0 to the body element. for my compatiblity, i want to center the dorpdown menu both horizontally and vertically. so, i am using display flex, align-itemns center to vertiaclly center, justify-content:center to horizontal centering. 5. now, .dropdown-toggle styling, in here, i just put background:#ff2474 ( its a hexadecimal-code for dark pink color ), text color to #fff ( for white ), padding:10px 30px ( top bottom 10px, right left 30px ), position to relative because of hover effect ( .doprdown-toggle:before would be absolute ), border-radius:50px for rounded corners, 6..dropdown-toggle:before styling, initially, height and width to 0%, and top:50%, left:50%,transform:translate(- 50%, -50%) to cenering the within the dropdown-toggle, and .3s ( 300 milli seconds ) 7. .dropdown-menu styling, i just put ul have defaultly, some margin, padding and bullets, so, i remove margin ( margin:0 ) and bullets ( list-style-type:none ) and remove padding right and left, and give top and bottom to 10px ( padding:10px 0 ), i should be relative positioning bacause its before and after used for caret symbol so that would have absolute positioning. and dropdown menu initially, hidden with the properties visibility:hidden and opacity:0; when hovering the dropdown element, it changes to visibility:visible and opacity:1; 8. caret creation with .dropdown-menu:before and .dropdown-menu:after. first, it should be absolute positioning, left:10px, and border:10px solid transparent and border-top:0, .dropdown-menu:before, with color #fff top:-8px and .dropdown-menu:after have color that is the border color color of dropdown-menu, because after looks the border of the before element. 9. li have padding 10px, color: #343434 ( darkgrey ), a and li have common properties they are, font-size :14px and font-weight:bold, to follow us on facebook like our page, https://www.facebook.com/w3farmers https://www.facebook.com/computerteche #w3farmers_landing_pages #w3farmers_css_practices Any Queries please give it on the comment box below!
Views: 892 W3Farmers Webtuts
How to Create CSS Horizontal Drop Down Menu
 
02:50
In this tutorial we will learn to create CSS horizontal drop down menu. Don't forget to check out our site http://howtech.tv/ for more free how-to videos! http://youtube.com/ithowtovids - our feed http://www.facebook.com/howtechtv - join us on facebook https://plus.google.com/103440382717658277879 - our group in Google+ Drop down menu is a part of almost every web page today. These menus give a nice solution of choosing from the list of items to website visitors as well to Web Developers, so that they don't have to worry about the presentation, as it can be now combined with appealing effects through CSS styling. Follow this step by step easy tutorial to learn to create Horizontal drop down menu through CSS and see how to give different effects on it. Step 1 - Main Div of the Menu First of all, open up the div tag , just after the body tag, and give it an id. This is our main div which will contain all the elements. After that, open up an unordered list tag and then open up the list tag to define its members. We will insert the hyperlink tag which is called an anchor tag. Then after this, we will write the heading for the first list. As this would act as the parent category, define it as "Main Category One". After that, open up an unordered list tag again and then define the child members for the Main category, in the same manner as we did earlier. This list will be considered as the sub categories of our main menu. 'body' 'div id="global-nav"' 'ul' 'li''a href="#One"'Main Category 1'/a' 'div id="global-subnav"' 'ul' 'li''a href="#A"'Sub Category '/a''/li' 'li''a href="#B"'Sub Category '/a''/li' 'li''a href="#C"'Sub Category '/a''/li' 'li''a href="#D"'Sub Category '/a''/li' '/ul' '/div' '/li' Step 2 - Second Main Category With that done, we will follow the same pattern to make another category in our drop down menu. We will start with the (li) tag and follow exactly the same pattern as before. The Code for that would be: (li)(a href="#Two")Main Category 2(/a) (div id="global-subnav") (ul) (li)(a href="#1")Sub Category (/a)(/li) (li)(a href="#2")Sub Category (/a)(/li) (li)(a href="#3")Sub Category (/a)(/li) (li)(a href="#4")Sub Category (/a)(/li) (/ul) (/div) (/li) Step 3 - Global- Navigation Class Explained Now add the CSS Styling on the drop down menu. For that, open up the style tag beneath the HTML header and assign "text/ css" in style type. Then describe the working of the classes, starting with the very first class we used, the global- nav class. This class is responsible for the Main look of the Menu. We have set its width to 135 pixels with left as its default position along with a background color. Code for that would be: #global-nav width: 135px; float: left; background: #e8eef4; Step 4 - Anchor Class After that, define the effects of the anchor tag. In this class, we are actually describing the effect of all the anchor tags inside the "global-nav " class and specifying it a particular color, with a cursor type as pointer and setting its alignment as well. The Code is: #global-nav a color: #034af3; cursor: pointer; display: block; height: 65px; line-height: 40px; text-indent: 10px; text-decoration:none; font-weight: bold; width: 100%; Step 5 - Contents of Main Menu With that done, the effect of the Main Menu's contents is described in the global-nav ul class. The background color is specified as white smoke along with zero in padding and margins. The code for this class would be: #global-nav ul background: whitesmoke; padding: 0; margin: 0; Step 6 - Sub Navigation Class Next, we have defined the sub navigation menu class. This class will be responsible for the effect of the sub menu. We are using Grey as a background color and aligning it, with 80 pixels for the left side and minus 20 pixels for the top. Code would be: #global-subnav ul background: Grey; position: relative; left: 80px; top:-20px; Step 7 - Global --Nav Li class After that, the borders of the list elements are defined in the global --nav li class. We are setting a solid color effect of border at bottom having a width of 3 pixels. Its code would be: #global-nav li list-style: none; border-bottom: #5C87B2 solid; border-width: 3px;
HTML-Navigation List
 
11:05
how to create navigation or horizontal list nav{ display: block; } .menu ul{ list-style-type: none; padding: 0; margin: 0; overflow: hidden; background-color: #000; } .menu li{ float: left; } .menu li a{ display: block; padding: 15px 20px; line-height: 10px; color: #fff; text-decoration: none; } .menu a:hover{ color: red; text-decoration: underline; background-color:dimgray; }
Views: 236 MON MINH
Navigation Bar In Html & CSS [How-To] Navigation Bar tutorial
 
06:00
I will be showing you how to make a navigation bar in HTML & CSS. Don't forget to customize the way you want your navigation bar to look like. How to make a navigation bar html and css https://www.youtube.com/watch?v=LAyT-k8Azi4 How to make a sticky/fixed navigation https://www.youtube.com/watch?v=vgUNn0B67kc YouTube Channel https://www.youtube.com/channel/UCqYrJrUiooFj8vqsFdP86mg /*** CSS by DESIGN AND DEVELOP | https://www.youtube.com/channel/UCqYrJrUiooFj8vqsFdP86mg ***/ *{ margin: 0; } /* Navigation Bar Itself*/ nav{ text-align: center; width: 65%; margin: 0 auto; background-color: black; padding: 6px; border-radius: 0 0 50px 50px; } /* Navigation Bar List Items*/ nav li{ list-style: none; display: inline-block; font-size: 1.2em; margin: 1px 12px; } /* Navigation Bar Unordered List*/ nav ul{ padding-left: 0; } /* Navigation Bar Links */ nav a{ text-decoration: none; color: white; } /* Navigation Bar Elements with the .selected class and when you hover over the list items*/ .selected, nav a:hover{ color: #F7FE2E; } How to make a navigation bar in html | How to make a navigation bar | Navigation Bar | Website menu | How to create a navigation bar | How to create a navigation bar horizontal | Html and css tutorials
Views: 2924 Yudi
Bootstrap list groups
 
07:40
bootstrap 3 list group examples bootstrap list group item badge bootstrap list group anchor bootstrap list group item color bootstrap list-group-item css bootstrap list-group-item disabled bootstrap list group custom content Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2016/06/bootstrap-list-groups.html Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Bootstrap list groups are useful for displaying simple lists of elements, as well as complex ones with custom content. Basic list group : To create a basic list group, create an unordered list. Use .list-group class on the [ul] element and .list-group-item class on the [li] element. [ul class="list-group"] [li class="list-group-item"]India[/li] [li class="list-group-item"]USA[/li] [li class="list-group-item"]UK[/li] [/ul] List group item with a badge : To create a badge, include a [span] element with .badge class inside the [li] element. [ul class="list-group"] [li class="list-group-item"]India[/li] [li class="list-group-item"]USA[/li] [li class="list-group-item"]UK[/li] [li class="list-group-item"] Australia [span class="badge"]New[/span] [/li] [/ul] List group with hyperlinks : To create list group with hyperlinks, use [div] instead of [ul] and [a] instead of [li] [div class="list-group"] [a href="http://dell.com" class="list-group-item"]Dell[/a] [a href="http://google.com" class="list-group-item"]Google[/a] [a href="http://microsoft.com" class="list-group-item"]Microsoft[/a] [/div] On hover the cursor changes to a hand symbol and the background colour changes to grey. When you click on an item, you will be redirected to the respective URL. Styling list items : Use contextual classes to style the list items. [ul class="list-group"] [li class="list-group-item list-group-item-danger"]India[/li] [li class="list-group-item list-group-item-info"]USA[/li] [li class="list-group-item list-group-item-success"]UK[/li] [li class="list-group-item list-group-item-warning"]Australia[/li] [/ul] Highlight and disable list group items : Use .active class to highlight a list-group-item and .disabled class to disable a list item. [ul class="list-group"] [li class="list-group-item disabled"]Disabled Item[/li] [li class="list-group-item active"]Active Item[/li] [li class="list-group-item"]Other Item 1[/li] [li class="list-group-item"]Other Item 2[/li] [/ul] List group custom content : List groups can contain your own custom content. Nearly any HTML can be used. [div class="list-group"] [a href="#" class="list-group-item"] [h4 class="list-group-item-heading"]List Group Item 1 Heading[/h4] [p class="list-group-item-text"]List Group Item 1 Text[/p] [/a] [a href="#" class="list-group-item"] [h4 class="list-group-item-heading"]List Group Item 2 Heading[/h4] [p class="list-group-item-text"]List Group Item 2 Text[/p] [/a] [a href="#" class="list-group-item"] [h4 class="list-group-item-heading"]List Group Item 3 Heading[/h4] [p class="list-group-item-text"]List Group Item 3 Text[/p] [/a] [/div]
Views: 72730 kudvenkat
How to Remove Indents on Bullets in CSS : HTML, CSS & More
 
02:50
Subscribe Now: http://www.youtube.com/subscription_center?add_user=ehowtech Watch More: http://www.youtube.com/ehowtech Removing indents on bullets in CSS is something that you can do by first opening up your document in a text editor. Remove indents on bullets in CSS with help from a self-taught web developer with skills in PHP, JQuery, Ajax, HTML and CSS in this free video clip. Expert: Christina Chiu Filmmaker: Victor Varnado Series Description: Computer programming involves a lot more than just basic HTML - it also involves languages like CSS or JQuery. Get tips on HTML, CSS and more with help from a self-taught web developer with skills in PHP, JQuery, Ajax, HTML and CSS in this free video series.
Views: 6148 eHowTech
2018 Part-5  Menu for Beginners | Padding | margin -DigitalWomaniya
 
09:48
Menu For Beginners In this menu used ul / ol /li /a In Menu Css Used: List-style-type: Text-decoration: Padding: Font-weight: Difference between padding and margin List-style-type:none; { Remove the unorderlist} Text-decoration:none;{Remove underline from text} Padding:{ Space between in the box } { top/right/bottom/left} Font-weight:bold;{ text in BOLD } like simple in word file B,I,U Hover : when mouse go to link : change the color/background-color Any query : [email protected] https://www.facebook.com/womaniyaShivani/
Views: 109 Digital Womaniya
Bootstrap blockquotes and lists
 
05:39
bootstrap blockquote example bootstrap blockquote right bootstrap ordered list example bootstrap unordered list example bootstrap unordered list inline bootstrap unordered list horizontal bootstrap unordered list no bullets bootstrap ul list without bullets bootstrap ordered list side by side bootstrap dl list example bootstrap definition list horizontal bootstrap horizontal description list bootstrap horizontal definition list bootstrap 3 definition list Bootstrap blockquotes and lists In this video we will discuss working with blockquotes and lists. Blockquotes are useful for quoting blocks of content from another source within your web page 1. [blockquote] element can be used with any HTML that you want as the quote. For simple text quotes bootstrap recomends using a [p] element. 2. For identifying the source of the quote, use the [footer] element. Wrap the name of the source work using [cite] element. On hover the title attribute value will be displayed as a tooltip. 3. To right-align the blockquote content, use .blockquote-reverse class on the [blockquote] element [blockquote class="blockquote-reverse"] [p]By failing to prepare, you are preparing to fail[/p] [footer] This famous quote is by [cite title="Benjamin Franklin"] Benjamin Franklin [/cite] [/footer] [/blockquote] Bootstrap Ordered List : For an Ordered List use the [ol] element [ol] [li]India[/li] [li]USA[/li] [li]UK[/li] [li]Australia[/li] [li]Canada[/li] [/ol] Bootstrap Unordered List : For an Unordered List use the [ul] element [ul] [li]India[/li] [li]USA[/li] [li]UK[/li] [li]Australia[/li] [li]Canada[/li] [/ul] To place all list items of ordered or unordered list on a single line use the .list-inline class [ul class="list-inline"] [li]India[/li] [li]USA[/li] [li]UK[/li] [li]Australia[/li] [li]Canada[/li] [/ul] To remove the default list-style of ordered and unordered lists use the .list-unstyled class [ul class="list-unstyled"] [li] India [ul class="list-unstyled"] [li]Andhra Pradesh[/li] [li]Tamil Nadu[/li] [li]Kerala[/li] [/ul] [/li] [li] USA [ul] [li]Alabama[/li] [li]Alaska[/li] [li]Iowa[/li] [/ul] [/li] [li]UK[/li] [li]Australia[/li] [li]Canada[/li] [/ul] For creating a list of terms with their associated descriptions use [dl] [dt] and [dd] tags [dl] [dt]ASP.NET[/dt] [dd]Framework for developing web applications[/dd] [dt]jQuery[/dt] [dd]JavaScript library that works across a multitude of browsers[/dd] [dt]SQL[/dt] [dd]The standard language for relational database management systems[/dd] [/dl] To make terms and descriptions in [dl] line up side-by-side use .dl-horizontal class [dl class="dl-horizontal"] [dt]ASP.NET[/dt] [dd]Framework for developing web applications[/dd] [dt]jQuery[/dt] [dd]JavaScript library that works across a multitude of browsers[/dd] [dt]SQL[/dt] [dd]The standard language for relational database management systems[/dd] [/dl] Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2016/06/bootstrap-blockquotes-and-lists.html Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1
Views: 69070 kudvenkat
How to make a navigation bar! css/html!
 
13:57
Hello, thank you so much for watching! Feel free to like, comment and subscribe! My social media can be found in the nav bar https://codepen.io/Juptian/pen/vZQZNM Code: css: body { text-align: center; } h1 { font-weight: bold; } nav ul { list-style-type: none; border: 5px solid #111111; border-radius: 20px; font-family: none; padding: 16px; background: #4e6ece; } nav ul li { display: inline; border-right: 2px solid #212121; padding-right: 8px; padding-left: 8px; } nav ul li:last-child { border-right: none; } nav ul li a { text-decoration: none; color: #ce4eb2; }
Views: 26 Juptian Games
CSS List Style Image
 
02:57
Check out my new site at http://www.youtubemuse.com/ In this screencast, we are going to talk about setting list style image. In addition to the list style types CSS provides, you can use your own image as the bullet points.
Views: 5814 Jeffery Hirono
CSS & jQuery Tutorial: Popup Bubble Tooltip - Coda Style
 
12:20
A nice jQuery Bubble Tooltip - Coda Style ( http://www.panic.com/coda ). Easy to make and to implement to your own html elements. It is also compatible with Internet Explorer but with some modifications. CODES: ____________________________ Import jQuery Library (url): _______________ http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js Javascript (jQuery): _______________ $(document).ready(function(){ $(".menu a").hover(function() { $(this).next("em").animate({opacity: "show", top: "-75"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast"); }); }); CSS: ______________ .menu { margin: 100px; list-style: none; } .menu li { padding: 0; margin: 0 1px; float: left; position: relative; text-align: center; } .menu a { padding: 10px; display: block; color: #222; width: 150px; text-decoration: none; background: #eaf2f5; -webkit-border-radius: 5px; border:1px solid #09C; } .menu li em { background: url(images/hover.png) no-repeat; width: 180px; height: 45px; position: absolute; top: -85px; left: -15px; text-align: left; padding: 20px; font:12px helvetica, arial, sans-serif; display: none; }
Views: 34526 WebScripts
Javascript - How To Add Edit Remove Selected LI From UL List Using JS [ with source code ]
 
31:45
insert update delete selected LI from UL in javascript Source code: https://1bestcsharp.blogspot.com/2017/12/javascript-add-edit-delete-li.html Javascript Tutorials For Beginners ➜ http://bit.ly/2k7NMWq Javascript Course For Beginners ➜ http://bit.ly/2IvBCFC visit our blog https://1bestcsharp.blogspot.com/ subscribe: http://goo.gl/nRjPKk In This Javascript Tutorial we will See How To : - Insert A New LI To A UL . - Display The Selected LI From The List To Input Text . - Update The Selected LI From The List Using Input Text . - Remove The Selected LI From The List . On 3 Button Click Event In JS Programming Language And Netbeans Editor . More Javascript Tutorials : get maximum value from html table https://www.youtube.com/watch?v=KU_fUfdIhFM get minimum value from html table https://youtu.be/KU_fUfdIhFM get sum value https://youtu.be/2p39swI3_Rs get avg value of table column https://youtu.be/zeJ4lKgUqig How to get value of selected radio button https://www.youtube.com/watch?v=uzwUBDQfpkU How to append Value to an array https://www.youtube.com/watch?v=KVdY8n6lCy4 javascript images slider 1 https://www.youtube.com/watch?v=QkcemPr4xaU Convert String To Number https://www.youtube.com/watch?v=JMfZG7o_QtE JavaScript Show And Hide Input Password Text https://www.youtube.com/watch?v=Cmo9sjx5eFE change div class name in js https://www.youtube.com/watch?v=X_SDJxKI6HE using checkbox with js https://www.youtube.com/watch?v=yFYEHSh2iTQ get And Set Value To An Input https://www.youtube.com/watch?v=AfRHl3soLDg Search Element In Array https://www.youtube.com/watch?v=LIsjSMr9bJU Add Search Remove Array Element https://www.youtube.com/watch?v=ppLbuVWf6zM Add HTML Table Row https://www.youtube.com/watch?v=FVSfp8yT8lA Get Mouse Position https://www.youtube.com/watch?v=LVi5DN2vtdo Populate UL with LI from array: https://www.youtube.com/watch?v=72AAyx3wFxQ Display Selected LI Text To Input Text: https://www.youtube.com/watch?v=d3ZqI4B8Erc get selected LI index: https://www.youtube.com/watch?v=oKgUp-KBoHU delete selected li: https://www.youtube.com/watch?v=ZG_5a6j-WUQ edit selected LI: https://www.youtube.com/watch?v=ebGNDmfuGCA Insert A New LI To UL List In Javascript : https://youtu.be/JBdyASuhq1c Reverse List Elements: https://youtu.be/EahwqZ5Rf7c Using Range Input: https://www.youtube.com/watch?v=PYbQ8GgKXRw Move HTML Table Selected Row Up And Down: https://www.youtube.com/watch?v=srv5p791Am8 Add Remove Toggle Class: https://www.youtube.com/watch?v=quAfHMl65EE Transfer Rows Between Two HTML Table: https://www.youtube.com/watch?v=E-pLVUjwWSc share this video: https://youtu.be/GBDMr24O_rs
Views: 13237 1BestCsharp blog
Styling the Pages with CSS
 
01:54
/*this adjust the email capture size on mobile only*/ @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #input_3_5 { width: 250px; height: 29px; } #gform_wrapper_3 .button { margin-left: -16px; margin-top: 22px; } } /*this stylizes the ingredients popup button*/ #ingredients { -moz-box-shadow:inset 0px 1px 0px 0px #cf866c; -webkit-box-shadow:inset 0px 1px 0px 0px #cf866c; box-shadow:inset 0px 1px 0px 0px #cf866c; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffb20d), color-stop(1, #bc3315)); background:-moz-linear-gradient(top, #ffb20d 5%, #bc3315 100%); background:-webkit-linear-gradient(top, #ffb20d 5%, #bc3315 100%); background:-o-linear-gradient(top, #ffb20d 5%, #bc3315 100%); background:-ms-linear-gradient(top, #ffb20d 5%, #bc3315 100%); background:linear-gradient(to bottom, #ffb20d 5%, #bc3315 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb20d', endColorstr='#bc3315',GradientType=0); background-color:#ffb20d; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; border:1px solid #942911; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:13px; font-weight:bold; padding:6px 7px; text-decoration:none; text-shadow:0px 1px 0px #854629; } /*this stylizes and positions the existing submit button of the form*/ #gform_wrapper_3 .button { position: absolute; margin-left: 600px; margin-top: -29px; -moz-box-shadow:inset 0px 1px 0px 0px #a4e271; -webkit-box-shadow:inset 0px 1px 0px 0px #a4e271; box-shadow:inset 0px 1px 0px 0px #a4e271; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809)); background:-moz-linear-gradient(top, #89c403 5%, #77a809 100%); background:-webkit-linear-gradient(top, #89c403 5%, #77a809 100%); background:-o-linear-gradient(top, #89c403 5%, #77a809 100%); background:-ms-linear-gradient(top, #89c403 5%, #77a809 100%); background:linear-gradient(to bottom, #89c403 5%, #77a809 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809',GradientType=0); background-color:#89c403; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border:1px solid #74b807; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:15px; font-weight:bold; padding:5px 7px; text-decoration:none; text-shadow:0px 1px 0px #528009; } /*this hides the default submit button*/ #gform_wrapper_3 .gform_footer.top_label { display: none; } /*this adjust the width and height of the email capture textbox*/ #input_3_5 { width: 600px; height: 29px; } /*this hides the main navigation/menu and the footer*/ #main-footer, #main-header { display: none; } /*this adjusts the position and size of page container after removing the nav*/ #page-container { width: 120%; right: 20%; } /*This changes the background based on the url*/ #main-content, #page-container { background-image: url('https://www.sauceodyssey.com/wp-content/uploads/2019/05/woodenbackground2-2.jpg'); } /*This removes list formatting/bugs from the email capture form*/ body .gform_wrapper form .gform_body ul, body .gform_wrapper form .gform_body ul li { list-style-type: none !important; list-style-image: none !important; list-style: none !important; }
CSS Course - How to Design a Navigation Bar in CSS - Video 16 - (Urdu/Hindi)
 
14:29
Code without angle brackets because YouTube don't allow them. !doctype html html head meta charset="utf-8" title CSS Tutorials /title style body{ margin: 0px; } nav{ background-color: white; height: 70px; width: 100%; box-shadow: 1px 2px 3px #BBBBBB; } nav ul{ margin: 0px; } nav ul li{ float: left; list-style-type: none; padding-top: 20px; } nav ul li a{ color:black; padding: 33px; text-decoration: none; } .active{ background-color: #525252; color: white; } nav ul li a:hover{ background-color: #525252; color: white; } .left{ float: left; } .right{ float: right; } /style /head body nav div class="left" ul li a href="#" class="active" Home /a /li li a href="#" About Us /a /li li a href="#" Blogs /a /li li a href="#" Contact Us /a /li /ul /div div class="right" ul li a href="#" Sign Up /a /li li a href="#" Login /a /li /ul /div /nav /body /html ///////////////////////////////////////////////////////////////////////////////// Hai! Dear viewers, If you have any questions then you can write them below in the comments I will response ASAP. //////////////////////////////////////////////////////////////////////////////// CSS Course - History & Introduction - Part 1 (Urdu/Hindi) https://youtu.be/FxaYwmghW4Y CSS Course - How to include CSS in your HTML Page - Part 2 (Urdu/Hindi) https://youtu.be/N6RB-Zfdstg CSS Course - Width, Height & Background Color - Part 3 (Urdu/Hindi) https://youtu.be/GBJyaWZhb2Q CSS Course - Classes & Id's - Part 4 (Urdu/Hindi) https://youtu.be/IafSTpS0Ji4 CSS Course - Border Properties || Width || Height || Style || Shorthand - Part 5 (Urdu/Hindi) https://youtu.be/mO3SIgabeVo CSS Course - Border Radius Property - Part 6 (Urdu/Hindi) https://youtu.be/RoL81LJyGKE CSS Course - Box Shadow Property - Part 7 (Urdu/Hindi) https://youtu.be/fvCc5tZzuiA CSS Course - Float Property - Part 8 (Urdu/Hindi) https://youtu.be/RVVDNPGl_YE CSS Course - Margin & Padding - Part 9 - (Urdu/Hindi) https://youtu.be/HvYvNWTLXfA CSS Course - Font Properties || font family || font weight - Part 10 - (Urdu/Hindi) https://youtu.be/OZuhmh-VWrM CSS Course - Text Shadow,text transformation, text indent, text decoration - Video 11 - (Urdu/Hindi) https://youtu.be/7JYBwg8x490 CSS Course - Positions Fixed,Static,Sticky,Absolute & Relative - Video 12 - (Urdu/Hindi) https://youtu.be/P08RQXMbm2U CSS Course - Link Visited Hover Active Pseudo Classes in CSS - Video 13 - (Urdu/Hindi) https://youtu.be/XvG1KZVTGKo CSS Course - First Line, First Letter, Selection Pseudo Classes - Video 14 - (Urdu/Hindi) https://youtu.be/7aF2nK26Kqc #css3 #webdesigning If you loved the video then like, share & don't forget to subscribe....! .................................................................................................... Facebook Page: https://www.facebook.com/mam.agift1/ Facebook ID: https://www.facebook.com/abdullah.agift Twitter: https://twitter.com/aagiftforall1
How to make an awesome NavBar ?
 
06:31
In this tutorial you are going to learn a good things.If you have some knowledge in html and css then it is the best tutorial for you to learn how to make a Navigration Bar of a web site. It is the CSS codes *{margin:0;padding:0;} .container{width:960px;margin:0 auto;} .menu{} .menu ul{margin:0;padding:0;float:left;background:#E8BCBC;} .menu ul li{list-style:none;float:left;display:inline-block;padding:15px 20px;} .menu ul li a{text-decoration:none;text-align:center;color:#E65E5E;font-size:25px;} .menu ul li:hover{background:#ECAEAE;}
Views: 1251 Jens Kettler
Responsive Sidebar Navigation Menu Using HTML, CSS and JavaScript
 
15:04
Responsive Sidebar Navigation Menu Using HTML, CSS and JavaScript In this tutorial, we are creating a Responsive sidebar with HTML, CSS, and JavaScript. In this video, i will demonstrate how to create slide in sidebar using CSS and JavaScript. Along with this we also create sliding animation for the toggle menu button. We will add first name of the website and then as a navigation item we will add home, blog, features, Pricing and contact us section. We create hover effect on the Navigation item. Using font awesome website we use icons in the project. Learn More From Our Website:- www.dailywebtuition.com Attribution Icon made by monkik from www.flaticon.com Music: https://www.bensound.com Photos: https://www.pexels.com Hey Everyone welcome back to daily tuition. in this tutorial I will show you how to create sidebar with animated hamburger menu. in this sidebar we will add website name navigation item and social links. along with that we will animate hamburger menu. so when you click on the hamburger menu you will see this sidebar. You can see this site is responsive for mobile devices also. we are using CSS for styling HTML and also use JavaScript to add click event to the hamburger menu. so before we start this video make sure you press the subscribe button and also press the bell icon to get notified of my every new video and also like this video if you find anything useful. so before we getting late let's get started. so first you need to open empty folder in the editor and create two file in that folder index.htm and style.css. in index.html file create simple HTML5 snippet and specify title text. I will spit this window so you will know what is going on. after that we link two files. first one is font awesome CSS file to use icon in the project and second is style.css In the body tag create a container class and in that class put the navigation with navbar class and specify ID nav ID. In the navigation create type button and specify a class toggle collapse and ID toggle button in this button create a span tag and specify class toggle icon using this class we create hamburger menu. Now we will create navigation. so we will add in order list tag with site nav class and here we put a li tag with nav item class. in the li tag we insert and anchor tag and specify site name class. so here we specify website name. after that we create second navigation item with item class and insert anchor tag with nav link class. So here we First specify first navigation item Home. after that we insert another li tag with nav item class and create anchor tag with nav link class specify blog text. I will fast forward this video and create features pricing and contact us navigation item. I will use same classes to create this navigation items. On the last navigation item we will insert social icon font awesome website. So I will add some social icon here Like Facebook Twitter Instagram and YouTube. how the time in style this HTML. in style.css select body tag and specify margin 0% and padding 0% then I will apply Font family and specify background colour two body of the document. then I will create navbar class and specify position absolute right 0% width 260 pixel you are free to choose your own navigation width. specify height 100% background colour black text align centre and transition property 0.8s then I will select side nav class which is child of navbar class specify list style type none padding 0 and margin 0. Create an nav item class specify display flex. then select the child element of navigation item navigation link and specific text decoration none colour font size 1.1em padding 1em and flex 1 property to fill the Remaining space of navigation item. after that create hover effect on a navigation link specify background and colour property. Now now we will align toggle button at the right place. to create toggle collapse class specified float property left margin left -3.3em margin top. 5em content blank outline inherit border 0px background transfer. now we will create toggle button. so using toggle icon class I will create toggle button. In the previous video I showed you how to create toggle icon with animation. we are creating the same code here also so you can skip this section review if you already watch the previous video if not then you can watch this video from the top right corner of the screen. in the toggle icon code I just made some changes And specify different width for horizontal bars of toggle icon. After creating the toggle icon we select site name class and specify text decoration none padding 1.3em font size 2em and color whitesmoke. Select the social icon using nav item last child i tag and specify padding .5em. Then create remove hover effect from the social icons. And specify Background colour black and colour white. if you have any question then comment us.
Views: 7448 Daily Tuition
Transparent Navigation Bar in Notepad With Coding II 100% working II Menu Bar in HTML & CSS II
 
03:16
In this tutorial I will show you that how can you create a simple transparent navigation bar with Html & Css's simple coding. You can copy and paste it from here, if you're having any problem while creating the Menu bar. . 1) Html & Css Tutorial 2) Notepad Features 3) Creating Website 4) Adding Background image to a website 5) Do subscribe ;) . Subscribe us here: https://www.youtube.com/channel/UCT1MxL-8X4E2q0BHYyZjBbg . Coding is below : press shift+arrow to select and ctrl+c then ctrl+v into your notepad: body {background-image: url("2.jpg"); background-size:cover;} ul {margin:0px; padding:0px; list-style:none;} ul li {float:left; width:200px; height:40px; background-color:black; opacity:.8; line-height:40px; text-align: center; font-size:20px; margin-right:2px;} ul li a {text-decoration:none; color:white; display:block;} ul li a:hover {background-color:green;} ul li ul li {display:none;} ul li:hover ul li {display:block;} Hope this video has helped you :)
Views: 67 Kaveri Kalkal
Spinning text (HOVER EFFECT) ! pure CSS. [ CSS TRICKS ]
 
04:24
spinning text hover effect made by pure css. subscribe for more css tricks and tips. i can't write the HTML code here because youtube doesn't allow to write angle brackets in description css-------------------- BODY{ background: #111; margin: 0; padding: 0; } UL{ padding:25px 50px 25px 50px; margin: 0; border:10px solid #21c2d4; display: inline-block; position: absolute; top:50%; left:50%; transform: translateY(-50%) translateX(-50%); } ul li{ list-style: none; color: #21c2d4; float: left; font-size: 5em; font-family: 'arial'; transition: .9s; } ul:hover li{ transform: rotateY(360deg); } ul:hover li:nth-child(1){ transition-delay: .2s; } ul:hover li:nth-child(2){ transition-delay: .4s; } ul:hover li:nth-child(3){ transition-delay: .6s; } ul:hover li:nth-child(4){ transition-delay: .8s; }
Views: 48 Faiz Bin Basheer
How to make a drop down menu in blogger  HTML+CSS
 
11:00
Friends thesr are few editing you need to know before putting this HTML to your Blogger :- 1 -( ' ') YOU NEED TO PUT THE URL WHERE YOU WANT TO SEND THE CLICK TO THAT BUTTON 2 -(Menu-1/2...) IS THE MENUE HEADING VISIBLE TO YOUR VIEWERS BEFORE SCRALLING TO THE MANUE BAR. 3 -(Submenu-1/2...)IS THE MENUE DROPDOWN VISIBLE TO THE VIEWERS AFTER SCRALLING TO THE MENUEBAR. THATS ALL NOW SEE THE HTML ============================================ !-- start navmenu -- ul id='cssnav' li class="active"a href='http://wikidg.blogspot.com/'Home/a/li li class="sub"a href=''Menu-1/a ul lia href=''Submenu-1/a/li lia href=''Submenu-2/a/li lia href=''Submenu-3/a/li /ul /li lia href=''Menu-2/a ul lia href=''Submenu-1/a/li lia href=''Submenu-2/a/li lia href=''Submenu-3/a/li lia href=''Submenu-4/a/li /ul /li lia href=''Menu-4/a ul lia href=''Submenu-1/a/li lia href=''Submenu-2/a/li lia href=''Submenu-3/a/li lia href=''Submenu-4/a/li lia href=''Submenu-5/a/li lia href=''Submenu-6/a/li /ul/li lia href=''Menu-5/a ul lia href=''Submenu-1/a/li lia href=''Submenu-2/a/li lia href=''Submenu-3/a/li /ul /li lia href=''Menu-6/a /li/ul !-- end navmenu -- ============================================ Now the CSS ++++++++++++++++++++++++++++++++++++++++++++ /* ----- CSS Nav Menu Styling ----- */ #cssnav { margin: 0px 0 0 -10px; padding: 0px 0px 0px 0px; width: 1050px; /* Set your width to fit your blog */ font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */ color: $(tabs.text.color); /* Template Designer - Change Font Size */ } #cssnav ul { background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; /* Template Designer - Change Menu Background */ height: 20px; /* Change Height of Menu */ list-style: none; margin: 0px; padding: 0px; } #cssnav li { float: left; padding: 0px; } #cssnav li a { background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; /* Template Designer - Change Menu Background */ display: block; margin: 0px; font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */ text-decoration: none; } #cssnav ul li a { color: $(tabs.text.color); /* Template Designer - Change Font Color */ } #cssnav ul ul a { color: $(tabs.text.color); /* Template Designer - Change Color */ } #cssnav li a:hover, #cssnav ul li:hover { color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */ background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */ text-decoration: none; } #cssnav li ul { background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; /* Template Designer - Change Menu Background */ display: none; height: auto; padding: 0px; margin: 0px; position: absolute; width: 200px; /* Change Width Of DropDown Menu */ z-index:9999; } #cssnav li:hover ul { display: block; } #cssnav li li { background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; /* Template Designer - Change Background */ display: block; float: none; margin: 0px; padding: 0px; width: 200px; /* Change Width Of DropDown Menu */ } #cssnav li:hover li a { background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */ } #cssnav li ul a { display: block; height: auto; margin: 0px; padding: 10px; text-align: left; } #cssnav li ul a:hover, #cssnav li ul li:hover a { color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */ background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */ border: 0px; text-decoration: none; } #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} #blog-pager {background: none;}
Views: 1714 wikidg
CSS Tutorial - Two Column Layout - Floating.
 
19:23
זה החלק השני של הסרטון תהנו ושיהיה לכם בהצלחה Style.css: body { font-family: Arial, sans-serif; background-color: #738294; } #container { width: 900px; padding: 30px; margin: 0 auto; background-color: #FFF; border: 2px solid #80aab7 } #header {} #nav { margin: 0; padding: 0; background-color: yellow; } #nav li { list-style: none; float: left; padding: 0 15px 0 0; } #nav li a:link, #nav li a:visited { text-decoration: none; } #body {} #body p { line-height: 1.6em; } .main { width: 600px; float: left; } .main-inner { padding: 0 60px 0 0; } .side { width: 300px; float: left; } #footer { background-color: #4D5B6C; color: #FFF; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* @end */
Views: 660 Ameer Sobihh
How to make Drop Down Nav Bar
 
07:08
After watching this video you can learn how to make a drop down nav bar .Because a dropdown navbar is very much essential for every web site .So let's have a look and follow this tutorials .... *{margin:0;padding:0;} .container{width:960px;margin:0 auto;} .menu ul{margin:0;padding:0;float:left;} .menu ul li{float:left;list-style:none;position:relative;} .menu ul li a{text-decoration:none;display:block;padding:10px 10px;text-align:center;width:150px;height:50px;background:#77A5CE;font-size:25px} .menu ul li a:hover{background:#31487D;color:#ECAEAC} .menu ul ul{visibility:hidden;position:absolute;} .menu ul li:hover ul{visibility:visible;}
Views: 702 Jens Kettler
Designing Appealing Drop Down Navigation Bars - Example 1
 
45:45
Creating Appealing Drop Down Navigation Bars - Example 1: Horizontal Navigation Bar Drop Down Navigation Bar Drop Down Menu Bar Fixed Navigation Bar Opaque Navigation Bar Example Code: must set background image then use code <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Third Navigation Bar</title> <style type="text/css"> body { border:0px solid red; margin:0px; background-image:url('fort_bg.jpg'); background-size:cover; } div#nav > ul#mainMenu { border:0px solid green; margin-top:0px; margin-bottom:0px; list-style-type:none; padding-left:0px; background-color:black; position:fixed; width:100%; } div#nav > ul#mainMenu > li { float:left; } div#nav > ul#mainMenu::after { content:" "; display:block; clear:left; height:1px; background-color:gray; } div#nav > ul#mainMenu > li:first-child { color:white; font-family:'monotype corsiva'; font-size:16pt; padding-right:15px; line-height:30px; border-right:1px solid gray; } div#nav > ul#mainMenu > li > a { text-decoration:none; color:white; background-color:black; width:100px; height:30px; display:inline-block; border-right:1px solid gray; text-align:center; line-height:30px; } div#nav > ul#mainMenu > li > ul.subMenu { list-style-type:none; padding-left:0px; height:0px; overflow:hidden; position:absolute; box-shadow:0px 0px 5px white; } div#nav > ul#mainMenu > li > ul.subMenu > li > a { text-decoration:none; color:white; background-color:rgba(0,0,0,0.5); width:100px; height:30px; display:block; border-top:1px solid gray; line-height:30px; padding-left:5px; } div#nav > ul#mainMenu > li:hover > ul.subMenu { height:90px; -webkit-animation: myAnimation 1s; } div#nav > ul#mainMenu > li > a:hover { background-color:orange; color:black; } div#nav > ul#mainMenu > li > ul.subMenu > li > a:hover { background-color:orange; color:black; } @-webkit-keyframes myAnimation { from {height:0px;} to{height:90px;} } </style> </head> <body> <div id="nav"> <ul id="mainMenu"> <li>Manjunath Chidre</li> <li><a href="#">WEB</a> <ul class="subMenu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </li> <li><a href="#">GAME</a> <ul class="subMenu"> <li><a href="#">C#</a></li> <li><a href="#">Maya</a></li> <li><a href="#">Unity</a></li> </ul> </li> <li><a href="#">GRAPHICS</a> <ul class="subMenu"> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Indesign</a></li> </ul> </li> </ul> </div> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> <br/><br/><br/> </body> </html> ======================================================== Follow the link for next video: https://youtu.be/t0U3LewjhVw Follow the link for previous video: https://youtu.be/edt4QC0qTcc ========================================================
Unordered lists with images - Dreamweaver
 
07:17
Host Unlimited Websites For $3.88 ! http://bit.ly/Powweb-Hosting-Sale Unlimited Hosting, Free Domain, MySQL, PHP, CGI, SSL, FTP, Stats, $150 google adwords, E-Commerce Included, Dreamweaver Ready, 30 Day money back guarantee This Dreamweaver Tutorial by James from http://www.dreamweavertutorial.co.uk covers basic list image replacement in a CSS or HTML Unordered List. This is the basic way of Replacing the default Unordered List Bullets. It works best for replacing the list bullets with images if the images are smaller than the text. The images can then be aligned into the center and with just a little padding, we can achieve a great looking bulleted unordered list. We will remove the default styles of the list including the default unordered list images and then replace with our own css unordered list images. There is also a more advanced tutorial where I cover some of the pitfalls you may encounter when dealing with irregular bullet images such as those with drop shadows. The advance tutorial goes more indepth and cane be found here with a FREE DOWNLOAD of 6 Bullet Images to practice with: http://www.youtube.com/watch?v=ARbejuTGKQo My Dreamweaver Tutorial Website: http://www.dreamweavertutorial.co.uk Follow me on Twitter: http://www.twitter.com/dreamweaverman My RSS Feed For Dreamweaver Tutorial updates: http://www.dreamweavertutorial.co.uk/feed.xml
Views: 10341 DreamWeaverTutorial
How to Remove & Replace Bullets from an HTML List Using CSS (Tutorial)
 
13:09
HTML has two types of lists, order (OL) and unordered (UL). By default each list item as a circle placed to the left of the item. checklist-chalboardThe default bullets can be replaced with other native options or completely removed. You can even change the bullet to a custom image or icon. Get social with Love2Dev on: Facebook: https://www.facebook.com/Love2dev Twitter: https://twitter.com/ChrisLove G+: https://plus.google.com/b/110904107389779237581/?pageId=110904107389779237581 Linkedin: https://www.linkedin.com/in/love2dev Pinterest: https://www.pinterest.com/docluv/
Views: 173 Love2Dev
CSS List Styles
 
05:01
http://www.frameworktv.com | LearnToProgram is now Framework. Visit and join for free daily videos teaching digital skills like coding and design. SUBSCRIBE TO THE FRAMEWORK CHANNEL http://www.youtube.com/subscription_center?add_user=UC4msOaZNMfPwMe_ztV5jFH SUBSCRIBE TO OUR EMAIL LIST (LEARN FOR FREE!) http://www.frameworktv.com/?src=YOUTUBE VISIT US ON FACEBOOK https://www.facebook.com/frameworkTechnicallySpeaking/ FOLLOW ON TWITTER https://twitter.com/fw_social INSTAGRAM https://www.instagram.com/frameworksocial/
how to implement a Order list or Unorder list in html5
 
04:50
Unordered HTML List An unordered list starts with the ul tag. Each list item starts with the li tag. The list items will be marked with bullets (small black circles) by default: Unordered HTML List - Choose List Item Marker The CSS list-style-type property is used to define the style of the list item marker: Value Description disc Sets the list item marker to a bullet default circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked
Views: 14 future huntwebtech
Learn CSS3 in Urdu _ CSS Float & Clear | how to make navigation bar _ Lecture#20 _ Nanosoft
 
06:35
website: http://www.thenanosoft.com like my FB page: https://fb.com/932farhan follow on Twitter: https://twitter.com/932developer Instagram : https://instagram/nanosoft.official Next Lecture#21 Display Inline-Block https://youtu.be/HmpEjgWWnCc Previous Lecture#19 CSS Positioning All Properties: https://youtu.be/oj3rwSVxo8U in this course we learn three types of language for Web Designing: 1. HTML 2. CSS 3. JavaScript today we learn about CSS Float and Clear Properties . why we use float property why we use clear property how to use float and clear property why we use float and clear property why we use float & clear property how many attributes use for float property how many attributes use for clear property four types of attributes use for float property five types of attributes use for float property Attributes: ___________ Float: left right inherit none ___________ Clear: left right both inherit none ======================================== Heading !-- * How to use Float and clear property * why we use float and clear property in css3 * Types of attributes float and clear property -- ======================================== code: note : must add all tag before and after angle brackets..! !-- * float : {left, right, none, inherit} * clear : {left, right, both, inherit, none} -- !DOCTYPE html html head titleTHENANOSOFT.COM/title style img { float: left; height: 100px; padding-right:5px; } img1 { float: right; height: 100px; } p { clear: both; } ul { background-color: yellowgreen; width: auto; height:100px; } li { width: 150px; margin:5px; margin-left: 50px; margin-top: 15px; background: green; list-style-type: none; float:right; } a { display: block; color: white; text-decoration: none; } /style /head body ul lia href="#"Home/a/li lia href="#"Contact/a/li lia href="#"FAQ's/a/li /ul img src="img.jpg"/img img id="img1" src="img.jpg"/img pHi, I'm Nanosoft, Nanosoft website address is "www.thenanosoft.com" & fb address is "fb.com/nanosoft.official"brHi, I'm Nanosoft, Nanosoft website address is "www.thenanosoft.com" & fb address is "fb.com/nanosoft.official"/p /body /html========================================== #Nanosoft #932developer #FarhanEllahi Upload date: 26-05-2019 ============================== Tags: css3 float property css3 float left attribute css3 float right attribute css3 float inherit attribute css3 float none attribute css3 clear property css3 clear left attribute css3 clear right attribute css3 clear both attribute css3 clear none attribute css3 clear inherit attribute how to make navigation bar how to make navigation bar using css how to make navigation bar using css3 float property easy and simple navigation bar make in a minute how to make simple and short time navigation bar for web page learn css position in hindi learn css position in urdu learn float and clear property in hindi / urdu =========================================== Learn CSS3 in Urdu _ CSS Float & Clear | how to make navigation bar using float property _ Lecture#20 _ Nanosoft HTML Playlist Link: https://www.youtube.com/playlist?list=PLCQvila8_tWiC64EJ3979Pto2WR1Kl6GV Previous Lecture#18 CSS Overflow: https://youtu.be/P41Nmi5gH5k subscribe to my channel: https://youtube.com/nanosoftofficial E-mail: [email protected] [email protected] Nanosoft Official fb page: https://facebook.com/nanosoft.official Twitter Link: https://twitter.com/nanosoft_pk Thanks...! Regards: Farhan Ellahi
Views: 36 Nanosoft
[TUTO] Diaporama/Slide HTML CSS
 
04:14
CSS .slide { width:95%; margin: auto; overflow: hidden; } .slide ul { display: flex; padding: 0; width:400%; animation: cambio 15s infinite alternate linear; animation-timing-function: ease-in; } .slide li { width:100%; list-style: none; } .slide img { width:100%; } @keyframes cambio{ 0% { margin-left: 0;} 20% { margin-left: 0;} 25% { margin-left: -100%;} 45% { margin-left: -100%;} 50% { margin-left: -200%;} 70% { margin-left: -200%;} 75% { margin-left: -300%;} 100% { margin-left: -300%;} }
Designing Appealing Drop Down Navigation Bars - Example 2
 
47:28
Designing Appealing Drop Down Navigation Bars - Example 2 Example Code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Fourth Navigation Bar</title> <style type="text/css"> body { border:0px solid red; margin-left:0px; margin-top:0px; margin-right:0px; } div#nav > ul#mainMenu { border:0px solid green; margin-top:0px; margin-bottom:0px; list-style-type:none; padding-left:0px; background-color:gray; } div#nav > ul#mainMenu > li { float:left; position:relative; } div#nav > ul#mainMenu::after { content:" "; display:block; clear:left; height:5px; background-color:cyan; } div#nav > ul#mainMenu > li > a { text-decoration:none; color:white; width:100px; height:30px; display:inline-block; border-right:1px solid white; text-align:center; line-height:30px; } div#nav > ul#mainMenu > li:first-child { color:white; line-height:30px; border-right:1px solid white; padding-right:10px; font-family:'monotype corsiva'; font-size:16pt; } div#nav > ul#mainMenu > li > ul.subMenu { list-style-type:none; padding-left:0px; position:absolute; background-color:gray; display:none; box-shadow:0px 0px 5px black; -webkit-animation:fadeEffect1 1s; -moz-animation:fadeEffect1 1s; -ms-animation:fadeEffect1 1s; -o-animation:fadeEffect1 1s; animation:fadeEffect1 1s; } @-webkit-keyframes fadeEffect1 { from {opacity:0;} to {opacity:1;} } @keyframes fadeEffect1 { from {opacity:0;} to {opacity:1;} } div#nav > ul#mainMenu > li > ul.subMenu > li > a { text-decoration:none; width:100px; height:30px; display:inline-block; border-top:1px solid white; line-height:30px; color:white; } div#nav > ul#mainMenu > li:hover > ul.subMenu { display:block; } div#nav > ul#mainMenu > li:hover > ul.subMenu > li > ul.sSubMenu { list-style-type:none; padding-left:0px; display:none; box-shadow:0px 0px 5px black; -webkit-animation:fadeEffect2 1s; -moz-animation:fadeEffect2 1s; -ms-animation:fadeEffect2 1s; -o-animation:fadeEffect2 1s; animation:fadeEffect2 1s; } @-webkit-keyframes fadeEffect2 { from {opacity:0;} to {opacity:1;} } @keyframes fadeEffect2 { from {opacity:0;} to {opacity:1;} } div#nav > ul#mainMenu > li:hover > ul.subMenu > li { position:relative; } div#nav > ul#mainMenu > li:hover > ul.subMenu > li > ul.sSubMenu > li > a { text-decoration:none; color:white; width:100px; height:30px; display:inline-block; border-top:1px solid white; background-color:gray; } div#nav > ul#mainMenu > li:hover > ul.subMenu > li:hover > ul.sSubMenu { display:block; position:absolute; left:100px; top:0px; } </style> </head> <body> <div id="nav"> <ul id="mainMenu"> <li>Manjunath Chidre</li> <li><a href="#">WEB</a> <ul class="subMenu"> <li><a href="#">HTML</a> <ul class="sSubMenu"> <li><a href="#">Lecture1</a></li> <li><a href="#">Lecture2</a></li> <li><a href="#">Lecture3</a></li> <li><a href="#">Lecture4</a></li> <li><a href="#">Lecture5</a></li> </ul> </li> <li><a href="#">CSS</a> </li> <li><a href="#">JavaScript</a></li> </ul> </li> <li><a href="#">GAME</a> <ul class="subMenu"> <li><a href="#">C#</a> <ul class="sSubMenu"> <li><a href="#">Lecture1</a></li> <li><a href="#">Lecture2</a></li> <li><a href="#">Lecture3</a></li> <li><a href="#">Lecture4</a></li> <li><a href="#">Lecture5</a></li> </ul> </li> <li><a href="#">Maya</a></li> <li><a href="#">Unity</a></li> </ul> </li> <li><a href="#">GRAPHICS</a> <ul class="subMenu"> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Indesign</a></li> </ul> </li> </ul> </div> </body> </html> Follow the link for previous video: https://youtu.be/EBRCoyV-Nws
Html Css Of Ordered And Un-ordered List
 
11:46
Lecture 12: Web Development Tutorial Series In Hindi Html Css Of Ordered And Un-ordered List by Login tuts. Youtube : https://youtu.be/J247O6NZntE
Views: 14716 Logictuts
Html5 tutorials for beginners - 3
 
16:26
So, Today we gona learn about tables and lists and creating a header "tables" in tables tag "tr" tag (which means table row) in tr tag "th" tag (which means table heading) and "td" tag (which means table data/cell) "lists" "ul" - unordered list tag which contains "li" - list item "list-style-type" - disc, circle, square, none "ol" - ordered list tag which contains "li" - list items "type" - 1, A, a, I, i And creating a header using unorderd list
Views: 17 Tutor 4u
Designing Appealing Navigation Bars ( HTML + CSS )  - Example 1
 
22:03
Designing Appealing Navigation Bars ( HTML + CSS ) - Example 1 Code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>First navigation bar</title> <style type="text/css"> body { margin:0px; } div#nav > ul { margin:0px; padding:0px; list-style-type:none; background-color:black; } div#nav > ul > li { float:left; } div#nav > ul::after { content: " "; display:list-item; clear:left; } div#nav > ul > li > a { text-decoration:none; background-color:black; color:white; display:inline-block; height:50px; width:100px; text-align:center; line-height:50px; font-family:Tahoma; } div#nav > ul > li > a:hover { background-color:lightgray; color:black; } div#nav > ul > li:first-child { background-color:black; color:white; height:50px; line-height:50px; font-family:'Monotype Corsiva'; font-size:16pt; margin-right:10px; } </style> </head> <body> <div id="nav"> <ul> <li>Manjunath Chidre</li> <li><a href="#">Home</a></li> <li><a href="#">Qualification</a></li> <li><a href="#">Hobbies</a></li> <li><a href="#">Contact Me</a></li> </ul> </div> </body> </html> ======================================================== Follow the link for next video: https://youtu.be/edt4QC0qTcc ========================================================
Views: 1466 Chidre'sTechTutorials
CSS, ul, li y html Tutorial básico - Show time 004
 
05:56
En el siguiente videotutorial enseñamos a maquetar en HTML y CSS utilizando ul y li con los ya clásicos inline-block y list-item none.
Views: 1283 MeHaces LaTaba
HTML - CSS : Menú Float
 
02:09
Nota: Los elementos después de un elemento flotante fluirán a su alrededor. Para evitar esto, use la propiedad clear o el hack de clearfix.Nota: Los elementos después de un elemento flotante fluirán a su alrededor. Para evitar esto, use la propiedad clear o el hack de clearfix. header nav ul { font-size:20px; text-decoration: none; margin:5px; padding:0; position: relative; z-index: 1; list-style: none; } header nav li { text-decoration: none; list-style: none; float:left; }
Views: 20 fher tech
Designing Appealing Navigation Bars ( HTML + CSS )  - Example 2
 
26:28
Designing Appealing Navigation Bars ( HTML + CSS ) - Example 2 Example Code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Second Navigation Bar</title> <style type="text/css"> body { margin:0px; } div#nav > ul { margin-top:0px; margin-bottom:0px; padding-left:0px; padding-top:5px; list-style-type:none; background-color:gray; } div#nav > ul::after { content:" "; display:block; clear:left; height:5px; background-color:skyblue; } div#nav > ul > li { float:left; } div#nav > ul > li > a { text-decoration:none; background-color:lightgreen; color:white; display:inline-block; margin-left:5px; margin-right:5px; padding:5px; border-top-left-radius:5px; border-top-right-radius:5px; font-family:Verdana; text-shadow:0px 0px 5px black; } div#nav > ul > li > a:hover { background-color:skyblue; color:orange; } div#nav > ul > li:first-child { color:orange; padding-top:5px; font-family:'Monotype Corsiva'; font-size:16pt; text-shadow:0px 0px 5px black; margin-right:5px; } </style> </head> <body> <div id="nav"> <ul> <li>Manjunath Chidre</li> <li><a href="#">Home</a></li> <li><a href="#">Qualification</a></li> <li><a href="#">Hobbies</a></li> <li><a href="#">Contact Me</a></li> </ul> </div> </body> </html> ======================================================== Follow the link for next video: https://youtu.be/EBRCoyV-Nws Follow the link for previous video: https://youtu.be/ChatAAeTEm0 ========================================================