im making header for html. and this is the code
<html>
<head>
<style type="text/css">
body{
background-color: yellow
}
.atas{
background-color: red;
width: 700px;
border-radius: 50px;
top:0px;
height: 190px;
position: fixed;
left:200px;
}
.one{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
margin-left: 50px;
position: static;
}
.two{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
position: static;
}
.three{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
position: static;
}
.upermain{
opacity: 0.9;
background-color: black;
top:200px;
width: 100%;
position: relative;
text-align: center;
left: 0px;
}
.article{
opacity: 0.7;
background-color: lightgray;
width:100%;
height:500px;
top:280px;
position: relative;
left: 0px;
}
</style>
</head>
<body>
<div><div class="atas"><div class="one"><br/><font style="arial" color="green">HOME</font></div>
<div class="two"><font style="arial" color="green"><br/>Contact</font></div>
<div class="three"><font style="arial" color="green"><br/>Article</font></div>
</div> <div class="upermain"><h1>Articles</h1></div>
<div class="article">Text <br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>
</body>
how to make the black background under the red background when scrolling?
im using opacity.if i delete the opacity it will become what i want.but i need the opacity
and how to make home contact and article to margin to the right?
here's the jsfiddle
http://jsfiddle.net/mhFxf/5015/
thanks before!
i think you need z-index in css.
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
<style type="text/css">
body{
background-color: yellow
}
.atas{
background-color: red;
width: 700px;
border-radius: 50px;
top:0px;
height: 190px;
position: fixed;
left:200px;
z-index:99;
}
.one{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
margin-left: 50px;
position: static;
}
.two{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
position: static;
}
.three{
background-color: bisque;
border-radius: 50px;
width:125px;
height: 50px;
text-align: center;
position: static;
}
.upermain{
opacity: 0.9;
background-color: lightblue;
top:200px;
width: 100%;
position: relative;
text-align: center;
left: 0px;
}
.article{
opacity: 0.7;
background-color: lightgray;
width:100%;
height:500px;
top:280px;
position: relative;
left: 0px;
}
</style>
<body>
<div><div class="atas"><div class="one"><br/><font style="arial" color="green">HOME</font></div>
<div class="two"><font style="arial" color="green"><br/>Contact</font></div>
<div class="three"><font style="arial" color="green"><br/>Article</font></div>
</div> <div class="upermain"><h1>Articles</h1></div>
<div class="article">Text <br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>
Related
I have the following code:
<body>
<div id="boarder">
<div id="player-time"></div>
.
.
.
</body>
#player-time{
background-color: green;
height:30px;
width: 150px;
position:absolute;
top: 0px;
left:100px;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
color: white;
z-index: -10;
}
#boarder{
background-color: #5FBAAC;
height: 350px;
width: 350px;
position: relative;
margin: 10% auto auto auto;
padding-top: 30px;
border-radius: 30px;
z-index: 10;
}
The id #player-time is being displayed in front of the boarder element. Can someone explain me why the z-index property is not working?
check the two example I posted:
1st child/parent z-index not same level, by default child will above parent. but if you use negative z-index at child and do not define z-index at parent, your child can go below parent.
2nd same level z-index at same level, z-index indicate how it stack
#player-time{
background-color: green;
height:100px;
width: 300px;
position:absolute;
top: -50px;
left:-50px;
text-align: center;
color: white;
z-index: -10;
}
#boarder{
background-color: red;
height: 50px;
width: 350px;
position: relative;
margin: 10% auto auto auto;
text-align: center;
padding-top: 30px;
border-radius: 30px;
}
#player-time-test{
background-color: green;
height:100px;
width: 300px;
text-align: center;
color: white;
z-index: -10;
}
#boarder-test{
top: -50px;
left: 50px;
background-color: red;
height:100px;
position: relative;
width: 300px;
text-align: center;
border-radius: 30px;
z-index: 10;
}
<h2>child/parent z-index</h2>
<div id="boarder">
<div id="player-time">[child] Player-time(z-index: -10)</div>
[parent] boarder (no z-index)
</div>
<h2>same level z-index</h2>
<div>
<div id="player-time-test">Player-time(z-index: -10)</div>
<div id="boarder-test">boarder(z-index: 10)</div>
</div>
z-index has only an effect on siblings (i.e. on the same level), not children...
Just remove the z-index of the parent element --> duplicate question
#player-time{
background-color: green;
height:30px;
width: 150px;
position:absolute;
top: 0px;
left:100px;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
color: white;
z-index: -10;
}
#boarder{
background-color: #5FBAAC;
height: 350px;
width: 350px;
position: relative;
margin: 10% auto auto auto;
padding-top: 30px;
border-radius: 30px;
}
<div id="boarder">
<div id="player-time"></div>
</div>
I want to create same bottom triangle effect with background but i am not able to get this effect bottom triangle with background image.
enter image description here
i have added the code here but not getting the same effect.bottom arrow im not able to extend as in image.
.logo,.nav,.social-icons{ float:left;}
body{ color:#000; background:#ccc;}
.container{border:1px solid red;}
.clear{ clear:both;}
html,body{margin:0;padding:0;}
/*****************************
BANNER
*****************************/
.section {
height: 680px;
width: 100%;
background: url("http://i.imgur.com/YtluDV9l.jpg") no-repeat left top;
background-size:cover;
}
.bottom-container {
margin-top: -137px;
height: 100px;
width: 100%;
}
.text {
position: relative;
box-sizing: border-box;
height: 300px;
padding-top: 36px;
text-align: center;
line-height: 85px;
background: url("http:////i.imgur.com/uCYtKen.jpg") no-repeat left top;
background-clip: content-box;
overflow: hidden;
margin: 25px 0 0 0;
}
.text:before {
left: 0px;
width: 26%;
transform-origin: left bottom;
transform: skew(-134deg);
}
.text:after, .text:before {
position: absolute;
content: '';
top: 0px;
height: 35px;
background: #fff;
}
.text:after {
right: 2px;
width: 74%;
transform-origin: right bottom;
transform: skew(-226deg);
}
<body>
<!--WRAPPER:STARTS-->
<div id="wrapper">
<!--HEADER:STARTS-->
<!--BANNER:STARTS-->
<section class="section">
</section>
<div class="bottom-container">
<div class="text">Some text</div>
<div class="middle-image"></div>
<div class="right-image"></div>
</div></div>
</body>
html,body{background:url(http://i.imgur.com/ixr4wNC.jpg); height:100%;padding:0;margin:0;overflow:hidden;}
.line {
margin-top: 50px;
height: 5px;
width: 20%;
background: #fff;
position: relative;
box-sizing: border-box;
}
.line:after,
.line:before {
content: "";
position: absolute;
}
.line:after {
left: calc(100% + 2px);
height: 25px;
width: 25px;
top: -12px;
border-top: 5px solid #fff;
border-left: 5px solid #fff;
transform: rotate(225deg);
}
.line:before {
height: 100%;
top: 0;
left: calc(100% + 34px);
width: 400px;
background: inherit;
}
<div class="line"></div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
I have coded concentric circles as my menu bar and I am trying to use a:hover to effect the z-index of each circle. I have given each circle a display:block; property so that each circle is a link itself (not just the text within). Unfortunately, the a:hover z-index command isn't working at all. I have read the other threads on stackoverflow relating to this but none of those solutions seem to be my problem. Does anyone know what is going on?
Here is the CSS:
a:hover{
z-index:90000;
}
#container {
position: relative;
width: 500px;
height:500px;
}
#circle {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
border-radius: 50%;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
display: block;
z-index: 5;
}
#circle1{
position: absolute;
width: 85%;
height: 85%;
background-color: #e5e5e5;
border-radius: 50%;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
display: block;
padding-top: 100px;
margin-top: 7.5%;
margin-left: 7.5%;
z-index: 6;
}
#circle2{
margin-top: 15%;
margin-left: 15%;
position: absolute;
width: 70%;
height: 70%;
background-color: #0C9;
border-radius: 50%;
box-sizing: border-box;
color: #00F;
display: block;
z-index: 7;
}
#circle3{
margin-top: 25%;
margin-left: 25%;
position: absolute;
width: 50%;
height: 50%;
background-color: #C33;
border-radius: 50%;
box-sizing: border-box;
background-image: url(Sunset.jpg);
text-align: center;
vertical-align: middle;
color: #FFF;
display: block;
padding-top: 100px;
z-index: 8;
}
Here is the HTML:
<div id="container">
<div id="circle"></div>
<a style="display:block" a href="p1.html">
<div id="circle1">PHOTOGRAPHS</div>
</a>
<div id="circle2"></div>
<a style="display:block" a href="p1.html">
<div id="circle3">BED TIME</div>
</a>
</div>
.header{
position: fixed;
width: 2000px;
height: 70px;
background-color: #ff509a;
}
.subTitle{
width: 100px;
line-height: 70px;
float: right;
margin-right: 20px;
color: white;
font-size: 50px;
}
.content{
width: 2000px;
height: 3000px;
}
<div class="header">
<div class="subTitle">
hello
</div>
</div>
<div class="content">
</div>
Here is the code. The hello element should appear in the right when I scroll to the very right side. Please help!
Simply add
position: fixed;
right:0;
to .subTitle
Job done!
Add z-index:1; to .header, and position:absolute; z-index:2;left: 64%;/* or whatever spacing you want*/ to .subTitle. Don't forget to remove the float since it's no longer needed. Here is a pretty good article on z-index from MDN. So the CSS would look like this:
.header {
position: fixed;
width: 2000px;
height: 70px;
background-color: #ff509a;
z-index: 1;
}
.subTitle {
width: 100px;
line-height: 70px;
/* float: right; */
/* margin-right: 20px; */
color: white;
font-size: 50px;
z-index: 2; /*z-index of 2 to overlay the .header element*/
position: absolute; /*absolute positioning*/
left: 64%; /*change this if needed*/
}
Im working on website (from psd. to HTML/CSS).
How i can auto match website to resolution of people who watch my website?
PSD template has 1600px width and I set this same width for HTML.
My personal reolution of screen is 1920 x 1080 px, so website for me is not displayed corretly. (browser doesnt stretch website to my resolution)
My HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Szablon HTML5</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
</div>
<div id="slider">
<div id="stripe">pasek</div>
<div id="mainpic">obrazek
<div id="podpis">podpis obrazka</div>
</div>
</div>
<div id="content">
<div id="boxes">
<div class="box">
<h2>Perfect Logic</h2>
<h3>All you want your website to do.</h3>
<img src="pictures/minibox.png" class="boxPicture">
<p>Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe</p>
<img src="pictures/przycisk.png" class="przycisk">
</div>
<div class="box">b</div>
<div id="box_c">c</div>
</div>
</div>
<div id="przerywnik"></div>
<footer></footer>
</div>
</body>
</html>
My CSS file:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 1600px;
height: auto;
}
#wrapper{
width: 1600px;
height: auto;
}
#header{
height: 137px;
width: 1600px;
background-image:url('pictures/headerbg.png');
background-repeat:repeat-x;
}
#logo{
background-image:url('pictures/logo.png');
width: 320px;
height: 137px;
margin-left: 330px;
}
#slider{
height: 426px;
z-index: 2;
}
#stripe{
height: 335px;
background: grey;
z-index: 1;
position: absolute;
background-image:url('pictures/stripe.png');
background-repeat:repeat-x;
}
#mainpic{
position: absolute;
z-index: 3;
width: 940px;
height: 343px;
margin-top:22px;
margin-left: 330px;
background-image:url('pictures/slider.jpg');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#podpis{
margin-top: 338px;
margin-left: 104px;
font-size: 36px;
width: 700px;
position: absolute;
}
/* Część z boxami */
#boxes{
height: 469px;
width: 940px;
margin-left: 330px;
background: #234f31;
}
.box{
float: left;
height: 469px;
width: 320px;
background: #ffffff;
}
.box h2{
font-size: 18px;
margin-top: 21px;
font-family: Georgia;
color: #11719e;
float:left;
}
.box h3{
font-size: 12px;
margin-top: 2px;
font-family: Helvetica;
color: #8c8c8c;
float:left;
}
.box p{
margin-top: 12px;
margin-left: 2px;
font-size: 13px;
color: #3e3e3e;
width: 299px;
float: left;
}
.przycisk{
margin-top: 20px;
margin-left: 2px;
float: left;
width: 163px;
height: 35px;
}
.boxPicture{
margin-top: 15px;
float: left;
height: 198px;
width: 299px;
}
#box_c{
float: left;
height: 469px;
width: 300px;
background: yellow;
}
/* Footer */
#przerywnik{
height: 10px;
width: 1600px;
background: #4c4c4c;
}
footer{
height: 173px;
width: 1600px;
background: #333333;
}
How i can fix this?
Edit all
width:1600px;
in your css code to
width:100%;
Edit this on your code:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 1600px;
height: auto;
}
#wrapper{
width: 1600px;
height: auto;
}
By:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 100%;
height: auto;
}
#wrapper{
width: 100%;
height: auto;
}
EDIT:
Here are the code:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 100%;
height: auto;
}
#wrapper{
width: 100%;
height: auto;
}
#header{
height: 137px;
width: 100%;
background-image:url('pictures/headerbg.png');
background-repeat:repeat-x;
}
#logo{
background-image:url('pictures/logo.png');
width: 320px;
height: 137px;
margin-left: 330px;
}
#slider{
height: 426px;
z-index: 2;
}
#stripe{
height: 335px;
background: grey;
z-index: 1;
position: absolute;
background-image:url('pictures/stripe.png');
background-repeat:repeat-x;
}
#mainpic{
position: absolute;
z-index: 3;
width: 60%;
min-width:940px;
height: 343px;
margin-top:22px;
margin-left:-30%;
left:50%;
background-image:url('pictures/slider.jpg');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#podpis{
margin-top: 338px;
margin-left: 104px;
font-size: 36px;
width: 700px;
position: absolute;
}
/* Część z boxami */
#boxes{
height: 469px;
width: 940px;
margin-left: 330px;
background: #234f31;
}
.box{
float: left;
height: 469px;
width: 320px;
background: #ffffff;
}
.box h2{
font-size: 18px;
margin-top: 21px;
font-family: Georgia;
color: #11719e;
float:left;
}
.box h3{
font-size: 12px;
margin-top: 2px;
font-family: Helvetica;
color: #8c8c8c;
float:left;
}
.box p{
margin-top: 12px;
margin-left: 2px;
font-size: 13px;
color: #3e3e3e;
width: 299px;
float: left;
}
.przycisk{
margin-top: 20px;
margin-left: 2px;
float: left;
width: 163px;
height: 35px;
}
.boxPicture{
margin-top: 15px;
float: left;
height: 198px;
width: 299px;
}
#box_c{
float: left;
height: 469px;
width: 300px;
background: yellow;
}
/* Footer */
#przerywnik{
height: 10px;
width: 100%;
background: #4c4c4c;
}
footer{
height: 173px;
width: 100%;
background: #333333;
}
I think would best be suited to the answer here with a given explanation to your problems: How to fit your website for all or at lest most screen resolutions?