I'm working through a PSD to HTML5/CSS3 course on Udemy, and my results aren't rendering like those shown in the screencast. I'd post comparison screenshots if SO didn't require a rep of 10, but basically the author's version renders the list items horizontally, without bullets, while mine keep rendering vertically, with bullets.
HTML:
<html>
<head>
<title>My Website</title>
<link href="styles/normalize.css" rel="stylesheet" type="text/css" media="screen">
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<header>
<div class="container clearfix">
<a href="/" title="Return to Home" id="logo">
<img src="images/logo.gif" alt="Logo">
</a>
<nav>
<ul>
<li>About
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
<!-- end container -->
</header>
</body>
</html>
CSS:
/* Navigation Styling */
nav ul {
margin: 0;
padding: 0;
float: right;
}
nav ui li {
list-style: none;
float: right;
}
header nav ul li a {
display: block;
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 20px;
border-left: solid 1px #333;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* For IE6/7 (trigger hasLayout) */
}
I've tried switching display in header nav ul li a to inline, which would seem to be more logical for a horizontal list, but that doesn't change anything. Any ideas?
You have a syntax error in your css, just replace nav ui li by nav ul li.
Related
I'm not sure why my header element with the nav won't float to the right with "float: right;"
I'm just getting started with html&CSS I was hoping someone could help make my nav bar float to the right. I've looked up a couple of videos and stack overflows but I'm not sure what's wrong I just started by looking up a few things to get started from bootstrap, W3 and some other sites.
my code below
*,
html,
body {
margin: 0;
padding: 0;
}
header {
background-color: deepskyblue;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
header nav {
float: right 1;
}
header nav ul li a {
padding-right: 30px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in-out;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<header>
<div class="container">
<div class="row">
<!-- -->
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
</nav>
</div>
<p>This is some text.</p>
</div>
</header>
Here the Bootraps .row class is adding flex box to the div which in term is blocking the float right css. The float property gets ignored in a flex container.
From the flexbox specification:
A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. so float does not create floating or clearance of flex item.
remove the .row class and you float style should start work!
Just remove the container element.
*, html, body
{
margin: 0;
padding: 0;
}
header
{
background-color: deepskyblue;
}
ul
{
list-style: none;
}
ul li{
display: inline-block;
}
header nav
{
float: right;
}
header nav ul li a
{
padding-right: 30px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in-out;
}
<!DOCTYPE html>
<html>
<head>
<title>Website Project</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="row">
<!-- -->
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
</nav>
</div>
<p>This is some text.</p>
</header>
</body>
</html>
I'm attempting to create a rudimentary sidebar, and this is my first attempt at it:
body {
font-family: courier;
font-size: 18px;
}
h1, h2, h3, h4 {
text-decoration: underline;
}
.content {
margin-left: 200px;
}
.side {
position: fixed;
height: 100%;
border: 5px solid black;
top: 0;
left: 0;
background: grey;
width: 180px;
padding: 10px;
#nav {
list-style-type: square;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css" />
<title>Test Page For Fixed Sidebar</title>
</head>
<body>
<div class="content">
<h1>Information</h1>
<p> To your left is a sidebar containing links </p>
<div class="side">
<ul id="nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
</body>
</html>
I seem to have a problem with styling the navigation sidebar, i.e. the element ul id=nav. I am trying to change the list's bullets to squares, and have even tried to remove them completely, but any changes to the corresponding stylesheet are not reflected on the page. I am able to style other elements it just seems to be this one which is causing me a problem.
Any help would be appreciated, thanks.
You can't target list items using class or id, you will have to target the li within the navigation bar. This is done by doing this
/* targeting the #nav and then looking for li tags withing it */
#nav > li
I am trying to style a web page using css. For some reason my header does not spread over where the header should be, which means the width is not 100%. it looks like this now this is the screenshot
header {
width: 100%;
}
#logo_picture {
margin-left: 80px;
}
#logo img,
#logo nav {
float: left;
}
#logo nav {
line-height: 120px;
margin-left: 250px;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline;
}
nav a {
color: black;
font-size: 20px;
font-family: 'Arsenal', 'sans-serif';
font-weight: 300;
padding: 2px 38px;
text-decoration: none;
}
nav a,
nav a:visited {
color: black;
}
nav a.selected,
nav a:hover {
color: grey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Larry Rosenburg Official Website</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<img src="lincoln.jpg" width="30%" alt="Lincoln logo" id="logo_picture">
<nav>
<ul>
<li> Home
</li>
<li> Lincoln
</li>
<li> About
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<h1> Larry Rosenburg </h1>
<p>
I believe that as important as skills and experiences are in our professional careers, it is the relationships that we create which allow us to truly succeed. My company provides title insurance, settlement, escrow and exchange services on a level that
is second to none, but my focus is helping your succeed with your commercial and residential transactions. As a person who can deliver a full range of solutions, I am able to leverage the power of my company with my drive to be concerned with your
company.
</p>
<div id="profile-pic">
<img src="picture.jpg" width="35%" alt="">
</div>
</body>
<footer>
</footer>
</html>
After every float you must create a clear class. Try adding in the CSS:
.clearfix {
clear: both;
}
in the html after the </header> add <div class="clearfix">
I am building a css drop down menu' with sub menu that I found online. I have a strange issue. If I don't specify charset everything is working fine, see screenshot of resize window on Chrome:
Menu OK Thai characters scrambled
Then I add <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
and this is what I get:
Thai characters OK but manu' strange
You can try yourself, here the code, try to remove the chareset line and will be OK:
<html>
<head>
<meta http-equiv="Content-Language" content="en-th">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ice cream</title>
<style>
.all {width:100%;text-align:center}
.one {margin:0 auto;display:inline-block;font-weight:bold;font-family:times new roman,serif;font-size:16px}
a:hover {text-decoration:underline}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
}
ul li {
display: block;
position: relative;
float: left;
width:144px;
background: #240F0A;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
display: block;
padding: 0.5em;
text-decoration: none;
white-space: nowrap;
color: #BCA363;
}
ul li a:hover { background: #402015; }
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
z-index:2;
}
li:hover li { float: none; }
li:hover a { background: #402015; }
li:hover li a:hover { background: #402015; }
.main-navigation li ul li { border-top: 0; }
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
left: 100%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
</style>
</head>
<body bgcolor="#240F0A" text="#FFFFFF" bottommargin="0">
<div class="all">
<div class="one">
<ul class="main-navigation">
<li>ไอศครีม</li>
<li>HOME</li>
<li>ABOUT US
<ul>
<li>The Company</li>
<li>History
<li>Contacts
<ul>
<li>Email</li>
<li>Address</li>
<li>Location</li>
<li>All contacts</li>
</ul></li></ul></li>
<li>ICE CREAM
<ul>
<li>Sherbet</li>
<li>Italian Gelato</li>
<li>Thai Ice Cream</li>
<li>Japanese cream</li>
<li>Classic ice cream</li>
<li>Promotion</li>
<li>Flavors
<ul>
<li>Sherbet Flavors</li>
<li>Gelato Flavors</li>
<li>Thai Flavors</li>
<li>Japanese Flavors</li>
<li>Classic Flavors</li>
<li>All Flavors</li>
</ul></li></ul></li>
<li>About Us</li>
<li>About Us2</li>
<li>About Us3</li>
<li>About Us4</li>
</ul>
</div>
</div>
</body>
</html>
How can avoid that empty space? This happen on Chrome and all Iphone.
Well it's happening because of the line height of your font. You can easily fix this by giving that particular hyperlink to line height of 1em or giving all the anchor tag to same line-height like below -
ul li a {
line-height: 1em;
}
you can check the image here
It's the font that throwing it off. If you inspect the element of the list items you'll see that the first item is 144x36 and the rest are 144x34.
you can target just the first li with something like
.one li:first-child {
font-size: 15px;
}
I know there are 400 of these threads out there but it seems like everyone's code is a little bit different: I've set up my CSS so that a blue bar appears every time you hover over a page in the navigation, and when that link page is clicked, the blue bar stays over it. I CAN NOT get it to stay over the parent page when I click on one of the links with a drop-down menu. I'm able to get a blue bar to appear inside of the dropdown (lol) but can not get it to stay with the parent at all. I've tried all the ancestor tips, all the menu-current tips, i'm just at wits end. I would be eternally grateful for any help.
/*** ----------------------------CHANGE THE COLOR OF THE SQUARES UNDERNEATH THE NAVIGATION BAR HERE ------------------------------- ***/
nav ul li a:hover, nav ul li a.current {
border-bottom: 5px solid #00BCF2;
color: #00BCF2;
}
/*** THIS WILL PROBABILY GET US TO WHERE WE WANT TO BE WITH ADDING AND HOVERING THE PARENT LINK
nav ul li:hover > a, .current-menu-ancestor > a, .current-menu-parent > a {
background-color: #536f9e !important;
color: #ffffff !important;
}
***/
/*** add publications from box site level 1 here ***/
/**** Dropdown ****/
/*** ----------------------------- CHANGE THE LOGO OF THE DROPDOWN ARROW ------------------------------ ***/
/*** ----------------------------- CHANGE THE height OF THE DROPDOWN menu ------------------------------ ***/
.dropdown{
padding: 14px 16px 37px 10px;
background: url('images/dropdown_icon.png') no-repeat 99% 21px;
}
.dropdown:hover{
border-bottom: none;
}
nav ul ul{
display: none;
margin: 0;
position: absolute;
background-color: #000;
z-index: 1;
}
nav ul li:hover ul{
display: block;
opacity: 0.9;
}
nav ul li ul li{
margin: 0;
}
/*** ----------------------------- CHANGE THE WIDTH OF THE DROPDOWN MENU ------------------------------ ***/
nav ul li ul li a{
margin: 0;
padding: 5px 10px;
width: 100px;
}
/*** ----------------------------- CREATE BLUE BARS INSIDE OF DROPDOWN ------------------------------ ***/
nav ul li:hover ul li a:hover, nav ul li:hover ul li a.current{
border-bottom: none;
}
As Requested, The HTML I have for my beginning --> header is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XXXXXX</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('a').each(function() {
if ($(this).prop('href') == window.location.href) {
$(this).addClass('current');
}
<!--END OF HEADER -->
});
});
</script>
</head>
<body>
<div id="wrapper">
<!--========================== L O G O & N A V B A R ============================-->
<header>
<div id="logo">
<img src="images/xylophone.png" alt="YouRock" />
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Founders</li>
<li>Pipeline
<ul>
<ul>
<li>Timeline</li>
<li>Phase I / II</li>
<li>PreClinical</li>
</ul>
</ul>
</li>
<li>Publications
<ul>
<ul>
<li>Coronary Artery Disease </li>
<li>Heart Failure</li>
</ul>
</ul>
</li>
<li>contact</li>
</ul>
</nav>
</header>