Currently still doing my project and I'm trying to find out how to position headings in certain places. Figure 1 is my final goal for my headings to look like.
[Figure 1][1]
Currently this is what mine looks like (Figure 2), I am struggling to position the heading to a similar spot, every time I do, the paragraphs and the navbar move further down leaving a big white gap between the headings & paragraphs.
Also was wondering how would I level out the image with the text & navbar?
Thanks in advance, much appreciated.
[Figure 2][2]
I believe this is what you wanted:
preview
Basically, you could wrap the header (image + text) into a CSS flexbox, and the rest of the stuff into another flexbox. I edited the CSS file to reflect these changes. Hope this helps! Let me know if you have any other questions.
Here's a link to the jsfillde: https://jsfiddle.net/rzLbkw9m/
Here's the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="holiday.css" rel="stylesheet" type="text/CSS">
<title>Task 4</title>
</head>
<body>
<div class="header-container">
<div class="header-image">
<img src="https://st.depositphotos.com/1115174/1875/v/450/depositphotos_18752455-stock-illustration-summer-beach-vacation-background.jpg" alt="Holiday" width="400" height="200" align="left">
</div>
<div class="header-text">
<h1>Holiday Time</h1>
<h3>Get away from it all</h3>
</div>
</div>
<div class="row">
<div class="list-column">
<ul class="list">
<li>Destinations</li>
<li>Deals</li>
<li>Flights</li>
<li>Cruise</li>
<li>Extras</li>
<li>Money</li>
</ul>
</div>
<div class="main-column">
<div class="paragraph">
<p>
<img src="https://images.pexels.com/photos/88212/pexels-photo-88212.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Holiday" width="220" height="150" align="right" class="intext-img">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultrices libero eu eros viverra, eget tristique ipsum commodo. Phasellus tempus a erat quis hendrerit. Quisque ipsum felis, vestibulum sed finibus vel, molestie id ante. Morbi metus leo, dictum nec pellentesque nec, condimentum quis magna. Praesent est turpis, pharetra non fermentum sed, elementum ac ante. Integer sodales metus id rutrum hendrerit. Phasellus vel dapibus massa, ut aliquet arcu. Ut consectetur feugiat neque, sed sagittis dui rutrum eget. Maecenas commodo mattis enim quis lacinia. Duis in ipsum vitae mi laoreet dignissim. Nullam consequat velit at magna commodo, in fringilla enim rutrum. Cras at augue sed nisl ultricies lobortis. Praesent rhoncus lectus facilisis, rhoncus purus et, luctus eros. Nunc eros nisi, finibus sit amet urna quis, posuere ultrices mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis lorem vel neque bibendum iaculis vel id tellus. Nulla auctor elit vitae sollicitudin ultrices. Fusce molestie dictum neque, et dictum magna iaculis eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed volutpat, augue eget tincidunt feugiat, felis mi vulputate sem, eu mattis nisi quam sit amet est. Cras eu sem nec metus iaculis tempus sit amet non sapien. Aenean id odio semper purus dignissim elementum. Vestibulum faucibus mi ac odio hendrerit venenatis. Cras rhoncus diam magna, at placerat quam rutrum ut.
</p>
</div>
<div class="paragraph">
<p>
<img src="https://i.pinimg.com/474x/c6/60/24/c66024ea79527d9bbafe79ed171558b9--luxury-travel-luxury-hotels.jpg" alt="Holiday" width="220" height="150" align="right" class="intext-img">
Quisque fringilla sodales lorem eget rhoncus. Curabitur pulvinar blandit justo nec volutpat. Mauris bibendum lobortis quam et aliquam. Nulla dictum varius est, sed fringilla ante volutpat ac. Sed tempus dolor diam, ac porta ligula sagittis ac. Morbi vitae nisi porttitor, sollicitudin urna non, tempus justo. Donec vel vulputate est. Donec aliquet vitae velit eu interdum. Quisque et facilisis diam. Duis rutrum faucibus purus at tempus. Mauris auctor tincidunt mauris, quis porttitor magna aliquam molestie. Aliquam efficitur, ex sed finibus porta, tellus diam dictum arcu, ac egestas quam enim tristique velit. Integer volutpat tortor et tortor consequat tincidunt. Donec imperdiet libero vitae sapien commodo, eget pretium libero eleifend. Sed mi felis, porttitor vel blandit laoreet, pretium a felis. Duis in erat interdum, rutrum lectus viverra, pellentesque elit. Sed imperdiet massa ullamcorper mauris tempus, at euismod nibh convallis. In sapien lorem, lacinia eget viverra sit amet, suscipit in diam. Phasellus at sapien eu orci pellentesque eleifend suscipit eu diam. Vivamus quis nibh id sem placerat rutrum. Nunc pellentesque aliquet congue.
Nam at eros elementum, venenatis nibh vel, volutpat mi. Donec varius sapien ipsum, sed sagittis ligula iaculis hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pharetra ante eget purus rhoncus, ac pharetra eros fermentum. Etiam porta nec leo pretium gravida. Integer a nulla quam. In ullamcorper, nibh id efficitur porttitor, lacus mi semper nisi, id pulvinar ex leo at mi. Vestibulum placerat lacus vitae velit laoreet, in efficitur risus convallis. Nunc at sagittis dolor, eu gravida nunc. In hac habitasse platea dictumst. Mauris vitae lobortis ipsum, quis rhoncus mauris. Ut eget nibh sed dolor sollicitudin dictum efficitur ac ligula. Nullam ut nulla sit amet leo varius tincidunt.
</p>
</div>
</div>
</div>
<div class="footer"> Contact: 0191 227 1111</div>
</body>
</html>
Here's the css file:
/* header */
.header-container {
display: flex;
align-items: center;
border: 1px solid lightblue;
}
.header-text {
margin-left: 25px;
}
.header-text h1 {
color: purple;
font-size: 48px;
}
.header-text h3 {
margin-left: 20px;
}
/* navbar */
.list-column {
flex: 30%;
align-self: flex-start;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:first-of-type {
padding-top: 2px;
}
/* main content */
.row {
margin-top: 10px;
display: flex;
align-items: flex-start;
}
.paragraph {
margin-bottom: 25px;
}
.intext-img {
margin-top: 5px;
margin-left: 10px;
margin-bottom: 10px;
}
p {
font-size: 18px;
margin: 0px;
}
/* footer */
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.8rem;
text-align: left;
background-color: #64A3D6;
}
create a div around h1 and h3
.header{
position: relative;
top: 50%;
transform: translateY(-50%);
}
this will put the header in the middle of the area vertically. make sure the padding or margin is minimal
Related
I'm recreating this website for a project and I'm having trouble with getting the logo, search and nav items (BOARDS, NEWS, Q&A) to stay in the same line. For some reason all three of these elements are taking up their own line and I'm unable to figure out why that is happening. Please advice.
NOTE
You will need to view the page in full screen as the Header is not currently responsive.
.header {
display: block;
flex-direction: column;
font-family: "Roboto Condensed", "Helvetica Neue", "HelveticaNeue", Arial,
sans-serif;
font-size: 14px;
}
.header__container a {
background: url(https://gamefaqs.gamespot.com/a/images/site/logo_v13.png)
no-repeat left center;
display: block;
height: 50px;
overflow: hidden;
margin: 0 0;
text-indent: 110%;
width: 100%;
background-size: contain;
}
.header__console div {
padding: 0 300px;
margin: 4px 0;
}
.header__console {
border: 1px solid black;
background-color: #28398a;
color: #fff;
}
.header span {
padding: 0 5px;
}
.header__container {
border: 1px solid black;
background-color: #3951c6;
color: #fff;
}
.header__container div {
padding: 0 300px;
margin: 4px 0;
}
.header__container-item {
font-size: 15px;
}
.header__container input[type="text"] {
padding: 6px;
margin-top: 8px;
font-size: 16px;
border: none;
border-radius: 300px;
background-color: #f5f5f5;
}
.header__footer {
border: 1px solid #28398a;
}
<div class="header">
<div class="header__console">
<div>
<span>PC</span>
<span>PS4</span>
<span>PS5</span>
<span>Switch</span>
<span>Xbox One</span>
<span>Xbox Series</span>
<span>More Systems ▼</span>
</div>
</div>
<div class="header__container">
<div class="header__container-logo">
GameFAQs
</div>
<div class="header__container-search">
<input type="text" placeholder="Search Game Titles" name="search" />
</div>
<div class="header__container-nav">
<span class="header__container-item">BOARDS</span>
<span class="header__container-item">NEWS</span>
<span class="header__container-item">Q&A</span>
</div>
</div>
<div className="header__footer"></div>
</div>
I'd say your trouble is this:
.header__container div {
padding: 0 300px;
}
Surely you don’t always want 300 pixels of padding on both sides of your content? You need your website to work on screens of different widths, so your design needs to be more flexible than that. This article provides a good explanation.
p {
background: #e7e7f2;
padding: 5px 5vw;
}
#media (min-width: 750px) {
p {
padding: 5px 10vw;
}
}
#media (min-width: 1250px) {
p {
padding: 5px 15vw;
}
}
#media (min-width: 1750px) {
p {
padding: 5px 20vw;
}
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus metus sed viverra feugiat. Donec nec orci ut lacus pellentesque tristique. Mauris quis malesuada mi. Phasellus lorem nunc, fringilla efficitur ipsum at, gravida dictum dolor. Integer arcu risus, aliquam quis dictum non, lobortis quis nisl. Suspendisse interdum orci vel lacus aliquet tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed ut gravida mi, quis pharetra nulla.
</p>
<p>
Etiam ac sapien sapien. Curabitur volutpat elit lorem, ut imperdiet leo molestie eget. Aliquam feugiat ipsum id tincidunt dapibus. Nulla interdum ut nunc id consequat. Nam metus diam, rhoncus non luctus vel, aliquam nec ante. Nullam hendrerit lacinia lobortis. Nulla facilisi. Sed gravida tortor vel commodo ultricies. Etiam sagittis mollis nulla finibus dictum. Etiam efficitur orci et lectus lobortis, et mollis purus venenatis. Sed venenatis pretium pharetra. Quisque et tristique libero. Pellentesque vel purus odio. Nam nisl leo, sagittis nec pretium vel, pulvinar a dui. Nullam dui risus, ornare convallis tempus eu, congue quis ex. Vestibulum eu magna sed tellus convallis vulputate.
</p>
<p>
Cras lorem tellus, aliquet at auctor vel, fringilla ut odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse consectetur massa sit amet enim tempus dictum. Nam dictum faucibus sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent euismod metus lorem. Suspendisse sollicitudin justo eget volutpat luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ultrices massa at nisl finibus fringilla. Morbi eu est eu nunc varius fermentum et id metus. Aenean sed nulla velit.
</p>
<p>
Cras porta fermentum leo, et dapibus elit ullamcorper nec. Ut feugiat pellentesque augue, aliquam eleifend lacus pulvinar id. Aenean ultrices sagittis tellus in mattis. In hendrerit aliquam mauris at volutpat. Maecenas tortor nulla, gravida at ornare nec, dignissim ut tortor. Quisque eros mauris, varius vel lectus eget, consequat consequat leo. Cras vel tempor lacus. Sed elementum venenatis hendrerit. Sed nec pulvinar odio. Suspendisse egestas aliquam iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed blandit lacinia posuere. Aenean in sollicitudin mi. Aenean accumsan ullamcorper mauris, eget interdum tortor mollis ut.
</p>
<p>
Nam feugiat quam at sollicitudin vehicula. Morbi efficitur, quam eu ullamcorper venenatis, felis lacus auctor nibh, sed aliquam dolor elit ut nisl. Cras in luctus tellus. Aliquam auctor, eros a tincidunt fringilla, nunc libero semper est, quis faucibus dui tellus et elit. Donec eu massa eget quam porttitor varius quis nec sapien. Sed ullamcorper venenatis ante, eu blandit mauris. Integer fringilla nec felis quis vulputate. Nulla sit amet pharetra eros, eget consequat nunc.
</p>
I would be grateful for advice about how to rotate a button in a flex context. I have a flex container with a "row" direction (that is, the three content items are arranged from left to right in a row), and the leftmost content item is a <div> that contains just a <button> with a few words of text in it. I want that <div> to be rendered vertically (so that the text reads from bottom to top), to hug the left edge of the container, and to be just the width of its one line of text.
The sample at https://jsfiddle.net/djbpitt/gth3nck9/74/ works as I need it to in Firefox 89, but in Chrome 90 (and Safari 14.1.1) the button is not rotated. caniuse.com tells me that vendor prefixes should not be required for CSS transform: rotate() or writing-mode: vertical-lr;, and adding a -webkit prefix doesn't seem to help anyway.
I would be grateful if someone could please advise me about how I can obtain the behavior I need in the versions of Firefox, Chrome, and Safari mentioned above (which are the latest versions as I write this). I would prefer a pure HTML/CSS (that is, no JavaScript) solution. Thank you!
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body > * {
overflow-y: auto;
height: 100vh;
}
body > section {
flex: auto;
}
div#button {
display: flex;
flex: 0 0 1em;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
button {
margin: auto;
border: 1px black solid;
border-radius: 10px 0 0 10px;
padding: 3px;
}
button > span {
writing-mode: vertical-lr;
width: 1em;
margin: 3px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>
<body>
<div id="button">
<button><span>Rotate me!</span></button>
</div>
<nav>
<ul>
<li>first</li>
<li>section</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim tristique est, et facilisis urna aliquet et. Vivamus porta laoreet mi non cursus. Integer volutpat tortor lectus, interdum gravida libero interdum ac. Curabitur malesuada cursus laoreet. Donec nec varius est, ac venenatis velit. Vivamus ac ipsum et nibh dictum dignissim. Fusce eget turpis in sem rutrum congue. Donec vitae sollicitudin nunc, elementum porta tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque convallis quam leo, pretium fermentum ante imperdiet sit amet. Quisque egestas risus vitae ante fermentum tincidunt. Sed consectetur efficitur tempus. Nunc tincidunt nunc sed semper accumsan. Ut eu tortor scelerisque, aliquet leo eget, ullamcorper dolor.</p>
<p>Duis non nisi vitae felis ultricies dapibus pulvinar quis ex. Nullam imperdiet, risus sed pharetra aliquam, mi nulla condimentum purus, tincidunt hendrerit ex metus vitae nisl. Nullam venenatis turpis libero, a bibendum elit venenatis ut. Aenean et orci ac metus pretium pellentesque. Phasellus sed faucibus est. Aenean a dui non augue aliquet sagittis quis at ex. Vestibulum lorem lectus, sodales efficitur lacinia id, iaculis id ante. Fusce aliquam erat libero, a ultrices dolor volutpat et. Vivamus at euismod nisl. Donec hendrerit non lacus vel mollis.</p>
<p>Phasellus gravida non nisi quis vehicula. Curabitur sagittis nec nulla eget sollicitudin. Mauris sit amet mattis ligula. Nulla pretium posuere diam vitae tempor. Aenean consequat ligula luctus quam vestibulum, vel rhoncus turpis laoreet. Etiam nec aliquam ipsum, ut tristique lorem. In nec auctor arcu. Proin sed finibus ligula. Sed scelerisque lorem ligula. Nam quis quam vehicula, hendrerit nibh nec, rhoncus elit. Praesent porttitor, tellus nec aliquam sollicitudin, justo orci sagittis nisl, non imperdiet ligula mauris sit amet eros. In dignissim placerat laoreet. Aenean ipsum lorem, aliquet id arcu id, rhoncus porta justo. Integer egestas mauris quam, eget placerat metus sagittis eget. Aenean volutpat eleifend nisi eget interdum.</p>
<p>
Vestibulum in ante lectus. Mauris luctus imperdiet facilisis. Nunc sagittis velit lacus, eget gravida arcu efficitur vitae. Sed sodales felis elit, eget volutpat dui congue sit amet. Fusce mi velit, cursus volutpat dapibus in, auctor id dolor. Maecenas convallis nisl justo. Cras sollicitudin tellus nec dui dictum finibus. Fusce nec feugiat metus. Aliquam sit amet congue nulla. Sed cursus fringilla sapien et malesuada. Duis aliquet, nunc eget consectetur fringilla, felis lectus ultrices mi, id maximus justo mauris a mi.</p>
<p>
Vivamus ac est vitae nulla dignissim posuere ac id arcu. Duis sed tortor pretium, tempus orci vel, efficitur ex. Quisque aliquet enim mattis odio tincidunt lacinia. Vestibulum blandit congue neque ac bibendum. Proin at consequat tortor, id malesuada dolor. Integer interdum purus sit amet leo venenatis, gravida porttitor ipsum eleifend. Donec venenatis maximus faucibus. Duis et magna vitae arcu malesuada sodales.</p>
</main>
</body>
</html>
The problem seems to lie with Chrome/Edge settings for button. They have for example amongst other things:
-webkit-writing-mode: horizontal-tb !important;
So this snippet gives up trying to style a button and replaces it with a div. Obviously you'll want to style that as you wish:
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body>* {
overflow-y: auto;
height: 100vh;
}
div#button {
position: relative;
display: flex;
flex: 0 0 1em;
writing-mode: vertical-lr;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
#button div {
background-color: #eeeeee;
padding: 10px 5px 10px 5px;
border: 1px solid black;
border-radius: 5px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
<div id="button">
<div>Rotate me!</div>
</div>
<nav>
<ul>
<li>first</li>
<li>section</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim tristique est, et facilisis urna aliquet et. Vivamus porta laoreet mi non cursus. Integer volutpat tortor lectus, interdum gravida libero interdum ac. Curabitur malesuada cursus
laoreet. Donec nec varius est, ac venenatis velit. Vivamus ac ipsum et nibh dictum dignissim. Fusce eget turpis in sem rutrum congue. Donec vitae sollicitudin nunc, elementum porta tortor. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Pellentesque convallis quam leo, pretium fermentum ante imperdiet sit amet. Quisque egestas risus vitae ante fermentum tincidunt. Sed consectetur efficitur tempus. Nunc tincidunt nunc sed semper accumsan. Ut eu tortor
scelerisque, aliquet leo eget, ullamcorper dolor.</p>
<p>Duis non nisi vitae felis ultricies dapibus pulvinar quis ex. Nullam imperdiet, risus sed pharetra aliquam, mi nulla condimentum purus, tincidunt hendrerit ex metus vitae nisl. Nullam venenatis turpis libero, a bibendum elit venenatis ut. Aenean et
orci ac metus pretium pellentesque. Phasellus sed faucibus est. Aenean a dui non augue aliquet sagittis quis at ex. Vestibulum lorem lectus, sodales efficitur lacinia id, iaculis id ante. Fusce aliquam erat libero, a ultrices dolor volutpat et. Vivamus
at euismod nisl. Donec hendrerit non lacus vel mollis.</p>
<p>Phasellus gravida non nisi quis vehicula. Curabitur sagittis nec nulla eget sollicitudin. Mauris sit amet mattis ligula. Nulla pretium posuere diam vitae tempor. Aenean consequat ligula luctus quam vestibulum, vel rhoncus turpis laoreet. Etiam nec aliquam
ipsum, ut tristique lorem. In nec auctor arcu. Proin sed finibus ligula. Sed scelerisque lorem ligula. Nam quis quam vehicula, hendrerit nibh nec, rhoncus elit. Praesent porttitor, tellus nec aliquam sollicitudin, justo orci sagittis nisl, non imperdiet
ligula mauris sit amet eros. In dignissim placerat laoreet. Aenean ipsum lorem, aliquet id arcu id, rhoncus porta justo. Integer egestas mauris quam, eget placerat metus sagittis eget. Aenean volutpat eleifend nisi eget interdum.</p>
<p>
Vestibulum in ante lectus. Mauris luctus imperdiet facilisis. Nunc sagittis velit lacus, eget gravida arcu efficitur vitae. Sed sodales felis elit, eget volutpat dui congue sit amet. Fusce mi velit, cursus volutpat dapibus in, auctor id dolor. Maecenas
convallis nisl justo. Cras sollicitudin tellus nec dui dictum finibus. Fusce nec feugiat metus. Aliquam sit amet congue nulla. Sed cursus fringilla sapien et malesuada. Duis aliquet, nunc eget consectetur fringilla, felis lectus ultrices mi, id maximus
justo mauris a mi.</p>
<p>
Vivamus ac est vitae nulla dignissim posuere ac id arcu. Duis sed tortor pretium, tempus orci vel, efficitur ex. Quisque aliquet enim mattis odio tincidunt lacinia. Vestibulum blandit congue neque ac bibendum. Proin at consequat tortor, id malesuada dolor.
Integer interdum purus sit amet leo venenatis, gravida porttitor ipsum eleifend. Donec venenatis maximus faucibus. Duis et magna vitae arcu malesuada sodales.</p>
</main>
OP here. Thank you, A Haworth, for the pointer to the !important user agent setting for writing-mode in Webkit. I knew that browsers had default styling, of course, but I didn't realize that some of that styling apparently could not be overridden with user specifications.
Your insight led me to give up on changing the writing-mode value for the <button>, as you suggest, and I approached the task by wrapping a <span> around the text inside my <button> and specifying the writing-mode for the <span>. The new version is at https://jsfiddle.net/djbpitt/gth3nck9/86/. HTML and CSS are copied below:
<div id="button">
<button>
<span>Rotate me!</span>
</button>
</div>
I had to do some additional fiddling with the CSS to get the rendering I wanted:
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body > * {
overflow-y: auto;
height: 100vh;
}
body > section {
flex: auto;
}
div#button {
display: flex;
flex: 0 0 1em;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
button {
margin: auto;
border: 1px black solid;
border-radius: 10px 0 0 10px;
padding: 3px;
}
button > span {
writing-mode: vertical-lr;
width: 1em;
margin: 3px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
(EDIT: my current code added to bottom of post)
I need to set a value for the height of the div in order for it to hide/scroll overflow properly, but I don't want a div at a specific pixel height. I can solve that by using % or vh units, but I don't actually want to use those units. By that, I mean I don't want my div to always be, for example, 2/3 of the page, because that means the bottom of the div will be a different distance from the bottom of the browser window, like this-
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body > div {
width: 90%;
height: 90%;
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div>
</div>
</body>
</html>
-I want it to be a consistent distance from the bottom of the browser window,
like this-
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
div {
background-color: yellow;
width: 350px;
position: fixed;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div>
</div>
</body>
</html>
(for visual representation primarily, I am not really using the code itself as an example)
Basically, I want my div to be a variable height and hide/scroll overflow, but always 10px from the bottom.
I think these describe the same problem I'm having:
Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x - y), where y is unknown
Getting a scrollable child div to Vertically fill the remainder of its parent dynamically
The answers there are to use tables or flexbox - are these the only options (without using javascript)?
My code:
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, Arial, sans-serif;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
height: 100%;
}
p {
font-size: 9pt;
}
a {
text-decoration: none;
color: black;
}
.container { /*this contains all the divs!!*/
padding: 10px;
}
.header {
}
.name {
float: left;
width: 25vw;
padding-right: 5vw;
}
.about {
width: 65vw;
}
.main { /*this contains divs 'left' and 'right'*/
/*background-color: #CCCCCC;*/
clear: left;
padding-top: 10px;
width: 95vw;
}
.left {
/*background-color: #E6E6E6;*/
float: left;
min-height: 10px;
width: 25vw;
padding-right: 5vw;
}
.hold { /*this is how i tried your solution*/
position: relative;
height: calc(95vh - 10px);
}
.right { /*this is my problem div*/
background-color: #FFFF00;
width: 65vw;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.lorem {
margin-right: 20vw;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Name </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="name">
<p> Name </p>
</div> <!-- end div name -->
<div class="about">
<p> about </p>
</div> <!-- end div name -->
</div> <!-- end div header -->
<div class="main">
<div class="left">
</div> <!-- end div left -->
<div class="hold">
<div class="right">
<div class="lorem">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat facilisis purus at fermentum. Etiam ultricies iaculis nulla maximus cursus. Maecenas justo nulla, suscipit a dapibus at, lobortis nec mauris. Mauris egestas mi sit amet risus convallis, in hendrerit lorem maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin tempor libero, nec molestie dui tempor sit amet. Aenean molestie ex id nisl venenatis, quis tincidunt lectus porta. Vivamus aliquam lobortis nulla, id porta leo consequat sollicitudin. Ut iaculis neque placerat ipsum placerat tincidunt.
Quisque libero sem, hendrerit quis urna sit amet, mollis venenatis nisl. Morbi vel neque rhoncus, congue purus ac, condimentum nunc. Morbi vestibulum metus nec velit eleifend, ac sodales nulla posuere. Praesent id fermentum massa. Morbi vestibulum lorem nulla, ac vestibulum nunc auctor non. Donec ultricies placerat mauris, at pretium nibh finibus eu. Suspendisse gravida neque nisl, sit amet bibendum ante placerat eget. Sed laoreet suscipit turpis vitae ullamcorper. Mauris quis pharetra eros. Curabitur quis diam non dui elementum facilisis vel ac sem. Duis vitae augue vitae mi pulvinar placerat ut quis purus. Donec sagittis maximus aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phasellus pharetra nisi arcu, in laoreet lacus convallis sed. Nam euismod ligula felis, ut laoreet nisl sodales eget. Maecenas cursus, augue vitae suscipit laoreet, purus magna bibendum tellus, sed maximus ex dui ac velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget aliquet tellus, in viverra sapien. Sed eget urna mauris. Morbi dapibus dolor et felis viverra condimentum sed a nisl. Integer congue cursus ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse nulla risus, pulvinar eget odio vitae, scelerisque cursus magna. Nam maximus eros vitae massa euismod, vel tempus felis vulputate.
Nunc blandit massa a nisl viverra, vitae molestie ex rhoncus. Pellentesque finibus luctus nisi. Sed quis luctus metus. Nullam sed augue ultrices, lacinia dolor ac, egestas ante. In non nisi nibh. Sed vitae dui libero. Duis ut ullamcorper urna. Phasellus quis fringilla leo.
Nulla porta tellus ut nibh pharetra dapibus. Mauris ullamcorper egestas aliquam. Cras posuere scelerisque imperdiet. In ultrices, leo eu molestie bibendum, augue dui semper ante, vel faucibus nibh enim sed eros. Mauris ipsum dui, placerat et tincidunt vitae, laoreet vel enim. Praesent at ligula et neque placerat blandit sed vulputate ipsum. Phasellus sodales, odio nec aliquam pretium, augue lacus mattis quam, nec vulputate purus lorem vitae nisi.
Suspendisse nisl ipsum, volutpat ac dapibus at, tincidunt eget nulla. Mauris ornare a nisi ac fringilla. Maecenas leo sapien, vulputate in dictum a, feugiat in eros. Aliquam sit amet sagittis leo. Mauris metus nisl, convallis eget mollis ut, ullamcorper eu tellus. Pellentesque eu dolor tempor, bibendum leo vitae, maximus velit. Aenean volutpat neque sit amet tellus mattis euismod.
Quisque nec vehicula orci. Curabitur varius fringilla risus, convallis tincidunt velit porttitor vitae. Aenean in lacus nec nunc tempor dignissim nec pretium sem. Nullam finibus odio quis metus ornare, in fermentum elit rutrum. Proin vitae dui in metus vehicula sodales. Donec massa neque, suscipit ac est quis, ultrices auctor risus. Cras eu auctor lectus. Nam sagittis vulputate hendrerit. Maecenas consequat odio justo, at malesuada nulla ullamcorper a. Donec arcu tellus, dignissim ut velit vel, consequat scelerisque dolor. Curabitur dictum vel risus quis consequat.
Pellentesque fringilla eu nisi sed tincidunt. Nulla feugiat sit amet purus sit amet cursus. Suspendisse nibh purus, tincidunt eu congue ut, ultricies id lectus. Phasellus convallis in nibh vel molestie. Nunc condimentum congue justo. In congue, turpis at vulputate imperdiet, dolor erat ultricies turpis, vitae egestas est augue in nisl. Ut ut leo diam. Duis vulputate ligula velit, vitae volutpat felis viverra a. Maecenas justo quam, lobortis a placerat ut, ullamcorper ac lorem. Sed eu vehicula odio.
Fusce id mauris ornare, mollis mi at, vulputate turpis. Praesent a risus feugiat, rutrum lacus nec, sodales nisi. Nulla ullamcorper libero pretium lacus accumsan, eu tempor mi porta. In tincidunt porta feugiat. Cras lectus arcu, convallis nec neque ac, vestibulum pretium ex. Curabitur mi ipsum, commodo ut eros eget, fringilla fringilla tortor. Curabitur maximus tellus ut turpis malesuada, auctor semper lectus porta. Suspendisse non sapien sagittis, dapibus tellus et, egestas quam. Aliquam vitae massa sit amet urna rhoncus rutrum sit amet et lorem. Phasellus gravida justo ut vulputate vestibulum.
Nunc sed tempus metus, sit amet volutpat mi. Quisque sed metus rutrum, iaculis enim sed, sodales lacus. Quisque quis mi ac sapien scelerisque efficitur lacinia et nunc. Proin tincidunt scelerisque turpis, non euismod ante interdum at. Sed vitae velit scelerisque, placerat nulla in, egestas justo. Mauris urna orci, pulvinar a nibh a, luctus pellentesque mauris. Nulla faucibus hendrerit urna non venenatis. Quisque nulla mi, suscipit sit amet nunc eu, dictum ullamcorper tellus. Donec lacus libero, commodo quis mauris pellentesque, feugiat iaculis nisl. Nulla facilisi. Suspendisse sed risus quis risus fringilla condimentum. Aenean aliquet in eros vel volutpat. Vivamus malesuada ultrices lorem sit amet feugiat. In interdum leo ac orci sollicitudin, maximus vestibulum nisl gravida. Sed venenatis pharetra fringilla. Etiam mauris risus, cursus et est tristique, mattis venenatis nisi.
</p>
</div> <!-- end div LOREM -->
</div> <!-- end div main -->
</div> <!-- end div hold -->
</div> <!-- end div container -->
</body>
</html>
You're on the right track! You can combine vh with calc to get the desired effect.
height: calc(100vh - 10px) - assuming the element is positioned at the top of the screen, that'll achieve the effect you're describing.
To handle scroll/overflow, you'll need an inner container - a div inside the one you set the height property on. Give that inner div { height: 100%; overflow: auto; } and you should be all set.
Here's a demo - to see it working, use the full screen view and shrink your browser's height.
/* These styles are just to make this easier to see,
and to normalize the display a little. */
* { box-sizing: border-box; margin: 0; padding: 0; }
.page { width: 100px; border: 2px solid; }
/* Here's the box that locks to some distance from the bottom, in this case 30px */
.outer {
height: calc(100vh - 30px);
position: relative;
border: 1px solid blue;
}
/* And here's the scrollable container inside it */
.inner {
height: 100%;
overflow: auto;
}
<div class="page">
<div class="outer">
<div class="inner">
content content content content
content content content content
content content content content
</div>
</div>
</div>
http://codepen.io/Kalesh/pen/xbBmdj?editors=110
Absolute parent containing a header and content divs. Both are dynamic. I want to display scroll-bar on the content only.
I don't want to give any height to header or make the content absolute with top X.
Is there any way to accomplish this?
#parent {
position:absolute;
top: 10px; bottom: 225px; right: 340px; width: 320px;
border: 1px solid black;
}
#header {
border-bottom: 2px solid #426da9; padding: 4px 10px 0; font-size: 32px;
}
#content {
padding: 10px;
font-size: 20px;
}
<div id="parent">
<div id="header">
HEADER
Duis risus eros, bibendum nec pretium at, eleifend non nisi.
</div>
<div id="content">
CONTENT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut sollicitudin arcu, sit amet varius purus. Proin eget magna nec sapien vehicula tincidunt. Vestibulum commodo magna sit amet tempor posuere. Ut ac consequat ipsum. Phasellus nulla est, elementum in dictum pulvinar, lacinia sit amet turpis. Nulla auctor placerat dapibus. Nulla vestibulum non nunc sed venenatis. In ac enim scelerisque, ornare leo at, posuere diam. Sed molestie metus semper fermentum maximus. Aliquam in accumsan risus, id maximus mauris.
Duis risus eros, bibendum nec pretium at, eleifend non nisi. Curabitur auctor, odio eu congue aliquet, sapien sapien rutrum orci, sit amet hendrerit sem sem et lectus. Nulla facilisi. Praesent fermentum id nunc et volutpat. Vivamus ac sodales nisi. Duis nec libero eu quam faucibus iaculis et vel magna. Cras erat mauris, imperdiet a porta eu, pharetra eu augue.
Duis risus eros, bibendum nec pretium at, eleifend non nisi. Curabitur auctor, odio eu congue aliquet, sapien sapien rutrum orci, sit amet hendrerit sem sem et lectus. Nulla facilisi. Praesent fermentum id nunc et volutpat. Vivamus ac sodales nisi. Duis nec libero eu quam faucibus iaculis et vel magna. Cras erat mauris, imperdiet a porta eu, pharetra eu augue.
</div>
</div>
Since the header must have a flexible height, it will be difficult to achieve this in old CSS. However, new browsers support flexible boxes, which are perfect for this:
#parent {
display: flex; /* Magic begins */
flex-direction: column; /* Column layout */
}
#content {
flex: 1; /* Starting at 0, grow to fill the remaining space */
overflow: auto; /* Add scrollbars if necessary */
}
#parent {
position:absolute;
top: 10px; bottom: 225px; right: 340px; width: 320px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
#header {
border-bottom: 2px solid #426da9; padding: 4px 10px 0; font-size: 32px;
}
#content {
padding: 10px;
font-size: 20px;
flex: 1;
overflow: auto;
}
<div id="parent">
<div id="header">
HEADER
Duis risus eros, bibendum nec pretium at, eleifend non nisi.
</div>
<div id="content">
CONTENT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut sollicitudin arcu, sit amet varius purus. Proin eget magna nec sapien vehicula tincidunt. Vestibulum commodo magna sit amet tempor posuere. Ut ac consequat ipsum. Phasellus nulla est, elementum in dictum pulvinar, lacinia sit amet turpis. Nulla auctor placerat dapibus. Nulla vestibulum non nunc sed venenatis. In ac enim scelerisque, ornare leo at, posuere diam. Sed molestie metus semper fermentum maximus. Aliquam in accumsan risus, id maximus mauris.
Duis risus eros, bibendum nec pretium at, eleifend non nisi. Curabitur auctor, odio eu congue aliquet, sapien sapien rutrum orci, sit amet hendrerit sem sem et lectus. Nulla facilisi. Praesent fermentum id nunc et volutpat. Vivamus ac sodales nisi. Duis nec libero eu quam faucibus iaculis et vel magna. Cras erat mauris, imperdiet a porta eu, pharetra eu augue.
Duis risus eros, bibendum nec pretium at, eleifend non nisi. Curabitur auctor, odio eu congue aliquet, sapien sapien rutrum orci, sit amet hendrerit sem sem et lectus. Nulla facilisi. Praesent fermentum id nunc et volutpat. Vivamus ac sodales nisi. Duis nec libero eu quam faucibus iaculis et vel magna. Cras erat mauris, imperdiet a porta eu, pharetra eu augue.
</div>
</div>
It's not easy to explain very well what I'm having problem with so I have attached an image:
http://test.richardknop.com/test.gif
Here is my simplified XHTML markup so far:
<div id="page">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
How to style it?
I'm getting a little bit desperate and I'm not even sure it's possible.
Like this:
#page {
position:relative;
overflow:hidden;
}
#page .images {
position:absolute; bottom:0; left: 0; width: $width-of-sidebar;
}
#sidebar {
padding-bottom: $height-of-the-image;
float:left;
}
To get background in the sidebar you'll need faux columns technique.
Richard, I think your thinking about the problem is wrong. You are thinking about these 2 items as one thing. You need to separate them.
Make footer/border a separate div and make sure it's always at the bottom. I think that's pretty straight forward.
Also make sure that your sidebar is the same size as your content. Put your images in the sidebar - and make them stick to the bottom like your footer. I usually use some sort of framework to make this easier - try out blueprint or elasticss
HTML:
<html>
<head>
<link rel="stylesheet" href="1732288.css" type="text/css" media="screen, projection">
</head>
<body>
<div id="page">
<div id="sidebar">
<div id="sidebar-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue iaculis ultrices. Nam vitae odio ut nisl dignissim pretium. Donec pulvinar gravida felis, sed pretium risus aliquet ornare. Praesent accumsan libero rhoncus tortor semper bibendum. Nunc eleifend ante turpis. Aliquam sit amet ipsum orci, sit amet convallis erat. Morbi arcu dui, ultrices vel dapibus ac, viverra in odio. Proin imperdiet sollicitudin felis vestibulum porta. Aenean ac nisi nunc, et auctor sem. Praesent vitae erat augue. Suspendisse malesuada interdum consequat. Aenean laoreet molestie elit ut placerat.
</div>
<div id="sidebar-bottom">
<div id = "image-1">
image 1
</div>
<div id = "image-2">
image 2
</div>
</div>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue iaculis ultrices. Nam vitae odio ut nisl dignissim pretium. Donec pulvinar gravida felis, sed pretium risus aliquet ornare. Praesent accumsan libero rhoncus tortor semper bibendum. Nunc eleifend ante turpis. Aliquam sit amet ipsum orci, sit amet convallis erat. Morbi arcu dui, ultrices vel dapibus ac, viverra in odio. Proin imperdiet sollicitudin felis vestibulum porta. Aenean ac nisi nunc, et auctor sem. Praesent vitae erat augue. Suspendisse malesuada interdum consequat. Aenean laoreet molestie elit ut placerat.
</p>
<p>
Maecenas pellentesque elementum sapien, eu imperdiet turpis scelerisque pulvinar. Proin elit elit, condimentum non lacinia quis, congue vel justo. Sed rutrum magna quis neque sollicitudin vestibulum. Morbi ut eros vitae metus rhoncus sodales. Donec vel velit sed orci imperdiet tristique vel sed odio. Duis eget tellus purus. Sed blandit, tortor nec luctus tempor, tellus elit rutrum nibh, vel egestas libero velit eu libero. Nullam rhoncus, sem in ornare aliquet, dui purus consectetur felis, vitae porta elit leo et eros. Integer pharetra, mauris in lobortis aliquam, est eros commodo ante, sit amet facilisis mauris ipsum pharetra risus. Etiam vel nulla justo. Curabitur pretium facilisis consectetur. Aenean et mauris eros, nec pulvinar diam. Integer ut diam non leo ullamcorper vehicula a in mi. Curabitur adipiscing, enim feugiat porttitor pretium, lacus justo sodales odio, et congue mi sem sed ligula. Etiam accumsan accumsan tortor id pretium.
</p>
<p>
Curabitur quis nunc turpis, vitae vestibulum magna. Aliquam ultrices mi eget arcu convallis feugiat. Integer lacinia ipsum suscipit justo dapibus ultrices. Ut quis arcu vel nibh tincidunt tempus. Quisque imperdiet fermentum leo a ultrices. Donec arcu odio, congue eget elementum a, dignissim at felis. Donec in nibh dui. Curabitur adipiscing consequat urna, sed vehicula neque molestie at. Sed consequat metus velit. Nunc justo neque, tincidunt et faucibus et, mattis sit amet nulla. Integer elementum, purus in malesuada mollis, orci nisi ullamcorper nisl, quis tempor nunc augue et arcu. Integer massa metus, faucibus et vestibulum at, egestas vel enim. Integer condimentum sollicitudin sollicitudin. Nulla volutpat ultricies mauris, eget hendrerit eros accumsan ac. Suspendisse aliquam, lacus ut fringilla auctor, sem sapien elementum nulla, a hendrerit enim turpis vitae dolor. Pellentesque ac mi quis ipsum commodo venenatis.
</p>
</div>
</div>
<div id = "footer">
footer
</div>
</body>
</html>
CSS:
body{
background: #eee;
}
#page{
background: #cccccc;
width: 800px;
}
#sidebar{
background: #999;
width: 200px;
height: 100%;
margin-right: 10px;
float: left;
}
#sidebar-content{
height: 90%;
}
#sidebar-bottom {
height: 50px;
vertical-align: bottom;
}
#image-1{
width: 100px;
float: left;
}
#content{
height: 100%;
left: 200px;
background: #333;
}
#footer{
background: #3ee;
}
You can play around and make it centered and such - but this is the gist of it without using any frameworks.
Here is the solution online :
http://www.gorbikoff.com/stuff/1732288.htm
Css is at:
http://www.gorbikoff.com/stuff/1732288.css