I made HTML page, with left side navbar(vertical), position fixed , so it will not move when i scroll down the other div(the guide with text),
after that div with text.
I am trying to make it responsive, but since it is fixed position it won't help.
Is there any trick to fix this?
example (not extacly as mine, since its very long code above 200 lines with css and everything)
but still it is the same idea.
notice because the navbar is fixed position it will hide the guide div when screen pixels go down
.sidenav {
height: 100%;
width: 260px;
position: fixed;
z-index: 1;
top: 140px;
left: 135px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
border-radius: 5px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: #2b8bc6;
display: block;
}
.sidenav h3 {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: black;
display: block;
}
.box22 {
background-color: #fff;
max-width: 1000px;
margin: auto;
margin-top: 20px;
border-radius: 8px;
}
<body>
<div class="sidenav">
HTML 1 editors
HTML 2 editors
HTML 3 editors
</div>
<div class="box22">
<h1>HTML part 1 intro</h1>
<p>text</p>
</div>
</body>
Use a relative CSS Unit like vw, which is equivalent to 1% of the total viewport.
Right now, you've got it set to an absolute size, 260px. Change that to something like 10vw.
For more info on CSS units, including a list of relative units, check out this W3 page.
.sidenav {
height: 100%;
width: 10vw;
position: fixed;
z-index: 1;
top: 140px;
left: -6px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
border-radius: 5px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: #2b8bc6;
display: block;
}
.sidenav h3 {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: black;
display: block;
}
.box22 {
background-color: #fff;
max-width: 1000px;
margin: auto;
margin-top: 20px;
margin-left: 11vw;
border-radius: 8px;
}
<body>
<div class="sidenav">
HTML 1 editors
HTML 2 editors
HTML 3 editors
</div>
<div class="box22">
<h1>HTML part 1 intro</h1>
<p>text</p>
</div>
</body>
Could you do something with a bit of jQuery and more traditional nav layout for smaller responsive designs? Here's an idea: (fiddle: https://jsfiddle.net/moqb29cr/)
HTML:
HTML 1 editors
HTML 2 editors
HTML 3 editors
<h1>HTML part 1 intro</h1>
<div id="responsive_nav">
☰
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu maximus turpis. Cras non leo et felis consectetur tristique. Fusce rutrum erat non facilisis suscipit. Quisque id mi dictum, vestibulum massa sit amet, pharetra justo. Sed rutrum, ligula iaculis mattis sagittis, nisi urna commodo diam, eu auctor mi nunc eu odio. Quisque vel odio viverra, imperdiet augue at, rhoncus orci. Nullam fringilla id tortor vel rutrum. Morbi interdum egestas luctus. Suspendisse nec lacus lacinia, mollis massa auctor, consectetur nisi. Quisque interdum iaculis turpis vitae posuere. Aenean sollicitudin blandit interdum. Nulla vel bibendum nibh, at semper ex.Sed ornare dolor dui, sit amet efficitur lacus varius eget. Nunc ut urna at risus tristique cursus. Nulla rutrum rhoncus odio, vel volutpat nibh hendrerit sed. Nulla tempus id erat nec dictum. Phasellus laoreet pretium posuere. Etiam fringilla ipsum ut porttitor euismod. Mauris auctor nisi vitae sapien lacinia, porta tempor est consequat. Phasellus auctor bibendum varius. Duis convallis justo vitae nibh finibus, et vestibulum enim congue. Sed id nulla quam. Quisque sed cursus eros. Integer ut telVestibulum malesuada elementum diam non tincidunt. Integer et pharetra mi, nec tempus erat. Integer tempor dictum feugiat. Duis vel elit tellus. Etiam ornare consequat accumsan. Fusce sit amet sapien vitae mauris vestibulum mattis a sit amet odio. Maecenas volutpat orci tincidunt ante suscipit eleifend. Sed tempor faucibus ligula, vitae vulputate tortor viverra id. Phasellus ultricies, erat et fermentum tincidunt, augue nisl cursus nulla, id facilisis nunc ante commodo quam.Praesent euismod varius eros non euismod. Fusce posuere nisl lacus, a condimentum nunc efficitur eu. Ut et molestie tortor. Nunc vitae magna at felis rutrum blandit vel ut est. Aenean condimentum ipsum nec lorem condimentum convallis. Donec nec diam vel enim dapibus pretium eu at tortor. Maecenas vulputate sed diam ac aliquam. Aenean pharetra ullamcorper nisi, at egestas justo. Interdum et malesuada fames ac ante ipsum primis in faucibus.Morbi malesuada dui vitae ex pretium, eget congue nisi viverra. Donec hendrerit lorem non augue aliquet dictum. Vivamus molestie in justo in pharetra. Nunc finibus, velit sit amet malesuada bibendum, turpis elit maximus tortor, et vehicula ex tellus non lectus. Donec rhoncus erat placerat, pulvinar est eu, tincidunt neque. Donec ligula enim, bibendum non est non, porta blandit risus. In et facilisis lorem, ut commodo ipsum. Nulla feugiat felis vel rhoncus ultrices. Vivamus vitae orci tincidunt, mattis risus a, mattis dui. Curabitur congue enim at lorem lobortis, nec venenatis leo interdum. Quisque id euismod felis, ut congue nunc.</p>
jQuery:
$("#responsive_nav").click(function(){
$(".sidenav").toggle();
});
And CSS:
p {
position:relative;
display:block;
width:75%;
left:28%;
}
.sidenav {
height: 100%;
width: 25%;
position: fixed;
z-index: 1;
top: 85px;
left;0px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
border-radius: 5px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: #2b8bc6;
display: block;
}
.sidenav h3 {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: black;
display: block;
}
.box22 {
background-color: #fff;
max-width: 1000px;
margin: auto;
margin-top: 20px;
border-radius: 8px;
}
#responsive_nav {
display:none;
}
#media only screen and (max-width: 600px) {
.sidenav {
display:none;
}
#responsive_nav {
display:block;
position:fixed;
top:15px;
left:80%;
cursor:pointer;
border-radius:6px;
border:thin solid #ccc;
padding:10px;
}
#responsive_nav:hover {
background-color:#ccc;
border-radius:6px;
padding:10px;
}
p {
width:90%;
left:0%;
}
}
Related
I'm trying to add left & right padding to the details text when the details block is open, without the padding the text runs right up to the edge of the background and looks crowded. However, when adding the left & right padding, the summary section shrinks on both sides by that amount.
I tried adding border-box sizing to the details, which did help with the element not expanding beyond 100% width when open, but I can't figure out how to keep the summary bar at 100% width too.
summary.accordion-button {
display: revert;
}
details.accordion-button {
width: 100%;
margin-bottom: 1rem;
padding-bottom: 0.2rem;
border-radius: var(--buttons-radius);
padding-left: 1em;
padding-right: 1em;
box-sizing: border-box;
}
summary.accordion-button > * {
display: inline;
}
summary.accordion-button:not([open]) {
text-indent: 0.5em;
list-style: revert;
padding: 0.5rem;
background-color: transparent;
border-radius: var(--buttons-radius);
border: var(--buttons-border-width) solid
rgb(var(--color-base-outline-button-labels));
box-shadow: var(--buttons-shadow-horizontal-offset)
var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius)
rgba(var(--color-shadow), var(--buttons-shadow-opacity));
}
details.accordion-button:not([open]):hover summary {
background: rgb(var(--color-base-text));
color: rgb(var(--color-base-solid-button-labels)); /* marker */
box-shadow: var(--buttons-shadow-horizontal-offset)
var(--buttons-shadow-vertical-offset)
calc(var(--buttons-shadow-blur-radius) * 1.2)
rgba(var(--color-base-accent-1), calc(var(--buttons-shadow-opacity) * 1.25));
}
details.accordion-button:not([open]):hover h4 {
color: rgb(var(--color-base-solid-button-labels));
font-size: 1.2em;
letter-spacing: 0.1em;
}
details.accordion-button[open] {
background: rgba(var(--color-base-text), 0.15);
box-shadow: var(--buttons-shadow-horizontal-offset)
var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius)
rgba(var(--color-shadow), var(--buttons-shadow-opacity));
}
details.accordion-button[open] h4 {
color: rgb(var(--color-base-solid-button-labels));
font-size: 1.2em;
letter-spacing: 0.1em;
}
details.accordion-button[open] summary {
border-radius: var(--buttons-radius) var(--buttons-radius) 0 0;
background: rgb(var(--color-base-text));
border: none;
letter-spacing: 0.1em;
color: rgb(var(--color-base-solid-button-labels));
box-shadow: none;
}
.accordion-button summary::-webkit-details-marker,
.accordion-button summary::marker {
display: revert;
}
details.accordion-button::-webkit-details-marker:hover,
details summary[open].accordion-button::marker:hover {
color: rgb(var(--color-base-solid-button-labels));
}
/* variables */
:root {
--buttons-radius: 8px;
--buttons-border-width: 2px;
--buttons-border-opacity: 1;
--buttons-shadow-horizontal-offset: 0px;
--buttons-shadow-vertical-offset: 0px;
--buttons-shadow-blur-radius: 0px;
--color-base-text: 68, 34, 115;
--color-base-outline-button-labels: 68, 34, 155;
--color-base-solid-button-labels: 255, 255, 255;
}
/*-------- v2 oddities */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/*-------- v3 oddities */
summary {
cursor: pointer;
list-style: none;
position: relative;
}
summary .icon-caret {
position: absolute;
height: 0.6rem;
right: 1.5rem;
top: calc(50% - 0.2rem);
}
summary::-webkit-details-marker {
display: none;
}
body,
h1,
h2,
h3,
h4,
h5 {
font-family: sans-serif;
color: #442273;
}
<section>
<h3>Section_Header</h3>
<details class="accordion-button">
<summary class="accordion-button">
<h4>Question_1</h4>
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum morbi blandit cursus risus. Malesuada fames ac turpis egestas integer eget. Curabitur gravida arcu ac tortor dignissim
convallis aenean et tortor. Varius vel pharetra vel turpis nunc eget. Velit scelerisque in dictum non consectetur a erat. Eget duis at tellus at urna. Porttitor eget dolor morbi non arcu risus quis. Gravida arcu ac tortor dignissim convallis. Mauris
cursus mattis molestie a iaculis. Laoreet non curabitur gravida arcu. Nunc non blandit massa enim nec dui nunc mattis enim. Egestas quis ipsum suspendisse ultrices gravida. Sit amet purus gravida quis blandit turpis. Mauris vitae ultricies leo integer
malesuada nunc vel risus. Risus viverra adipiscing at in. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Non quam lacus suspendisse faucibus interdum. Sed sed risus pretium quam vulputate dignissim suspendisse in. Sit amet
consectetur adipiscing elit pellentesque habitant.</p>
<p>Malesuada fames ac turpis egestas sed. Auctor augue mauris augue neque gravida in fermentum et. Risus sed vulputate odio ut enim blandit volutpat maecenas. Interdum consectetur libero id faucibus. Orci ac auctor augue mauris augue neque gravida in.
Sagittis vitae et leo duis ut diam quam nulla. Odio pellentesque diam volutpat commodo sed. In fermentum et sollicitudin ac orci. Sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Mi quis hendrerit dolor magna eget est lorem
ipsum. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Tellus in hac habitasse platea. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Aliquam eleifend mi in nulla posuere. Diam sollicitudin tempor id eu
nisl nunc. Velit laoreet id donec ultrices tincidunt arcu non sodales neque. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Hac habitasse platea dictumst vestibulum rhoncus. Eu sem integer vitae justo eget magna fermentum iaculis eu.</p>
</details>
</section>
A quick solution would be wrapping the details text (those p elements) into a div element and apply the padding for that new div instead of the details element.
summary.accordion-button {
display: revert;
}
details.accordion-button {
width: 100%;
margin-bottom: 1rem;
border-radius: var(--buttons-radius);
// padding-bottom: 0.2rem; /** no longer needed here */
// padding-left: 1em; /** no longer needed here */
// padding-right: 1em; /** no longer needed here */
box-sizing: border-box;
}
/** apply the padding for the "wrapper" div */
.wrapper {
padding: 1em;
}
/** remove margins on the "p" elements */
.wrapper>p {
margin: 0
}
/** only have a bottom margin to visually separate the text that doesn't apply to the last "p" element so that it doesn't ruin the padding on ".wrapper" div */
.wrapper>p:not(:last-child) {
margin-bottom: 1em;
}
summary.accordion-button>* {
display: inline;
}
summary.accordion-button:not([open]) {
text-indent: 0.5em;
list-style: revert;
padding: 0.5rem;
background-color: transparent;
border-radius: var(--buttons-radius);
border: var(--buttons-border-width) solid rgb(var(--color-base-outline-button-labels));
box-shadow: var(--buttons-shadow-horizontal-offset) var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius) rgba(var(--color-shadow), var(--buttons-shadow-opacity));
}
details.accordion-button:not([open]):hover summary {
background: rgb(var(--color-base-text));
color: rgb(var(--color-base-solid-button-labels));
/* marker */
box-shadow: var(--buttons-shadow-horizontal-offset) var(--buttons-shadow-vertical-offset) calc(var(--buttons-shadow-blur-radius) * 1.2) rgba(var(--color-base-accent-1), calc(var(--buttons-shadow-opacity) * 1.25));
}
details.accordion-button:not([open]):hover h4 {
color: rgb(var(--color-base-solid-button-labels));
font-size: 1.2em;
letter-spacing: 0.1em;
}
details.accordion-button[open] {
background: rgba(var(--color-base-text), 0.15);
box-shadow: var(--buttons-shadow-horizontal-offset) var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius) rgba(var(--color-shadow), var(--buttons-shadow-opacity));
}
details.accordion-button[open] h4 {
color: rgb(var(--color-base-solid-button-labels));
font-size: 1.2em;
letter-spacing: 0.1em;
}
details.accordion-button[open] summary {
border-radius: var(--buttons-radius) var(--buttons-radius) 0 0;
background: rgb(var(--color-base-text));
border: none;
letter-spacing: 0.1em;
color: rgb(var(--color-base-solid-button-labels));
box-shadow: none;
}
.accordion-button summary::-webkit-details-marker,
.accordion-button summary::marker {
display: revert;
}
details.accordion-button::-webkit-details-marker:hover,
details summary[open].accordion-button::marker:hover {
color: rgb(var(--color-base-solid-button-labels));
}
/* variables */
:root {
--buttons-radius: 8px;
--buttons-border-width: 2px;
--buttons-border-opacity: 1;
--buttons-shadow-horizontal-offset: 0px;
--buttons-shadow-vertical-offset: 0px;
--buttons-shadow-blur-radius: 0px;
--color-base-text: 68, 34, 115;
--color-base-outline-button-labels: 68, 34, 155;
--color-base-solid-button-labels: 255, 255, 255;
}
/*-------- v2 oddities */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/*-------- v3 oddities */
summary {
cursor: pointer;
list-style: none;
position: relative;
}
summary .icon-caret {
position: absolute;
height: 0.6rem;
right: 1.5rem;
top: calc(50% - 0.2rem);
}
summary::-webkit-details-marker {
display: none;
}
body,
h1,
h2,
h3,
h4,
h5 {
font-family: sans-serif;
color: #442273;
}
<section>
<h3>Section_Header</h3>
<details class="accordion-button">
<summary class="accordion-button">
<h4>Question_1</h4>
</summary>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum morbi blandit cursus risus. Malesuada fames ac turpis egestas integer eget. Curabitur gravida arcu ac tortor dignissim
convallis aenean et tortor. Varius vel pharetra vel turpis nunc eget. Velit scelerisque in dictum non consectetur a erat. Eget duis at tellus at urna. Porttitor eget dolor morbi non arcu risus quis. Gravida arcu ac tortor dignissim convallis.
Mauris cursus mattis molestie a iaculis. Laoreet non curabitur gravida arcu. Nunc non blandit massa enim nec dui nunc mattis enim. Egestas quis ipsum suspendisse ultrices gravida. Sit amet purus gravida quis blandit turpis. Mauris vitae ultricies
leo integer malesuada nunc vel risus. Risus viverra adipiscing at in. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Non quam lacus suspendisse faucibus interdum. Sed sed risus pretium quam vulputate dignissim suspendisse
in. Sit amet consectetur adipiscing elit pellentesque habitant.</p>
<p>Malesuada fames ac turpis egestas sed. Auctor augue mauris augue neque gravida in fermentum et. Risus sed vulputate odio ut enim blandit volutpat maecenas. Interdum consectetur libero id faucibus. Orci ac auctor augue mauris augue neque gravida
in. Sagittis vitae et leo duis ut diam quam nulla. Odio pellentesque diam volutpat commodo sed. In fermentum et sollicitudin ac orci. Sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Mi quis hendrerit dolor magna eget est
lorem ipsum. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Tellus in hac habitasse platea. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Aliquam eleifend mi in nulla posuere. Diam sollicitudin tempor
id eu nisl nunc. Velit laoreet id donec ultrices tincidunt arcu non sodales neque. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Hac habitasse platea dictumst vestibulum rhoncus. Eu sem integer vitae justo eget magna fermentum iaculis
eu.
</p>
</div>
</details>
</section>
Do you need this ?
Left and right margin to only p tags
.accordion-button p {
padding: 0 5rem;
}
Delete paddings in details.accordion-button
details.accordion-button {
width: 100%;
margin-bottom: 1rem;
padding-bottom: 0.2rem;
border-radius: var(--buttons-radius);
/* padding-left: 1em;
padding-right: 1em; */
box-sizing: border-box;
}
Add padding in section
section{
padding: 1rem;
}
summary.accordion-button {
display: revert;
}
details.accordion-button {
width: 100%;
margin-bottom: 1rem;
padding-bottom: 0.2rem;
border-radius: var(--buttons-radius);
/* padding-left: 1em;
padding-right: 1em; */
box-sizing: border-box;
}
summary.accordion-button > * {
display: inline;
}
summary.accordion-button:not([open]) {
text-indent: 0.5em;
list-style: revert;
padding: 0.5rem;
background-color: transparent;
border-radius: var(--buttons-radius);
border: var(--buttons-border-width) solid
rgb(var(--color-base-outline-button-labels));
box-shadow: var(--buttons-shadow-horizontal-offset)
var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius)
rgba(var(--color-shadow), var(--buttons-shadow-opacity));
}
details.accordion-button:not([open]):hover summary {
background: rgb(var(--color-base-text));
color: rgb(var(--color-base-solid-button-labels)); /* marker */
box-shadow: var(--buttons-shadow-horizontal-offset)
var(--buttons-shadow-vertical-offset)
calc(var(--buttons-shadow-blur-radius) * 1.2)
rgba(var(--color-base-accent-1), calc(var(--buttons-shadow-opacity) * 1.25));
}
details.accordion-button:not([open]):hover h4 {
color: rgb(var(--color-base-solid-button-labels));
font-size: 1.2em;
letter-spacing: 0.1em;
}
details.accordion-button[open] {
background: rgba(var(--color-base-text), 0.15);
box-shadow: var(--buttons-shadow-horizontal-offset)
var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius)
rgba(var(--color-shadow), var(--buttons-shadow-opacity));
}
details.accordion-button[open] h4 {
color: rgb(var(--color-base-solid-button-labels));
font-size: 1.2em;
letter-spacing: 0.1em;
}
details.accordion-button[open] summary {
border-radius: var(--buttons-radius) var(--buttons-radius) 0 0;
background: rgb(var(--color-base-text));
border: none;
letter-spacing: 0.1em;
color: rgb(var(--color-base-solid-button-labels));
box-shadow: none;
}
.accordion-button summary::-webkit-details-marker,
.accordion-button summary::marker {
display: revert;
}
details.accordion-button::-webkit-details-marker:hover,
details summary[open].accordion-button::marker:hover {
color: rgb(var(--color-base-solid-button-labels));
}
/* variables */
:root {
--buttons-radius: 8px;
--buttons-border-width: 2px;
--buttons-border-opacity: 1;
--buttons-shadow-horizontal-offset: 0px;
--buttons-shadow-vertical-offset: 0px;
--buttons-shadow-blur-radius: 0px;
--color-base-text: 68, 34, 115;
--color-base-outline-button-labels: 68, 34, 155;
--color-base-solid-button-labels: 255, 255, 255;
}
/*-------- v2 oddities */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/*-------- v3 oddities */
summary {
cursor: pointer;
list-style: none;
position: relative;
}
summary .icon-caret {
position: absolute;
height: 0.6rem;
right: 1.5rem;
top: calc(50% - 0.2rem);
}
summary::-webkit-details-marker {
display: none;
}
body,
h1,
h2,
h3,
h4,
h5 {
font-family: sans-serif;
color: #442273;
}
.accordion-button p {
padding: 0 5rem;
}
section{
padding: 1rem;
}
<section>
<h3>Section_Header</h3>
<details class="accordion-button">
<summary class="accordion-button">
<h4>Question_1</h4>
</summary>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum
morbi blandit cursus risus. Malesuada fames ac turpis egestas integer
eget. Curabitur gravida arcu ac tortor dignissim convallis aenean et
tortor. Varius vel pharetra vel turpis nunc eget. Velit scelerisque in
dictum non consectetur a erat. Eget duis at tellus at urna. Porttitor
eget dolor morbi non arcu risus quis. Gravida arcu ac tortor dignissim
convallis. Mauris cursus mattis molestie a iaculis. Laoreet non
curabitur gravida arcu. Nunc non blandit massa enim nec dui nunc
mattis enim. Egestas quis ipsum suspendisse ultrices gravida. Sit amet
purus gravida quis blandit turpis. Mauris vitae ultricies leo integer
malesuada nunc vel risus. Risus viverra adipiscing at in. Dictumst
quisque sagittis purus sit amet volutpat consequat mauris nunc. Non
quam lacus suspendisse faucibus interdum. Sed sed risus pretium quam
vulputate dignissim suspendisse in. Sit amet consectetur adipiscing
elit pellentesque habitant.
</p>
<p>
Malesuada fames ac turpis egestas sed. Auctor augue mauris augue neque
gravida in fermentum et. Risus sed vulputate odio ut enim blandit
volutpat maecenas. Interdum consectetur libero id faucibus. Orci ac
auctor augue mauris augue neque gravida in. Sagittis vitae et leo duis
ut diam quam nulla. Odio pellentesque diam volutpat commodo sed. In
fermentum et sollicitudin ac orci. Sed vulputate odio ut enim blandit
volutpat maecenas volutpat blandit. Mi quis hendrerit dolor magna eget
est lorem ipsum. Volutpat commodo sed egestas egestas fringilla
phasellus faucibus scelerisque. Tellus in hac habitasse platea.
Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Aliquam
eleifend mi in nulla posuere. Diam sollicitudin tempor id eu nisl
nunc. Velit laoreet id donec ultrices tincidunt arcu non sodales
neque. Aliquet eget sit amet tellus cras adipiscing enim eu turpis.
Hac habitasse platea dictumst vestibulum rhoncus. Eu sem integer vitae
justo eget magna fermentum iaculis eu.
</p>
</details>
</section>
I was wondering if its possible to create this shape using css. (or svg?)
The feed is dynamicly created so the news feeds need to scroll inside this contianer.
I got stuck after create a container with scrolling:
.container {
width: 300px;
height: 500px;
background-color: blue;
border-radius: 15px;
overflow-x: scroll;
}
.container a {
display: inline-block;
width: 100%;
height: 60px;
border-bottom: 5px solid rgba(255, 255, 255, 0.5);
}
.container .icon {
display: inline-block;
width: 50px;
height: 100%;
text-indent: 25px;
color: white;
font-weight: bold;
line-height: 50px;
}
<div class="container">
<a><div class="icon">F</div>Text goes in here</a>
<a><div class="icon">F</div>Text goes in here</a>
<a><div class="icon">F</div>Text goes in here</a>
<a><div class="icon">F</div>Text goes in here</a>
<a><div class="icon">F</div>Text goes in here</a>
<a><div class="icon">F</div>Text goes in here</a>
<a><div class="icon">F</div>Text goes in here</a>
<a><div class="icon">F</div>Text goes in here</a>
<a><div class="icon">F</div>Text goes in here</a>
<a><div class="icon">F</div>Text goes in here</a>
</div>
There are many approaches to creating the shape and design you are looking for. Whilst SVG may be a great option here, a pure CSS solution may be possible through the use of the CSS border hack. A very rough demo of this would be something like:
.area {
height: 300px;
width: 200px;
background: lightgray;
position: relative;
margin: 50px;
}
.area:before {
content: "";
top: -20px;
left: -20px;
position: absolute;
height: 0;
width: 100%;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid lightgray;
}
.area:after {
content: "";
position: absolute;
height: 20%;
width: 0;
left: -20px;
top: -20px;
left: -20px;
border-right: 20px solid lightgray;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.areainner {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.areainner:before {
content: "";
position: absolute;
bottom: -20px;
left: -20px;
height: 50%;
width: 0;
border-right: 20px solid lightgray;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.areainner:after {
content: "";
position: absolute;
bottom: -20px;
left: -20px;
height: 0;
width: 60%;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-top: 20px solid lightgray;
}
.last {
position: absolute;
top: -20px;
left: 100%;
width: 0;
height: calc(100% - 20px);
border-left: 20px solid lightgray;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.YOURTEXT {
position: absolute;
height: 100%;
width: calc(100% -10px);
top: 0;
left: 0;
overflow-y: auto;
padding-left:10px;
}
<div class="area">
<div class="areainner">
<span class="last"></span>
<div class="YOURTEXT">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae diam mauris. Phasellus egestas mauris dui, eget tempor tortor commodo vel. Aenean aliquam nunc at sem sodales, vitae condimentum orci malesuada. Aenean eu tortor ornare, dignissim turpis
vel, hendrerit ante. Cras lobortis vehicula nisl eu lacinia. Integer eu faucibus sapien. In hendrerit odio ac blandit placerat. Morbi suscipit faucibus magna, nec semper sapien efficitur in. Duis metus neque, consequat at sem eu, tempor lobortis
mauris. Nulla consectetur pretium ex, at luctus neque. Duis rutrum gravida dolor, sit amet ornare velit condimentum vel. Nunc a pulvinar elit. Donec id nisi id massa pulvinar porta. Quisque hendrerit quam nec nunc interdum, a bibendum quam pellentesque.
Sed nisl quam, egestas ut volutpat non, lacinia at neque. Vestibulum sagittis tellus a odio finibus ultrices. Maecenas porttitor sit amet mi non congue. Ut feugiat, purus tempus elementum vestibulum, diam dui euismod odio, at venenatis augue lorem
in arcu. Vivamus sed dolor vel ipsum lacinia rhoncus. Integer et odio porttitor, vulputate turpis sed, cursus nibh. Suspendisse ac mi fermentum, fringilla lorem ac, imperdiet neque. Aliquam erat volutpat. Sed ac urna urna. Fusce felis massa, interdum
vel orci at, iaculis fermentum nulla. Etiam auctor lobortis vulputate. Ut quis quam est. Sed venenatis metus id nisi elementum, et tincidunt est mattis. Aenean elementum odio et odio sollicitudin, nec pretium libero malesuada. Phasellus velit tortor,
elementum et imperdiet non, dapibus vel nisi. Maecenas at consequat justo. Pellentesque sodales velit eget augue interdum, vitae commodo erat commodo. Pellentesque in quam aliquam, elementum urna vehicula, egestas ipsum. Cras tempus leo viverra
felis laoreet convallis. Nullam urna metus, volutpat sed eros nec, faucibus lobortis magna. Curabitur bibendum volutpat pellentesque. Curabitur mi libero, rhoncus ut lorem eget, viverra tristique dui. Proin congue dapibus orci, sit amet cursus mi
molestie at. Nam a aliquet velit. Sed mattis nibh eget facilisis imperdiet. Cras porttitor urna consequat, laoreet mauris nec, rhoncus est. Suspendisse id nisl dolor. Nullam accumsan justo metus, vitae ullamcorper magna mattis non. Suspendisse ac
arcu nibh. Pellentesque id faucibus purus. Nullam sit amet tortor non nibh dignissim fringilla. Donec varius, leo id bibendum fringilla, arcu nunc cursus ipsum, gravida laoreet arcu eros non erat. Donec viverra accumsan turpis, et convallis libero
congue maximus. Fusce nec placerat ipsum
</div>
</div>
</div>
When I resize my window to 1280 x 720 or below I just realized I'm getting some behavior I do not want. The right column (.right class) is getting "bumped down" below when I resize my window
What is it in my CSS code (or not in the code) that's causing this? I have a feeling that I'm missing a very important concept here. :)
Here is what happens to the right column on smaller screens: http://s11.postimg.org/vp9c7o3dv/css.png
And here is the faulty code:
http://codepen.io/cosmonaut/pen/yyvZjZ?editors=110
html {
background: url(http://s16.postimg.org/k5re12691/bg_radium.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
width: 95%;
font-family: courier;
font-size: 15px;
color: #E7DFC2;
margin-left: 30px;
}
.container {
width: 90%;
margin: 10px auto;
background-color: #273E23;
opacity: 0.97;
margin-top: 25px;
}
.header {
text-align:center;
font-size: 40px;
padding: 1em;
border-bottom: 1px solid gray; /* Temporary. */
background-color: #273E23;
}
.header p {
font-size: 25px;
padding: 0px;
margin: 0px;
background-color: #273E23;
}
.header img {
padding: 0px;
margin: 0px;
width: 200px;
height: 200px;
}
.menu {
text-align: center;
}
.menu ul {
}
.menu ul li {
margin: 0 20px;
padding: 0;
list-style-type: none;
display: inline-block;
}
.menu ul li a {
text-decoration: none;
background-color: #273E23;
color: #D3B474;
}
.left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
.right {
padding: 1em;
float: right;
width: 860px;
background-color: #273E23;;
}
.right p {
background-color: #273E23;
}
.footer {
clear: both;
margin: 0px;
padding: .5em;
text-align: center;
background-color: #273E23;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet_v2.css"/>
<title>Radium Recordings</title>
</head>
<body>
<div class="container">
<div class="header">
<img src="http://s11.postimg.org/z08mz7o9f/radium4.png">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Releases</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="left"><p>Hi, I'm the left side. Not sure if I'm even going to keep this column. Lorem Ipsum added:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
<p>Aliquam convallis nulla commodo convallis scelerisque. Curabitur elementum porttitor purus, posuere tincidunt turpis sagittis et. Proin non nulla vitae velit rutrum egestas id vitae dolor. Mauris placerat nec metus vel ultrices. Integer molestie lobortis eros a dapibus. Pellentesque commodo iaculis magna fringilla rhoncus. Nullam luctus dui elit, nec ornare erat volutpat vitae. Vestibulum nulla velit, porttitor in hendrerit vel, varius sit amet elit. Aliquam erat volutpat.
</p>
</div>
<div class="footer">
<p>P.O. Box 321, Anywhere, USA 31721 | Tel: (888) 888-8888</p>
</div>
</div>
</body>
</html>
Change your column widths to percentages. One example is this Codepen.
I used:
.left {
float: left;
width: 20%;
margin: 0;
padding: 1em;
}
.right {
padding: 1em;
float: right;
width: 67%;
background-color: #273E23;;
}
but you can use any percentages that look right to you.
You have two column in your site. One have class name "left" another have class named "right". Now each of those class have fixed width. So when the screen size goes less than the declared width the 2nd column get down to get it desire size.
If we see the explanation:
.right {
padding: 1em;
float: right;
width: 860px;
background-color: #273E23;
}
.left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
Here we can see right class have width of 860px and the left class have width of 160px. Also the right class have a padding of 1em which is 15 in pixel. So if you want to show both of the element in single line then the minimum screen size should be 1050px (860 + 30 + 160). Here 30 is summation of both side padding 15 px.
If you want to do the code in such way that you what ever the screen size is both column should maintain size ratio then instead of using fixed width you should use %. For batter understanding you can check example of #bobdye
On small screen you have not enough space in .container for two columns.
You should set .container width in px, or declare min-width for it, or declare width of left and right columns in %.
Please review this Sample Fiddle.
You'll notice I have two colums, side by side, and content under the headers. I'm trying to align the Lorem Ipsum with the vertical center of the paragraph to the right.
I thought a vertical align set to the column 1 would would, but it's not.
.col1-row1 {
margin-top: 2%;
display: inline-block;
background: transparent;
padding: 5px;
width:45%;
margin-left: 4%;
color: #f8981d;
font-weight: bold;
font-size: 20px;
line-height: 20px;
text-align: center;
}
Ideas?
Set "col1-row1" and "col2-row1" to display: table-cell instead of inline-block, and then include vertical-align: middle.
just replace this css for col1-row1 and col2-row1 classes in your stylesheet,this works fine in your fiddle.
.col1-row1 {
margin-top: 2%;
display: inline-block;
background: transparent;
padding: 5px;
width:45%;
color: #f8981d;
font-weight: bold;
font-size: 20px;
line-height: 20px;
vertical-align:middle;
text-align: center;
}
.col2-row1 {
margin-top: 2%;
display: inline-block;
background: transparent;
padding: 5px;
width: 45%;
color: #f8981d;
font-weight: bold;
font-size: 20px;
line-height: 20px;
vertical-align:middle;
text-align: center;
}
If you can pre-determine the height of the right-hand block of text, you can do something like the following (I set it at 206px):
<style>
#container {
width:940px;
margin:0 auto;
}
div.left {
width:460px;
margin-right:20px;
float:left;
display:inline;
}
div.right {
width:460px;
float:left;
display:inline;
}
div.clear {
clear: both;
}
div.left p {
height:206px;
line-height: 206px;
}
div.right p {
height:206px;
}
</style>
<div id="container">
<div class="left">
<h1>Exemption Reason</h1>
<p>Lorem ipsum</p>
</div>
<div class="right">
<h1>Documentation Required</h1>
<p>sit amet, consectetur adipiscing elit. Proin at nunc convallis, venenatis lectus auctor, porta nisi. Donec sit amet mauris non justo ultrices dignissim sed at ipsum. Aliquam accumsan faucibus nunc, id pulvinar massa consequat at. Pellentesque sed mauris leo. Nullam pulvinar sit amet tortor a suscipit. Ut varius et eros a aliquam. Donec tortor nisi, tristique at feugiat at, malesuada eu tortor. Pellentesque quis sapien mauris. Mauris pulvinar posuere auctor. Praesent nec felis at mi ultricies elementum. Nulla vitae pharetra mi, et semper ipsum. Etiam eget tristique mi. Vivamus rutrum ipsum dapibus enim malesuada sodales. Nullam rhoncus elit ut condimentum tincidunt. Quisque dapibus lorem eget euismod mattis. Praesent id consectetur urna.</p>
</div>
<div class="clear"></div>
</div>
If the height of the paragraph in the right hand column is dynamic and can not be determined beforehand, you can use JavaScript (here I'm using jQuery):
<style>
#container {
width:940px;
margin:0 auto;
}
div.left {
width:460px;
margin-right:20px;
float:left;
display:inline;
}
div.right {
width:460px;
float:left;
display:inline;
}
div.clear {
clear: both;
}
</style>
<div id="container">
<div class="left">
<h1>Exemption Reason</h1>
<p>Lorem ipsum</p>
</div>
<div class="right">
<h1>Documentation Required</h1>
<p>sit amet, consectetur adipiscing elit. Proin at nunc convallis, venenatis lectus auctor, porta nisi. Donec sit amet mauris non justo ultrices dignissim sed at ipsum. Aliquam accumsan faucibus nunc, id pulvinar massa consequat at. Pellentesque sed mauris leo. Nullam pulvinar sit amet tortor a suscipit. Ut varius et eros a aliquam. Donec tortor nisi, tristique at feugiat at, malesuada eu tortor. Pellentesque quis sapien mauris. Mauris pulvinar posuere auctor. Praesent nec felis at mi ultricies elementum. Nulla vitae pharetra mi, et semper ipsum. Etiam eget tristique mi. Vivamus rutrum ipsum dapibus enim malesuada sodales. Nullam rhoncus elit ut condimentum tincidunt. Quisque dapibus lorem eget euismod mattis. Praesent id consectetur urna.</p>
</div>
<div class="clear"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var target_height = $('div.right p').height()+'px';
$('div.left p').css({
'height': target_height,
'lineHeight': target_height
});
});
</script>
I can't add top margin to footer that uses clear:both.
Using padding seem to solve the problem. But it ruins the top solid border of the footer.
index.php:
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Study at Best</title>
<link rel="stylesheet" rev="stylesheet" href="styles/layout.css" />
<link rel="stylesheet" rev="stylesheet" href="styles/ddm.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body>
<div id="container">
<div id="logo">
<img class="imageCenter" src="images/logo.png" alt="Best School"/>
</div>
<div id="navigation">
<?php include("navigation.html"); ?>
</div>
<div id="header">
</div>
<div id="left-column">
<h2>left-column</h2>
<p>
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
</p>
</div>
<div id="main-column">
<h2>main-column</h2>
<p>
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
</p>
</div>
<div id="right-column">
<h2>right-column</h2>
<p>
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
</p>
</div>
<?php include("footer.html"); ?>
</div>
</body>
</html>
footer.html:
<div id="footer">
Home |
About Us |
Contact Us |
Menu Item 4 |
Menu Item 5 |
</div>
style.css:
/*Default*/
* { margin: 0px; padding: 0px; }
body { font-size: 75%; font-family: Arial, Helvetica, sans-serif; }
ul { list-style: none }
a { outline: none; }
a img { border: none; }
h1 { font-size: 3.0em; }
h2 {
font-style: normal;
font-size: 1.0em;
padding: 5px 10px;
margin-bottom: 10px;
color: #FFF;
background-color: #A53030;
}
/*Tools*/
.textCenter { text-align: center; }
.imageCenter { margin-left: auto; margin-right: auto; display: block; }
.floatLeft: { float: left; }
.floatRight: { float: right; }
.clear { clear: both; }
/*Page*/
#container {
width: 800px;
margin: 0px auto;
}
#logo {
width: 170px;
height: 60px;
margin: 5px;
}
#header {
width: 800px;
height: 200px;
background-image: url('../images/best.jpg');
}
#navigation {
color: white;
width: 800px;
background-color: #000;
}
#left-column {
width: 150px;
padding: 10px;
float: left;
color: #FFF;
background-color: #A53030;
}
#main-column {
width:360px;
padding: 10px;
float: left;
}
#right-column {
width: 200px;
padding: 10px;
float: right;
}
#footer {
margin-top: 50px;
width: 800px;
border-color: #262626;
border-top-style: solid;
border-width: medium;
clear: both;
}
#footer ul li {
list-style: none;
float: left;
}
#footer ul li a {
display: block;
padding: 5px;
width: auto;
color: #000;
font-weight: bold;
text-align: center;
text-decoration: none
}
#footer ul li a:hover {
color: #49A3FF;
}
Try using padding instead. The margin is being "swallowed" under the floating elements.
You need to clear the float on left-column and right-column.
Add overflow:hidden; to #container
Emily's answer works perfectly well! I was faced with the same problem a couple of days ago, and I found 3 different ways to achieve this (one with HTML, two via CSS).
Adding a structural element: This basically entails adding an empty div after your floating elements so as to clear the floats. Old-fashioned, and unpopular because we're using HTML to fix a problem relating to appearance. Add a div with the attribute style="clear:both" right after your floating elements.
Adding content via CSS: You can use the container:after selector in CSS to achieve the same thing. Best explained here: http://www.positioniseverything.net/easyclearing.html.
Using overflow: As explained by Emily, or here: http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html.
Margin does not work with inline elements, just add "display: inline-block" to footer css, margin-top should be working.