I am having some weird problems trying to position the h3 tag over the image .featured-image(Sitting on top of the image). When I try position: absolute; .. If the content in <p> is more or less, the h3 will move from its position. If I try position: relative; theres a big gap from the image and if I tried to margin <p> closer or farther, the position also moves. If I wrap another div around the h3 tag with position relative; and then leave h3 as position: absolute;. It fixes it but that seems such a hack.
HTML:
<section class="featured">
<h1><img src="images/icon-featured.png" width="24px" height="23px" alt="Featured Site Icon"> Featured Site </h1>
<div class="image-wrap">
<a href="#">
<img class="featured-image" src="images/content-images/image.jpg" width="399px" height= "37px" alt="" />
</a>
<h3> Lorem Ipsum </h3>
</div> <!-- image-wrap -->
<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.
</p>
</section><!-- .featured -->
CSS
article h1 img { margin: 0 5px 0 0; }
article .featured { }
article .featured h1 { }
article .featured .image-wrap { margin: 27px 0 0 0; text-align: center; }
article .featured .image-wrap img { border: 1px solid #8e8d8e; -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, .4); -moz-box-shadow: 0 0 14px rgba(0, 0, 0, .4);
-o-box-shadow: 0 0 14px rgba(0, 0, 0, .4); box-shadow: 0 0 14px rgba(0, 0, 0, .4); }
article .featured .image-wrap h3 { background: rgba(23, 23, 23, .5); bottom: 66px; font-size: 23px; padding: 10px; position: relative; left: 190px;
text-align: right; width: 230px; }
article .featured p { margin: 25px auto; padding: 10px; width: 380px; }
Position .image-wrap relatively, but without any left/right/top/bottom properties. Then, position the h3 absolutely and move it to where you want it.
The problem you're encountering is that absolutely positioned elements have to be contained in a non-statically positioned ancestor element, otherwise it defaults to positioning it relative to the html element (that's probably why it was affected by the following paragraph). Relatively positioned elements are still part of the page flow, so the space relatively positioned elements would originally have taken up is preserved. That's the extra space you're seeing.
The w3c has a nice intro to css positioning: http://www.w3schools.com/css/css_positioning.asp, as does this page: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Related
I have a little problem with printing a website.
I need to print on a fixed sticker sheet in A4 format:
https://www.avery-zweckform.com/search?term=L6009&content_group=ALL_CONTENT_GROUPS
To match exactly the stickers on this A4 sheet I need a fixed A4 CSS grid.
When I use a fixed size in centimeters then this is working but when I try to print this page (Chrome & Firefox the same) there is always a small border added from the browser itself.
Example:
After printing I have a padding-right of 3cm instead of my defined 2cm.
On the left side I have 2,5cm and on the top 3cm again.
So it seems it is not possible to create an exacte sheet to print what is really disappointing.
Had anyone an idea or the same problem?
HTML
<page size="A4">
<div class="inner">
<div style="width: 100%; height: 30px; background-color: grey"></div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
</div>
</page>
CSS:
body {
background: rgb(204, 204, 204);
}
page[size="A4"] {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
.inner {
padding: 2cm;
}
#media print {
body {
margin: 0 !important;
}
page[size="A4"] {
margin: 0 !important;
box-shadow: none !important;
}
#page {
size: auto;
margin: 0mm;
}
}
You could try reseting margin and padding for all elementes first and just user your custom values.
I'm not sure if it works in your case, but try it in the beginning of your css:
*{
margin:0;
padding:0;
box-sizing: border-box;
}
I hope it can useful for you.
I have to do a semantic webpage from a pdf. Everything is going fine (not at all), but I have a footnote that doesn't fit in a resposive line-height. I want to put it inside a p tag, which works fine, but I don't know if that is good.
here's the code:
.text {
padding-left: 8.5vw;
padding-right: 8.5vw;
padding-bottom: 10vw;
}
.text-column {
padding-top: 10vw;
column-count: 2;
column-gap: 4vw;
}
.text p {
color: #333;
margin-bottom: 2.7vw;
line-height: 3vw;
text-align: justify;
text-indent: 3vw;
font-size: 2.12vw;
}
.footnote hr {
background-color: #000;
width: 33%;
height: 0.2vw;
margin-top: 4vw;
margin-bottom: 1vw;
border-color: #000;
}
.footnote {
font-size: 1.36vw !important;
text-align: justify !important;
line-height: 1em !important;
}
<article class="text text-column">
...
<small class="footnote">
<hr>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempore nostrum laboriosam laborum sed nulla
quae libero distinctio consequuntur. Ut sint molestiae, placeat voluptatibus vitae repudiandae architecto nemo
et in?
</small>
</article>
Yes. In fact, the MDN page for <small> itself showcases a <small> tag nested inside a <p> tag as its example:
<p>This is the first sentence.
<small>This whole sentence is in small letters.</small>
</p>
<p> is a flow content element, and <small> is a phrasing content element. Any phrasing content can go inside of any flow content. In addition to this, <small> is an inline element, so will not break the flow of the content.
However, keep in mind that <small> sets the size one size smaller than the default text size on the page, so you may need to adjust it accordingly. This can be done by nesting <small> within <small>, as <small> is also a valid parent of <small> itself. Note that there is an equivalent <big>, though this is obsoleted in favour of CSS' font-size.
Yes you can, According to Official document also allow it.
https://www.w3.org/MarkUp/html3/footnotes.html
I'm dealing with images that may or may not have a caption.
I've created a polaroid effect around each image via the following:
<div style="text-align:center">
<img src="daenerys.png" style="border: 10px solid #FAFAFA;border-bottom: 45px solid #FAFAFA;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
</div>
Results look acceptable:
But this can't support captions the way I want it to. I need to write a caption under the image, within the white border of the polaroid effect.
I changed my code to:
<div style="text-align:center;background-color: #ffffff;display: inline-block;padding: 10px;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
<img src="daenerys.png" style="display: block;margin: 0 auto;margin-bottom: 20px;width: 100%;">
<div class="cxl cgy"></div>
</div>
This gives me an image that is stretched:
How do I keep my image resolution and aspect ration intact, while ensuring the text dynamically grows the white space under the image as required? I've taken a look at this SO post for help, but to no avail.
The overall goal is to keep the polaroid look (even for images that have no caption), and to use the white space below the image to display text for images that do have captions.
I found a solution with keeping aspect ration:
<div style="text-align:center;background-color: #ffffff;display: inline-block;padding: 10px;-webkit-box-shadow: 3px 3px 3px #9E9E9E;-moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
<div style="display: inline-table;">
<img src="daenerys.png" style="display: block;margin: 0 auto;margin-bottom: 20px;width: 100%;">
<div class="cxl cgy" style="display: table-caption;width: 100%;caption-side: bottom;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae necessitatibus architecto quis non error placeat illo enim illum quo corrupti molestias id sint recusandae animi obcaecati, laudantium nostrum fugit eaque.
</div>
</div>
</div>
Here is preview link : https://codepen.io/ziruhel/pen/RjwmQg
For creating how you want to create the polariod, there is a new html tag that can have a caption and and image inside one element.
The Structure is this :
-- Figure
---- img
---- figcaption
I have made a jsfiddle keeping in mind your structure and the code also.
You can style the figure tag with your card stylings and also keep the text for caption if you want.
The jsfiddle link: https://jsfiddle.net/vmt5w1u8/
SCSS code:
figure {
text-align: center;
background-color: #ffffff;
display: inline-block;
padding: 10px;
height: 100%;
-webkit-box-shadow: 3px 3px 3px #9e9e9e;
-moz-box-shadow: 3px 3px 3px #9e9e9e;
box-shadow: 3px 3px 3px #9e9e9e;
img {
display: block;
margin: 0 auto;
margin-bottom: 20px;
width: 100%;
height: 100%;
}
figcaption {
text-align: center;
}
}
Figure tag reference link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
The reason you are getting image stretch is because you are not setting a fix/max width for your div, without width specified text will stretch the image as the width gets longer
Try adding:
div{
/*width:300px; use max-width if responsive*/
max-width: 300px; /*maximum width the image will stretch*/
box-sizing: border-box; /*include padding as part of the specified max-width above*/
}
Example:
div {
max-width: 300px;
box-sizing: border-box;
}
<div style="text-align:center;background-color: #ffffff;display: inline-block;padding: 10px;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
<img src="https://dummyimage.com/300x250/4168a3/fff" style="display: block;margin: 0 auto;margin-bottom: 20px;width: 100%;">
<div class="cxl cgy">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim.
</div>
</div>
You don't have to set max-width, just set .image width to width: 100% and height: auto
Fiddle: http://jsfiddle.net/MBLZx/2312
Setting max width to your image might help. Image will be resized to fit the aspect ratio without stretching beyond required width. And also the text content will be wrapped accordingly.
CSS:
.img-wrapper {
max-width: 500px;
padding: 10px;
background: #fff;
text-align: center;
position: relative;
box-sizing: border-box;
}
.image {
width: 100%;
}
.text {
word-wrap: break-word;
}
Here is the Fiddle.
Hope this helps :)
I'm trying to create a title looking like this
I've tried a few things on https://jsfiddle.net/hx4m9kfa/ but display: inline-block; is as wrong as display: block or anything with width: 100%
h1, h2, h3 {
background-color: orange;
margin: 0 0 10px 0;
font-size: 2em;
}
h2 {
display: inline-block;
background-color: green;
}
h3 {
background-color: purple;
}
<h1>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod
</h1>
<h2>
Lorem ipsum dolor sit amet, conset
</h2>
<h2>
etur sadipscing elitr, sed diam nonumy eirmod
</h2>
<h2>
nonumy eirmod
</h2>
<h3>
Lorem ipsum dolor sit amet, conset
</h3>
<h3>
etur sadipscing elitr, sed diam nonumy eirmod
</h3>
<h3>
nonumy eirmod
</h3>
I would prefer to have the entire title in only one tag (and if possible without JavaScript). But every result looking as the desired one will be much appreciated. Does anyone know how to achieve that? Thank you!
div {
text-align:justify
}
h1 {
color:#fff;
background: #888888;
line-height: 1.3em;
display:inline;
-webkit-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
-moz-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
-ms-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
-o-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
}
<div>
<h1>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod lorem ipsum dolor sit amet
</h1>
</div>
So I hate to be the guy who offers a solution that uses JS or a CDN, but here it goes...
Explanation
You're going to be hard-pressed [read: impossible] to do this without extra divs, or in CSS only. This is because when a browser sees you break a h2 up using word wrap, it doesn't see it as seperate lines, it's still just one tag to the browser. Without writing your own JS, there is a free CDN called Lining.JS that appends the class .line onto each line of your paragraph. This allows you to target every single line in your tag.
Solution
To start, this is my HTML
<!-- CDN to Lining.JS -->
<script src="//cdn.jsdelivr.net/lining.js/0.3.2/lining.min.js"></script>
<!-- 'data-lining' is Lining.JS's data reference -->
<h2 data-lining>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod
</h2>
Here is the CSS I used for my example, you may have to tweak the width, but everything else should work out alright.
/* Splits h2 into seperate lines using clip */
h2{
text-overflow: clip;
width: 400px;
white-space: normal;
overflow: hidden;
padding: 5px 0;
color: #444341;
line-height: 1.2;
}
/* Target all '.line' classes that are created via JS */
h2 .line{
background: #00FFCC;
margin:10px;
}
/* Target last line class (change width to what works for your total width */
h2 .line[last]{
display: inline-block;
margin-top: 0;
}
You can check my JS Fiddle Here. Hope this helps you out!
I've added a <span> around your text, which partially achieves what you are after. You can see it here (the h2) https://jsfiddle.net/hx4m9kfa/3/.
h2 {
background: transparent;
display: inline-block;
min-width: 100%;
line-height: 2em;
}
h2 span {
background: green;
}
The span adds the background while the line-height adds the correct spacing between the two lines. I do realize it doesn't add full width to the every line except for the last. But I hope this helps!
If you know the background-color of the page, you can use a few tricks.
First, apply a background-image: repeating-linear-gradient(); on each heading. This will provide the "spacing" in between each line by overlaying the background-color with repeating horizontal lines. You will have to adjust the stops to account for varying line-heights.
Then, to keep the last line of each heading from being full width, you can use a pseudo-element. Set position: relative; on the heading. Absolutely position the :after but only set bottom: 0;. This will keep it in the flow so it will stay at the end of the last line. Set width: 100%; so it will always be wide enough. Adjust its height to account for the line-height of heading. Apply overflow: hidden; to the heading to prevent the pseudo-element from breaking out.
Again, the downside to this is that you need to know the background-color of the page or whatever the headings are in.
h1, h2, h3 {
position: relative;
overflow: hidden;
padding: 0 0.5em;
font-size: 2em;
line-height: 1.5;
background-color: orange;
background-image: repeating-linear-gradient(#FFF 0, #fff 0.2em, transparent 0.2em, transparent 1.5em);
}
h2 {
font-size: 1.5em;
line-height: 1.8;
background-color: green;
background-image: repeating-linear-gradient(#FFF 0, #fff 0.2em, transparent 0.2em, transparent 1.8em);
}
h3 {
font-size: 2.5em;
line-height: 1.3;
background-color: purple;
background-image: repeating-linear-gradient(#FFF 0, #fff 0.2em, transparent 0.2em, transparent 1.3em);
}
h1:after,
h2:after,
h3:after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 1.5em;
margin-left: 0.5em;
background-color: #FFF;
}
h2:after {
height: 1.8em;
}
h3:after {
height: 1.3em;
}
<h1>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod
</h1>
<h2>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod nonumy eirmod
</h2>
<h3>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod nonumy eirmod
</h3>
Pure CSS working solution, but unflexible. Multiple shadows for pseudo element ::after of inner span (you have to add as many shadows as maximum number of lines you are expecting) + overflow: hidden for container.
Unfortunatly, it doesn't work for large texts.
body {
background: repeating-linear-gradient(45deg, cyan 0, cyan 10px, yellow 10px, yellow 20px);
}
h2 {
overflow: hidden;
position: relative;
padding: 0 10px;
line-height: 1.5;
color: #fff;
font-family: arial;
}
h2 span {
padding: 2px 0 2px 0 ;
}
h2 span::after {
content: ".";
position: absolute;
width: 9950px;
margin-left: -9900px;
margin-right: -50px;
bottom: .1em;
z-index: -1;
line-height: 1.3;
color: blue;
background: blue;
box-shadow:
5000px -1.5em 0 blue,
5000px -3em 0 blue,
5000px -4.5em 0 blue,
5000px -6em 0 blue,
5000px -7.5em 0 blue,
5000px -9em 0 blue,
5000px -10.5em 0 blue,
5000px -12em 0 blue,
5000px -13.5em 0 blue;
}
<h2>
<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.</span>
</h2>
This is weird! I'm not sure why it is doing this but the div .content-wrap, or .main-content is wrapping elements that are outside of the div.......
Screenshot of it using firebug.
But .main-content is isn't suppose to be wrapping the 3 columns...
Heres the HTML of both.
<div id="plans-wrap">
<section class="starter">
<img class="icon-1" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
<h2>Starter Plan</h2>
<ul>
<li><span>5GB Disk Space</span></li>
<li><span>Unmetered Bandwidth</span></li>
<li><span>Unlimited Add-on Domains</span></li>
<li><span>Unlimited Subdomains</span></li>
<li><span>Unlimited Email/FTP Accounts</span></li>
<li><span>Unlimited MySQL Databases</span></li>
<li><span>Shell access upon request</span></li>
</ul>
<img src="images/starterplan.png" width="192" height="51" alt="Starter Plan">
</section><!-- //.starter -->
<section class="inter">
<img class="icon-2" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
<h2>Intermediate Plan</h2>
<ul>
<li><span>10GB Disk Space</span></li>
<li><span>Unmetered Bandwidth</span></li>
<li><span>Unlimited Add-on Domains</span></li>
<li><span>Unlimited Subdomains</span></li>
<li><span>Unlimited Email/FTP Accounts</span></li>
<li><span>Unlimited MySQL Databases</span></li>
<li><span>Shell access upon request</span></li>
</ul>
<img src="images/interplan.png" width="192" height="51" alt="Intermeidate Plan">
</section><!-- //.intermediate -->
<section class="advance">
<img class="icon-3" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
<h2>Advance Plan</h2>
<ul>
<li><span>Unmetered Disk Space</span></li>
<li><span>Unmetered Bandwidth</span></li>
<li><span>Unlimited Add-on Domains</span></li>
<li><span>Unlimited Subdomains</span></li>
<li><span>Unlimited Email/FTP Accounts</span></li>
<li><span>Unlimited MySQL Databases</span></li>
<li><span>Shell access upon request</span></li>
</ul>
<img src="images/advplan.png" width="192" height="51" alt="Starter Plan">
</section><!-- //.advance -->
</div><!-- //#plans-wrap -->
<div class="content-wrap">
<aside class="badges">
<img src="images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers">
</aside><!-- //.badges -->
<div class="main-content">
<!-- All Content For Each Page Goes Here -->
<!-- index/home -->
<img src="images/hosting-header.png" width="458" height="179" alt="Hosting Header">
<article>
<h1> Welcome to Elektrik Host! </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales nisi eu sem dapibus imperdiet.
Etiam venenatis elit nec sapien commodo dapibus. Donec vel enim nec augue fringilla pharetra. Pellentesque
sed augue est. Nullam et erat sed leo vestibulum consequat sit amet at ligula.
</p>
</article><!-- //article -->
</div><!-- //.main-content -->
</div><!-- //#content-wrap -->
and the CSS:
/* -- PRICE PLANS -- */
#plans-wrap { margin: 0 0 0 5px; width: 100%; }
#plans-wrap section { background: #1b1b1b; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; float: left; margin: 19px 10px 0 0; }
#plans-wrap section img.icon-1, #plans-wrap section img.icon-2, #plans-wrap section img.icon-3 { float: right; }
#plans-wrap section h2 { background: url(../images/plan-header-bg.png) repeat-x; display: block; border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; font-size: 15px; padding: 18px 18px 32px 6px; width: 188px; }
#plans-wrap section h2:before { content: "ยป "; }
#plans-wrap ul { padding: 0px 23px 23px 23px ; }
#plans-wrap ul li { color: #b60000; font-size: 12px; margin: 9px 0 0 0; }
#plans-wrap ul li span { color: #b6b6b6; }
/* -- CONTENT WRAP -- */
#content-wrap { margin: 12px auto; width: auto; }
#content-wrap .badges { float: right;}
How can I fix this?
You need to 'clear floats', so plans-wrap element will actually enclose three float elements inside it. Otherwise, floats are taken out of normal flow, plans-wrap has zero height and next div (main-content) overlaps with floats. This should help:
#plans-wrap {
overflow:hidden;
zoom:1;
}
More info
Your #plans-wrap doesn't have any specified height. Try adding overflow:auto to its CSS.
You can also clear floats with the clearfix method.
You need to add a class of "clearfix" to your .main-content and then the following to your CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
This method basically uses the pseudo-class to append the parent container to floated elements with a space character that will cause the parent to contain all the floated elements as well.
*NOTE: Also, be sure you have everything closed appropriately. It *