I need to set the button on the right but this way isn't working:
<ul class="breadcrumb">
<li>Home</li>
<li></li>
<li class="active">Data</li>
<li>Back</li>
</ul>
Only the last <li>, the button, has to be on the right.
You need to float li tag, not a.
I'd suggest to update to bootstrap 4, there we can use flex juice :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
.breadcrumb > *:last-child.pull-right::before { display: none; }
</style>
</head>
<body>
<ul class="breadcrumb">
<li>Home</li>
<li>Level 1</li>
<li class="active">Level 2</li>
<li class="pull-right">Back</li>
</ul>
</body>
</html>
Related
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is a practice website">
<title>Everything Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Resources/css/index.css" rel="stylesheet" type="text/css">
</head>
<html>
<body>
<!--Title and Banner-->
<header>
<title>
<h1>Flip 'n' Sell</h1>
<title>
<nav>
<ul>
<li>Home</li>
<li>Info</li>
<li>Help</li>
<li>Selling</li>
</ul>
</nav>
</header>
</body>
</html>`
Here is my html for my page so far
and here is my css. As you can see, all that I have done is styled it to where the default margin and
padding is nonexistent. What when I load this up and look at the webpage, there's nothing, nothing at all. What am I doing wrong. I still new to this all by the way.
* {
margin: none;
padding: none;
box-sizing: border-box;
}
Move the opening <html> tag to under the Doctype declaration before the <head> tag, and change or remove the <title> tag from your body.
The title tag is defining a title for the entire document (what's shown on the browser tab) and may be causing some confusion when rendering the page.See W3 School's post on the title tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is a practice website">
<title>Everything Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Resources/css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Title and Banner-->
<header>
<h1>Flip 'n' Sell</h1>
<nav>
<ul>
<li>Home</li>
<li>Info</li>
<li>Help</li>
<li>Selling</li>
</ul>
</nav>
</header>
</body>
</html>
The fix was your title tag was not terminated. Needed the corresponding </title> but in reality the title tag does not belong there and should be removed as I did in my example.
I'm creating a navbar. I'm trying to remove the text decoration from the nav links. However, even though my "font-family" of "Roboto" is being applied, "color" and "text-decoration" isn't. Please find my code below
li {
font-size: 0.75rem;
font-family: Roboto;
font-weight: 700;
color: #303133;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Hello">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Hello</title>
</head>
<body>
<header class="header">
<a href="index.html" class="logo">
<img src="img/logo.png">
</a>
<nav class="navlinks">
<ul>
<li>HOME</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4
</ul>
</nav>
</header>
<a> tags have their own styling applied by the browser so they actually look like links, so you usually need to target them directly to apply your own styles.
Font properties are usually inherited in the browser styles, so they style links like:
a {
font-size: inherit;
font-family: inherit;
}
Or similar, so they will apply the font properties you specify on parent elements, but the color and text decoration are not inherited, they usually have a specific blue color and underline decoration; since they aren't inheriting them from the parent, you need to target the <a> tag element directly to override these values;
li a{
font-size: 0.75rem;
font-family: Roboto;
font-weight: 700;
color: #303133;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Hello">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Hello</title>
</head>
<body>
<header class="header">
<a href="index.html" class="logo">
<img src="img/logo.png">
</a>
<nav class="navlinks">
<ul>
<li>HOME</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4
</ul>
</nav>
</header>
I am programming a flask application. In that I have a main html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table generator</title>
<link rel="stylesheet" href="/static/lib/skeleton/normalize.css" />
<link rel="stylesheet" href="/static/lib/skeleton/skeleton.css" />
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<div class="container">
<ul class="navigation">
<li class="navigation-item">
Home
</li>
<li class="navigation-item">
Instructions
</li>
</ul>
{% block content %}{% endblock %}
</div>
</body>
</html>
for my stylesheet I linked this css file:
.navigation {
list-style-type = none;
}
But when I am running the file the list still looks like this:
I want my list to not have the dots in front. What am I doing wrong?
This code will work, you need to apply that style to the list element itself.
.navigation li{
list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table generator</title>
<link rel="stylesheet" href="/static/lib/skeleton/normalize.css" />
<link rel="stylesheet" href="/static/lib/skeleton/skeleton.css" />
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<div class="container">
<ul class="navigation">
<li class="navigation-item">
Home
</li>
<li class="navigation-item">
Instructions
</li>
</ul>
</div>
</body>
</html>
I can't for the life of me get rid of nav-pills' default blue background color. Before you ask, I have looked up similar questions, tried the proposed solutions, modified some but nothing seems to work. I'm fairly new to HTML/CSS and this is probably going to be some silly question, but what the hell. Since I'm working with a grey background navigation bar, I'd like the tabs to have a color that'd complement it.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Random.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav>
<ul class="nav nav-pills">
<li>C.O. Dev.
</li>
<li class="pull-right">Contact
</li>
<li class="pull-right">My Work
</li>
<li class="pull-right">About
</li>
<li class="pull-right active">Home
</li>
</ul>
</nav>
</body>
</html>
you must override it with your custom css. nav.less ruled the style of active nav. create your own css and use this:
.nav-pills>li.active>a{
color: #337ab7 !important;
background-color: #eee !important;
}
.nav-pills>li.active>a{
color: #337ab7 !important;
background-color: #eee !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Random.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav>
<ul class="nav nav-pills">
<li>C.O. Dev.
</li>
<li class="pull-right">Contact
</li>
<li class="pull-right">My Work
</li>
<li class="pull-right">About
</li>
<li class="pull-right active">Home
</li>
</ul>
</nav>
</body>
</html>
hi i'm working in visual studio with bootstrap.
i'm trying to design the section at the and of code, but it doesn't work (i don't have the access to id="TikNehesTitle".
i added my HTML and CSS (in comment) code here.
thanks for responding.
my HTML code:
<!DOCTYPE html>
<html lang="he">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body dir="rtl">
<div class="container">
<nav class="navbar navbar-inverse">
<!-- menu list-->
<ul class="nav navbar-nav">
<li>הירשם</li>
<li>התחבר</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>צור קשר</li>
<li>אודות</li>
<li>איזור מגורים</li>
<li>דף הבית</li>
</ul>
</nav>
</div>
<section>
<div class="container" id="TikNehesTitle"><h1>תיק נכס</h1></div>
</section>
</body>
</html>
CSS id is set with # prefix.
Simply set your CSS to:
body {
}
#TikNehesTitle {
height: 100px;
width: 100px;
border: 1px solid red;
}