I wanna get this:
The Target &
How it looks like
The thing is that my code goes like this:
HTML
<body>
<header>
<nav>
<h1>whiterose</h1>
<ul>
<li>home</li>
<li>us</li>
<li>contact</li>
</ul>
</nav>
</header>
CSS:
header {
background: #5d5e62;
color: #ffffff;
font-size: 110%;
height: 7vh;
width: 100%;
opacity: 0.7;
position: fixed;
overflow: auto;
}
header h1 {
margin-left: 5%;
padding: 0.5% 0;
letter-spacing: -2px;
display: inline;
}
header nav {
display: inline;
overflow: auto;
}
header nav ul {
display: inline;
margin-left: 55%;
}
header nav ul li{
list-style-type: none;
color: #ffffff;
padding: 0 0.3%;
display: inline;
}
header nav ul li a {
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 200%;
}
So why even if I append the and elements to the parent element (header) they still have the opacity property applied?
You need to give the opacity to the header's background, and not to it's content:
header {
background: rgba(0,0,0,0.7);
}
Check the demo in the snippet:
div {
position: absolute;
top: 0px;
background: rgba(255,0,0,0.5);
width: 300px;
height: 150px;
font-size: 50px;
color: white;
}
<img src="http://lorempixel.com/400/200/" />
<div>Your Text Goes Here</div>
You will need to use the rgba value for the background-color property.
I've created a jsfiddle with this.
jsfiddle
You can play around with the opacity value to suit your needs
If you put opacity of parent element, it's child elements will automatically get the same opacity. If you try to be smart and define opacity of child element, believe me it won't work.
So, solution here is very simple. You want your header color to be #5d5e62 with opacity 0.7. Just convert this hex value in rgb and define background color as
background: rgba(93,94,98,0.7);
That way all child elements will have opacity 1 while background color will be of opacity 0.7.
I hope this would solve your problem.
Related
I'm using ul tag to create a dropdown in vue, but I don't know why setting the background doesn't work.I haven't set the style of li tag.
HTML
<div
class="lang-dropdown"
#mouseover="langActive = true"
#mouseleave="langActive = false"
>
<ul>
<li v-for="k in [1, 2, 3]" class="lang-option"></li>
</ul>
</div>
SCSS
.lang-dropdown {
position: absolute;
z-index: 4;
background: transparent;
margin-top: 20px;
padding-top: 8px;
min-width: 90px;
height: 90px;
ul {
list-style: none;
width: 100%;
height: 100%;
border-radius: 15px;
padding: 0;
margin: 0;
background: black;
color: #2c3e50;
cursor: pointer;
}
}
I think that white area is another white element (for example an absolute element) that is positioned on the top layer of ul
I found the reason, the absolute position element was obscured by the upper div.
I have a bigger HTML header containing a menu and a large picture.
I would like to place text on the image somewhere as a "title" to the page.
Whenever I try to add my <h1> tag somewhere, it positions the text above the menu and it's not what I want.
I would like to be able to position any form of tags somewhere in the picture and I am struggling to find a solution as my code is not efficient to do this.
I am starting to understand what my problem is but I cannot find a solution.
Here is a template of what's going on. I want to place the text somewhere next to my face (as weird as it sounds lol), anyone?
body {
font: 15px/1.5 Gravity, Arial;
padding: 0;
margin: 0;
}
header {
width: 100%;
height: 800px;
background: url('../img/web_bg.jpg');
background-size: cover;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
z-index: 100;
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #fff;
z-index: 100;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 16px;
}
nav ul li a:hover {
background-color: #white;
border: none;
color: #000;
text-align: center;
opacity: 0.6;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
<header id="home">
<h1>MOHANAD ARAFE</h1>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">MOHANAD ARAFE</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
You are going good, cheers for that. For the problem you are facing I would suggest you to play with z-index. It is a CSS property, and defines the elements as layers. Element with greater z-index will be the top most layers, followed by the elements with lesser z-index. I would suggest you to set z-indec of image to lowest, and make the content above in another container, and set the z-index of this container to a higher range, this should solve your problem.
Here's more reference on z-index
Happy Coding.
I would suggest using grid in these kind of situations where you have to deal with position of elements. A crash course on grid will be the best option. I personally use it a lot and don't have to care about anything other than z index.
You can use position: absolute; for the h1 tag and use top value in %, and left value in %
h1{
position:absolute;
top: value in %;
left: value in %;
}
header{
position:relative;
}
Note: apply a class name for h1 and apply css for that class or else it might affect h1 tag in sub pages.
I have a menu using ul/li items, and they have a background image.
All over the Internet, and in stackoverflow, there is information on how to hack background image opacity. For example: https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity
But not for my particular use case when using menus. It seems particularly tricky. From everything I have tried, one of the solutions in the aforementioned website seems to work the best.
But still, the image is not vertically aligned. I cannot seem to be able to center the image in the menu...
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {background-color: #4CAF50;}
.my-container {
position: relative;
overflow: hidden;
}
.my-container a {
position: relative;
z-index: 2;
}
.my-container img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.2;
}
<ul>
<li><div class="my-container">Aaaa <img src="http://www.joaobidu.com.br/jb/content/uploads/2012/03/cancer3.png"></img></div></li>
<li><div>Bbbb</div></li>
<li><div>Cccc</div></li>
<li><div>Dddd</div></li>
<li><div>Eeee</div></li>
</ul>
Hi,Please try this one.
If we will use top:-14px,It will affecting the modern browser like chrome and safari which is not accepting negative values.So we can use below format for background images.
.my-container {
background-image:url("http://www.joaobidu.com.br/jb/content/uploads/2012/03/cancer3.png");
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}
I know that there are four different position values:
static
relative
fixed
absolute
What's really bothering me is the position of an element when i increase the marigin of it. Something like below.
HTML
<header>
<h1>Welcome to Online Shopping System <button type="submit" onclick = "location.href = 'adminlogin.php';" id = "button" >Admin</button></h1>
</header>
<nav id = "navigation">
<ul>
<li>Home</li>
<li>View</li>
<li>Login</li>
<li>Signup</li>
</ul>
</nav>
Notice the grey background color effect that I have applied in the hover.
It clearly shows I'm messing up somewhere with the positioning, and it would be a plus if you could enlighten on overflow property too.
CSS
header > h1
{
width: 100%;
background-color: brown;
height: 45px;
color: white;
text-indent: 65px;
font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
padding: 0;
margin: 0;
}
nav ul li
{
float:left;
list-style-type: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
nav > ul > li > a
{
position: relative;
overflow: hidden;
color: white;
background-color: none;
display: block;
line-height: .1em;
padding: 0.5em 0.5em;
text-decoration: none;
margin-left: 80%;
}
nav li > ul li a
{
color: #111;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
#navigation
{
background-color: brown;
margin: 0;
overflow: hidden;
height: 45px;
}
nav li:hover
{
background-color: #666;
}
this is how i got it, I Think, how You wanted?
Remove margin-left: 80%,
Add these into your CSS
nav ul {
display: flex;
justify-content: center;
width: 100%;
padding: 0px;
}
nav ul li {
width: 25%;
padding: 5px;
}
Does this helped?
this might help u a bit, sorry about my english.
Overflow:
hidden: hides everything what is not inside the area, no scrollbars.
overlay: shows scrollbars if needed and overlays scrollbars top of contents
scroll: show scrollbars normally
visible: shows all the child elements of current content, no area limitations.
Also you can set just overflow-x: hidden to prevent horizontal scrollbar for example and overflow-y: overlay to put scrollbar top of content.
Position:
fixed: dependable window area, stays exactly where u point it
relative: all child elements dependable to relative area
absolute: dependable to a first upper relative area, scrolls with contents
static: normal state
Examples:
<div style='position: relative; width: 100px; height: 20px;'>
<!-- THIS GOES TO TOP OF WINDOW LEFT CORNER AND STAYS THERE -->
<div style='position: fixed; top: 0px; left: 0px;'></div>
<!-- THIS GOES TOP OF UPPER RELATIVE CONTENT RIGHT TOP CORNER -->
<div style='position: absolute; top: 0px; right: 0px;'></div>
</div>
<div style='position: relative; overflow: hidden'>
<!-- THIS DIV YOU JUST NOT BASICALLY SEE, BECOUSE OF OVERFLOW HIDDEN -->
<div style='position: fixed; right: 0px; bottom: 0px;'></div>
</div>
I hope this helps You to understand it little better :)
Im trying to make my first mobile first site and i'm having a slight problem with my onclick even when u click menu. When u click the menu icon and the drop down occurs the, the screen drops a bit showing only part of the header. How do u make it so , so that when u click menu the screen doesnt drop or scroll down a bit. you can see in my example i put up what i mean, any ideas, any help is much appreciated heres my demo link:
Demo: http://cssdeck.com/labs/jkxsecgl
here's my HTML markup:
<body>
<div id="container">
<div id="header">
<h1>This is the header</h1>
<div class="main-nav" id="nav">
☰ Menu
☰ Close
<nav>
<ul>
<li>home</li>
<li>bio</li>
<li>contact</li>
<li>gallery</li>
</ul>
</nav>
</div>
</div>
<div id="content"><h1>This is the content</h1></div>
<aside><h1>The side bar</h1></aside>
<footer><h1>The Footer</h1></footer>
<div id="content"><h1>This is the content</h1></div>
<aside><h1>The side bar</h1></aside>
<footer><h1>The Footer</h1></footer>
</div>
</body>
CSS:
*{margin: 0px; padding: 0px;}
h1 {padding: 10px;}
#container {
position: relative;
width: 100%;
max-width: 320px;
background: rgba(51,0,255,.2);
margin: 0 auto;
}
#nav {
padding-left: 10px;
}
#nav nav ul, .nav-close, .nav-open {
list-style: none;
text-decoration: none;
}
.nav-close {
display: none;
}
#nav nav ul a {
text-decoration: none;
}
.nav-open, .nav-close {
background: yellow;
padding: 10px;
border: 1px solid;
}
#nav:target .nav-open {
display: none;
}
#nav:target .nav-close {
display: inline-block;
}
#nav nav {
position: relative;
text-align: left;
}
#nav nav ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 0;
max-width: 16em;
max-width: 16em;
background: #f6f6f6;
border-width: 0px;
border-style: dashed;
border-color: #aaa;
overflow: hidden;
-webkit-transition: max-height linear 0.5s;
-moz-transition: max-height linear 0.5s;
-ms-transition: max-height linear 0.5s;
-o-transition: max-height linear 0.5s;
transition: max-height linear 0.5s;
}
#nav nav ul li {
display: block;
background: orange;
border-bottom: 1px solid;
}
#nav nav ul li a {
padding: 0.3em 1.5em;
}
#nav:target nav ul {
max-height: 400px;
}
.nav-open {
display: inline-block;
}
#header {
width: 100%;
background: rgba(0,204,51,.7);
}
#content {
background: rgba(0,0,204,.6);
height: 300px;
}
aside {
background: rgba(153,0,0,0.9);
height: 300px;
}
footer {
width: 100%;
height: 150px;
background: rgba(102,255,255,1);
}
As Tom said...that is the default action of your anchor tags...Because there is a hash (#) in the href attribute, it is attempting to jump to that location. You need to use JavaScript to override the functionality of the anchor tag, or just live with the jumping. And yes...the example you gave jumps too. He is jumping to "#nav" when open is clicked and "#" when close is clicked...if you resize his screen so that you have to scroll, you will see it occur.
To go the JS route, you can use onclick in the tag itself and return false, or you can use jQuery and use preventDefault.
Outside of that, I don't know of a way to do it purely with CSS and prevent the "jumping."
I had a look after thinking about this an although I still believe JS to be a better solution, this might help: http://cssdeck.com/labs/ok437d8l i moved all your target tags to the #container. Which is the container element so the anchor point is at the top.
But it will jump to the top if your scroll away.