Sorry if this question was already asked but I looked at all answers and none helped solving my issue.
I'm new to CSS and I'm trying to move the sidebar to the side but nothing worked.
Could anyone help please?
I tried changing the float:left and float:right but it didn't help. I also tried changing or deleting margins and paddings but in vain.
Here is my code:
HTML:
/*
Theme Name: HTML5;
Date: Feb 2018;
Description: Learn Basic HTML;
Version: 0.1;
Author: MWQ;
Author URL: www.example.com;
*/
body{
background-image: url('../img/bodybg.png');
color: #000305;
font-size: 90%;
font-family: 'Arial', 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
}
a{
text-decoration: none;
}
a:link, a:visited{color:#e74c3c;}
a:hover, a:active{color:#f58233;}
.body{
margin: 10px auto;
width: 70%;
clear: both;
}
/* ------- Main Header --------*/
.mainheader img{
width: 100%
}
.mainheader nav{
background-color: #e74c3c;
height: 40px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.mainheader nav ul{
text-align: center;
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li{
display: inline;
}
.mainheader a:link, .mainheader a:visited{
color: white;
padding: 10px 40px;
display: inline-block;
}
.mainheader a:hover, .mainheader a:active{
color: white;
background-color: #f58233;
text-shadow: 1px 1px #000;
}
/* ------- Main Content --------*/
.mainContent{
width: 70%;
float: left;
}
.top-content{
background-color: #fff;
padding: 3%;
margin-top: 3%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.post-info{
font-size: 90%;
color: #999;
font-style: italic;
margin-top: -20px;
}
.post-content{
display: inline;
}
.theSidebar{
width: 22%;
margin: 2% 0 0 2%;
float: left;
padding: 2%;
background-color: #fff;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
<!DOCTYPE html>
<html>
<!----------HEAD--------->
<head>
<title>HTML5 CSS3, & Responsive!</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<!----------Body--------->
<body class="body">
<header class="mainheader">
<img src="img/header.jpg"/>
<nav><ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul></nav>
</header>
<div class="mainContent"></div>
<section class="top-content">
<header></header>
<h2>My Intro Text</h2>
<footer>
<p class="post-info">Written By: MWQ</p>
</footer>
<article>
<p>
Eram admodum occaecat. Esse
laboris expetendis, possumus nam amet ab ipsum concursionibus commodo velit
doctrina ad sunt ne nostrud an aliqua, tamen admodum quo voluptatibus, consequat
amet ne proident firmissimum te se quo anim nescius id quorum appellat an
laborum.
</p>
</article>
</section>
<section class="top-content">
<header></header>
<h2>Video Tutorial</h2>
<footer>
<p class="post-info">Written By: MWQ</p>
</footer>
<article>
<p>
Eram admodum occaecat. Esse
laboris expetendis, possumus nam amet ab ipsum concursionibus commodo velit
doctrina ad sunt ne nostrud an aliqua, tamen admodum quo voluptatibus, consequat
amet ne proident firmissimum te se quo anim nescius id quorum appellat an
laborum.
</p>
</article>
</section>
<!----------Side Bar--------->
<aside>
<article class="theSidebar">
<h1> First Side Bar </h1>
<p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
</p>
</article>
</aside>
<aside>
<article class="theSidebar">
<h1> Second Side Bar </h1>
<p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
</p>
</article>
</aside>
<aside>
<article class="theSidebar">
<h1> Third Side Bar </h1>
<p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
</p>
</article>
</aside>
<!----------Footer--------->
<footer><p>Copy Rights</p></footer>
</body>
</html>
Hre goes the code:
/*
Theme Name: HTML5;
Date: Feb 2018;
Description: Learn Basic HTML;
Version: 0.1;
Author: MWQ;
Author URL: www.example.com;
*/
body{
background-image: url('../img/bodybg.png');
color: #000305;
font-size: 90%;
font-family: 'Arial', 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
}
a{
text-decoration: none;
}
a:link, a:visited{color:#e74c3c;}
a:hover, a:active{color:#f58233;}
.body{
margin: 10px auto;
width: 70%;
clear: both;
}
/* ------- Main Header --------*/
.mainheader img{
width: 100%
}
.mainheader nav{
background-color: #e74c3c;
height: 40px;
border-radius: 5px;
z-index: 999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.mainheader nav ul{
text-align: center;
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li{
display: inline;
}
.mainheader a:link, .mainheader a:visited{
color: white;
padding: 10px 40px;
display: inline-block;
}
.mainheader a:hover, .mainheader a:active{
color: white;
background-color: #f58233;
text-shadow: 1px 1px #000;
}
/* ------- Main Content --------*/
.mainContent{
width: 70%;
position: absolute;
right: 1px;
}
.top-content{
background-color: #fff;
padding: 3%;
margin-top: 3%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.post-info{
font-size: 90%;
color: #999;
font-style: italic;
margin-top: -20px;
}
.post-content{
display: inline;
}
.theSidebar{
width: 22%;
margin: 2% 0 0 2%;
float: left;
padding: 2%;
background-color: #fff;
border-radius: 5px;
position: absolute;
top: 20px;
left: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
<!DOCTYPE html>
<html>
<!----------HEAD--------->
<head>
<title>HTML5 CSS3, & Responsive!</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<!----------Body--------->
<body class="body">
<header class="mainheader">
<img src="img/header.jpg"/>
<nav><ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul></nav>
</header>
<div class="mainContent">
<section class="top-content">
<header></header>
<h2>My Intro Text</h2>
<footer>
<p class="post-info">Written By: MWQ</p>
</footer>
<article>
<p>
Eram admodum occaecat. Esse
laboris expetendis, possumus nam amet ab ipsum concursionibus commodo velit
doctrina ad sunt ne nostrud an aliqua, tamen admodum quo voluptatibus, consequat
amet ne proident firmissimum te se quo anim nescius id quorum appellat an
laborum.
</p>
</article>
</section>
<section class="top-content">
<header></header>
<h2>Video Tutorial</h2>
<footer>
<p class="post-info">Written By: MWQ</p>
</footer>
<article>
<p>
Eram admodum occaecat. Esse
laboris expetendis, possumus nam amet ab ipsum concursionibus commodo velit
doctrina ad sunt ne nostrud an aliqua, tamen admodum quo voluptatibus, consequat
amet ne proident firmissimum te se quo anim nescius id quorum appellat an
laborum.
</p>
</article>
</section>
</div>
<!----------Side Bar--------->
<aside class="theSidebar">
<aside>
<article>
<h1> First Side Bar </h1>
<p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
</p>
</article>
</aside>
<aside>
<article >
<h1> Second Side Bar </h1>
<p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
</p>
</article>
</aside>
<aside>
<article >
<h1> Third Side Bar </h1>
<p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
</p>
</article>
</aside>
</aside>
<!----------Footer--------->
<footer><p>Copy Rights</p></footer>
</body>
</html>
I have made changes to the CSS file, adding the position attribute.
If you want to read more about this attribute of CSS, visit https://www.w3schools.com/cssref/pr_class_position.asp.
Hope it helps...
Related
I have some text displaying in an ::after psuedo element that I would like to be scrollable. It works fine until I change the background of that element from:
background-color: rgb(0,0,0);
to:
background-color: rgba(0,0,0,0.5);
Is there a way to allow scrolling with a transparent background?
Here is the HTML with working and broken example:
<div class="wrapper">
<div class="column working">
<p>Working: text is scrolling properly.</p><br>
<div class="container">
<img src="https://source.unsplash.com/random/400x200" />
</div>
</div>
<div class="column broken">
<p>Broken: text is not scrolling.</p><br>
<div class="container">
<img src="https://source.unsplash.com/random/400x200" />
</div>
</div>
</div>
And the CSS to go with it:
* {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
}
.column {
padding: 1rem;
background: yellowgreen;
}
.container {
display: inline-block;
position: relative;
font-family: monaco;
}
.container::after {
content: "Dis iusto aliquid sollicitudin iaculis modi fugit, non irure quisquam molestiae arius laboris, eiusmod? Pulvinar eleifend volutpat, quae nunc magnam? Hac, nam? Dignissimos esse diamlorem dolore accusamus dolores, ipsa facilis ullam illo, fames ex? Maecenas tellus. Aspernatur eum malesuada, assumenda, hac, ultricies? Aliquet in, harum fugiat! Volutpat recusandae! Fames saepe fames corrupti.";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: inherit;
height: inherit;
padding: 1rem;
z-index: 10;
overflow-x: scroll;
cursor: pointer;
font-family: monaco;
line-height: 1.5em;
color: aqua;
}
.column.working .container::after {
background-color: rgb(0,0,0);
}
.column.broken .container::after {
background-color: rgba(0,0,0,0.5);
}
img {
display: block;
}
p {
font-family: monaco;
}
And here is the above code, in a CodePen
Thanks.
As suggested, this appears to be a browser bug that has since been fixed. Marking as resolved.
Hi I want to push 2 elements to each corner like what float actually do
so I give the parent display flex and justify-content, space between but it seems like theres margin left before the first element and margin right after the last element.
in this example the header is parent and h1 is the first element and nav is the last element.
I want h1 stick to the left and nav stick to the right with display flex.
HTML
<header>
<h1>Thermos</h1>
<nav>
<a href='#'>Add URL</a>
<a href='#'>Sign Up</a>
<a href='#'>Sign In</a>
</nav>
</header>
<main>
<section id='main'>
<div id='intro'>
<h1>Welcome</h1>
<p>Thermos is a simple social bookmarking site. Or actually, you can use it the way you want.</p>
</div>
<article>
<h2>Article section h2</h2>
<p>Qui ne magna delenit splendide, diam ullum regione vis no, an modo numquam eum. Ne ullum clita libris vel. In tantas graeci molestiae eam, ei sed aeterno aperiri fabulas. Quo eu quod dicta, nec sint expetenda eu. Aeque nobis verterem ea cum, sed no hinc salutandi consetetur. Volumus assueverit in qui, commodo nominavi ad pro.</p>
</article>
<article>
<h2>Article section h2</h2>
<p>Qui ne magna delenit splendide, diam ullum regione vis no, an modo numquam eum. Ne ullum clita libris vel. In tantas graeci molestiae eam, ei sed aeterno aperiri fabulas. Quo eu quod dicta, nec sint expetenda eu. Aeque nobis verterem ea cum, sed no hinc salutandi consetetur. Volumus assueverit in qui, commodo nominavi ad pro.</p>
</article>
</section>
<aside>
<h3>Aside</h3>
<p>Dico tantas definiebas eum ad, nostrum reprimique duo no. Ut pri causae ponderum, ea per erat facilisis. Ad clita utroque vel, in stet animal meliore per. An audire ponderum disputando usu, eu nam ipsum clita menandri, cu tempor maiestatis persequeris quo.</p>
</aside>
</main>
CSS
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,
samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
*,*:before,*:after{box-sizing:inherit}
*:before,*:after{content:''}
html{box-sizing:border-box}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul,ul li{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;color:inherit}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
html, body {
font-family: Lato;
font-size: 16px;
}
header {
background-color: #FB7524;
color: #fff;
display: flex;
justify-content: space-between;
border-bottom: 20px solid #D74411;
margin-bottom: 30px;
}
header > * {
}
header > h1 {
font-size: 2rem;
font-weight: 700;
align-self: center;
}
nav {
font-size: 0;
}
nav > a {
font-size: 1.1rem;
display: inline-block;
width: 100px;
padding: 40px 0;
text-align: center;
margin-left: 10px;
background-color: #D74411;
}
nav > a:first-child {
margin-right: 0;
}
main {
display: flex;
justify-content: space-between;
}
section#main {
width: 60%;
margin-left: 40px;
}
section#main #intro {
margin-bottom: 30px;
}
section#main #intro h1 {
font-size: 2rem;
font-weight: 400;
margin-bottom: 10px;
}
section#main #intro p {
font-size: 1.1rem;
}
section#main article {
margin-top: 20px;
}
section#main article h2 {
font-size: 1.3rem;
font-weight: 400;
margin-bottom: 10px;
}
section#main article p {
font-size: 1.1rem;
text-align: justify;
}
aside {
transition: 0.3s all ease-out, margin 1ms,
bottom 0.2s;
width: 30%;
min-width: 300px;
max-height: 300px;
margin: 0 40px 0 20px;
background-color: #FB7524;
border-top: 20px solid #D74411;
padding: 20px;
}
aside h3 {
font-size: 1.3rem;
font-weight: 400;
color: #fff;
margin-bottom: 20px;
}
aside p {
font-size: 1.1rem;
color: #fff;
text-align: justify;
}
#media (max-width: 750px) {
aside {
height: 200px;
width: auto;
margin: 0;
position: fixed;
bottom: -100px;
opacity: 0.3;
}
aside:hover {
bottom: 0;
opacity: 1;
}
}
Here is a JSFiddle.
You're giving your element an empty content :before & :after which is messing with your styles. Is there a particular reason why you're applying them to every element?
Remove the :before & :after and it should work as expected.
CSS
*:before,*:after{content:''} /* Remove this */
JSFiddle
Why is this happening?
Because with the :before & :after inside of your flex container, it sees 4 elements instead of the 2 you want the styles to apply to. I created an example of what is happening:
Example: Extra in-flow elements (your issue)
You need to set the header to flex: 1. This should remove the unwanted margin and lets all the flexible items be the same length, regardles of its content:
header > h1 {
flex: 1;
}
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
I've got a simple page with a header element consisting of a logo image within an anchor tag nested in a h1 element and a nav element with 4 links. Below that I've got two elements each holding an image and text. I'm wondering why my header breaks apart when I resize the browser window, and why the text is not wrap around their respect images and landing to the right of them. I've also noticed that when I hover passed the logo there's a slight area where it is still a link where it shouldn't be. I'd really appreciate any assistance here, as I'm looking to understand what's happening under the hood with the css.
http://s27.postimg.org/7eyff3ivn/header_break1.png
http://s28.postimg.org/fwg9lohjh/header_break2.png
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Acme</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="layout.css">
</head>
<body>
<header>
<h1><img src="images/logo.png" alt="Respond"></h1>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
<section class="first">
<h2>Image 1</h2>
<figure>
<img src="images/featured.png" alt="Image 1" />
</figure>
<p>Lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam<br>
melius nam. Agam inani vel ei, reque putent oportere qui ad. Cum<br>
autem veniam in, soluta everti volumus no ius. Utinam tritani est ex,<br>
mei decore putent vidisse ne, an justo nulla eirmod duo. Te liber<br>
libris adolescens eos, id regione gloriatur neglegentur pri. Mei sanctus deleniti repudiandae<br>
at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>
</section>
<section class="second">
<h2>Image 2</h2>
<figure>
<img src="images/featured.png" alt="Image 2" />
</figure>
<p>Lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam
melius nam. Agam inani vel ei, reque putent oportere qui ad. Cum<br>
autem veniam in, soluta everti volumus no ius. Utinam tritani est ex,<br>
mei decore putent vidisse ne, an justo nulla eirmod duo. Te liber<br>
libris adolescens eos, id regione gloriatur neglegentur pri. Mei sanctus deleniti repudiandae<br>
at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>
</section>
<footer>
<p id="copyright">© 2014 ACME</p>
</footer>
</body>
</html>
CSS
/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 16px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Structure */
body {
font-family: Helvetica Neue, Helvetica, Arial;
background: white;
color: #555;
}
header {
width: 100%;
overflow: auto;
border-bottom: 1px solid black;
}
/* Logo H1 */
header h1 {
float: left;
}
header h1 a {
display: block;
text-decoration: none;
margin-top: .5em;
margin-left: 5.5em;
width: 25%;
}
/* Navigation*/
nav {
width: 75%;
overflow: auto;
}
ul {
float: right;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 20em;
}
ul li {
float: left;
}
ul li a {
display: block;
text-decoration: none;
margin: 5px;
margin-top: 1.5em;
padding: 2px;
font-size: 1.2em;
}
ul li a:hover {
border-bottom: 1px solid #6FC36E;
}
/* Content*/
section {
text-align: center;
margin: 0.625em auto;
overflow: auto;
}
section h2 {
margin-top: 1em;
margin-bottom: 1em;
}
section img {
max-width: 100%;
}
.first {
width: 45%;
float: left;
margin-left: 2%;
}
.first figure {
width: 75%;
}
.second {
width: 45%;
float: left;
margin-left: 2%;
}
.second figure {
width: 75%;
}
/* Footer*/
footer {
clear: both;
text-align: center;
}
This answer only addresses the problems you are having with your navigation.
I would remove the following properties from ul in your css.
float: right;
margin-right: 20em;
You don't need to float the menu to the right and the margin decreases the available space for your menu. The 75% width you set in your CSS should do enough to constrain your menu size.
The only wrapping of your nav that will occur is when the width of nav is less than the width of the elements in your menu. If you want to prevent this you can enlarge the width of the nav or take a different approach.
Hope this helps.
I am having trouble aligning 3 divs next to each other. I have never had this this issue before, but now I am making a template where the background has a 100% width (never ends) for each element of the webpage.
The element I want to align 3 divs horizontally is not working for me. I can get two divs next to each other, but when I try to align the 3rd div, the 3rd div will align, but the entire element gets messed up somehow.
Your help is greatly appreciated!
Here is the full code. I took out other website elements to simplify the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Website</title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
strong {
font-weight:bold;color:#0289ce;
}
em {
font-style:oblique;
}
p {
margin:15px 0;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
h1 {font-size:180%;}
h2 {font-size:150%;}
h3 {font-size:125%;}
h4 {font-size:100%;}
h5 {font-size:90%;}
h6 {font-size:80%;}
a:link {color:#0289ce;}
a:hover {color:#f64274;}
/*End RESET - Begin Full Width CSS*/
body {
background:#FFFFBF;
color:#2D1F16;
font:13px Helvetica, Arial, sans-serif
}
.wrap {
position:relative;
margin:0 auto;
width:900px;
background-color: #EC3515;
}
.wrapHeader {
position:relative;
margin:0 auto;
width:900px;
background-color: #9FF;
}
.wrapSlider {
position:relative;
width:900px;
margin-right: auto;
margin-left: auto;
top: 67px;
right: 32px;
}
.wrapPackages {
position:relative;
width:900px;
margin-right: auto;
margin-left: auto;
}
.multipleDivs {
height: auto;
width: 100%;
background-color: #CFF;
clear: both;
position: relative;
}
.wrapInfo {
position:relative;
width:900px;
margin-right: auto;
margin-left: auto;
background-color: #A6FFFF;
height: auto;
clear: both;
}
#infoContent1 {
background-color: #666;
height: auto;
width: 300px;
float: left;
position: relative;
}
#infoContent2 {
background-color: #999;
height: auto;
width: 300px;
float: left;
position: relative;
}
#infoContent3 {
background-color: #CCC;
height: auto;
width: 300px;
}
.wrapContent {
position:relative;
width:100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header, #footer {
width:100%;
float:left;
padding:15px 0;
}
#header {
background-color: #FFF;
}
#header .logo {
float:left;
width:400px;
}
#header p {
float:right;
width:400px;
margin:0;
}
#content {
padding:15px 0;
clear:both;
background-color: #F9C;
}
.imageSlider {
height: 570px;
width: 100%;
color: #FFF;
background-repeat: no-repeat;
background-position: center;
background-image: url(../images/bgSlider2.jpg);
}
.package {
height: auto;
width: 100%;
background-color: #CCC;
background-repeat: no-repeat;
background-position: center center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#footer {
background:#EC3515;
text-align:center;
}
#footer a {
color:#fff;
}
</style>
</head>
<body>
<div id="header">
<div class="wrapHeader">
<div class="logo">
<img src="images/#.png" width="250" height="62" />
</div>
<p>Sample text</p>
</div>
</div>
<div class="wrapContent">
<div id="content">
<div class="multipleDivs">
<div class="wrapInfo">
<div id="infoContent1">
<p>Div 1</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>
</div>
<div id="infoContent2">
<p>Div 2</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>
</div>
<div id="infoContent3">
<p>Div 3</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>
</div>
</div>
</div>
<div class="package">
<div class="wrapPackages">
<img src="images/sampleImage.jpg" width="900" height="475" border="0" /></div>
</div>
<p> </p>
<p> </p>
</div>
</div>
<div id="footer">
<div class="wrap">
<p>© 2013 - Sample Text</p>
</div>
</div>
</body>
</html>
You need float left only once.
http://jsfiddle.net/NvbnY/2/
div {
float:left;
}
You had 3 different floats that are causing your issue:
Remove all of this:
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
Alternately give all of the divs you want to be effected the same class name and add the css to that element:
<div class="floaters">1</div>
<div class="floaters">2</div>
<div class="floaters">3</div>
and
.floaters {
float:left;
}
In action - http://jsbin.com/iqegob/1/edit
You could also add float:left; to #infoContent3
give all of the divs you want to be effected the same class name and add the css to that element:
<div class="floaters">1</div> <div class="floaters">2</div> <div
class="floaters">3</div>
and
.floaters {
float:left;
}
Add overflow:hidden; in #infoContent3
Output --