So I'm having an issue. I have a header, and text on the header. The headers opacity is 0.55 and the text is wrapped inside of the header class. Now here's the issue, since its inside, the text also gets the opacity applied to it. Here's what it looks like . As you can see the text is kind of light. I've tried applying the opacity to 1.0 on the ui li sector itself, but that hasn't helped either. I've also tried the z-index, and that still hasn't helped.
Here's my HTML
<div class="header">
<ul>
<li>
Email
</li>
<li>
Github
</li>
<li>
Twitter
</li>
</ul>
</div>
And the CSS
.header{
text-align: center;
height: 55px;
width: 100%;
background: #EFEFEF;
opacity: 0.55;
position: fixed;
}
ul li{
display: inline-block;
color: #000;
opacity: 1.0;
font-size: 28px;
font-family: 'Avenir Next';
padding: 10px 35px;
}
And lets not forget the demo. Any ideas?
Instead of using opacity on the header, set the background color to rgba(239,239,239, 0.55) and get rid of the opacity property all together
You can either use #Erik's solution (which is cleaner), or you can also add a separate element behind it: (DEMO)
<div class="header headerbg"></div>
<div class="header">...etc...</div>
CSS:
.headerbg{
background: #EFEFEF;
opacity: 0.55;
}
.header{
text-align: center;
height: 55px;
width: 100%;
position: fixed;
}
This might also be achievable using the :before pseudo-element, to keep the display a bit more separated.
Related
Summary / Nutshell
Is it possible to have a full width (display: block) clickable hyperlink HTML element that has a unique, positioned sprite background image class, all in just one HTML <a> element?
Background
Currently I have a working elaborate HTML menu, whereby each hyperlink has its own unique icon sprite background position.
The sprite icons each have their own unique class, which is added on top of the default menu class that holds the background url and general layout. All icons are exaclty the same size, 13 x 13 px. Each hyperlink has a full with using display:block. The mouse hover must be activated as soon as the block width is hovered, sothat short text or long text hyperlinks get a equal full width hover color.
SPRITES CSS
.home {background-position:0 -13px}
.about {background-position:0 -1638px}
.ethos {background-position:0 -2944px}
.etcet {background-position:0 -5611px}
GENERAL CSS
li a{
display: block;
line-height: 2em;
color: black;
padding: 10px 1em 10px 2em;
}
.menu{
display: inline-block;
background: url(icons.png) no-repeat;
width: 13px; height: 13px;
vertical-align: middle;
margin: -2px 15px 0px -29px;
}
Currently the following undesired bloated HTML markup works...
Undesired: Bloated HTML
<li>
<a href="/home">
<p class="menu home"></p> Home
</a>
</li>
... but I wonder if it would be possible to reduce that (without losing any of the essential functionality) to the absolute bare minimum HTML:
Desired: Minimal HTML
Home
New CSS
a{
position: relative;
padding: 0 0 0 1em;
}
a:before{
content:'';
position: absolute;
background-image: url(icons.png);
background-repeat: no-repeat;
top: .75em;
left: 2px;
height: 13px;
width: 13px;
}
Stuck setting the unique background-position
I tried the a:before{} workaround and while the background icon boxes are positioned nicely relative to the hyperlinks, and the full width mouse hover works too, the sprites themselves are all from the initial starting pivot of x=0 y=0 of the background image!
In other words all the sprite icons are take from the first block of the sprite background png file. The unique individual class names do not seem to have been used for the background-position when using a:before{}.
If I move the background-image from a:before{} to a{}, then the layout breaks completely beyond repair.
In summary, is there a way to make a one-element HTML work with sprites on hyperlinks, using just a:before{} without necessitating any extra meaningless html elements such as <spans> or <p>, and achieve all the essentials of sprites positioning and full with block hoverability?
Any and all help is greatly appreciated!
You need to add pseudo-class to your customization classes.
I've added an image how it works. It's explains more better, than hundreds of words.
.home::before {
background-position: 0 0px;
}
.about::before {
background-position: 0 -13px;
}
.ethos::before {
background-position: 0 -26px;
}
Also, if you have a simple menu, remove ul, li tags and wrap all links in a nav tag.
<nav role="menu" aria-labelledby="navigation menu">
Home
About
Ethos
</nav>
nav {
display: inline-flex;
flex-flow: column;
}
a {
position: relative;
padding: 0 1.3rem;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
a:before {
content: '';
position: absolute;
background-image: url('https://i.ibb.co/M7008LV/sprite.png');
background-repeat: no-repeat;
top: 50%;
left: 2px;
height: 13px;
width: 15px;
transform: translateY(-50%);
}
.home::before {
background-position: 0 0px;
}
.about::before {
background-position: 0 -13px;
}
.ethos::before {
background-position: 0 -26px;
}
a:hover {
background-color: #ffd73d;
}
<nav role="menu" aria-labelledby="navigation menu">
Home
About
Ethos
</nav>
Beginner CSS question here.
I have the home page of a website I'm working on set out perfectly. I have two `divs
#desktop-navbar {
text-transform: uppercase;
width: 100%;
height: 90px;
position: fixed;
z-index:1;
}
#desktop-nav-wrapper {
height: inherit;
padding: 0 45px;
}
#desktop-nav-wrapper nav ul {
float: right;
padding-top: 35px;
font-size: 16px;
}
#desktop-nav-wrapper nav li {
position: relative;
display: inline-block;
padding-left: 25px;
color: #000000;
font-family: Thasadith;
font-weight: 700;
}
#desktop-navbar #mobile-menu-link{
display: none;
}
#desktop-nav-wrapper nav li:hover {
font-weight: 900;
}
#desktop-nav-wrapper.solid {
transition: background-color 1s ease 0s;
background-color: #eeeeee;
}
#desktop-logo.solid-fonts {
transition: color 1s ease 0s;
background: linear-gradient(90deg, #000 100%, #000 0%) fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#desktop-nav-wrapper nav li.solid-fonts {
transition: color 1s ease 0s;
color: #000000;
}
#desktop-nav-wrapper {
font-weight: bold;
font-size: 18vw;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
}
#home {
height: 700px;
position: relative;
}
#home-container {
height: inherit;
width: 100%;
display: flex;
position: absolute;
}
#home-colour-one {
height: inherit;
width: 33%;
background-color: #314455;
}
#home-colour-two {
height: inherit;
width: 67%;
background-color: #dddddd;
}
<div id="desktop-navbar">
<div id="desktop-nav-wrapper">
<nav>
<ul id = "desktop-nav-content">
<li class="desktop-items">Casa</li>
<li class="desktop-items">Sobre Mi</li>
<li class="desktop-items">Servicio</li>
<li class="desktop-items">Galería</li>
<li class="desktop-items">Contacto</li>
<li id="mobile-menu-link"><a>Menu</a></li>
</ul>
</nav>
</div>
</div>
<div id="home">
<div id="home-container">
<div id="home-colour-one">
<h3>Bettoo Kaozink</h3>
</div>
<div id="home-colour-two" class="container">
</div>
</div>
</div>
side by side with different colours (I know I could use one div and use the CSS gradient method, but I want to add some sweet fade-in to both of these divs at a later point).
But I want to place the text on the halfway point between the two divs (so one half is in the blue and the other half is in the grey).
Right now, I only have the text in one div of the home page (home-colour-one), but I'd like it to be spread across the two. Is there a way I can get the text to overflow into the grey div (home-colour-two)? Or just have the text in a separate div and place on the point separating the two divs?
I also know I can have the H3 of Bettoo Kaozink in the nav bar, but that is something I want to avoid. As ideally, I would like Bettoo Kaozink centered vertically in the container.
Cheers
One way to approach this is by using flexbox by adding display: flex to the container. If you haven't learned about how flexbox works, I'd recommend you to read up on this article.
I've created a mini prototype here of what you wanted. There are two things you should do to the JSFiddle in advanced to help you understand the code a bit better:
On line 15 of the CSS code, change the flex-grow property to some other value.
Use JavaScript to center the text relative to the div-container
Once you understand flexbox, it opens a door to so many different options that you can choose from.
I hope that it works out for you. If not, just tell me in the comments.
Honestly the structure of your page, based on what I can understand from here, it's not so solid.
Anyway, just in this context, and if I get right your goal, so having your h3 (or whatever text container you will add then) floating between the two divs [id="home-colour-one" and id="home-colour-two"], and centered vertically, a solution would be adding this ad the end of your CSS:
/* ADD THIS!!!*/
#home-colour-one h3 {
position: absolute;
top:50%; left:16.5%;
transform: translateY(-50%);
}
Here a JS Bin: https://jsbin.com/ralicul/edit?html,css,output
I want to have to click on a hamburger menu icon and then have the list display beneath my icon. I set up my hamburger menu icon with this style
.menu-btn div {
position: absolute;
left: 100%;
top: 64%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 20px;
height: 2px;
margin: 4px 0;
background: #989da1;
z-index: 99;
}
The menu of options taht should appear after you click on the hamburger menu is
<div class="responsive-menu">
<ul id="menu">
<li>Vote</li>
<li>Search</li>
<li>About</li>
<li>Log In</li>
</ul>
</div>
but I'm unclear how to set up the style of the hamburger menu so taht it appears directly under the hamburger menu when you click on it. Right now, its appearing centered at the top of the screen -- https://jsfiddle.net/wtp1k57b/1/ . How do I set up such a style?
PS - I'm looking for a solution that doesn't rely on hard-coding numeric (e.g. top: 27px) pixel values. Certainly its good to get things to work in my little Fiddle, but in my broader application I can't guarantee how big or small that hamburger menu will be.
I would like to show a completely different approach without using display: flex.
HTML
Your approach uses too many wrappers in my opinion. You can definitely reduce the amount of divs. Moreover, you should always try to use semantic tags over general tags like div or ul. Consider looking at this article.
Hence, as #scooterlord already mentioned, you should use a button for the hamburger icon. Moreover, I recommend to use a nav instead of a list.
CSS
First of all, you should bundle the attributes for the same selector at the same place for the purpose of improved clarity. You should not have three sections where you apply the universal selector, but combine it into one. Moreover, do not set the box-sizing to a specific value, but rather set it to inherit, so you can always override this value for a specific element without having to do it for all of its children. Furthermore, I do not understand what you want to achieve with margin: 0 auto on all elements and body. It does not make any sense for me.
Since you do not want to use absolute positioning, I would strongly advise you to avoid using pixels as a measuring unit. They behave badly if some people change their default font-size because of poor eyesight or other reasons. Instead, consider to apply relative units like rem, em or %. By setting the root element's font-size to 62.5% you are still able to calculate as if you were using pixels (1rem = 10px).
As I already mentioned, I avoided to use display: flex for such a trivial thing. I do not understand why it should be used at this point. Therefore, I also had to change the positioning of the menu button. The navigation could be easily positioned using percentages for top and left.
As a side note: You should really try to only post the relevant CSS code - the first step for me was to remove all the irrelevant parts of it.
Final Solution
This is my final solution without Flexbox, without fixed sizes and without absolute positioning using px:
$('.menu-btn').click(function() {
$('nav').toggleClass('nav-open');
});
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
font: 1.6rem/1.4 Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
header {
width: 100%;
background-color: orange;
text-align: center;
padding: 1rem;
position: relative;
}
nav {
display: none;
width: 30rem;
padding: 5rem;
background-color: #ededed;
position: absolute;
right: 5%;
top: 100%;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: center;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 2.2rem;
color: #000;
}
nav a:hover {
background-color: #111;
color: #fff;
}
.menu-btn {
position: absolute;
right: 5%;
top: 50%;
margin-top: -1.1rem;
display: inline-block;
cursor: pointer;
border: none;
outline: none;
background-color: transparent;
}
#media only screen and (min-width: 500px) {
.menu-btn, nav {
display: none !important;
}
}
.menu-btn span {
display: block;
width: 2rem;
height: 0.2rem;
margin: 0.4rem 0;
background: #989da1;
z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h2>Page Title</h2>
<button class="menu-btn">
<span></span>
<span></span>
<span></span>
</button>
<nav>
Vote
Search
About
Log In
</nav>
</header>
Or see this fiddle.
Use the css properties: top and right to set the position of the element under your icon.
#menu
{
position: absolute;
top: 48px;
right: 2px;
background: #ededed;
list-style-type: none;
}
Use this CSS for your menu - no margin, and the position defined by the top and right settings:
#menu {
position: absolute;
width: 300px;
margin: 0;
padding: 50px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
top: 50px;
right: 0;
}
https://jsfiddle.net/meuexde6/
I left out the transition for the testing, but you should basically animate the right parameter from -100px to 0 to achieve what you seemed to have in mind.
ADDITION AFTER COMMENT:
To define the position of the menu in relation to the button, you have to apply position: relative to their common parent element, .mobile-nav. The position values of an element with position: absolute always relate to the first ancestor which has position: relative.
I changed the values in my updated fiddle accordingly to these:
#menu {
position: absolute;
width: 300px;
margin: 0;
padding: 50px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
top: 40px;
right: -32px;
}
Updated fiddle: https://jsfiddle.net/meuexde6/1/
If you really want the menu to stick directly to the button (hard to say - it has no borders), just adjust the top and right values as needed.
HTML5 Semantic Elements.
details > summary {
padding: 2px 6px;
width:12px;
border: none;
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
ul{
list-style: none;
margin-left:0;
padding-left:0;
}
<details>
<summary>☰</summary>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</details>
So, here goes. I know you are asking for a solution to a specific problem, I solved it alright, but I couldn't help noticing that you are struggling with your code. You must simplify the way you think and your code will become leaner. The purpose of this forum is to help others become better, right? :)
HTML
It is good practice to keep the menu toggle button OUTSIDE of the menu - will solve a lot of issues - check below.
It is not semantically right to use anything else rather than a button for the toggle function, so, why not use a button here? I also removed unnecessary clutter from your code, like some divs and the id - the id could be traded with the class, your call. I also removed .mobile-nav because it is not needed at all.
<button class="menu-btn">
<span></span>
<span></span>
<span></span>
</button>
<div class="responsive-menu">
<ul id="menu">
<li>Vote</li>
<li>Search</li>
<li>About</li>
<li>Log In</li>
</ul>
</div>
CSS
I absolutely positioned the menu-btn on the top right corner, and gave it a width equal to the #pageTitle height (which I set at 50px - a gold standard) to keep it rectangular; it should be a rule of thumb that the toggle buttons are rectangular and always the same height as the top navigation bar - in this case the before-mentioned id. The same I did for the .responsive-menu. I absolutely positioned it as shown below. The changes allowed me to remove a lot of css styling - now obsolete - like for example the absolute positioning of the ul menu inside the .responsive-menu.
.menu-btn {
position:absolute;
display:block;
right:0;
top:0;
width:50px;
height:50px;
background:yellow;
border:none;
padding:16px;
}
.responsive-menu {
position: absolute;
top: 50px;
right: 0;
display: none;
}
Javascript
By years of practice I realized that the most efficient way to toggle a menu instead of adding and removing classes is to add a class on the body tag; this can help heaps if you want to restyle anything else on the page depending on wether your menu is opened or not.
$('.menu-btn').on('click', function() {
$('body').toggleClass('responsive-menu-open');
});
Here is a working jsfiddle: https://jsfiddle.net/scooterlord/4atafhge/
I could have done a lot of other things in order to simplify the code even further - remove unnecessary ids and classes since most elements are considered unique and could be targeted using descendant classes, eg .responsive-menu ul, etc. After a lot of practice, you'll manage to think simpler and produce code with a smaller footprint.
Edit: Concerning the fact that you don't like the absolute pixels for alignment here is a trick.
Giving a fixed height to the parent container, equal to the toggle button's -in this case '#pageTitle' and setting its position to relative allows you to use top:100% to properly place the responsive menu exactly below the button (which is essentially the same height):
#pageTitle {
display: flex;
height: 50px;
position:relative;
}
.responsive-menu {
position: absolute;
top: 100%;
right: 0;
display: none;
}
Here is an updated fiddle: https://jsfiddle.net/scooterlord/4atafhge/1/
Edit: Natalia, I gave it some thought and here is what I came up with. I created an absolutely positioned .menu-wrapper, inside of which I placed the button and the responsive menu with float:right and no positioning - aka they are positioned statically. No more pixel values! YAY!
.menu-wrapper {
position:absolute;
top:0;
right:0;
}
.menu-btn {
float:right;
...
}
.responsive-menu {
float:right;
clear:both; // to clear the .menu-btn and sit exactly below it
...
}
Here is a working fiddle: https://jsfiddle.net/scooterlord/4atafhge/2/
For a web project, I would like to create an animated logo in the top left corner of a website. The logo should animate when the visitor is hovering over it, i.e. when not hovering, the logo should display the abbreviated version of the website's name and on hovering it should animate into the fully spelt out version of the name. Here's a quick demo was done in After Effects which shows what I would like to achieve:
The only time I have ever seen something like this was on this website http://ourplace.studio/, the site of a design studio called 'Our Place', in the top left corner. The logo animated pretty much the same way when hovering over it. But looking into the website's source I could not figure out how it is done. The logo is inside a <div> with an <a> tag which has been assigned a class called animation-link. That is as far as I got.
<div id="logo" class="lma">
<a href="http://ourplace.studio" class="animaition-link">
<span>Our</span> <span>Place</span>
</a>
</div>
It would be fantastic if someone could help me to figure this out. It would be a good learning experience to understand how something like this is done.
You can achieve this using css3 transitions:
transition: width 1s;
I made a fiddle that solves your task: https://jsfiddle.net/jmxLrq4m/
Note that this won't work with dynamic width (width: auto) as the transition needs a fixed start- and end value to animate through. Therefor I gave each span a class and set fixed widths on default and on hovering.
The transition attribute combines all transition-properties, which you could also separate e. g.
transition: width;
transition-duration: 1s;
...
See here for more information about transitions: https://www.w3schools.com/css/css3_transitions.asp
i have made a fiddle for you, i hope that works for you
<div id="logo" class="lma">
<a href="http://ourplace.studio" class="animsition-link">
<span>O<i>ur </i></span><span>P<i>lace</i></span>
</a>
</div>
div#logo a {
font-size: 40px;
color: #333;
text-decoration: none;
}
div#logo span {
transition: all .3s;
overflow: hidden;
display: inline-block;
float: left;
}
div#logo i{
font-style: normal;
max-width: 0;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
transition: all 1s;
}
div#logo:hover i {
max-width: 200px;
}
Hi please check this demo here
https://jsfiddle.net/JentiDabhi/83auj9v8/
HTML:
<div id="logo">
<a href="#" class="animsition-link">
<span>Demo</span><span>Logo</span>
</a>
</div>
CSS:
#logo {
width:210px;
font-size: 40px;
}
#logo span {
display: inline-block;
float: left;
margin-right: 0;
overflow: hidden;
}
#logo span {
transition: all 1s ease 0s;
}
#logo span:nth-child(1) {
padding-top: 1px;
width: 28px;
}
#logo span:nth-child(2) {
padding-top: 1px;
width: 22px;
}
#logo:hover span:nth-child(1), .hmslider-visible #logo span:nth-child(1) {
padding-top: 1px;
width: 100px;
}
#logo:hover span:nth-child(2), .hmslider-visible #logo span:nth-child(2) {
padding-top: 1px;
width: 100px;
}
So here is the head container I'm using right now.
<header>
<div class ="headcontainer">
<nav class ="links">
Home
Page1
page2
</nav>
<nav class ="login">
Login
page4
</nav>
</div>
</header>
this is the CSS part:
.headcontainer {
width: 960px;
margin: auto;
header {
width: 100%;
height: 35px;
z-index: 10;
position: fixed;
top: 0;
left: 0;
background: #A7A7A7;
}
.links {
float: left;
text-align: left;
}
.links a {
float: left;
width: auto;
height: auto;
font-size: 16px;
color: #FFF;
font-weight: 600;
margin: 10px 0 0 15px;
}
Basically I have different words I can click on at the top of the website, basically acting as a navigation header. So basically I have a stripe of line with color grey as background with white color on the text. like this:
What I want to do is that when I hover over one of these words it will turn the background white and make the text grey instead for just that word in a square. Like this:
I tried a lot of ways, but I couldn't get it to work. Would appreciate any help I can get! Thanks.
Add this to your css:
.links a:hover {
background: white;
color: gray;
}
You can use CSS :hover selector on the element(s) and then change the color and background to whatever you want Look here
Or you can use jQuery's .hover() function. Look here
You can accomplish this using jQuery.
Your container for the links will require an id.
When you hover over a chosen link an onhover action needs to be applied, this will trigger a jQuery action to amend the CSS.
A good place to start would be div background color, to change onhover accompanied with a short jQuery function to change the link colors.