My first question here. Hope this is OK.
I'm trying to redo a webpage I hacked together a long time ago. Right now it's barebones and I'm just trying to get some of the main stuff to work. I have a header, navbar (on the left), a content section (on the right), and a footer. The navbar and content are under and above the the header and footer, respectively. Within the navbar I have some "buttons" that I want to scroll down and up when the page scrolls. It's kinda working except for one thing:
When the buttons scroll to the bottom, they run out of the navbar and into the footer. When scrolling up, it's fine, they do not run into the header. Just when they scroll down. I want to keep these buttons contained within the navbar.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link type="text/css" rel="stylesheet" href="newpage.css"/>
<title>Daruma An Farms</title>
</head>
<body>
<div id="header"></div>
<div id="navBar">
<div class="inner" id="inner1">Home</div>
<div class="inner" id="inner2">About</div>
<div class="inner" id="inner3">Shop</div>
<div class="inner" id="inner4">Contact</div>
<div class="inner" id="inner5">日本語</div>
</div>
<div id="content"><p>Hello. This is the new page</p>
<p>Hopefully this stuff will work</p>
<p>And we can get it up soon!</p>
</div>
<div id="copyright">Copyright</div>
</body>
</html>
Here is the CSS:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: white;
background: #95954a;
}
div {
border-radius: 5px;
}
/* This is the header ID. I would like a static pic to go here,
centered, and stuck at the top. Right now I just have a block header
as a place holder.
*/
#header {
height:259px;
width: 100%;
background-color: #965d4a;
background: url("images/logo4.jpg") no-repeat center top;
}
/* This is the navbar, which will contain the navigation buttons.
I want it to be long enough to contain all the buttons and
have a bit of empty space on the bottom.
*/
#navBar {
height: 700px;
width: 13%;
background-color: #965d4a;
position: absolute;
margin: 5px 0px 5px 130px;
float: left;
}
/* This is the CSS for the "buttons" in the nav bar.
I want them to stay on the page when the user scrolls.
I have separated the common elements into the .inner class
and put the unique elements into the IDs.
*/
.inner {
height: 50px;
width: 12%;
position: fixed;
margin-left: 6px;
padding-top: 10px;
text-align: center;
font-size: 2em;
background-color: #5d964a;
}
#inner1 {
margin-top: 5px;
}
#inner2 {
margin-top: 75px;
}
#inner3 {
margin-top: 145px;
}
#inner4 {
margin-top: 215px;
}
#inner5 {
margin-top: 285px;
}
/* This is the content area. Will have the content of the site.
I would like this to contain all the content with no extra space
at the bottom for large content areas, such as the about page
or the shop page. But I don't mind it having some extra space
at the bottom for the low content pages, like contact.
*/
#content {
width: 700px;
height: 680px;
float: right;
background-color: #965d4a;
margin: 5px 130px 5px 0px;
padding: 10px 10px 10px 10px;
}
/* This is the copyright section. I want this at the bottom of every
page. Small type, centered.
*/
#copyright {
width: 879px;
height: 50px;
background-color: #965d4a;
clear: both;
font-size: .7em;
text-align: center;
margin-left: 130px;
margin-right: 130px;
}
I hope I have that all formatted right and you can see where my problem is. I think it should be something I'm missing within the .inner class s and the #navBar ID .
Thanks for your help.
You need to adjust the height of the header, see fiddle https://jsfiddle.net/sxh0n7d1/35/
If you want it to be more diverse you will need to use javscript.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: white;
background: #95954a;
}
div {
border-radius: 5px;
}
/* This is the header ID. I would like a static pic to go here,
centered, and stuck at the top. Right now I just have a block header
as a place holder.
*/
#header {
height:180px;
width: 100%;
background-color: #965d4a;
background: url("images/logo4.jpg") no-repeat center top;
}
/* This is the navbar, which will contain the navigation buttons.
I want it to be long enough to contain all the buttons and
have a bit of empty space on the bottom.
*/
#navBar {
height: 680px;
width: 13%;
background-color: #965d4a;
position: absolute;
margin: 5px 0px 0px 130px;
float: left;
}
/* This is the CSS for the "buttons" in the nav bar.
I want them to stay on the page when the user scrolls.
I have separated the common elements into the .inner class
and put the unique elements into the IDs.
*/
.inner {
height: 50px;
width: 12%;
position: fixed;
margin-left: 6px;
padding-top: 10px;
text-align: center;
font-size: 2em;
background-color: #5d964a;
}
#inner1 {
margin-top: 5px;
}
#inner2 {
margin-top: 75px;
}
#inner3 {
margin-top: 145px;
}
#inner4 {
margin-top: 215px;
}
#inner5 {
margin-top: 285px;
}
/* This is the content area. Will have the content of the site.
I would like this to contain all the content with no extra space
at the bottom for large content areas, such as the about page
or the shop page. But I don't mind it having some extra space
at the bottom for the low content pages, like contact.
*/
#content {
width: 700px;
height: 680px;
float: right;
background-color: #965d4a;
margin: 5px 130px 5px 0px;
padding: 10px 10px 10px 10px;
}
/* This is the copyright section. I want this at the bottom of every
page. Small type, centered.
*/
#copyright {
width: 879px;
height: 50px;
background-color: #965d4a;
clear: both;
font-size: .7em;
text-align: center;
margin-left: 130px;
margin-right: 130px;
}
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 need to move my top horizontal navbar all the way to the right beside my header that says "Best TV Ever" I've floated it to the right, now it has to move up to the top of the page.
How do I do this?
Here is the jsfiddle: https://jsfiddle.net/qkLgqmfh/
As well as the code.
h1{
background-color: black;
background-image: url(logo.png);
background-repeat: no-repeat;
font-family: Peralta;
color: white;
height: 100px;
padding-top: 25px;
padding-left: 150px;}
h2{
font-family: Peralta;
text-align: center;
height: 25px;
background-color: white;
padding-top: 0;
height: 50px;
}
p{
border-bottom: 1px solid black;
padding-bottom: 3em;
display: block;
overflow: hidden;
height:130px;
}
img{
float: left;
margin-right: 1em;
width: 150px;
height: 100px;
padding-left: 10px;
border-radius: 20px;}
ul li {
display: inline-block;
float: right;
padding-top: 0;
}
.topnav ul li a:link{
text-decoration: none;
color: black;
background-color: white;
border-radius: 50%;
margin: 15px;}
<body>
<div class="wrapper">
<div id="masthead">
<h1>Best TV Ever</h1>
</div>
[insert menu toggle here]
[insert menu checkbox here]
<div class="topnav">
<ul>
<li>50s</li>
<li>60s</li>
<li>70s</li>
<li>80s</li>
<li>90s</li>
</ul>
</div>
I've been staring at this computer screen for 6 hours now and feel like my mind has just given up. I'm sure it's simple... but for the life of me I cant figure it out!
I see that you have your float: right; on the li instead of on the .topnav. That is your main issue.
I changed that and removed a lot of cluster and this is what I got: https://jsfiddle.net/qkLgqmfh/3/
I think that is what you wanted to achieve.
Edit: If you want the black background on the whole width, put the topnav and h1 together in a new div and set background-color: black;. And since the div only contains floated elements, it will render with 0 height and width, so you need to set overflow: hidden; as well (unless you want to give it a specific height).
Regarding the size of the links, you can just change the font-size.
Have a look: https://jsfiddle.net/qkLgqmfh/5/
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;
}
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.
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.