If I put the code of the gallery to display: table-cell block, the gallery does not update its width after reducing the width of the parent block.
HTML:
<div class="page">
<div class="sidebar">
Sidebar
</div>
<div class="mainbar">
Mainbar
<div class="fotorama" data-width="100%" data-ratio="3/2">
</div>
</div>
</div>
CSS:
.page {
display: table;
width: 100%;
}
.sidebar,
.mainbar {
padding: 10px;
display: table-cell;
}
.sidebar {
width: 30%;
background: #BEF781;
}
.mainbar {
background: #F3F781;
width: 70%;
}
Example: http://jsfiddle.net/o3cjqeau/6/
I ran into the same problem, adding "table-layout: fixed;" worked for me:
.page {
display: table;
table-layout: fixed;
width: 100%;
}
Related
Relatively new to React, and am wanting to recreate the design below
enter image description here
I have the base formatting down, but as you will notice, there are lines separating the logo blocks, from the login and signup blocks, with the signup and login buttons pushed to the bottom.
Below is my current code
CSS:
width: 100vw;
height: 100vh;
}
body {
margin: 0;
padding: 0;
}
.Sidebar {
height: 100%;
width: 20%;
background-color: white;
border-right: 1px solid #F0F4FB;
padding-left: 15px;
box-sizing: border-box;
}
.SidebarList {
height: auto;
width: 100%;
padding-left: 15px;
font-size: 18px;
border: 2px #FD954E;
box-sizing: border-box
}
.SidebarList .row {
width: 100%;
height: 50px;
background-color: white;
list-style-type: none;
margin: 0%;
padding-bottom: 15px;
display: flex;
color: #A7ACB6;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.SidebarList .row:hover {
cursor: pointer;
background-color: #E7E7E7 ;
}
.SidebarList #active {
background-color: white;
color: #FD954E
}
.SidebarList .Login {
background-color: white;
color: #FD954E;
width: 279px;
height: 39px;
right: 1596px;
top: 958px;
border: 1px solid #FD954E;
box-sizing: border-box;
border-radius: 19.5px;
}
.SidebarList .SignUp {
width: 279px;
height: 39px;
right: 1596px;
top: 1011px;
background: #FD954E;
border-radius: 19.5px;
border: none;
}
.row #icon {
flex: 30%;
display: grid;
place-items: center;
transform: scale(1.2)
}
.row #title {
flex: 70%;
}
.Logo {
padding-left: 25px;
padding-top: 25px;
padding-bottom: 30px;
border-bottom: 1px solid #F0F4FB;
width: 55%;
}
Sidebar.js
import React from "react";
import "../App.css";
import { SidebarData } from './SidebarData'
import Logo from './Logo.svg'
function Sidebar() {
return (
<div className="Sidebar">
<div>
<img src = {Logo} alt='Logo’ className=‘Logo’ />
</div>
<ul className="SidebarList">
{SidebarData.map((val, key) => {
return (
<li
key={key}
className="row"
id={window.location.pathname == val.link ? "active" : ""}
onClick={() => {
window.location.pathname = val.link;
}}
>
<div id="icon">{val.icon}</div> <div id="title">{val.title}</div>
</li>
);
})}
</ul>
<div className= "SidebarList">
<button className="Login">
Login
</button>
</div>
<div className= "SidebarList">
<button className="SignUp">
Sign Up
</button>
</div>
</div>
);
}
export default Sidebar;
How should I structure my code in order to acheive my desired result? Ex: with the logo at the top with the seperator, the list of navigation elements, and then the login and signup buttons at the bottom with the seperator?
Currently, my sidebar looks as follows, with the seperator not full width between the logo and navigation elements, and the buttons extending beyond the sidebar.
enter image description here
It would be easier to simplify the problem with just HTML and CSS as that's much easier to troubleshoot. Part of your problem is that you are defining the width of the sidebar as a percentage of the screen width but elements within the sidebar are defined with a width in pixels. When the browser window is too small, your buttons will appear outside the full width of the sidebar. You could either code all your values as percentages or in pixels. Alternatively, you could use a mix and just set a min-width for the sidebar so that you don't end up with elements out of place.
The reason that your line break is not the full width of your sidebar is because you are defining it with the border-bottom property of the logo. Your logo is not 100% the width of the sidebar so your line break will only be the width of the logo. A better solution would be to define a div that is set to width: 100%. This way, you will have more control.
Here is a simplified solution to your sidebar problem using pixels to define the widths.
HTML:
<div class="sidebar">
<div class="header">
<div class="logo">Logo</div>
</div>
<div class="line-break" />
<div class="content">
<ul class="nav">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="line-break" />
<div class="footer">
<button class="login">Login</button>
<button class="sign-up">Sign up</button>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.sidebar {
width: 300px;
height: 100%;
border-right: 1px solid grey;
}
.line-break {
height: 1px;
width: 100%;
background-color: grey;
}
.header .logo {
height: 40px;
width: 200px;
background-color: grey;
margin: 20px;
}
ul.nav {
list-style-type: none;
padding: 20px 0 0 40px;
}
ul.nav li {
margin-bottom: 14px;
}
ul.nav li:last-child {
margin-bottom: 0;
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;
}
.footer button {
padding: 6px 0;
width: 80%;
margin-bottom: 14px;
}
.footer button:last-child {
margin-bottom: 0;
}
And here is a link to a CodePen
where you can see this in action.
I have a parent div and inside the parent div there are nested divs. What I want to do is when I hover the last child, I want it to hover over the borders of the parent divs instead of under the parent divs.
<div className="parentDiv">
<div className="childA">
<div className="childB">
<div className="childC">
{conents}
</div>
</div>
</div>
</div>
The css goes here
.parentDiv {
display: flex;
position: relative;
height: 100%;
width: 100%;
}
.childA {
position: relative;
width: 100%;
height: 100%;
}
.childB {
position: relative;
width: 100%;
height: 100%;
}
.childC {
position: relative;
width: 100%;
height: 100%;
transition: transform 450ms;
}
.childC:hover {
transform: scale(2.08);
position: absolute;
zIndex: 10;
},
This is what I have tried so far. But I cant make it hover over the parent div borders.
.childC:hover .parentDiv{
border:2px solid black;
}
This can be done with CSS
At first look at my codes:
JSX:
import React from "react";
import "./styles.scss";
export default function App() {
return (
<div className="App">
<h1> This is a Portfolio Item </h1>
<div className="item-container">
<div className="img-container">
<img
src="https://tf-react-chester.now.sh/images/portfolio-image-5.jpg"
alt="Portfolio 1"
/>
</div>
<h3>This is the Title of Item </h3>
<h4>
This is the description of Item. This is the description of Item.{" "}
</h4>
</div>
</div>
);
}
And CSS(SASS):
.App {
.item-container {
width: 100%;
height:auto;
.img-container {
position: relative;
$margin: 20px;
&::before{
position: absolute;
content: '';
**width: calc(100%-20px);
height: calc(100%-20px);** /* These two line don't work. */
left: 10px;
top: 10px;
background-color: #fff;
transition: all 0.5s ease-in-out;
transform: scaleX(0);
transform-origin: 0;
}
&:hover {
transform: scaleX(1);
}
img{
max-width: 100%;
}
}
}
}
I am trying to create a ::before animated content over the image. But when I am using calc() method it doesn't work at all.
What's the reason?
Note: I have tried some solution to the same problem from StackOverflow but those don't work for me.
This is the codesandbox link:CodeSandBox
Try with spaces ;)
width: calc(100% - 20px);
height: calc(100% - 20px);
I'm trying to find a right solution for stacking different height divs. Tried grid, flex and lastly inline-block.
From what i understand 3rd div(button) is attatched to the bottom of a 2nd div(image). I'm trying to make so it would be attatched to the bottom of a 1st div(text).
Button is being drawn as 3rd div is because button has to go under an image when window size gets too small. Can you even achive this with inline-block?
My current code:
https://jsfiddle.net/mep2x67L/16/
#container {
padding-top: 50px;
padding-bottom: 50px;
display: inline-block;
position: relative;
width: 100%;
height: 100%;
}
#desccription {
width: calc(50% - 20px);
margin-left: 20px;
display: inline-block;
vertical-align: top;
}
#desccription_Container {
margin: 0 auto;
justify-content: left;
text-align: left;
max-width: 560px;
margin-right: 10px;
}
#half_img {
width: 100%;
}
#img_container {
width: 49%;
display: inline-block;
}
.btnWrap {
display: inline-block;
width: 355px;
vertical-align: top;
text-align: center;
}
#normal_text {
font-size: 36px;
line-height: 42px;
color: #F1ECE3;
}
#btnWrap {
display: inline-block;
width: 355px;
vertical-align: top;
text-align: center;
}
<div id="container">
<div id="desccription">
<div id="desccription_Container">
<div id="normal_text"> hello hello </div>
</div>
</div>
<div id="img_container">
<img id="half_img" src="https://wallpapercave.com/wp/6K44j5E.jpg">
</div>
<div id="btnWrap">
<button type="button">Button!</button>
</div>
</div>
All you need to do is float your image div right - below I have commented the line I added. I have also added a clear fix and changed the width of the button wrap so it works on smaller screen sizes.
#container {
padding-top: 50px;
padding-bottom: 50px;
position: relative;
width: 100%;
height: 100%;
}
#container:after { /* clear fix */
content: '';
display: block;
height: 0;
overflow: hidden;
clear: both;
}
#desccription {
width: calc(50% - 20px);
margin-left: 20px;
display: inline-block;
vertical-align: top;
}
#desccription_Container {
margin: 0 auto;
justify-content: left;
text-align: left;
max-width: 560px;
margin-right: 10px;
}
#half_img {
width: 100%;
}
#img_container {
width: 49%;
display: inline-block;
float:right; /* add this */
}
#normal_text {
font-size: 36px;
line-height: 42px;
color: #F1ECE3;
}
#btnWrap {
width: calc(50% - 20px); /* I would make this the same size as desccription */
vertical-align: top;
text-align: center;
}
<div id="container">
<div id="desccription">
<div id="desccription_Container">
<div id="normal_text"> hello hello </div>
</div>
</div>
<div id="img_container">
<img id="half_img" src="https://wallpapercave.com/wp/6K44j5E.jpg">
</div>
<div id="btnWrap">
<button type="button">Button!</button>
</div>
</div>
You can use Grid - it's super easy, and you can control the position and grid layout with just media queries, etc. And it requires much less CSS when you learn how to use grid properly.
To learn about flexbox, I'd recommend this source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Similarly, to learn CSS grids, there is: https://css-tricks.com/snippets/css/complete-guide-grid/
It'll take about a day of your time, and you'll get a great grasp of how grids and flexbox work, helping you create better designs in the future.
For the current example, see the fiddle with CSS-grids:
https://jsfiddle.net/5u69aaun/
#container {
padding-top: 50px;
padding-bottom: 50px;
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr 1fr;
width: 100%;
height: 100%;
}
#description{
padding-left: 20px;
padding-right: 10px;
grid-row: 1;
grid-column: 1;
text-align: left;
}
#description_Container{
max-width: 560px;
}
#half_img {
width: 100%;
}
#img_container {
grid-row: 1 / 3;
grid-column: 2;
}
.btnWrap{
grid-row: 2;
grid-column: 1;
}
#normal_text{
font-size: 36px;
line-height: 42px;
color: red;
}
#btnWrap{
text-align: center;
}
<div id="container">
<div id="description">
<div id="description_Container">
<div id="normal_text"> hello hello </div>
</div>
</div>
<div id="img_container">
<img id="half_img" src="https://wallpapercave.com/wp/6K44j5E.jpg" >
</div>
<div id="btnWrap">
<button type="button">Button!</button>
</div>
</div>
I have two arrays whose elements I want to display as nested divs:
$scope.boxes = [{
id:1,
isLit: false,
color: 'green'
}, {
id:2,
isLit: false,
color: 'blue'
}, {
id:3,
isLit: false,
color: 'red'
}, {
id:4,
isLit: false,
color: 'yellow'
}];
$scope.images=[
{
id:1, path: './img/Baum_grün.png', color:'green'
},
{
id:2, path: './img/Baum_blau.png', color:'blue'
},
{
id:3, path: './img/Baum_rot.png', color:'red'
},
{
id:4, path: './img/Baum_gelb.png', color:'yellow'
}
]
I want to arrange them in following manner (consider those stars being images):
Right now my template looks like following:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)" ng-click="boxClick(box.id)" ng-audio="sounds/beep-08b.mp3" volume="0.5">
</div>
</div>
<div class="image" ng-repeat="image in images" ng-if="showImages" ng-click="imageClick(image.id, image.color)">
<img src="{{image.path}}">
</div>
</div>
And my css:
.outer-wrapper {
width: 250px;
}
.inner-wrapper {
width: 200px;
}
.box {
position: relative;
height: 50px;
width: 50px;
border: 1px solid black;
margin: 10px;
float: left;
}
.green {
background-color: green;
opacity: 0.3;
}
.blue {
background-color: blue;
opacity: 0.3;
}
.red {
background-color: red;
opacity: 0.3;
}
.yellow {
background-color: yellow;
opacity: 0.3;
}
.lit {
opacity: 1.0;
}
.image img{
height: 50px;
width: 100px;
margin-top: 45px;
float: right;
border: 0.5px solid;
margin: 10px;
}
This much code gives me following result:
What and how should I modify my css/html to achieve the desired result, it also has be responsive at least till medium sizes screens ?
It's easy if you can use flexbox - the new layout mode in CSS3. You can read more about it here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If you can use it, here's how you could do it:
<div id="first-container">
<div id="a">
a
</div>
<div id="b">
b
</div>
</div>
<div id="wrapper">
<div id="div-container">
<div id="x">
x
</div>
<div id="y">
y
</div>
</div>
<div id="div1-container">
<div id="z">
z
</div>
<div id="q">
q
</div>
</div>
</div>
<div id="second-container">
<div id="c">
a
</div>
<div id="d">
b
</div>
</div>
And the CSS:
#first-container, #second-container {
display: flex;
justify-content: space-between;
}
#wrapper {
display: flex;
flex-direction: column;
}
#div-container, #div1-container {
display: flex;
align-items: center;
justify-content: center;
}
#a, #c {
width: 20%;
border: solid 1px #000;
}
#b, #d {
width: 20%;
border: solid 1px #000;
}
Also, here's a working fiddle: http://jsfiddle.net/zeLh0foy/72/