I'm creating an HTML file in xcode and trying to display its contents in the browser. I made an empty file and wrote this in:
<html>
<head>
<title>HTML is Structure Only (After)</title>
</head>
<body>
<h1 style="color: green; font-size: 60px; text-align: center;">HTML is Structure Only</h1>
<p style="margin: 0 100px 0 100px; font-size: 1.5em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae temporibus esse suscipit nisi ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, doloribus eos perspiciatis.</p>
<footer>
<hr>
<p style="text-align: center;"
onclick="alert('EMAILING US IS USELESS');">
Tech Support: yeah.right#server-is-down.com
</p>
</footer>
</body>
</html>
I cd'd into the directory where the file is and ran
browser-sync start --server --files. Instead of displaying the file contents in safari it just showed me a cannot GET / error page. Help???
I'm on macOS 10.15. The HTML text is not mine, I took it from my lecturer's github repo.
Try adding a <!DOCTYPE html> to the beginning of the document, before the <html>
Related
I have a big "img" background image that is put inside the "Figure" tag as the main background of the site. I set the max-width to 100% and the height to 100% too.
When I start scrolling from the top of my page to the bottom.
As soon as I reach the beginning/top of an image, the scroll stops, then I need to scroll again to reach the bottom of the page. Same as when I scroll from bottom to up. This problem is happening on the touchpad scroll and the keyboard up and down arrows.
I noticed that whether scrolling from top to bottom or bottom to up of the image, the vertical scroll bar doesn't move; it starts moving when I have to scroll again up or down of the site.
However, the following steps are done.
The scrolling worked smoothly when I reduced the "Height" of the img exactly below "86%" in the CSS file. However, "86% - 100%" the problem starts there.
I tried to use the "img" tag, then I replaced it with the "Background-Image: url()" property. Same problem with step one.
I tried to reduce (compress) the image size. Same problem with step one.
I used the "Background-size" with the different values (contain, cover, auto). Same problem with step one.
I used "Background-Attachment: Scroll;" the Same problem as step one.
Updated: I added "P" with a lot of lorem text under the image so that I can scroll enough. The scrolling problem was solved even though the height of the image is "Height: 100%", whether it's "img tag" or "Background-Image: url()"
Thus, the main problem is with the height, but I need the image to be "100%" not below "86%".
Any suggestions, please?
<body>
--Hidden Content--
<!------------------
----MAIN CONTENT----
-------------------->
<main>
<section class="upperpart">
<header class="main_header">
<div class="getoff">
<h2>get rm10 off</h2>
<p>your first order
<span>code:shemya</span>
</p>
</div>
<div class="share">
<h2>share & earn</h2>
<p>up to 15% off</p>
</div>
<div>
<h2>cash on delivery</h2>
</div>
</header>
<figure class="main_figure">
<img src="https://www.lux-review.com/wp-
content/uploads/2022/05/Kids-Fashion.jpg" alt=""
height="85%">
<figcaption></figcaption>
<img src="" alt="">
<div class="figure_ads">
<p>mega year end sale now on</p>
<p>up to <span>80%</span>off</p>
<button>buy now</button>
</div>
</figure>
<section class="middelpart">
--Hidden Content--
</section>
<section class="bottompart">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Reprehenderit fugit earum accusantium non
amet
.</p>
</section>
</main>
main {
width: 100vw;
min-height: 100vh;
margin-top: 15.2rem;
}
main .upperpart {
background-color: antiquewhite;
height: 80rem;
width: 90vw;
margin: 0 auto;
/* visibility: hidden; */
}
.upperpart .main_figure {
width: 90vw;
/* max-height: 60rem; */
position: relative;
}
.upperpart .main_figure img {
max-width: 100%;
height: 100%;
}
main .bottompart p {
font-size: 2rem;
margin-top: 5rem;
}
I tried to reproduce your problem, I don't really see where is the problem.
The only thing I've found is the section upperpart is not close before the main closure.
main {
width: 100vw;
min-height: 100vh;
margin-top: 15.2rem;
}
main .upperpart {
background-color: antiquewhite;
height: 80rem;
width: 90vw;
margin: 0 auto;
/* visibility: hidden; */
}
.upperpart .main_figure {
width: 90vw;
/* max-height: 60rem; */
position: relative;
}
.upperpart .main_figure img {
max-width: 100%;
height: 100%;
}
main .bottompart p {
font-size: 2rem;
margin-top: 5rem;
}
<main>
<section class="upperpart">
<header class="main_header">
<div class="getoff">
<h2>get rm10 off</h2>
<p>your first order
<span>code:shemya</span>
</p>
</div>
<div class="share">
<h2>share & earn</h2>
<p>up to 15% off</p>
</div>
<div>
<h2>cash on delivery</h2>
</div>
</header>
<figure class="main_figure">
<img src="https://www.lux-review.com/wp-content/uploads/2022/05/Kids-Fashion.jpg" alt="" height="85%">
<figcaption></figcaption>
<img src="" alt="">
<div class="figure_ads">
<p>mega year end sale now on</p>
<p>up to <span>80%</span>off</p>
<button>buy now</button>
</div>
</figure>
<section class="middelpart">
--Hidden Content--
</section>
<section class="bottompart">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit fugit earum accusantium non amet.</p>
</section>
</section>
</main>
I don't have scrolling trouble on this snippet. Do you have?
I have an assessment from my professor and i need to create a website the same way my professor made it. i am almost done but the last thing that i couldnt figure out how to do is the boxed review from my professor i tried it but it was not as i hoped to be . everything is working fine only the boxed review doesnt work and i dont know how to fix it. Can someone help me please?
my code:
<!--
Assignment 12 (HTML Semantics ();
-->
<!-- Make changes to the code below -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Assignment-12</title>
<style>
.boxed {
width: 500px;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="boxed">
<aside><p></p></aside>
<h2>Reviews</h2>
<article>
<h3>Would not recommend</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto,
accusantium!
</p>
<p><small>1/5 stars</small></p>
</article>
<article>
<h3>These cats are crazy</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod,
aspernatur!
</p>
<p><small>2/5</small></p>
</article>
<article>
<h3>Awful service</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, neque!
</p>
<p><small>1/5</small></p>
</article>
</div>
<header>
<nav>
<ul>
<li>
Home
<ul>
<li>Food</li>
<li>Toys</li>
</ul>
</li>
<li>Dogs</li>
<li>
Cats
<ul>
<li>Food</li>
<li>Toys</li>
<li>Adopt</li>
</ul>
</li>
<li>Birds</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to the petstore</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis
laborum ipsa sint reprehenderit amet expedita architecto itaque
consequuntur quas laudantium?
</p>
</main>
<hr />
<nav>
<ul>
<li>Home</li>
<li>Cats</li>
<li>Adopt</li>
</ul>
</nav>
<h2>Cat Adoption</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error beatae at
tenetur quo, non ratione nulla! Voluptates repudiandae ab hic.
</p>
<img src="/images/cats.png" alt="Images of Cats" />
<p>
Doordeweeks voor 22:00 besteld, morgen in huis. Weekend besteld, maandag
in huis.
</p>
</body>
</html>
I made a few changes on the style.
For better uses, you can look here
<style>
.boxed {
width: 500px;
height: 100px;
border: 1px solid #000;
z-index: 100;
background-color: white;
position: absolute;
top: 0%;
right: 40%;
}
</style>
Also, the div you give boxes class does not include all the elements and it provides a better view if you fix it.
Please check and run this example.
img {
width: 10px;
}
pre {
overflow: initial;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
max-width: 300px;
border: 1px solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<pre>Lorem ipsum, dolor sit amet consectetur ad<img src="https://randomm.cdn.bcebos.com/edit%20(1).svg"></img></pre>
<pre>Lorem ipsum, dolor sit amet consectetu<img src="https://randomm.cdn.bcebos.com/edit%20(1).svg"></img></pre>
<pre>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod voluptate nesciunt velit? Officiis doloribus fugit et harum nobis assumenda<img src="https://randomm.cdn.bcebos.com/edit%20(1).svg"></img></pre>
</body>
</html>
I need to let the icon follow the text inside the pre tag, but at some situation the text length will be exact the max-width of the pre tag, which leads to make the icon present at the next line.This has a very bad user experience. Please tell me how to design this edit-icon. Thank you.
You can't do it. It's a staic image.
Solution: You can use Icon from https://fontawesome.com/icons
Steps:
Add a font awesome CDN.
Stats using icons
You can easily design icons using CSS
Example:
<i class="fas fa-edit"></i>
I have added a margin to the .quotes-text selector however it moves the whole quotes section down not just the text within the quotes section. Any idea what might be causing this? Code below.
.quotes {
height: 344px;
background: #bf4b54;
}
.quote-text {
font-size: 2rem;
max-width: 860px;
}
<div class="quotes">
<div class="quote-text">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque soluta necessitatibus a autem obcaecati officiis reiciendis. - Head Chef</span>
</div>
<img src="" alt="" class="chef">
</div>
If you just want the text to move down (but not the section) use padding instead of margin.
I am no guru at CSS so please excuse what might be a basic question. I have an annoying problem which I can't seem to fix:
Here is my text without CSS line-height:
I would like to move the text up closer to the heading tags so I did this:
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
The Result
The result is perfect and exactly what I want, but... the problem comes when I resize the browser.
Problem Resizing the browser
My Question
Why is the text condensing on browser resize? What am I doing wrong? Should I not use the line-height property? Any workaround for this?
The line-height property is used to control how much vertical space is allocated for each line. In general, it is used to adjust how much space there is between lines within an element.
line-height: 1 means that lines are exactly big enough to fit the tallest letters and lowest descenders, with no space between. A line-height of more than 1 means there is some extra space between lines, and less than 1 will result in lines overlapping.
line-height: 0 means that a line of text has no vertical space allocated to it, so all lines will overlap each other in one line. That is what you are seeing here: the text is wrapping onto a second line, which is rendered over the top of the first line.
What you are trying to do is adjust the space between elements, not the space between lines in a single element. For this, the recommended approach is to adjust either margin or padding. Consider adjusting the margins of your elements until you have your desired vertical rhythm.
For a really detailed explanation of how all three properties work, see this CSS Tricks article on the box model.
Example
body { font-family: sans-serif; }
.cramped h2 {
margin: 0.4em 0 0.2em;
}
.cramped p {
font-style: italic;
margin: 0;
}
<section class="cramped">
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscin.</p>
</section>
Add this to your CSS:
h2 {
margin-bottom: -10px;
}
h2 tags have margins by default
Here is the JSFiddle demo
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:23px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:23px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
try this it works fine on my browser
try this
p{margin-top:-10px; font-style:italic;}
#media screen and (max-width:768px){
h2{font-size:18px;}
p{font-size:14px}
}
Line height usage is for setting the distance (height) of each line. 0 value gives no distance so you have this problem.
You should let the line-height in the default value and reset default h2 and p element margin.
line-height
On block level elements, the line-height property specifies the
minimum height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that
is used to calculate line box height. On replaced inline elements such
as buttons or other input element, line-height has no effect. [1]
h2, p {
margin: 0;
}
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
Reference: MDN - line-height - w3.org - line-height