I want the left column (#left) to have overflow-y: scroll and overflow-x: visible. However, the overflow-x ends up being scroll when I test it despite the code saying different. What am I doing wrong? Thanks.
$(document).ready(function(){
$("#title").click(function(){
$("#title").hide();
});
$("#one").click(function(){
$("#one").addClass("open");
$("#oneBottom").addClass("clicked");
$("#two").removeClass("open");
$("#twoBottom").removeClass("clicked");
$("#three").removeClass("open");
$("#threeBottom").removeClass("clicked");
$("#four").removeClass("open");
$("#fourBottom").removeClass("clicked");
$("#five").removeClass("open");
$("#fiveBottom").removeClass("clicked");
});
$("#two").click(function(){
$("#two").addClass("open");
$("#twoBottom").addClass("clicked");
$("#one").removeClass("open");
$("#oneBottom").removeClass("clicked");
$("#three").removeClass("open");
$("#threeBottom").removeClass("clicked");
$("#four").removeClass("open");
$("#fourBottom").removeClass("clicked");
$("#five").removeClass("open");
$("#fiveBottom").removeClass("clicked");
});
$("#three").click(function(){
$("#three").addClass("open");
$("#threeBottom").addClass("clicked");
$("#one").removeClass("open");
$("#oneBottom").removeClass("clicked");
$("#two").removeClass("open");
$("#twoBottom").removeClass("clicked");
$("#four").removeClass("open");
$("#fourBottom").removeClass("clicked");
$("#five").removeClass("open");
$("#fiveBottom").removeClass("clicked");
});
$("#four").click(function(){
$("#four").addClass("open");
$("#fourBottom").addClass("clicked");
$("#one").removeClass("open");
$("#oneBottom").removeClass("clicked");
$("#two").removeClass("open");
$("#twoBottom").removeClass("clicked");
$("#three").removeClass("open");
$("#threeBottom").removeClass("clicked");
$("#five").removeClass("open");
$("#fiveBottom").removeClass("clicked");
});
$("#five").click(function(){
$("#five").addClass("open");
$("#fiveBottom").addClass("clicked");
$("#one").removeClass("open");
$("#oneBottom").removeClass("clicked");
$("#two").removeClass("open");
$("#twoBottom").removeClass("clicked");
$("#three").removeClass("open");
$("#threeBottom").removeClass("clicked");
$("#four").removeClass("open");
$("#fourBottom").removeClass("clicked");
});
});
.open{
margin-left: 124% !important;
margin-top: 18% !important;
width: 187% !important;
height: 80% !important;
font-size: 250% !important;
}
.clicked{
border: red solid 3px !important;
}
html{
width: 100%;
height: 100%;
margin: 0px;
border: 0px;
}
body{
width: 100%;
height: 100%;
margin: 0px;
border: 0px;
}
#title{
height: 10%;
width: 100%;
margin-bottom: 1%;
background-color: rgba(0, 0, 255, 0.5);
}
h1{
text-align: center;
}
#left{
width: 30%;
height: 100%;
position: absolute;
overflow-y: scroll;
overflow-x: visible;
}
#right{
width: 70%;
height: 100%;
position: absolute;
margin-left: 30%;
border-left: solid 2px black;
}
.card{
height: 20%;
width: 80%;
margin-left: 10%;
position: absolute;
background-color: blue;
border-radius: 5px;
border: grey solid 2px;
}
.first{
margin-top: 6.5%;
}
#one{
background-color: green;
}
.second{
margin-top: 50%;
}
#two{
background-color: green;
}
.third{
margin-top: 93%;
}
#three{
background-color: green;
}
.fourth{
margin-top: 136%;
}
#four{
background-color: green;
}
.fith{
margin-top: 179%;
}
#five{
background-color: green;
}
#main{
width: 80%;
height: 80%;
margin-left: 10%;
margin-top: 7.5%;
background-color: white;
border-radius: 5px;
border: grey solid 3px;
opacity: 0.5;
}
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="title">
<h1>Blah Blah Blah</h1>
</div>
<div id="left">
<div class="card first" id="oneBottom">
<h1>Hello</h1>
<p>Heljaldf</p>
</div>
<div class="card first" id="one">
<h1>Hello</h1>
<p>Heljaldf</p>
</div>
<div class="card second" id="twoBottom">
<h1>Sup</h1>
</div>
<div class="card second" id="two">
<h1>Sup</h1>
</div>
<div class="card third" id="threeBottom">
</div>
<div class="card third" id="three">
</div>
<div class="card fourth" id="fourBottom">
</div>
<div class="card fourth" id="four">
</div>
<div class="card fith" id="fiveBottom">
</div>
<div class="card fith" id="five">
</div>
</div>
<div id="right">
<div id="main">
</div>
</div>
</body>
</html>
The issue you're having with #left is that you're mixing visible with scroll. Because you're mixing values it's going to treat visible as auto instead.
Check out the W3 documentation on this here: http://www.w3.org/TR/css3-box/#collapse-scroll
Related
I want to remove the small gap between my footer and the web page on the left site but currently this is exceeding my capabilities I tried different ways like setting the width to 100% but none of them worked. The footer should fill the whole page vertically and should not remain a gap. How can I implement this?
.options {
height: auto;
max-height: 313px;
max-width: 750px;
width: auto;
padding-top: 150px;
padding-bottom: 50px;
display: flex;
flex-direction: column;
gap: 10px;
margin-left: auto;
margin-right: auto;
}
.button {
background-color: rgb(226, 226, 226);
height: 418.75%;
width: auto;
padding: 21px 25px 22px 25px;
box-sizing: border-box;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
font-size: 14px;
line-height: 16.8px;
display: block;
position: relative;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
.button:hover,
#backward:hover,
#forward:hover {
background-color: rgb(212, 21, 27);
color: white;
}
.button-bar {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
margin-top: auto;
}
.nav-inner {
cursor: pointer;
width: 50%;
text-align: center;
line-height: 83px;
}
#backward {
background-color: rgb(101, 93, 93);
color: white;
}
#forward {
background-color: rgb(191, 191, 191);
}
<div class="options">
<div class="option">
<div class="button">
<div class="text">1</div>
</div>
</div>
<div class="option">
<div class="button">
<div class="text">2</div>
</div>
</div>
<div class="option">
<div class="button">
<div class="text">3</div>
</div>
</div>
<div class="option">
<div class="button">
<div class="text">4</div>
</div>
</div>
<div class="option">
<div class="button">
<div class="text">5</div>
</div>
</div>
</div>
<div class="button-bar">
<div class="nav-inner" id="backward">
< zurück</div>
<div class="nav-inner" id="forward">weiter ></div>
</div>
</div>
i think you forgot to add "left" to your container
.button-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
margin-top: auto;
}
How can I center this image that I have in this div in a way that it won't move the 'line' div? I want the line to be touching the top of the square too.
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
Here is one way to prevent it from disrupting the flow layout of your container:
you can make the container a position of relative, and the image a position of absolute, positioned off the top and left by 50%, then transform it so that the center of the image is in the center position.
You could also just make the image a background-image of the div instead of using an image element, which may be easier to manipulate.
.black {
background: black;
}
.square {
position: relative;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
</div>
I'm not sure I understand your exact desired end goal. But, if I understand correctly, you could create a flex parent to justify the image, and then position the line absolutely within that. See -
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
background-color: red;
position: absolute;
left: 0;
top: 0;
bottom: 0
}
<div class="square black">
<div class="line"></div>
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
You can just use these css for .square and .image
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
position: relative;
}
.image {
height: 60px;
width: 60px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You can easily center a image by using CSS position absolute. By making the position of square black class "absolute" and apply to properties "top: 45%;" and "left: 47%" . By applying this your problem will be definitely solve.
.black {
background: black;
}
.square {
display: flex;
align-item: center;
justify-content: center;
width: 200px;
height: 500px;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
</div>
.black {
background: black;
}
.square {
position: absolute;
top: 45%;
left: 47%;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top:50%;
left:50%;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
I have run into this problem I just can't fix and I believe it is due to the margin being so big.
The problem is that I would like 3 images beside each other on my website but they don't want to be next to each other because I believe the margin is so big.
I am very new to coding sorry if I'm missing something.
body {
background-color: AliceBlue;
font-family: "Helvetica", sans-serif;
color: black;
}
.arms {
height: 300px;
border-radius: 10px;
left: 300px;
}
#imgarms {
left: 300px;
}
a {
display: block;
width: 400px;
height: 320px;
border: 2px solid #F0FFFF;
border-radius: 10px;
box-sizing: border-box;
padding: 10px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
z-index: 10;
}
a:hover {
border-color: black;
}
.title {
position: absolute;
left: -20px;
}
.title {
position: relative;
margin-left: auto;
margin-right: auto;
left: -30;
}
#title {
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
z-index: 0;
}
.abs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.shoulders {
height: 300px;
border-radius: 10px;
left: 300px;
}
.back {
height: 300px;
border-radius: 10px;
left: 300px;
}
.legs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.chest {
height: 300px;
border-radius: 10px;
left: 300px;
}
.cardContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 10px;
}
<body>
<div id="title" class="title">
<img id="title" class="title" src="https://trinket-user-assets.trinket.io/4e936b48ef16b9730de36cbbaec1c6c1e4988efc-5ea104f02cc0c3264f51231e.png" alt="title" />
</div>
<div class="cardContainer">
<a href="arms.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8c41ed921e47afbbd3c097a06f8d44186fabf24e-5e9faf172cc0c3264f47ec6b.png" class="arms">
</article>
</a>
<a href="abs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8a1dbd5f8fcbc27772e44b9edadb3eea4d5f8e3d-5e9faf172cc0c3264f47ec6a.png" class="abs">
</article>
</a>
<a href="shoulders.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/6ba09699551ac1bc979673bbf99fee75b4064d10-5e9faf182cc0c3264f47ec71.png" class="shoulders">
</article>
</a>
<a href="back.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/a6776f95e6b7868be91d5aa0e89710e64e62fff8-5e9faf182cc0c3264f47ec6d.png" class="back">
</article>
</a>
<a href="legs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/b628c0bca25058c3dac2cffcaff1ae4552522e7e-5e9faf182cc0c3264f47ec70.png" class="legs">
</article>
</a>
<a href="chest.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/373f3cbc6207fa4f67b4bcccb42f3b344c3fd10b-5e9faf182cc0c3264f47ec6f.png" class="chest">
</article>
</a>
</div>
</body>
I assume that you are trying to stick the images on your main page together. This is caused by the margins on your a tags together with the justify-content: space-around; of the .cardContainer.
To make the images stick together, remove the margins in the a and change justify-content: center in .cardContainer.
Your code with my modifications is added below.
When you use justify-content: space-around; the remaining space that elements can't take, will be spread around the items. This is displayed in the image (and snippet) below. This has space between items even though there is no margin.
.item{
background: lightgreen;
border: 2px solid darkgreen;
width: 100px;
height: 100px;
}
.wrapper{
justify-content: space-around;
display: flex;
flex-wrap: wrap;
height: 300px;
width: 390px;
padding: 10px;
background: lightblue;
border: 2px dotted darkblue;
}
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
When you use justify-content: center; instead, the remaining space where elements can't go will only be added to the left and to the right of the content. So it gets centered and there will be no space inbetween the items (except if you set a margin or padding).
.item{
background: lightgreen;
border: 2px solid darkgreen;
width: 100px;
height: 100px;
}
.wrapper{
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 300px;
width: 390px;
padding: 10px;
background: lightblue;
border: 2px dotted darkblue;
}
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Your modified code:
body {
background-color: orange;
}
body {
background-color: AliceBlue;
font-family: "Helvetica", sans-serif;
color: black;
}
nav ul {
background-color: tomato;
}
.arms {
height: 300px;
border-radius: 10px;
left: 300px;
}
#imgarms {
left: 300px;
}
a {
display: block;
width: 400px;
height: 320px;
border: 2px solid #F0FFFF;
border-radius: 10px;
box-sizing: border-box;
/* remove this padding to make the images really stick together */
padding: 10px;
z-index:10;
}
a:hover {
border-color: black;
}
.title {
position: absolute;
left:-20px;
}
.title {
position: relative;
margin-left: auto;
margin-right: auto;
left:-30;
}
#title {
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
z-index: 0;
}
.abs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.shoulders {
height: 300px;
border-radius: 10px;
left: 300px;
}
.back {
height: 300px;
border-radius: 10px;
left: 300px;
}
.legs {
height: 300px;
border-radius: 10px;
left: 300px;
}
.chest {
height: 300px;
border-radius: 10px;
left: 300px;
}
.cardContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
}
/**********************************
This section is for styling tables
***********************************/
table, th, td {
border: 1px solid HoneyDew;
border-collapse: collapse;
}
tr {
background-color: PaleTurquoise;
}
th, td {
vertical-align: top;
padding: 5px;
text-align: left;
}
th {
color: purple;
}
td {
color: purple;
}
/********************************/
<!DOCTYPE html>
<html>
<head>
<title>Get Fit</title>
<link type="text/css" rel="stylesheet" href="styles.css"/>
<meta charset="utf-8"/>
</head>
<body>
<header>
</header>
<main>
<div id="title" class="title">
<img id="title" class="title" src="https://trinket-user-assets.trinket.io/4e936b48ef16b9730de36cbbaec1c6c1e4988efc-5ea104f02cc0c3264f51231e.png" alt="title" />
</div>
<div class="cardContainer">
<a href="arms.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8c41ed921e47afbbd3c097a06f8d44186fabf24e-5e9faf172cc0c3264f47ec6b.png" class="arms">
</article>
</a>
<a href="abs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/8a1dbd5f8fcbc27772e44b9edadb3eea4d5f8e3d-5e9faf172cc0c3264f47ec6a.png" class="abs">
</article>
</a>
<a href="shoulders.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/6ba09699551ac1bc979673bbf99fee75b4064d10-5e9faf182cc0c3264f47ec71.png" class="shoulders">
</article>
</a>
<a href="back.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/a6776f95e6b7868be91d5aa0e89710e64e62fff8-5e9faf182cc0c3264f47ec6d.png" class="back">
</article>
</a>
<a href="legs.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/b628c0bca25058c3dac2cffcaff1ae4552522e7e-5e9faf182cc0c3264f47ec70.png" class="legs">
</article>
</a>
<a href="chest.html#scBarnowl">
<article class="card">
<img src="https://trinket-user-assets.trinket.io/373f3cbc6207fa4f67b4bcccb42f3b344c3fd10b-5e9faf182cc0c3264f47ec6f.png" class="chest">
</article>
</a>
</div>
</main>
<footer>
</footer>
</body>
</html>
So, whenever there is content inside the boxes, they align weird and not side by side. How do i fix this? Ive tried quite alot and i havent been able to figure it out.
Any help here would be greatly appreciated/
So i have This as my main code:
.content-wrapper {
background-color: #B31CFF;
width: 100%;
height: 1000px;
}
.content {
background-color: #E3E3E3;
width: 80%;
height: 1000px;
margin-left: 10%;
margin-right: 10%;
}
.donator-box {
border: 3px solid #FFF;
background-color: #FFF;
margin: 1%;
display: inline-block;
width: 47%;
height: 250px;
border-radius: 5px;
overflow: hidden;
}
.donator-box {
padding: 5px;
}
<div class="content-wrapper">
<div class="content">
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="advert">
</div>
</div>
</div>
Add box-sizing: border-box; at ".donator-box"
.content-wrapper {
background-color: #B31CFF;
width: 100%;
height: 1000px;
}
.content {
background-color: #E3E3E3;
width: 80%;
height: 1000px;
margin-left: 10%;
margin-right: 10%;
}
.donator-box {
border: 3px solid #FFF;
background-color: #FFF;
margin: 1%;
display: inline-block;
width: 47%;
height: 250px;
border-radius: 5px;
overflow: hidden;
box-sizing: border-box;
}
.donator-box {
padding: 5px;
}
<div class="content-wrapper">
<div class="content">
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="advert">
</div>
</div>
</div>
I'm facing a problem:
I want to put 3 divs horizontally with itself, but i'm not getting to do it right.
Could someone help?
I've already searched a lot about properties in css and html, but i couldn't apply to what i'm doing.
With the normal zoom:
http://i.imgur.com/ylk5pm2.png
What i want:
http://i.imgur.com/47kzlpv.png
Codes:
.container {
width:100%;
border-color: #FF0000;
border-style: solid;
border-width:medium;
text-align:center;
margin-bottom: 1%;
}
.menu_box_filtro{
display:inline;
}
.conteudo_box_filtro{
display:inline-block;
}
<div class="border_preta">
<div class="menu_box_filtro">
<div class="grid_10 border_brown conteudo_box_filtro">
</div>
</div>
<div class="menu_box_filtro">
<div class="grid_63 border_brown conteudo_box_filtro">
menu centro
</div>
</div>
<div class="menu_box_filtro">
<div class="grid_10 border_brown conteudo_box_filtro">
menu direita
</div>
</div>
</div>
You can check with the below link.
Fiddle
<div class="main">
<div class="inner">
<div class="left-col">Left</div>
<div class="center-col">Center</div>
<div class="right-col">Right</div>
</div>
Check this
.container{
width: 90%;
max-width: 900px;
margin: 0 auto;
background-color:#F0A202;
}
.group{
content:"";
display:table;
clear:both;
}
div:nth-of-type(1) {
width: 36%;
float: left;
}
div:nth-of-type(2) {
width: 30%;
float: left;
margin-left: 4%;
}
div:nth-of-type(3) {
width: 26%;
float: right;
}
<div class="container group">
<div>
<p>First<p>
</div>
<div>
<p>Second<p>
</div>
<div>
<p>Third<p>
</div>
</div>
Here is an example using FlexBox.
.container {
width: 100%;
border-color: #FF0000;
border-style: solid;
border-width: medium;
display: flex;
align-items: center;
}
.container>* {
flex-grow: 1;
}
.menu_box.left {
background-color: rgba(255, 0, 0, 0.5);
height: 100px;
}
.menu_box.center {
background-color: rgba(0, 255, 0, 0.5);
height: 200px;
}
.menu_box.right {
background-color: rgba(0, 0, 255, 0.5);
height: 100px;
}
<div class="container">
<div class="menu_box left">Left</div>
<div class="menu_box center">Center</div>
<div class="menu_box right">Right</div>
</div>