Its very simple but even after looking at so many examples I cannot seem to get it right! As you can see in this Code Pen, I have a image! Now when I hover the image i want to do various things on the elements with classes .headline .text .title .subtitle. for some reason i am only able to affect any change at all on the .title class! What am i doing wrong?
my html:
body {
}
.container {
.headline {
color: red;
}
.foto {
background-color: lightblue;
cursor: pointer;
}
.foto:hover + .headline {
color:green;
}
.foto:hover + .title {
color:maroon;
position: absolute;
top: 3em;
left: 10em;
}
//text not working
.foto:hover + .text {
color:maroon;
}
.title {
color: darkgreen;
font-weight: bold;
p {
font-size: 2em;
}
}
.text {
color: blue;
}
.subtitle {
color: darkred;
}
}
<!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">
<link rel="stylesheet" href="styles.scss">
</head>
<body>
<div class="container">
<h2 class="headline">Sonderausstellungen</h2>
<div class="foto"><img src="http://oi63.tinypic.com/ifr19y.jpg"/></div>
<div class="title">
<p>Land von Indien</p>
</div>
<div class="text">
<p>Lernen wir Indien Kennen</p>
</div>
<div class="subtitle">
<p>Der Text hier is länger als da oben</p>
</div>
</div>
</body>
</html>
The element+element applies to the next immediate element you identify following the first element. It does not search through the DOM looking for the element.
For instance....
.foo+.bar {color:#f00}
<div class="foo"></div>
<div class="bar"></div> --- This gets selected
<div class="foo"></div>
<div class="zanza"</div>
<div class="bar"></div> --- This does not
So, your CSS should look like this:
.foto:hover + .title {...}
.foto:hover + .title + .text {...}
.foto:hover + .title + .text + .subtitle {...}
Or to avoid stacking so many selectors, you could use ~ to select sibling elements at the same level in the DOM:
.foto:hover ~ .title {...}
.foto:hover ~ .text {...}
.foto:hover ~ .subtitle {...}
Remember, your HTML is being read from top to bottom, and you are not able to target previous sibling elements with CSS. So right now, the way you have your HTML structured, you cannot select the .headline element based on the image :hover because the .headline comes first.
Related
So I am trying to make different texts next to specific symbols (in the elevator-pitch div) but somehow the element skip rows and text end up below the images. Ideally I want each text to be nicely aligned next to the images (hence making the float).
Here is the code: https://codepen.io/andreassoteriou/pen/PoaLBjv
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>AndreasSoteriouCV</title>
<link rel="stylesheet" href="css/styles.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=Dancing+Script&family=Merriweather&family=Montserrat&family=Pacifico&family=Playball&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="andreassoteriou-modified.png" alt="andreas">
<h1>Andreas Soteriou</h1>
<h2>aspiring web developer</h2>
</div>
<h1>My Story</h1>
<div class="elevator-pitch">
<img class="creativity-img" src="https://cdn-icons-png.flaticon.com/512/1126/1126453.png" alt="creativity">
<h2>Creativity</h2>
<p>Why I am creativfdfdfdfdfdfdfdwerv4vrtyvrtyvrtyvyrytve</p>
</div>
<hr>
<div class="elevator-pitch">
<img class="logical-img" src="https://cdn-icons-png.flaticon.com/128/1935/1935467.png" alt="logical">
<h2>Logical</h2>
<p>Why I am creativggggfgotjgirtgfdffdffdfdfdfdfdfd</p>
</div>
<div class="story-container">
</div>
</body>
</html>
body {
margin: 0;
font-family: 'Merriweather', serif;
text-align: center;
}
.top-container {
background-color: #F8EDE3;
margin: 0;
height: 450px;
padding-top: 60px;
}
.top-container > h1 {
margin-top:40px;
font-size: 40px;
}
.top-container > h2 {
font-family: 'Dancing script', serif;
font-size: 30px;
}
.middle-container {
}
.elevator-pitch {
width: 25%;
text-align: left;
line-height: 1.5;
margin: 50px auto 50px auto;
overflow:auto;
}
.creativity-img {
float: left;
margin-right: 20px;
width: 30%;
}
.logical-img {
float: right;
width: 30%;
margin-left: 20px;
any idea on how I should tackle this? Most importantly, very curious as to why this happens!
Best regards,
Andreas
I was expecting the text to be nicely aligned next to the image as in the udemy course I am doing now:
New to Javascript and have spent hours on this problem :/
I want to implement a smooth scrolling effect to move to different sections of a webpage. I am using this piece of javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main')
.animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
This is the basic structure
<!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>Document</title>
</head>
<body style="margin-left: 30%; margin-right: 30%">
<main>
<div class="contactme-button">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: grey; display: block;"> </div>
<div class="contactme-button-2">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: blue; display: block;"> </div>
<div class="contactme-section" id="contactme" style="width: 100%; height: 100px; background-color: grey;">CONTACT ME</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: black; display: block;"> </div>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main').animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
</script>
</html>
(there is more content in there but that is the basic structure that is giving me grief)
I discovered that in
.main{
overflow-x: hidden;
}
is stopping the normal operation of the scrolling and cause the second link to scroll to a random spot
There's a CSS declaration that may help here:
.your-anchor-element-class {
scroll-margin-top: 36px; // <-- your value here
}
Browser support: Works natively in Chrome, FF, Edge, Opera. Supported in Safari with scroll-snap-margin-top.
MDN docs.
Credit to Josh Comeau for pointing this out.
I using wkhtmltopdf tool to convert html to pdf. On my linux computer it outputs everything right with css rules. But after installing the same tool on a Mac, the output does not look the same. The bold tag does not work. The margin to the top does not work and the font size over all looks smaller.
What can be the problem here? The html file is very simple and I think the wkhtmltopdf should behave the same way here independent of platform.
Here is a part of the html file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
td {
border:solid windowtext 1.0pt;
background:white;
padding:0cm 5.4pt 0cm 5.4pt;
height:19.65pt;
}
td.table_header {
background:#D9D9D9;
}
.text_right {
text-align: right;
}
table {
width: 100%;
border-collapse:collapse;
border:none;
line-height: 80%;
}
html {
background:white;
font-family: "Arial Unicode MS", sans-serif;
}
.header {
font-size:18.0pt;
text-align:center;
}
.address1 {
text-align:right;
}
.text {
line-height: 160%;
}
.space {
line-height:80%;
}
</style>
</head>
<body style="margin:100px 100px;">
Im trying to use Dropzone in my french laravel app (latest version) When I save my form I get the error
Call to a member function getClientOriginalName() on null
I try to see if my request sent something with dd() but I get null
This is my function on the controller
public function enregistrer(Request $request){
$photo = $request->file('file');
$imageName = $photo->getClientOriginalName();
$image->move(public_path('images'),$imageName);
$demande = new Demande();
$demande->filename = $imageName;
$demande->cin= $request('cin');
$demande->apoge=$request('apoge');
$demande->generatedCode= uniqid();
$demande->save();
return redirect('/demande');
}
And this is my view
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- All for dropzone -->
<meta name="_token" content="{{csrf_token()}}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
<title>Submission E-Docs</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<form role="form" action="{{url('demande/store')}}" method="POST" enctype="multipart/form-data" class="dropzone" id="dropzone">
#csrf
<label> Votre CIN:</label>
<input type="text" name="cin"/>
<label> Votre Apogée:</label>
<input type="text" name="apoge"/>
<!-- <input name="file" type="file" multiple /> -->
<br>
<input type="submit" class="btn btn-outline-primary btn-lx" style="font-family:'Quicksand', sans-serif; font-size:20px "value="Créer">
</form>
</div>
</div>
<script type="text/javascript">
Dropzone.options.dropzone =
{
maxFilesize: 10,
renameFile: function (file) {
var dt = new Date();
var time = dt.getTime();
return time + file.name;
},
acceptedFiles: ".jpeg,.jpg,.png,.gif",
addRemoveLinks: true,
timeout: 60000,
success: function (file, response) {
console.log(response);
},
error: function (file, response) {
return false;
}
};
</script>
</body>
</html>
I thought It was due the
You are renaming the user chosen file dropboxJS before sending it to the server
renameFile: function (file) {
var dt = new Date();
var time = dt.getTime();
return time + file.name; //<-- gets a unique name
},
This name is dynamic and cannot be predicted on the controller, but in controller you are using
$photo = $request->file('file');
Obviously this would fail as the name could be anything based on the time it was sent. So first option is to remove the renameFile, but if that's not possible you need some way to access the file without knowing the name it was uploaded as
Try this
//$photo = $request->file('file');
$fileBag = $data->files; //Symfony\Component\HttpFoundation\FileBag
$collFile = $fileBag->all(); //an array of Symfony\Component\HttpFoundation\File\UploadedFile
if(count($collFile)){
$photo = $collFile[0];
//.. other code
}
else{
echo 'No file was uploaded';
}
This basically tries to get all files from the FileBag into an array then attempts to pick the first one from it.
I made container with attribute flex. Put inside 3 images with same height 830px but different width:
img 602x830 px
img 613x830 px
img 599x830 px
made for images attribute: width 100%
All seems to look correct until screen size is more then 630px. After the screen became 630 px and less the height of one image (2-img) became less then others two images.
How to made all images the same height no matter what the screen size becomes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Document</title>
<style type="text/css">
.category-block {
max-width: 768px;
margin:0 auto;
overflow:hidden;
}
.flex-block {
display:flex;
flex-direction: row;
align-items: stretch;
}
.flex-block img {
width: 100%;
}
</style>
</head>
<body>
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="1-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="2-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="3-img.jpg"></img>
</div>
</div>
</div>
</body>
</html>
This is an issue I found on Firefox and I haven't found why it fail.
Here is one workaround, using a Firefox CSS hack, making also the flex-block__area a flex container.
The CSS hack is needed to target only on Firefox, or else it will mess up the other browsers instead
Fiddle demo
Stack snippet
.category-block {
max-width: 768px;
margin: 0 auto;
overflow: hidden;
}
.flex-block {
display: flex;
}
.flex-block img {
width: 100%;
}
/* Firefox bug fix */
#supports (-moz-appearance:meterbar) and (display:flex) {
.flex-block__area {
display: flex;
}
}
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="http://placehold.it/602x830/f00">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/613x830/0f0">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/599x830/00f">
</div>
</div>
</div>