What I am trying to do is, placing the two div blocks, CV and Contact at the bottom of the page, and when hovered over it, they would cover the whole page like they do at this state. I tried to move them with margin-top property, but they didn't behave proper when i hovered on them. Also, I want no scroll bars that is whatever user's screen size is, the boxes always appear in corner of page. Is my solution is valid for this, or do i need some javascript to do these? Here is my jsfiddle:
http://jsfiddle.net/cR9NL/
what positions should I use in this situation: absolute or relative?
html code is still the same, below is my css for you and demo:
CSS
html, body { height: 100%; max-width: 100%; margin: 0; padding: 0; }
#container {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
#container div {
height: 25%;
width: 15%;
text-align: center;
}
#container>div:hover {
height: 100%;
width: 100%;
text-align: center;
position: absolute;
z-index: 5;
}
#upper-left{
background: #77cc00;
float: left;
border: solid 3px #99ee22;
}
#upper-right{
background: #ffdd22;
float: right;
border: solid 3px #ffff44;
}
#lower-right {
position: absolute;
bottom:0;
right: 0;
background: #55bbff;
border: solid 3px #77ddff;
}
#lower-left{
position: absolute;
bottom: 0;
left: 0;
background: #ff5522;
border: solid 3px #ff7744;
}
#container>div>p {
font-family: Tahoma;
margin: 28% auto;
font-weight: 900;
color: white;
font-size: 30px;
}
DEMO
http://jsfiddle.net/bartekbielawa/cR9NL/2/
Make the lower-left and lower-right divs positioned absolute, with 0 for the bottom value and 0 for the left and right values, respectively.
Fiddle :) :
position:absolute;
bottom:0;
right:0;
http://jsfiddle.net/cR9NL/1/
Related
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
I am making a website for my college course and I am having problems getting the button heights in my slide show to match up. I was wondering if anyone could give me a clue as to how to get them both to be at the same height?
This is my css for the slide show:
/=== SLIDESHOW SECTION ===/
#container
{
width: 90%;
height: 700px;
border: none;
margin: 0 auto;
position: relative;
}
#container > img
{
width: 100%;
height: 100%;
position: absolute;
}
#container > .btn
{
position: absolute;
width: 50px;
height: 50px;
border: none;
border-radius: 25px;
top: 350px;
background: #000000;
color: #ffffff;
font-size: 20px;
}
#container>#btn1:hover
{
box-shadow: 10px 0px 20px 0px #343d46 ;
}
#container>#btn2:hover
{
box-shadow: -10px 0px 20px 0px #343d46;
}
#container>#btn2
{
position: relative;
float: right;
}
picture of the problem
change your
#container>#btn2
{
position: relative;
float: right;
}
to
#container>#btn2
{
right:0;
}
Try adding this before #container>#btn2:
#container>#btn1
{
position: relative;
float: left;
}
Absolute positioning generally shouldn't be applied to classes (multiple elements).
I would remove the absolute positioning on your .btns and use flexbox on your container, like so:-
#container
{
width: 90%;
height: 700px;
border: none;
margin: 0 auto;
display: flex; /* adds flexbox to container */
align-items: center; /* vertically aligns everything in container */
justify-content: space-between; /* spaces the buttons as far away `enter code here`from each other as possible */
}
You can then add padding to your container for finer adjustments of your buttons horizontal distance from the container edge.
I'm having troubles animating change in height from bottom to top. Currently, the entire legend itself gets pushed down as the height of each color changes: http://jsfiddle.net/b7q9781o/
How can I make it so the legend stays at its position and the height changes from its base (bottom) to top?
If I add float: left; to #holder, it kind of works the way I want to but it gets flipped. Try it.
#holder {
border: 1px solid red;
margin: 10em;
display: block;
height: 150px;
position: relative;
}
.legend {
height: 5px;
width: 14px;
display: inline-block;
bottom: 0;
position: relative;
}
please try this one:
#holder {
border: 1px solid red;
margin: 10em;
display: block;
height: 150px;
position: fixed;
float: left;
}
DEMO
I'm working a friend's site: http://www.lauraradniecki.com and I'm trying to get the newsletter bar to stay aligned with the body text, even when the browser is resizing. This works fine, if you're scaling down in size, but if you go up, the size between the text and the subscribe box starts to move away from each other. I can't figure out how to get this fixed
#inside {
margin-left: 11%;
max-width: 530px;
font-size: 100%;
float: left;
}
#insideright {
float: right;
margin-right: 12%;
}
#insideright .formsubmit {
margin: -1px 3px 1px 16px;
}
#subscribe {
background-color: #7EBFC5;
color: #fff;
padding: 30px 30px 40px;
height: 100% !important;
overflow: hidden;
}
Sorry if that's confusing- it's my first time posting here.
I would put the newsletter bar text in a container that is the same size as the body text container. Then set the left and right margins just the same as the body text containers.
Essentially you would make a smaller version of the main content container inside itself.
Assuming from your explanation and code the inside styles should be IN the subscribe id...
#inside {
margin-left: 11%;
max-width: 530px;
font-size: 100%;
left: 0px;
position: absolute;
}
#insideright {
right: 0px;
margin-right: 12%;
position: absolute;
}
#insideright .formsubmit {
background: #ccc;
position: absolute;
right: 0px;
}
#subscribe {
background-color: #7EBFC5;
color: #fff;
padding: 30px 30px 40px;
height: 100% !important;
overflow: hidden;
}
We have to support the last two revisions of IE, Chrome and Firefox and I have a feeling this isn't possible with IE 7/8, but perhaps I'm missing something
I have a footer that is moved up behind a content area by -280px. This content area is moved up over a header area by -230px. As a result I have a blank area at the bottom of my page of approx 320px. I can fill this and make it appear to be the bottom end of the gradient, but I'd really rather just cut it out, so there's no scroll bar to nothing.
In the example code below -
<div id = "page">
<div id = "topbar">
</div>
<div id = "header">
</div>
<div id = "content">
</div>
</div>
<div id = "footer">
I AM THA FOOTAH<br/> So much cooler than the header these days
</div>
body
{
/* background-color: #040e22; */
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
div
{
display: block;
}
#page
{
background-color: white;
margin: 0px auto;
padding: 0px;
position: relative;
}
#topbar
{
height: 60px;
background-color: #112247;
color: white;
position: static;
}
#header
{
background-color: navy;
color: yellow;
height: 240px;
position: relative;
}
#content
{
min-height: 280px;
background-color: green;
width: 480px;
margin: auto;
position: relative;
top: -230px;
z-index: 1;
height: 2000px;
}
#footer
{
/*background: url("footerGradient.png") repeat-x 50% 0%;*/
background-color: navy;
color: white;
text-align: center;
padding-top: 60px;
height: 220px;
top: -280px;
position: relative;
}
.inner
{
width: 940px;
margin: auto;
}
how do I get rid of the white under the navy footer?
just change in your #footer from top: -280px to margin-top: -280px voila!
position relative will move the element relatively to its original location but will perserve its space thus rendering empty area, negative margin will move your element including its bounding space and will do what you need.
You can change the footer position from relative to static like so:
#footer
{
/*background: url("footerGradient.png") repeat-x 50% 0%;*/
background-color: navy;
color: white;
text-align: center;
padding-top: 60px;
height: 220px;
bottom: 0px;
width: 100%;
position: fixed;
}
You might want to take a look at this sticky footer page-- you can modify that technique by NOT making the height of the footer and the negative margin of the previous element the same; you would want the negative margin to be greater.