My thing is not working i can't figure out any errors too.As far as i know i tried to separate those mountains and cloud on different level which seems not to be working rather they're sitting beside on their parent element
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="images/icon2.ico">
<title>Farhan Sadiq</title>
</head>
<body class="body">
<div class="top-container">
<img class: "top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>Farhan Sadiq</h1>
<p><span class="underline">WebDevloper</span> and <span class="underline">GameDevloper</span></p>
<img class: "bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
.body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.top-container {
background-color: #CEE5D0;
}
.middle-container {
background-color: pink;
width: 200px;
height: 200px;
}
.bottom-container {
background-color: yellow;
width: 200px;
height: 200px;
}
.underline {
text-decoration: underline;
}
.bottom-cloud {
position: absolute;
}
you have a typo in the section, the property class uses = instead of : , then what does the output you expect mean, how do you separate it?
There is a typo class in the tag. You have to change the class in this img tag class: "top-cloud" so it looks like this class="top-cloud".
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
Why there is a space between two <hr> tags?
When I make the width of <hr> tags, it didn't work. I made it 49%, but there is still a space between the two <hr> tag. How do I remove the space from the <hr> tags?
Here is the HTML and CSS code:
*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{
display: inline-block;width: 49%;
background-color: #f34601;height: 2px;border: 0;
}
#right
{
display: inline-block;width: 49%;
background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="nightmare.css">
</head>
<body>
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr id="left">
<hr id="right">
</body>
</html>
You can use single hr with gradient background instead.
* {
margin: 0;
padding: 0;
}
body {
background-color: #181818;
color: white;
}
a {
text-decoration: none;
}
h1 {
text-align: center;
color: #3ea6ff;
}
.home {
font-size: 3em;
background-color: #202020;
}
#night {
color: #f34601;
}
#mare {
color: #3ea6ff;
}
hr {
display: inline-block;
background: linear-gradient(to right, #f34601 50%, #3ea6ff 50%);
height: 2px;
width: 100%;
border: 0;
}
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr>
check the code. This is really a better answer (imo) occam's razor
*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{
display: inline-block;width: 49%;
background-color: #f34601;height: 2px;border: 0;
}
#right
{
display: inline-block;width: 49%;
background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="nightmare.css">
</head>
<body>
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr id="left"><hr id="right">
<h1> OR YOU CAN DO THIS</h1>
<hr id="left"><!--
--><hr id="right">
</body>
</html>
Float :
Using float:left; on both of the hr's seem to work.
Flex :
I don't recommend doing this though. What I'd do is wrap the 2 hr's into a div and add display: flex; on it. And in the children I'd add flex-grow:1;
If i'm not mistaking it should grow the 2 hr's to take all the space in the div evenly. It will also work better with the rest of the page rather than using float which can sometimes mess everything up (from my own experience).
<hr id="left">
<br>
<hr id="right">
You can put a br between the hr
a br means a break.
Check this link to see more
https://www.w3schools.com/tags/tag_br.asp
I've built a basic image slider using HTML, CSS, and JS (Jquery). There are 5 images in total and users can switch between them using arrows, everything works fine so far but I want the right arrow to disappear if it reaches the last image and that's where I get stuck. The problem is that the right arrow disappears right after I reach the second image. Any idea on how to fix that? Thanks in advance!
IMG of the slider
IMG of my problem (the right arrow disappears immediately when I reach the second image, that's supposed to happen only with the last image.)
Here is the code
$(document).ready(function() {
$('.next').on('click',function(event) {
var images = $('.slider-inner').find('img');
var currentImg = $('.active')
var nextImg = currentImg.next();
var lastImg = images.last();
var rightArrow = $('.next');
images.not(':first').hide();
if (nextImg.length) {
currentImg.removeClass('active');
nextImg.addClass('active');
nextImg.fadeIn();
}
if (lastImg.length) {
rightArrow.hide();
}
event.preventDefault();
});
$('.prev').on('click',function() {
var currentImg = $('.active')
var prevImg = currentImg.prev();
if (prevImg.length) {
currentImg.removeClass('active');
prevImg.addClass('active');
}
});
});
*,*::before,*::after {box-sizing: border-box;}
body {
background-image: url("../images/bg.png");
background-size: 100%;
font-size: 100%;
font-family: "Roboto",sans-serif;
color: white;
}
.container {
max-width: 1250px;
margin: 0 auto;
overflow: auto;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #fff;
text-decoration: none;
}
.slider-inner {
margin: 0 auto;
max-width: 1200px;
max-height: 675px;
position: relative;
overflow: hidden;
float: left;
padding: 0.1875em;
border: black solid 7px;
}
.slider-inner img {
display: none;
}
.slider-inner img.active {
display: inline-block;
}
.prev, .next {
margin-top: 18.75em;
float: left;
cursor: pointer;
}
.prev {
z-index: 100;
margin-right: -2.8125em;
position: relative;
}
.next {
margin-left: -2.8125em;
z-index: 100;
position: relative;
}
.nadpis {
font-weight: 400;
text-align: center;
}
.podnadpis {
text-align: center;
font-weight: 100;
font-size: 3em;
margin-top: 2em;
}
.img-slider {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="nadpis">Take zaujimave veci, ktore sa daju spravit s JS a JQuery</h1>
<h2 class="podnadpis">Image Slider</h2>
<div class="slider-outer">
<img src="img-slider/arrow-left.png" alt="left arrow" class="prev">
<div class="slider-inner">
<img src="img-slider/john-jpg.jpg" class="active" alt="A game character witha quote saying Dont you kids watch horror movies?, you never, ever, split up.">
<img src="img-slider/butterflies-jpg.jpg" alt="A game character looking at an enthogy">
<img src="img-slider/andrew-jpg.jpg" alt="Three characters, one from the future, one from the present and one from the past">
<img src="img-slider/taylor-jpg.jpg" alt="Three characters, one from the future, one from the present and one from the past"">
<img src="img-slider/vince-.jpg.jpg" alt="A bar with a guy sitting there">
<img src="img-slider/conrad.jpg" alt="Conrad">
</div>
<img src="img-slider/arrow-right.png" alt="next arrow" class="next">
</div>
</div>
<script src="javascript/jquery.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
if (lastImg.hasClass("active")) {
rightArrow.hide();
}
i am new here and generally i recently started to learn webdev and i am trying to make little "portfolio" website to train practice skills. I have one problem what i can't solve, and i am siting with eyes on screen about few hourse what makes me so confused
First issue is whitespace on right side of the page.
2.Next issue is a lot of whitespace what remaining after relative positioning.
How can with these get rid of these things?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<!--header-->
<header>
</header>
<div class = "container">
<div class="text">
<h1 id = "h1">“The life of a designer...” </h1>
<h2 id = "h2">Is a life of fight. Fight against the ugliness.
Just like a doctor fights against disease. For us,
the visual disease is what we have around, and what we
try to do is cure it somehow with design.</h2>
<h3>– Massimo Vignelli. </h3></div></div>
<div class="txt">
<p id ="one">Hi, i am webdeveloper<id></id></p>
<p id ="two">If you want work with me</p>
<p id ="three">leave a message.</p>
</div>
<div class = "icons">
<img src = "icons/cheap.png" alt = "cheap" id="cheap"/>
<img src = "icons/Trust.png" alt = "trust" id="trust"/>
<img src = "icons/timeliness.png" alt = "timeliness" id="timeliness"/>
<img src ="icons/developing.png" alt ="developing" id="developing"/>
</div>
<div class = "Social">
<img src ="icons/facebook.png" alt ="fb" />
<img src ="icons/instagram.png" alt ="insta" />
<img src ="icons/linkedin.png" alt = "linkedin"/>
</div>
<!--Overview-->
<section>
<article>
Aaaa
</article>
</section>
<!-- Social media icons-->
<aside>
</aside>
<footer>
</footer>
</body>
</html>
CSS:
#font-face {
font-family: myFirstFont;
src: url(/fonts/Graviola_Regular.otf);
}
#font-face {
font-family: czcionka;
src: url(/fonts/czcionka.ttf);
}
body {
margin:0px;
padding:0px;
}
header{
background-image:url(bg1.jpg);
background-repeat:no-repeat;
height:800px;
opacity: 0.8;
background-size:100% 100%;
}
.txt {
position:relative;
right:-50px;
top:-1120px;
border-left:3px solid white;
font-family:czcionka;
}
.txt #one {
position:relative;
color:white;
font-size: 50px;
position:relative;
bottom:-60px
}
.txt #two {
position:relative;
color: white;
font-size: 50px;
}
.txt #three {
position:relative;
color: white;
font-size: 50px;
top:-60px
}
.container .text {
color:white;
text-align: center;
position:relative;
top: -450px;
margin: 50px;
font-family: myFirstFont;
}
.container .text #h1 {
font-size:60px;
border-bottom: 3px solid;
font-family:myFirstFont;
}
.container .text #h2 {
font-size: 25px;
font-style:italic;
}
.container .text #another {
position: relative;
top:-500px;
font-family:myFirstFont;
font-size:40px;
}
.Social {
position: relative;
top:-1460px;
right:-50px;
margin:500px;
}
.icons #cheap {
position: relative;
top:-1139px;
right:-1225px
}
.icons #timeliness {
position:relative;
top:-1140px;
right: -1110px
}
.icons #developing {
position:relative;
top:-1140px;
right:-750px;
}
Here's link to img how this looks. When i scroll down page rest of my site elements are very far down.
Like this looks the white space what i talking about
I'm creating a website for my school programming class and my css won't show up past my homepage, my pattern of creating css doesn't change, and so far 5 people in my class have checked and none know the reason
Homepage
<head>
<link rel= "stylesheet" href="css1.css">
<meta charset = "utf-8">
<meta name= "keywords" content= "photo">
<title> "trash" </title>
</head>
<body bgcolor="#F5F6E9">
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="index.html">LEGALIZE RANCH</h1>
</div>
<div class= "nav">
<ul>
<li>RANCH!</li>
<li>WHY?????</li>
<li>BROTENDO NATION</li>
</ul>
</div>
</div>
</div>
<div class= "mainpart">
<div class="statement">
<p>
WHATS UP BROTENDOS
</p>
</div>
<div class= "god">
<center> <img src= "god.png" alt="ranch dude"> </center>
</div>
<div class= "statement2">
<p>
RANCH IS THE #1 MOST RARE RESOURCE EVER!!!! THAT MEANS OUR GOVERNMENT IS LIMITING IT FOR DUDES LIKE THIS!!!!!
</p>
<p>
THIS NEEDS TO BE ADDRESSED AT THE NINTENDO CONVENTION!!!!!
</p>
</div>
<div class= birdup>
<center><img src= "birdup.jpg" alt= "bir ddup"></center>
</div>
</body>
CSS
body {
width: 100%;
margin : auto;
}
.container {
width: 960px:
margin: 0 auto:
}
.header {
background: #94DD6E;
height: 100px;
width: 100%;
top: 0;
position: fixed;
}
.logo {
float: left;
font-family: "Helvetica";
font-size: 15px;
margin-left:15px;
padding-top:10px;
}
a {
text-decoration: none;
color: #fff
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
font-family: Arial, Helvetica, sans-serif;
margin-right: 15px;
}
.nav {
float: right;
padding-top: 10px;
}
.content {
background: #e7e8e1;
}
.statement {
padding-top: 100px;
text-align: center;
font-family: "Helvetica";
font-size: 25px;
}
.statement2 {
text-align: center;
.god {
text-align: center;
}
.pimplepete {
margin-top: 50%;
text-align: center;
color: orange;
}
.mainpart {
background-color: #F5F6E9;
}
.video {
padding-top: 25px;
}
.donation {
text-align: center;
font-family: "Papyrus";
font-size: 50px;
}
Page that the CSS isn't working on
<!doctype html>
<head>
<link rel= "stylesheet" href="css1.css">
<meta charset = "utf-8">
<meta name= "keywords" content= "photo">
<title> "trash" </title>
</head>
<body bgcolor="#F5F6E9">
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="index.html">LEGALIZE RANCH</h1>
</div>
<div class= "nav">
<ul>
<li>RANCH!</li>
<li>WHY?????</li>
<li>BROTENDO NATION</li>
</ul>
</div>
</div>
</div>
<div class= "video">
<center>
<iframe width="640" height="360" src="https://www.youtube.com/embed/0V7FGCtnoJo" frameborder="0" allowfullscreen></iframe>
</center>
</div>
<div class= "donation">
<p>
OUR MOVEMENT IS GROWING!!! SPORT SOME <i>RANCHY</i> MERCH
</p>
<p>
LEGAL RANCH MERCH
</p>
</div>
</body>
Don't worry I know that the formatting isn't good.
Your CSS is linked relatively.
<link rel= "stylesheet" href="css1.css">
If your other pages are perhaps in different folders - folders that don't also have a css1.css alongside the html files inside them, it won't understand the reference to css1.css.
Try adding a leading slash /css1.css if you're accessing the site via a URL, rather than the filesystem, and the css is in the web root.
If you're loading the pages via the filesystem, adjust the reference to the css based on the file calling it. You might traverse up a level by referring to it as ../css1.css, instead.
To illustrate further, given a filesystem like:
public_html/
- index.html
- css1.css
- about/
- index.html
public_html/index.html knows about css1.css because they live in the same directory.
However, in public_html/about/index.html, if the <link> tag references css1.css, the browser will look for a file called public_html/about/css1.css, which I imagine doesn't exist.
The div with style contentdetailleft is absolute and so will be positioned to the div with the style container (since container is absolute). You can see that I have set left to 0px and top to 0px just to illustrate this. If you run it you will see the div with contentdetailleft overlap the div with style contentTop as you would expect. This is the HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;left:0px;top:0px;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
Now remove the left:0px and top:0px on the contentdetailleft style (see the HTML below). Now the div with style contentdetailleft is within the div with style contentBottom. How can this be?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
Thanks
Ian
The reason you are seeing this change in behavior is because the default positioning that occurs when you use "position: absolute;" is "left: 0;". However, "top: 0;" is not default behavior, so when you add that (as you correctly said), ".contentdetailleft" is positioned to the ".container" element.
Because ".contentdetailleft" comes after ".contentheaderleft" in the DOM (*and more importantly, because ".containerBottom" and ".containerTop" are still default position - static), once ".containerdetailleft" becomes positioned absolutely it is pulled out of the normal flow of the DOM and positioned based on it's relative/absolute parent (".container"). At this point it is sitting at the top-left corner of container, on top of ".containerTop", and thus on top of ".contentheaderleft".
You don't need the style "left: 0;" on ".contentdetailleft" once it has been positioned absolutely. If you would like to keep it absolute and have the "top" styling, but not have it overlap/cover ".contentheaderleft", simply position it from the top at the exact height of ."contentheaderleft" (42px), i.e. "top: 42px;".
*see below, all I updated was the top position of ".contentdetailleft"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;left:0px;top:42px;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>