I'm working on this webpage for a static site and my goal is to be able have multiple modals open at once. So far, I've gotten it where I want it, but I ran into some hiccups.
My main challenges are:
Each button opens up both dialogs simultaneously and closing one closes the other.
When I click on the dialog to drag, it jumps several pixels from where I clicked.
I have some other goals like animating and having the active dialog sit above others like an active window, but that's kinda beyond the scope of my main problem here for the moment.
For the first problem, I'm pretty sure I have to change my scripting a lot, but I have no idea where to start.
For the second problem, I'm pretty sure it's a problem with my html or css overall, but after testing each and every line, I still can't seem to find the problem. I am definitely missing something. Maybe it's too much to ask for someone to comb through my code, but I've included all of it in this post to give y'all the most accurate example.
Just FYI, I'm using jquery-ui v1.12.1 with no theme. Here's the JSFiddle: https://jsfiddle.net/puncushion/9tke3grp/
And here's the code below.
html:
<!DOCTYPE html>
<html>
<head>
<title>Test Project</title>
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/jqueryui/jquery-ui.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="title">
TEST
PROJECT
</div>
<div class="menu">
ABOUT
2019
2020
2021
</div>
<div class="content">
<button class="click">Content 1</button>
<div class="modal" id="modal-1">
<div class="modal-header">
<div class="modal-title">Content 1</div>
<button class="close-button">×</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper, nisi ac dignissim venenatis, felis nibh luctus neque, a dictum sem risus sed mi. Mauris eu justo est. Donec sagittis, dui at efficitur aliquam, risus neque rutrum arcu, id varius ligula odio non enim. Maecenas ut odio vel dui dapibus venenatis. Etiam justo massa, consectetur ut nunc et, cursus condimentum metus. Suspendisse condimentum, ante molestie convallis semper, nunc felis dapibus ante, eget facilisis magna ex sit amet lacus. In auctor sit amet velit id ultrices. Suspendisse potenti. Sed dapibus, massa eget egestas luctus, massa neque luctus mi, dictum dignissim urna neque eu urna. Proin efficitur, ligula sit amet fringilla malesuada, tortor eros ullamcorper ligula, at vestibulum lacus erat et turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse luctus bibendum ligula, eget vehicula risus finibus eu. Morbi in feugiat orci. Curabitur pharetra lacinia erat non dignissim. Donec vitae ipsum at augue venenatis tempus in at purus. Aenean varius eros dui, sit amet porttitor tellus condimentum quis.
</div>
</div>
<button class="click">Content 2</button>
<div class="modal" id="modal-2">
<div class="modal-header">
<div class="modal-title">Content 2</div>
<button class="close-button">×</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper, nisi ac dignissim venenatis, felis nibh luctus neque, a dictum sem risus sed mi. Mauris eu justo est. Donec sagittis, dui at efficitur aliquam, risus neque rutrum arcu, id varius ligula odio non enim. Maecenas ut odio vel dui dapibus venenatis. Etiam justo massa, consectetur ut nunc et, cursus condimentum metus. Suspendisse condimentum, ante molestie convallis semper, nunc felis dapibus ante, eget facilisis magna ex sit amet lacus. In auctor sit amet velit id ultrices. Suspendisse potenti. Sed dapibus, massa eget egestas luctus, massa neque luctus mi, dictum dignissim urna neque eu urna. Proin efficitur, ligula sit amet fringilla malesuada, tortor eros ullamcorper ligula, at vestibulum lacus erat et turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse luctus bibendum ligula, eget vehicula risus finibus eu. Morbi in feugiat orci. Curabitur pharetra lacinia erat non dignissim. Donec vitae ipsum at augue venenatis tempus in at purus. Aenean varius eros dui, sit amet porttitor tellus condimentum quis.
</div>
</div>
</div>
</div>
</body>
</html>
css:
html, body {
height: 100%;
margin: 0px;
background: #ecc;
font-family: sans-serif;
}
.container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"title title title title subtitle menu"
". content content content . menu";
}
.title {
grid-area: title;
font-size: 2em;
font-weight: bold;
letter-spacing: 15px;
position: fixed;
}
#title-fn {
color: black;
text-decoration: none;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
#title-ln {
color: black;
text-decoration: none;
position: fixed;
}
.menu {
grid-area: menu;
writing-mode: vertical-rl;
word-spacing: 50px;
position: fixed;
top: 50%;
left: 50%;
right: 2px;
transform: rotate(180deg);
transform: translate(0, -50%);
}
.content {
grid-area: content;
}
.click {
background-color: #ecc;
color: black;
cursor: pointer;
width: 100%;
border: none;
border-bottom: solid;
border-width: thin;
padding-top: .5rem;
padding-bottom: .5rem;
padding-left: 0rem;
text-align: left;
outline: none;
font-size: 1em;
}
.modal{
border:solid;
border-width: thin;
background-color: #ecc;
width: 300px;
max-height: 80%;
display:none;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.modal-header {
cursor: move;
padding: .5rem .5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: solid;
border-width: thin;
}
.modal-header .close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.5rem;
}
.modal-body {
padding: .5rem .5rem;
max-height: calc(100vh - 210px);
overflow-y: auto;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #ecc;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
js:
$(document).ready(function(){
//draggable
$('.click').click(function(){
$('.modal').show();
$('.modal').draggable({handle:'.modal-header'});
});
$(".close-button").click(function(){
$(".modal").hide();
});
});
If I've understood well, what you want is each modal to be opened and closed separately, but being able to have both open at the same time.
Then you'll have to call the specific modal for each button clicked. Do so by calling the ".next" modal for opening (as they are immediate siblings), and ".closest" to `find the correct modal on close button click.
$(document).ready(function() {
$('.click').click(function() {
$(this).next('.modal').show();
$(this).next('.modal').draggable({
handle: '.modal-header'
});
});
$(".close-button").click(function() {
$(this).closest(".modal").hide();
});
});
Here you have the working JSFiddle: https://jsfiddle.net/Bettylex/4xcq0f2a/3/
Related
I am trying to make cards highlighting projects for a test portfolio. When I work on it in Codepen on my desktop it looks fine, but when I look on mobile the project images are poking through the bottom. Setting a bottom left and right margin to match the bottom of the card works on mobile but then it is formatted wrong on desktop.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #143861;
}
.section-header {
color: white;
font-size: 20px;
text-align: center;
backgroun-color: ;
}
.grid-wrapper {
display: grid;
height: 100vh;
width: 100vw;
grid-template-rows: .5fr 1fr 4fr 1fr;
grid-template-columns: minmax(0, 1fr);
overflow: auto;
text-align: center;
}
.header {
display: flex;
align-items: center;
}
.profile-image {
left: 0;
}
.about {
margin-top: 20rem;
margin-bottom: 20rem;
margin-left: 40px;
margin-right: 40px;
text-align: left;
color: white;
font-size: 20px;
}
.nav {
display: flex;
text-align: center;
gap: 2rem;
padding: 1rem;
position: fixed;
}
<DOCTYPE! html>
<html>
<body>
<div class="grid-wrapper">
<div class="header">
<img id="profile-image" src="https://via.placeholder.com/140x100"></img>
<div class="nav">
<div class="nav-links">About</div>
<div class="nav-links">Projects</div>
<div class="nav-links">Contact</div>
</div>
</div>
<section id="about">
<div class="about">
<h1 class="section-header">About</h1><br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed felis quam, cursus vel scelerisque eu, sollicitudin ac neque. Mauris in dui a lacus rutrum bibendum et at turpis. Curabitur velit felis, consequat vel leo in, molestie egestas arcu. Aenean condimentum,
est nec viverra suscipit, nibh dui fermentum justo, eget eleifend turpis felis interdum nulla. Etiam eros turpis, faucibus ac fermentum a, sodales a lacus. Praesent vulputate, justo tristique mattis feugiat, ipsum nunc commodo turpis, in euismod
sem quam sit amet augue. Donec iaculis malesuada hendrerit. Proin venenatis, nibh in pulvinar sollicitudin, dui dui placerat metus, eu sodales tellus sapien ut urna. Phasellus et ipsum accumsan, pulvinar felis vitae, maximus metus. Vestibulum
sodales rhoncus enim, ut convallis massa scelerisque id. Nunc venenatis lacus eu finibus vulputate. Proin tincidunt turpis at ipsum porttitor varius. Sed accumsan arcu in odio dapibus, nec elementum dolor feugiat.
</p>
</div>
<section id="projects">
<h1 class="section-header">Projects</h1>
<div class="content">
<div class="project">
<img src="https://content.syndigo.com/asset/56a5cb78-9825-423a-a9df-fa0f5f2438f7/480.jpeg" alt="project image" class="project-image"></img>
<a class="project-link" href="https://codepen.io/nanglewi/full/qBVENGg" target="_blank">Cherry MX Product Landing Page</a>
</div>
I'm trying to learn CSS and web design and I am stuck on how to make this work. I have a page that calls up a pop-up information window. However, there is a lot of text and it ends up pushing the window out of frame and therefore a user can't access the 'X' to close the window. I'd like to make it so the window doesn't expand, but the text portion can be vertically scrolled through. I've tried many various things dealing with overflow and overflow-y, but nothing seems to work.
The HTML part of the code is:
<div class="popup" id="popup-experience">
<div class="popup__content">
<div class="popup__left">
<img src="img/some.jpg" alt="some photo" class="popup__img">
<!-- <img src="img/some-other.jpg" alt="some other photo" class="popup__img"> -->
</div>
<div class="popup__right">
×
<h2 class="heading-secondary u-margin-bottom-small">Work Experience</h2>
<h3 class="heading-tertiary u-margin-bottom-small">Below is a list of my experience</h3>
<p class="popup__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed blandit libero volutpat sed cras ornare arcu dui. Ultrices sagittis orci a scelerisque purus semper eget duis. Et netus et malesuada fames ac turpis egestas sed tempus. Mauris a diam maecenas sed. Eget dolor morbi non arcu risus. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Venenatis tellus in metus vulputate eu scelerisque. Orci nulla pellentesque dignissim enim sit. Vestibulum sed arcu non odio euismod. Dolor morbi non arcu risus. Rhoncus est pellentesque elit ullamcorper dignissim cras. Cursus mattis molestie a iaculis. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Felis imperdiet proin fermentum leo vel.
Auctor elit sed vulputate mi sit amet mauris commodo quis. Diam volutpat commodo sed egestas. Libero id faucibus nisl tincidunt eget nullam. Sed arcu non odio euismod lacinia at quis risus. Suscipit tellus mauris a diam maecenas sed enim ut. Molestie a iaculis at erat pellentesque adipiscing commodo elit. Nulla malesuada pellentesque elit eget gravida cum. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius. Sagittis vitae et leo duis ut diam quam nulla porttitor. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Est placerat in egestas erat imperdiet sed. A diam maecenas sed enim ut sem viverra aliquet. Enim eu turpis egestas pretium.
Adipiscing commodo elit at imperdiet dui accumsan sit amet. Turpis massa tincidunt dui ut ornare lectus sit. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Non pulvinar neque laoreet suspendisse interdum. Nullam eget felis eget nunc lobortis mattis. Dictum fusce ut placerat orci nulla pellentesque. Id leo in vitae turpis massa sed elementum tempus egestas. Ultrices tincidunt arcu non sodales neque. Aliquet lectus proin nibh nisl. Morbi tincidunt ornare massa eget egestas purus viverra accumsan. Hac habitasse platea dictumst quisque sagittis purus sit. Nibh cras pulvinar mattis nunc sed blandit libero. Quis viverra nibh cras pulvinar. Sapien faucibus et molestie ac. Sit amet justo donec enim diam vulputate ut. Commodo sed egestas egestas fringilla phasellus faucibus. Enim nunc faucibus a pellentesque sit. Aenean pharetra magna ac placerat.
</p>
Go to next area →
</div>
</div>
</div>
The CSS is:
.popup {
height: 100vh;
width: 100%;
overflow:auto;
position: fixed;
top: 0;
left: 0;
background-color: rgba($color-black, .8);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all .3s;
#supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba($color-black, .3);
}
&__content {
#include absCenter;
width: 75%;
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, .2);
border-radius: 3px;
display: table;
overflow: hidden;
opacity: 0;
transform: translate(-50%, -50%) scale(.25);
transition: all .5s .2s;
}
&__left {
width: 33.333333%;
display: table-cell;
}
&__right {
width: 66.6666667%;
display: table-cell;
vertical-align: middle;
padding: 3rem 5rem;
}
&__img {
display: block;
width: 100%;
}
&__text {
font-size: 1.4rem;
margin-bottom: 4rem;
-moz-column-count: 2;
-moz-column-gap: 4rem; //1em = 14px;
-moz-column-rule: 1px solid $color-grey-light-2;
column-count: 2;
column-gap: 4rem; //1em = 14px;
column-rule: 1px solid $color-grey-light-2;
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
&__text-small{
// font-size: 1.09rem;
font-size: 1.2rem;
margin-bottom: 4rem;
-moz-column-count: 2;
-moz-column-gap: 4rem; //1em = 14px;
-moz-column-rule: 1px solid $color-grey-light-2;
column-count: 2;
column-gap: 4rem; //1em = 14px;
column-rule: 1px solid $color-grey-light-2;
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
//Open states
&:target {
opacity: 1;
visibility: visible;
}
&:target &__content {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
&__close {
&:link,
&:visited {
color: $color-grey-dark;
position: absolute;
top: 2.5rem;
right: 2.5rem;
font-size: 3rem;
text-decoration: none;
display: inline-block;
transition: all .2s;
line-height: 1;
}
&:hover {
color: $color-primary;
}
}
}
So I want just the Lorem ipsum part to be vertically scrollable. Any thoughts/help would be appreciated!
You can set an overflow: scroll value.
Another solution would be to make sure your popup has no fixed heigth, that way the content just follows the flow of the webpage. I haven't tested your code to see how big the popup is, but I'm assuming the popup exceeds the screen heigth (while you have set the popup to be 100vh with an overflow: hidden value that'll cut off anything larger than that.)
Maybe you can try to play around with the heigth, set it to auto or 100%.
I think I figured it out. I had to remove the columns in the popup_text part of the CSS and set overflow:scroll, but for some reason it doesn't scroll vertically and instead does so horizontally. To improve the look I changed overflow-x:hidden. Lastly, I had to add a height: 25rem.
It's not perfect and less than what I had hoped for, but it's not horrible looking and works. It would have been nice to have 2 columns or even without columns and having it vertically scroll in the window.
I am trying to implement the following:
You will see there is text and then a line to its side. I am trying to make the line remain the same distance from the text as the screen decreases in size. This works OK, but when the screen gets smaller the line goes into the 'Test Border' part.
See code below as to how I have implemented this. Perhaps I should be taking a different approach.
Also, a jsfiddle here for your convenience.
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: inline-block;
padding-bottom: 15px;
width: 8%;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: 90%;
}
<h3>Test Border</h3>
<div class="underline"></div>
You can display both blocks as table and specify first block fixed width (as it's only text that does not change).
.wrapper {
display: table;
width: 100%;
vertical-align: bottom;
padding-bottom: 15px;
table-layout: fixed;
}
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: table-cell;
width: 85px;
}
.underline {
display: table-cell;
border-bottom: 1px solid #c6bcb6;
width: 100%;
position: relative;
top: -12px;
}
<div class="wrapper">
<h3>Test Border</h3>
<div class="underline"></div>
</div>
I'd probably use flex box like this.
.border {
display: flex;
}
.border .string {
font-weight: bold;
font-size: 26px;
flex: 0 1;
}
.border .line {
border-bottom: 1px solid #c6bcb6;
flex: 1;
margin: 0 5px 0 10px;
transform: translate(0, -6px);
}
<div class="border">
<span class="string">Test String</span>
<div class="line"></div>
</div>
This will make the title as wide as the longest unbroken work, and the border will fill up the rest of the space.
Here's what it looks like with paragraphs between each header (an almost real world example)
.border {
display: flex;
}
.border .string {
font-weight: bold;
font-size: 26px;
flex: 0 1;
}
.border .line {
border-bottom: 1px solid #c6bcb6;
flex: 1;
margin: 0 5px 0 5px;
transform: translate(0, -6px);
}
<div class="border">
<span class="string">Lorem ipsum dolor</span>
<div class="line"></div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis metus at semper laoreet. Vestibulum vitae lectus ut justo consequat dignissim et in eros. Duis aliquam, ipsum et imperdiet venenatis, ipsum augue scelerisque ante, eu lacinia dui metus
sed lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eu risus a nibh vulputate consectetur. Phasellus id lectus tempor, cursus arcu ut, suscipit augue. Etiam aliquam lobortis semper. Vestibulum dui arcu, faucibus vel suscipit
sed, fermentum sed purus. Vivamus pharetra orci aliquam ligula imperdiet elementum a non tortor. Donec nisl enim, condimentum id nulla quis, vulputate interdum felis. Pellentesque molestie congue urna, eget ultricies est aliquet in. Aenean convallis
magna dolor, vitae facilisis nibh euismod et.
</p>
<div class="border">
<span class="string">Etiam quis molestie</span>
<div class="line"></div>
</div>
<p>
Etiam quis molestie libero. In vitae massa cursus, commodo lectus vel, vehicula felis. Nam venenatis tortor et diam faucibus, vel ullamcorper orci placerat. Mauris at aliquet nunc, quis eleifend turpis. Mauris ultricies at mi ac bibendum. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Nulla metus enim, volutpat ut magna sed, dignissim tincidunt lorem. Nam nec tempor urna. Nam eget quam elit. Pellentesque condimentum turpis consequat turpis rhoncus vestibulum. Curabitur efficitur dapibus
tortor ac bibendum. Donec risus nibh, dignissim vel sapien vel, fermentum scelerisque velit. Ut posuere finibus erat, nec bibendum nunc faucibus at.
</p>
<div class="border">
<span class="string">Phasellus sed orci</span>
<div class="line"></div>
</div>
<p>
Phasellus sed orci eget urna commodo luctus a sed felis. Aliquam erat volutpat. Quisque sit amet volutpat magna. Etiam vestibulum, velit sit amet efficitur consectetur, tortor velit consectetur velit, et facilisis ex dolor sit amet quam. Fusce tristique
lorem eget dapibus malesuada. Suspendisse iaculis est nec urna sollicitudin, tincidunt vehicula justo pellentesque. Morbi nulla lorem, tempus a interdum vel, fringilla ut elit. Vestibulum sed neque sed lorem viverra luctus. Suspendisse sapien ipsum,
ultrices vitae posuere eget, tristique sit amet augue. Nam suscipit, dolor et lacinia vulputate, erat nunc lacinia nibh, vel posuere nisl nunc eget enim. Vestibulum suscipit lorem risus, id feugiat sem molestie ac. Integer consectetur nunc sed lacinia
commodo. Quisque cursus purus nec dui euismod, nec porttitor nibh fermentum. Nunc tellus mauris, accumsan vitae tincidunt sit amet, ultricies in elit. Donec elementum libero ipsum, sit amet aliquam tortor volutpat eget. Pellentesque pretium dictum ligula.
</p>
<div class="border">
<span class="string">Fusce ultricies ante</span>
<div class="line"></div>
</div>
<p>
Fusce ultricies ante ut orci laoreet, in luctus quam eleifend. Integer nisl purus, pharetra sit amet ligula id, porta porta risus. Etiam nec varius risus, eget euismod risus. Vivamus pharetra purus vitae turpis ultrices ullamcorper. Proin vestibulum,
tortor id blandit pharetra, sapien augue dictum elit, a efficitur urna magna at lorem. Donec sollicitudin, purus sed pharetra iaculis, dolor mauris pretium est, in vestibulum massa odio vitae sapien. Curabitur scelerisque felis dui, non molestie nisl
viverra in. Integer tempor nec risus quis vulputate. Nulla facilisi. Pellentesque ipsum elit, lacinia et consectetur id, gravida ut arcu. Maecenas vestibulum faucibus rutrum. Duis at egestas purus. Proin ac congue nisl, id placerat turpis. Aenean ac
nisl at odio efficitur convallis sit amet quis ipsum. Mauris scelerisque aliquet libero, nec dapibus lectus.
</p>
I think the best solution is change the markup, because with your code the text in h3 tag could be bigger than your max-width (in fact, it is). Something like this:
.textline {
display: table;
}
h3 {
font-size: 26px;
color: #000 !important;
display: table-cell;
width: 9%;
margin-right: 1%;
vertical-align: bottom;
}
.underline {
display: table-cell;
border-bottom: 1px solid #c6bcb6;
width: 90%;
position: relative;
top: -7px;
}
<div class="textline">
<h3>Test border</h3>
<div class="underline"></div>
</div>
When you use percentages you have to take into account the fixed measures of the other elements, width, margins, borders... Not the same 90% of a 1000px screen that one of 500px, the remaining space is less.
You can use calc to solve this issues:
h3 {
font-size: 26px;
color: #000 !important;
width: 95px;
display: inline-block;
padding-bottom: 15px;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: calc(100% - 100px);
}
<h3>Test Border</h3>
<div class="underline"></div>
You could try using a table display, with the text and line each having their own cell:
<div class="div-row">
<div class="div-cell"><h3>Test Border</h3></div>
<div class="div-cell underline"></div>
<div>
CSS:
.div-row {
display: table-row;
width: 100%;
}
.div-cell {
display: table-cell;
}
I haven't tested this, but the div containing the line should automatically shrink to the available width as your resize the browser window (or as you go from desktop to mobile).
If you want, you could also set a fixed width to the div containing the text.
You can try calc() property and it will work...
Check this fiddle here
What you have to do,
h3 {
font-size: 26px;
display: inline-block;
max-width:90px;
margin-right:10px;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: calc(100% - 104px);
}
Try the below CSS:
h3 {
font-size: 26px;
color: #000 !important;
display: inline-block;
padding-bottom: 15px;
}
.underline {
border-bottom: 1px solid #C6BCB6;
width: 90%;
}
I've tried to put a transitioning div next to a paragraph and for some reason it doesn't work?
I'm not that good with html so can someone help me out?
.left {
float: left;
clear: both;
width: 200px;
overflow: hidden;
margin-right: 0px;
padding-right: 0;
text-decoration: none;
display: table-column;
}
.right {
width: 50%;
float: right;
overflow: hidden;
text-align: right;
display: table-column;
}
.left, .right {
display: table-column;
}
</style>
</head>
<body>
<div id="conta">
<div class="left" id="top"><a href="new.png">home<a></div>
<div class="left"><a>about</a></div>
<div class="left"><a>projects</a></div>
<div class="left"><a>blog</a></div>
<div class="left"><a>contact</a></div>
<p class="right"><a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper interdum facilisis. Quisque imperdiet purus ac tellus ultrices ultricies. Sed massa arcu, sagittis quis tellus laoreet, dapibus dictum neque. Nam fermentum enim ligula, quis vulputate arcu molestie et. Sed libero turpis, ultricies id pulvinar non, suscipit ut turpis. Ut nec nisl a odio laoreet commodo ac vitae orci. In eget sem luctus, pellentesque tellus eu, cursus nisl. Duis fringilla tellus quam, sit amet mollis lacus volutpat vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ultrices nibh id lacus molestie porttitor. Proin quis euismod lectus. Vestibulum a elit mollis, maximus diam ac, consequat ante.</a></p>
</div>
<div class="clear"></div>
Full Code Here
I'm not exactly sure what you're asking to have fixed in the question, but I'm just going to assume you want that right <div> to be parallel with the top of the navigation.
Only thing I changed:
.right {
width: 50%;
float: right;
overflow: hidden;
text-align: right;
position: relative;
margin-top: -375px; // Added this
}
This won't look very good on mobile as the div's start to overlap so you'll need to do an #media css statement to update the code after a certain width:
#media all and (max-width: 700px) {
.right {
margin-top: 0px;
}
}
Here it is on jsFiddle: http://jsfiddle.net/wdrpkjap/5/
I'm making a website that is using ajax calls to load a content pane. Just mocking this up quick with some data, (on my website the ajax is working fine, so no need for that here) I cannot get the content pane to scroll when it overflows - the entire page scrolls instead.
There are a TON of questions similar to this but every one I've come across they have not used the overflow tag and it fixed their problem. I've tried that but had no success.
I'm not sure how to get the div to recognize that it is being overflowed. The only way so far that I've managed to get it to scroll, is fixing the height, however I feel like that's poor to do, because depending on the screen size I want it to scroll like one would expect.
Here's the html:
<body>
<div id="content-container">
<img src="http://i.imgur.com/69BtzId.png" alt="logo">
<div class="navbar">
<nav>
<ul>
<li class="homeLink"> HOME
</li>
<li id="activePortfolioLink"> PORTFOLIO
</li>
<li class="aboutLink"> ABOUT
</li>
</ul>
</nav>
</div>
<div id="portfolioUnderline"></div>
</div>
<div id="left">
<ul class="verticalNavBar">
<li id="webDesignLink"> <a>WEB DESIGN</a>
</li>
<li id="uiLink"> <a>USER INTERACTION DESIGN</a>
</li>
<li id="graphicDesignLink"> <a>GRAPHIC/ TYPOGRAPHY DESIGN</a>
</li>
</ul>
</div>
<div id="verticalLine"></div>
<div id="rightContent">
<div class="portfolioImages">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut massa in tortor ullamcorper iaculis. Ut placerat imperdiet metus sed pellentesque. Proin iaculis erat eget fringilla lobortis. Pellentesque sit amet urna condimentum, tristique erat et, egestas ante. Duis eu pulvinar leo, fringilla posuere ligula. Nunc commodo tellus at lorem interdum feugiat. Cras varius consequat diam vitae scelerisque. Mauris nec ligula in mi accumsan scelerisque sed vel augue. Aliquam elementum, dolor id ornare feugiat, ante justo sollicitudin erat, ut gravida velit nibh vel velit. Fusce ultrices consectetur eros, ac tincidunt libero auctor ut. Quisque dapibus congue arcu sed imperdiet. Pellentesque lorem nisi, dictum sit amet libero in, cursus eleifend ante. Nunc vel euismod erat. Duis massa tellus, tincidunt in fermentum ut, sagittis vulputate lectus. Nunc ut iaculis nibh. In congue laoreet arcu commodo imperdiet. Nullam rutrum augue nec mauris rhoncus facilisis. Donec bibendum luctus magna. Vivamus tempor egestas turpis. Curabitur non porta lorem, nec elementum ante. Cras faucibus consequat augue, laoreet pretium lorem tincidunt sed. Vestibulum magna dolor, pulvinar vitae facilisis eget, posuere sit amet est. Suspendisse vel elit a neque laoreet faucibus eget et quam. Integer feugiat, tellus sit amet tempus dignissim, neque justo congue enim, quis commodo neque neque quis orci. Suspendisse scelerisque erat lobortis felis fermentum, in molestie nulla pharetra. Suspendisse lacinia ac orci et tincidunt. Duis lobortis at leo a viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam libero turpis, consequat non convallis at, eleifend non dolor.</br>
</br>
</br>
</br>
</br>Maecenas tincidunt lorem vitae fringilla consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet magna tincidunt, pellentesque arcu posuere, euismod lectus. Sed nec pellentesque diam, id varius quam. Praesent mattis sapien odio, in mattis dui tempus sit amet. Morbi pulvinar odio nec augue tempus varius. Sed porttitor consequat magna, sit amet lobortis mauris congue eleifend. Donec pretium elit vitae egestas rutrum. Sed sapien libero, vulputate eu lacinia sit amet, aliquam et elit. Aenean nisi mi, vulputate id nulla ut, vestibulum porta enim. Nunc quis tellus eleifend, adipiscing lorem in, congue justo. Vivamus ornare risus quis faucibus pretium. Vestibulum eu velit placerat, lacinia justo rutrum, sagittis nisi. Donec quis tincidunt justo, eu posuere mauris. Morbi eleifend, dui eget aliquet adipiscing, tellus risus hendrerit dolor, non aliquet magna sapien malesuada ante. Fusce lobortis commodo sem id tempus. Nulla eget vehicula mi, id volutpat erat. Proin sed enim egestas, rhoncus ipsum a, consectetur mi. Quisque est arcu, tempus a ligula eu, aliquam elementum quam. Sed tristique sit amet sapien eget ornare. In vitae adipiscing neque. Ut aliquet felis vitae porttitor vehicula. Morbi aliquam rhoncus lacinia. Vestibulum at viverra nisl. Donec rhoncus, dolor eu luctus egestas, magna leo consequat justo, ac venenatis odio ligula ac tortor. Nullam faucibus ante enim, vitae cursus mauris interdum ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc turpis massa, viverra vitae rutrum non, elementum sit amet orci.</p>
</div>
</div>
</body>
Here's the CSS:
* {
font-family:'Lato', sans-serif;
font-weight: lighter;
padding: 0;
margin: 0;
color:white;
}
body {
background: #111111;
height: 100%;
}
#content-container {
background-color: #111111;
height: 113px;
width: 100%;
}
#content-container img {
padding: 15px;
padding-top: 15px;
/*float: left; */
}
.navbar {
float: right;
background-color: #111111;
font-size: 25px;
padding-top: 45px;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: white;
padding: 15px;
float:right;
}
nav ul li.homeLink a {
padding-left: 41px;
padding-right: 43px;
}
nav ul li.portfolioLink a {
padding-left: 9px;
padding-right: 9px;
padding-bottom: 1px;
}
nav ul li.aboutLink a {
padding-left: 37px;
padding-right: 37px;
}
#activePortfolioLink a {
padding-left: 9px;
padding-right: 9px;
background: #0033cc;
font-weight: normal;
}
#portfolioUnderline {
background-color: #0033cc;
width: 100%;
height: 10px;
margin-top: -12px;
}
#left {
float: left;
width: 300px;
overflow: hidden;
}
#rightContent {
margin-left: 300px padding-left:300px;
height:100%;
overflow:scroll;
}
.verticalNavBar {
float: right;
text-align: right;
margin-top: 20px;
color: white;
font-size: 15px;
}
.verticalNavBar li {
list-style: none;
color: white;
padding-top:10px;
padding-bottom: 10px;
}
.verticalNavBar li a {
text-decoration: none;
color: white;
padding: 10px;
}
#verticalLine {
background-color: #0033cc;
float:left;
width: 10px;
height: 905px;
}
#webDesignLink a {
background: #0033cc;
font-weight: normal;
}
.portfolioImages {
margin: 0 auto;
padding-top: 20px;
padding: 10;
margin-right: 10%;
margin-left: 10%;
margin-bottom: 20px;
overflow: auto;
}
img.individualImage {
margin-left: 450px;
}
.portfolioImages p {
font-size: 15px;
font-weight: lighter;
text-align: center;
}
Here's a jsfiddle of the code: http://jsfiddle.net/GGSSj/
Thanks for your time!
You can fix the height in relation to the screen size, but you have to fix the height /somehow/ to get it to scroll independently.
Here is a fiddle with absolute positioning of each segment: http://jsfiddle.net/GGSSj/3/
#content-container {
position:absolute; top:0; left:0; width:100%; height:113px;
}
#left {
position:absolute; top:123px; bottom:0; left:0; width:300px;
}
#rightContent {
position:absolute; top:123px; bottom:0; left:310px; right:0;
overflow-y:scroll;
}
You can fix the height in relation to the screen size, but you will have to fix the height the scrollable container (somehow with javascript for full screen height) to get it to scroll independently.
Give it a try : fiddle updated here
#rightContent {
height: 555px; /* fit height to your needs */
overflow: auto;
}
You need to set your top area and your left area to position:fixed;
http://jsfiddle.net/GGSSj/
#left {
position:fixed;
top: 113px;
left: 0;
width: 300px;
overflow: hidden;
}
#rightContent {
margin-left:300px;
padding-top:113px;
height:100%;
overflow: auto;
}
#content-container {
position: fixed;
background-color: #111111;
height: 113px;
width: 100%;
}