I have an issue. I have 4 divs within a div container and i am using the grid system. For some reason the third div in the grid does not respond how it should. When i give it a margin bottom, instead of pushing the div from the bottom it will just push the fourth div beneath it down even further. Any ideas on what I'm missing here?
<!DOCTYPE html>
<html>
<head>
<link rel = "shortcut icon" href = "images/icon.png">
<title>News: U.S and World News Headlines: VPR</title>
<link rel = "stylesheet" type = "text/css" href = "css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Actor&family=Lato&family=Secular+One&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Actor&family=Lato&family=Raleway:wght#200&family=Secular+One&display=swap" rel="stylesheet">
</head>
<body>
<div class = "section1-container">
<div class = "item main-story">
<img class = "vinland-s2" src = "images/vinland-s2.jpg">
<h4>Anime</h4>
<h3>Vinland Saga Season 2 Announced</h3>
</div>
<div class = "item sub-story">
<img class = "witcher-s2" src = "images/witcher-s2.jpeg">
<h4>Movies/TV</h4>
<h3>First Look At The Witcher Season 2<br>See The Cast Return As Their Beloved Characters<br>
And Which Date They Will Be Appearing Again.
</h3>
</div>
<div class = "item third-story">
<h4>Japan</h4>
<h3>Japan Animation Industry Sales Fall 1.8% In 2020,<br> First Drop In Decade. How Does This Affect
The Future Of Anime?<br> A Lot Of Big Named Studios Share Their Thoughts And Plans.</h3>
</div>
<div class = "item fourth-story">
<img class = "follow" src = "images/follow.jpg">
<h3>Got anything you want to share?</h3>
<p>At VRP, we welcome your tips and stories, get started today by taking out your phone<br>
and visiting our offical journalist site to apply for a course!
</p>
</div>
</div>
</body>
</html>
*
{
margin:0;
padding:0;
box-sizing: border-box;
}
body
{
background-color: rgb(237, 236, 232);
}
.section1-container
{
width: 70%;
display: grid;
margin:300px 300px;
grid-template-columns: 1fr 1fr;
padding:2%;
overflow:auto;
background-color: white;
border:1px solid lightgrey;
padding-top: 5%
}
.sub-story
{
margin-left: 10%;
}
.third-story
{
grid-column-start: 2;
grid-column-end: 3;
margin-bottom:100px
}
.fourth-story
{
grid-column-start: 1;
grid-column-end: 3;
background-color: lightgrey;
text-align: center;
}
.vinland-s2
{
width: 586px;
height: 346px;
padding-bottom: 5%
}
.witcher-s2
{
width: 310px
}
Instead of using margin, you could use the gap property to separate the rows/columns.
Is this what you're looking for ? Here's the snippet.
*
{
margin:0;
padding:0;
box-sizing: border-box;
}
body
{
background-color: rgb(237, 236, 232);
}
.section1-container
{
width: 70%;
display: grid;
margin:300px 300px;
grid-template-columns: 1fr 1fr;
padding:2%;
overflow:auto;
background-color: white;
border:1px solid lightgrey;
padding-top: 5%;
grid-gap: 50px;
}
.sub-story
{
/* margin-left: 10%; */
}
.third-story
{
grid-column-start: 2;
grid-column-end: 3;
/* margin-bottom:100px */
}
.fourth-story
{
grid-column-start: 1;
grid-column-end: 3;
background-color: lightgrey;
text-align: center;
}
.vinland-s2,.witcher-s2
{
max-width: 100%;
height: auto;
margin-bottom: 50px;
}
<div class="section1-container">
<div class="item main-story">
<img class="vinland-s2" src="https://images.unsplash.com/photo-1580477667995-2b94f01c9516?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" />
<h4>Anime</h4>
<h3>Vinland Saga Season 2 Announced</h3>
</div>
<div class="item sub-story">
<img class="witcher-s2" src="https://images.unsplash.com/photo-1580477667995-2b94f01c9516?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" />
<h4>Movies/TV</h4>
<h3>
First Look At The Witcher Season 2<br />See The Cast Return As Their
Beloved Characters<br />
And Which Date They Will Be Appearing Again.
</h3>
</div>
<div class="item third-story">
<h4>Japan</h4>
<h3>
Japan Animation Industry Sales Fall 1.8% In 2020,<br />
First Drop In Decade. How Does This Affect The Future Of Anime?<br />
A Lot Of Big Named Studios Share Their Thoughts And Plans.
</h3>
</div>
<div class="item fourth-story">
<img class="follow" src="images/follow.jpg" />
<h3>Got anything you want to share?</h3>
<p>
At VRP, we welcome your tips and stories, get started today by taking
out your phone<br />
and visiting our offical journalist site to apply for a course!
</p>
</div>
</div>
Related
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".
I know this is an amateur question but I am absolutely lost. I am only just starting out my website and I am looking to add a small space between the two logos on the right. I have been trying for about 2 hours and can't find anything. This is the HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="ie-edge">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./Style.css">
<title>Joshua's Portfolio</title>
</head>
<body>
<header>
<div class="logo-container">
<img src="./Images/photoroom.png" alt="Image not found" width="60px" height="40px">
</div>
<nav>
<ul class ="navbar-links">
<li><a class="navbar-link" href="$">HOME</a></li>
<li><a class="navbar-link" href="$">PROJECTS</a></li>
<li><a class="navbar-link" href="$">ABOUT</a></li>
</ul>
</nav>
<div class="socials">
<img src="./Images/linkedin-original.svg" alt="Image not found" width="30px" height="55px">
<img src="./Images/github-original.svg" alt="Image not found" width="30px" height="55px">
</div>
</header>
</body>
</html>
This is the CSS -
* {
margin: 0px;
padding: 0px;
box-sizing: border-box
}
body {
font-family: 'Raleway', sans-serif;
background-color: #c8b69a;
}
header {
display: flex;
width: 90%;
margin: auto;
background-color: #814E10;
align-items: center;
}
.logo-container, .navbar-links, .socials {
display: flex;
}
.logo-container {
flex: 1;
}
nav {
flex: 2;
}
.navbar-links {
justify-content: space-around;
list-style: none;
}
.navbar-link {
text-decoration: none;
}
.socials {
flex: 1;
justify-content: flex-end;
margin-right: 13px;
}
If anyone has any suggestions it would be much appreciated, thanks!
All you need to do to define which element you want to add margin to:
.socials img:first-child {
margin-right: 13px;
}
By this, you can say that in class .socials the first element of img will have margin-right equal to 13px.
Ok I feel you one this, having gone through learning CSS its a pain, you dont want to target the social class because that is the parent of the img's. ( imagine there's a box wrapping the 2 imgs )
What you want to target is ... (.socials img {} )
this will target the individual img tags and from there you want to add a margin-left of 13px.
You dont want to do margin-right because that will push the both imgs 13px to the left of the navbar, making it uneven
.socials img {
margin-left:13px
}
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Center image using text-align center?
(28 answers)
Closed 1 year ago.
I am trying to make a responsive grid that has 3 columns and 3 rows, on the first row there is an image there is supposed to be at the center, just like the title and the text but I can´t find a way to do it, I have tried everything, all of the alignment terms (justify, align, self, items, content) and nothing works.
Is there a way to do it?
body {
margin: 0;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
grid-template-rows: 60vh 60vh 60vh;
row-gap: 80px;
column-gap: 10px;
grid-template-areas:"foto1 foto2 foto3"
"titulo 1 titulo2 titulo3"
"texto1 texto2 texto3";
justify-content: center;
align-content: center;
}
#Titulo_firstF, #TitleSecondF, #TitleThirdF {
text-align: center;
font-family: Montserrat;
font-weight: 500;
font-size: 12pt;
width: 100%;
}
#TextFirstF, #TextSecondF, #TextThirdF {
text-align: center;
font-family: MontSerrat;
color: black;
font-weight: 300;
font-size: 12pt;
width: 100%;
}
#foto1f img{
grid-area: foto1;
width: 20%;
}
#foto2f{
grid-area: foto2;
width: 19%;
}
#foto3f{
grid-area: foto3;
width: 19%;
}
#Titulo_firstF {
grid-area: titulo1;
}
#TitleSecondF {
grid-area: titulo2;
}
#TitleThirdF {
grid-area: titulo3;
}
#TextFirstF {
grid-area: texto1;
}
#TextSecondF {
grid-area: texto2;
}
#TextThirdF {
grid-area: texto3;
}
<!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">
<link rel="stylesheet" href="style teste.css">
<title>Document</title>
</head>
<body>
<div class= features>
<div class= first_feature>
<img src = "https://www.imagemhost.com.br/images/2021/06/13/mail.png" class="fotos" id="foto1f">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<p id = "Titulo_firstF">
GET A CUSTOMIZED<BR/>
E-MAIL ADRESS AND MORE
</p>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<p id = "TextFirstF">
Looking cautiously round, to <br/>
ascertain that they were not <br/>
overheard, the two hags cowered <br/>
nearer to the fire, and chuckled <br/>
heartily.
</p>
</div>
<div class= second_feature>
<img src="https://www.imagemhost.com.br/images/2021/06/13/edit.png" class="fotos" id="foto2f">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<p id= TitleSecondF>
40 MILLION HIGH </br>
QUALITY IMAGES
</p>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<p id= TextSecondF>
At first, for some time, I was not able to </br>
answer him one word; but as he had </br>
taken me in his arms I held fast by him, </br>
or I should have fallen to the ground. </br>
</p>
</div>
<div class = third_feature>
<img src = "https://www.imagemhost.com.br/images/2021/06/13/card.png" class="fotos" id="foto3f">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<p id= "TitleThirdF">
CREATE A SIMPLE LOGO
</p>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<p id= TextThirdF>
She gave my mother such a turn, </br>
that I have always been convinced I </br>
am indebted to Miss Betsey for </br>
having been born on a Friday. </br>
</p>
</div>
</div>
</div>
</body>
</html>
It is supposed to look like this:
It is supposed to look like this:
you can use this way. Put a img in div tag and use text-aling: center. There are many ways you can do this.
.fotos-block{
text-align: center;
}
<div class="fotos-block">
<img src = "https://www.imagemhost.com.br/images/2021/06/13/mail.png" class="fotos" id="foto1f">
</div>
And you can also use this way to center the img.
.fotos{
display: block;
margin: auto;
text-align: center;
}
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 have a problem with my css menu.. It doesn't work....
I want to use a hover over a button, to switch a display attribute from another element.
I use CSS3 Grid-System. I don't know if that is the problem?
First things first, here is my code:
First a css part (only the affected):
.navigation{
grid-column: 1;
grid-row: 2 / 3;
justify-items: end;
justify-self: end;
width: auto;
margin: 0;
padding: 0;
background-color: rgba(0,0,0,0.7);
display: grid;
grid-template-columns: 1;
grid-template-rows: 50px 50px;
}
.navigationButton-icon{
display: none;
background-color: white;
border: 2px solid;
border-color: deepskyblue;
border-radius: 10px;
cursor: pointer;
margin-top: 5px;
padding-left: 50px;
padding-right: 50px;
}
.navigation #butInsert{
grid-column: 1;
grid-row: 1 / 2;
justify-self: start;
width: 100%;
}
.navigation #butCreate{
grid-column: 1;
grid-row: 2 / 3;
justify-self: start;
width: 100%;
}
#butMenu:hover .navigationButton-icon{
display: block;
}
<!DOCTYPE html>
<html>
<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>Surveys</title>
<link rel="stylesheet" type="text/css" href="styles/inline.css">
<link rel="stylesheet" type="text/css" href="styles/fontello.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400" rel="stylesheet">
</head>
<body>
<container class="container">
<header class="header">
<h1 class="headerTitle">Surveys</h1>
<div class="headerButton">
<button id="butRefresh" class="headerButton-icon"><i class="icon-arrows-cw"></i></button>
<button id="butMenu" class="headerButton-icon"><i class="icon-th-list"></i></button>
</div>
</header>
<main class="main">
<?php include('snippets/survey.php'); ?>
</main>
<navigation class="navigation">
<button id="butInsert" class="navigationButton-icon">Insert</button>
<button id="butCreate" class="navigationButton-icon">Create</button>
</navigation>
<footer class="footer">
<a class="impressum">IMPRESSUM</a>
</footer>
<div class="loader" hidden>
</div>
</container>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script src="scripts/app.js" async></script>
</body>
</html>
I hope you can help me. I tried it for like 3 hours now..
I can manipulate attributes from the hover element but it doesn't work for other elements of the dom.
Greetings
That's not how CSS works. #butMenu:hover .navigationButton-icon means #butMenu has to be an ancestor of .navigationButton-icon element.
You need JavaScript.
// jQuery
$('#butMenu').hover(
function () {
$('.navigation').addClass('butMenu-hover');
}, function () {
$('.navigation').removeClass('butMenu-hover');
}
);
// Vanilla JS
(function () {
var butMenu = document.getElementById('butMenu');
var navigation = document.getElementsByClassName('navigation')[0];
butMenu.onmouseenter = function () {
navigation.classList.add('butMenu-hover');
};
butMenu.onmouseleave = function () {
navigation.classList.remove('butMenu-hover');
};
})();
And in your CSS:
.navigation.butMenu-hover .navigationButton-icon {
display: block;
}