I am getting unwanted margin horizontally on my li a elements when I put a comment next to the code in the .html file. When I remove it, the margin goes away. What is going on, and is there a way I can add comments without affecting the display? Here is the code, where the comment is in the li rule:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name=”viewport” content=”width=device-width”>
<title>Test Navigation</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: white;
position: absolute;
}
li {
display: inline-block; <!--allows you to display like an inline but you can add width and height-->
float: left;
border: 1px solid red;
}
li a {
display: block;
font-size: 1.3rem;
text-align: center;
min-width:140px;
height: 50px;
line-height: 50px;
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#" >HOME</a></li>
<li>VIDEOS</li>
<li>DOCUMENTS</li>
<li>SCTE</li>
<li>TRAINING</li>
<li>EVENTS</li>
</ul>
</body>
</html>
That part of the code is CSS and here the comments must be enclosed between /* */, not <!-- -->. Currently that line is being ignored by the browser.
e.g.
display: inline-block; /* allows you to display like an inline but you can add width and height */
you are in css (style tags) so style and script is /* */ html (other html codes) is <!— —> for css on your file use /* and */
hope it helped!
display: inline-block; /* allows you to display like an inline but you can add width and height */
Related
I have begun to create a webpage using HTML and CSS. Within this webpage's HTML code is a container (class="container").
Within this container is an unordered list (class="Header-List") which I would like to arrange horizontally. However, it is currently arranged vertically and I am struggling to change this
Any help would be much appreciated
Code is below;
Please see line 13 in HTML
Please see line 16 in CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Landing Page</title>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="Header-Logo">Header Logo</div>
<div>
<ul class="Header-List">
<li>Header Link One</li>
<li>Header Link Two</li>
<li>Header Link Three</li>
</ul>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
}
.container {
background: RGB(33, 41, 49);
display: flex;
height: 180px;
}
.Header-Logo {
color: white;
font: 16px sans serif;
font-weight: bold;
margin: 4px;
flex: 1;
}
.Header-List {
color: white;
font: 12px sans serif;
list-style-type: none;
margin: 4px;
}
I have attempted to use justify-content and align-items within the .Header-List in CSS, however this hasn't helped
Add this line of code to your css
.Header-List li{
display: inline;
}
You just have to add display: flex; in your header to make it vertical
Add this:
.Header-List li {
display: flex;
}
you have to add .Header-List class to display as flex and for more designing u have to have code list items look my snapshot
.Header-List li {
display: flex;
}
I found this menu sample on W3Schools. I'm trying to create a menu bar on my MVC layout page. My was looking very sloppy and I liked how this one looks. I pasted it into my website and it works as shown, but I don't understand how it is being styled. I don't see any height or vertical alignment settings. Is it the padding style that does it? Are ul and li tags commonly used for this kind of menu? I would have used something like a span tag to do this and not ul or li tags.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li style="float:right">About</li>
</ul>
</body>
</html>
The height is being set by the default CSS styling in addition to some padding applied to the links. The default CSS height for the ul element is auto, meaning that it will fill space (i.e. be as tall) as its children.
What this means is that it is taking the font-size / line-height of the links and adding padding, which is 14px on both top and bottom. That height becomes the height of the entire list / navigation bar.
So I have a vertical navbar, and I haven't been able to center the tabs. The text is too far off to the right, and when I hover over it, the highlighted box doesn't extend to the margins. My code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Matthew H. Goodman</title>
<link href="style2home.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="nav">
<li>HOME</li>
<li>CV</li>
<li>RESEARCH</li>
<li>CONTACT</li>
</ul>
</body>
</html>
CSS:
#nav {
margin-top: 200px;
left: 0;
width: auto;
height: auto;
border-radius: 10px;
position: absolute;
background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg");
}
#nav li {
position: relative;
list-style: none;
padding: 15px;
width: auto;
}
#nav li a {
position: relative;
display: block;
text-decoration: none;
font-size: 15px;
font-weight: bold;
color: white;
text-align: center;
}
#nav li a:hover {
color: #778899;
background-color: black;
}
Browsers, and some CSS resets add default rules to elements like UL/OL to keep style-less html elements looking consistent.
ul#nav { padding-left: 0; }
I would recommend using a CSS reset (normalize, eric meyer's reset, etc) to allow you to start from scratch.
Use chrome/firefox/ie11 dev tools (F12, or right click and inspect element), go to the element in the window and hover over it to see the margin/padding rules. Scroll down the CSS rules on the right side to find where they are being applied Or click on 'computed styles' to see all the rules.
For the hover states,
you need to apply your hover to the li and handle the color separately
#nav li:hover { background-color: black; }
#nav li:hover a { color: #778899; }
You also need to add
#nav { overflow: hidden; }
to maintain your border-radius
You have some padding being applied to your #nav element you can fix it by adding:
#nav {padding:0px;}
To make the background cover the entire line add more padding to a and remove padding from the li with the current markup that will do the trick.
li {padding:0px;}
a {padding:15px;}
you can insted add a hover state to the li element but that but that will cause some problems with being able to click the a element correctly.
(HTML / CSS newbie here) It seems I cannot find the right specifier to prevent a menu bar
from wrapping around to the next line if the user narrows the browser window under a certain threshold. My working sample is this:
http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced
Below is the unmodified code from that site:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
I found some references to "white-space: nowrap;" but I couldn't get it to work (maybe because none of these other samples related to such a simple example as above). Any clues appreciated !
Best,
Chris
just add some css width to the <ul> with the fixed width of your navbar, like in this JSFIDDLE
or if the width of your navbar is fluid, use css min-width rather than width
Can somebody please explain this IE7 bug to me? It occurs in Standards and Quirks mode rendering, it does not occur in Firefox, Chrome or IE8 (though switching the rendering engine via IE8 developer tools will provoke it). Here's the HTML to reproduce the behavior:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
/* h1 { margin: 0px; } */
ul { padding: 0; margin: 0; list-style-type: none; }
ul li { float: left; width: 140px; padding: 3px; }
div { clear: left; padding: 3px; }
div, li { background-color: OrangeRed; }
/* ul { border: 1px solid blue; } */
</style>
</head>
<body>
<h1>Heading 1</h1>
<ul>
<li>bla 1</li><li>bla 2</li><li>bla 3</li>
</ul>
<div>yada</div>
</body>
</html>
This renders a floated <ul> above a <div> (supposed to be a tabbed user interface).
There's an unexplained gap between the <div> and the <ul>.
Now do one of the following:
Uncomment the CSS rule for <h1>. The gap disappears and the list is rendered tight to the <div>, but also very close to the <h1>.
Alternatively, uncomment the CSS rule for <ul>. Now a narrow blue border is rendered above the <ul>, but the gap disappears.
My questions:
How can the <h1> margin (I suppose any block level element with a defined margin will do) affect the space below the list?
Can I prevent this from happening without having to set header margins to 0 or messing with the <ul> borders (setting border-width: 0; does not work BTW)?
I suppose it is connected to the <ul> itself having no height because it has only floated children. Maybe someone with more insight into IE7 peculiarities than I have can explain what the rendering engine is doing here. Thanks!
It's the Incorrect Float Shrink-Wrap Bug. The linked article explains the issue. It also affects IE6 btw.
As Sjaak Priester, the person whom Gérard Talbot credits for the bug, reasons is that IE first renders the floated element on the same line as the previous float, then sees clear and clears it under but fails to redraw the text.
One of the common solutions is the clearfix hack as answered by someone else here, or placing an empty clearing element after the block with the floats, like a <br style="clear:left;">. Put it between the ul and the div. This way IE will force the clear before reaching the div.
I've come up with a solution that is what seems like a good compromise. It's based on the fact that setting a border on the <ul> solves the problem, while the margin-bottom of the preceding-sibling block-level element obviously causes it.
So setting a border-top: 1px solid transparent; on the <ul> displaces it by merely one pixel, which is okay with me. As BalusC rightly points out in the comments, setting margin-top: -1px; would counteract the displacement.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
ul { padding: 0; margin: 0; border-top: 1px solid transparent; list-style-type: none; }
ul li { float: left; width: 140px; background-color: red; }
div { clear: left; background-color: red; }
</style>
</head>
<body>
<h1>Heading 1</h1>
<ul>
<li>bla 1</li><li>bla 2</li><li>bla 3</li>
</ul>
<div>yada</div>
</body>
</html>
I admit that this is a bit of hackery, too; it requires remembering what the bogus border is for, which is not much better than the usual CSS tricks (but a little).
Previous version of the answer: I've fixed it like this for now (seems it works across browsers and does not require CSS hackery)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
div.t ul { padding: 0; margin: 0; list-style-type: none; }
div.t ul li { float: left; width: 140px; background-color: red; }
div.c { background-color: red; }
</style>
</head>
<body>
<h1>Heading 1</h1>
<div class="t">
<ul>
<li>bla 1</li><li>bla 2</li><li>bla 3</li>
</ul>
<br style="clear: left;">
</div>
<div class="c">yada</div>
</body>
</html>
I don't like this solution very much because the of the extra elements it requires. But I dislike dirty CSS tricks even more.
That's a really bizarre problem, IE seems to be full of these delights. I haven't found out exactly why it's deciding to render like that but with proper clearing of the floats you can usually avoid all of this trouble. The following code seems to give some consistency (in other words it's the same with or without the H1 css rule).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
h1 { margin: 0px; }
ul { padding: 0; margin: 0; list-style-type: none;}
ul li { float: left; width: 140px; padding: 3px; }
div, li { background-color: OrangeRed; }
ul { border: 1px solid blue; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* for IE/Mac */
</style>
</head>
<body>
<h1>Heading 1</h1>
<div class="clearfix">
<ul class="t">
<li>bla 1</li><li>bla 2</li><li>bla 3</li>
</ul>
</div>
<div>yada</div>
</body>