I'm working on a little design for a site that's comprised of the main content being in a square roughly 80% the width of the site, and then a header, footer and two sidebars being signalled via lines. I have the header, footer, lines and content all working, and they all (mostly) stay in the right place when resized. However, I can't for the life of me work out how to get the square in the center to continue to fill the section in the middle of the screen (without overlapping, or having a scroll bar!)
I've attached the code for my square and some screenshots of what I'm attempting to do and what currently happens below. Other than my innercontent div, there're no divs on the side, and a header and footer div above and below.
*Update: Added code as requested. I believe this is all that's used in the example I provided in the screenshots, other than the lines, which are produced via some JS. I've included the important css here too, so to allow me to link to my JS Fiddle with it all:
/* ===================
Inital Styles
=================== */
html {
color: #fff;
font-size: 1em;
background: #3f51b5;
line-height: 1.4;
animation: fade 5s
}
::-moz-selection {
background: #6534ff;
text-shadow: none;
}
::selection {
background: #3f51b5;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
body {
font: 16px/26px Helvetica, Helvetica Neue, Arial;
}
h1,
h2,
h3,
h4 {
color: #fff;
font-family: 'Montserrat', sans-serif;
line-height: normal;
}
h1 {
font-size: 25px;
letter-spacing: 3.1;
}
h2 {
font-size: 14px;
font-weight: 500;
text-align: justify;
}
h3 {
font-family: 'Space Mono', monospace;
font-weight: 400;
}
h4 {
font-size: 19px;
}
.inline {
display: inline;
}
.clear {
clear: both;
display: block;
content: "";
}
.center {
margin: auto;
width: 50%;
padding: 10px;
}
.header-container {
height: 145px;
position: relative;
}
.header-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.title {
color: white;
text-align: center;
font-size: 40px;
font-family: 'Space Mono', monospace;
font-weight: 400;
line-height: 0px;
margin-top: 35px;
}
.subTitle {
color: white;
text-align: center;
font-size: 14px;
font-family: 'Space Mono', monospace;
font-weight: 400;
font-style: italic;
}
.innercontent {
position: relative;
height: 3vw;
width: 80%;
margin: auto;
padding-top: 32.5vw;
margin-top: -28px;
margin-left: 10.0%;
}
.green {
background: #42ab9e;
}
/* ===================
Name Collection
=================== */
#nameCollection {
text-align: center;
}
#nameText {
margin-top: -28%;
margin-left: 15%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.nameSkipButton {
margin-top: 25px;
background-size: 210% 100%;
background-image: linear-gradient(to right, #963019 50%, #16174f 50%);
-webkit-transition: background-position 0.3s;
-moz-transition: background-position 0.3s;
transition: background-position 0.3s;
border: none;
font-family: 'Space Mono', monospace;
color: #fff;
padding: 10px;
font-size: 12px;
}
.nameSkipButton:hover {
background-position: 99%, 0;
}
<body>
<div class="delay">
<div class="fade-in delay">
<div class="header-container">
<header class="header-center">
<h1 class="title" onclick="location.reload();" style="cursor: pointer;">COMPUTERIFY.IO</h1>
<p class="subTitle" onclick="location.reload();" style="cursor: pointer;">Alpha is just a fancy word for unfinished.</p>
<p class="subTitle">
</h1>
</header>
</div>
<div class="main-container">
<div id="content" class="innercontent green">
<div id="nameCollection">
<div id="nameText">
<h3>Hello. I'm the PC Generator, or PCG for short. Before we get started, can I just ask...</h3>
<h1>What's your first name?</h1>
<div>
<input type="button" style="display:none" id="btnSearch" value="Search" onclick="getUserName()" />
<span class="input input--nameCollection">
<input class="input__field input__field--nameCollection" maxlength="19" onkeydown = "if (event.keyCode == 13) document.getElementById('btnSearch').click()" type="text" id="input-25" />
<label class="input__label input__label--nameCollection" for="input-25">
<span class="input__label-content input__label-content--nameCollection">First Name</span>
</label>
</span>
</div>
<input class="nameSkipButton" id="skipName" type="button" value="I don't value my name, pick one for me" onclick="confirmSkip();" />
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/nxyg4a9x/2/
Attached screenshots demonstrating the design when it works (on a 1920x1080 display, and how it looks on resize and on mobile.
I would use flexbox if you can.
The following is a demo and you'll likely need to make adjustments to fit your needs.
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
overflow: hidden;
background-color: #3f51b5;
}
header,
main,
footer {
margin: 0 10%; // Indirect way of making element width: 80%;
border-left: 2px solid lightgray;
border-right: 2px solid lightgray;
}
header,
footer {
flex-basis: 100px;
}
main {
position: relative;
flex-grow: 1;
background-color: #42ab9e;
}
main:before {
content: '';
z-index: -1;
position: absolute;
top: -2px;
right: -100%;
bottom: -2px;
left: -100%;
display: block;
border-top: 2px solid lightgray;
border-bottom: 2px solid lightgray;
}
<header></header>
<main></main>
<footer></footer>
The most important thing that we did is use flex-grow: 1 on main which addresses your primary concern of stretching your content area to fill the appropriate space. flex-grow: 1 tells the element to take up any remaining space inside of it's parent element. So whatever space is left over from the height of the header and footer it will file up.
We use min-height on body as a starting point so that main doesn't end up a fixed size (which is what would have happened if we used height instead) and the layout fills the viewport initially even if there is not a lot of content.
You mentioned using JS to create your lines, that seems like overkill to me and can be accomplished with CSS. The lines are just borders and the only non obvious set of lines would be the horizontal lines that extend outside of main. I did this with a pseudo element that stretches itself outside of it's parent element. The top and bottom of the pseudo element are pulled outside of it's containing element equal to the border's thickness. The left and right of the pseudo element are pulled out just wide enough to always extend a little past the viewport window (I used a relative unit so it will grow with the viewport). We used overflow: hidden; on body to prevent a horizontal scrollbar that this element initially creates.
Hope this works for you and let me know if you have any questions, cheers!
In your .innercontent div, you are using the vw measurement which stands for "viewport width" - basically what this means is that the height of your box is going to be relative to the width of the screen/viewport that the user is viewing the site in.
You need to set height, width margin etc in another unit other than vw since it will result in what you're seeing. I forked your fiddle to demonstrate.
https://jsfiddle.net/550n5wgn/1/
Related
I am trying to make a footer for a div element, with a <p> tag, however, depending on the font size, the footer would be outside of the box.
How can I make it align at the bottom of the page, with correct padding?
Here's the HTML & CSS file:
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
background-color: #202020;
font-family: 'Montserrat', sans-serif;
color: #ffffff;
}
#list {
width: 70%;
height: 250px;
padding: 10px;
overflow: auto;
background-color: #303030;
color: white;
}
.currency {
background-color: #202020;
height: 20%;
color: white;
}
.currency-flag {
float: left;
padding: 5px;
}
.currency-name {
text-align: left;
font-size: 120%;
/* padding-top: 5px; */
}
.currency-value {
text-align: left;
font-size: 50%;
}
<center>
<div id="list">
<div class="currency">
<img class="currency-flag" src="flags/eur.svg"></img>
<p class="currency-name">European Euro</p>
<p class="currency-value">1 R$ = 2 EUR</p>
</div>
</div>
</center>
The problem is that you have set fixed height to .currency insted of height:20% use height:auto;
.currency {
background-color: #202020;
height: auto;
color: white;
}
to fixed it at botton use positions like
#list {
width: 70%;
height: 250px;
padding: 10px;
overflow: auto;
background-color: #303030;
color: white;
position: absolute;
bottom: 0;
}
.currency {
background-color: #202020;
height: auto;
color: white;
}
Set the height property to auto instead of fixing it it will make your p tag inside the div
One suggestion :- Do not use the center dag as its outdated instead try to do similar thing with css property of text-align center
I am making an accordion menu whereby I am adding a PDF inside an object element. However I just cannot get the object to show 100% of its height, therefore it makes it difficult to use.
All I would like is to know how to make the PDF file inside of the object div to show it's full height. I remember having similar issues with footers..
Thanks.
if( jQuery(".toggle .toggle-title").hasClass('active') ){
jQuery(".toggle .toggle-title.active").closest('.toggle').find('.toggle-inner').show();
}
jQuery(".toggle .toggle-title").click(function(){
if( jQuery(this).hasClass('active') ){
jQuery(this).removeClass("active").closest('.toggle').find('.toggle-inner').slideUp(200);
} else {
jQuery(this).addClass("active").closest('.toggle').find('.toggle-inner').slideDown(200);
}
});
body {
color: #4B4B4B;
font-family: ARIMO;
}
body a {
cursor: pointer;
color: #4B4B4B;
text-decoration: none;
}
body section {
margin-bottom: 90px;
}
body section h1 {
text-transform: uppercase;
text-align: center;
font-weight: normal;
letter-spacing: 10px;
font-size: 25px;
line-height: 1.5;
}
object{
width: 100%;
height: 100%;
display: block;
position: relative;
min-height: 100%;
}
/* Styles for Accordion */
.toggle{
background: #eee;
border-top: solid 1px #3b7c8e;
margin-bottom: 50px;
width: 80%;
height: 100%;
}
.toggle .toggle-title {
position: relative;
display: block;
margin-bottom: 6px;
}
.toggle .toggle-title h3 {
font-size: 20px;
margin: 0px;
line-height: 1;
cursor: pointer;
font-weight: 200;
}
.toggle .toggle-inner {
padding: 7px 25px 10px 25px;
display: none;
margin: -7px 0 6px;
max-width: 100%;
max-height: 100%;
min-height: 100%;
}
.toggle .toggle-inner div {
max-width: 100%;
max-height: 100%;
min-height: 100%;
}
.toggle .toggle-title{
display: block;
padding: 25px 25px 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle">
<div class="toggle-title">
<h3>
<div class="title-name">Example title</div>
</h3>
<p>Example call for paper</p>
<p>Astronomers face an embarrassing conundrum: they don't know what 95% of the universe is made of. Atoms, which form everything we see around us, only account for a measly 5%. Over the past 80 years it has become clear that the substantial remainder is comprised of two shadowy entities – dark matter and dark energy. The former, first discovered in 1933, acts as an invisible glue, binding galaxies and galaxy clusters together. Unveiled in 1998, the latter is pushing the universe's expansion to ever greater speeds. Astronomers are closing.</p>
</div>
<div class="toggle-inner">
<object height="100" data="http://prototypes.infopro-insight.com/test/MW/call_for_papers.pdf"></object>
</div>
</div><!-- END OF TOGGLE -->
I am trying to add a div to the side of my wrapper. It will be a link / button.
I want it to be able to slide up and down, fixed to the right hand side border when scrolling.
The button is:
#booknow {
position: absolute;
right: 0;
margin-left:25px;
text-align:center;
font-family: 'Raleway',sans-serif;
font-size:22px;
color:#ffffff!important;
font-weight:700;
line-height:26px!important;
text-transform:uppercase;
}
And the inner wrapper (Where the border is), is:
.wrapper_inner{
position:relative;
z-index:10!important;
padding:30px!important;
background:#fff!important;
border:1px solid #D4D4D4!important; }
HTML:
<div class="wrapper">
<div class="wrapper_inner">
<div id="booknow">
Book <br> Now
</div>
</div>
</div>
At the minute I have this:
If I set it to fixed it slides up and down but it won't position perfectly to the outside of .wrapper_inner.
The HTML wasn't that helpful, so I just threw something together. The color scheme is to display the elements. I removed .inner_wrapper and added the surrounding layout so it would be possible to demonstrate that #booknow floats. If you click the #booknow it'll scroll down to a faux form at the bottom.
Demo: https://plnkr.co/edit/qACqW4O4rJn7YHoPRWLy?p=preview
Full screen: https://run.plnkr.co/njw73AIIIuHXEooM/
Relevant CSS
body {
position: relative;
overflow-y: scroll;
overflow-x:hidden;
font: 500 16px/1.4 'Arial';
min-height: 100vh;
}
.spacer {
position: absolute;
bottom: -200px;
height: 60%;
}
#booknow {
position: fixed;
top: 30px;
right: 0;
float: right;
margin-left: 25px;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 22px;
color: #ffffff;
font-weight: 700;
line-height: 26px;
font-variant: small-caps;
z-index: 10;
background: #fc3;
padding: 10px;
width: 50px;
}
.wrapper {
position: absolute;
top: -110px;
margin: 25px;
padding: 5px 10px;
width: 100%;
border: 3px double grey;
min-height: 70px;
background: #eff999;
}
Up until a couple days ago using position:absolute; and bottom:-36px was enough to hide the controls down the page, and they would popup whenever the mouse was hovered over the player. Now I'm able to scroll down to see them. How can I fix this while keeping the same slide-up effect?
Also, one more thing... I set the controls div with line-height:36px expecting it to be 36px in height but it is actually 38px (making bottom:-36px kind of useless since 2px are visible). The timer and the P, M and F divs get two extra px on the top and the seek bar gets them on the bottom. Where are these extra px coming from?
Sample
Any help on how to fix these issues and understand what's going on will be greatly appreciated. Thank you.
EDIT1:
Thanks to Fahad I managed to solve my first issue. The snippet didn't work outside of codepen but I fixed it adding position:relative; to the parent div. It still is unclear to me why line-height adds those extra px, though.
Giving the parent div a relative position raised another problem, don't ask me why but sometimes I need to scroll inside the "player" (well, you can ask) and when I do the controls don't stay at the bottom. Please see for yourselves:
Sample
EDIT2:
Apparently that can be easily solved by replacing position:absolute; with position:fixed; in the controls div. I'm still testing just in case this little change is messing with anything else.
You can assign overflow-y: hidden; to your body tag using CSS (to disable vertical scrolling) and change the bottom value to -38px.
html,
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #EEE;
margin: 0;
overflow-y: hidden;
}
#player {
background-color: #333;
text-align: center;
height: 100vh;
}
#toggle {
margin: auto;
width: 500px;
font-size: 24px;
line-height: 60px;
background-color: #B83B3B;
}
#toggle:hover + #controls {
bottom: 0;
}
#controls {
position: absolute;
left: 0;
right: 0;
bottom: -38px;
line-height: 36px;
background-color: #B83B3B;
transition: bottom 0.3s ease;
}
#left {
float: left;
}
#right {
float: right;
}
#curTime {
font-size: 13px;
font-weight: bold;
margin: 0px 8px;
display: inline-block;
vertical-align: middle;
}
#center {
overflow: hidden;
}
#seekBar {
-webkit-appearance: none;
outline: none;
background-color: #1F7783;
height: 6px;
margin: 0;
width: 100%;
}
#seekBar::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #EEE;
height: 12px;
width: 12px;
border-radius: 12px;
cursor: pointer;
opacity: 0.8;
}
.button {
margin: 0px 8px;
font-size: 24px;
display: inline-block;
vertical-align: middle;
}
<div id="player">
<div id="toggle">Hover to show controls.</div>
<div id="controls">
<div id="left">
<div class="button">P</div>
<span id="curTime">0:01</span>
</div>
<div id="right">
<div class="button">M</div>
<div class="button">F</div>
</div>
<div id="center">
<input type="range" id="seekBar" step="any">
</div>
</div>
</div>
Here's the example on CodePen.
I've been meaning to replace the tables in my site with css positioning and have been trying to teach myself through tutorials etc. I've had some early success but it all came crashing down when I tried to create a sidebar. I'm hoping the problem has some kind of simple solution. The relative/absolute positioning of the elements is not going anywhere close to what I wanted to do. My goal is to have a sidebar with images that stack (float?) from top to bottom, with the middle elements being part of an unordered list. I got it to work once but now that stack on top of each other. It has to be the way I am setting the float and the absolute/relative positioning. After reading some articles here I tried adding a div wrapper to put them inside but I think I got myself even more confused. Is it possible someone could nudge me in the right direction? Here is the code:
CSS
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 50px;
padding: 0px;
color: #696969;
height: 160px;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS ----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* PRIMARY LAYOUT ELEMENTS ---------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
top: 0px;
left: 0px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 0px 4px 4px 4px;
min-height: 420px;
width: 500px;
float: left;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* MISC ----------------------------------------------------------*/
.clear
{
clear: both;
width: 936px;
height: 35px;
}
.title
{
display: block;
float: left;
text-align: justify;
}
.bold
{
font-weight: bold;
}
p.clear
{
clear: both;
height: 0;
margin: 0;
padding: 0;
}
#wrapper
{
position:relative;
height: 500px;
width: 900px;
}
#insidemain
{
position:absolute;
float: left;
width: 500px;
height 180px;
}
/* ---------------- Sidebar Items ---------------------*/
#sidebar /* Sidebar container */
{
position:absolute;
border-top: 1px solid #99CC33;
border-left: 1px solid #99CC33;
height: 300px;
width: 180px;
margin-right: 5px;
padding: 5px 0 0 5px;
}
#sidebarHeader
{
position:absolute;
height: 37px;
width: 172px;
float: left;
background-image: url(../img/TopMenu.jpg);
background-repeat:no-repeat;
}
#sidebarItems ul
{
position:absolute;
height: 27px;
width: 172px;
float:left;
background-image: url(../img/MenuItems.jpg);
background-repeat:no-repeat;
/*left: 6px;
top: 45px;*/
background-position: 0px -27px;
}
#sidebarFooter
{
position:absolute;
height: 46px;
width: 172px;
float:left;
background-image: url(../img/BottomMenu.jpg);
background-repeat:no-repeat;
}
And the HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<link href="Styles/Simple.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div class="header">header
<div class="title">
<h1>
Test Page
</h1>
</div>
</div>
<p class = "clear">clear</p>
<div id="wrapper">
<div id="sidebar">
<div id="sidebarHeader">
</div>
<div id="sidebarItems">
<ul>
<li>test item</li>
</ul>
</div>
<div id="sidebarFooter">
</div>
</div>
</div>
<div id="insidemain">
main
</div>
</div>
<div class="clear">clear</div>
<div class="footer">
<a href="http://www.google.com/">
Blah blah test to see how far this will go across the page blah blha lorem ipsum and various other stuff that is meaningless etc
</a>
</div>
</body>
</html>
Typically (for non-responsive sites especially), you'd have your .wrapper div around the entire content (header, content, sidebar, footer, etc). Then set your .wrappers width. Your .sidebar would have a set width and it would either float: left; or float: right; depending on the side you want it on. Set your .content div's width which would be less than or equal to your .wrapper width - your .sidebar width. Then add your .clearfix below so the .footer falls beneath everything. In most cases (at least for the large page chunks) you can avoid position:absolute; which helps make things more easily fall into place.
You really shouldn't have to float your div's or list. Those are block elements by default and will stack vertically regardless.
Also, as Scrimothy mentioned, you do not want absolutely positioned elements as that will take the element out of the page flow. In other words, they no longer take up "real" space in the page, and instead render at whatever coordinates you position them.
Similarly, floats also take up no space, except with other floated elements. That's why some UI developers will float almost every element on the page and "clear" them using a footer or at key breaks in the page. I personally don't recommend positioning in that fashion, but to each his own.
See if this quick tutorial helps you with some key positioning concepts: HERE
Don't target the same element with both float and position:absolute. It doesn't make much sense. Anywhere where you have float, you should get rid of position:absolute
Next, get rid of those silly class="clear" elements. Instead, target .footer with clear:both and .page with overflow-y:hidden;