I am having problem with positioning div. I have the following css
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
Here is the javascript:
$("#main").click(function(event){
$("#popup").css({'left':event.pageX, 'top':event.pageY, 'display':'block'});
});
here goes the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" href="img/favicon-ksu.ico" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main2.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Something Goes arround here <span style="color: red;">Something More here</span></h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="helper" id="helper">
Click Here!
</div>
<div class="popup" id="popup">
oops! You clicked at wrong place. Try again!
</div>
<div class="workspace" id="workspace" contenteditable="true"></div>
<div id="main" class="main">
</div>
</div>
</div>
</div><!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main2.js"></script>
</body>
</html>
everything works fine up to here! But when i specify following,
body {
padding: 0px;
width: 1230px;
margin: 0 auto;
}
the div is not positioned at the place of click, div appears somewhere else. I am wondering what is wrong! If someone could help!!!
changing position to fixed from absolute solves this problem.
Instead of this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
use this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: fixed;
border-radius: 10px;
z-index: 2;
}
Related
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
}
/*---------------------Dashboard-----------------------*/
.dashboard{
position: relative;
width: 100%;
min-height: 100vh;
}
/*--------------------Dashboard Sidebar Begin-----------------------*/
.dashboard-sidebar{
position: fixed;
width: 50px;
min-height: 100vh;
background-color: #2E86C1;
color: white;
padding: 15px 6px;
}
.dashboard-sidebar .dashboard-sidebar-top{
position: relative;
width: 100%;
min-height: 100vh;
justify-content: center;
display: flex;
}
.dashboard-sidebar-top i{
font-size: 17px;
}
/*-----------------------Dashboard Sidebar End--------------------*/
/*--------------------Dashboard Main Content Start----------------------*/
.dashboard-main-content{
position: absolute;
width: calc(100% - 50px);
height: 100vh;
left: 50px;
padding: 10px 15px;
}
.dashboard-main-content .dashboard-app{
position: relative;
background-color: white;
width: 70px;
height: 70px;
border-radius: 6px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
.dashboard-main-content .dashboard-app:hover{
background-color: #EBEDEF;
}
.dashboard-main-content .dashboard-app i{
font-size: 30px;
color: #2874A6
}
.app-name{
font-size: 12px;
font-family: tahoma, sans-serif;
color: #2874A6
}
/*--------------------Dashboard Main Content End----------------------*/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<link rel="stylesheet" href="dashboard.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="dashboard"><!--Dashboard begin-->
<div class="dashboard-sidebar"><!--Dashboard sidebar begin-->
<div class="dashboard-sidebar-top">
<i class="bx bxs-dashboard"></i>
</div>
</div><!--Dashboard sidebar end-->
<div class="dashboard-main-content"><!--Dashboard contents begin-->
<div class="dashboard-app"><!--App begin-->
<i class="bx bx-laptop"></i>
<div class="app-name">
<span>Begin Design</span>
</div>
</div><!--App end-->
</div> <!--Dashboard contents end-->
</div><!--Dashboard end-->
<script src="script.js"></script>
</body>
</html>
I have the following dashboard layout. The dashboard has the Begin Design dashboard app which will have many sub components of its own and will have a separate html file called begin-design.html. When the use clicks on it, it will take the user to the design app components. My question is, how can I go about bringing thebegin-design.html app into the dashboard.html file rather than writing the entire begin-design.htmlcomponents in the dashboard.html file? I would like to keep all the components in seperate html files and connect eachother together.
****HTML****
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<link rel="stylesheet" href="dashboard.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="dashboard"><!--Dashboard begin-->
<div class="dashboard-sidebar"><!--Dashboard sidebar begin-->
<div class="dashboard-sidebar-top">
<i class="bx bxs-dashboard"></i>
</div>
</div><!--Dashboard sidebar end-->
<div class="dashboard-main-content"><!--Dashboard contents begin-->
<div class="dashboard-app"><!--App begin-->
<i class="bx bx-laptop"></i>
<div class="app-name">
<span>Begin Design</span>
</div>
</div><!--App end-->
</div> <!--Dashboard contents end-->
</div><!--Dashboard end-->
<script src="script.js"></script>
</body>
</html>
<a href="begin-design.htmk"><i class="bx bx-laptop"></i>
<div class="app-name">
<span>Begin Design</span>
</div></a>
Anything after closing </body> tag is not visible.
The output text is not visible in a browser. I have tried adding and removing <div> and <body> tags around it. I can't seem to troubleshoot my mistake.
h1{
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(255, 118, 193);
float: right;
position: relative;
right: 1020px;
}
.logo{
float: left;
width: 5%;
position: relative;
top: 20px;
left: 40px;
}
#bg{
top: 0;
left: 0;
width: 100%;
position: fixed;
justify-content: space-between;
display: flex;
background-color: rgb(222, 255, 102);
}
h4{
color: black;
font-size: x-large;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type='text/css'>
</head>
<body>
<header id="bg">
<div>
<h1>Giovanni's Guitars</h1>
<img class="logo" src="logo1.svg" alt="a logo">
</div>
</header>
</body>
<div>
<h4>Guitars and Bases</h4>
</div>
</html>
Please help me.
Your div tag should be inside the body tag
<!DOCTYPE html>
<html>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type='text/css'>
</head>
<body>
<header id="bg">
<div>
<h1>Giovanni's Guitars</h1>
<img class="logo" src="logo1.svg" alt="a logo">
</div>
</header>
<div>
<h4>Guitars and Bases</h4>
</div>
</body>
</html>
You can't do that. HTML is designed in a way that all page elements are placed inside the <body></body> element.
If you need a wrapper just add a <div> inside your <body> element.
All your content should be inside your body element.
In addition, in your #bg selector you set position="fixed" which makes the other content after it to "disappeared".
It is not the best practice, but you can do it like this:
<!DOCTYPE html>
<html>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type="text/css"
/>
</head>
<body>
<header id="bg">
<div>
<img class="logo" src="logo1.svg" alt="a logo" />
<h1>Giovanni's Guitars</h1>
</div>
</header>
<div class="content">
<h4>Guitars and Bases</h4>
</div>
</body>
</html>
h1 {
font-family: "Inknut Antiqua", sans-serif;
color: rgb(255, 118, 193);
display: inline-block;
vertical-align: middle;
}
.logo {
width: 5%;
margin: 50px;
display: inline-block;
vertical-align: middle;
}
#bg {
top: 0px;
right: 0px;
left: 0px;
width: 100%;
height: 150px;
position: fixed;
justify-content: space-between;
display: flex;
background-color: rgb(222, 255, 102);
}
h4 {
color: black;
font-size: x-large;
text-align: center;
}
.content {
margin-top: 150px;
}
Your body tag should be closed before html tag.
I'm trying to make stopwatch and I want to put these 3 buttons in a circle but responsive. I have already make a circle that is responsive now I just want to add 3 buttons inside the circle under the timer.
Here is the code: https://jsfiddle.net/obh0mru4/1/
See my result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stop Watch</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container mt-5 h-position-relative">
<div>
<h1 class="title">Stop Watch</h1>
</div>
<div class="circle mt-5">
<div>
<h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="msec" class="circleContent">00</h1>
</div>
</div>
<div class="h-position-absolute h-tl">
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="reset()">Reset</button>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</html>
body {
background: #000428;
background: -webkit-linear-gradient(to right, #004e92, #000428);
background: linear-gradient(to right, #004e92, #000428);
}
.title {
text-align: center;
color: #fff;
}
.circle {
margin: 0 auto;
width: 350px;
height: 350px;
line-height: 320px;
border-radius: 50%;
text-align: center;
border: 10px solid #666;
border-style: double;
}
.circleContent {
display: inline-block;
color: #fff;
font-size: 40px;
width: 60px;
}
.circleContent-span {
color: #fff;
font-size: 40px;
}
.h-position-relative {
position: relative;
}
.h-position-absolute {
position: absolute;
}
.h-tl {
top: smth;
left: smth;
}
You will have to fiddle around with the numbers to get exactly what you want, but this is a start:
.h-tl {
top: 275px;
left: 50%;
transform: translateX(-50%);
}
What it does is place the buttons vertically at 275px.
It also places the left hand side horizontally to the center, but you don't want that so you move it back 50% of it's own width. (This is a common 'trick', you can remove the translate once to see what it exactly does).
This will put your buttons under your digits
The text of second h5 element doesnt resize properly and get out over the background color, I also tested put the h5 inside a div and apply css to the div but it didnt work, what am I missing?
Here is the relevant code (I had to remove other elements and css properties):
.container {
position: relative;
display: inline-block;
margin-top: 50px;
}
.card .front {
color: white;
text-align: center;
font-weight: bold;
position: absolute;
}
.card .front h5 {
background-color: #5E92F2;
padding: 10px 0 10px 0;
margin-top: 98%;
width: 198px;
height: 44px;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1 With more text</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
try this :
h5{
font-size: 100%;
}
As the h5 has a fixed height, that is the expected behavior.
Change to min-height: 44px; in the .card .front h5 rule
.container {
position: relative;
display: inline-block;
margin-top: 50px;
}
.card .front {
color: white;
text-align: center;
font-weight: bold;
position: absolute;
}
.card .front h5 {
background-color: #5E92F2;
padding: 10px 0 10px 0;
margin-top: 98%;
width: 198px;
min-height: 44px;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1 With more text</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
For h5 you are adding height: 44px; so the font-size is taking default h5 font size if you decrease the font size it will fix the issue or increase the height of h5
so use something like
.card .front h5{
font-size:16px;
}
or
.card .front h5{
height:64px;
}
Your css set heigth of the element to 44px and font-size to 1.25rem, change one of the properties or both, for example heigth to auto if you want to keep font-size, or change font-size to 100% if you want to keep the heigth of the element. There are several ways to do this.
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>