I downloaded two css files from https://www.w3schools.com/w3css/4/w3.css and https://www.w3schools.com/lib/w3-theme-blue.css. When using them locally, somehow they cannot work(i.e. cannot reflect the desired output).
(Desired output)Using online css:
online result
html code using online css :
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<body class="w3-theme-l4">
<div style="min-width:400px">
<div class="w3-bar w3-large w3-theme-d2">
<span class="w3-bar-item">UpLevel Admin</span>
</div>
<div class="w3-bar w3-medium w3-theme-d2">
Categories
Level
Progress
</div>
<br>
<div class="grid-container">
<div class="w3-bar-item w3-btn"><img src="images/admin_math.png"><span class="caption">Math</span></div>
<div class="w3-bar-item w3-btn"><img src="images/languages.png"><span class="caption">Languages</span></div>
<div class="w3-bar-item w3-btn"><img src="images/sat.png"><span class="caption">SAT</span></div>
<div class="w3-bar-item w3-btn" onclick="location.href='progress.html';"><img src="images/coding.png"><span class="caption">Coding</span></div>
</div>
</div>
</body>
</html>
===================================================
Using offline css:
offline result
html code using offline css:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-blue.css">
<link rel="stylesheet" href="styles.css">
<body class="w3-theme-l4">
<div style="min-width:400px">
<div class="w3-bar w3-large w3-theme-d2">
<span class="w3-bar-item">UpLevel Admin</span>
</div>
<div class="w3-bar w3-medium w3-theme-d2">
Categories
Level
Progress
</div>
<br>
<div class="grid-container">
<div class="w3-bar-item w3-btn"><img src="math.png"><span class="caption">Math</span></div>
<div class="w3-bar-item w3-btn"><img src="languages.png"><span class="caption">Languages</span></div>
<div class="w3-bar-item w3-btn"><img src="sat.png"><span class="caption">SAT</span></div>
<div class="w3-bar-item w3-btn" onclick="location.href='progress.html';"><img src="coding.png"><span class="caption">Coding</span></div>
</div>
</div>
</body>
</html>
The issue is maybe, the level of hierarchy of your files and folders where you are keeping your CSS stylesheet.
Make sure to place your CSS files at the same hierarchy (in the same project folder)
Note: The files shouldn't be any folder because your math is absolute and will work at the same level only.
And Make sure of any typos you may have done to the file names
Related
I've been trying : text-align:center, align-items:center..
In this code, I use BootStrap, but I also tried to over-code it via css- nothing helps.
I'd really thank you for help.
<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" />
<title>HTML Final Task</title>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
</head>
<body>
<div class="nav-container-wrap">
<div class="nav container py-3 justify-content-between text-center">
<div class="left-box d-flex gap-5">
<div class="nav-item"><h3>Adantrip</h3></div>
<div class="nav-item"><p>Hotels</p></div>
<div class="nav-item"><p>Rooms</p></div>
<div class="nav-item"><p>Flights</p></div>
<div class="nav-item"><p>Cars</p></div>
<div class="nav-item"><p>Experiences</p></div>
</div>
<div class="right-box d-flex gap-5">
<div class="nav-item">USD</div>
<div class="nav-item"><i class="fa-solid fa-flag-usa"></i></div>
<div class="nav-item">
<i class="fa-solid fa-user"></i> My Account
</div>
</div>
</div>
</div>
</body>
</html>
The use of the HTML <p> and <h1> tags are throwing off the Bootstrap layout because of their default attributes. Rather than fight with them, use the classes that Bootstrap provides. align-items-center on your flex containers and the responsive h1 class on the item you want for your header.
<!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" />
<title>HTML Final Task</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>
<body>
<div class="nav-container-wrap">
<div class="nav container py-3 justify-content-between align-items-center text-center ">
<div class="left-box d-flex align-items-center text-center gap-5">
<div class="nav-item h1">Adantrip</div>
<div class="nav-item">Hotels</div>
<div class="nav-item">Rooms</div>
<div class="nav-item">Flights</div>
<div class="nav-item">Cars</div>
<div class="nav-item">Experiences</div>
</div>
<div class="right-box d-flex gap-5">
<div class="nav-item">USD</div>
<div class="nav-item"><i class="fa-solid fa-flag-usa"></i></div>
<div class="nav-item">
<i class="fa-solid fa-user"></i> My Account
</div>
</div>
</div>
</div>
</body>
</html>
There is nothing wrong with your code. Some Bootstrap default styles, same as margin-bottom in some tags, affect your code.
Let's make it simple and see the difference then correct it.
In this sample, I'm gonna use pure CSS.
Remove Bootstrap from your code temporarily and then add these styles:
.nav{display:flex;justify-content:space-between}
.left-box,
.right-box{display:flex;align-items:center;gap: 0.5rem;}
Guys I am stuck in making a top info bar where I can put all the necessary details like phone number, mail id and some social icons, and I am using Bootstrap 4.1.3 and Font-awesome 5.5 but whenever I try to put a hyperlink after the icon it comes down to the next line. How to properly align it in one line. I have tried a lots of methods but got no results so far.
Please check the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Anything</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="top-info d-sm-none d-md-block">
<div class="col-md-8">
<ul class="list-inline">
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span>Login</span></li>
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span>Login</span></li>
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span>Login</span></li>
</ul>
</div>
<div class="col-md-4">
<i class="fas fa-sign-in-alt"></i><span>Login</span>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
I changed some things in your code, i added the class col-md-8 in the faulty div and so the code is this one <div class="col-md-8">. You can also check the result here https://codepen.io/ekk0/pen/xyOoBB?editors=1000. My guess is that because originally you used col-md-4 it would be a bit buggy. Hope it helps!
Include i tag inside span tag like this
<span> <i class="fas fa-sign-in-alt">Login</i></span>
https://jsfiddle.net/isubhamb/jztosgbd/13/
I just put my HTML through validation at W3C and got back the following error:
ERROR: CSS: text parse error - it's talking about the sidebar-container DIV.
What am I doing wrong? I have a couple of errors relating to the same sidebar-container div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prisma Kitchens</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="desctiption" content="Kitchen designers in Manchester.">
<meta name="author" content="Prisma Kitchens">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css.css" style="text/css">
<link rel="stylesheet" href="responsive.css" media="screen and (max-width:970px)" style="text/css>
</head>
<body>
<div class="sidebar-container">
<div class="sidebar">
<div class="logo">
<!--Logo is here-->
</div>
<div class="links">
<ul>
<li>home</li>
<li>about</li>
<li>services</li>
<li>gallery</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div class="right-container">
<div class="head_image_mobile"></div>
<div class="heading_image">
<!--Holds the image at top of page-->
</div>
<div class="content">
<div class="subheading">Why Choose Prisma Kitchens?</div>
<a class="button" href="about.html">Learn More...</a>
<div class="content_gap"></div>
<div class="subheading">What Can We Offer?</div>
<a class="button" href="services.html">Our Services...</a>
<div class="content_gap"></div>
</div>
</body>
</html>
It's type="text/css" not style="text/css". Also there was a " in type="text/css missing and a closing </div> at the end.
Cleaned up
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prisma Kitchens</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="desctiption" content="Kitchen designers in Manchester.">
<meta name="author" content="Prisma Kitchens">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css.css" type="text/css" >
<link rel="stylesheet" href="responsive.css" media="screen and (max-width:970px)" type="text/css">
</head>
<body>
<div class="sidebar-container">
<div class="sidebar">
<div class="logo">
<!--Logo is here-->
</div>
<div class="links">
<ul>
<li>home</li>
<li>about</li>
<li>services</li>
<li>gallery</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div class="right-container">
<div class="head_image_mobile"></div>
<div class="heading_image">
<!--Holds the image at top of page-->
</div>
<div class="content">
<div class="subheading">Why Choose Prisma Kitchens?</div>
<a class="button" href="about.html">Learn More...</a>
<div class="content_gap"></div>
<div class="subheading">What Can We Offer?</div>
<a class="button" href="services.html">Our Services...</a>
<div class="content_gap"></div>
</div>
</div>
</body>
</html>
Im working on a simple project and i am new to this(as the title says).
So what i want to happend is: When you tap a link(ommig) i want the unit to vibrate a bit.
I tried to use Hammer.js lib but failed, I dont really mind using the html5 way, so im not all locked in to just be using hammer.js.
So when I click the #ommig ID/class i want the unit to vibrate.
Please help a newbie in distress (and thanks for all the answers)
HTML (i deleted all my bad js code):
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start</title>
<link rel="shortcut icon" href="img/icon.jpg">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="hammer.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="index.html"> <div class="container">
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="img/logo.png" alt="image">
</div>
<div class="item">
<img src="img/logo2.png" alt="image">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="ommig.html"> <div id="ommig"> <p>Om mig </p>
</div> </a>
<a href="cv.html"> <div id="cv"> <p> CV </p>
</div> </a>
<a href="portfolio.html"><div id="portfolio" >
<p> Portfolio </p>
</div></a>
<a href="kontakt.html"><div id="Kontakt" >
<div id="kontakt" >
<p> Kontakt </p>
</div></a>
</body>
</html>
There is a new HTML Vibrate API, but it is not very widely supported.
//Check if Vibrator is available, use custom browser prefix if needed
navigator.vibrate = navigator.vibrate ||
navigator.webkitVibrate ||
navigator.mozVibrate ||
navigator.msVibrate;
if (navigator.vibrate) {
console.log('vibration supported');
navigator.vibrate(500);
} else {
console.log('vibration not supported');
}
Read more here: http://shapeshed.com/html5-vibrate-api/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have 2 different html files (located in the same directory). One file works perfectly for my menu. http://gyazo.com/3ee7c319ceb57bb1e91efb16cc93c28d
However, when I COPY AND PASTE the exact same code into the other html file, the menu looks like this: http://gyazo.com/ac9d43e9dcfada048dc206e735a6a5d0
Here is the code for the first (working) file:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Boxify: Free HTML5/CSS3 Template by Peter Finlan</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link href="css/styles2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row nav-wrapper">
<div class="col-md-6 col-sm-6 col-xs-6 text-right navicon">
<p></p><a id="trigger-overlay" class="nav_slide_button nav-toggle" href="#"><span></span></a>
</div>
</div>
<div class="overlay overlay-boxify">
<nav>
<ul>
<li><i class="fa fa-heart"></i>About
</li>
<li><i class="fa fa-flash"></i>Features
</li>
</ul>
<ul>
<li><i class="fa fa-desktop"></i>Screenshots
</li>
<li><i class="fa fa-download"></i>Download
</li>
</ul>
</nav>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/min/scripts-min.js"></script>
</body>
</html>
Here is the code for the other file (that does not work):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{$title}</title>
<link rel="shortcut icon" href="{$url}/favicon.ico" />
<link href="{$url}/{$theme_path}/{$theme_name}/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="{$url}/{$theme_url}/js/jquery.js"></script>
<script type="text/javascript" src="{$url}/{$theme_url}/js/jquery.timeago.js"></script>
<script type="text/javascript" src="{$url}/{$theme_url}/js/functions.js"></script>
<link rel="shortcut icon" href="../favicon.ico">
**<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link href="css/styles2.css" rel="stylesheet">**
</head>
<body>
<div class="topbar">
<div class="header">
<a href="{$url}">
<div class="logo"></div>
<div class="logo-small"></div>
</a>
<div class="search-input">
<input type="text" id="search" placeholder="{$lng->search_for_people}">
</div>
<div class="search-container"></div>
<div class="container">
**<div class="row nav-wrapper">
<div class="col-md-6 col-sm-6 col-xs-6 text-right navicon">
<p></p><a id="trigger-overlay" class="nav_slide_button nav-toggle" href="#"><span></span></a>
</div>
</div>
<div class="overlay overlay-boxify">
<nav>
<ul>
<li><i class="fa fa-heart"></i>About
</li>
<li><i class="fa fa-flash"></i>Features
</li>
</ul>
<ul>
<li><i class="fa fa-desktop"></i>Screenshots
</li>
<li><i class="fa fa-download"></i>Download
</li>
</ul>
</nav>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/min/scripts-min.js"></script>**
{$menu}
<div class="topbar_margin"></div>
{$content}
<div class="row-body">
<div class="footer">
<div class="footer-container">
<div class="footer-links">
{$lng->terms_of_use} -
{$lng->privacy_policy} -
{$lng->disclaimer} -
{$lng->developers} -
{$lng->contact} -
{$lng->about} -
{$lng->title_admin}
</div>
<div class="footer-languages">
{$lng->language}: {$language}
</div>
<div class="footer-languages">
Copyright © {$year} {$footer}. {$lng->all_rights_reserved}. {$powered_by}
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/min/scripts-min.js"></script>
</body>
</html>
have you tried using <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> in the files instead of <link href="css/bootstrap.min.css" rel="stylesheet">.
Sometimes the path is not detected correctly that's why it is recommended to use the bootstrapcdn for linking the css file.
Figured it out, instead of:
<script src="js/demo1.js"></script>
I used:
<script src="http://goldenhoney.zz.vc/themes/dolphin/html/js/demo1.js"></script>
IM SO HAPPY. BUT CONFUSED AS TO WHY MY PREVIOUS CODE DID NOT WORK.