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.
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 am learning CSS screen layout, and I want to use flex to change the display order of an element. I
have found some tutorials on the Internet and still don't know how to write it, so I can simply change the second , change the display order from left to right?
ul{
display: flex;
flex-direction:column;
width: 300px;
}
<ul>
<li>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores doloribus dolor ipsum odit beatae voluptates culpa. Doloremque veniam labore pariatur!</p>
</li>
<li>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores doloribus dolor ipsum odit beatae voluptates culpa. Doloremque veniam labore pariatur!</p>
</li>
<li>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores doloribus dolor ipsum odit beatae voluptates culpa. Doloremque veniam labore pariatur!</p>
</li>
</ul>
if you looking for something like that
.flexed {
width: 400px;
height: 400px;
border: 1px solid #c3c3c3;
display: flex;
align-items: flex-start;
justify-content: center;
height: 50px;
}
.flexed div {
width: 50px;
height: 50px;
}
.reversed{
flex-direction: row-reverse;
}
<div style="text-align:center"> <h4>Without riversed row</h4> </div>
<div class="flexed" >
<div style="background-color:red;">1</div>
<div style="background-color:pink;">2</div>
<div style="background-color:orange;">3</div>
<div style="background-color:lightblue;">4</div>
</div>
<div style="text-align:center"> <h4>With riversed row</h4> </div>
<div class="flexed reversed" >
<div style="background-color:red;">1</div>
<div style="background-color:pink;">2</div>
<div style="background-color:orange;">3</div>
<div style="background-color:lightblue;">4</div>
</div>
<div style="text-align:center"> <h4>With 2 only riversed row</h4> </div>
<div class="flexed " >
<div style="background-color:red;">1</div>
<div class="flexed reversed">
<div style="background-color:pink;">2</div>
<div style="background-color:orange;">3</div>
</div>
<div style="background-color:lightblue;">4</div>
</div>
The actual letters right to left is easily accomplished with the <bdo> element. Just wrap the text in a <bdo> and add the dir attribute and the value of "rtl".
<bdo dir='rtl'>Text to reverse</bdo>
The text is changed from Latin to English to clearly demonstrate the reversed text.
ul{
display: flex;
flex-direction:column;
width: 300px;
}
<ul>
<li>
<p>Did you know that more frozen bananas are sold right here on this boardwalk than anywhere in the OC? You burn down the storage unit? Oh, most definitely. What a fun, sexy time for you.</p>
</li>
<li>
<p><bdo dir='rtl'>Did you know that more frozen bananas are sold right here on this boardwalk than anywhere in the OC? You burn down the storage unit? Oh, most definitely. What a fun, sexy time for you.</bdo></p>
</li>
<li>
<p>Did you know that more frozen bananas are sold right here on this boardwalk than anywhere in the OC? You burn down the storage unit? Oh, most definitely. What a fun, sexy time for you.</p>
</li>
</ul>
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>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I wanted to replicate the effects as shown here -
https://allods.my.com/en/news (not this one, sorry)
http://bit.do/b2692
https://www.google.co.in/sheets/about
Ignoring all the animations, i wanted to know how can we implement multiple different backgrounds as one scrolls down the page.
PS. I am a complete beginner, i prefer to have an HTML/CSS solution only.
You should try to add position fixed property to Your background , it should help.
body,
html,
main {
/* important */
height: 100%;
}
.fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.fixed-bg.bg-1 {
background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");
}
.fixed-bg.bg-2 {
background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
}
.fixed-bg.bg-3 {
background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
min-height: 100%;
}
<main>
<div class="fixed-bg bg-1">
<h1><!-- title goes here--></h1>
</div>
<div class="scrolling-bg cd-color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-2">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-3">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-4">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
</main>
Div after div approach :
body,
html,
main {
/* important */
height: 100%;
padding:0;
margin:0;
}
.container{
position:absolute;
}
.fixed-bg {
min-height: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.fixed-bg.bg-1 {
background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");
}
.fixed-bg.bg-2 {
background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
}
.fixed-bg.bg-3 {
background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
min-height: 100%;
}
<main>
<div class="fixed-bg bg-1">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-2">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-3">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-4">
<div class="container"><!-- content goes here--></div>
</div>
</main>
So you are looking for a parallax effect, there is a number of plugins for that. I recently used http://pixelcog.github.io/parallax.js/ which worked out well for me.
It's very simple to use it. You said you want an HTML / css solution for this, but i don't think you can do it without javascript. If someone else knows the alternative without javascript i'd like to see it also. But even if you don't know much about javascript you can use this plugin, just follow the instructions on the link i provided.
The plugin requires jquery to work!
I would like to wrap covered the banner but was under tope.Unfortunately, tampering with zindex and positions did not help.I have no idea how to do it correctly.I hope I explained well what I mean
*{margin:0;padding: 0;border: 0;}
body{text-align: center;}
/*HEADER*/
.content{max-width:980px;margin: auto;height:100%; }
header{width:100%;height:100px;position:fixed;z-index: 5;}
#logo{font-size: 1.1em;font-family: 'Cabin', sans-serif;color:darkgray;float:left;text-transform: uppercase;font-weight: 700;display: inline}
#logo>img{margin-right:10px;margin-top:30px;}
nav{float:right;margin-top:50px;}
nav>ul>li{display:inline;list-style: none; }
nav>ul>li>a{margin-left:10px;text-decoration: none;font-size: 1.0em;font-family: 'Cabin', sans-serif;color:darkgray;text-transform: uppercase;}
.baner{width:100%;height:530px;background: url('baner.png') repeat-x;position:fixed;top:115px;}
.wrap{max-width:100%;margin: auto;top:800px;background: red; position:relative;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Cabin:700,400' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<div class="content">
<div id="logo"><img src="logo.png" alt="">Treehouse</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div class="baner">
<h1></h1>
<h2></h2>
<section class="button"></section>
</div>
<div class="wrap">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, et, repellat. Dicta sunt, eligendi, iusto et eveniet eum enim accusamus dignissimos tempora. Nihil modi, ex veritatis, maxime sequi unde possimus?</p>
</div>
<footer>
</footer>
</body>
</html>
Can you help me?
header must always be visible , while the banner is hiding under another divem in this case the " wrapper"
enter image description here