I'm trying to make a simple front page but suddenly I can't move my background anymore. Tried it with padding but I can't solve it. Maybe it is because I just started with codes, haha! So what I wanna do is as follows: I want to move my container> background-color: rgba(98, 97, 99, 0.25); more to the center so that it's even on both sides. For some reason the code doesn't show up correctly in here but for me it is. Maybe because I'm using Bootstrap.
body html {
margin: 0;
padding: 0;
}
.container {
background-color: rgba(98, 97, 99, 0.25);
padding-top: 4%;
}
.wrap{
width: 1090px;
}
video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
z-index: -100;
}
.wowImg {
height: 255px;
width: 255px;
border-top: solid black 9px;
border-bottom: solid black 9px;
border-left: solid black 9px;
float: left;
}
.venom {
height: 255px;
width: 255px;
border-bottom: solid black 9px;
border-left: solid black 9px;
float: left;
}
.overwatch {
height: 255px;
width: 255px;
border-top: solid black 9px;
border-bottom: solid black 9px;
border-right: solid black 9px;
border-left: solid black 9px;
float: left;
}
.sum41 {
height: 255px;
width: 255px;
border-bottom: solid black 9px;
border-right: solid black 9px;
border-left: solid black 9px;
float: left;
}
.middle {
height: 510px;
width: 550px;
border-top: solid black 9px;
border-bottom: solid black 9px;
border-left: solid black 9px;
float: left;
}
.whileSheSleeps {
height: auto;
width: 540px;
border-bottom: solid black 9px;
border-left: solid black 9px;
border-right: solid black 9px;
float: left;
}
.monster {
height: 284px;
width: 250px;
border-bottom: solid black 9px;
border-left: solid black 9px;
border-right: solid black 9px;
float: left;
}
.css_awesome {
height: 284px;
width: 285px;
border-bottom: solid black 9px;
border-left: solid black 9px;
border-right: solid black 9px;
float: left;
}
<!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">
<title>homepage</title>
<link href="index.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row col-md-12 wrap">
<div class="row">
<div class="col-md-12">
<div class="wrap">
<div class="row col-md-3 upperLeft">
<div class="row">
<div class="col-md-12">
<img class="wowImg"img">
<img class="venom" src="img">
</div>
</div>
</div>
<div class="col-md-6 Middle">
<div class="row">
<div class="col-md-12">
<img class="middle" src "img">
</div>
</div>
</div>
<div class="row col-md-3 upperRight">
<div class="row">
<div class="col-md-12">
<img class="overwatch" src="img">
<img class="sum41" src="img">
</div>
</div>
</div>
<div class="row col-md-6 bottomLeft">
<div class="row">
<div class="col-md-12">
<img class="whileSheSleeps" src="img">
</div>
</div>
</div>
<div class="row col-md-3 bottomMid">
<div class="row">
<div class="col-md-12">
<img class="monster" src="img">
</div>
</div>
</div>
<div class="row col-md-3 bottomRight">
<div class="row">
<div class="col-md-12">
<img class="css_awesome" src="img">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.container {
background-color: rgba(98, 97, 99, 0.25);
padding-top: 4%;
width: 960px;
margin: 0 auto;
}
Set the container width and then left and right margin: auto;
.container {
background-color: rgba(98, 97, 99, 0.25);
padding-top: 4%;
width: 900px;
margin-left: auto;
margin-right: auto;
}
Add container float:left in css or you can add clear both
body html {
margin: 0;
padding: 0;
}
.container {
background-color: rgba(98, 97, 99, 0.25);
padding-top: 4%;
float:left;
}
.wrap{
width: 1090px;
}
video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
z-index: -100;
}
.wowImg {
height: 255px;
width: 255px;
border-top: solid black 9px;
border-bottom: solid black 9px;
border-left: solid black 9px;
float: left;
}
.venom {
height: 255px;
width: 255px;
border-bottom: solid black 9px;
border-left: solid black 9px;
float: left;
}
.overwatch {
height: 255px;
width: 255px;
border-top: solid black 9px;
border-bottom: solid black 9px;
border-right: solid black 9px;
border-left: solid black 9px;
float: left;
}
.sum41 {
height: 255px;
width: 255px;
border-bottom: solid black 9px;
border-right: solid black 9px;
border-left: solid black 9px;
float: left;
}
.middle {
height: 510px;
width: 550px;
border-top: solid black 9px;
border-bottom: solid black 9px;
border-left: solid black 9px;
float: left;
}
.whileSheSleeps {
height: auto;
width: 540px;
border-bottom: solid black 9px;
border-left: solid black 9px;
border-right: solid black 9px;
float: left;
}
.monster {
height: 284px;
width: 250px;
border-bottom: solid black 9px;
border-left: solid black 9px;
border-right: solid black 9px;
float: left;
}
.css_awesome {
height: 284px;
width: 285px;
border-bottom: solid black 9px;
border-left: solid black 9px;
border-right: solid black 9px;
float: left;
}
<!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">
<title>homepage</title>
<link href="index.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row col-md-12 wrap">
<div class="row">
<div class="col-md-12">
<div class="wrap">
<div class="row col-md-3 upperLeft">
<div class="row">
<div class="col-md-12">
<img class="wowImg"img">
<img class="venom" src="img">
</div>
</div>
</div>
<div class="col-md-6 Middle">
<div class="row">
<div class="col-md-12">
<img class="middle" src "img">
</div>
</div>
</div>
<div class="row col-md-3 upperRight">
<div class="row">
<div class="col-md-12">
<img class="overwatch" src="img">
<img class="sum41" src="img">
</div>
</div>
</div>
<div class="row col-md-6 bottomLeft">
<div class="row">
<div class="col-md-12">
<img class="whileSheSleeps" src="img">
</div>
</div>
</div>
<div class="row col-md-3 bottomMid">
<div class="row">
<div class="col-md-12">
<img class="monster" src="img">
</div>
</div>
</div>
<div class="row col-md-3 bottomRight">
<div class="row">
<div class="col-md-12">
<img class="css_awesome" src="img">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I'm having an issue related to using divs with the display set to table-cell. The purpose of using table-cell was so that the height of these two divs would match up. However, each of these divs also have another div set inside it to create the yellow dotted outline you see in the picture:
When one of the table cells grow, the yellow outline of the other doesn't grow to match its adjacent one. Hoping someone can help me with a fix, any help appreciated. Here is my code below:
.generalinfocontainer {
width: 50%;
height: auto;
background-image: url("https://imgur.com/qbIkHqm.png");
display: table-cell;
border-radius: 25px;
text-shadow: 1px 1px #000000;
}
.statscontainer {
width: 30%;
height: auto;
background-image: url("https://imgur.com/qbIkHqm.png");
display: table-cell;
border-radius: 25px;
text-shadow: 1px 1px #000000;
}
.t {
display: table;
width: 100%;
border-spacing: 20px;
}
.generalinfowrapper {
border-width: 2px;
border-color: yellow;
border-style: dashed;
margin: 3px;
border-radius: 25px;
height: 100%;
padding: 8px;
}
.statswrapper {
border-width: 2px;
border-color: yellow;
border-style: dashed;
margin: 3px;
border-radius: 25px;
height: 100%;
padding: 8px;
}
.statbar {
border-radius: 15px;
background-image: url("https://imgur.com/gdh95cn.png");
padding: 1px;
width: 100%;
height: auto;
border-style: solid;
border-color: black;
border-width: 1px;
}
.fillbar {
border-radius: 15px;
background-color: #a3c1ad;
height: 100%;
padding-left: 4px;
border-color: black;
border-width: 1px;
border-style: solid;
margin: 0px;
}
.boxtitle {
text-align: center;
}
<div class="t">
<div class="generalinfocontainer">
<div class="generalinfowrapper">
[b][size=24][color=yellow]KOMON HYUUGA[/color][/size][/b]
</div>
</div>
<div class="statscontainer">
<div class="statswrapper">
<div class="boxtitle">
[b][size=24][color=yellow]STATISTICS[/color][/size][/b]
</div>
[b]VIGOR[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]CHAKRA[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]SPEED[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]STRENGTH[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
</div>
</div>
The purpose of using table-cell was so that the height of these two divs would match up.
Well, what you are trying to achieve can be done with less code using Flexbox, or CSS Grid. Take a look:
.t {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
.generalinfocontainer,
.statscontainer {
background-image: url("https://imgur.com/qbIkHqm.png");
border-radius: 25px;
text-shadow: 1px 1px #000000;
border-width: 2px;
border-color: yellow;
border-style: dashed;
padding: 8px;
}
.statbar {
border-radius: 15px;
background-image: url("https://imgur.com/gdh95cn.png");
padding: 1px;
border: 1px solid solid black;
}
.fillbar {
border-radius: 15px;
background-color: #a3c1ad;
padding-left: 4px;
border: 1px solid black;
}
.boxtitle {
text-align: center;
}
<div class="t">
<div class="generalinfocontainer">
<div class="generalinfowrapper">
[b][size=24][color=yellow]KOMON HYUUGA[/color][/size][/b]
</div>
</div>
<div class="statscontainer">
<div class="statswrapper">
<div class="boxtitle">
[b][size=24][color=yellow]STATISTICS[/color][/size][/b]
</div>
[b]VIGOR[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]CHAKRA[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]SPEED[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
[b]STRENGTH[/b]<br />
<div class="statbar">
<div class="fillbar" style="width:80%;"> 80/100</div>
</div>
</div>
</div>
</div>
I'm creating a input to contain hours and minutes.I use this html elements:
Two pairs of up and down Buttons;
Input text.
I'm having trouble aligning the html elements.
This is the image with the best alignment I could apply:
This is my code:
.col-centered{
float: none;
margin: 0 auto;
}
.row-1{
padding-top: 3px;
padding-right: 0px;
padding-bottom: 1px;
padding-left: 0px;
}
.triangle-up {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 8px solid #555;
}
.triangle-down {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 8px solid #555;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-1">
<div class="row-1">
<div class = "triangle-up" id ="up1"></div>
</div>
<div class="row-1">
<div class = "triangle-down" id ="down1"></div>
</div>
</div>
<div class="col-xs-2">
<div class = "col-centered">
<input type="text" id="hora" size="5" maxlength="5">
</div>
</div>
<div class="col-xs-1">
<div class="row-1">
<div class = "triangle-up" id ="up"></div>
</div>
<div class="row-1">
<div class = "triangle-down" id ="down"></div>
</div>
</div>
</div>
</div>
I tried, but without success, lining up the elements with pulling to the right. Forcing the left pair of Buttons, to be near the html text entry.
I've changed this piece of code:
<div class="pull-right">
<div class="row-1">
<div class = "triangle-up" id ="up1"></div>
</div>
<div class="row-1">
<div class = "triangle-down" id ="down1"></div>
</div>
</div>
How can I align the html elements so that the two pairs of buttons are close to the input element of text?
This would be a great use case for flexbox! Before, you had things inside the bootstrap grid, which was probably adding the extra spacing you didn't want. For a custom component look, you'd need to just space things out the way you want them to look. Now the triangles are spaced out evenly vertically - even if the height of the <input> is increased!
.spinner-input-wrapper {
display: flex;
}
.spinner {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.spinner-input {
margin: 0 3px;
}
.triangle-up,
.triangle-down {
width: 0;
height: 0;
border: 4px solid transparent;
}
.triangle-up {
border-bottom-width: 8px;
border-bottom-color: #555;
}
.triangle-down {
border-top-width: 8px;
border-top-color: #555;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="spinner-input-wrapper">
<div class="spinner">
<div class="triangle-up" id="up1"></div>
<div class="triangle-down" id="down1"></div>
</div>
<input type="text" class="spinner-input" size="5" maxlength="5">
<div class="spinner">
<div class="triangle-up" id="up2"></div>
<div class="triangle-down" id="down2"></div>
</div>
</div>
If you don't want to learn something else like flexbox all you really need is to clean up your code a bit. In this case the bootstrap layout is making it more difficult. Try simplifying to something like this. Here's my codepen sample
HTML
<div class="container">
<div class="triangles">
<div class="triangle-up" id="up1"></div>
<div class="triangle-down" id="down1"></div>
</div>
<div class="input-text">
<input type="text" id="hora" size="5" maxlength="5">
</div>
<div class="triangles">
<div class="triangle-up" id="up1"></div>
<div class="triangle-down" id="down1"></div>
</div>
</div>
CSS
.triangle-up {
margin-bottom: 6px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 8px solid #555;
}
.triangle-down {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 8px solid #555;
}
.triangles {
float: left;
display: inline-block;
padding: 2px 5px;
}
.input-text {
float: left;
display: inline-block;
}
I would like to create a custom shape like this image
My HTML :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class='row'>
<div class="col-md-10 ">
<div class="col-md-2" style="background-color: yellow;height: 38px;padding:0;">
aaaaa
</div>
<div class="col-md-1" style="padding:0;">
<div class="col-md-12" style="background-color: green; border-radius: 0px 400px 50px 0px/0px 150px 23px 0px;">
mmm
</div>
<div class="col-md-12" style="background-color: red; border-radius: 0px 11px 400px 0px/0px 23px 150px 0px;">
nnnn
</div>
</div>
</div>
</div>
You can simply use pseudo element and data attribute. You will be able de generate the HTML from backend without changing CSS (you simply need to adjust the color as you need) :
* {
box-sizing: border-box;
}
.element {
display: inline-block;
position: relative;
padding: 10px 40px;
background: #ccc;
border: 1px solid #000;
}
.element:before {
content: attr(data-before);
position: absolute;
top: 0;
bottom: 50%;
right: -42px;
width: 40px;
background-image: linear-gradient(45deg, black, red);
border-top-right-radius: 100%;
border: 1px solid #000;
color: #fff;
z-index:99;
}
.element:after {
content: attr(data-after);
position: absolute;
top: 50%;
bottom: 0;
right: -42px;
width: 40px;
background-image: linear-gradient(45deg, black, green);
border-bottom-right-radius: 100%;
border: 1px solid #000;
color: #fff;
z-index:99;
}
<div class="element" data-before="A" data-after="B">
content 1
</div>
<div class="element" data-before="C" data-after="D">
content 2
</div>
<div class="element" data-before="E" data-after="F">
content 3
</div>
Use HTML5 canvas tag and java script to draw you own image in
you can read about it in below link
https://www.w3schools.com/html/html5_canvas.asp
I use the span element as a button to open a sidebar, and I need to position it above the #conteudo element, hiding the orange background... I have been trying some things with no success...
#conteudo {
background-color: green;
height: 100px;
}
body {
height: auto !important;
}
#body {
background-color: orange;
border-left: 1px solid #738290;
border-right: 1px solid #738290;
}
#navSideBtn {
cursor: pointer;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 3px;
border-bottom: solid green 3px;
border-bottom-right-radius: 3px;
border-right: solid green 1px;
color: green;
background-color: whitesmoke;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="body" class="container-fluid text-justify">
<div class="row">
<span id="navSideBtn" data-toggle="tooltip" data-placement="right" class="glyphicon glyphicon-chevron-right"></span>
<section id="conteudo" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2>lorem ipsum title</h2>
</section>
</div>
</div>
Set the .row to position:relative and then you can set the #navSideBtn to be position:absolute and use top/left to position it.
#conteudo {
background-color: green;
height: 100px;
}
body {
height: auto !important;
}
#body {
background-color: orange;
border-left: 1px solid #738290;
border-right: 1px solid #738290;
}
#navSideBtn {
cursor: pointer;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 3px;
border-bottom: solid green 3px;
border-bottom-right-radius: 3px;
border-right: solid green 1px;
color: green;
background-color: whitesmoke;
font-size: 18px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.row {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="body" class="container-fluid text-justify">
<div class="row">
<span id="navSideBtn" data-toggle="tooltip" data-placement="right" class="glyphicon glyphicon-chevron-right"></span>
<section id="conteudo" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2>lorem ipsum title</h2>
</section>
</div>
</div>
My main goal is to have a simple frame (as you can see) with few text lines and images. The thing I want to do, is make this frame flexible. By that I mean - if I change picture inside of it (bigger -> smaller) the frame should change. It should stay fixed.
Online editor: https://www.bootply.com/Y09Zn1wir3#
HTML:
<div class="col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
CSS:
/* CSS used here will be applied after bootstrap.css */
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
margin: 0px 0px 15px 0px;
float: right;
}
.name{
padding: 20px 0px 0px 0px;
color: black;
height: 75px;
font-size: 18px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
}
.first-image{
width: 200px;
}
.second-image{
width: 150px;
}
.extra-info{
border-top: 1px solid orange;
}
.bottom-text{
padding-top: 15px;
height: 50px;
letter-spacing: 0.1em;
}
I tried to add height property to such as:
.single-image{
...
height: 405px;
}
Result: https://www.codeply.com/go/2s2hH3nbju
But it doesn't look correct, as bottom text floats somewhere up.
I need a solution for different type of image sizes. Any ideas?
You need to set the height of .img-wrap, too.
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
margin: 0px 0px 15px 0px;
float: right;
height: 405px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
height:250px;
overflow:hidden;
}
Try to add this new line in your css code.
.img-wrap{
min-height: 275px;
}
it will looks like this
Output
Try using flex
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.name{
padding: 20px 0px 0px 0px;
color: black;
height: 75px;
font-size: 18px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
}
.first-image{
width: 200px;
}
.second-image{
width: 150px;
}
.extra-info{
border-top: 1px solid orange;
align-self: bottom;
}
.bottom-text{
padding-top: 15px;
height: 50px;
letter-spacing: 0.1em;
}
.images-wrap{
display: flex;
}
.single-image-wrap {
height: 100%;
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row images-wrap">
<div class="col-xs-6 col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
</div>