I have a problem in my HTML code I want to center something that is inside a division that is inside a division. I am not really sure how. This is my code:
HTML CODE(ACTUALLY A PHP FILE):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mateo.css">
<title>Mateo's About Page</title>
</head>
<body>
<div class="items">
<div id="basicInfo">
<img src="images/question.png">
</div>
<div id="langs">
<img src="images/code.jpg">
</div>
</div>
<div id="textSpace">
</div>
<?php
$username = $_POST['username'];
$password = $_POST['password'];
$accounts = mysqli_connect("localhost","root","BKpH7e6k","accounts") or die(mysqli_error());
mysqli_select_db($accounts, "accounts");
$sql = "
SELECT * from users WHERE Username LIKE '{$username}' AND Password LIKE '{$password}' LIMIT 1
";
$results = $accounts->query($sql);
if(!$results->num_rows == 1){
header("Location: http://localhost/aboutPage/login.php");
} else {
echo "<p>Logged in successfully!</p>";
}
?>
</body>
</html>
And this is my css file:
body {
background: url("images/background.jpg") repeat;
font-size: 100%;
font-family: Arial;
}
.items {
display: block;
background-color: gray;
max-width: 50%;
max-height: 100%;
border-radius: 20px;
border: 2px solid black;
opacity: .8;
margin-left: auto;
margin-right: auto;
}
#basicInfo{
background-color: orange;
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#basicInfo:hover{
background-color: green;
}
#basicInfo img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs{
background-color: orange;
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#langs img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs:hover{
background-color: green;
}
And this is a picture or the problem.
So I want the orange boxes to float next to each other in the center of the div they are in. Any help is appriciated :) Thanks1
Since you're using display: inline-block on #basicInfo and #langs just call text-align: center on the parent .items:
.items {
display: block;
background-color: gray;
max-width: 50%;
max-height: 100%;
border-radius: 20px;
border: 2px solid black;
opacity: .8;
margin-left: auto;
margin-right: auto;
text-align: center; //add
}
FIDDLE
add text-align: center to your .items class (http://jsfiddle.net/cz19q7a9/)
.items
{
text-align: center;
}
Just do margin: auto on the inside div, it will center according to it's parent. Here is an example.
Related
I am trying to create a footer at the end of this website but for some reason it appears above the products :
And when I change the browser size :
But I want a footer like this :
Here is my code :
HTML :
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'main.css' %}">
</head>
<body style="background-color: #36454F;">
{% for i in p%}
<div class='card'>
<div class="number">{{i.Number}}</div>
<img src="{{i.image}}"></img>
<p id="id">{{i.description}}</p>
<a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
<button><span class="price"> ${{i.price}}</span> buy</button>
</a>
</div>
{%endfor%}
<div class="footer">
<h3>hello</h3>
</div>
</body>
</html>
CSS :
.card {
max-width: 400px;
margin: 0auto;
text-align: center;
font-family: arial;
border-style: solid;
border-width: 6px;
position: relative;
top: 611px;
margin-bottom: 33px;
margin-right: 33px;
justify-content: center;
float: left;
}
.footer {
position: relative;
height: 130px;
clear: both;
background-color: red;
}
.card img {
height: 400px;
width: 400px;
vertical-align: middle;
}
.price {
background-color: #f44336;
font-size:22px;
border-radius: 3px;
position: absolute;
bottom: 0px;
right: 0px;
padding: 3px;
}
.card button {
border: none;
color: white;
background-color: #000;
position: relative ;
cursor: pointer;
width: 100%;
height: 100px;
font-size: 44px;
align-items: center;
}
.card button:hover {
opacity: .5;
background-color: #330;
}
#id {
background-color: palevioletred;
color: white;
margin: 0;
font-size: 17px;
}
.number {
width: 50px;
height: 50px;
background-color: #330;
color: yellow;
border-radius: 50%;
position: absolute;
top: -22px;
right: -22px;
justify-content: center;
align-items: center;
display: flex;
font-size: 22px;
}
#media (max-width: 1864px) {
.card {
max-width: 300px;
}
.price {
font-size:20px;
}
.card img {
height: 300px;
width: 300px;
}
}
I tried to set a negative bottom property to push it to the end :
.footer {
position: relative;
bottom: -674px;
height: 130px;
clear: both;
background-color: red;
}
But it didn't help. How can i solve the problem?
To set the footer to the bottom of the page, you need to use this CSS:
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf; /* Set your own background */
}
If you want it to stay at the bottom of the page and stretch along the bottom, I'd do something like this with the CSS
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: (whatever you want);
color: (color of the text, whatever you want);
text-align: center; /*unless you want the text aligned differently*/
}
Also look up how to use the grid-container if you want the items of the footer in rows like the example you gave.
You need the footer tag to do its job!
Read more about the footer tag here:
https://www.geeksforgeeks.org/html5-footer-tag/
Reference: https://code-boxx.com/keep-html-footers-at-bottom/
The easy ways to keep a footer at the bottom with modern CSS are:
Use footer { position: fixed} or footer { position: sticky } to
keep the at the bottom.
Use a flexbox layout that "stretches" the body section, keep the
footer at the bottom.
body{ display: flex; flex-direction: column; }
main{ flex-grow: 1; }
Lastly, use a grid layout to achieve the same "stretch body
section".
<header>HEAD</header> <main>MAIN</main> <footer>FOOT</footer>
html, body { height: 100%;}
body { disply: grid; grid-template-rows: auto 1fr auto; }
I'm new to CSS and I'm trying to place some dots at position 0,0 of it's parent div, but when I do so according to the below code, the dots disappear.
* CSS Code: *
.timeslot{
background-color: green;
border-top: solid gray;
}
.timeslot.selected{
border: #cc0000;
}
.timeslot.selected .dot{
background-color: #cc0000;
}
.timeslot .dot{
background-color: gray;
}
.dot {
position: absolute;
height: 25px;
width: 25px;
background-color: firebrick;
border-radius: 50%;
display: inline-block;
}
.square {
height: 25px;
width: 40px;
background-color: #555;
}
.dot .span {
padding-top: 8px;
}
.time-line-box {
height: 100px;
padding: 50px 0;
width: 100%;
/* background-color: burlywood;*/
}
.swiper-container {
width: 95%;
margin: auto;
overflow-y: auto;
}
.swiper-wrapper{
display: inline-flex;
flex-direction: row;
overflow-y:auto;
justify-content: center;
border-top-width: 20px;
}
.swiper-container::-webkit-scrollbar-track{
background:#a8a8a8b6;
}
.swiper-container::-webkit-scrollbar{
height: 2px;
}
.swiper-container::-webkit-scrollbar-thumb{
background: #4F4F4F !important;
}
.swiper-slide {
text-align: center;
font-size: 12px;
width: 50px;
height: 100%;
/*position: relative;*/
}
* HTML Code: *
<section class="time-line-box">
<div class="swiper-container text-center">
<div class="swiper-wrapper">
<div *ngFor="let time of dropDownArray" class="timeslot swiper-slide">
<div class="dot" [style.background-color]="getBackgroundColor(time)"><span>{{time.label}}</span></div>
</div>
</div>
</div>
</section>
I'm trying to place each dot at the absolute position of it's parent div timeslot . I might be missing something but I really tried everything I know. Hope to find some help.
Add position relative to your parent
.timeslot{
// ...
position: relative;
}
I'm trying to center a text inside a div, this div contains an image + another div which contains the text that needs to be centered.
See image the following image:
The problem I'm facing is that the image which is also in the div doesn't allow me to outline the text in the center.
I tried to apply padding and margins(even negatives ones) however with no results
So right now this is the code I have in my HTML & CSS files:
.destinations {
padding: 5px 15px;
}
.destinations img {
max-width: 100%;
max-height: 100%;
border-radius: 10px;
}
.flex-item {
width: 290px;
height: auto;
border-radius: 10px;
margin: auto;
}
.flex-item-title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="flex-item">
<img src="assets/img/wassenaar.jpg">
<div class="flex-item-title">Wassenaar</div>
</div>
</div>
I hope you can help me out
Here is one approach to vertically and horizontally center the text over the image:
.destinations {
padding: 5px 15px;
}
.destination {
width: 290px;
height: 290px;
display: flex;
border-radius: 10px;
margin: auto;
background-image: url("https://placekitten.com/500/500");
justify-content: center;
align-items: center;
}
.title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="destination">
<div class="title">Wassenaar</div>
</div>
</div>
You can get your porblem solve using following css .
.flex-item{
width:300px;
height:200px;
position: relative;
padding: 0;
margin: 0;
text-align: center;
}
.flex-item-title{
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 300px;
height: 200px;
text-align: center;
color: white;
display: inline-table;
vertical-align:middle;
line-height:100%;
}
Try changing your css to this css , it will work .
I am learning HTML,CSS and JAVAScript and I recently wrote a very simple code. It showed everything and was working fine until I added the div class "mainLeft". After that it doesn't show anything except for the code before that class. Can you kindly assist?
Below is the HTML and CSS code;
CSS Code
**CSS Code**
body {
background-color: white;
}
.main h1 {
font-family: Candara;
text-align: center;
color: white;
}
.main {
display: table;
height: 50px;
width: 600px;
margin-left: auto;
margin-right: auto;
background-color: #13b5ea;
}
.SME {
display: table;
position: absolute;
width: 250px;
height: 250px;
left: 50%;
top: 50%;
margin-left: -125px;
margin-top: -125px;
color: #13b5ea;
}
.SME h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.DataAnalysis {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 28%;
margin-left: -100px;
margin-top: -100px;
color: #13b5ea;
}
.DataAnalysis h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.ProdMonitor {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 72%;
margin-left: -100px;
margin-top: -100px;
color: #13b5ea;
}
.ProdMonitor h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.mainLeft h1 {
font-family: Candara;
text-align: center;
color: white;
}
.mainLeft {
display: table;
height: 50px;
width: 600px;
margin-right: auto;
background-color: #13b5ea;
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="satmap.css" />
<title>My Home</title>
</head>
<body>
<!--Go bananas!-->
<div class="main">
<h1> XYZ</h1>
</div>
<div class="mainLeft">
<h1> Current Stats </h1>
</div>
<div class="SME">
<h4> My Explorer </h4>
</div>
<div class="DataAnalysis">
<h4> Data Analysis </h4>
</div>
<div class="ProdMonitor">
<h4> Production Monitoring </h4>
</div>
</body>
</html>
first of all, I don't see any div with the class 'mainLeft'. You only have texts in those divs so the reason you can't see anything is because you have this css on your h definitions.
color: white;
Thank you Everyone. I solved it.
I had forgottent to add background-color attribute in CSS.
I am making a chat script with the possibility to minimize the particular chat and I can't seem to figure out how to make the header of the div push down! Is there a way to do this?? I researched this and was unable to find a way to get the results I want.
my HTML code is as follows
<?php
$usrid = "Joel";
?><!DOCTYPE html>
<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="css/style.css">
<SCRIPT SRC="js/jquery-2.1.1.min.js"></SCRIPT>
<SCRIPT>
function onTestChange() {
var key = window.event.keyCode;
// If the user has pressed enter
if (key == 13) {
event.preventDefault();
post();
}
else {
return true;
}
}
function post()
{
document.getElementById('txtArea').value = "";
}
</SCRIPT>
</HEAD>
<BODY><?php
$file = simplexml_load_file("xml/joel.xml");
echo"
<DIV CLASS=\"chatbox\">
<DIV CLASS=\"title\">
<SPAN CLASS=\"name\">
$file->subject
</SPAN>
<SPAN CLASS=\"buttons\">
<BUTTON ONCLICK=\"minimize()\" NAME=\"Minimize\" ID=\"min\">-</BUTTON><BUTTON ONCLICK=\"close()\" NAME=\"Close\">x</BUTTON>
</SPAN>
</DIV>
<DIV ID=\"body\" CLASS=\"hidden\">
<DIV CLASS=\"history\">";
foreach($file->post as $post)
{
if($post->auth == $usrid)
{
echo"
<DIV CLASS=\"self\">
<DIV CLASS=\"self_left\">
$post->content
</DIV>
<DIV CLASS=\"self_right\">
$post->auth
</DIV>
</DIV>
";
}
else
{
echo"
<DIV CLASS=\"other\">
<DIV CLASS=\"other_left\">
$post->auth
</DIV>
<DIV CLASS=\"other_right\">
$post->content
</DIV>
</DIV>
";
}
}
echo" </DIV>
<DIV CLASS=\"input\">
<DIV ID=\"input\">
<DIV CLASS=\"text\">
<TEXTAREA NAME=\"input\" ONKEYPRESS=\"onTestChange()\" ID=\"txtArea\"></TEXTAREA>
</DIV>
<DIV CLASS=\"submit\">
<BUTTON SRC=\"images/button1.png\" ONCLICK=\"post()\">Send</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>";
?>
and my css is
::-webkit-scrollbar
{
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track
{
background: url(../images/bg.png);
}
::-webkit-scrollbar-thumb
{
background: rgba(0,0,0,0.5);
border-radius: 25px;
}
.chatbox
{
width: 250px;
margin: 0 auto;
border: 1px solid black;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
overflow: hidden;
flex-direction: column;
}
.title
{
width: 100%;
border-bottom: 1px solid black;
display: inline-block;
background: #436ED2;
flex-direction: column;
}
.name
{
width: calc(50% - 10px);
float: left;
text-align: left;
margin-top: 3px;
padding-left: 10px;
}
.buttons
{
width: 50%;
float: right;
text-align: right;
}
.buttons button
{
width: 24px;
height: 24px;
border: none;
background: none;
outline: none;
}
.history
{
width: 90%;
margin: 0 auto;
height: 300px;
border: 1px solid black;
margin-top: 5px;
overflow: auto;
overflow-x: hidden;
}
.self
{
width: 100%;
background: #c6d3f1;
display: inline-block;
margin-top: -4px;
padding-bottom: 5px;
padding-top: 5px;
}
.self_left
{
width: calc(80% - 6px);
float: left;
text-align: right;
padding-right: 5px;
border-right: 1px solid black;
}
.self_right
{
width: calc(20% - 6px);
float: right;
text-align: left;
padding-left: 5px;
border-left: 1px solid black;
}
.other
{
width: 100%;
background: #f1d3c6;
display: inline-block;
margin-top: -4px;
padding-bottom: 5px;
padding-top: 5px;
}
.other_left
{
width: calc(20% - 6px);
float: left;
text-align: right;
padding-right: 5px;
border-right: 1px solid black;
}
.other_right
{
width: calc(80% - 6px);
float: right;
text-align: left;
padding-left: 5px;
border-left: 1px solid black;
}
.input
{
width: 90%;
margin: 0 auto;
height: 90%;
margin-top: 5px;
}
#input
{
width: 100%;
display: inline-block;
}
textarea
{
resize: none;
width: 75%;
height: 40px;
float: left;
}
.input button
{
float: right;
width: 20%;
height: 46px;
top: 10px;
}
.hidden
{
display: none;
flex-direction: column;
}
I want my div called title to move down when I invoke the script minimize() which I haven't added yet.
You can use flex boxes to achieve this
Take a look at this article: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
This will make the divs go up instead of down:
.container {
flex-direction: column-reverse;
}
the easiest method that I discovered after changing the question I was asking that gets the proper results, is very simple
.chatbox
{
position: fixed;
bottom: 0px;
}
that's it
You can use jQuery's .animate() method to zoom each chat div to "minimized" / "maximized" state.
Here is an imperfect example that I just hashed together as a starting point:
jsFiddle Demo
HTML:
<div class="chatBox" id="chat-17">
<div class="chatTitle">
<div class="titleText">This is chat title</div>
<div class="titleMin"> v</div>
</div>
<div class="chatBody">
Chat message goes here
</div>
</div>
jQuery:
$('.titleText').click(function(){
if ( $(this).hasClass('minTitle') ){
$(this).removeClass('minTitle');
$(this).parent().parent().removeClass('minimized');
}else{
$(this).addClass('minTitle');
var cb = $(this).parent().parent();
cb.addClass('minimized');
//cb.animate(function(){top: '150',left: '10'},500);
}
});
css:
.chatBox{width:100%;border:1px solid blue;overflow:hidden;}
.chatTitle{width:100%;height:20px;}
.titleText{width:95%;height:100%;color:white;font-weight:bold;float:left;background:black;}
.titleMin{width:4.5%;height:100%;color:red;font-weight:bold;float:left;text-align:center;background:black;}
.titleMin:hover{cursor:pointer;cursor:hand;}
.chatBody{width:100%;height:150px;padding:10px;background:wheat;}
Additional css added because example didn't work:
.titleText:hover{cursor:pointer;cursor:hand;}
.minimized{height:5px;width:5px;position:absolute;top:150px;}
span{font-weight:bold;color:red;}
Resources:
http://api.jquery.com/animate/
http://viralpatel.net/blogs/understanding-jquery-animate-function/
http://www.tutorialscollection.com/jquery-animate-how-to-animate-in-jquery-using-animate-method/
http://www.1stwebdesigner.com/tutorials/jquery-animation-tutorial/