The page I have got is like this: .
I wanted to make it centralized but I couldnot do that.
The problems are:
I want to give black div full page.
I want to centralize other two divs without using left property in css.
While hovering the value of z should increase by any value so that the whole div can come up.
I learned about margin: 0 auto o auto; property that it centralizes the element with respect to page.
I want to get the same for yellow and green divs using margin property w.r.t. black divs.
Can I get these results using CSS or i will have to use Javascript etc?
My html code is here:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styling.css"/>
</head>
<body>
<div class="first">
<center> The first link </center>
</div>
<div class="second">
<center> The second link </center>
</div>
<div class="third">
<center> The third link </center>
</div>
</body>
<html>
My css document is:-
.first
{
position: absolute;
width:500px;
color:#fff;
height:200px;
background-color:#000;
z-index: 0;
margin:0 auto 0 auto;
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
left:60px;
z-index: 1;
margin:50px auto 0 auto;
}
.third
{
position: absolute;
width:300px;
height: 200px;
left:100px;
background-color:yellow;
z-index: 2;
margin:100px auto 0 auto;
}
body div:first-child a:hover
{
font-size:30px;
color:yellow;
z-index:5;
}
body div +div a:hover
{
font-size:40px;
color:red;
z-index: 5;
}
body div+div+div a:hover
{
font-size:50px;
color:#fff;
z-index:5;
}
I apologize for my English.And hope you will get my problems.
I still believe that using left is the best way to solve your problem — not sure why OP wants to avoid it.
Here is the proof-of-concept fiddle: http://jsfiddle.net/teddyrised/YqDL5/
Instead, use the following trick: set their position from the left by 50% of the container's/parent's width. That's half correct. However, we also need to take into account the width of the element itself, which means we have to offset it backwards by half of its own width.
Use this:
.second, .third {
left: 50%;
transform: translateX(-50%);
}
There are also some changes you have to make to your HTML code:
I would suggest wrapping everything around a parent container that is relatively positioned, and instead of using margins to offset the second and third div from the top, use top instead.
Remove <center>. Delegate layout to CSS, and this HTML tag has been deprecated long time ago.
Here is the revised HTML:
<section>
<div class="first">The first link </div>
<div class="second"> The second link </div>
<div class="third"> The third link </div>
</section>
Also, I suggest setting the first div to relative positioning, so it will not cause the parent element's height to collapse. Otherwise, you will have to set an explicit height since absolute positioning takes elements out of the flow, and the parent will not take it into account when calculating its own dimensions.
section {
position: relative;
}
.first {
width:100%;
color:#fff;
height:200px;
background-color:#000;
}
.second, .third {
left: 50%;
transform: translateX(-50%);
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
top: 50px;
z-index: 1;
}
.third {
position: absolute;
width:300px;
height: 200px;
top: 100px;
background-color:yellow;
z-index: 2;
}
See fiddle at: http://jsfiddle.net/teddyrised/YqDL5/
Related
I have 3 boxes on my page. The second (red) has to be fixed position. If the height of the green box increases, it has to increase to the top side, not to the bottom. So red one's position has to be fixed. Also if the red one's height increases, yellow has to move forward to the bottom. How can i do that?
Here is my css and html code:
#div1 {position:relative;top:0;bottom:0;right:0;background:green;width:100px;height:100px;}
#div2 {width:100px;height:140px;position:absolu;bottom:0;left:0;background:red;}
#div3 {width:100px;height:100px;position:relative;top:0;right:0;background:yellow;}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="parent">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<!-- End your code here -->
</body>
</html>
This is possible with simple CSS using a few positioning tricks. First off, since everything orients around your red div, you need this to be the cornerstone. Setting this div to a relative position and inserting the remaining divs as children will allow all of its children to be positioned absolute relative to the parents location.
Because using absolute positioning as a percent will base off of the relative positioned parents size, we can use this to always attach the bottom div off of its base with position:absolute;top:100%. This places the child div at 100% distance from the top of your parent div.
Under that same logic, we can place a div always at the top of the parent using position:absolute;bottom:100%;
Note: I've changed your ID's to classes to allow multiple examples
.div1 {
width:100px;
height:140px;
position:relative;
top:200px;
background:red;
/* ignore this in a real case, these allow multiple examples to stack nicely*/
float:left;
margin-left: 5px;
}
.div2 {
width:100px;
position:absolute;
bottom:100%;
background-color:green;
}
.div3 {
width:100px;
position:absolute;
top:100%;
background:yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="div1">
<div class="div2" style="height:100px;"></div>
<div class="div3" style="height:100px;"></div>
</div>
<div class="div1">
<div class="div2" style="height:200px;"></div>
<div class="div3" style="height:200px;"></div>
</div>
<div class="div1" style="height:190px">
<div class="div2" style="height:120px;"></div>
<div class="div3" style="height:227px;"></div>
</div>
<div class="div1" style="height:190px">
<div class="div2" style="height:20px;"></div>
<div class="div3" style="height:360px;"></div>
</div>
<!-- End your code here -->
</body>
</html>
When in doubt, create more parent or wrapper elements around the elements you want to manipulate.
* {
box-sizing: border-box;
}
.parent {
position: absolute;
top: 0px;
left: 0px;
border: 5px solid #0000ffc0;
width: 100%;
height: auto;
}
#div1-wrapper {
border: 2px solid lime;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
#div1 {
position: absolute;
bottom: 0px;
left: 0;
background: green;
width: 100px;
height: 20vh;
}
#div2-wrapper {
border: 2px solid #ff3300;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 30vh;
}
#div2 {
width:100px;
height: 30vh;
position: absolute;
top: 0;
left: 0;
background: red;
}
#div3-wrapper {
border: 2px solid #ffff00;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
#div3 {
width: 100px;
height: 100%;
position: relative;
top: 0;
right: 0;
background: yellow;
}
<body>
<!-- Start your code here -->
<div class="parent">
<div id="div1-wrapper">
<div id="div1"></div>
</div>
<div id=div2-wrapper>
<div id="div2"></div>
</div>
<div id=div3-wrapper>
<div id="div3"></div>
</div>
</div>
I created a wrapper around each of the elements named #div. The wrapper around #div1 is #div1-wrapper, and then #div2-wrapper, and so on...
Just to make sure that you overwrite any native browser position styling, give position: relative to each wrapper. With a top: 0 and left: 0. This will make sure that each element begins on the far left of the .parent element and each one begins just after the end of the last one.
If you want #div1 to grow and shrink with the size of the screen, give it a height in vh instead of pixels. #div1's outer wrapper should be position: relative, but the #div1 element itself should be position: absolute. (If you try to set its position to relative, it will stick to the top of its wrapper, rather than the bottom, as you want.
You said you wanted the red div (#div2) to be fixed from the top, but able to grow and shrink underneath. To achieve this, you need to set the position of #div2 to absolute, sitting inside of a position: relative wrapper.
You also need to make sure that it's wrapper (#div2-wrapper) has a height set in vh, instead of pixels. That way, the whole outer wrapper will grow and shrink. And to have the inner element (#div2) grow and shrink with it, set its height to 100% of the parent.
Next, set the #div3-wrapper to position relative and a set height of your choosing (in this case, 100px).
And lastly, set the #div3 (yellow div) to height: 100%;
To make the interactions more clear, I gave the outermost .parent element a blue border, and I gave each #div-wrapper a border color that matches the inner #div and I set box-sizing: border box on all elements.
I have a div class like so:
<div class="website-wrapper" data-content="63%"></div>
I have javascript that changes the data-content:
$(this).children().closest('.website-wrapper').attr('data-content', (imageHeight/imageWidth*100)+"%");
And I have my css declaration like this:
.website-wrapper:after { padding-top: attr(data-content); display: block; content: ''; }
For some reason, I can't get the padding-top to work correctly. Is there something I doing wrong?
As far as I know attr works only with content property currently, so you can manipulate only it. You can see browser compatibility here and more detail info - https://developer.mozilla.org/en-US/docs/Web/CSS/attr
.website-wrapper:after {
content: attr(data-content);
}
<div class="website-wrapper" data-content="Hello"></div>
If you include a wrapping div you could use that to set your padding-top to maintain you aspect ratio. Just set that wrapping div to position: relative; and the inner div with the background-image can be set to position: absolute; top:0; bottom: 0; left: 0; right: 0; in order to take up the full space of the containing div which is creating the aspect ratio.
HTML
<div class="outer">
<div class="website-wrapper"></div>
</div>
CSS
.outer{
position:relative;
}
.website-wrapper{
background-image: url('https://placehold.it/800x450');
background-repeat: no-repeat;
background-size:contain;
position:absolute;
top:0;
bottom:0;
left: 0;
right: 0;
border:1px solid red;
}
JS
$(this).children().closest('.outer').css('padding-top', (imageHeight/imageWidth*100)+"%");
See this fiddle for a demo.
Here's what I'm trying to draw with HTML and CSS:
I'm trying to drawn an arc with fill inside it, I've tried using border radius, here's how far I could come .
HTML Code:
<div class="box"></div>
CSS Code:
.box {
width:500px; height:100px;
border:solid 5px #f9955e;
border-color:#f9955e transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}
Any help would be appreciated.
How about this:
.box{
position:relative;
background:#fff;
display:block;
width:100px;
height:100px;
border-radius: 50% / 100px 0 0 0;
}
.box::before{
position:absolute;
z-index:-1;
width:100%;
height:100%;
background:#f9955e;
content:"";
}
It doesn't require any change to your html or have the need for a wrapping div. It's just pure CSS.
Here's the jsfiddle: https://jsfiddle.net/h2or0xa1/
Ok, so here's the explanation:
I got rid of your borders, we're not using those any more.
I've set the .box div to have a border radius that creates an arc on the left hand side (assume you know what this is as it's in your example). Set the background of the .box div to white.
Added a ::before pseudo element which essentially creates a div "over the top of" the .box div. To move it behind the div I positioned it absolutely and gave it a z-index of -1 which pushes is behind the .box div. The background colour of this ::before pseudo element is the orange you provided. Essentially the ::before pseudo element creates a div the same size as box, colours it, and pushes is behind .box
You can create the arc using a combination of square and circle overlapping it. The combination can be hidden within a container of half the width and half the height of the square/circle.
JSfiddle Demo
.container {
height: 75px;
overflow: hidden;
width: 75px;
}
.box {
width: 150px;
height: 150px;
background: orange;
position: relative;
z-index: -1;
}
.box::after {
position: absolute;
display: block;
content: " ";
border-radius: 50%;
background: white;
width: 100%;
height: 100%;
}
<div class="container">
<div class="box"></div>
</div>
So I have a html page and a fixed image as my header but i want to also have a fixed navbar right underneath where i can have buttons that link to another page on my server
here is my code
<!DOCTYPE HTML PUBLIC>
<title>Equinox Web Chatroom Server</title>
<style type="text/css">
body{
margin:0;
padding:header-<length> 0 0;
}
div#header{
position:absolute;
top:0;
left:0;
width:500%;
height:header-<length>;
}
#media screen{
body>div#header{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div
id="header"><img src="http://192.168.0.143/images/header.png" width="1700" height="46" alt="logo"<br>
<p>
<table>
<tr>
<td bgcolor= "black">Server Index Chat Room</td>
</tr>
</table>
</p><br>
</div>
If you want to fix elements in place in relation to the viewport, then the CSS position: fixed property is the right way to go.
This might be what you're trying to do: http://jsfiddle.net/hh1kuxyh/
As you scroll up and down you'll notice the header and navigation bar stay in place.
HTML
<div id="container">
<div id="header"><h2>HEADER IMAGE</h2></div>
<div id="navbar"><span>NAVIGATION MENU</span></div>
</div>
<div id="main-content">
<p>lots of text here</p>
</div><!-- end #main-content -->
CSS
* {
margin: 0;
padding: 0;
}
#container {
width: 98%;
height: 230px;
position: fixed;
top: 0;
}
#header {
height: 150px;
background-color: chartreuse;
text-align: center;
}
#header h2 {
padding-top: 25px;
}
#navbar {
height: 75px;
background-color: #aaa;
text-align: center;
border: 2px solid black;
}
#navbar span {
line-height: 75px;
font-weight: bold;
}
#main-content {
margin-top: 235px;
}
If you want to fix an element in place in relation to another element, then you may need to use a bit of jQuery. http://jsfiddle.net/8086p69z/8/
Also see my two answers here:
Position fixed within container element instead of the browser / viewport
Lastly, I tried to work with your code but it contained many errors. For example, your code block is missing the <html>, <body> and <head> elements.
Always run your code through the W3C Mark-Up Validation Service to check for errors and standards compliance.
Hope this helps. Good luck!
I know that there is some manner to show a new window, fixed on screen, while another part of site gonna disable and on under of a dark and transparent cover. But I do not know these ways and techniques names. So I write my own codes to create something like them. My question is, what is the common method for doing this? here is my code...
<!DOCTYPE HTML>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="bg_cover">
</div>
<div id="inside_box">
</div>
<div>
<form>
<label>
<input type="button" value="run" onclick="sign_go()">
</label>
</form>
</div>
<script>
function sign_go() {
document.getElementById('bg_cover').style='z-index:80; background-color:#003399; position:fixed; top:0; left:0; height:100%; width:100%; opacity:0.5;';
document.getElementById('inside_box').style='z-index:90; background-color:white; position:fixed; left:0; right:0; height:100px; width:300px; margin:auto; margin-top:100px;';
document.getElementById('inside_box').innerHTML='<form><label><input type="text"><input type="button" onclick="sign_back()"></label></form>';
}
function sign_back(){
document.getElementById('bg_cover').style='';
document.getElementById('inside_box').style='';
document.getElementById('inside_box').innerHTML='';
}
</script>
</html>
First, you'll need a fixed element to cover the whole page and be transparent with a higher z-index and display: none;, the content will go inside. So it'll look like:
<div id="center_container">
<div id="center">
<div>Some content</div>
<span id="close_center">X</span>
</div>
</div>
#center will hold the contents here and #center_container just cover the page.
#center_container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: rgba(128, 128, 128, 0.5); /* transparency */
z-index: 20;
}
#center {
position: relative;
margin: 50px auto;
border-radius: 10px;
}
#close_center {
position: absolute;
top: -10px;
right: -10px;
cursor: pointer;
}
And then on a button click you show it and set close button to close it.
jsfiddle DEMO
The thing you are looking for is called modal. You can create it using jQuery or pure CSS. Check out below article to create model.
Check out this article to create jQuery Modal
Or Pure CSS3 Modal