Here is what my final layout should look like:
Unfotunately I am having trouble getting the two columns to layout properly with my css coding. When I use the float: left; coding it stacks them on top of each other.
/*------ Document -----*/
body {
margin: 0 auto;
padding: 0;
font: .75em/1.5em Helvetica, Arial, sans-serif;
color: #797267;
width: 960px;
background: #797267;
}
/**--- Headers ---*/
header {
width: 960px;
height: 210px;
background-image: url(../images/header-bg.jpg);
}
h1 {
width: 317px;
height: 71px;
padding: 64px 0px 0px 64px;
margin: 64px 64px 0px 0px;
}
h2 {
color: #423b2e;
size: 1.5em;
}
/*--- Navigation ---*/
nav {
color: #423b2e;
}
#current {
color: #bf3102;
}
ul {
list-style-type: none;
padding: 84px 64px 0px 0px;
float: right;
clear: left;
width: 277px;
}
li {
display: inline;
}
/*--- Banner --*/
div {
background-image: url(../images/main-content-bg.jpg);
width: 960px;
}
div #banner {
background-image: url(../images/banner.jpg);
width: 890px;
height: 200px;
margin: auto;
background-repeat: none;
}
/*--- Two-Columns Content --*/
#column1of2 {
width: 450px;
padding: 25px;
}
#column1of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 450px;
margin: 0px 0px 45px 64px;
}
#column2of2 {
width: 260px;
padding: 25px;
}
#column2of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 260px;
margin: 0px 0px 45px 44px;
}
/*--- Footer --*/
footer {
background-image: url(../images/footer-bg.jpg);
background-repeat: no-repeat;
color: #423b2e;
size: .9em;
text-align: center;
width: 960px;
padding: 92px 0px 0px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>BusinessName</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<header>
<h1>BusinessName</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="main-content">
<div id="banner">
</div>
<section id="column1of2" class="page-flip">
<h2>Who We Are (h2)</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Aenean pretium tellus sit amet enim. Donec laoreet urna ut pede. Nulla eget magna at felis feugiat imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="column2of2" class="page-flip">
<h2>How We Can Help (h2)</h2>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb1.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb2.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb3.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
</section>
</div>
<footer>
<p>© BusinessName. All rights reserved. </p>
</footer>
</body>
</html>
I think you made a mistake. float: left; is not applied to either of the columns.
Without looking at your code, did you try to use Display:inline?
I think you want this.I don't have your images.so i set the beckground-color for demo.
body {
margin: 0 auto;
padding: 0;
font: .75em/1.5em Helvetica, Arial, sans-serif;
color: #797267;
width: 960px;
background: #797267;
}
/**--- Headers ---*/
header {
width: 960px;
height: 210px;
background-image: url(../images/header-bg.jpg);
background-color:red;
}
h1 {
width: 317px;
height: 71px;
padding: 64px 0px 0px 64px;
margin: 64px 64px 0px 0px;
}
h2 {
color: #423b2e;
size: 1.5em;
}
/*--- Navigation ---*/
nav {
color: #423b2e;
}
#current {
color: #bf3102;
}
ul {
list-style-type: none;
padding: 84px 64px 0px 0px;
float: right;
clear: left;
width: 277px;
}
li {
display: inline;
}
/*--- Banner --*/
div {
background-image: url(../images/main-content-bg.jpg);
width: 960px;
background-color:black;
}
div #banner {
background-image: url(../images/banner.jpg);
width: 890px;
height: 200px;
margin: auto;
background-repeat: none;
background-color:green;
}
/*--- Two-Columns Content --*/
#column1of2 {
width: 450px;
padding: 25px;
float:left;
background-color:yellow;
}
#column1of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 450px;
margin: 0px 0px 45px 64px;
}
#column2of2 {
width: 260px;
padding: 25px;
background-color:blue;
float:left;
}
#column2of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 260px;
margin: 0px 0px 45px 44px;
}
/*--- Footer --*/
footer {
background-image: url(../images/footer-bg.jpg);
background-repeat: no-repeat;
color: #423b2e;
size: .9em;
text-align: center;
width: 960px;
padding: 92px 0px 0px 0px;
background-color:green;
clear:both;
}
<header>
<h1>BusinessName</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="main-content">
<div id="banner">
</div>
<section id="column1of2" class="page-flip">
<h2>Who We Are (h2)</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Aenean pretium tellus sit amet enim. Donec laoreet urna ut pede. Nulla eget magna at felis feugiat imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="column2of2" class="page-flip">
<h2>How We Can Help (h2)</h2>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb1.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb2.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb3.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>
</section>
</div>
<footer>
<p>© BusinessName. All rights reserved. </p>
</footer>
Related
p.note:before {
content: "";
width: 30px;
height: 50px;
float: left;
margin: 0 6px 0 0;
background: url(../images/note-icon.png) no-repeat;
}
.note {
font-family: arial, sans-serif !important;
background-color: transparent !important;
border: 1px solid #6F1425 !important;
}
Hello,
I am trying to enforce the vertical height of a ::before pseudo-element (image of a notepad) before a body of text. Longer text wraps below the image however and I want to prevent this. Attempts to include an absolute height extends past/below the element into other content however.
Centering the image vertically before the text would be an acceptable alternative.
Reduce the viewing window of the below example (to force wrapping and additional lines of text) to see what I mean. Thank you
https://codepen.io/psuedobeforehelp/pen/YzGKVOB
You can do it like this. in before element you just need to put this code
position:absolute;
left:20px;
top:50%; // THIS LINE OF CODE HERE CENTERS THE IMAGE
transform:translateY(-50%); // THIS LINE OF CODE HERE CENTERS THE IMAGE
And add position:relative; to your note class to prevent the before element from going somewhere.
p.note:before {
content: "";
width: 30px;
height: 50px;
margin: 0 6px 0 0;
position: absolute;
background: red;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.note {
font-family: arial, sans-serif !important;
background-color: transparent !important;
border: 1px solid #6F1425 !important;
position:relative;
padding:20px 20px 20px 50px;
}
<p class="note"><span class="bold">Note</span>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
Text
Hi there,
first I have to say: I´m a beginner, so I hope you are patient with me!:-)
I created a navigation via a list. By adding a "padding" for "a" I determined also the height of its ancestor elements ("ul" and "nav"). I did that because afterwards I wanted the whole areas to get black with a transition.
Now, when I want to scale it to 1.2, the "a"-clicking-area appears bigger than the ancestor arease of "ul" and "nav".
Any ideas how I can limit it to the height of the link area?
image
Link to picture of Problem
CSS and html code
<!-- language: lang-css -->
* {
margin: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
padding: 0;
font-family: helvetica;
}
body {
color: #000;
font-size: 1em;
text-align: left;
padding: 0;
background-color: #fff;
}
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
display: block;
}
strong, b {
font-weight: bold;
}
em, i {
font-style: *italic*;
}
small {
font-size: 0.8rem;
}
main h1,
main p {
margin-bottom: 1rem;
}
main h1 {
font-size: 2em;
font-weight: **bold**;
}
main p {
line-height: 1.5em;
}
main :last-child {
margin-bottom: 0;
}
nav ul {
list-style-type: none;
padding: 0;
}
header {
height: 30rem;
background-image: url(../images/whatsapp.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: right bottom;
position: relative;
}
header a {
color: white;
}
/*Breakpoint 1*/
#media (max-width: 1024px) {
header {
height: 20rem;
}
}
header #title {
font-size: 7.5rem;
font-weight: **bold**;
white-space: nowrap;
text-decoration: none;
word-spacing: -0.05em;
position: absolute;
top: 0.5rem;
left: calc(50% - 30rem);
opacity: 0.75;
}
/*Breakpoint 1*/
#media (max-width: 1024px) {
header #title {
font-size: 5rem;
font-weight: **bold**;
white-space: nowrap;
text-decoration: none;
word-spacing: -0.05em;
position: absolute;
top: 0.5rem;
left: calc(60% - 30rem);
opacity: 0.75;
}
}
header #title::before {
content: url(../images/sun.svg);
display: inline-block;
vertical-align: middle;
width: 30%;
font-size: inherit;
margin-top: 1rem;
margin-right: 2rem;
margin-left: 1rem;
}
/*Breakpoint 2*/
#media (max-width: 768px) {
header #title, header #title::before {
transform: rotate(-90deg);
top: calc(30rem - 100%);
left: -6rem;
}
header #title {
font-size: 2.8rem;
}
header #title::before {
width: 20%;
margin-right: 0rem;
margin-left: 2.5rem;
margin-bottom: 1rem;
}
}
nav {
width: 100%;
background-color:rgba(255, 255, 255, 0.3);
position: absolute;
top: 321px;
}
nav ul {
max-width: 1025px;
display: flex;
justify-content: space-around;
margin: auto;
}
nav ul li {
font-size: 1.4rem;
font-weight: **bold**;
white-space: nowrap;
}
nav ul li a {
padding: 4rem 2rem;
text-decoration: none;
display: block;
text-align: center;
}
nav ul li a:hover {
background-color: rgba(0, 0, 0, 0.3);
transform: scale(1.2);
transition: background-color 0.3s ease-in;
transition: transform 0.1s ease-in;
padding: 4rem 2rem;
}
#media (max-width: 1024px) {
nav {
box-sizing: border-box;
width: 180px;
height: inherit;
position: unset;
top: 0;
right: 0;
}
nav ul {
width: 100%;
flex-direction: column;
}
nav ul li a {
padding: 1.03rem;
text-align: left;
}
}
main {
max-width: 1025px;
box-sizing: border-box;
margin: auto;
padding: 2rem;
}
p {
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
```
html code
```
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Whatsapp</title>
<link href="styles/styles_neu.css" rel="stylesheet" media="screen" />
</head>
<body>
<header>
Whatsapp
<nav>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
</ul>
</nav>
</header>
<main>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</body>
</html>
<!-- end snippet -->
I'm using bootstrap to build my website. I have a typical navbar with menu options, but I need to change the CSS to produce something like the image below (that will continuos work on mobile).
The image represents the expected result.
<nav class="navbar navbar-default navbar-default-light navbar-fixed-top">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="index.php"><img src="assets/img/img.png" width="152px"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<!-- menu options -->
</li>
</ul>
</div>
</div>
</nav>
CSS used code: the css of navbar class is the default used in Boostrap.
.navbar-default {
border-color: transparent;
background-color: #1f3741;
padding: 25px 0;
border: 0;
background-color: #ffffff;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-default-light{
background-color: transparent;
}
.navbar-default .navbar-brand {
font-family : Lato,"Helvetica Neue",Helvetica,Arial,cursive;
color: #1676a9;
margin-top:-10px;
}
.navbar-default .navbar-collapse {
border-color: rgba(255,255,255,.02);
padding-top: 15px;
}
.navbar-default .navbar-toggle {
border-color: #1676a9;
background-color: #1676a9;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .nav li a {
font-size: 16px;
font-family: "Raleway", "Helvetica", sans-serif;
text-transform: uppercase;
line-height: 1.2;
padding: 15px 10px;
color: rgb(0, 0, 0);
}
.navbar-default-light .navbar-collapse {
margin-top: 20px;
}
.navbar-default-light .nav li a {
color: rgb(255, 255, 255);
}
.navbar-default .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
Anyone can help me?
Here is some overlapping style on bootstrap classes to design for second image.I hope this below snipped will help you lot.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.navbar-default-light{
border-color: transparent;
border: none;
background-color: #c3c3c3;
}
.navbar-default .navbar-brand {
color: #1676a9;
}
.navbar-default .navbar-collapse {
border-color: rgba(255,255,255,.02);
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
z-index: 2;
position: relative;
margin-left: 14px;
height: 3px;
}
.navbar-default-light .nav li{
width: 100%;
display: block;
float: none;
text-align: center;
}
.navbar-default-light .nav li a {
line-height: 1.2;
font-size: 16px;
text-transform: uppercase;
color: #000;
}
.navbar-default-light .navbar-toggle{
display: block;
right: -15px;
margin-right: 0px;
position: absolute;
border-radius: 0;
border: none;
background: #999;
height: 100%;
top: 0;
width: 50px;
outline: none;
text-align: center;
padding-left: 0;
padding-right: 0;
margin-top: 0;
overflow: hidden;
}
.navbar-default-light .navbar-toggle:hover{background: #999; opacity: 0.75}
.navbar-default-light .navbar-toggle:before{
content: '';
position: absolute;
width: 80px;
height: 80px;
top: 10px;
left: -46.5px;
background: #1676a9;
transform: rotate(-45deg);
transform-origin: center;
z-index: 0;
}
.navbar-right {
float: none!important;
margin-right: 0px;
top: 0;
width: 100%;
}
.collapse.in, .collapsing{
width: 100%!important;
min-width: 100%;
}
.navbar-items{
position: absolute;
height: auto;
background: #ccc;
top: 50px;
left: 0;
overflow: hidden;
overflow-y: auto;
max-height: 250px;
}
#media(max-width: 767.98px){
.navbar-default-light .navbar-toggle {
right: -30px;
}
}
<nav class="navbar navbar-default navbar-default-light navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header" style="position: relative; width: 100%;">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bscollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand Name</a>
</div>
<div class="collapse navbar-collapse1 navbar-items" id="bscollapse">
<ul class="nav navbar-nav navbar-right">
<li>Menu #1</li>
<li>Menu #2</li>
<li>Menu #3</li>
<li>Menu #4</li>
<li>Menu #5</li>
<li>Menu #6</li>
<li>Menu #7</li>
<li>Menu #8</li>
<li>Menu #9</li>
<li>Menu #10</li>
<li>Menu #11</li>
<li>Menu #12</li>
<li>Menu #13</li>
<li>Menu #14</li>
<li>Menu Last</li>
</ul>
</div>
</div>
</nav>
<div style="min-height: 100vh; padding-top: 70px;">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Last Line...
</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I worked on the code i had posted here and fixed it so it does the things i wanted to but the third element in the row wraps to the next line when the browser is between 992px and 1350px. when the browser is between 992px and 1350px the third element in he row wraps to the next line, i have tried with display: inline-block, the left, rifght, center, floats, the flexbox and many other things but nothing seems to work with the media queries in the csss
CSS
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: Times, Verdana, sans-serif;
font-size:100%;
}
}
/**** Row (for the responsive design***/
.row {
padding: 15%;
margin-right: 5px;
margin-left: 5px;
}
/**** Header ****/
header {
font-size: 24px;
margin-bottom: 35px;
padding-top: 2.5%;
text-align: center;
}
/**** Article styles and position ****/
#art1, #art2, #art3 {
display: inline-block;
float: left;
height: 40%;
width: 31%;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 20px 10px 10px;
}
/**** Article titles ****/
#lorem1 {
background-color: lightgreen;
border: 1.5px solid black;
left: 70%;
margin-bottom: -28.9px;
padding-left: 15px;
padding-right: 15px;
position: relative;
text-align: center;
width: 30%;
}
#lorem2 {
background-color: turquoise;
border: 1.5px solid black;
left: 70%;
top: 20%;
position: relative;
width: 30%;
margin-bottom: -28.9px;
padding-right: 15px;
padding-left: 15px;
text-align: center;
}
#lorem3 {
background-color: crimson;
border: 1.5px solid black;
left: 70%;
margin-bottom: -28.9px;
padding-left: 15px;
padding-right: 15px;
position: relative;
text-align: center;
width: 30%;
}
/**** Content of the articles ****/
p {
border: 1px black solid;
overflow: hidden;
text-overflow: hidden;
}
.p1, .p2, .p3 {
background-color: mediumpurple;
color: gold;
padding: 35px 10px 10px 15px;
}
/**** Media queries ****/
/**Mobile devices**/
#media (max-width: 767px) {
* {
box-sizing: border-box;
margin: 0;
}
#art1, #art2, #art3 {
width: 94.5%;
display: block;
}
#art1, #art2, #art3 {
margin: 10px 20px 10px 20px;
}
}
/**Tablets**/
#media (min-width: 768px) and (max-width: 991px) {
*{
margin: 0; }
#art1, #art2 {
width: 45.5%;
display: inline-block;
}
#art3 {
display: inline-block;
width: 92%;
position: relative;
left: 2.5%;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 40px 10px 20px;
}
/**Desktop computers**/
#media (min-width: 992px) and (max-width: 1199px) {
* {
box-sizing: border-box;
margin: 0;
}
.row {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
flex-direction: row;
border: 2px solid red; /* not necesary just checkiing it'd appear on the screen*/
}
#art1, #art2, #art3 {
width: 31%;
height: 30%;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 20px 20px 10px;
fle
}
}
/**** Deskptops above 1360px ****/
#media (min-width: 1200px) and (max-width: 1350px) {
* {
box-sizing: border-box;
margin: 0;
}
.row {
display:flex;
flex-wrap: wrap;
justify-content: center ; /* for horizontal aligning of child divs */
align-items : center ; /* for vertical aligning */
}
#art1, #art2, #art3 {
width: 31%;
display: inline-block;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 20px 20px 10px;
}
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles-2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Week 2 assigment</title>
</head>
<body>
<section class="row">
<header>
<h1>Our Menu</h1>
</header>
<article id="art1" >
<h2 id="lorem1">Chiken</h2>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article id="art2" >
<h2 id="lorem2">Beef</h2>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article id="art3">
<h2 id="lorem3">Sushi</h2>
<p class="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>
</body>
</html>
Your code is not following any general layout. I suggest checking out w3 and looking at float/clearfix or flexbox layouts so you can figure out stuff before posting too much.
here is a simple vanilla way too display three columns in a line. You can add your media queries to make the sections 100% on resize.
Your CSS is excessive and uses bootstrap classes without having it in your head. And your css plays with these classes. I am not sure what's going on here haha. Hope this helps bro!
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
section {
width:31.33%;
float:left;
margin-right:1%;
}
<body>
<header>
<h1>Our menu</h1>
</header>
<div class="clearfix">
<section class="1">
<h2 class="loremab1">lorem 1</h2>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="2">
<h2 class="loremab2">lorem 2</h2>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="3">
<h2 class="loremab3">lorem 3</h2>
<p class="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</body>
Here is my CSS and HTML code.
.column {
float: left;
width: 252px;
padding-left: 1px;
padding-bottom: 34px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul,
ol {
list-style-type: none;
}
.items li {
border-bottom: 1px solid red;
padding: 7px 16px 4px;
white-space: nowrap;
}
.items li.item--highlighted {
background: #f0ce78;
}
.items li .item__title {
font-size: 14px;
font-weight: normal;
text-transform: none;
font-family: "Roboto", sans-serif;
}
.items li .item__meta__separator {
display: inline-block;
margin: 0 5px;
}
.items li .red {
color: #ed1b2e;
}
.items li .info-bubble.info-bubble-bottom.info-bubble-bottom-left {
left: 70px;
}
.meta {
color: #9D9D9D;
font-size: 11px;
}
<div id="salesInvoice4Columns" class="column column-4" style="width:px;">
<ol class="items">
<li id="saleInvoiceLink0">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">622790_150510_05101756067567567567565758DI</a> <span class="item__meta__separator">|</span>
27.08 09:16
</div>
</li>
<li id="saleInvoiceLink1">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">201523443434343434072QU</a> <span class="item__meta__separator">|</span>
26.08 15:48
</div>
</li>
</ol>
</div>
The problem is that I want all the text which is after red bottom line replaced with ... or fade out. Something that will look nice. Can somebody suggest me how to make this? I have provided fiddle also. link
You can use text-overflow with css and a max-width to control it.
http://fiddle.jshell.net/bqhmkfux/2/
You need to add this class in the css:
.sidebarExternalLink {
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
text-overflow: ellipsis; in combination with overflow: hidden is how you get the three dots ....
The other effect could be achieved with adding a gradient mask using a CSS pseudo element at the bottom of where the text is being displayed.
I've put together an example using a scrollable div with a linear gradient to white for you;
body {
background: white;
}
.wrap {
position: relative;
}
.txt {
height: 200px;
overflow: auto;
}
.txt:after {
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
height: 75px;
background: linear-gradient(transparent, white);
content: '';
}
<div class="wrap">
<div class="txt">
<p>Elit irure consectetur officia laboris nulla sit laborum irure consectetur qui nisi id duis est. Cupidatat est cupidatat consequat quis ad non laboris duis ut laboris adipisicing incididunt. Laborum consectetur tempor ipsum ea quis sit laborum ullamco amet id consectetur id exercitation officia. Est dolor elit laborum nulla officia elit do nisi ex occaecat. Veniam mollit ut proident ut quis incididunt amet sunt ullamco velit. Nulla nostrud cillum ea sint sunt. Id Lorem duis nostrud irure quis et fugiat. Cupidatat duis dolore Lorem incididunt tempor ipsum. Nulla adipisicing nisi enim ea do deserunt officia ut labore excepteur aliqua.</p>
<p>Elit irure consectetur officia laboris nulla sit laborum irure consectetur qui nisi id duis est. Cupidatat est cupidatat consequat quis ad non laboris duis ut laboris adipisicing incididunt. Laborum consectetur tempor ipsum ea quis sit laborum ullamco amet id consectetur id exercitation officia. Est dolor elit laborum nulla officia elit do nisi ex occaecat. Veniam mollit ut proident ut quis incididunt amet sunt ullamco velit. Nulla nostrud cillum ea sint sunt. Id Lorem duis nostrud irure quis et fugiat. Cupidatat duis dolore Lorem incididunt tempor ipsum. Nulla adipisicing nisi enim ea do deserunt officia ut labore excepteur aliqua.</p>
<p>Elit irure consectetur officia laboris nulla sit laborum irure consectetur qui nisi id duis est. Cupidatat est cupidatat consequat quis ad non laboris duis ut laboris adipisicing incididunt. Laborum consectetur tempor ipsum ea quis sit laborum ullamco amet id consectetur id exercitation officia. Est dolor elit laborum nulla officia elit do nisi ex occaecat. Veniam mollit ut proident ut quis incididunt amet sunt ullamco velit. Nulla nostrud cillum ea sint sunt. Id Lorem duis nostrud irure quis et fugiat. Cupidatat duis dolore Lorem incididunt tempor ipsum. Nulla adipisicing nisi enim ea do deserunt officia ut labore excepteur aliqua.</p>
</div>
</div>
Hope that helps you out!
This can be achieved by using overflow: hidden; and text-overflow: ellipsis;. The following changes are required:
Add overflow: hidden; to .meta, this tells it to cut off any content that goes outside its bounderies
Add text-overflow: ellipsis; to .meta, this will ensure that the cut off text is replaced with ellipsis
Add margin-right: -32px; to .meta this will offset the amount of padding set on .items li to ensure that the text is cut off at the end of the red line
.column {
float: left;
width: 252px;
padding-left: 1px;
padding-bottom: 34px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul,
ol {
list-style-type: none;
}
.items li {
border-bottom: 1px solid red;
padding: 7px 16px 4px;
white-space: nowrap;
}
.items li.item--highlighted {
background: #f0ce78;
}
.items li .item__title {
font-size: 14px;
font-weight: normal;
text-transform: none;
font-family: "Roboto", sans-serif;
}
.items li .item__meta__separator {
display: inline-block;
margin: 0 5px;
}
.items li .red {
color: #ed1b2e;
}
.items li .info-bubble.info-bubble-bottom.info-bubble-bottom-left {
left: 70px;
}
.meta {
color: #9D9D9D;
font-size: 11px;
margin-right: -32px;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="salesInvoice4Columns" class="column column-4" style="width:px;">
<ol class="items">
<li id="saleInvoiceLink0">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">622790_150510_05101756067567567567565758DI</a> <span class="item__meta__separator">|</span>
27.08 09:16
</div>
</li>
<li id="saleInvoiceLink1">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">201523443434343434072QU</a> <span class="item__meta__separator">|</span>
26.08 15:48
</div>
</li>
</ol>
</div>
want all the text which is after red bottom line replaced with ... or
fade out.
Other answers already describe how to display an ellipsis.
I shall try to demonstrate how you can do a fadeout (the second part of your question). You can add an ::after pseudo-element to your li, and provide it a gradient background. Provide position: relative to the li and position:absolute to the pseudo-element.
Something like this:
.items li { position: relative; }
.items li::after {
content: '';
display: inline-block; position: absolute;
top: 0; left: 100%; height: 100%; width: 100%;
background: -webkit-linear-gradient(right, #fff, rgba(255,255,255,0.5));
}
Example:
.column {
float: left; width: 252px;
padding-left: 1px; padding-bottom: 34px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
ul, ol { list-style-type: none; }
.items li {
border-bottom: 1px solid red; padding: 7px 16px 4px;
white-space: nowrap;
position: relative;
}
.items li.item--highlighted { background: #f0ce78; }
.items li .item__title {
font-size: 14px; font-weight: normal; font-family: "Roboto", sans-serif;
text-transform: none;
}
.items li .item__meta__separator { display: inline-block; margin: 0 5px; }
.items li .red { color: #ed1b2e; }
.items li .info-bubble.info-bubble-bottom.info-bubble-bottom-left { left: 70px; }
.meta { color: #9D9D9D; font-size: 11px; }
.items li::after {
content: '';
display: inline-block; position: absolute;
top: 0; left: 100%; height: 100%; width: 100%;
background: -webkit-linear-gradient(right, #fff, rgba(255,255,255,0.5));
}
<div id="salesInvoice4Columns" class="column column-4" style="width:px;">
<ol class="items">
<li id="saleInvoiceLink0">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">622790_150510_05101756067567567567565758DI</a> <span class="item__meta__separator">|</span>
27.08 09:16
</div>
</li>
<li id="saleInvoiceLink1">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">201523443434343434072QU</a> <span class="item__meta__separator">|</span>
26.08 15:48
</div>
</li>
</ol>
</div>
But, in order to display the date-time stamp properly, you will have to re-imagine your layout a little bit.
You can try this (using ellipsis)
CSS
.items li {
border-bottom: 1px solid red;
padding: 7px 0px 4px 16px;
}
.meta {
color: #9D9D9D;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
DEMO HERE