Using this HTML, I have a div with a pink border, without the border there is no whitespace at the top and bottom, with the border there is, and it doesn't look right.
<head>
<style>
blockquote {
background-color:#AAA;
border-color:#FAA;
border-width:5px;
border-style:solid;
-webkit-border-radius:10px;
padding:0;
}
</style>
</head>
<body><blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a magna vel ante lobortis blandit. Cras justo nulla, commodo eu mollis eu, ultrices sed lorem. Nullam varius, metus eu venenatis luctus, est elit ultrices est, ut facilisis nunc nunc ac nunc. Morbi non neque vitae orci eleifend volutpat sed nec justo. Morbi a elit enim, ut tempus mi. Vestibulum a quam et diam consequat porttitor non eget urna. Curabitur tincidunt adipiscing ante non dignissim. Sed laoreet ultrices massa. Aenean hendrerit blandit sagittis.</p></blockquote></body>
If you use the TryItEditor from w3schools: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
You will see how there is a gap between the pink border and text at the top and bottom, the padding is all set to 0, so how do I get rid of this gap?
That's the padding or margin on the p element
blockquote p {
margin: 0;
padding: 0;
}
Related
This question already has answers here:
Underline several lines of text + underline to be full width + responsive
(1 answer)
Need to display multiline text with underlining lines of equal length
(5 answers)
Closed 10 months ago.
I'm making hexo blog theme. I'am trying to make line note like style. I want to make css on each line has underline(not like U tag)
want
But if I use border-bottom: 1px solid grey
real
You may also use a gradient to draw a grid below your text.
It has to match the line-height
Here an example with CSS var() to ease the tuning.
p, textarea {
--lineH: 1.6em;
line-height: var(--lineH);
padding:var(--lineH);
padding-block:0;/*reset to set first line right at top */
background:repeating-linear-gradient(to bottom, transparent 0 1.4em, gray 1.4em calc(1.4em + 2px), transparent calc(1.4em + 2px) 1.6em) 50% 0 / calc(100% - var(--lineH) * 2 ) 100% no-repeat ;
}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<textarea placeholder="Type your texts here"></textarea>
Added a textarea to the example to show another possible use.
ressources if you need them
https://developer.mozilla.org/en-US/docs/web/css/gradient/repeating-linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/var
https://developer.mozilla.org/en-US/docs/Web/CSS/background
https://css-tricks.com/a-complete-guide-to-calc-in-css/
you can use more gradients to mimic a full note sheet https://codepen.io/gc-nomade/pen/bGLGNWB
You can use text-decoration: underline to get that effect (although the text-underline-offset style rule which is used to space the line from thee normal position is NOT supported in IE at all and some other browsers are a bit spotty with it). The only other way to do it is to split the content into spans and apply the border bottom or ::after pseudo-element to each span.
p {
font-size: 14px;
font-weight: 400;
line-height: 32px;
text-decoration: underline;
text-underline-offset: 4px;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
The p tag is a block element. Means if you assign a border the border would be assigned for the block. If you change p tag to an inline element then the border would be displayed like you want.
Update
with inside underlined words
p {
display: inline;
border-bottom: 1px solid grey;
}
p span {
text-decoration: underline;
color: red;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing</span> elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
p {
display: inline;
border-bottom: 1px solid grey;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
try this :
text-decoration: underline;
text-underline-offset:6px;
Have you tried using the text-decoration-line property.
text-decoration-line: underline;
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-decoration-line
I'm trying to get a pure CSS parallax effect working without having a fixed background height. This has been described in a few places, but they have the common constraint that the background layer must have a fixed, known height.
I would like to get the effect working without having a fixed, known height for the background due to some dynamic content.
My minimal example is here: https://jsfiddle.net/yf8oyben/
#container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
perspective: 1px;
overflow-x: hidden;
overflow-y: scroll;
}
.background {
transform: translateZ(-1px) scale(2);
width: 100%;
background: lightgreen;
height: 250px; /* Assumes bg height */
position: absolute; /* Assumes bg height */
top: calc(125px - 50vh); /* Assumes bg height */
}
.foreground {
background: rgba(0, 0, 255, 0.5);
width: 100%;
position: absolute; /* Assumes bg height */
top: 250px; /* Assumes bg height */
}
<body>
<div id='container'>
<div id="group1">
<div class="background">
<div style="height: 10rem"></div>
<center>Banner</center>
<div style="height: 10rem"></div>
</div>
<div class="foreground">
<div style="height: 10rem"></div>
<center>Content</center>
<div style="height: 100rem"></div>
</div>
</div>
</div>
</body>
It works now but assumes that the background is 250px, as annotated in the CSS. Is it possible to remove this and still retain the effect as it currently is?
You can achieve this parallax effect without knowing the height of the banner. you just need to drop the absolute positioning and adapt the perspective-origin and transform-orign properties They need to be positioned one on top of the other.
Here is a demo: CSS only parallax effect
*{margin:0;padding:0;}
#wrap{
position:fixed;
width:100%; height:100%;
overflow-x:hidden;
overflow-y:scroll;
perspective: 1px;
perspective-origin:0 0;
}
.bg{
background:teal;
transform-origin:0 0;
transform: translateZ(-1px) scale(2);
}
.bg img{
display:block;
width:100%; height:auto;
}
.cont{
position:relative;
background:rgba(0,0,0,0.8);
color:#fff;
padding:5%;
}
.cont *{
max-width:900px;
margin:5% auto;
}
<div id="wrap">
<div class="bg">
<img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</div>
<div class="cont">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et purus porta, porta dolor vel, pulvinar turpis. Suspendisse aliquam placerat turpis, sed ullamcorper nisl vestibulum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod tempor elit a pulvinar. Integer vehicula purus ipsum, id ultricies risus placerat sit amet. Cras vel ante egestas diam egestas sagittis. Mauris facilisis, dolor pulvinar tempus vestibulum, elit lectus gravida sem, sed volutpat dui dolor vel purus. Praesent nec ligula ac mi faucibus hendrerit vitae sed felis. Nullam vehicula magna vitae ultrices dapibus. Pellentesque facilisis dui a diam scelerisque pharetra. Vestibulum dapibus imperdiet molestie. Fusce fringilla facilisis metus, in iaculis lectus fermentum eget. Ut tortor quam, imperdiet sit amet nisi in, fringilla porta sapien. Aenean a enim vestibulum, bibendum dolor sed, consequat mi.</p>
<p>Fusce faucibus nulla id iaculis sagittis. Duis ac arcu a ex elementum feugiat. Proin ut quam quis tortor vulputate semper a id nunc. Morbi rhoncus ultricies ultricies. Praesent semper id massa sed euismod. Fusce sagittis felis nec libero malesuada, in luctus enim aliquam. Aliquam sagittis, orci eget blandit vestibulum, mi dui blandit mauris, et tincidunt tellus nisi sagittis lacus. Sed dignissim, sapien vitae cursus imperdiet, augue massa tempor ex, non finibus risus metus ac enim. Mauris blandit eros nisi.</p>
<p>Sed bibendum ante ac metus hendrerit, nec commodo tortor venenatis. Pellentesque porta eros non eros cursus, vitae commodo sapien facilisis. Praesent sit amet volutpat lacus. Nullam sed quam ac dolor blandit lacinia. Ut euismod turpis sit amet libero pulvinar, non aliquet lacus bibendum. Nullam libero massa, facilisis sed neque id, porta fringilla eros. Curabitur vestibulum nisi nec tempor tempor. Sed fermentum mauris diam, eu volutpat magna tempus et. Ut semper dapibus purus eget ullamcorper. Aenean varius rutrum purus id congue. Mauris sit amet turpis ornare, pharetra ex et, porta lorem. In hac habitasse platea dictumst.</p>
<p>Nulla sed pellentesque nibh, eu consectetur neque. Curabitur eu risus at felis sagittis blandit. Nunc non massa non massa mattis semper. Curabitur dapibus tortor velit, id tincidunt ligula rutrum sed. Quisque feugiat consequat molestie. Curabitur lobortis neque ac porta imperdiet. Sed malesuada nibh sit amet magna commodo, sed bibendum turpis vestibulum. Suspendisse vel rutrum dolor, sed bibendum turpis. Morbi condimentum fermentum urna id venenatis.</p>
</div>
</div>
I have a scrollable div and I want to put a message above it. I'm doing this by offsetting the content in the scrollable div by 30px and adding a position:absolute div that's 30px tall to the top. However, I'm running into the problem where this div covers the scroll bar of the div below it. How can I put a message at the top of a scrollable div without it covering the scroll bar?
Here is a quick example of my code. Note the scroll bar is covered by the red div:
http://jsfiddle.net/S4mXy/1
The following style of css helps you. you should have to add z-index to the sticky
#sticky
{
width:200px;
height:30px;
background-color:rgba(255, 0, 0, 0.39);
position:absolute;
z-index:-1;
}
You need to have both DIVs either absolute or relative. I moved the sticy div outside the scrollable div and removed the absolute positioning and it fixed it http://jsfiddle.net/S4mXy/3/
HTML:
<div id="sticky"></div>
<div id="scrollable">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at felis dolor. Cras et sagittis leo. Aenean facilisis rutrum odio, in volutpat ante pulvinar nec. Fusce pulvinar magna in consequat consequat. Vivamus hendrerit adipiscing magna quis malesuada. Sed metus odio, gravida quis purus in, lobortis facilisis ligula. Donec ac tristique nibh, ullamcorper feugiat diam. Integer rhoncus vehicula ornare. Aenean ut posuere lectus. Mauris in enim posuere, volutpat erat at, blandit sapien. Cras quis adipiscing quam. Donec convallis elementum est, vitae placerat ante scelerisque ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at felis dolor. Cras et sagittis leo. Aenean facilisis rutrum odio, in volutpat ante pulvinar nec. Fusce pulvinar magna in consequat consequat. Vivamus hendrerit adipiscing magna quis malesuada. Sed metus odio, gravida quis purus in, lobortis facilisis ligula. Donec ac tristique nibh, ullamcorper feugiat diam. Integer rhoncus vehicula ornare. Aenean ut posuere lectus. Mauris in enim posuere, volutpat erat at, blandit sapien. Cras quis adipiscing quam. Donec convallis elementum est, vitae placerat ante scelerisque ut.
</p>
</div>
CSS #1:
#scrollable
{
width:200px;
height:400px;
overflow-y:scroll;
}
#scrollable p
{
margin-top:30px;
}
#sticky
{
width:200px;
height:30px;
background-color:rgba(255, 0, 0, 0.39);
}
Or, make them both absolute http://jsfiddle.net/S4mXy/4/ :
CSS #2:
#scrollable
{
position:absolute;
top:35px;
width:200px;
height:400px;
overflow-y:scroll;
}
#scrollable p
{
margin-top:30px;
}
#sticky
{
position:absolute;
width:200px;
height:30px;
background-color:rgba(255, 0, 0, 0.39);
}
How to apply alternate background color to multi column layout based on column count.
In the above link, if u see all the column background is blue, i want to give alternate background color of white & blue
HTML
<div class="container" id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam commodo vestibulum. Duis in risus auctor, posuere elit a, interdum nunc. Vivamus nisl velit, vehicula ut ornare ac, mollis sit amet lectus. Praesent volutpat erat sem, id accumsan arcu tempor et. Quisque elementum leo sed elit volutpat, cursus dapibus lorem bibendum. Vivamus porta, elit sed facilisis tincidunt, enim diam suscipit metus, sit amet tincidunt ipsum augue id erat. Duis eget mi enim. Donec volutpat metus ut lacus iaculis cursus et eleifend orci. Vestibulum sollicitudin nibh sit amet laoreet dignissim. Pellentesque vulputate, leo eu commodo imperdiet, felis ante faucibus mi, vitae bibendum velit ipsum id arcu. Praesent a rhoncus quam, vel viverra elit. Nullam tellus velit, porta eu interdum quis, porttitor sed elit. Pellentesque egestas nisi odio, eget placerat nibh rhoncus id.</p>
<p>Vestibulum ante risus, placerat at egestas sit amet, interdum rhoncus leo. Donec libero nunc, aliquam aliquet massa non, fringilla consectetur est. Proin sodales vehicula ante pretium mollis. Proin laoreet vel dui a elementum. Pellentesque et ante odio. Cras commodo nisi sit amet mi pharetra, quis rhoncus tortor sodales. Etiam rhoncus orci nibh, id tincidunt nisi semper non. Quisque a imperdiet purus. Maecenas malesuada quis libero eu viverra. Proin eu diam accumsan, rutrum turpis eget, fermentum diam. Integer sem enim, hendrerit rhoncus suscipit sit amet, rutrum id lectus.</p>
<p>Suspendisse potenti. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus leo tortor, vestibulum vel odio sed, tincidunt dictum urna. Ut ullamcorper lobortis lacus, at tristique massa posuere vel. Proin aliquam quam tellus, elementum suscipit mauris elementum nec. Proin aliquet quam ligula, sed vulputate nisl sodales sed. Sed erat turpis, iaculis ac nulla eu, dapibus adipiscing elit. Fusce adipiscing nunc mi, ac tempus nunc interdum gravida.</p>
</div>
CSS
.container {
background-color: blue
color:#000;
margin:20px auto;
padding:20px;
position:relative;
width:800px;
border-radius:5px;
box-shadow:1px 1px 5px #111111;
/* column specific styling */
column-count: 3;
column-gap: 3em;
column-rule: 1px dashed black;
}
This is a SERIOUS HACK, but as long as you have a fixed width container, it should do what you need.
I don't have time to fiddle with the widths, but if you spend the time, you "could" theoretically use a gradient with hard edges to achieve the desired result. It will also help if you use the dashed column-rule to hide/obfuscate the blurred line between containers.
http://jsfiddle.net/r8G2X/2/
.container {
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0.67, #324FA2),
color-stop(0.66, #51C26F),
color-stop(0.33, #7091EA),
color-stop(0.34, #51C26F)
);
color:#000;
margin:20px auto;
padding:20px;
position:relative;
width:800px;
box-shadow:1px 1px 5px #111111;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-gap: 3em;
-moz-column-gap: 3em;
-webkit-column-gap: 3em;
column-rule: 1px dashed black;
-moz-column-rule: 1px dashed black;
-webkit-column-rule: 1px dashed black;
}
EDIT: So, you have many divs / columns and you want every other one to be a different colour?
Assign the element a class and use similar to what I put below. You then just give every other element the class that dictates the colour
<div id="white">some stuff</div>
<div id="black">some other stuff</div>
CSS:
#white{
background:white;
}
#black{
background:black;
}
Is that what you mean? ONe div is one colour and another is something different or sis you mean something else?
This may not work in your particular case but would you consider applying a background image behind the container? For a three column layout, the background image would consist of three bands of colour (primary colour, alternate colour, primary colour), etc. For a different number of columns, you would use a different background image. Then just use a class on the containing to specify which should be loaded. To keep the image size down and accommodate any height of column, use a vertically repeating background image.
This assumes that you know the width of each column of course, so for a responsive website might not work. But, on paper at least, I think that would work…
I'm building a 3 row liquid layout. I have a fixed height header and a footer. I also have a minimum width for the wrapper (for these 3 rows).
The problem is, I can't make the middle one (#content) resize vertically. If I make position:absolute then I lose control over scrolling. I thought I could do it using the top,bottom,margin and padding while setting the height to 100% but I couldn't.
Here's the code that I'm using to test it and here's the fiddle link: http://jsfiddle.net/inhan/kUZgY/ You will see that the lighter gray background won't expand when window is resized.
I'm willing to use CSS only and not use HTML5 features. What am I missing? Thanks for any input.
CSS
body {
margin:0;
padding:0;
border:0;
height:100%;
max-height:100%;
}
* html body { /*IE6 hack*/
padding:30px 0;
}
* html #content { /*IE6 hack*/
height:100%;
width:100%;
}
#wrapper {
width:100%;
min-width:800px;
min-height:100%;
position:absolute;
}
#header, #footer {
position:absolute;
left:0;
width:100%;
height:30px;
overflow:hidden;
background-color:gray;
color:white;
}
#header {
top:0;
}
#footer {
bottom:0;
}
#content {
margin:31px 0;
overflow:hidden;
width:100%;
background:rgba(0,0,0,.2);
}
HTML
<body>
<div id="wrapper">
<div id="header">This is header</div>
<div id="footer">This is footer</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.<br/><br/>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Etiam vel nibh. Nulla facilisi. Mauris pharetra. Donec augue. Fusce ultrices, neque id dignissim ultrices, tellus mauris dictum elit, vel lacinia enim metus eu nunc.
</div>
</div>
</body>
Extra Info
I'm actually not really interested in setting a minimum width for the whole page but some middle content will need that. So if I can, I might wanna make the whole structure respect when there's min-width property in the content that is loaded.
This should be what you're after http://jsfiddle.net/kUZgY/6/
You were just missing html {height:100%;}
I also changed the #header and #footer to position:fixed