In the website below website's layout in the navigation,when hovered on the buttons it rises up and when the mouse is taken away it sinks down,how to do it either in css or other ways ?
www.bigfishgames.com/
You can do it with plain CSS:
<!DOCTYPE html>
<html>
<head>
<style>
div { border-radius: 4px; width: 100px; height: 20px; background: green; position: absolute; top: 50px; left: 50px; text-align: center; padding: 10px 0px; }
div:hover { top: 40px; padding-bottom: 20px; }
</style>
</head>
<body>
<div>Howdy</div>
</body>
</html>
Note how both padding-bottom and height are changed to give the illusion that the div is expanding 'upwards'.
Related
I'm experimenting with a simple example in order to better understand the basics of CSS float, position, height, and margin properties.
As you can see in the image, I'm trying to find a simple way (without using CSS Grid or Flexbox) to automatically align the bottom border of both the Sidebar and the Main content divs to the top border of the Footer.
Is there a simple way to use height and/or margin properties with 'auto' or '0' values to do this? I don't want to specify a number of pixels or a % height for either the Sidebar or Main divs. I'd rather just "glue" the bottom border of each to the top border of the Footer.
Here is my CSS code:
* {
box-sizing: border-box;
background: #ccc;
font-family: arial;
}
body {
margin: 0;
padding: 0;
}
h2 {
padding: 0;
margin: 0;
}
.navbar,
.sidebar,
.main,
.footer {
display: flex;
align-items: center;
justify-content: center;
}
.navbar {
width: 100%;
height: 70px;
border: 10px solid green;
}
.sidebar {
width: 20%;
float: left;
border: 10px solid red;
/* Rather than specifying a specific height for .sidebar, I want to align
the bottom border of the sidebar to the top border of the footer automatically.
Is there a possible combination of height and/or margin-bottom
that can accomplish this? (Note: without using CSS Grid or Flexbox) */
height: 400px;
margin-bottom: ;
}
.main {
width: 80%;
float: right;
border: 10px solid blue;
/* Same comment here as sidebar above. */
height: 350px;
margin-bottom: ;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 140px;
border: 10px solid purple;
}
And here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Playground</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar"><h2>Navbar</h2></div>
<div class="sidebar"><h2>Sidebar</h2></div>
<div class="main"><h2>Main</h2></div>
<div class="footer"><h2>Footer</h2></div>
</body>
</html>
Again, I know I can do this easily with CSS Grid, but I'd rather learn more about the capabilities and limitations of the "height" and "margin" properties first.
Thanks!
UPDATE:
See below, I was able to achieve the layout I want by using "position: fixed" and explicitly locating the bottom and left/right sides of the Sidebar and Main divs. I also created --navbar-height and --footer-height variables so I only need to type those values once.
However, rather than using "position: fixed", I would rather use "float" and some other way to automatically locate the bottom edge of the Sidebar and Main elements to the top of the Footer. With my current code structure, is there some way to use the --footer-height variable to locate that bottom edge of those elements?
:root {
--navbar-height: 70px;
--footer-height: 140px;
}
* {
box-sizing: border-box;
background: #ccc;
font-family: arial;
}
body {
margin: 0;
padding: 0;
}
h2 {
padding: 0;
margin: 0;
}
.navbar,
.sidebar,
.main,
.footer {
display: flex;
align-items: center;
justify-content: center;
}
.navbar {
border: 10px solid green;
width: 100%;
height: var(--navbar-height);
}
.sidebar {
border: 10px solid red;
width: 20%;
/* float: left; */
position: fixed;
top: var(--navbar-height);
bottom: var(--footer-height);
}
.main {
border: 10px solid blue;
width: 80%;
/* float: right; */
position: fixed;
right: 0;
top: var(--navbar-height);
bottom: var(--footer-height);
}
.footer {
border: 10px solid purple;
width: 100%;
position: fixed;
bottom: 0;
height: var(--footer-height);
}
You can set position:fixed for sidebar and main divs as well.
Then set bottom: for the main and sidebar to the height of your footer or more to have them aligned above the the footer:
UPDATE: Yes you can achieve this with display:block; . Then use float property. So if any of them changes in term of height, the others will change related to the changed one which can be footer
* {
box-sizing: border-box;
background: #ccc;
font-family: arial;
}
h2 {
padding: 0;
margin-top: 0;
}
.navbar {
margin-bottom: 50px;
width: 100%;
height: 70px;
border: 10px solid green;
}
.parent{
width: 100%;
text-align: center;
}
.child{
display: block;
}
#sidebar {
float: left;
width: 30%;
border: 10px solid red;
height: 200px;
}
#main {
float: left;
width: 70%;
border: 10px solid blue;
height: 200px;
}
#footer {
float: left;
width: 100%;
height: 100px;
border: 10px solid purple;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Playground</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar"><h2>Navbar</h2></div>
<div class="parent">
<div class="child" id="sidebar"><h2>Sidebar</h2></div>
<div class="child" id="main"><h2>Main</h2></div>
<div class="child" id="footer"><h2>Footer</h2></div>
</div>
</body>
</html>
JsFiddle: JsFiddle
Below code will produce a centered circle .
In Chrome circle is displaced by 10% from top.
But In Firefox it is not. Why
.game
{
height: 40vw;
width: 40vw;
background-color: #333;
border-radius: 100%;
text-align: center;
position: relative;
margin:0 auto;
box-shadow: 0px 0px 1.6vw #333;
top:10%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="game.css">
</head>
<body>
<div class="game">
</div>
</body>
</html>
Output in Chrome:
enter image description here
Output in Firefox:
enter image description here
Have you set body and html in your css?
html, body {
height: 100%;
width: 100%
}
A) Insert this code to style:
html, body {
height: 100%;
}
html, body {
height: 100%;
}
.game {
height: 40vw;
width: 40vw;
background-color: #333;
border-radius: 100%;
text-align: center;
position: relative;
margin:0 auto;
box-shadow: 0px 0px 1.6vw #333;
top: 10%;
}
<div class="game"></div>
make sure your Firefox tab window is zoom out.
I wanna implement this idea by css :
What is the best approach to do that in CSS ?
Thanks very much !!
UPDATE
I've did this trick before with Headings , More information here :
Putting Heading within 2 horizontal lines in CSS
But when i tried to edit the heading version also didn't work with buttons .
http://jsfiddle.net/pB9MY/
body { background: #fff; }
h3 {
width: 500px;
font: 30px Arial;
font-weight: normal;
text-align: right;
position: relative;
}
h3 span {
background: #fff;
margin-right: 15%;
padding: 0 20px;
}
h3:before {
content: "";
width: 100%;
left: 0;
top: 50%;
position: absolute;
z-index: -1;
height: 0;
border-top: 8px solid grey;
opacity:.2
}
button{
background-color:green;
border:1px solid green;
border-radius:5px;
vertical-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h3><span><button>Hello</button></span></h3>
</body>
</html>
Is this what you're after?
Create a div for the text...
<div class="rightrounded">Some Text</div>
And apply the appropriate css...
.rightrounded {
width: 100px;
float: right;
border-radius: 5px;
background-color: #008000;
color: #fff;
text-align: center;
}
Fiddle here
The following layout works fine in every browser (Firefox, Chrome, Opera), except Internet Explorer 8:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<head>
<body>
<div id="divMain" class="CMain">
<div id="divL" class="CLeft">
</div>
<div id="divR" class="CRight">
</div>
</div>
</body>
</html>
CSS:
.CMain {
position: absolute;
overflow: hidden;
top: 20px;
left: 20px;
right: 20px;
height: 75%;
min-width: 500px;
min-height: 400px;
max-height: 550px;
background-color: cyan;
border: 1px solid #000000;
margin: 0 auto;
}
.CLeft {
position: absolute;
overflow: visible;
top: 0px;
right: 50%;
width: 49%;
height: 100%;
min-width: 200px;
min-height: 450px;
max-width: 450px;
max-height: 550px;
background-color: yellow;
border: 1px solid #000000;
margin: 0 auto;
padding: 0px;
}
.CRight{
position: absolute;
overflow: visible;
top: 0px;
left: 50%;
width: 49%;
height: 100%;
min-width: 200px;
min-height: 450px;
max-width: 450px;
max-height: 550px;
background-color: blue;
border: 1px solid #000000;
margin: 0 auto;
padding: 0px;
}
The two inner divs are supposed to be back-to-back in the center of the main div, and they clearly are in every browser except IE8. In IE8, the left div goes to the left side, not in the center.
Am I doing something wrong? ( please don't suggest removing min/max-width/height constraints, they are needed ). Any suggestions would be greatly appreciated.
Here is a fiddle with this setup: http://jsfiddle.net/fNtJU/
imageshack screenshot link ie8: http://img831.imageshack.us/img831/3838/ie8g.jpg
Have you tried setting a width on the main container? for example, width: 90%; and lose the left:20px;/right:20px;. I don't think the child containers can calculate a position when the parent doesn't have an explicit width specified, even with max-width. I can't test on ie8 currently though.
I want a centered header DIV and inside it the following absolutely positioned DIVs:
logo
menu
line
title
But my HTML/CSS has two problems:
for some reason the page is now wider (see bottom scroll bar)
If my title is longer, I want it to be right-aligned of course
What I really want is a centered DIV and inside that I want to position DIVs absolutely within their centered parent (but not absolute since they wouldn't be centered). Is this possible?
How would you accomplish this layout?
alt text http://tanguay.info/web/external/centeredLayoutProblem.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#headerArea {
background-color: yellow;
margin: 0px auto;
width: 760px;
height: 150px;
}
#logo {
position: relative;
top: 20px;
left: 20px;
background-color: orange;
text-align: center;
font-size: 32pt;
width: 150px;
padding: 10px;
z-index: 10;
}
#menu {
position: relative;
top: -52px;
right: -480px;
background-color: tomato;
text-align: center;
font-size: 14pt;
width: 240px;
padding: 10px;
}
#title {
position: relative;
top: -35px;
right: -620px;
font-style: italic;
font-size: 14pt;
}
#line {
position: relative;
top: -60px;
border-bottom: 1px solid blue;
margin: 0 20px;
}
</style>
</head>
<body>
<div id="headerArea">
<div id="logo">LOGO</div>
<div id="menu">One Two Three Four Five</div>
<div id="title">This is the Title a Bit Longer</div>
<div id="line"></div>
</div>
</body>
</html>
Make your #headerArea div position:relative. Then, for all your inner divs, you can position:absolute in relation to #headerArea.
Like so:
<style type="text/css">
#headerArea {
position:relative;
background-color: yellow;
margin: 0px auto;
width: 760px;
height: 150px;
}
#logo {
position: absolute;
top: 20px;
left: 20px;
background-color: orange;
text-align: center;
font-size: 32pt;
width: 150px;
padding: 10px;
z-index: 10;
}
#menu {
position: absolute;
top: 20px;
left: 480px;
background-color: tomato;
text-align: center;
font-size: 14pt;
width: 240px;
padding: 10px;
}
#title {
position: absolute;
top: 80px;
left: 20px;
width: 720px;
text-align: right;
font-style: italic;
font-size: 14pt;
}
#line {
position: absolute;
width: 720px;
height: 1px;
top: 70px;
border-bottom: 1px solid blue;
margin: 0 20px;
}
</style>
You should use the 'left' property instead of 'right' since 'right' doesn't work in ie6.
The 'left' and 'top' values I've put in may be a little off, but you can tweak to get what you want.
EDIT:
I've corrected the pixel values, and added a width to your line div, and a height since IE defaults all divs to one text line high.
Also, your title div should be full width with text-align right so that the title will expand to the left instead of the right.
Yes. If you do #headerArea{position:relative;} you can have position:absolute on the children and their position will be relative to the parent.
Use position:relative on the header (as has already been suggested) so that it becomes a layer, then the absolutely positioned elements inside it will use that element as origin.
You can place the line before the logo in the markup, then you don't need to use z-index to put the logo on top of the line. All browsers doesn't handle z-index the same...
By placing the title to the right, it will expand to the left as needed.
Use a top border instead of a bottom border on the line, that elliminates the problem with IE wanting to make the element at least one character high.
I removed some unneccesary styles, and added a title to the page (as that is required in a proper html document).
This will display consistently in Firefox 3, IE 7, IE 8, Opera 9 and Chrome 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://data.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
body {
margin: 0;
padding: 10px;
}
#headerArea {
position: relative;
background: yellow;
margin: 0 auto;
width: 760px;
height: 150px;
}
#headerArea div {
position: absolute;
}
#logo {
top: 20px;
left: 20px;
background: orange;
text-align: center;
font-size: 32pt;
width: 150px;
padding: 10px;
}
#menu {
top: 20px;
right: 20px;
background: tomato;
text-align: center;
font-size: 14pt;
width: 240px;
padding: 10px;
}
#line {
top: 80px;
left: 20px;
width: 720px;
border-top: 1px solid blue;
}
#title {
top: 90px;
right: 20px;
font-style: italic;
font-size: 14pt;
}
</style>
</head>
<body>
<div id="headerArea">
<div id="line"></div>
<div id="logo">LOGO</div>
<div id="menu">One Two Three Four Five</div>
<div id="title">This is the Title a Bit Longer</div>
</div>
</body>
</html>
(You may need to adjust the positioning to get it exactly as you want, but that should be quite easy.)