I wanna position image which has photo class. However, nth-child is not working on that element. I looked for many solutions, but it couldn't be solved!
.container {
height: 100vh;
position: relative;
}
.irene {
position: absolute;
top: 10%;
left: 10%;
width: 60vw;
}
.irene-img {
position: relative;
}
.irene-img::after {
content: ' ';
z-index: -1;
position: absolute;
left: 5%;
top: 5%;
width: 100%;
height: 100%;
border: 5px solid #2ebce2;
}
.irene-title {
position: absolute;
left: -10%;
top: -10%;
color: rgba(0, 0, 0, 0.4);
font-size: 10rem;
}
.irene-title span {
font-size: 5rem;
}
.single__detail__spec {
position: absolute;
font-size: 2rem;
line-height: 2;
top: 35%;
right: 10%;
color: rgba(0, 0, 0, 0.8);
}
.single__detail__spec span {
font-weight: bold;
}
.single__detail__saying {
position: absolute;
width: 400px;
font-size: 2rem;
line-height: 2;
bottom: 5%;
right: 5%;
color: rgba(0, 0, 0, 0.8);
}
.photo {
position: absolute;
width: 400px;
}
.photo:nth-child(1) {
left: 0;
top: 0;
}
<!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">
<title>Document</title>
<base href="https://raw.githack.com/baeharam/Redvelvet-Fansite/master/html/">
<link rel="stylesheet" href="../css/default.css">
</head>
<body>
<div class="container">
<div class="irene">
<div class="irene-img">
<img src="../images/about-irene.jpg" alt="">
</div>
<p class="irene-title">IRENE <span>배주현</span></p>
</div>
<p class="single__detail__spec">
<span>생일.</span> 1991.03.29<br/>
<span>별명.</span> 배추, 현이, 엔딩요정<br/>
<span>취미.</span> 다리미질, 빨래<br/>
<span>혈액형.</span> A형
</p>
<p class="single__detail__saying">
"lorem ipsum"
</p>
</div>
<img class="photo" src="../images/photo-irene1.jpg" alt="">
</body>
</html>
Why nth-child of photo is not working? How to handle it?
I think you are getting confused between nth-child and nth-of-type
nth-child(n): Selects the matching element that comes after n-1 elements in the same parent, it doesn't care whether those elements match the same selector or not, it only cares about position.
nth-of-type(n): Selects the matching element that comes after n-1 elements that matches the same selector in the same parent.
There are 2 possible solutions for your problem
img:nth-child(2)
img:nth-of-type(1)
The question has been answered, but i would like to add something to it:
.photo:nth-child(1) would normally be written as .photo:first-child.
As was said, in this case it doesn't work because the element with the class 'photo' is not the first child of it's parent. The selector .photo:first-child (which would be the correct choice anyway) as well as the selector .photo:nth-child(1) will look for the element with the class .photo which is the first child of it's parent. If there are not elements with that class, whilst also being first child of their parents, the style won't be applied.
If you wanted to select by type, as in, select the first element that comes up with that class, no matter it's position to it's parent, the selector .photo:nth-of-type(1) should be used.
If you wanted to select the element according to it's position to it's parent, it should be .photo:nth-child(2) since the element with the class .photo is the second in relation to it's parent.
Here is a guide towards :nth-child(n) which i found very explanatory. https://css-tricks.com/useful-nth-child-recipies/
Here is a guide for :nth-of-type https://css-tricks.com/almanac/selectors/n/nth-of-type/ which is also quick and easy to understand. I hope i helped!
Related
I would like to fade in product description underneath its picture, using overlay effect on hover, in the e-mail. Unfortunately, Gmail doesn't support some CSS functions. When I send the e-mail, the product description displays below the picture. Is it possible to display text instead of picture when you hover your cursor over the image in the e-mail? Do you know which CSS function is not supported by the e-mail service providers?
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
position: absolute;
font-size: 20px;
text-align: center;
width: 385px;
display:block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="container">
<img src="https://ecsmedia.pl/c/wojny-i-noce-b-iext73211797.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">„Wojny i Noce" to trzeci długogrający album Darii Zawiałow, którego zapowiedź stanowią dreampopowe hity „Kaonashi" oraz „Za krótki sen" nagrany z Dawidem Podsiadło. Nowy album to kolejny longplay, przygotowany w songwriterskim duecie Daria + Michał Kush. Oprócz wydania CD, Daria przygotowała dla fanów wyjątkowe LP - Picture Disc z motywem Sakury czyli kwiatu wiśni.</div>
</div>
</div>
</body>
</html>
As I mentioned in my comment, no support for CSS transitions in Gmail. Further to that, position is not supported in any Gmail client - https://www.caniemail.com/search/?s=position
You'll need to find an alternative method of showing your caption across the board.
I am working on a website and I finally made a responsive menu that takes up the whole screen when you click on the label. The problem is, I cannot hide it(I want to use pure css) I created a new label in the menu that tries to close the menu but it doesn't work and I am assuming that it's because a child is trying to select a parent. I am new to CSS and would really appreciate any help on how to make a close button that closes the menu(width: 0%). Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Regina</title>
</head>
<body>
<div id="pagewrap">
<!--HEADER-->
<header class="pagesection" id="pageheader">
<div class="pagewidth">
<figure id="logo">
<img src="img/logo-full.png" alt="Logotype La Regina">
</figure>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div id="myNav" class="overlay">
<nav>
<label for="toggle2">☰</label>
<input type="checkbox" id="toggle2">
Home
Menu
About us
Contact
</nav>
</div>
</div>
</header>
<!--END OF HEADER-->
</div>
</body>
</html>
html,
body,
figure {
padding: 0;
margin: 0;
list-style: none;
}
#pageheader {
background: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.pagesection {
padding-left: 11px;
padding-right: 11px;
}
#logo img{
width: 200px;;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#myNav > nav {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#toggle{
z-index: 3;
}
#toggle2:checked < #myNav{
width: 0%;
}
#toggle:checked + #myNav{
width: 100%;
}
Unfortunately in CSS you cant go up the parent level.
But you can do this in Pure CSS.
#pageheader {
background: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.pagesection {
padding-left: 11px;
padding-right: 11px;
}
#logo img{
width: 200px;;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#myNav > nav {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#toggle{
z-index: 3;
}
#toggle:checked + #myNav{
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Regina</title>
</head>
<body>
<div id="pagewrap">
<!--HEADER-->
<header class="pagesection" id="pageheader">
<div class="pagewidth">
<figure id="logo">
<img src="img/logo-full.png" alt="Logotype La Regina">
</figure>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div id="myNav" class="overlay">
<nav>
<label for="toggle">☰</label>
Home
Menu
About us
Contact
</nav>
</div>
</div>
</header>
<!--END OF HEADER-->
</div>
</body>
</html>
As you can see I've removed one of the input fields (one inside the nav) and then changed the id of the for attribute inside the nav to point to the checkbox outside the nav making use of the selector
#toggle:checked + #myNav
What you want to affect is the overlay class but i do not believe you are able to do this with CSS.
You could do this with JQuery.
However, you can modify your current code so that the original toggle is still visible in the overlay and therefore when you untick that toggle, the overlay is removed.
So, in the html remove these two lines:
<label for="toggle2">☰</label>
<input type="checkbox" id="toggle2">
In your CSS change the 'top' to relative:
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: relative;
right: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
Give that a try otherwise, I would recommend you look into JQuery and the hide function
I would also encourage checking out Bootstrap at some point once you are comfortable with CSS since it is a great framework for mobile-first design.
I'm a newbie when it comes to CSS. My overall goal is to convert a small web application that I have which displays data in table to using CSS.
A description of what the application displays is that in a left hand window there is a list of employee names, on the right is a cell for each day that the employee has worked which spans a user selectable period.
In the code below, I can't get the cell elements to overflow so that the user can scroll to the right, instead the cells are overflowing down.
Is there a way I can get the overflow to work horizontally rather than vertically so I can scroll left and right to see all the cells rather than what it is doing now which is creating a scroll bar vertically?
Much appreciated if anyone can help - it's got me frustrated!
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">Header</div>
<div id="centreposition">
<div id="centrecontent">
<?php
for ($counter = 0; $counter < 100; $counter++)
{
?>
<div id="cell">AB</div>
<?php
}
?>
</div>
</div>
<div id="footer">Footer.</div>
<div id="left">Left <div>
</body>
</html>
CSS:
body {
margin: 0px;
}
#header {
height: 100px;
background-color: #9FF300;
}
#centreposition {
width: 600px;
padding-right: 10px;
padding-left: 10%;
}
#centrecontent {
z-index: 100;
min-width: 1px;
height: 40px;
border: 1px solid #999999;
padding: 4px;
background-color: #FFFF00;
overflow-x: scroll;
}
#footer {
padding-left: 175px;
background-color: #20F3F7;
}
#left {
width: 10%;
position: absolute;
top: 100px;
left: 0px;
padding: 10px 0px 10px 6px;
}
#right {
width: 130px;
position: absolute;
top: 100px;
right: 0px;
height: 200px;
}
#cell {
float: left;
width: 24px;
height: 16px;
margin: 1px;
background-color: #aaccdd;
font-size: 10px;
border-style: solid;
border-left-width: 1px;
border-color: #555555;
}
Two suggestions:
You're essentially asking for a table-based layout, so you may as
well use an HTML table.
Each of your cells has a fixed width, and your PHP code should know
how many of them to create, so you can set the width of the
container element (#centrecontent here) wide enough to contain them
all.
Also, element IDs are supposed to be unique within the HTML doc, so creating 100 elements all with #cell as their ID is incorrect - you should use a CSS class name instead.
You could put all of the cells in another div and set that div to a specific width.
jsfiddle
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
I want it to be as simple as this, but I know it isn't:
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
img:hover {
#thisElement {
opacity: 0.3;
filter: alpha(opacity=30);
}
opacity:1;
filter:alpha(opacity=100);
}
So when you hover over img, it changes the opacity of #thisElement to 30% and changes the opacity of the image to 100%. Is there a way to actually do this using only css?
So this is the HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="briefcase.js"></script>
<link rel="stylesheet" type="text/css" href="taskbar.css"/>
<link rel="stylesheet" type="text/css" href="briefcase.css" />
<title>Briefcase</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="mask"></div>
<div class="float">
<div id="album1">Album Title</div>
<img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
<img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
<img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
</body>
</html>
And this is the CSS:
body {
font: normal small/3em helvetica, sans-serif;
text-align: left;
letter-spacing: 2px;
font-size: 16px;
margin: 0;
padding: 0;
}
div.gradientTop {
position: absolute;
margin-top: 5px;
z-index: 2;
width: 206px;
height: 30px;
float: left;
background: -webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0))
}
div.gradientBottom {
position: absolute;
margin-bottom: 5px;
z-index: 2;
width: 206px;
height: 120px;
float: left;
bottom: -210px;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
}
div.float {
border-right: 1px solid orange;
position: absolute;
z-index: 2;
margin-left: 5px;
margin-top: 5px;
float: left;
width: 200px;
}
div.mask {
position: relative;
z-index: 1;
margin-top: 5px;
float: left;
width: 206px;
height: 805px;
background-color: white;
}
img.left {
z-index: inherit;
margin-bottom: 3px;
float: left;
width: 200px;
min-height: 200px;
/* for modern browsers */
height: auto !important;
/* for modern browsers */
height: 200px;
/* for IE5.x and IE6 */
opacity: 0.4;
filter: alpha(opacity=40)
}
img.left:hover + #album1 {
opacity: .4;
}
img.left:hover {
opacity: 1.0;
}
#album1 {
z-index: 2;
width: 200px;
color: white;
text-align: center;
position: absolute;
background: orange;
top: 70px;
}
The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.
In the case of a descendent:
#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
opacity: 0.3;
}
Which will apply to elements such as:
<div id="parent_element">
<div id="child_element">Content</div>
</div>
For adjacent siblings:
#first_sibling:hover + #second_sibling {
opacity: 0.3;
}
Which works for mark-up such as:
<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>
In both cases the latter element in the selector is the one chosen.
Given your pseudo-code example, you probably want something like:
img:hover + img {
opacity: 0.3;
color: red;
}
JS Fiddle demo.
I know you're probably looking for a pure-css way of doing what you want, but I'd suggest you use HTML+CSS+JS as the wonderful MVC structure that they are.
HTML is your Model, containing your data
CSS is your View, defining how the page should look
JS is your Controller, controlling how the model and view interact.
It's the controlling aspect that should be taken advantage of here. You want to control a view of an item on a user interaction. That's exactly what JS is meant for.
With very minimal JavaScript, you could toggle a class on and off of #thisElement when the img is hovered over. It certainly beats playing CSS selector games, although I'd understand if you're only willing to accept a pure-css answer.
I'm experiencing an issue with my CSS when working in Firefox. It should be pretty simple. Everything is working fine except that I cannot seem to get the links in the header aligned to the right (the color will change as well as any other modifications except alignment). The only way I can do it is to float it right, but that reverses the order of the links and seems wrong. Maybe there is a better way to deal with the links in the header than the span that I've used? I will have some more links in the header in another position, though, so I need to specify which links I'm referring to somehow...
Take a look at the code below:
First, the HTML:
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">#import "layout2.css";</style>
</head>
<body>
<div id="all">
<div id="head">
<span class="headlinks">
Logout
</span>
</div>
<div id="menu">
</div>
<div id="content">
</div>
</div>
</body>
</html>"
Now, the CSS:
/* Layout2.css */
#all {
border: none;
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
}
.headlinks a {
text-align:right;
color:#ffffff;
}
#head {
border: none;
position: absolute;
left: 0%;
width: 100%;
height: 10%;
background-color:#336699;
}
#head h1 {
margin-top: 1%;
text-align:right;
}
#menu {
border: none;
position: absolute;
left: 1%;
top: 12%;
width: 20%;
height: 90%;
padding-left: 1%;
padding-right: 1%;
background-color:#b1b2a3;
}
#content{
border: none;
position: absolute;
left: 25%;
top: 12%;
width: 72%;
height: 90%;
padding-left: 1%;
padding-right: 1%;
background-color: #eeeeee;
}
Thanks!
Change <span class="headlinks> to a <div>, and add text-align: right to its CSS style.
You want:
#head { text-align: right; }
The head div is a block element with 100% width. Headlinks is an inline element containing one link. text-align is used on a block element its contents, not on inline elements to indicate how to place them inside their parent.
An alternative approach is to make headlinks a block level element:
span.headlinks { display: block; text-align: right; }
Which to use depends on what you want to achieve.
Try putting the 'text-align:right' on the 'head' div rather than the 'headlinks' span. This style applies to block level elements like div, not inline elements like span.