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;
}
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 working on a website for my company. I have a div on the right that is gray that extends down to the bottom. It works on every page except this one. I cannot figure out why it won't extend down to the footer. I have created a jsfiddle for it. If you inspect the divs in the fiddle, you will notice that .leftSide, .mainWrap, and .paddingWrap are not extending down past the "Brochures" title at the top. I can tell this because when I hover over each those divs in the html, the blue and purple only covers the "Brochures" title. I think that is what is tricking .rightSide into not extending down where it should go. I have tried my best to remove all the code in the fiddle that is not relevant to my question.
Fiddle
Relavant CSS:
section.rightSide
{
position: absolute;
right: 0;
top: 0;
bottom: 0;
min-height: 900px;
/*float: right;*/
width: 238px;
background: rgba(200, 200, 200, 0.7);
padding: 15px 5px 25px;
z-index: 1;
}
.leftSide
{
padding-right: 248px;
padding-top: 15px;
}
.paddingWrap
{
padding: 15px 70px;
}
section.mainWrap
{
width: 100%;
margin: 0 auto;
font-size: 1.2em;
}
Your need to put this in your CSS: -
.main-content {
overflow: hidden;
}
See http://jsfiddle.net/gyzhZ/2/
So I have this code here: http://jsfiddle.net/nUwgX/ which has a little arrow at the bottom. What I'd like to happen is when the window get's resized is to keep the arrow about 15% from the bottom of the screen but I'm not sure how I'd do that. Any help would be appreciated.
HTML:
<div class = "container">
<div class = "top-wrapper">
<a id = "name" href = "#">Bigfoot Games</a>
</div>
<div class = "bottom-wrapper">
<p>Content</p>
</div>
</div>
CSS:
.container {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
padding: 0;
text-align: center;
}
.top-wrapper {
position: relative;
background: #0f0f0f;
height: auto;
height: 100%;
max-height: 900px;
width: 100%;
margin: 0 auto;
padding: 0;
display: table;
}
.top-wrapper:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(15, 15, 15, 0);
border-top-color: #0f0f0f;
border-width: 30px;
margin-left: -30px;
}
#name {
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 20px;
color: white;
font-size: 80px;
text-decoration: none;
margin: auto 0;
}
.bottom-wrapper {
background: white;
margin: 0 auto;
padding: 20px;
}
Edit: Okay, so saying that I wanted the arrow about 15% above is not what I meant! Ha! What I mean is, I want the .top-wrapper to be 100% so that it covers the whole window, and you scroll down to see the .bottom-wrapper - however when the screen is resized (other than my 1920 x 1080 resolution) the arrow get's hidden just out of sight, what I'd like is the arrow to be visible regardless of resolution and have the look (in terms of padding/distance) as a 1920 x 1080 resolution.
Change the css of .top-wrapper to only take up 85%, that leaves 15% for the "arrow" on the bottom to take up.
.top-wrapper {
...
height: 85%;
...
}
see the jsfiddle:
http://jsfiddle.net/nUwgX/1/
Change your .top-wrapper height to 85%
I changed just that in the jsfiddle and it maintains when the screen is resized. If that isn't what you are looking for, please elaborate on the question.
Good Luck!
If you want to keep your bottom-wrapper at the bottom fixed position ...
Replace your .bottom-wrapper class with below
.bottom-wrapper {
position:fixed;
bottom: 0px;
height: 15%;
width: 100%;
background-color: white;
margin: 0 auto;
}
.bottom-wrapper p{
padding-top: 20px;
}
Then change .top-wrapper:after to .bottom-wrapper:before
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/
I'm writing a small website to learn HTML and CSS and I'm having trouble getting my content to scroll in any direction.
When the browser window is resized to the point where any of the content cannot fit, instead of allowing a scroll, it just disappears. The Login button's div is supposed to appear 950px from the left. Meaning that if the browser window is smaller then that, it will allow you to scroll over, right?
And the News box will display any content written until it reaches the bottom of the browser window. Then it won't scroll or display.
Any suggestions?
The HTML is here is here and the CSS is here.
Your CSS has many position:fixed attributes in it. When an object's position is set to fixed, it will stay stationary, even if you are scrolling. Therefore, there was nothing that can move, so you couldn't scroll. Try changing your CSS to the following:
body {
background-color: #222222;
overflow: auto;
color: #ffffff;
font-family: verdana, sans-serif;
}
a { color: #ffffff; }
a:visited { color: #ffffff; }
#page_header {
margin-top: 55px;
margin-left: 100px;
font-size: 50px;
}
#user_info {
/*right: 50px;*/
left: 950px;
top: 60px;
position:absolute;
}
#user_info a {
padding: 15px;
text-decoration: none;
font-size: 35px;
}
#user_info a:hover {
background-color: #606060;
}
#boxes {
margin-top: 100px;
margin-left: 100px;
}
#left_content_box {
padding: 20px;
background-color: #00cdcd;
width: 600px;
float: left;
}
#left_content_box header {
top: 15px;
left: 50px;
font-size: 25px;
}
#left_content_box section {
padding: 10px;
}
#left_content_box section header {
padding-top: 25px;
position: relative;
font-size: 20px;
left: 0px;
}
#left_content_box section p {
position: relative;
top: 20px;
left: 10px;
font-size: 15px;
overflow: auto;
}
This will keep everything in the same position as it was, except the page can now scroll when the browser is resized to a point that it cannot display all its contents.