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
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.
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>
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
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>
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..!