I am new in HTML and CSS. There are two buttons named 'Click me' and 'reset' and I was trying to add a border around them but the result is not updating according to my style.css file.
.flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-1">
<h2>Challenge 1: Your age in Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary">Click me</button>
</div>
<div>
<button class="btn btn-danger">reset</button>
</div>
It is working correctly. Make sure path of style.css is correct. Or simply add style in the html file itself. It will also reduce the number of files to be fetched from server.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<style>
.flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
</style>
<title>Challenges</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your age in Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary">Click me</button>
</div>
<div>
<button class="btn btn-danger">reset</button>
</div>
</div>
</div>
<!-- <script src="static/JS/script.js"></script> -->
</body>
</html>
It is working correctly. Make sure path of style.css is correct Sometimes your path is not hitting the proper directory user (#) symbol at the start of the path
. Or simply add style in the html file itself like Akshay said. It will also reduce the number of files to be fetched from server.
It worked correctly. check the file location.
If you Add more class to override bootstrap. That is add style to .container-1 .flex-box-container-1
.container-1 .flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
Using !important not good practice even when there are more ways.
It works for me in local file i tested compeletly.
Working Demo
.container-1 .flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="static/style/style.css" />
<title>Challenges</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your age in Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary">Click me</button>
</div>
<div>
<button class="btn btn-danger">reset</button>
</div>
</div>
</div>
<script src="static/JS/script.js"></script>
</body>
</html>
Related
I'm following a tutorial online but I can't my HTML code to CSS (nothing happens when I change the details in css file. I have both files placed in the same folder. My CSS is in style.less file
Since I only starting with this, I think maybe the problem is in the syntax but I can't figure out what it is exactly
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>1st project</title>
<link rel="stylesheet" href="./reset.css"/>
<link rel="stylesheet" href="./style.css"/>
<link rel="stylesheet/less" type="text/css" href="style.less"/>
</head>
<body>
<div class="top">
<div class="top_content">
<img src="/base/materials/4.png"/>
<div>
<h3>Web Development Course</h3>
<span> Learn to code with basic paths</span>
<button>Browse course</button>
</div>
</div>
</div>
<div class="top_sub-content">
<nav>
<ul>
<li>Home</li>
<li>Careers</li>
<li>Blog</li>
</ul>
</nav>
<img src="/base/materials/5.jpg"/>
</div>
<footer>
<div>
<img src="/base/materials/4.png"/>
<h3>Join the list</h3>
<span>Sign up for the list</span>
</div>
<div>
<div>
<input placeholder="Enter your email"/>
<button>Subscribe</button>
</div>
<span>We won't spam</span>
</div>
</footer>
</body>
</html>
CSS
body {
width: 100%;
height: 100%;
}
.top {
display: flex;
.top_content {
flex: 1;
}
.top_sub-content {
background: #33A3EF;
flex-basis: 40%;
img {
max-width: 100%;
}
}
}
If both files are in the same location, remove the dot and slash from the beginning of the link
Before
<link rel="stylesheet" href="./style.css"/>
After
<link rel="stylesheet" href="style.css"/>
I am following Tyler Potts' YouTube tutorial for making a nav bar. However, my nav bar isn't displaying as 'flex' and I also cannot edit my fonts.
My HTML:
`
<!DOCTYPE html>
<html lang="en">
<head>
<!--boiler plate-->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--tab-->
<title>Ryan Brooks</title>
<!--main.css-->
<link
href="https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap"
rel="stylesheet"
/>
<link: rel="stylesheet" href:"main.css" />
<!--favicon-->
<link rel="icon" href="images/favicon.png" type="image/png" />
<!--font-->
</head>
<body>
<!--nav bar-->
<nav>
<div class="container">
<h1>Ryan Brooks</h1>
<div class="menu">
Home
Projects
About
Contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<script src="main.js"></script>
</body>
</html>
`
:root {
--primary: #8c38ff;
--light: #eeeeee;
--dark: #212121;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Rubik Wet Paint", cursive;
}
.container {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
`
What it looks like:
I tried adding the links from google fonts before my stylesheet link in the html, then adding the font after the asterisk { } section in the css. I was expecting the
text and <nav> bar content on my website to display in rubik font. Additionally, I was expecting my nav bar to display flex beside the
text, rather than beneath it. Thank you!
Be careful with syntax, here in your <head>, in your link to the css, you wrote href:"main.css" instead of href="main.css". You also put ':' right after the link tag which isn't required too.
if u use bootstrap you can add this on class="nav justify-content-center"
I want to create this type dashboard enter image description here but not able to work. How can we make this type style.
I try to make this type dashboard page in my code but it's not work. Anybody please help me out. And check my code below.
My js code
return (
<div className="dashboard">
<div className="dashboard__container">
Logged in as
<div>{name}</div>
<div>{user?.email}</div>
<button className="dashboard__btn" onClick={logout}>
Logout
</button>
</div>
</div>
);
}
And my css code
.dashboard {
height: 100vh;
width: 100%;
background: #3e295a40;
}
.dashboard__container {
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: left;
background-color: #15b88357;
padding: 1em 20px 1em 20px;
color: white;
font-weight: bold;
}
.dashboard__btn {
margin-top: -5px;
font-size: 18px;
padding: 0.25em 0.5em;
border: none;
color: white;
background-color: #402958;
}
.center { text-align: center; }
Please help me out.
I am using bootstrap for "css only" to design my website generally. Here is how I do it.
/public/index.html
You can see that I have linked to my local bootstrap css file inside head tag.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
if(window.screen.height < window.screen.width) {
window.stop()
// window.location = "https://google.com"
}
</script>
<script src="init.js" ></script>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="%PUBLIC_URL%/bootstrap.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body style="background-color: #efefef">
<div id="root"></div>
</body>
</html>
/src/App.js
I tried to demonstrate how I used css of bootstrap inside my reactjs component. You can also use className. Also take care while adding inline style. It must be object.
const Main = () => {
return(
<div class="d-flex justify-content-center" style={{width:"100vw", height:"100vh"}}>
<div>1</div>
<div class="flex-grow-1">2</div>
<div>
<button class="btn-primary p-2">Abe !</button>
</div>
</div>
)
}
export default Main;
If you get any error. Search for the error and try to resolve with help of google. Those error are common and can be easily fixed. You will learn alot from those errors.
I am using a fixed sidebar for my page and I am using bootstrap to make it responsive design. However, when I try different screen resolution, my content is going out of the screen rather than going down to the first div. Please see the screenshot for the more easy explanation.
I tried everything possible still nothing worked. Attached is screenshot for problem, and my code.
Expected Output: (1440px works fine)
Error : (1024px does not work)
Works : (954px works)
HTML :
<!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.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.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>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="wrapper">
<div class="container" style="padding-top:50px;">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS :
html, body {
overflow-x : hidden;
}
.header_wrapper {
height: 70px;
background: #fff;
}
.sidebar {
background-color: #fff;
bottom: 0;
top: 0;
overflow: hidden;
width: 180px;
display: flex;
height: 100%;
position: fixed;
filter: drop-shadow(-5px 0px 10px #B0DFC0);
}
.wrapper {
background: #F1FAF4;
padding-left: 200px;
min-height: 100vh;
width: 100%;
}
.form_container {
background: #ffffff;
border-radius: 5px;
padding: 20px 30px;
filter: drop-shadow(0px 5px 15px #B0DFC0);
margin-bottom: 70px;
}
Any help will be appreciated.
I changed div container with div wrapper and that did it.
https://jsfiddle.net/jee7384b/13/
<!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.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.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>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="container" style="padding-top:50px;">
<div class="wrapper">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Also, you should style everything in the css file.
I have created two href's which act like buttons, in a comic game. I am following this tutorial . The issue i have is the links are not clickable. They dont respond to touch, nothing happens when clicked.
Here is the project structure:
here is my styles.css:
* {
font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
margin: 0px auto;
background-color:#0a3003;
}
img {
margin:0px;
padding:0px;
border:0px;
width:100%;
height:auto;
display:block;
float:left;
}
.btn {
display: inline-block;
padding: 15px 4% 15px 4%;
margin-left: 1%;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 5px;
font-size: 30px;
text-align: center;
vertical-align: middle;
border: 0;
color: #ffffff;
background-color: #4b4237;
width: 40%;
height: 80px;
text-decoration: none;
}
and now i'll show you the index.html where the button is not clickable from :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<div>
<img src="images/coverpage.png" alt="Cover Page"/>
</div>
<div>
<a href="#" class="btn" ><<</a>
<a href="comic/page1.html" class="btn" >>></a>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
When i load the program onto the tizen wearable emulator it looks like this but nothing is clickable:
In my opinion,
if you want to move between pages with tau.js library, you need to follow their rule. Here is some reference guide.
https://developer.tizen.org/development/ui-practices/web-application/tau/hello-world#fill_content
Maybe this issue was appeared because you didn't define "page" of TAU.
It is very simple. Just insert class="ui-page" in root <div> tag.
I tested on my desktop with Tizen IDE. In your index.html,
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>2nd Race</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="images/coverpage.png" alt="Cover Page"/>
<div>
<<
>>
</div>
</div>
</div>
<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script src="app.js"></script>
<script src="lowBatteryCheck.js"></script>
</body>
</html>
And on every other pages(comic/page1.html, page2.html... etc)
<!DOCTYPE html>
<html>
<body>
<div class="ui-page">
<div class="ui-content">
<img src="../images/page1.png" alt="Page 1" />
<div>
<a href="../index.html" class="btn" ><<</a>
<a href="page2.html" class="btn" >>></a>
</div>
</div>
</div>
<script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>
</body>
</html>
Please try again with above my example.
I checked that project runs well now :)