I'm just playing around with creating a website, excuse the messy code, quite new to this game.
Basically I'm trying to section a website with each sections content either going to the left or right, alternating.
As you can see I've managed to do the one to the left (Section2), however I can't seem to do the one on the right (Section3). The nav bar is also fixed but isn't showing on the JSFiddle. I'm also wondering why my text displays fine on my 1920x1080 monitor, but on my 1366x768 laptop, it overflows out of the div, bear in mind that the backgrounds of each section will be will eventually be an image, so I can't repeat it.
I've uploaded a JSFiddle as I was getting confused with what I had to do to upload code here, hope it is not a problem.
I appreciate your help, and again sorry for the incredible messy code!
<section id="screen1">
<div class="hLogo">Title</div>
<nav>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
</li>
</ul>
<img class="ad" src="css/asc.jpg" />
</nav>
</section>
<section id="screen2">
<div class="content left nobg">
<div class="scrTitle">About</div>
<p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
</section>
<section id="screen3">
<div class="content right nobg">
<div class="scrTitle">About</div>
<p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
</section>
To fix your problem with section 3 not going to the right, You can just add this bit of code to your CSS:
.scrContent2 {
font-size: 75%;
overflow: hidden;
width: 20%;
float: right;
}
This means that your HTML will need changing for section 3 as follows:
<p class="scrContent2">
Here is a jsfiddle of this.. http://jsfiddle.net/jw5du15v/5/
Try like this: DEMO
CSS:
.right {
margin-right: 10%;
text-align:right;
float:right;
}
.left {
margin-left: 10%;
float: left;
text-align:left:
}
HTML:
<div class="content nobg">
<div class="scrTitle left">About</div>
<p class="scrContent right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
Use CSS to float your webpages to left and Right.
Try this
.content left nobg {
float:left;
}
.content right nobg {
float:right;
}
Related
Obv
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/scripts.js"></script>
I have a link that point to a section down the page
<a id="seemore" class="seemore" href="#down">SEE MORE</a>
the css for the div that i want to fade in while moving to it
#down {
margin-top: 100%;
justify-content: center;
visibility: hidden;
}
but my script doesnt work :(
$("#seemore").click(function(){
$("#seemore").fadeOut("fast");
$("#down").fadeIn("slow");
});
Building this site in local
I this one is your looking for?
$(document).ready(function(){
$("#seemore").click(function(){
$("#seemore").fadeOut("fast");
$("#down").fadeIn("slow");
});
});
#down {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="seemore" class="seemore" href="#down">SEE MORE</a>
<p id="down" >Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
If you need the object to fadeIn, you have to start your object hidden using display: none.
You can check this example:
$("#show-more").click(function(e) {
e.preventDefault();
$("#show-more").hide();
$("#more").fadeIn();
});
#more {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Article title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta nec urna ut molestie. Nullam consequat augue vel orci finibus sodales. Curabitur in augue vel metus sagittis efficitur in non diam. Ut volutpat porttitor velit, vitae dignissim odio tempus et. Aliquam sodales dolor sit amet pharetra hendrerit. Vivamus ullamcorper placerat mauris eget fringilla. Mauris id lectus lobortis, pharetra nibh at, condimentum sapien. Morbi suscipit tincidunt mauris, eu iaculis lacus scelerisque eget. In in sodales dui, eget mollis est. Sed in mauris ut neque blandit hendrerit.</p>
<p id="more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta nec urna ut molestie. Nullam consequat augue vel orci finibus sodales. Curabitur in augue vel metus sagittis efficitur in non diam. Ut volutpat porttitor velit, vitae dignissim odio tempus et. Aliquam sodales dolor sit amet pharetra hendrerit. Vivamus ullamcorper placerat mauris eget fringilla. Mauris id lectus lobortis, pharetra nibh at, condimentum sapien. Morbi suscipit tincidunt mauris, eu iaculis lacus scelerisque eget. In in sodales dui, eget mollis est. Sed in mauris ut neque blandit hendrerit.</p>
<a id="show-more" href="#">Show more</a>
Considering that components such as dialogs, modals, tooltips, etc. should be of higher stacking index than any other elements in an HTML page, I placed these components in an immediate sibling of root element where all the other elements are placed. React developers will quickly recognize this and they'll know that I'm trying to use React Portals. You can visualize it here:
<body>
<div id="root">
// ----- other elements -----
<div id="supposed-parent" />
// ----- other elements -----
</div>
<div id="dialog-container">
<div id="supposed-child" />
</div>
</body>
So, how can I position #supposed-child next or beside #supposed-parent? Any help would be appreciated.
I don't think this is possible with a pure css. But with a little script we can achieve this. Take the offset-left and top of the supposed-parent and apply the same to the supposed-child. The child should be absolute positioned element. Check the below sample and It hope this will be useful for you.
Even though the supposed-child(yellow box) is independent of the supposed-parent, It will be always align with the top-left of the supposed-parent.
function offsetCalculate(){
var parentTop = $('#supposed-parent').offset();
var parentLeft = $('#supposed-parent').offset();
$('#supposed-child').css({
'top':parentTop.top,
'left': parentLeft.left
});
}
$(document).ready(function () {
offsetCalculate();
});
$(window).resize(function(){
offsetCalculate();
});
#supposed-child{
position: absolute;
background: yellow;
border-radius: 5px;
padding: 10px;
z-index: 999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor libero, euismod et nisl eu, imperdiet elementum neque. Praesent aliquet non tellus sed blandit. Ut vitae velit eget turpis ornare convallis. Quisque nec felis eget mi vestibulum luctus eu non dui.</h1>
<div id="supposed-parent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor libero, euismod et nisl eu, imperdiet elementum neque. Praesent aliquet non tellus sed blandit. Ut vitae velit eget turpis ornare convallis. Quisque nec felis eget mi vestibulum luctus eu non dui. Pellentesque eget commodo tellus. Curabitur a dolor est. Integer dapibus lectus nec mi luctus, ac ornare ex auctor. Donec vel nisi nulla. Mauris maximus egestas nunc ut egestas. Suspendisse id leo nec elit consectetur interdum. Ut purus nibh, tristique quis est vel, ultrices blandit nibh. Aenean nibh justo, mattis sed vulputate quis, efficitur eu mauris. Sed vel vulputate metus, et dictum arcu. In ornare nisl vitae purus elementum, quis egestas dolor volutpat. In velit nisi, posuere in urna non, feugiat luctus enim.
</div>
</div>
<div id="dialog-container">
<div id="supposed-child" >This is a popup</div>
</div>
I have a p tag with multi line text,
I want to truncate the para and delete all the texts after second line
here is how my code looks
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat
</p>
Note: I don't understand how can I do this, or is this can be done?
maybe this page will help you a little bit : http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
https://codepen.io/natonischuk/pen/QbGWBa
use css :
<style>
.block {
overflow: hidden;
line-height: 1.2em;
max-height: 2.4em;
}
</style>
<p class="block">.....</p>
ratio of (max-height / line-height) is number of line that will be shown (not truncated)
The Problem:
I'm trying to set my masthead's height equal to the viewport height and vertically center the nested content using the table/table-cell method. When I set the height value of the masthead's parent div (the main element) to 100%, the footer repositions just below the masthead because the main element's height is limited to the viewport height, even with a clearfix.
Potential solutions that I'd like to avoid:
Moving the masthead content before the main content (Possible SEO
impact?)
Moving the masthead content into the header (Using CI framework, not an option)
Using vh units / JavaScript / jQuery (I want 100% browser compatibility, ideally)
I'd greatly appreciate any help or insight into this issue that you can offer. If there isn't a pure CSS solution that meets the above criteria, I'll select the most browser-friendly solution.
Code Snippet Demoing the Issue:
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
*, :after, :before, html {
box-sizing: border-box;
}
* {
margin:0;
padding:0;
}
html, body, .wrapper, main, .masthead, .masthead .section-content {
height:100%;
}
body {
background-color:#dddddd;
}
.section-content {
background-color:#eeeeee;
}
header {
position:fixed;
top:0;
left:0;
right:0;
}
header, footer {
height:61px;
line-height:61px;
background-color:white;
}
nav, .section-content, footer div {
width:75%;
margin-left:auto;
margin-right:auto;
}
li {
display:inline-block;
}
main {
padding-top:61px;
}
section {
padding-top:1rem;
padding-bottom:1rem;
}
h1, h3, p {
padding-bottom:1rem;
}
.centered-wrapper {
display:table;
height:100%;
}
.centered-content {
display:table-cell;
vertical-align:middle;
}
<body>
<div class="wrapper">
<header>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
<main class="clearfix">
<section class="masthead">
<div class="section-content">
<div class="centered-wrapper">
<div class="centered-content">
<h1>
Heading 1
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus.</p>
</div>
</div>
</div>
</section>
<section>
<div class="section-content">
<h3>
Section Header
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
</div>
</section>
</main>
<footer>
<div>
<p>
© Tyler Fuller
</p>
</div>
</footer>
</div>
</body>
This seems to be a common problem for many people. I'm afraid one of the best solutions at the moment is to use vh units with this javascript 'buggyfill' until iOS Safari fixes their browser.
I know you said you don't want a vh or JavaScript solution, but you did say you want 100% browser compatibility. Unfortunately we can't have our cake and eat it, too. Case in point: Modernizr.
That being said, don't be afraid to use that buggyfill I linked to. It's very easy to use. Here's a demo CodePen: https://codepen.io/krabbypattified/pen/ZKaKJw/
A webpage without the "buggyfill": http://lab.gasteroprod.com/vub/index-ios-issue.html
Same webpage with the "buggyfill": http://s.codepen.io/krabbypattified/debug/ZKaKJw/YvkgOPPypyok
(feel free to visit those links on iOS Safari)
The vh solution for your website is simple. Just remove the height from the main element and add a height: 100vh to the .masthead.
I'm in highschool and just starting to learn HTML, CSS, and JQuery. I know how to make the individual items on my list slide into view, but I'm not sure how to make them slide back up and disappear once the items are clicked a second time. Here's my code so far:
.drop {
width:200px;
background-color:#000;
padding:5px;
}
.drop > p {
color:white;
text-align:center;
}
.slide {
display:none;
width:180px;
background-color:#fff;
padding:5px;
margin:auto;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="drop inactive">
<p>00/00/00</p>
<div class="slide article-preview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nulla sed nisi tempus fringilla. Duis lorem eros, pharetra vel luctus at, gravida vel nisi. Aliquam tincidunt diam nec quam blandit elementum. Nunc imperdiet risus non interdum vestibulum. Aenean tempus, turpis sit amet laoreet suscipit, nunc erat elementum metus, sed tincidunt ipsum nisl eu dui. Integer erat turpis, posuere vel sapien quis, cursus molestie ante. Morbi maximus odio nec odio pulvinar, vel porta quam maximus.
<a href=#>Read more...</a>
</div>
</div>
<div class="drop inactive">
<p>00/00/00</p>
<div class="slide article-preview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nulla sed nisi tempus fringilla. Duis lorem eros, pharetra vel luctus at, gravida vel nisi. Aliquam tincidunt diam nec quam blandit elementum. Nunc imperdiet risus non interdum vestibulum. Aenean tempus, turpis sit amet laoreet suscipit, nunc erat elementum metus, sed tincidunt ipsum nisl eu dui. Integer erat turpis, posuere vel sapien quis, cursus molestie ante. Morbi maximus odio nec odio pulvinar, vel porta quam maximus.
<a href=#>Read more...</a>
</div>
</div>
<div class="drop inactive">
<p>00/00/00</p>
<div class="slide article-preview">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nulla sed nisi tempus fringilla. Duis lorem eros, pharetra vel luctus at, gravida vel nisi. Aliquam tincidunt diam nec quam blandit elementum. Nunc imperdiet risus non interdum vestibulum. Aenean tempus, turpis sit amet laoreet suscipit, nunc erat elementum metus, sed tincidunt ipsum nisl eu dui. Integer erat turpis, posuere vel sapien quis, cursus molestie ante. Morbi maximus odio nec odio pulvinar, vel porta quam maximus.
<a href=#>Read more...</a>
</div>
</div>
<script type="text/javascript">
$(".inactive").click(function(){
$(".slide").slideUp('slow');
$(this).children().slideDown("slow");
});
</script>
</body>
</html>
Heres a fiddle with different toggle options. It uses the slideToggle function in jquery to show/hide the specified element. setting a number instead of the string "slow" like (700) runs the slide function over 700 milliseconds:
$(this).find(".slide").slideToggle("slow");
http://jsfiddle.net/agbb7n61/1/