Using the 98.css library: https://jdan.github.io/98.css/
I'm currently trying to fit the bottom element status-bar at the bottom of the box with its width set to stretch to the entire box's width. I feel like I'm doing it incorrectly and/or not doing it properly via percentages in .width-stretch.
The result is this:
Note that it is somehow overlapping the bottom-right edge of the box. When I try making the width: 99%, it gets pretty close to what I want but not quite, and it is left-aligned (and not centered). I'm trying to figure out a more elegant solution that fixes this issue; any suggestions? I'm also open to any CSS frameworks that can run alongside 98.css to make styling easier. Thanks!
...
<style>
html, body {
margin:0px;
background: #c0c0c0;
}
.center {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
.relative-position {
position: relative;
width: auto;
}
.bottom {
position: absolute;
bottom: 0;
padding-bottom: 4px;
}
.width-stretch {
width: 100%;
}
</style>
</head>
<body>
<!-- MAIN -->
<div class="center">
<div class="window relative-position" style="width: 95%; height: 95vh;">
<div class="title-bar">
<div class="title-bar-text">A Window With A Status Bar</div>
</div>
<div class="window-body">
<p> There are just so many possibilities:</p>
<ul>
<li>A Task Manager</li>
<li>A Notepad</li>
<li>Or even a File Explorer!</li>
</ul>
</div>
<div class="status-bar bottom width-stretch">
<p class="status-bar-field">Press F1 for help</p>
<p class="status-bar-field">Slide 1</p>
<p class="status-bar-field">CPU Usage: 14%</p>
</div>
</div>
</div>
</body>
</html>
You can use flex-direction:column on .window, with flex:1 on the .window-body so that it fills all the available vertical space.
html,
body {
margin: 0px;
background: #c0c0c0;
}
.center {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.window {
display: flex;
flex-direction: column;
}
.window-body {
flex: 1;
}
<link rel="stylesheet" href="https://unpkg.com/98.css">
<div class="center">
<div class="window " style="width: 95%; height: 95vh;">
<div class="title-bar">
<div class="title-bar-text">A Window With A Status Bar</div>
</div>
<div class="window-body">
<p> There are just so many possibilities:</p>
<ul>
<li>A Task Manager</li>
<li>A Notepad</li>
<li>Or even a File Explorer!</li>
</ul>
</div>
<div class="status-bar">
<p class="status-bar-field">Press F1 for help</p>
<p class="status-bar-field">Slide 1</p>
<p class="status-bar-field">CPU Usage: 14%</p>
</div>
</div>
</div>
Add these styles to the inside of the style tag.
.status-bar {
display: flex;
}
.status-bar-field {
flex: 1;
padding: 0 10px;
border: 1px solid black;
}
Related
Friends, I have a div with text inside my header, but I want to push that div so it rests on the bottom of my header window. what would be the best way to do it, thank you very much in advance.
So far it looks like this:
#head {
border: solid black 1px;
text-align: center;
background-image: url("../images/interior1.jpg");
background-size: cover;
background-repeat: no-repeat;
color: #f8f6f0;
height: 50vh;
}
<body>
<header id="head">
<div id="text">
<h1>Nagoya Express</h1>
<p>
<h2>Your Way to More Ecofriendly and Economical Personal Trasportation</h2>
</p>
</div>
</header>
</body>
Okay, you have two the best options:
Add position: relative for #head and position: absolute for #text. And to next you need set bottom: 0; for #text.
Second option is using display: flex for #head and set align-items: flex-end.
Both solutions are presented in the example below:
.head {
height: 500px;
border: 1px solid red;
}
.text {
background: green;
}
.head--position {
position: relative;
}
.head--position .text {
position: absolute;
bottom: 0;
}
.head--flex {
display: flex;
align-items: flex-end;
}
<body>
<header class="head head--position">
<div class="text">
<h1>Nagoya Express</h1>
<p>Your Way to More Ecofriendly and Economical Personal Trasportation</p>
</div>
</header>
<header class="head head--flex">
<div class="text">
<h1>Nagoya Express</h1>
<p>Your Way to More Ecofriendly and Economical Personal Trasportation</p>
</div>
</header>
</body>
It is good to pay attention to the fact that selectors should be styled by the class, not by the id.
I am creating a layout where a sidebar will be fixed on the left and placed next to a container which will have its own grid. I use Vue.js so every template has its <div> where I need to put other <div>s with the sidebar or the main content. Seems like my layout doesn't want to accept my CSS rules when I try to place my sidebar or give it a color, etc. Please help!
Here is my layout:
<template>
<div>
<sidebar />
<main-content />
</div>
</template>
Where the sidebar is:
<template>
<div>
<div class="sidebar">
<div id="logo">
<img src="" />
</div>
<h1>Company</h1>
<ul>
<!--<li>About</li>-->
<!--<li>Popular</li>-->
<!--<li>News</li>-->
<!--<li>Pages</li>-->
<li>Users
<ul id="sublist">
<li>Import</li>
<li>Invitations</li>
</ul>
</li>
<!--<li>Organisations</li>-->
<li>Polls</li>
</ul>
</div>
</div>
</template>
And the main content is (there is a table component inside):
<template>
<div>
<div class="container-grid">
<div class="header">
<h2>Users</h2>
<button>Add</button>
<h3>Import users</h3>
</div>
<main-table />
</div>
</div>
</template>
Here is my CSS:
.sidebar {
height: 100%;
width: 300px;
max-width: 1024px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
box-sizing: border-box;
}
h1 {
display: inline;
height: 29px;
width: 156px;
}
ul,
#sublist {
list-style: none;
margin: 0;
padding: 0;
}
a {
height: 20px;
width: 200px;
text-decoration: none;
display: block;
}
// Main Content Style
.container-grid {
margin-left: 336px;
}
This is not the answer to your question but just a heads up.
You do not need to wrap your components with a div every time. You just need to ensure that you only ever have 1 root element.
This means if you have 2 elements like this you do need to wrap them:
<template>
<div>
<span></span>
<span></span>
</div>
</template>
But a single span element you can simple leave in your template like so:
<template>
<span></span>
</template>
It works as expected here in the snippet, except I had one puzzling thing: it would not style .container-grid for me. I finally figured out that the reason was the embedded comment (// Main content style), which is not valid css. I don't know whether that might be an issue in your development environment.
new Vue({
el: "#app",
components: {
sidebar: {
template: '#sidebar-template'
},
mainContent: {
template: '#main-template'
}
}
});
.sidebar {
background-color: #fee;
height: 100%;
width: 150px;
max-width: 1024px;
opacity: 0.5;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
box-sizing: border-box;
}
h1 {
display: inline;
height: 29px;
width: 156px;
}
ul,
#sublist {
list-style: none;
margin: 0;
padding: 0;
}
a {
height: 20px;
width: 200px;
text-decoration: none;
display: block;
}
.container-grid {
background-color: #eef;
margin-left: 180px;
}
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<div id="app">
<sidebar></sidebar>
<main-content></main-content>
</div>
<template id="sidebar-template">
<div>
<div class="sidebar">
<div id="logo">
<img src="" />
</div>
<h1>Company</h1>
<ul>
<!--<li>About</li>-->
<!--<li>Popular</li>-->
<!--<li>News</li>-->
<!--<li>Pages</li>-->
<li>Users
<ul id="sublist">
<li>Import</li>
<li>Invitations</li>
</ul>
</li>
<!--<li>Organisations</li>-->
<li>Polls</li>
</ul>
</div>
</div>
</template>
<template id="main-template">
<div class="container-grid">
<div class="header">
<h2>Users</h2>
<button>Add</button>
<h3>Import users</h3>
</div>
</div>
</template>
Something like this:
HTML:
<section>
<p>sidebar</p>
</section>
<section>
<h2>Section1</h2>
<p>section1 whatever data you want to put in this section</p>
</section>
<section>
<h2>Section2</h2>
<p>section1 whatever data you want to put in this section</p>
</section>
<section>
<h2>Section3</h2>
<p>section1 whatever data you want to put in this section</p>
</section>
<section>
<h2>Section4</h2>
<p>section1 whatever data you want to put in this section</p>
</section>
CSS:
section:first-child {
width: 20%;
height: 100vh;
}
section {
width: 80%;
float: left;
}
But you'd need to change the height: 100vh; to something that will cover the whole page hight and not just the veiwport hight.
Doing this means all the other sections will be to the right of the first one (where you would put your sidebar)
I'm having a tough time keeping my content centered within a certain width on my personal website. I have tried many methods such as setting body to a fix width and my wrapper container to a percentage of that. I have attached a picture of my website here and highlighted where I want my content to be contained in the picture shown
.
I want my content of my website centered within that highlighted area, while at the same time keeping the background to be the full size of the screen.
I realize this may be a simple question for many, but I have spent all day looking for and trying out different methods to do this with no avail.
body {
background-color: #F0f0f0;
text-align: center;
margin-right: 0px;
margin-left: 0px;
}
.wrapper {
text-align: center;
}
.topSection {
height: 300px;
border: solid 5px;
}
.mainAbout {
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
}
.mainAbout h1 {
font-size: 60px;
font-family: arvo, sans-serif;
margin-bottom: 5px;
}
#leftBrace {
vertical-align: middle;
}
#rightBrace {
vertical-align: middle;
}
.projects {
height: 864px;
border: solid 5px;
margin-top: 2px;
background: #0F1217;
}
.projects h2 {
color: #e6e6e6;
font-family: arvo, sans-serif;
font-size: 50px;
}
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<div class="wrapper">
<!---- Wrapper Starts Here --->
<div class="topSection" style="display:block" ;>
<!---- Name Section Starts Here --->
<div id="leftBrace" style="display: inline-block" ;>
<img src="leftbrace.png">
</div>
<div class="mainAbout" style="display: inline-block" ;>
<!--- Main Name and About me Section ---->
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
<!--- End mainAbout --->
<div id="rightBrace" style="display: inline-block" ;>
<img src="rightbrace.png">
</div>
</div>
<!--- Wrapper Ends Here --->
<div class="projects">
<h2> Projects </h2>
</div>
<div class="contact">
</div>
</div>
<!--- Wrapper Ends Here --->
<footer>
</footer>
Instead of using background you could style curly-braces using pseudo selector :before and :after, thus it works like font styling, you could use transform:translate to center your intro text container, check below codes.
#box {
width: 100%;
height: 300px;
overflow: hidden;
background: #ccc;
}
#box > .cnt {
width:50%;
text-align: center;
top: 50%;
left: 50%;
position: relative;
transform: translate(-50%, -50%);
}
#box:before {
content:"{";
font-size: 250px;
position: absolute;
top: 0;
left:10%;
}
#box:after {
content: "}";
font-size: 250px;
position: absolute;
top: 0;
right:10%;
}
<div id="box">
<div class="cnt">
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
</div>
Apply margin: 0 auto; to your content class. This will work.
You need to make sure add an inner class inside each wrapper and define your desired width. And need to apply margin: 0 auto to the inner. I added demo snippet.If u want specific wrapper full width just remove innerclass that's enough you will get full width. I hope it will help you.
.wrapper {
height: 300px;
width: 100%;
background: orange;
margin-bottom: 20px;
}
.inner {
width: 70%;
margin: 0 auto;
background: pink;
height: 100%;
}
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
I'm making a user-resizable GUI window with a header that gains height through new elements, a footer with static height, and a spacer in between that automatically takes up the rest of the height. I attempted using this answer, but the footer ended up vertically-centered. Picture:
If anyone knows why off the top of their head, it would be greatly appreciated. The element is being added to the page with javascript so the code is pretty messy. Thank you for your time.
What about the following:
<body>
<header class="header"></header>
<main class="spacer"></main>
<footer class="footer"></footer>
</body>
.
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
.spacer {
flex: 1;
}
I still don't know what the issue was, but I made a solution using the css calc() function.
HTML:
<div id="myWindow">
<div id="header">
Header
</div>
<div id="footer">
<div id="subHeaderContainer">
<div id="subHeader">
Sub Header
</div>
</div>
<div id="subFooter">
Sub Footer
</div>
</div>
</div>
CSS:
#myWindow {
width: auto;
height: auto;
resize: both;
border: 2px solid black;
overflow:hidden;
}
#header {
height: 20px;
background-color: grey;
}
#footer {
width:100%;
height: calc(100% - 20px);
}
#subHeaderContainer {
width:100%;
height: calc(100% - 30px);
}
#subFooter {
width:100%;
height:30px;
}
I have a specific layout that is causing me HUGE headaches. Here is an image:
My goal is to have the "Side panel" ALWAYS equal the height of the container. The "Enrollment Application" section is at 100% height already.
Current Markup
<body>
<div id="container" class="pure-g">
<div class="pure-u-md-1-4 pure-u-1 panel" id="left-panel">
<div class="panel-row">
<div class="panel p">
<div class="inner-panel">
<div class="panel-logo">
"Logo here text"
</div>
</div>
</div>
</div>
<div class="panel-row">
<div class="panel p">
<div class="inner-panel">
<nav class="panel">
</nav>
</div>
</div>
</div>
</div>
<div id="right-panel" class="pure-u-md-3-4 pure-u-1 panel p">
<div class="inner-panel">
<header class="pure-g">
<div class="pure-u-md-1-4 pure-u-1 header-logo">
LOGO Would go here, of course.
</div>
<div class="pure-u-md-3-4 pure-u-1 header-title">
<h1>Consumers Energy</h1>
<h1><strong>CARE 3.0 Program</strong></h1>
<h1>Enrollment Application</h1>
</div>
</header>
<div id="content">
"Enrollment application text..."
</div>
</div>
</div>
</div>
</body>
Current CSS
.panel {
box-sizing: border-box;
height: 100%;
display: table-cell;
}
.panel.p {
padding: 3px;
}
.panel .panel-row {
display: table-row;
}
.panel .inner-panel {
border-radius: 5px;
padding: 10px;
width: 100%;
box-sizing: border-box;
background-color: red;
}
Here is an alternative fiddle to play with: http://jsfiddle.net/3c3tqo3e/ but I really don't want to use a table...
Q How can we stack two divs and make their heights = 100% of parent? The "Logo here.." section will be an auto height.
NOTE I would really prefer an answer that is responsive-friendly. I am using PureCSS for the sections. (This means that absolute positioning is not preferred) Also, strongly prefer just css/html. Thanks!
I have created a demo for you, but it will work on all modern browsers only. and you might have to read flexbox and its demos in details to make your work more meaningful in terms of performance and maintenance.
Also read on calc() here
HTML:
<main>
<aside>
<div class="logo">Logo</div>
<div class="aside-content">Other Content</div>
</aside>
<section>Section</section>
</main>
CSS:
html, body{ height: 100%; }
main{
height: 100%; background: teal; padding: 2em; box-sizing: border-box;
display: flex; flex-direction: row;
}
aside{
height: inherit; margin: 0 1em 0 0; width: 200px;
}
aside .logo{
background: #fff; height: 140px;
}
aside .aside-content{
background: #fff; height: calc(100% - 150px); margin: 10px 0 0 0;
}
main section{
height: inherit; background: #fff; flex-grow: 2;
}
Demo Fiddle: http://jsfiddle.net/vpqqyo9L/1/
Edit:
Here's one for IE9: http://jsfiddle.net/vpqqyo9L/3/