Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am working on a dropdown menu for a site with a fairly large header. Inside of the header is a <ul> containing the primary menu, with each menu item revealing a dropdown. The problem I am having is that the primary menu is shorter than the header, so there is a small space the cursor has to travel through where it is not hovering over the primary menu or the dropdown. In this brief space, the dropdown menu disappears. How can I keep this from happening? I cannot move the dropdown up, or it overlaps with the header. I also have been unable to change the height of the <ul> in an effective way.
The site is private, but I have created a jsfiddle displaying the problem I'm having: https://jsfiddle.net/x0hvdaqn/
Edit
I had made the fiddle with a div instead of a ul for simplicity's sake, but when I changed it to a ul it started working. The actual menu I am building is made the same way, but does not work. Why would this be the case?
New fiddle with ul instead of div: https://jsfiddle.net/tgqof8my/
use this code. I hope, you need descreasing your margin in drop. Use this...
#wrapper {
width: 100%;
height: 75px;
background-color: green;
text-align: center;
}
#button {
height: 40px;
width: 25%;
margin: auto;
background-color: yellow;
top: 25px;
position: absolute;
}
#drop {
display: none;
background-color: red;
margin-top: 20px;
}
#button:hover #drop {
display: block;
}
<div id="wrapper">
<div id="button">
Primary Menu Item
<div id="drop">
Dropdown
</div>
</div>
Header
</div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am trying to build my first web page and I am only allowed to use HTML and CSS. I have a text inside a div and I want to make it appear from the bottom when the page opens. Is it possible to recreate this effect only using HTML and CSS?
If you cant use javascript for stuff like this, try take a look at css keyframes.
They are used for looped animations and other stuff.
https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
If the animation must appear after the page fully loaded then, You must integrate JavaScript because you have to call onload event then run the animation. otherwise is not possible that is bcs the page maybe take too long to load on slow internet connect so the animation won't be consistence.
If you choose this approach. here is an example:
document.onreadystatechange = () =>{
if ( document.readyState === 'complete' ) {
// Add class animation to div element.
}
}
Have a look at this one. You'll get an idea from this one I guess
.item {
width: 300px;
height: 300px;
outline: 1px solid skyblue;
margin: 5px;
text-align: center;
}
.item .content {
position: relative;
top: 270px; /* 270px top + 30px line height = 300px outer container height*/
line-height: 30px;
-webkit-transition: all 1s;
transition: all 1s;
}
.item:hover .content{
top: 135px;
}
<div class="item"><span class="content">dummy text for test</span></div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am making a website with a slide type layout. Currently, I am working on the following two slides:
and
I want to have a button on each slide (like in slide 1).
I have applied the following rules to the button:
position: absolute;
bottom: 5%;
I have two buttons : "Know me" and "My skills".
Currently, both buttons are overlapping (that's why you can't see the "Know me" button).
What rules can I apply so that both buttons appear at the same position in their respective slides?
Elements with position: absolute are located relative their closest parent element with position: relative. To have your buttons appear in their relevant slide frames be sure to assign position: relative to each frame.
.slide {
height: 80px;
width: 200px;
position: relative;
}
button {
position: absolute;
bottom: 4px;
}
#slide-1 {
background-color: red;
}
#slide-2 {
background-color: green;
}
<div id="slide-1" class="slide">
<button type="button">Button 1</ button>
</div>
<div id="slide-2" class="slide">
<button type="button">Button 2</ button>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I wanted to add CSS to this email icon and once hovered over with the mouse, the icon shifts its position upward a little and from under comes a description of the icon. I have included a before hover and after picture. Any help will be appreciated
There are several things that you should look into that will help achieve the effect you are looking for. The first is the :hover selector:
The :hover selector is used to select elements when you mouse over them.
This allows you to apply certain styles to elements when you hover over them with the mouse.
The next thing I would look into is transition; this allows you to have smooth transitions between either specific states, or all states:
To create a transition effect, you must specify two things:
the CSS property you want to add an effect to
the duration of the effect
Finally, I would put some research into applying styles to child elements and classes; this SO post sums it up pretty well with a thorough issue (as does this one).
The snippet below will produce the effect you desire, but I would heavily recommend you study the HTML and CSS combined and how they work together. It's not the cleanest solution, but it gives you an idea of where to get started. Try playing around with the values to see what changes occur so you can learn more about what each piece is doing.
.container {
width: 100px;
height: 100px;
background-color: #333;
color: #eee;
text-align: center;
cursor: pointer;
}
.container i {
width: 100%;
position: relative;
top: 25%;
font-size: 1.5em;
transition: 0.5s all;
}
.container span {
opacity: 0;
position: relative;
top: 25%;
transition: 0.5s all;
}
.container:hover i {
top: 15%;
font-size: 2em;
color: #fc3;
}
.container:hover span {
opacity: 1;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="container">
<i class="fas fa-mobile icon" aria-hidden="true"></i>
<span>Mobile</span>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I found this wonderful navbar online but I don't find the line in the code to remove the dots.
The current Looking: https://gyazo.com/0531847d45ebfc31d7a15b09b5404c9f
JSFiddle: https://jsfiddle.net/ujzge3sg/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
nav {
display: block;
width: 100%;
}
.navbar {
background: #f96e5b;
width: 100%;
}
.navbar-fixed-top {}
.navbar ul {
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
Here's a tutorial of list-style-type, or in your words, those are the black dots.
Just do list-style-type: none; on the li list. It would help if you would learn HTML and CSS before asking a question about it.
Update
After seeing the full HTML and CSS, I saw the 'problem'. There was an after adding squares after every li. To remove the squares, just delete from line 68-78 in the JSFiddle.
Here's an updated version: https://jsfiddle.net/d7Lrartp/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a rectangular-shaped gray div that is supposed to hold a header ("sample text") and a thin turquoise highlight (which is also just a thin rectangle). When I have both the turquoise div and header inside the other div, one gets forced out.
First of all, how can I fix this issue? Also, is there a more efficient way for me to make the turquoise highlight in the gray div?
http://imgur.com/Sm8qy8J,kSuNEh5 (if I have HTML as shown)
http://imgur.com/Sm8qy8J,kSuNEh5#1 (if I remove the turquoise div)
<div class="column w2">
<div id="headerbox">
<div class="highlightbox">
</div>
<h3>sample text</h3>
</div>
</div>
Note I'm using some Sass CSS here:
h3 {
font: $header-type-font;
font-family: $header-type-font;
color: $header-type-color;
text-align: center;
}
#headerbox {
background-color: $box-color;
height: $block-height;
width: 400px;
}
.highlightbox {
background-color: $highlight-color;
height: $block-height;
width: 20px;
}
Add float:left to your highlightbox class:
.highlightbox {
background-color: $highlight-color;
height: $block-height;
width: 20px;
float:left;
}