I have a navigation element in HTML, I can change it with external CSS, but I want to compare how to call it from inside the HTML,
so I got
<div id="header" class="row">
<div id="logo" class="col_12">And the winner is<span>n't...</span></div>
<div id="navigation" class="row">
<ul>
<li>Why?</li>
<li>Synopsis</li>
<li>Stills/Photos</li>
<li>Videos/clips</li>
<li>Quotes</li>
<li>Quiz</li>
</ul>
</div>
</div>
If i put on header
<link href="css/custom.css" rel="stylesheet" type="text/css" />
I can change my list to show as navigation on CSS with
#navigation ul li {
display: inline-block;
}
but now I want to compare, and call this element from inside the HTML
I use in the head, and comment CSS
<style>
#ul.navigation{display:inline-block;}
</style>
But I dont think im referencing the element right
Also how will I call this "inline-block" property for my list inside my actual html body? [inine style]
I see the CSS working fine, but I want to compare calling with style in the head and how to call it in the body,
I have seen examples for the 3 cases,
http://www.w3schools.com/css/css_howto.asp
I see it working with paragraph, but will need more clarification to know how will work with my element?
thanks
Have you tried to put like this :
<style>
#navigation ul li {
display: inline-block;
}
</style>
With #ul.navigation{display:inline-block;} you are selecting the wrong element.
ul.navigation -> your ul element with classnavigation.
# stands for ID. So #ul.navigation isn't valid.
You probably meant div#navigation or even better div#navigation ul li to select the li elements of the ul element that is the child of a div with ID "navigation".
Like this:
<style>
div#navigation ul li {
display: inline-block;
}
</style>
JSFiddle.
You can use the css in this way..
#navigation ul li
Related
friends, sorry for that irritating questions but I didnt really get the sense of some stuff here, im new to HTML/CSS...
overflow:hidden under ul{}
if I dont use it here, then the green background of the ul element doesnt appear anymore. and it is used to cut content which is bigger than its element. but in that code, which content is bigger than which element so that the background disappears? in other words why does the background of the total width of that ul-element dissappear because of these floating li-elements?
display: inline-block
I was wondering about the sense of inline-block here. the only thing I recognized is, that by using inline-block here, the vertical padding does work now. so why doesnt vertical padding work here if i use block or inline instead of that inline-block, I thought padding does work in ALL directions no matter if block inline or inline-block?
li a:hover, .dropdown:hover .dropdown-btn {
does li a: hover mean that the code is for all "a" which are directly under the parent "li" or also for the "a"s within the (which are not directly under the parent li because their parent is div)?
And what does .dropdown:hover .dropdown-btn exactly mean?
Heres the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li class="dropdown">
Dropdown
<div class="dropdown-menu">
Link 1
Link 2
Link 3
Link 4
</div>
</li>
</ul>
</body>
And the CSS file:
body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin:0;
padding: 0;
background-color: #1ebb90;
overflow: hidden;
}
li {
float: left;
}
li a, .dropdown-button {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 18px 22px;
text-decoration: none;
}
To get things started, I can help with the overflow:hidden. That is because of the css float instruction.
When you float:left or float:right a couple of elements, they will go side-by-side... but they will also lose their height.
<div id="wrap">
<div id="boxLeft">Box Left</div>
<div id="boxRight">Box Right</div>
</div>
* {position:relative;box-sizing:border-box;}
#wrap{width:70%;border:2px solid red;}
#boxLeft {background:pink;}
#boxRight{background:palegreen;}
[id^=box]{width:50%;height:40px;padding:30px;text-align:center;}
Demo 1 - Not floated
Demo 2 - Floated, height is gone
Demo 3 - Fixed height with overflow on parent
The li a:hover means any a tag under the li -- not necessarily directly under the li.
See this demo
.dropdown:hover .dropdown-btn
This means: when user hovers over an element with class="dropdown", the child element with class="dropdown-btn" gets styled.
Demo
I have a template I am modifying. It links to a stylesheet that the following code to manipulate unordered lists.
ul {
float: left;
margin: 0 40px 16px 0;
padding: 0;
list-style: none;
}
I have a separate style sheet that has the following:
.featured_list ul {float: none; list-style: circle; list-style-position: inside;}
.featured_list li {margin: 5px;}
In my HTML code I reference my class like this
<ul class="featured_list">
Can anyone please tell me why my list is still set to float left tag? Thanks for any help.
For this markup
<ul class="featured_list">
you should be selecting it as
ul.featured_list {
styles here
}
You want this:
ul.featured_list
That is a ul with the class featured_list. Your selector is for a ul contained within an element with class featured_list.
The issue is with the way you are writing your selector for unordered list as:
.featured_list ul{float:none; list-style:circle; list-style-position:inside;}
This will try to find all ul elements which are child elements of element with class featured_list. Instead of this you can directly use the class name to apply the style to the list as:
.featured_list {float:none; list-style:circle; list-style-position:inside;}
DEMO:
If you cannot change the CSS file, then you want to wrap the ul with .featured_list:
<div class="featured_list">
<ul>...</ul>
</div>
If you can change the stylesheet, then you need to change the styles to:
ul.featured_list {}
I tried my best figuring out how to target that area. I want that ul to not have any bullets or squares and also the font to be black in color.
I tried this css code but it is not working
.footer-wrapper .section-list > li > a {
color: #000;
}
For example this is my code..
<section id="footer">
<div class="footer-wrapper">
<div class="container-fluid">
<div class="line"></div>
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<p class="section-list">
<ul>
<!-- I am trying to target this part -->
</ul>
</p>
</div>
<div class="col-sm-4 text-center">
</div>
</div>
</div>
</div>
</section>
> is for direct descendants, which is probably why you're not seeing anything
the direct descendant of .section-list is a ul not a li, so the style will never be applied.
So remove the > from the css selector and you'll be on the right track
.footer-wrapper .section-list li a {
color: #000;
}
As far as removing the bullet, I recommend reading this little tutorial
http://www.webreference.com/programming/css_style2/index.html
the property you want to target is list-style-type
So, something like this would help.
.footer-wrapper .section-list li {
list-style-type:none;
}
Edit: also, keep in mind that the selector you have for color only applies to any anchors inside of a list item. If you want to make any text black, you also need to add the color to the second style that I added in my answer.
Edit 2: You have to change <p> to <div>
p elements auto close with the next blocking element. ul is a blocking element.
Which means, even though you didn't tell it to, the paragraph closes before the unordered element opens, so any style you apply to the paragraph never actually gets to any part of the list.
Changing the paragraph to a div is the best and quickest way to fix it.
You can read more about this behavior in this SO question:Paragraph ignores style because of another nested paragraph
li is not a direct descendant of .section-list. ul is the direct descendant...
.footer-wrapper .section-list > ul {
list-style: none;
}
.footer-wrapper .section-list > ul li > a {
color: #000;
}
If it's just that ul tag, why not an id?
#ul_id > li {
color: #000;
}
To remove the bullets from a list, you need to apply this CSS to ul:
.footer-wrapper .section-list > ul {
list-style-type: none;
}
Plus, > operator means "direct child", so it cannot be used to select li from your div section-list.
I have a horizontal menu demo below using HTML and CSS. As you can see I have put a right border on the li tag to separate the menu options. However I don't wish to have a border on the last menu option so I have used a span style to try and stop it showing. However it does not appear to be working for me. Can anyone help?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#menu a {
text-decoration:none;
color:black;
font-weight:bold;
}
#menu ul {
display:inline;
list-style:none;
padding:0px;
}
#menu li {
display:inline;
margin:0px;
border-right: solid black thin;
padding-right:5px;
color:black;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>About</li>
<li>Service</li>
<li>Prices</li>
<span style="border-right:none"><li>Contact Me</li></span>
</ul>
</div>
</body>
</html>
Two problems:
A) You can't wrap a li inside a span, because lists (ol) can't contain anything else than li. (First thing to learn here is to allways validate your HTML code: http://validator.w3.org/)
B) The border is on the li, you are tying to remove the border from the span. You need to remove the border from the li itself, for example like this:
<li style="border-right:none">Contact Me</li>
However it's even easier if you directly define in the stylesheet that the last element shouldn't have a border:
#menu li:last-child {
border-right: none;
}
That way you don't need to worry yourself which li is the last one, even if you ever decide reorder the items or add new ones to the end.
You have to consider the li, not the span. Try this :
<span><li style="border-right:none">Contact Me</li></span>
That's because you have a li tag inside the span!
Just remove the li tag inside the span too and it will work. Eg here: http://jsfiddle.net/8cUmx/
remove span tag and add this css
#menu li:last-child {
border-right:none;
}
I just have been looked into Google's source code and I saw that the side bar is created from the <ul> and <li> tags which the use for them is making list.
So as I said I saw their side menu bar and I tried to do the same, something like this : http://jsbin.com/oyibok/edit#javascript,html,live
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<ul>
<li> dsds </li>
<li> dsds </li>
</ul>
</body>
</html>
not quiet worked out, is there any technique that I can use to do the same as Google's did and make a list without the followed dot?
To get rid of the dots, just add the following css:
ul {
list-style: none;
}
yes - the answer is css. you should do something like
ul {
list-style-type: none; /* look mom - no dots */
}
ul li {
display:inline; /* look mom - no block display - only if you want a horizontal nav */
}
a {
text-decoration:none /* look mom - no underline */
}
also as you may notice if this is a navbar you probably would put links inside the li element with a elements
by the way - all modern nav bars are lists..
In addition to removing the bullets/dots in CSS, you may also want to reset the margins to margin: 0px if you want the top-level list items to be flush with the left side of their container.
In most browsers, just removing the bullets still leaves white space where they normally are.
A list has the bullet points by default, and also some margins and padding.
<ul>
<li>list item 1</li>
</ul>
With CSS you can change the way the list looks.
<style>
/* the styles go in between the style tag */
</style>
You can use CSS to grab each element in the list and change the properties.
For example I usually start by removing the list style, margin and padding.
ul { list-style:none; margin:0; padding:0; }
Next you can change the link or anchor tags to have a width and height and background colour.
Links by defaul are inline elements, which means they don't force a new line but flow inline.. I need them to be displayed as a block element so I can style it.
ul a:link,
ul a:visited { display:block; width:100px; height:20px; line-height:20px; background:blue; }
Now when the user hovers the mouse over the link you can change its colour again, CSS stacks so all the styles you wrote above will still apply but we can over write whatever we choose.
ul a:hover { background:orange; }
Some reading: http://www.w3schools.com/css/css_list.asp
Once you know how to select elements using CSS, you will be able to create pretty much anything.
You can give HTML elements a unique id or a class.
An id is used to select a single element, on it's own.
But if you have a lot of elements, a class is used.
"#" for Ids and a "." For classes.
Example:
<div id="something">some text wrapped in a div with an id</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<style>
#something { background:red; }
.something { background:blue; }
</style>
The startings
http://jsbin.com/oyibok/5/edit