I have a simple layout with a main section and a sidebar. I need to expand/collapse the sidebar horizontally, the sidebar should also push the main section.
body {
height: 100vh;
margin: 0;
display: flex;
}
main {
flex: 1;
background-color: coral;
}
ul {
margin: 0;
padding: 10px;
list-style-type: none;
display: flex;
flex-direction: column;
row-gap: 20px;
}
aside {
width: 24px;
background-color: red;
transition: width 200ms ease;
}
aside.open {
width: 240px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
pharetra, orci ut faucibus faucibus, risus augue mattis eros, et
maximus mauris libero quis elit. Curabitur porta ac ante accumsan
imperdiet.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
pharetra, orci ut faucibus faucibus, risus augue mattis eros, et
maximus mauris libero quis elit. Curabitur porta ac ante accumsan
imperdiet.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
pharetra, orci ut faucibus faucibus, risus augue mattis eros, et
maximus mauris libero quis elit. Curabitur porta ac ante accumsan
imperdiet.
</li>
</ul>
</main>
<aside></aside>
<script>
const aside = document.querySelector("aside");
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowLeft") {
aside.classList.add("open");
}
if (event.key === "ArrowRight") {
aside.classList.remove("open");
}
});
</script>
</body>
</html>
https://codesandbox.io/s/bitter-wind-elo67e?file=/style.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
pharetra, orci ut faucibus faucibus, risus augue mattis eros, et
maximus mauris libero quis elit. Curabitur porta ac ante accumsan
imperdiet.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
pharetra, orci ut faucibus faucibus, risus augue mattis eros, et
maximus mauris libero quis elit. Curabitur porta ac ante accumsan
imperdiet.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
pharetra, orci ut faucibus faucibus, risus augue mattis eros, et
maximus mauris libero quis elit. Curabitur porta ac ante accumsan
imperdiet.
</li>
</ul>
</main>
<aside></aside>
<script>
const aside = document.querySelector("aside");
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowLeft") {
aside.classList.add("open");
}
if (event.key === "ArrowRight") {
aside.classList.remove("open");
}
});
</script>
</body>
</html>
body {
height: 100vh;
margin: 0;
display: flex;
}
main {
flex: 1;
background-color: coral;
}
ul {
margin: 0;
padding: 10px;
list-style-type: none;
display: flex;
flex-direction: column;
row-gap: 20px;
}
aside {
width: 24px;
background-color: red;
transition: width 200ms ease;
}
aside.open {
width: 240px;
}
That code just works but it proceeds low performance when there are many components in the main section e.g. List.
As we know we should use CSS Transform over animating width/height cause it provokes style/layout/paint etc.
The question is can I really improve the performance of animation if I'll replace animating width with some transform animation?
I have tried using scale(), but there are 2 problems:
using px is preferable
the sidebar doesn't push the main section
Thanks
Related
I know there's got to be a simple solution to this, but I'm drawing a blank right now.
Here's what I have:
I want the yellow text block to be absolutely positioned inside its parent container, 10 pixels from the right edge. But when I add "position:absolute" and "right:10px" to .text-block, this is what happens:
I know I can just add a fixed height to the parent container for a quick fix, but this will be on a responsive site, so the parent containers need to have a fluid height and width. Here's my code. What am I doing wrong?
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color: #FFF;
font-family: helvetica;
color: #333;
}
#wrapper {
padding: 20px;
}
.block {
position: relative;
border: 1px solid #333;
margin-bottom: 10px;
padding: 10px;
}
.text-block {
width: 40%;
background-color: yellow;
position: absolute;
right: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- block -->
<div class="block">
<div class="text-block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- text-block -->
</div> <!-- block -->
<div class="block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- block -->
</div> <!-- wrapper -->
</body>
</html>
Absolute positioning does take it out of the flow, so what it's doing is expected. Here's one solution using relative positioning instead, plus a transform to achieve what you want with no markup changes. There are many ways with different text-align, float, flex solutions to handle this.
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
background-color: #FFF;
font-family: helvetica;
color: #333;
}
#wrapper {
padding: 20px;
}
.block {
position: relative;
border: 1px solid #333;
margin-bottom: 10px;
padding: 10px;
}
.text-block {
width: 40%;
background-color: yellow;
position: relative;
left: 100%;
transform:translate(-100%, 0%);
-webkit-transform:translate(-100%, 0%);
}
</style>
</head>
<body>
<div id="wrapper">
<div class="block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- block -->
<div class="block">
<div class="text-block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- text-block -->
</div> <!-- block -->
<div class="block">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
</div> <!-- block -->
</div> <!-- wrapper -->
</body>
</html>
Absolutely positioned elements do not affect the parent container height.
You need to use Javascript to change the height as a workaround to this behavior (or, alternatively, use relative positioning).
$(document).ready(function() {
var objHeight = 0;
$.each($('.block').children(), function(){
objHeight += $(this).height();
});
$('.block').height(objHeight);
});
This answer is from here: https://stackoverflow.com/a/8185521/722617
I would like to know if for the demo index page of this site url, I can prevent the text from overflowing or let say use optional scrolling bar when the text goes over the bottom of the blue box? I would like the layout to be similar to this 'production' site (with server stats visits).
Can I do this using html 5? Should I include div so to limit text overflow under a certain screen resolution. Please find the html and style sheet code used (thanks for the author of this design and also Aayushi Jain who has help me with a few style sheet adjustments from another question here on this site).
style sheet
html {
overflow-y: scroll; }
div#wrapper {
width:90%;
margin: 10px auto;
position: relative;}
header#site {
height:80px;
padding:10px;
background-color:#0033FF;
margin:10px 0px;
text-align:center; }
footer {
font-size:0.8em;
clear:both;}
footer .col {
width:30%;
margin:1% 1.1%;
padding:2px;
height:100px;
background-color:#F63;
float:left; }
nav {
background-color:#0033FF;
position: absolute;
left: 0;
bottom: 0;
top: 110px;
width: 29%; }
nav ul {
list-style:none;}
nav ul li a {
display: block;
background-color:#CCC;
margin-right: 20px;
width: 110px;
line-height:1.5em;
text-align: center;
text-decoration: none;
color: #000; }
nav ul li a:hover {
color: #fff;
background-color:#39C; }
article {
background-color:#0066FF;
float:right;
width:69%;
margin-right:10px;
height:50%;
overflow-y:scroll;
}
article header {
background-color:#F90;
padding:15px; }
section#abstract {
font-size:1.09em;
font-style:italic;
margin:10px 0px;
text-align:justify;
padding:5px 80px; }
section#main {
font-size:1em;
padding:20px;
text-align:justify;
float: left;
margin: 0;
padding: 0;
display: inline; }
.ads {
height:50%;
width:30%;
background-color:#0033FF;
margin-bottom:1%;
float:left;}
.ads p:first-child {
padding:15px;
font-size:2em;}
.ads p:last-child {
padding-left:15px;
font-size:1em;color:#CCC;}
the html file
<!DOCTYPE html>
<!-- saved from url=(0064)http://toytic.com/class/examples/e808_html5_Header2NavAside.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Web site</title>
<link href="style.css" rel="stylesheet" />
<style>
</style>
<!-- Tell IE we are using html5 + CSS -->
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="wrapper">
<header id="site">
<h1>WEBSITE</h1>
</header>
<article>
<header>
<h2>This is the article header</h2>
<time datetime="25-11-2010" pubdate="">25th November 2010</time>
</header>
<section id="abstract">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et orci sed neque tincidunt dictum nec at lacus. Fusce feugiat sagittis ligula ac aliquam. Integer ut sodales justo. Etiam ultrices cursus iaculis. Suspendisse bibendum. </p>
</section>
<section id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac velit mauris. Nulla cursus pretium dapibus. Fusce at faucibus mi. Etiam ac nisi condimentum quam vulputate euismod. Nunc viverra consectetur tempor. Praesent rutrum diam in leo lacinia sit amet volutpat leo tempus. Donec sodales, velit et viverra imperdiet, velit leo placerat libero, fringilla scelerisque justo sapien sit amet sapien. Donec blandit tellus at mi hendrerit hendrerit. Sed suscipit sagittis sodales. Etiam sagittis, tortor quis sagittis laoreet, erat nibh mollis sem, ut tristique felis augue non metus. </p>
<p>Etiam in gravida mi. Maecenas placerat, justo vel gravida egestas, odio sem dictum justo, eget volutpat massa augue in augue. Sed tempus sem a nulla eleifend aliquet aliquet diam pharetra. Proin sit amet imperdiet est. Cras vitae felis in nulla tristique porttitor ut sit amet neque. Quisque sed nisi quam. Aliquam erat volutpat. Nullam dignissim augue odio. Nam sit amet ipsum arcu, id rutrum felis. Phasellus velit mauris, dictum eget tincidunt eget, condimentum eget risus. Proin nibh nulla, sagittis et feugiat in, luctus quis velit. Aenean lobortis mi ut odio accumsan adipiscing. Nulla quis ipsum magna. Suspendisse auctor mauris eu mi cursus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida vulputate leo, consectetur porta sem euismod nec. Donec et dolor lectus, vel cursus massa. Morbi eu dictum arcu. Fusce luctus porttitor neque, sed eleifend orci tristique convallis. </p>
</section>
</article>
<nav>
<ul>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<footer>
<div class="col">
<h4>Contact</h4>
<adress>
<p>Janet Griffith from Public Relations</p>
<p>Jil Sanders, webmaster</p>
</adress></div>
<div class="col">
<h4>Sites of interest</h4>
<aside>
<p>Site A</p>
<p>Another one</p>
</aside>
</div>
<div class="col">
<h4>Legal stuff</h4>
<p>Copyright</p>
<p>Terms of Service</p>
</div>
</footer>
</div>
</body></html>
thanks
Pascal
If you don't want to see the scroll bar then use overflow: hidden or overflow: auto.
Now if you want the header part to be static then put your section main and abstract in a div and make its height: 500px (or something you want) but make it fix and then use overflow: hidden in the newly mad div if you don't want to show the overflow part or use overflow: auto if you want to show the overflow part but not the scroll bar.
I am currently struggling with a problem, that I can't find the reason.
Currently my anchor hover states are not displaying properly in Firefox and IE. The interesting this is that when I explore with firebug to see if the style is applied, it is there but the browser is not showing it. This is really driving me nuts!
The link is contained in a H1 tag. The same style is applied to the span username, but it is displayed perfectly.
Here is the code, I hope you can solve the mystery!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<tile> test</title>
</head>
<body>
<div id="content1" class="boxContainer">
<ul id="leggi-tab-content">
<li class="anteprimaG">
<div class="ombraCopertinaG ">
<img src="images/copertina-grande.gif" width="118" height="168" alt="Lorem ipsum dolor sit amet...">
<div class="fantascienzaG">
/div>
</div>
<div class="metadata">
<span class="star-rating05"> </span>
<span>1234567 letture</span>
</div>
<h1 class="truncationL">
<a class="link_primario" href="http://www.xyz.zz">Lorem ipsum
dolor sit amet, consectetur dipiscing elit. Maecenas facilisis
porttitor interdum. Phasellusnec arcu quam.</a>
</h1>
<span class="username truncationL">di <a class="link_secondario" href="#">username username username username username username username username username username username username username username username username </a></span>
<p class="truncationB">“Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas facilisis porttitor interdum. Phasellus
nec arcu quam. Donec id leo nibh. Sed vehicula dignissim libero,
a vehicula sapien sodales non. Nunc vel metus ante. Fusce pretium
convallis cursus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Maecenas facilisis porttitor interdum. Phasellus nec arcu
quam. Donec id leo nibh. Sed vehicula dignissim libero, a vehicula
sapien sodales non. Nunc vel metus ante. Fusce pretium convallis
cursusLorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
facilisis porttitor interdum. Phasellus nec arcu quam. Donec id leo
nibh. Sed vehicula dignissim libero, a vehicula sapien sodales non.
Nunc vel metus ante. Fusce pretium convallis cursusLorem ipsum dolor
sit amet, consectetur adipiscing elit. Maecenas facilisis porttitor
interdum. Phasellus nec arcu quam. Donec id leo nibh. Sed vehicula
dignissim libero, a vehicula sapien sodales non. Nunc vel metus ante.
Fusce pretium convallis cursus”</p>
</li>
</ul>
</div>
</body>
</html>
CSS
a.link_primario:link { color: #0d6083; text-decoration:none;}
a.link_primario:visited { color: #0d6083; text-decoration: none;}
a.link_primario:hover { color: #cf1d3c; text-decoration: underline; }
a.link_primario:active { color: #0d6083; text-decoration: none;}
.ombraCopertinaG {
background: url(../images/ombra-copertina-grande.png) left bottom no-repeat;
position: relative;
float: left;
display: inline-block;
margin-right: 10px;
}
.ombraCopertinaG img{ padding: 0 9px 5px 6px;}
.anteprimaG {margin-bottom: 20px;}
.anteprimaG h1 {
width: 53.684210526315789473684210526316%; /*510px/950px*/
margin-bottom: 0;
}
.anteprimaG p {
height: 111px;
width: 83.36842105263158%/*807px/950px*/
}
.username {
display: inline-block;
width: 53.684210526315789473684210526316%;/*510px/950px*/
margin: 9px 0 15px 0;
}
.metadata { float:right;}
.metadata span {
display:inline-block;
font-size: 0.75em ;/*12px/16px*/
vertical-align: middle;
margin-left:20px;
}
.metadata span:first-child{
margin-left: 50px;
}
The second link has a class="link_secondario" attribute, yet you only defined:
a.link_primario:link { color: #0d6083; text-decoration:none;}
Either change the second's links attribute to class="link_primario" (if it has the same properties, you do not need two classes) or define:
a.link_primario:link,a.link_secondario:link
{ color: #0d6083; text-decoration:none; }
as per screenshot attached:
I want to create a <div> that is positioned "x" pixels from the top, but essentially "expands" vertically to fit whatever is in a given tab as well as horizontally the width of the whole page with a solid colour. Essentially a <div> that ignores the other <div>'s. Screenshot explains what I mean better. How do I make such a <div> layout?
A sticky footer looks to me what you are looking for. This means you have a content area that is either the entire screen or if it has more contents, fits the content. The footer is either on the bottom of the screen or on the bottom of the content
http://www.cssstickyfooter.com/
or search for stickyfooter on Stack Overflow
And abit of html to get you started
http://jsbin.com/emufot/8/
Standard CSS should do the job for you as if you don't set a height for a div, it will automatically expand to fit its content. Here is some code I knocked up quickly which will display the idea:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href=".css"/>
<style>
body {
margin: 0 auto;
padding: 0;
}
p {
margin: 0 auto;
padding: 0;
}
.topstuff {
height: 200px;
background-color: #333333;
margin: 0 auto;
padding: 0;
}
.contentContainer {
width: 100%;
background-color: #ff0000;
margin: 0 auto;
padding: 0;
}
.content {
width: 1000px;
margin: 0 auto;
padding: 0;
}
.footer {
height: 200px;
background-color: #00ff00;
margin: 0 auto;
padding: 0;
}
</style>
</head>
<body>
<div class="topstuff"></div>
<div class="contentContainer">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper placerat ligula volutpat aliquam. Maecenas vulputate, nibh at iaculis placerat, ligula nisl sodales odio, quis adipiscing purus dolor venenatis nunc. Proin vehicula rhoncus eros tristique aliquet. Vivamus faucibus hendrerit orci eget egestas. Nulla commodo lectus vitae nunc condimentum pharetra. Donec mattis nulla orci. Proin tortor nulla, varius at mollis ac, vestibulum vel leo. Cras ut rutrum sem. Sed vulputate nisi sed leo aliquam ac fermentum tellus porta. Phasellus quis purus et purus sollicitudin tristique a quis sem. Nunc malesuada, eros ac venenatis consequat, erat elit viverra sem, vitae commodo justo orci nec neque. Proin sed aliquam tellus. In tincidunt urna sit amet felis lobortis fringilla elementum massa egestas.</p>
</div>
</div>
<div class="footer"></div>
</body>
</html>
Just replace the 'lorerm ipsum etc' content with whatever you want to see the containing div change size.
Good Luck.
I'm building a page layout with 3 divs: a header and a footer with fixed heights in pixels, and a content div in the middle of the page that should fill the remaining screen height. Furthermore, I want to be able to set height to 100% in the inner content divs, because one of them will host a kind of drawing area that need to fill the remaining screen height. So, it's especially important that inner divs do not leak under the header or footer. So far, I achieved a 100% valid CSS solution that work in all majors browsers except Internet Explorer 6 & 7.
Is there anything I can do to fix my layout for IE6 & 7? Or, do you see another way to do what I want?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The #content div fill the remaining height and appears to have a height</title>
<style TYPE="text/css">
<!--
* {
margin: 0;
padding: 0;
}
html, body,
#container{
height: 100%;
}
#container{
position: relative;
}
#header,
#footer{
height: 60px;
line-height: 60px;
background: #ccc;
text-align: center;
width : 100%;
position: absolute;
}
#header{
top: 0;
}
#footer{
bottom: 0;
}
#content{
position: absolute;
top:60px;
bottom: 60px;
width : 100%;
overflow: auto;
border-top: 1px solid #888;
border-bottom: 1px solid #888;
}
#inner-content{
overflow: auto;
background-color: #FC0;
height: 100%;
}
p{
margin-bottom: 10px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<div id='inner-content'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel
quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie.
Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel
quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie.
Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel
quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie.
Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel
quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie.
Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis turpis vel
quam dictum hendrerit eu non elit. Donec ultricies ullamcorper libero a molestie.
Donec auctor nulla vitae tortor ullamcorper posuere. Etiam fringilla tristique blandit.
</p>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Thanks in advance for your help.
Live example here.
I ended up using Javascript to achieve the same thing