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.
Related
1 2 I am trying to make the Google Search Page in HTML & CSS. However, when I try to center the Google Logo, the image re-adjusts itself when the device width is changed. I've been stuck in this section for quite a while now, and cannot seem to find any answers to my inquiry. Some assistance would be appreciated.
body {
width: 100%;
max-width: 100%;
background-color: #202124;
overflow: hidden;
}
.navbar {
display: flex;
float: right;
position: relative;
word-spacing: 11px;
padding-top: 13px;
padding-right: 129px;
}
.navbartxt a {
text-decoration: none;
color: white;
font-family: arial, sans-serif;
font-size: 13px;
}
.navbartxt a:hover {
text-decoration: underline;
}
.dots {
width: 16px;
position: absolute;
margin-left: 123px;
margin-top: 1px;
}
.pfp {
position: absolute;
border-radius: 100%;
margin-top: -7px;
margin-left: 163px;
}
.searchbox {
display: flex;
position: absolute;
}
.searchsections {
width: 100%;
max-width: 100%;
display: flex;
position: relative;
}
.Google {
position: absolute;
margin-top: 72px;
margin-left: 240px;
}
<nav>
<div class="navbar">
<div class="navbartxt">
Gmail
Images
</div>
<img class="dots" src="/CSS/CSS Images/9 dots.png" />
<img class="pfp" src="/CSS/CSS Images/MyPfpGoogle.png" />
</div>
</nav>
<section class="searchsections">
<div class="Google">
<img src="/CSS/CSS Images/Google Logo.png" />
</div>
</section>
Just replace your .Google class with this :-
.Google {
display: flex;
justify-content: center; /* for horizontal center */
align-items: center; /* For Vertical Center */
}
.Google > img {
display: block;
}
How it works learn Here
This question already has answers here:
What is the opposite of :hover (on mouse leave)?
(13 answers)
Closed 2 years ago.
I am making a website in which a page needs a hoverbox with cool animations. I quickly wrote the code. But the transition is not working like it should have. It is only working from normal to :hover, not :hover to normal. As soon as I move my mouse somewhere else, my div returns to its normal state without any animations. Does anyone have a solution for this?
Here are my HTML and CSS files -
HTML -
<html>
<head>
<title> Rubik's Point | Home </title>
<link rel = "stylesheet" href = "Styles.css">
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght#0,300;0,700;1,300&display=swap" rel="stylesheet">
</head>
<body>
<div class = "header">
<div class = "logo">
<h1 class = "specialTitle"> RUBIK'S POINT </h1>
</div>
<div class = "navContainer">
<ul>
<li><b> Home </b></li>
<li><b> Tutorials </b></li>
<li><b> Give Us a Feedback </b></li>
<li><b> Contact Us </b></li>
</ul>
</div>
</div>
<div class = "intro">
<div class = "introTextbox">
<h1> Become a Cube Master </h1>
<h3> In this section, you will find many tutorials which will teach you how to solve different types of cube puzzles. </h3>
</div>
</div>
<div class = "mainContent">
<center> <h1> Here are some Popular Tutorials </h1> </center>
<div class = "hoverContainer">
<div class = "hoverbox">
<img src = "F:\Rubiks Point\Images\Tutorials\cube background.jpg" width = "100%" height = "100%"></img>
</div>
<div class = "hoverbox">
<img src = "F:\Rubiks Point\Images\Tutorials\fast solve 2.jpg"></img>
</div>
</div>
</div>
<div class = "footer">
<div class = "colfooter">
<p> Give Us a Feedback > </p>
<p> Learn to Solve the Rubik's Cube > </p>
<p> Learn to Solve the Rubik's Cube Faster > </p>
</div>
<div class = "colfooter">
<p> Contact Us > </p>
<p> Learn Conventional Algorithms > </p>
</div>
</div>
</body>
</html>
CSS -
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
font-family: 'Mulish', sans-serif;
}
.header {
width: 100%;
height: 75px;
background-color: #222222;
color: white;
line-height: 75px;
padding-left: 50px;
padding-right: 100px;
overflow-y: hidden;
position: fixed;
}
.logo {
width: 30%;
float: left;
font-family: "Lulo Clean";
}
.logo a {
text-decoration: none;
color: white;
}
.navContainer {
width: 70%;
list-style-type: none;
float: right;
text-align: right;
}
.navContainer li {
display: inline-block;
padding-left: 50px;
font-size: 20;
}
.navContainer a {
text-decoration: none;
color: white;
}
.navContainer a:hover {
color: orange;
}
.intro {
width: 100%;
height: 850px;
background-color: gray;
color: white;
line-height: 850px;
text-align: right;
background-image: url("F:/Rubiks Point/Images/cube background.jpg");
}
.introTextbox {
width: 40%;
height: 100%;
float: right;
text-align: center;
line-height: 50px;
padding-top: 400px;
margin-right: 100px;
font-size: 20;
font-family: 'Mulish', sans-serif;
}
.mainContent {
width: 100%;
padding-left: 200px;
padding-right: 200px;
padding-top: 50px;
padding-bottom: 75px;
background-color: white;
}
.footer {
width: 100%;
height: 230px;
padding-left: 340px;
padding-right: 440px;
padding-top: 55px;
padding-bottom: 60px;
background-color: #222222;
color: white;
display: flex;
}
.row1 {
display: flex;
padding-top: 125px;
padding-bottom: 50px;
padding-right: 50px;
}
.row2 {
display: flex;
padding-top: 75px;
padding-left: 150px;
padding-right: 200px;
}
.col {
width: 330px;
margin-left: 50px;
text-align: center;
}
.col p {
margin-top: 30px;
}
.colfooter {
padding-left: 100px;
}
.colfooter a {
color: white;
}
.colfooter p {
padding-top: 15px;
}
.specialTitle {
letter-spacing: 10px;
}
.hoverContainer {
width: 100%;
height: 375px;
margin-top: 75px;
display: flex;
}
.hoverbox {
width: 30%;
height: 100%;
margin-left: 10%;
margin-right: 10%;
border-radius: 20px;
text-align: center;
}
.hoverbox img {
width: 100%;
height: 100%;
}
.hoverbox:hover img {
border-radius: 50%;
width: 25%;
height: 25%;
transition: 0.5s ease;
}
#currentPage {
color: orange;
}
Thanks a lot in advanced!
Move the transition: 0.5s ease; setting out of the .hoverbox:hover img rule and put it into the .hoverbox img rule - it needs to be in the default state, not in the hover state.
I am trying to make a responsive tweet button with the twitter bird floated left, the text next to it and centered.
My code is:
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align: center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
width: 100%;
padding-bottom: 10%;
}
img .tweet {
float: left;
}
/* Tweet This: */
.span-content {
display: block;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
</div>
</div>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
CSS
I've tried pretty much everything under the sun.
I can't seem to get the rectangle to shrink and widen when I resize the page or go into Dev Tools and use the mobile device pane.
I understand CSS less than I do JavaScript at this point. Not sure if I should use flexbox in this instance or how I would do that.
Here is the CodePen
you can use quotes using pseudo element ::before and a::after
Thank you. This works for the most part. However I can't get the
twitter bird to float left and the text to be beside it. Any
suggestions?
I used flexbox the text will be next to the twitter button on desktop view, and below on mobile view.
#import url(https://fonts.googleapis.com/css?family=Open+Sans|Satisfy);
/*Styles for whole page */
img {
max-width: 100%;
border: 7px solid #00a5ef;
}
#page-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center
}
h1 {
font-weight: bold;
text-transform: uppercase;
font-size: 30px;
margin-top: 50px;
width: 300px;
line-height: 1;
font-family: 'Open Sans', sans-serif;
color: #1485C7;
text-align: center;
letter-spacing: 0;
}
/* On: */
h1 .center {
text-transform: capitalize;
font-weight: normal;
font-family: "Satisfy";
vertical-align: text-bottom;
line-height: 10px;
color: #1485C7;
}
h1 .bigger {
font-size: 46px;
color: #1485C7;
display: block
}
/* Rectangle 1: */
.flex-rectangle {
background: #fff none repeat scroll 0 0;
flex: 1 15%;
margin: 0 15%;
max-width: 300px;
padding: 10px;
position: relative;
quotes: "\201C""\201D";
text-align: center;
top: 0;
}
.flex-rectangle::before {
color: #00a5ef;
content: open-quote;
font-family: Georgia;
font-size: 25vw;
left: -15vw;
position: absolute;
top: 50%;
}
.flex-rectangle::after {
color: #00a5ef;
content: close-quote;
font-family: Georgia;
font-size: 25vw;
position: absolute;
right: -15vw;
top: 50%;
}
.text {
align-self: flex-end
}
.span-content {
display: inline-block;
color: #00A5EF;
margin: 0 auto;
padding: 5px;
border: 3px solid #00A5EF;
}
<div id="page-wrap">
<div class="flex-rectangle">
<div class="heading">
<h1>Random Quotes<span class="center">On</span><span class="bigger">Design</span></h1>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
<div id="buttons">
<div class="span-content">
Tweet This
</div>
</div>
</div>
<div class="text">
<h1>Random Quotes</h1>
</div>
</div>
you have to place the bird and the text to one div and code for the image element in order to code for the image part you have to call first the first parent div and other div in one code where the image element is located .flex-rectangle .image-wrapper imgto edit the code for image. and also you have to insert the html code for <span>Tweet This</span> inside the .image-wrapper to make the image go left and your text go center.
CSS CODE :
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align:center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
margin: auto;
max-width: 125;
max-height: 50px;
width: 100%;
padding-bottom: 15%;
}
.flex-rectangle .image-wrapper img {
float: left;
max-width: 50px;
max-height: 50px;
width: 100%;
}
/* Tweet This: */
.span-content {
display: block;
text-align: center;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
HTML Code:
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet"/>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
</div>
</div>
This is the code of my html in this when I set the #login id to float right it just overlap the #about-blog id.
#login{
background-color: #00FFFF;
float: right;
width: 70%;
height: 40%;
position: absolute;
z-index: 2;
}
#about-blog{
background-color: #A4DDED;
width: 30%;
height: 50%;
position: absolute;
z-index: 1;
}
Here is the full code {below the code I have provided more information}
<<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kvians-Home</title>
<style type="text/css">
body {
background-color: #F0FFF0;
color: rgb(255,255,255);
font-family: monospace;
font-style: italic;
font-weight: bold;
font-size: 20px;
}
.main-heading {
background-color: #0048ba;
text-align: center;
font-size: 35px;
font-weight: bold;
margin: 0px;
}
#login{
background-color: #00FFFF;
float: right;
width: 70%;
height: 40%;
position: absolute;
z-index: 2;
}
#about-blog{
background-color: #A4DDED;
width: 30%;
height: 50%;
position: absolute;
z-index: 1;
}
/* all about links */
a{
background-color: #00FF00;
color: #00693E;
font-weight: Bold;
font-size: 25px;
}
a:visited{
background-color: #DFFF00;
color: #FF7F00;
}
a:hover{
background-color: #91A3B0;
color: rgb(0,0,0);
}
.left-margin{
margin-left: 5px;
}
/* all about links*/
</style>
</head>
<body>
<!--facebook SDK-->
<!-- Facebook SDK end-->
<!--page begin-->
<h1 class="main-heading">Here You Will Get</h1>
<!--Main Body Design-->
<div id="about-blog">
<h2 class="left-margin">School Feeds</h2>
<p class="about-blog-para-one left-margin"> Visit our awesome blog,<br> here you will get updates about school</p>
<a class="left-margin school-feeds"href="http://kvians.weebly.com/school-feeds" target="_blank">Visit</a>
</div>
<div id="login">
<h2>Login</h2>
<p>Login to <strong>Kvians</strong> from your facebook account, just click the login button here</p>
</div>
</body>
</html>
how can I set the login to right And just overlap the about blog by a few pixles.
if you are using position:absolute try right:0 instead of float:right and left:0 instead of float:left
if you are using position:absolute you can't use floating cos the element is detached of the document that's why floating property won't work.
You can use right:0 or left:0 and the element will be forced to go left or right of the document.
Your float doesn't work because you also use position: absolute.
I removed position: absolute, as it will just give you problems down the road, and added float: left to #about-blog, this way, if you want to add any extra info, it will flow properly.
#login{
background-color: #00FFFF;
float: right;
width: 70%;
height: 40%;
z-index: 2;
}
#about-blog{
background-color: #A4DDED;
width: 30%;
height: 50%;
float: left; /* added */
z-index: 1;
}
body {
background-color: #F0FFF0;
color: rgb(255,255,255);
font-family: monospace;
font-style: italic;
font-weight: bold;
font-size: 20px;
}
.main-heading {
background-color: #0048ba;
text-align: center;
font-size: 35px;
font-weight: bold;
margin: 0px;
}
#login{
background-color: #00FFFF;
float: right;
width: 70%;
height: 40%;
z-index: 2;
}
#about-blog{
background-color: #A4DDED;
width: 30%;
height: 50%;
float: left;
z-index: 1;
}
/* all about links */
a{
background-color: #00FF00;
color: #00693E;
font-weight: Bold;
font-size: 25px;
}
a:visited{
background-color: #DFFF00;
color: #FF7F00;
}
a:hover{
background-color: #91A3B0;
color: rgb(0,0,0);
}
.left-margin{
margin-left: 5px;
}
/* all about links*/
<!--facebook SDK-->
<!-- Facebook SDK end-->
<!--page begin-->
<h1 class="main-heading">Here You Will Get</h1>
<!--Main Body Design-->
<div id="about-blog">
<h2 class="left-margin">School Feeds</h2>
<p class="about-blog-para-one left-margin"> Visit our awesome blog,<br> here you will get updates about school</p>
<a class="left-margin school-feeds"href="http://kvians.weebly.com/school-feeds" target="_blank">Visit</a>
</div>
<div id="login">
<h2>Login</h2>
<p>Login to <strong>Kvians</strong> from your facebook account, just click the login button here</p>
</div>
You can do margin-left: auto; to that element using id
Try this code:
#login{
background-color: #00FFFF;
float: right;
clear: right;
width: 70%;
height: 40%;
position: absolute;
z-index: 2;
}
I added clear: right; on it, I think it will work!
When use auto height with float its not work but when remove float its work fine. how can fix it ?
there is DIV with auto height (aboutus) ,inside it is another div (aboutus-title p) with float left but the content is overflow how can all content inside div with auto height ?
http://jsfiddle.net/haeb0q8d/1/
.aboutus {
position: relative;
z-index: 2;
width: 100%;
height: auto;
background: #333333;
}
.aboutus-title div h1{
text-align: center;
text-transform: uppercase;
font-size: 24px;
padding-top: 80px;
color: #fcd803;
}
.aboutus-title hr {
margin: 0 auto;
border: 0;
height: 1px;
background: #333;
margin-top: 30px;
width: 60px;
}
.aboutus-detail {
width: 100%;
}
.aboutus-detail p{
text-align: center;
color: #fcd803;
line-height: 25px;
font-size: 17px;
margin-bottom: 30px;
padding-right: 30px;
padding-left: 30px;
float: left;
}
<div class="aboutus" id="aboutus">
<div class="aboutus-title">
<div><h1>about</h1></div>
<hr>
<div class="aboutus-detail">
<p>
We are a tight knit team of digital thinkers, designers and<br>
developers, working together to create fresh, effective projects<br> delivered personally.
</p>
</div>
</div>
</div>
You have to clear float with clear: both.
.aboutus {
position: relative;
z-index: 2;
width: 100%;
height: auto;
background: #333333;
}
.aboutus-title div h1 {
text-align: center;
text-transform: uppercase;
font-size: 24px;
padding-top: 80px;
color: #fcd803;
}
.aboutus-title hr {
margin: 0 auto;
border: 0;
height: 1px;
background: #333;
margin-top: 30px;
width: 60px;
}
.aboutus-detail {
width: 100%;
}
.aboutus-detail p {
text-align: center;
color: #fcd803;
line-height: 25px;
font-size: 17px;
margin-bottom: 30px;
padding-right: 30px;
padding-left: 30px;
float: left;
}
.clear {
clear: both;
}
<div class="aboutus" id="aboutus">
<div class="aboutus-title">
<div>
<h1>about</h1>
</div>
<hr>
<div class="aboutus-detail">
<p>We are a tight knit team of digital thinkers, designers and
<br>developers, working together to create fresh, effective projects
<br>delivered personally.</p>
</div>
</div>
<div class="clear"></div>
</div>