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.
Related
I have an anchor tag Home this displays homepage and another one Books this display books page. Now when I click on Home link I want it to change it's color and keep the same color until I click on the other link. Similarly, when I click on Books link I want it to change this color and keep the same color until I click other link.
I can do it using JavaScript but I want to know how I can achieve it using CSS only?
I tried with a:active but it doesn't work.
<!DOCTYPE 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.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght#7..72,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Bookstore</title>
</head>
<body>
<div class="container">
<ul>
<li>Home</li>
<li>Books</li>
</ul>
</div>
</body>
</html>
You can do it like that, Use focus, But if using only that the styling will be lost once another element gains focus, So add a class to your a like in my example link then use it in CSS like the demo below:
a {
color: black;
text-decoration: none;
font-size: 20px;
}
a:focus {
color: red;
}
:link {
color: red;
}
<!DOCTYPE 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.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght#7..72,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Bookstore</title>
</head>
<body>
<div class="container">
<ul>
<li>Home</li>
<li>Books</li>
</ul>
</div>
</body>
</html>
HTML code
<a tabindex="1">Your Button</a>
CSS code
a {
color: black;
font-size: 30px;
}
a:active {
color: rebeccapurple;
}
a[tabindex]:focus {
color:rebeccapurple;
}
Adding a tabindex to each anchor element allows you to apply a :focus pseudo-class:
<style>
ul li a {
color: #000;
}
ul li a:focus {
color: red;
}
ul li a:selected {
color: red;
}
</style>
<ul>
<li><a tabindex="1" href="#" class="selected"> item1 </a></li>
<li><a tabindex="1" href="#" class="selected"> item2 </a></li>
<li><a tabindex="1" href="#" class="selected"> item3 </a></li>
</ul
I want to style "Login" text , can I do it without "label" tag ?
here's my code
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="WebFontKit/stylesheet.css" type="text/css" charset="utf-8" />
</head>
<body>
<div class="logindiv">
<label class="login">Login</label>
Yes, you can. See the fiddle
div.logindiv::before {
content:'Login';
position: top;
color: red;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="WebFontKit/stylesheet.css" type="text/css" charset="utf-8" />
</head>
<body>
<div class="logindiv">
</div>
</body>
</html>
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>
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;
}
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..!