I need help creating a navbar, I've designed it in Photoshop but I'm new to coding and I'm struggling getting exactly what I want.
I've got close, but the code wasn't as simplified as I'd like.
HTML:
<div id="navbar">
<div class="line1">
<div class="text1">Home</div>
</div>
<div class="line2">
<div class="text2">Work</div>
</div>
<div class="line3">
<div class="text3">About</div>
</div>
</div>
CSS:
#navbar {
position: absolute;
text-align: right;
top: 2em;
right: 3em;
}
.line1 {
background-color: white;
opacity: 0.3;
height: 3.5em;
width: 0.2em;
margin-bottom: 1em;
}
.text1 {
color: white;
font-family:'Nanum Myeongjo', serif;
font-weight: 800;
float: right;
margin-top: 1.5em;
margin-right: 1.5em;
visibility: visible;
}
.line1:hover > .text1 {
visibility: visible;
}
(I've only shown CSS for 1st nav tab, but 2 and 3 are the same).
This is my design, with Navbar top right:
https://imgur.com/a/xgmuNAC
https://jsfiddle.net/s6u8gone/
Are you wanting the actual text of the link to only display when hovered over? If so, you were close; but instead of using visibility:visible; use opacity:1; and then set the text class to have opacity:0; as default. As shown:
.text1 {
color: white;
font-family:'Nanum Myeongjo', serif;
font-weight: 800;
float: right;
margin-top: 1.5em;
margin-right: 1.5em;
opacity:0;
transition:0.7s ease;
}
.line1:hover > .text1 {
opacity:1;
transition:0.7s ease;
}
Edit, based off authors comment:
.line1:hover {
opacity:1;
}
https://jsfiddle.net/v14fq6md/
Related
the content of the website is displaying over the navigation bar when scrolling
i dont know how to fix it
flksjfjsda lf jjsdfjkldj fkjhdsjk fjkdhfjk lkfjs lkdjflksa fkjhdfjk fd
f jksdfhjksh fakjhjkds hjkh jksdjklhjkf hs
here is the html:
<body>
<header>
<p class="logo">גכשד יחכי</p>
<nav>
<ul class="nav_links">
<li>אודות</li>
<li>שירותים</li>
<li>פרוייקטים</li>
</ul>
</nav>
<a class="cta" href="https://support.microsoft.com/he-il/contactus/"><button>צור קשר</button></a>
</header>
<div class="intro"></div>
<main>
<h1 class="main-text">פסיכולוגית<br /> חינוכית</h1>
<p class="secendery-text">חשדג גשחכי היא פסיכולוגית חינוכית<br /> העוסקת במקצוע זה למעלה מ20 שנה <br /></p>
<img src="images/psychology1.png" alt="" class="side-image" />
</main>
<div class="card">
<img src="images/img_avatar.png" alt="Avatar" >
<div class="container">
<h4><b>b</b></h4>
<p> </p>
</div>
</div>
</body>
</html>
this is the css that refers to the problem:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li, a, button {
font-family: 'Rubik', sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
color: #edf0f1;
}
header {
display: flex;
background-color: #24252A;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
position: fixed;
top: 0;
width: 100%;
}
.nav_links {
list-style: none;
display: flex;
}
nav{
order:2;
}
.cta{
order:1;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
color:#ddad34;
}
.main-text {
font-family: 'Rubik', sans-serif;
margin: 0;
padding: 0;
position:absolute;
top: 32%;
right: 25%;
direction: rtl;
font-size: 60px;
color: black;
}
.secendery-text {
font-family: 'Rubik', sans-serif;
margin: 0;
padding: 0;
position: absolute;
top: 48%;
right: 25%;
direction: rtl;
color: darkgray;
}
.side-image {
position: absolute;
top: 20%;
left: 5%;
animation: float 6s ease-in-out infinite;
}
#keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}
.
if anyone know how can i fix this
please help
thanks
In your case you should add a z-index property for the header element. By default if the element z-index is not specified it will layer elements by the order of declaration (last html element with position: absolute/fixed will overflow previous elements with position: absolute/fixed). Try specifying the z-index property for the header
header { z-index: 100;}
in the css file.
And for the next time, try to provide a more specific overview of your problem instead of that gibberish.
I have tried everything, but I cannot manage to make the button smaller in the width and height.
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn,
.c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 64px;
font: normal normal 700 1em/4em Arial, sans-serif;
overflow: hidden;
width: 200px;
background-color: #3b5998;
}
.c-anim-btn {
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn {
margin-top: -4em;
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
If someone please can tell me a solution, I would be very grateful.
Change the CSS property of c--anim-btn class
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn,
.c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 24px; /* change height */
font: normal normal 700 1em/1.6em Arial, sans-serif;
overflow: hidden;
width: 100px; /* change width */
background-color: #3b5998;
}
.c-anim-btn {
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn {
margin-top: -1.6em;
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
you need to adjust line height and margin top after change height because of text seen. Comment out onn css please take a look .c--anim-btn and .c--anim-btn:hover
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn, .c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 128px;
font: normal normal 700 1em/8em Arial,sans-serif; /* 1em/8em means font-size/ line-height */
overflow: hidden;
width: 500px;
background-color: #3b5998;
}
.c-anim-btn{
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn{
margin-top: -8em; /*Here you need to adjust after line-height change */
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
I got a table and I would like to have different text boxes when hovering on cells.
<div class="plan">
<h2 class="title">Premium</h2>
<div align="center">
<p class="plan-price">499<span>€</span></p>
</div>
<ul class="plan-features">
<li><strong>Hello1</strong></li>
<li><strong>Hello2</strong></li>
<li><strong>Hello3</strong>></li>
<li><strong>Hello4</strong></li>
<li><strong>Hello5</strong></li>
</ul>
Start Now
</div>
I would like to show a box with some text when for example a user move the pointer over Hello1.
This is the css code
.plan-features {
margin-bottom: 20px;
line-height: 2;
font-size: 12px;
color: #999;
text-align: center;
}
.plan-features > li > strong {
font-weight: bold;
color: #888;
}
.box:hover{
text-align: center;
color: white;
width: 200px;
margin: 10px -12px;
height: 100px;
background-color: rgba(0,0,0, 0.8);
}
I tried to add this to the first <li> tag
<ul class="plan-features">
<div class="box"><li><strong>Hello1</strong></li></div>
but obviously the box is shown with the text "Hello1", how can i hide "hello1" and add some other text?
You can do something like this! i tried to implement according to your requirements. But do explain what are you trying to achieve from this. Should there be different text for each li element? There are other ways too. Which would be simpler than this
HTML
<div>
<strong class="overlap hoverOn">Hello1</strong>
<strong class="overlap hide">someText</strong>
</div>
CSS
div
{
position:relative;
}
.overlap
{
position:absolute;
top:0; left:0;
}
.hide {
display: none;
background: red;
}
.hoverOn:hover + .hide {
display: block;
}
JSfiddle Sample
Cheers!
Try something like this:
HTML
<li><strong hover-text="Some text1">Hello1</strong></li>
CSS
strong:hover {
font-size: 0;
}
strong:hover:before {
font-size: 12px;
content: attr(hover-text);
}
Full code here: https://jsfiddle.net/5qkruhuc/
I found this solution using JavaScript, but the <div id="mynav" class="box"> is always shown except when I click on "x". Instead I want that the box is shown only when I click on "Hello1" and closed after have clicked on the "x"
Here's the code
JavaScript:
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
CSS:
.plan-features {
margin-bottom: 20px;
line-height: 2;
font-size: 12px;
color: #999;
text-align: center;
}
.plan-features > li > strong {
font-weight: bold;
color: #888;
}
.box{
text-align: center;
color: white;
width: 200px;
margin: 10px -20px;
height: 100px;
background-color: rgba(0,0,0, 0.8);
overflow-x: hidden;
transition: 0.5s;
}
.closeButton {
color: yellow;
top: 20px;
right: 45px;
}
HTML:
<ul class="plan-features">
<div id="myNav" class="box">
x
<br />Some Text
</div>
<li onclick="openNav()"><strong>Hello1</strong></li>
<li><strong>Hello2</strong></li>
<li><strong>Hello3</strong></li>
<li><strong>Hello4</strong></li>
<li><strong>Hello5</strong></li>
</ul>
Simply do this
HTML Code:
<div class="plan">
<h2 class="title">Premium</h2>
<div align="center">
<p class="plan-price">499<span>€</span></p>
</div>
<ul class="plan-features">
<li><strong>Hello1</strong></li>
<li><strong>Hello2</strong></li>
<li><strong>Hello3</strong>></li>
<li><strong>Hello4</strong></li>
<li><strong>Hello5</strong></li>
</ul>
Start Now
</div>
CSS Code :
.plan-features {
margin-bottom: 20px;
line-height: 2;
font-size: 12px;
color: #999;
text-align: center;
}
.plan-features li strong:hover {
text-align: center;
color: white;
width: 200px;
margin: 10px -12px;
height: 100px;
background-color: rgba(0,0,0, 0.8);
}
Working example: https://jsfiddle.net/rajnikpatel/e7rrk9xy/
So I'm working on making a website's navbar responsive: http://codepen.io/anon/pen/VvmpKx
The navbar has a simple (currently nonfunctional) search input field.
<nav>
...
<form class="search">
<input type="text" size="15" placeholder="Search..." />
</form>
</nav>
At about 750 px, I reduce the font size and increase the height of the nav bar, to make it easier to click the navbar links. This works great, except for the search bar.
Is there a way to make the area above and below the search input clickable, as if the user had clicked on the input itself, as it is for the category links?
I'd prefer solutions using only css, but javascript or jquery is also acceptable.
Sure! You can add a label around the input, then style the label to have 100% height:
/* New style */
nav form.search label {
height: 100%;
display: block;
}
/* Untouched styles */
nav {
font-family: "Merriweather Sans", "Tahoma", "Trebuchet MS", sans-serif;
background-color: #333;
margin: 0 0 1em 0;
height: 2em;
padding: 0 0.3em;
}
nav a {
color: #FFF;
text-decoration: none;
padding: 0 0.5em;
margin: 0 0.1em;
display: inline-block;
height: 100%;
vertical-align: middle;
line-height: 2em;
transition: background-color .2s ease-in-out;
}
nav a.news:hover {
background-color: #0581C1;
}
nav a.comm:hover {
background-color: #228B22;
}
nav a.variety:hover {
background-color: #9966CC;
}
nav a.sports:hover {
background-color: #DAA520;
}
nav a.satire:hover {
background-color: #B31B1B;
}
nav a:active {
background: #777;
}
nav form.search {
float: right;
display: inline;
vertical-align: middle;
line-height: 2em;
padding: 0 0.5em;
}
nav form.search input {
border-radius: 5px;
width: 5em;
height: 1em;
transition: width .3s ease-in-out, height .3s ease-in-out, margin-right .3s ease-in-out;
}
nav form.search input:focus {
width: 10em;
height: 1.2em;
margin-right: -0.2em;
}
#media (max-width: 750px) {
nav {
font-size: 0.8em;
height: 5em;
}
nav a,
nav form.search {
line-height: 5em;
}
}
<nav>
<span>Site title</span>
<a class="news" href="#"><span>Category</span></a>
<a class="comm" href="#"><span>Category</span></a>
<a class="variety" href="#"><span>Category</span></a>
<form class="search">
<label>
<input type="text" size="15" placeholder="Search..." />
</label>
</form>
</nav>
Put an event listener on the encapsulating form:
var backgroundForm = document.getElementById('background');
var search = document.getElementById('search');
backgroundForm.addEventListener('click', function(){
search.focus();
});
Updated example
You can add some Jquery for that.
Some thing like this will do the trick.
$(window).ready(function(){
$("form.search").click(function(){
$(this).find("input").focus();
});
});
You can make it with CSS pseudo classes. It's especially suitable for inputs with small targets - checkboxes/radios. Unfortunately, this does not work on IE:
input[type="checkbox"] {
position: relative;
}
input:before {
content: '';
cursor: pointer;
display: block;
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
http://jsfiddle.net/gkaraliunas/0r0ag1ad/?utm_source=website&utm_medium=embed&utm_campaign=0r0ag1ad
Html looks like this:
<div id="content">
<div id="menu">
<img src="GFX/logo.png" class="centeredImage" />
<div class="menuItem">Play</div>
</div>
<div id="gameOver">
<div class="menuItem" id="finalScore"></div>
</div>
<div id="game">
<div style="float:left; width:600px">
<canvas id="canvas" width="600" height="900" style="">
Your browser doesn't appear to support the HTML5 <canvas> element.
</canvas>
</div>
<div id="info">
<img src="GFX/logo.png" id="logo" />
<div class="desciptor">Multiplier:</div>
<div id="multi" class="info"> 12</div>
<div class="desciptor">Score:</div>
<div id="score" class="info">452343</div>
<div class="desciptor">Level:</div>
<div id="level" class="info">466</div>
</div>
</div>
</div>
And this is the CSS:
body
{
background-color: black;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 24px;
}
#content
{
width:900px;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#info
{
float:right;
width:260px;
height:860px;
background-color:#0f0f0f;
color:white;
padding:20px;
text-align:center;
}
#menu
{
display:block;
}
#game
{
display:block;
position:relative;
}
#logo
{
margin: -20px;
}
.centeredImage
{
display:block;
margin:auto;
}
.menuItem
{
padding-top:30px;
font-size:6em;
text-align:center;
}
a:link {text-decoration: none; color: white;}
a:visited {text-decoration: none; color: white;}
a:active {text-decoration: none; color: white;}
a:hover {text-decoration: none; color: white;}
.desciptor
{
padding-top:30px;
font-size:0.7em;
text-align:left;
width:inherit;
}
.info
{
width:inherit;
}
#multi {
font-size: 4em;
}
#score
{
font-size:2em;
}
#level
{
font-size:1.5em;
}
#gameOver
{
color: white;
position: absolute;
display:block;
padding-top:30px;
font-size:6em;
text-align:center;
height: 870px;
margin-top: -900px;
z-index: 999;
}
What I'm trying to achieve is to have the gameOver div overlay the game div and its content. Unfortunately this doesn't work as I do it. Any ideas ?
I'm not too sure about the display and position attributes and how they affect overlaying of divs.
Looks to me like you're trying to use two different methods simultaneously.
Using position:absolute attribute already causes your #gameOver div to set position independently of other blocks except for parenting. http://www.w3schools.com/cssref/pr_class_position.asp
You're trying to make one block overlap another with negative margin (but setting negative-margin to the wrong element)
This results in your #gameOver div to rest on top of your page (provided there's some content in #finalScore block)
To resolve your issue, do either one of the following:
Delete margin-top property from #gameOver
#gameOver {
color: white;
display: block;
font-size: 6em;
height: 870px;
margin-top: -900px;
padding-top: 30px;
position: absolute;
text-align: center;
z-index: 999;
}
Remove position: absolute; and margin-top: -900px; properties from #gameOver element and add margin-top: -900px; to your #game div. So your css will look like this:
#gameOver {
color: white;
display: block;
font-size: 6em;
height: 870px;
padding-top: 30px;
text-align: center;
z-index: 999;
}
#game {
display: block;
margin-top: -900px;
position: relative;
z-index: -1;
}