why i don't have access to id in CSS? - 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;
}

Related

How to sub navigation bar css?

I want to make sub menu under the Accounts button. I want the sub menu to show when I hover over Accounts button. I tried this but it doesn't work:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Ahmed Shihab | Me </title>
<link rel="stylesheet" href="about.css" >
<link href="https://allfont.net/allfont.css?fonts=courier" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Arvo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
</head>
<body>
<div class="topnav">
Home
About
<a class="acc" href="acc">Accounts</a> <!-- THIS IS WHAT I WANT TO MAKE IT BUTTON -->
<a class="hide" href="face">-Facebook </a>
</div>
</body>
</html>
So I want to change Account to a button that when it is hovered over, it shows me the Facebook link, and I want to add a Twitter link downside the Facebook.
CSS:
.acc {
font-family:'Courier', arial;
color:black;
font-size:3em;
text-decoration:none;
text-align:center;
overflow:hidden;;
}
.hide {
font-family:"Courier";
color:black;
font-size:3em;
display:hidden;
position:relative; top:45px; right:234px;
overflow:hidden;
}
Is this what do you want to achieve?
.subnav{
display: none;
}
.topnav li:hover .subnav{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Ahmed Shihab | Me </title>
<link rel="stylesheet" href="about.css" >
<link href="https://allfont.net/allfont.css?fonts=courier" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Arvo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
</head>
<body>
<ul class="topnav">
<li>Home</li>
<li>About
<ul class="subnav">
<li class="acc">Accounts</li> <!-- THIS IS WHAT I WANT TO MAKE IT BUTTON -->
<li class="hide">-Facebook</li>
</ul>
</li>
</div>
</body>
</html>
I would highly recommend you to learn something about CSS selectors and especially about :hover.

Flask doesn't use my css style specifications

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>

using fontface on css for custom font in webpage

Good day, slight issue here, I cannot seem to implement a custom "Brandon Grotesque" font in css. I would like to know where my error is. The font is in the "fonts" folder.
CSS
#font-face {
font-family: 'Brandon_reg_it';
src: url('fonts/brandon-grotesque-light');
}
.navbar {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
font-family: 'Brandon_reg_it';
}
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Homepage</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
I don't have the full list of errors, but the big one that caught my eye was that you don't have extension in there in css
#font-face {
font-family: 'Brandon_reg_it';
src: url('fonts/brandon-grotesque-light.[woff|woff2|...]'); /*Change it to whatever*/
}
So remove the [...] to the extension.
Here's a good resource: MDN #font-face

Bootstrap - how can I have a sticky header?

I would like to know how I can have a sticky header? I have been figuring out that for the whole day and still don't know how to do. Can anyone help me for that? What I want is that when I scroll down, the header will keep sticking on the top.
These are my codes. Thanks a lot!
header {
padding: 20px 0;
}
header .row,
footer .row {
display: flex;
align-items: center;
}
header h1 {
font-weight: 700;
margin: 0;
}
header nav {
display: flex;
justify-content: flex-end;
}
header p {
padding: 0 20px;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Bo Kei Tuck Shop</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <!--Google Font API-->
<link rel="stylesheet" type="text/css" href="about_us_main.css"> <!--CSS-->
<script type='text/javascript' src='javascript/jquery-3.1.0.js'></script> <!--jQuery-->
<script type='text/javascript' src='javascript/jquery-ui.min.js'></script> <!--jQuery-->
<meta name="description" content="Free Web tutorials"> <!--meta description-->
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!--meta keywords-->
<meta name="content-language" content="en-US">
</head>
<body>
<!--header-->
<header class="container">
<div class="row">
<h1 class="col-sm-4">Bo Kei Tuck Shop</h1>
<nav class="col-sm-8">
<p>Hot Food</p>
<p>Cold Food</p>
<p>Snacks</p>
<p>Drinks</p>
<p>Contact Us</p>
</nav>
</div>
</header>
</body>
You can wrap your div and nav with another div and set it's class like in the docs (navbar navbar-default navbar-fixed-top).
Like this:
body {
height:1500px;
}
header {
padding: 20px 0;
}
header .row,
footer .row {
display: flex;
align-items: center;
}
header h1 {
font-weight: 700;
margin: 0;
}
header nav {
display: flex;
justify-content: flex-end;
}
header p {
padding: 0 20px;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Bo Kei Tuck Shop</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <!--Google Font API-->
<link rel="stylesheet" type="text/css" href="about_us_main.css"> <!--CSS-->
<script type='text/javascript' src='javascript/jquery-3.1.0.js'></script> <!--jQuery-->
<script type='text/javascript' src='javascript/jquery-ui.min.js'></script> <!--jQuery-->
<meta name="description" content="Free Web tutorials"> <!--meta description-->
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!--meta keywords-->
<meta name="content-language" content="en-US">
</head>
<body>
<!--header-->
<header class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="row">
<h1 class="col-sm-4">Bo Kei Tuck Shop</h1>
<nav class="col-sm-8">
<p>Hot Food</p>
<p>Cold Food</p>
<p>Snacks</p>
<p>Drinks</p>
<p>Contact Us</p>
</nav>
</div>
</div>
</header>
</body>
Try this
<nav class="navbar navbar-fixed-top">
Click here for bootstrap proper navigation
Have a look
body{height:20000px}
<!DOCTYPE html>
<html>
<head>
<title>Bo Kei Tuck Shop</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'> <!--Google Font API-->
<link rel="stylesheet" type="text/css" href="about_us_main.css"> <!--CSS-->
<script type='text/javascript' src='javascript/jquery-3.1.0.js'></script> <!--jQuery-->
<script type='text/javascript' src='javascript/jquery-ui.min.js'></script> <!--jQuery-->
<meta name="description" content="Free Web tutorials"> <!--meta description-->
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> <!--meta keywords-->
<meta name="content-language" content="en-US">
</head>
<body>
<!--header-->
<header class="container">
<div class="row">
<nav class="navbar navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bo Kei Tuck Shop</a>
</div>
<ul class="nav navbar-nav">
<li>Hot Food</li>
<li>Cold Food</li>
<li>Snacks</li>
<li>Drinks</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</header>
</body>

Scrollspy highlighting not working in Bootstrap 3

I'm having difficulty with ScrollSpy on my web page. I've tried to put the class file indicators into the correct locations but they are still not showing up.
fiddle
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Unix Command Crib Sheet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="command-crib-sheet.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".thingy">
<div class="navbar-fixed-top">
<h2>Unix Command Crib Sheet</h2>
</div>
<div class="container">
<div class="col-md-3">
<div id="centered-nav" class="bs-sidebar hidden-print affix">
<nav id="thingy" class="nav bs-sidenav">
<li>
...
Yes, just add a class 'thingy' to
<div class="container thingy">
added new css to highlight the text(change style accordingly)
li.active a {
color: red;
}
and finally add this script to page
<script type="text/javascript">
$('body').scrollspy({
target: '.thingy'
});
</script>
last but not least i have changed <nav> to <ul>
<nav id="thingy" class="nav bs-sidenav">
to
<ul id="thingy" class="nav bs-sidenav">
That's it..!