So I have a navigation menu. nav.png is empty space and nav1.png nav2.png nav3.png nav4.png are actual buttons like home,about us, etc.
I have the following code:
#navigation_bar {
display: table;
margin: 0 auto;
}
.menu_btn {
display: table-cell;
}
.menu_btn img {
height: 90%;
}
<div id="navigation_bar">
<div class="menu_btn">
<img src="http://i.stack.imgur.com/7q5bs.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/wxDQj.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/Fwmkn.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/qRpbK.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/GksMc.png">
</div>
<div class="menu_btn">
<img src="http://i.stack.imgur.com/7q5bs.png">
</div>
</div>
With the above code I get this
As you see the menu ISN'T centered. I want the menu to be in the centre. the bar goes out of window on the right side. but on the left side it maintains a margin of few pixels...
I want it to go out of window on BOTH sides so it kind of appears as a black line throughout the page.
Also, my nav.png is a long image (width-wise).
here are the pngs
Take the background-image approach.
#navigation_bar {
background-image: url(http://i.stack.imgur.com/7q5bs.png);
background-repeat: repeat-x;
text-align:center;
}
.menu_btn {
display:inline-block;
}
.menu_btn img {
height: 90%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GETTING STARTED WITH BRACKETS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<img src="images/logo/logo.png">
</div>
<hr>
<div id="navigation_bar">
<div class="menu_btn"><img src="http://i.stack.imgur.com/wxDQj.png" /></div>
<div class="menu_btn"><img src="http://i.stack.imgur.com/Fwmkn.png" /></div>
<div class="menu_btn"><img src="http://i.stack.imgur.com/qRpbK.png" /></div>
<div class="menu_btn"><img src="http://i.stack.imgur.com/GksMc.png" /></div>
</div>
<hr>
</body>
</html>
Let's modernise!
Let's make this with pure CSS:
Background CSS gradients and no images, mirrored using pseudo elements
We can achieve this even more easily by using a linear gradient background and no images at all.
The background is created by the linear-gradient.
The font can be changed in the CSS if desired.
The text is vertically centered with the line-height: 40px (matching the height of the nav)
The text is horizontally centered with text-align: center on the nav
Using the data-* and pseudo elements, we can even provide a mirror image underneath with pure CSS.
Main benefits:
Link text is easily archived by search engines, improving SEO and link text is easily read by screen-readers
Gradient and links can easily be changed without editing images
Complete Example
CSS gradients are supported IE10 + and IE 6 - 9 are supported using a filter. Ensure that there are no gaps between the opening and closing <a>. This prevents an inline gap.
nav {
height: 40px;
background: #000;/*Non supporting browsers*/
background: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(19, 19, 19, 1) 100%);/*CSS Standard*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /*IE6 - 9*/
line-height: 40px;
text-transform: uppercase;
text-align: center;
min-width: 620px;
position: relative;
}
nav::before {
background: linear-gradient(to top, rgba(76, 76, 76, 0) 0%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(19, 19, 19, 1) 100%);/*CSS Standard*/
content: '';
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
}
nav a {
color: #FFF;
text-decoration: none;
font-weight: bold;
font-size: 1.2em;
border-right: solid 1px #FFF;
padding: 0 10px;
position: relative;
display: inline-block;
}
nav a:first-child {
border-left: solid 1px #FFF;
}
nav a:hover {
background: #F00;
background: linear-gradient(to bottom, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%);
}
nav a::before {
content: attr(data-mirror);
position: absolute;
top: 100%;
left: 0;
padding: 0 10px;
color: #000;
transform: scaleY(-1);
color: #FFF;
opacity: 0.2;
pointer-events: none;
}
nav a:hover::before {
background: rgba(255,255,255,0.2);
opacity: 0.5;
}
<nav>
HomeCategoriesCreateUpload
</nav>
Related
I mean I wrote some code. It appears perfectly on 1920x1080 screen, but my friend said he doesn't see the top of the website (he has smaller resolution screen) unless he decrease the scale of the page from 100% (normal) to 50%.
Of course it's smaller so its not good. There is any possibility to make it correct if everyone wants to check my webpage scale my object correctly to their resolution automatically?
Here is my code:
.grey {
background-color: rgba(30, 32, 29, 0.5);
}
.brown {
background-color: rgba(85, 41, 0, 0.6);
}
.red {
background-color: rgba(255, 0, 0, 0.4);
}
.purple {
background-color: rgba(152, 0, 255, 0.4);
}
.blue {
background-color: rgba(0, 0, 255, 0.4);
}
.yellow {
background-color: rgba(255, 255, 0, 0.3);
}
/* CSS reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 100%;
}
body {
height: 100vh; /* középre rendezés */
display: flex; /* középre rendezés */
align-items: center; /* középre rendezés */
justify-content: center;/* középre rendezés */
background: url('http://www.galaxyradio.es/wp-content/uploads/2016/09/Galaxy-Background.jpg') no-repeat center center fixed; /* teljes nagítású háttér */
background-size: cover;/* teljes nagítású háttér */
}
#head, #headstory {
text-align: center; /* középre rendezés szöveg*/
}
#head {
margin: 0 auto;
}
img {
margin-top: -60px;
width: 19%;
height: 19%;
border-radius: 50%;
padding: 1px;
background-color: #666;
filter: grayscale(50%);
transition: all 0.5s ease-in-out;
}
img:hover {
filter: grayscale(20%);
transform: scale(1.1);
}
#profile-card {
background-color: hsla(0, 0%, 100%, .5);
border-radius: 4px;
box-shadow: hsla(0, 0%, 0%,0.9) 10px 10px 80px;
}
#music-title {
text-align: center;
color:rgba(255,255,255,.8);
font-size: 20px;
}
#contacts {
text-align: center;
}
#media (max-height: 850px) {
body {
height: initial;
}
#profile-card {
margin-top: 60px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="profile-card" class="grey">
<div id="head" class="">
<div id="imgsen" class="">
<img src="http://kepkezelo.com/images/ljookd6qf43392rycg01.jpg" alt="coder">
</div>
<div id="headlines" class="">
My name is
<p> <h1>Junior Elliot</h1><p>
My job is
<p> <h3>Learn programming</h3>
From
<p> <h2><i class="fa fa-map-marker"></i> Don't tell anyone <br>but i dont even know.</h2>
</div>
<div id="headstory" class="">
"Learn from every mistake you made. Adapt and Evolve".
</div>
<div id="music-title" class="grey">
<h2>my music</h2>
</div>
<div id="youtubelink" class="g">
<iframe width="640" height="360" src="https://www.youtube.com/embed/kDqdM7wLVns" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="contacts" class="">
You can contact me via
<p> Telepathy </p>
</div>
</div>
</body>
</html>
Use "media query" that will help you to learn better Web designing....learning Bootstrap is a good thing but when you are good with css then go for Bootstrap that will help you learn better design...
Check here how media query works
new to HTML and CSS, tried to look for answer but can't seem to find it. Unto the question.
The first code is my style.css the second code is for index.html
h1 {
background-image: url('linkto/images/transparent.png');
background-repeat: repeat;
font-family: "Amarillo";
color: red;
text-align: center;
}
<div id="homeSection" class="sect sectOne"></div>
<h1>Title of Web</h1>
<section class="parallax">
<div id="servicesSection" class="parallax-inner"></div>
</section>
Now, If I had linked a a JPEG filed (instead of PNG), the H1 ("Title of Web") would show as red and the background is the JPEG file, however, I try to put a 50px by 50px transparent image (PNG) it doesn't work and the background just becomes white (default background, my guess).
So I want the text to be red (or whatever color) but the background of it being transparent, am I on the right track or am I doing this all wrong?
A transparent background means it will blend with the background of its container (which I assume in your case is the <body> tag). The default background of the web page is white, so the heading is going to appear on a white background, unless you change the background of the entire web page
Use color to transperant to bg , RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
like you need black transperant background
h1 {
background: rgba(255, 255, 255, 0.2);
color: red;
font-family: "Amarillo";
left: 0;
position: absolute;
right: 0;
text-align: center;
}
search the rgb colors and set opacity what ever you need to the last value
The <h1> tag should not have any background by default. If you see a white background despite of changes, there's something else adding it.
Regardless, you can try to use background: none in your CSS
Edit: Snippet updated based on what you provided. Now works as far as can see, still needs more work on your end.
* {
margin: 0;
padding: 0;
}
#font-face {
font-family: "Amarillo";
src: url('http://kesnielgalvan.atspace.cc/fonts/Amarillo.ttf');
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 0px;
}
html,
body {
height: 100%;
}
nav {
position: fixed;
height: 5%;
width: 100%;
z-index: 100%;
text-align: center;
background: rgba(232, 235, 255, 0.09);
padding: 15px;
font-family: fantasy;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
h1 {
font-family: "Amarillo";
color: red;
text-align: center;
}
.h1alt {
background-image: url("http://kesnielgalvan.atspace.cc/images/photo1.jpg");
}
.link {
transition: 0.8s;
color: #ffffff;
font-size: 20px;
text-decoration: none;
padding: 0 10px;
margin: 0 10px;
}
.link:hover {
background-color: #ffffff;
color: #EEA200;
padding: 24px 10px;
}
.sect {
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.subSection {
height: 50%;
background-color: rgb(103, 141, 172);
}
.parallax {
background: url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/973/full/tileable-dark-wood-textures-5.jpg") repeat fixed 100%;
}
.parallax-inner {
padding-top: 12%;
padding-bottom: 12%;
}
.sectOne {
background-image: url("http://kesnielgalvan.atspace.cc/images/photo1.jpg");
}
.sectTwo {
background-image: url("http://kesnielgalvan.atspace.cc/images/photo2.jpg");
}
<head>
<meta charset="utf-8" />
<title>Kesniel Galvan</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<a class="link" id="home" href="#homeSection">About</a>
<a class="link" id="services" href="#servicesSection">Services</a>
<a class="link" id="gallery" href="#gallerySection">Gallery</a>
<a class="link" id="contact" href="#contactSection">Contact</a>
</nav>
<div id="homeSection" class="sect sectOne"></div>
<h1 class="h1alt">Kesniel Galvan</h1>
<section class="parallax">
<div id="servicesSection" class="parallax-inner"></div>
</section>
<div id="gallerySection" class="sect sectTwo"></div>
<div id="contactSection" class="subSection"></div>
</body>
Hey I've created a navbar and I've added an illusionary marker effect under it.
Basically what I want it to do is for when i hover over the image for an arrow to display under it.
Unfortunately I can't quite get it to work.
In the illustration below, I want to showcase. This is how the arrows are placed. Basically, I've set the second one on visibility: hidden; and for illustration purposes left the rest visible.
The one that has black background shows the one I'm hovering my cursor over (showcasing the selection works, there just must be something wrong with my css implementation). I've set the background as #000 (black) only for illustration purposes of the hover. As for the actual code, i just wish for the image to be visible.
So once again, what I want is for the arrows to stay hidden unless you hover over them. My code looks something like this
<div class = "arrows">
<img src="" class="1" alt =""><img src="" class="2" alt =""
<img..et cetera>
</div>
As for the actual CSS, I have some margin and padding set up which is not really of importance.
Basically the important part is:
.arrows img {
position: relative;
bottom: 20px;
}
and now for the specific arrows
img.1 {
visiblity:hidden;
margin, padding and few other properties
}
img.1:hover {
visibility: visible;
}
However, when I hover over the image, it just remains invisible. Any ideas how to solve this?
EDIT: Added code snippet/jsfiddle
* {
box-sizing: border-box;
/* Opera/IE 8+ */
}
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
font-family: Arial;
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
}
/*
====================================================
NAVIGACNY PANEL
====================================================
*/
.navbar {
background-color: #3c1f0a;
width: 100%;
height: 40px;
}
.navbar ul {
z-index: -1;
text-align: center;
display: inline-block;
list-style: none;
margin-left: 175px;
padding: 0px;
}
.navbar li {
width: 80px;
display: inline-block;
font-family: Helvetica;
font-size: 13px;
padding: 0 5px;
}
.navbar a {
text-decoration: none;
color: #FFF;
}
.navbar li:hover {
background-color: #602401;
}
/*
=============================================================
KRATKY POPIS - Index
=============================================================
*/
.ITW {
width: 100%;
height: auto;
padding-bottom: 20px;
background: rgb(252, 255, 251);
background: linear-gradient(to bottom, rgba(252, 255, 251, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 250, 1) 1%, rgba(255, 253, 255, 1) 1%, rgba(252, 252, 252, 1) 20%, rgba(250, 250, 250, 1) 21%, rgba(248, 248, 248, 1) 31%, rgba(246, 246, 246, 1) 32%, rgba(247, 247, 247, 1) 35%, rgba(233, 233, 233, 1) 73%, rgba(234, 234, 234, 1) 75%, rgba(232, 232, 232, 1) 76%, rgba(227, 227, 227, 1) 100%);
}
.ITW img {
visibility: hidden;
position: relative;
padding: 30px 15px 10px 17px;
bottom: 20px;
}
.ITW img:hover {
position: relative;
visibility: visible;
}
img.move-image {
margin-left: 190px;
}
img.ma {
padding-left: 30px;
margin-left: 30px;
}
img .ma:hover {
visibility: visible;
}
img.mb {
padding-left: 20px;
padding-right: 30px;
margin-left: 20px;
}
img.mc {
padding-right: 30px;
margin-left: 15px;
}
img.md {
padding-right: 20px;
margin-left: 25px;
}
img.me {
margin-left: 30px;
}
img.mf {
margin-left: 30px;
padding-right: 15px;
}
.ITW h2 {
font-family: Helvetica;
font-size: 19px;
padding: 10px 0px 15px 0px;
color: #b15e23;
margin-left: 200px;
}
.ITW p {
font-family: Helvetica;
font-size: 12px;
color: #656565;
margin-left: 200px;
}
<body>
<div class="navbar">
<ul>
<li>Index
</li>
<li>O predmete
</li>
<li>Prednášky
</li>
<li>Výsledky
</li>
<li>Cvičenia
</li>
<li>Kontakt
</li>
<li>Related
</li>
</ul>
</div>
<div class="ITW">
<img src="icons/menu_bullet.gif" class="move-image" alt="moved-bullet">
<img src="icons/menu_bullet.gif" class="ma" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="mb" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="mc" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="md" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="me" alt="index-bullet">
<img src="icons/menu_bullet.gif" class="mf" alt="index-bullet">
</div>
Grabs wrench*, tingling sounds*
Background music with low volume rock {ace of spades};
Try and set the navbar with:
z-index:2;
position: relative;
Set the arrows with:
Z-index:1;
position: relative;
By setting a higher value of Z-index your creating a layer type logic: the higher the value the upper the layer will be set;
all objects affected with z-index must have position attribute;
To summarize, I've realized that if I set the visibility to hidden; you can't hover over the element since it's hidden from you.
The easiest solution instead of using the visibility: attribute, use the opacity: attribute is well and switch it between 0 and 1(hover).
so I have made a navbar with an item that has a submenu.
<div id=menu>
<div class=optie>Nieuws</div>
<div class=optie>Acties</div>
<div class=optie>Over ons</div>
<div class=optie>Webshop</div>
<div class=optie>
Webshop
<span class=submenu>
<a class=suboptie href="#">Producten</a>
<a class=suboptie href="#">Winkelwagen</a>
<a class=suboptie href="#">Afrekenen</a>
</span>
</div>
</div>
The navbar works and it's fine however i can't get the submenu items to have the proper width.
The submenu is nested inside a head which allready has a dynamic size. Since I have to use position absolute it's nearly impossible to calculate the correct width. Is there a way to have the submenu automatically have the same width as the parent?
Here is a jsfiddle.
any help is appreciated
https://jsfiddle.net/eb8k0tbo/3/
The need to set position:relative on the parent and then width:100% on the child.
#menu {
font-size: 0px;
width: 80%;
text-align: center;
}
.optie {
display: inline-block;
font-size: 18px;
width: calc(20% - 2px);
height: 1.5em;
line-height: 1.5em;
background: linear-gradient(to bottom, #919191 0%,#303030 41%,#000000 75%,#000000 100%);
border: 1px solid grey;
color: white;
font-weight: bold;
position: relative;
}
.optie a {
color: white;
text-decoration: none;
}
.optie:hover a {
//color: rgb(56,56,56);
}
.optie:hover {
color: rgb(56,56,56);
background: linear-gradient(to bottom, #fac695 0%,#f4913a 58%,#f4913a 79%,#ed790e 100%);
}
.submenu {
display: none;
}
.optie:hover .submenu {
display: block;
position: absolute;
border: 1px solid grey;
width: 100%;;
}
.suboptie {
display: block;
background: linear-gradient(to bottom, #919191 0%,#303030 41%,#000000 75%,#000000 100%);
}
.submenu a:hover {
background: linear-gradient(to bottom, #fac695 0%,#f4913a 58%,#f4913a 79%,#ed790e 100%);
}
.submenu a {
color: white;
text-decoration: none;
}
.suboptie:hover {
color: rgb(56,56,56);
}
<div id=menu>
<div class=optie>Nieuws</div>
<div class=optie>Acties</div>
<div class=optie>Over ons</div>
<div class=optie>
Webshop
<span class=submenu>
<a class=suboptie href="#">Producten</a>
<a class=suboptie href="#">Winkelwagen</a>
<a class=suboptie href="#">Afrekenen</a>
</span>
</div>
</div>
I'm trying to put two text blocks over an image, one in the top left and the another in the bottom right. The text in the top left it's ok, but I can't put the text in the bottom right.
Here is the html code:
<section class="feed">
<div class="section">
<img src="">
<p class="text1"><span>Text 1</span></p>
<p class="text2"><span>Text 2</span></p>
</div>
<div class="section">
<img src="">
<p class="text1"><span>Text 3</span></p>
<p class="text2"><span>Text 4</span></p>
</div>
</section>
And now the CSS:
.section {
position: relative;
width: 65%;
margin: 3.375em 0 0 5%;
}
img {
width: 100%;
}
.text1 {
position: absolute;
top: 7.5%;
width: 100%;
}
.text1 span {
color: white;
font: 1.5em Helvetica, Sans-Serif;
font-weight: 300;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 0.625em;
}
.text2 {
/* don't know how to put this one in the bottom right */
}
.text2 span {
color: white;
font: 1em Helvetica, Sans-Serif;
font-weight: 300;
background: rgb(241, 91, 87);
/* fallback color */
background: rgba(241, 91, 87, 0.7);
padding: 0.625em;
}
Thanks.
You could just position it absolute, but starting from the bottom right, in stead of the top left you did with the first text block. Something like this:
.text2 {
position: absolute;
bottom: 0;
right: 0;
}
To see the code in action: http://jsfiddle.net/KzFDx/
here is one ez way to do this.
<div style="background= your image here no repeat, width height.....">
<p style="position, size,.... ></P>
<p style="position, size...."></P>
</div>