I have this odd problem in using margin-bottom in a class for responsive design. For example
HTML
<div class="space-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo sollicitudin molestie. In lacus purus, posuere non lacus eu, pharetra suscipit arcu.</p>
</div>
CSS
.space-bottom{margin-bottom: 10px}
The class "space-bottom" with a margin bottom of 10px will not work in mobile device. Even if i insert it in a Media Query which is weird. But when i change the "class" into "ID"
HTML
<div id="space-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo sollicitudin molestie. In lacus purus, posuere non lacus eu, pharetra suscipit arcu.</p>
</div>
CSS
#id space-bottom{margin-bottom: 10px}
It seems to work. I don't even need to insert the attribute inside a Media Query
There is no issue with your CSS in the first example; what you may be noticing is that the margins for the <p> element and the <div> are collapsing, based on the browser's default margin for <p>.
See Mozilla Developer Network's page on collapsing margins for more information on this feature.
Also, the CSS in your second example is incorrect; that should be selecting a <space-bottom> element with id id. Why it works, or seems to work, is a mystery to me.
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 3 years ago.
I am trying to draw some rich text in a border; here is an excerpt:
<!DOCTYPE html>
<html>
<body>
<div id="140280868923376" class="Container" data-parent-widget="140280868799320" style="margin:30px;padding:10px;border-width:2px;border-style:solid;border-color:blue;border-radius:20px;width:100%;height:100%;position:static;order:-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<div style="color:blue;font-size:30px">Ut ut blandit erat. Suspendisse laoreet mattis condimentum.</div><br>
Quisque ullamcorper diam a tortor tempus, in scelerisque mauris facilisis.<br>
<div style="color:red;font-weight:bolder">Aenean rhoncus mattis dolor non efficitur.</div>
</div>
</body>
</html>
This seems to draw outside right border:
... while I would like to get something like:
Note: second image has been rendered using width:90%; which, of course, is not correct because right margin/padding is dependent on window size, while it should be a fixed number of pixels from right.
What is the "Right Way" to get result I need?
Simply get completely rid of the width and height settings for your outer container <div>. This will make the border's size depending on the size of the content inside.
<div id="140280868923376" class="Container" data-parent-widget="140280868799320" style="margin:30px;padding:10px;border-width:2px;border-style:solid;border-color:blue;border-radius:20px;position:static;order:-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<div style="color:blue;font-size:30px">Ut ut blandit erat. Suspendisse laoreet mattis condimentum.</div><br>
Quisque ullamcorper diam a tortor tempus, in scelerisque mauris facilisis.<br>
<div style="color:red;font-weight:bolder">Aenean rhoncus mattis dolor non efficitur.</div>
</div>
I have a case, where I have a div and inside the div, I need to get the first element, whatever that is (eg. p, div, a, h2, h3), and I want to add before the statement to that element. Is that possible to write that in SASS? I don't want to use js.
See my HTML bellow :
<div id="q1">
<h3>
<a href="#c5ac">
Curabitur quis lobortis elit, et porttitor ligula.
</a>
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit euismod ipsum, id pellentesque lorem viverra faucibus. Donec ornare laoreet purus ut pulvinar.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit euismod ipsum, id pellentesque lorem viverra faucibus. Donec ornare laoreet purus ut pulvinar.
</p>
</div>
Or maybe there is a simpler way to achieve something like that? Any tips?
I have a div and inside the div, I need to get the first element, whatever that is (eg. p, div, a, h2, h3),
You need:
#q1 > :first-child
to select the first child that is a direct descendant of your parent div.
Assuming that this ""I want to add before the statement to that element" " refers to a psuedo element...
#q1 > :first-child:before
In SASS
#q1 {
& > :first-child:before {
/* styles here */
}
}
If you need to add content before the first-child of an div, you can do:
#q1:first-child::before {
content: "Hello World";
font-size: 22px;
}
I am working on a puzzle given in below link
Semantics
It has 3 questions:
Update the website's HTML to make use of semantic elements so that:
The classless outer div element is replaced with a more appropriate element.
The divs with the image and caption classes are replaced with self-contained content elements.
The divs with the lorem-ipsum and description classes are replaced with elements, so that by default only the contents of the description element are shown. When the contents of the description element are clicked, the visibility of the rest of the lorem-ipsum element is toggled.
I tried adding class to outer div as <div class="header"> and <div class="container">. Adding a Div section to contain the image and caption and also other ways to solve the puzzle, but none of them are working, the test cases are not successful.
Can you please tell me what is the right approach for this puzzle.
Take a look at:
https://www.w3schools.com/html/html5_new_elements.asp
for example:
use <main> instant of the <div> over all elements
use <figure> instant of the <div> for the image
use <figcaption> instant of the <div> for the image caption
....
I used following semantic elements and it worked.
use <main> instead of <div> over all elements
use <figure> instead of <div> for the image
use <figcaption> instead of <div> for the image caption
use <details> instead of <div> for lorem-ipsum class
use <summary> instead of <div> for description class
The correct response is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Semantics</title>
</head>
<body>
<section>
<h1>Lorem Ipsum</h1>
<figure class="image">
<img src="https://www.testdome.com/files/resources/12362/5d766d82-359a-42e3-b8e7-36fc20fa8395.png" alt="Lorem Ipsum">
<figcaption class="caption">Lorem Ipsum</figcaption >
</figure >
<details class="lorem-ipsum">
<summary class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur vitae hendrerit mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris lacinia scelerisque nibh nec gravida.
Duis malesuada nec nibh sit amet pulvinar.
Phasellus congue porttitor arcu, ut suscipit nibh aliquam vel.
Nunc arcu lectus, egestas ut sem ac, euismod porttitor eros.
Phasellus tincidunt consequat pharetra. Maecenas sodales purus at nulla finibus dapibus.
Nullam varius at nisl vel euismod. Fusce aliquet ligula non tempor fermentum.
Nam fermentum posuere mauris, quis aliquam nibh dictum sed.</p>
</details>
</section>
</body>
</html>
While Madhukar's answer correctly provided the elements that TestDome is looking for to achieve a 100% score, it should be noted that the action of 'details' and 'summary' (toggling visibility of the 'p' element) does not work cross-browser (https://caniuse.com/#search=details) without the use of polyfils. These tests should be treated with caution - as the old saying goes 'there is more than one way to skin a cat'.
I'm building a website, and have floated an image to the right of a div with some text to the left, which I have done many times before. However for some reason, the image is not floating completely over to the right in FF, but is in Chrome and IE/Edge. It's probably something really obvious, but any insight?
Firefox
Chrome/IE
HTML
<div class="wrapper">
<img src="http://www.chriswickham.co.uk/gohard/img/workouts/hammer_curl.png" height="85%" style="float:right;padding-left:40px"/>
<h1>Hammer Curl</h1>
<h2>Arms</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim ut mauris in vehicula. Suspendisse sodales nec quam in convallis. In quis ante eros. Pellentesque id lacus et massa tempor hendrerit.</p>
<div style="clear:both"></div>
</div>
CSS
.wrapper {
margin: 0px auto;
width: 1000px;
padding: 20px 0px;
}
You should group your text and title elements together, and provide them a width.
From the snippet you supplied, it looks like both screenshots are actually obeying the rules you've supplied - both are floating the image to the right of your text.
However, there's no specification of how far over it should be -- just how far from the text (40px padding-left) and how large the ENTIRE item should be ("wrapper" # 1000px);
Try this:
<div class="wrapper">
<img src="http://www.chriswickham.co.uk/gohard/img/workouts/hammer_curl.png" height="85%" style="float:right;padding-left:40px"/>
<div class="content">
<h1>Hammer Curl</h1>
<h2>Arms</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim ut mauris in vehicula. Suspendisse sodales nec quam in convallis. In quis ante eros. Pellentesque id lacus et massa tempor hendrerit.</p>
</div>
<div style="clear:both"></div>
</div>
CSS
.content {
width: 700px // or whatever you want to set it to
}
By wrapping the non-image elements together, and specifying a width for them specifically, you should be able to keep the experience the same across most browsers.
EDIT: Fixed some formatting.
I'm creating a webpage that produces formatted text, which is then copy&pasted into Microsoft Word 2010. Everything works fine, except I have to support hanging indent. The method I found to produce hanging indent using CSS with margin-left: 1cm; text-indent: -1cm;. This works fine on the page, but doesn't work when copied over to word, as the margin-left part is lost.
Thus, the beginning lines of all paragraphs are shifted left, instead of all others being shifted right.
Example (put into a HTML file, then copy from Firefox to Word):
<div style="margin-left: 1cm; text-indent: -1cm;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum eu nunc ut nunc dictum molestie.
Ut et porttitor leo, at tincidunt neque.
Integer vulputate sed odio nec aliquam.</div>
Edit: Fixed typo
Self-answer, as I figured it out after I'd already written the question.
The key is to use a p tag instead of a div. Then it works, for whatever reason. If you want to test it yourself, check out the demo I've written up.
<p style="margin-left: 1cm; text-indent: -1cm;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum eu nunc ut nunc dictum molestie.
Ut et porttitor leo, at tincidunt neque.
Integer vulputate sed odio nec aliquam.</p>