I have a webpage im trying to layout and it current looks like this.
http://imgur.com/zu4OXHu
I want the purple box to be inline w/ the pink box in the yellow box, which is in the green box. When i change the display field in css to inline-block for the two the whole green box moves down to bottom of grey box w/ height = to yellow box. Why is this happening?
CSS
div.localPlayer {
position: fixed;
bottom: 0;
width: 100%;
left:0;
height: 300px;
background: rgb(181, 181, 181);
text-align:center;
}
div.coinStatus {
position: relative;
top: 0px;
left: 0px;
display: block;
width: 100%;
height: 100px;
background-color:yellow;
}
div.coinInfo {
height: 100px;
width: 100px;
background: purple;
display: block;
}
div.coin {
width: 100px;
height: 100px;
background-size: cover;
background-color: pink;
display: block;
background-image: url('../images/6.png');
}
div.status {
postion: relative;
width: 400px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
background: green;
}
div.card {
width: 180px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
}
div.card.1 {
background-image: url('../images/1.png');
}
div.card.2 {
background-image: url('../images/2.png');
}
div.card.3 {
background-image: url('../images/3.png');
}
div.card.4 {
background-image: url('../images/4.png');
}
div.card.5 {
background-image: url('../images/5.png');
}
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/coup.css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/file.js"></script>
</head>
<body>
<div> Image </div>
<div id="this" class="localPlayer">
<div id="card1" class="card 1"></div>
<div id="card2" class="card 2"></div>
<div id="status" class="status">
<div id="coinStatus" class="coinStatus">
<div class="coin"></div>
<div id="numberOfCoins" class="coinInfo"></div>
</div>
</div>
</div>
</body>
</html>
inline-block elements default alignment is vertical-align:bottom. So that it is going down to bottom. Apply vertical-align:top for your inline block elements. Hopefully it will fix the issue.
div.status {
postion: relative;
width: 400px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
background: green;
vertical-align:top;
}
div.card {
width: 180px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
vertical-align:top;
}
Please check this " adding float: left might fix this
div.localPlayer {
position: fixed;
bottom: 0;
width: 100%;
left:0;
height: 300px;
background: rgb(181, 181, 181);
text-align:center;
}
div.coinStatus {
position: relative;
top: 0px;
left: 0px;
display: block;
width: 400px;
height: 100px;
background-color:yellow;
}
div.coinInfo {
height: 100px;
width: 100px;
background: purple;
display: block;
float:left;
}
div.coin {
width: 100px;
height: 100px;
background-size: cover;
background-color: pink;
display: block;
float:left;
}
div.status {
postion: relative;
width: 400px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
background: green;
vertical-align:top;
}
div.card {
width: 180px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
vertical-align:top;
}
Related
Whenever the pink container touches the bottom of green container I want to make it unsticky. Is it possible? I tried but couldn't achieve it.
here's the code
also codepen link : Click Here
.container1 {
width: 500px;
height: 400px;
background-color: lightblue;
text-align: center;
margin: 0px auto;
position: sticky;
top: 0;
z-index: -1;
}
.container2 {
width: 300px;
height: 200px;
background-color: lightgreen;
text-align: center;
margin: 0px auto;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.container3 {
width: 500px;
height: 400px;
background-color: pink;
text-align: center;
margin: 20px auto;
}
<div class="container1">
<div class="container2">
</div>
</div>
<div class="container3">
</div>
I am still in the process of learning HTML/CSS/Js and was following this tutorial on youtube.
https://www.youtube.com/watch?v=7MDJtw3ZF-4&t=893s
My issue is at around 20:15 time stamp, my eyes.png do not appear. I find this odd because my face.png shows up perfectly fine, which is in the same folder.
<p class="location"></p>
<div class="container">
<div class="face_body">
<div class="face">
<div class="eye_pan">
<div class="pan_area">
<div class="eye eye_l">
<div class="eye eye_r">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and my css
html,body, .container{
height: 100%;
width: 100%;
outline: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
.location{
position: fixed;
top: 0px;
right: 0px;
margin: 0px;
background: rgba(255,255,255,0.4);
padding: 10px;
}
.container{
display: table;
background: rgb(251,220,0);
background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}
.face_body{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.face{
height: 200px;
width: 200px;
margin: auto;
background: url(images/face1.1.png);
background-size: 173px 200px;
background-repeat: no-repeat;
}
.eye_pan{
display: table;
padding: 30px 50px;
}
.pan_area{
width: 70px;
height: 55px;
position: relative;
}
.eye{
height: 20px;
width: 20px;
border-radius: 5px;
position: absolute;
margin-left: 5px;
transition: .5s height ease-in-out;
border: 1px solid red;
background: url(images/eyes.png);
}
.eye_r{
top: 0px;
left: 20px;
}
.eye_l{
top: 50px;
left: 25px;
}
any reasons on why my eyes.png are not showing would be great. Thanks.
Your .eye url background is probably linking to a wrong URL file or it is simply out of the view.
Try inserting background-size: cover; or set it a background-size if the images is loding fine.
html,body, .container{
height: 100%;
width: 100%;
outline: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
.location{
position: fixed;
top: 0px;
right: 0px;
margin: 0px;
background: rgba(255,255,255,0.4);
padding: 10px;
}
.container{
display: table;
background: rgb(251,220,0);
background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}
.face_body{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.face{
height: 200px;
width: 200px;
margin: auto;
background: url(https://images.vexels.com/media/users/3/134743/isolated/preview/97ae591756f3dc69db88c09fd097319a-sad-face-emoji-emoticon-by-vexels.png);
background-size: 173px 200px;
background-repeat: no-repeat;
}
.eye_pan{
display: table;
padding: 30px 50px;
}
.pan_area{
width: 70px;
height: 55px;
position: relative;
}
.eye{
height: 20px;
width: 20px;
border-radius: 5px;
position: absolute;
margin-left: 5px;
transition: .5s height ease-in-out;
border: 1px solid red;
background: url(//cdn.playbuzz.com/cdn/e732686f-35b2-4be6-a5fa-52f388bb0d0d/3637262a-2c14-43b0-9be2-b2174055f790_560_420.jpg);
background-size:cover;
}
.eye_r{
top: 0px;
left: 20px;
}
.eye_l{
top: 50px;
left: 25px;
}
<p class="location"></p>
<div class="container">
<div class="face_body">
<div class="face">
<div class="eye_pan">
<div class="pan_area">
<div class="eye eye_l">
<div class="eye eye_r">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Check if your spellings are correct like 'eye' instead of 'eyes' also check the file format if its say 'jpg' and not 'png'.
Try clearing your browser cache just incase your browser did not load new files
Apply correct CSS syntax for background property and check whether your image path is correct or not.
background: url('images/eyes.png');
Try this and let me know if problem is still raised.
Have a nice day, Cheers !!!
The comments button appears once someone adds a comment (ala medium.com). The p tag which holds the text is inside a bootstrap container which goes down the middle of the page. I want to keep my comments button to the right of that p paragraph.
Here's the screenshot of what I have currently.
As I make the page smaller, the button slides to the left eventually going all the way to the left side of the screen. When it comes to absolute and relative positioning I get a bit confused as I haven't worked with it much. I'm hoping you guys can guide me here.
My ultimate goal here is to keep the comments button to the right of the p tag (the paragraph) even while user is making the page smaller horizontally. If the button has to get responsively smaller, that's ok.
Here's the html and css:
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
EDIT: for more information and the html, here's a link to the github components:
https://github.com/milosbunijevac/medRails/tree/master/app/javascript/packs
and to the stylesheet:
https://github.com/milosbunijevac/medRails/blob/master/app/assets/stylesheets/main_control.scss
The only components I really used in this example are Main.jsx and SideComments.jsx
I have 3 suggestions to keep the button to the right of the p tag. But I needed add a div to wrap your 2 divs.
display: inline-block + white-space: nowrap
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
.wrapContainer {
white-space: nowrap;
}
.wrapContainer>div {
display: inline-block;
}
<div class="wrapContainer">
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
</div>
display: flex
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
.wrapContainer {
display: flex;
flex-flow: row nowrap;
}
.wrapContainer>div {
flex: 1;
}
.wrapContainer>div + div {
flex: 0;
}
<div class="wrapContainer">
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
</div>
You can change the margins and positions, but it maybe is beyond your main problem.
Is there any way to center .polygon_container and .polygon vertically and horizontally? Also is there a possibility to make the size of it responsive like the <img> tag below?
http://cichyone.linuxpl.eu/ranestwen/ex/
I've tried text-align, margin auto etc and nothing works.
When I set it in the middle using margin-left and margin-top it is working only for one resolution.
Just Use following css
.slider .polygon_container {
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin: auto;
color: white;
height: 500px;
text-align: center;
width: 500px;
z-index: 99999;
}
.slider .polygon {
color: white;
height: 500px;
margin: auto;
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
width: 500px;
z-index: 99999;
}
You can easily use flexbox.
.owl-item > div {
display: flex;
justify-content: center;
align-items: center;
}
You can Center the polygon div using tansform:
I created the following HTML:
<div class="polygon_container">
<div class="polygon">
<h1>hello</h1>
</div>
</div>
And for that I´m using this css:
body
{
margin: 0;
padding: 0;
}
.polygon_container
{
width: 100%;
height: 100%;
background: red;
}
.polygon
{
width: 50%;
height: 50%;
background: white;
transform: translateX(50%) translateY(50%);
}
Hope this is a solution for you.
Yes it is possible. Try this.
.polygon_container {
position: absolute;
height: 500px;
width: 500px;
top: 50%;left: 50;
margin-left: -250px;
margin-top: -250px;
}
html, body {
height: 100%;width: 100%;
margin: 0;padding: 0;
}
.container {
height: 100%;width: 100%;
background: url('http://cichyone.linuxpl.eu/ranestwen/ex/assets/img/slider1/1.png') no-repeat;
background-size: cover;
}
.polygon_container {
position: absolute;
height: 100px;
width: 100px;
left: 50%;top: 50%;
margin-top: -50px;
margin-left: -50px;
}
.polygon_container .polygon {
background: #fff;
height: 100%;
width: 100%;
transform: rotate(45deg);
}
<div class="container">
<div class="polygon_container">
<div class="polygon"></div>
</div>
</div>
.slider .polygon_container {
width: 500px;
height: 500px;
position: absolute;
z-index: 99999;
text-align: center;
color: white;
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Updated your class.
I'm fairly new to web development and I'm trying to create a simple chat page using SQL. This is what I currently have: Codepen
HTML:
<body>
<div id="overlay"></div>
<div id="header">
<div id="logo">
</div>
</div>
<div id="chat_extended">
<div id="chat_area"></div>
<input id="chat_input" type="text" placeholder="Chat...">
<button id="send_button" onClick="send()">SEND</button>
</div>
</body>
CSS:
html,
body {
background-color: #333;
margin: 0;
padding: 0;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background: #ccc;
background: -webkit-linear-gradient(right top, #8900AB, #282828);
background: -o-linear-gradient(top right, #8900AB, #282828);
background: -moz-linear-gradient(top right, #8900AB, #282828);
background: linear-gradient(to top right, #8900AB, #282828);
}
#header {
position: absolute;
background: #404040;
width: 100%;
height: 10%;
border-bottom: 10px solid #9800AB;
}
#logo {
position: absolute;
background-image: url(http://csgovoid.net/img/logo.png);
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
#chat_extended {
position: absolute;
background: #404040;
margin-top: 3.15%;
width: 20%;
height: 100%;
float: right;
border-left: 10px solid #9800AB;
text-align: center;
padding-top: 5%;
}
#chat_area {
position: absolute;
background: #ccc;
width: 100%;
height: 100%;
text-align: left;
}
The chat window should be aligned to the left, with the chat area within the chat window, like this:
You don't need float:right when using position: absolute, just remove that and add right: 0 to #chat-extended
#chat_extended {
position: absolute;
background: #404040;
width: 20%;
height: 100%;
border-left: 10px solid #9800AB;
text-align: center;
right: 0;
Hope this helps!
The float property does not work on absolutely positioned elements.
On #chat_extended, Replace this:
float: right;
with this:
right: 0;
Absolute positioning like that isn't really a best practice for a layout like this, so once you get more comfortable, you might want to change it.