Effect of html
This is what happens when I run below html in the browser (Chrome & Safari).
Can't be normal behaviour. What am I missing?
Using Materialize (materializecss.com) framework, no additional css with the materialize css.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="keywords" content="styling, interieur, kleur, inrichting">
<!-- Compiled and minified CSS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-
rc.2/css/materialize.min.css">
<style>
.btn-floating {margin: auto;}
</style>
<title>BOOST-Restyling Interieur Styling</title>
<link rel="icon" type="image/gif" href="img/boost.ico">
</head>
<body>
<div class="center">
<div class="left">
<a class="btn-floating tooltipped btn-large waves-effect waves-light
blue-grey darken-2" data-position="bottom" data-tooltip="Naar vorig project"
href="prj-5-detail.html"><i class="material-icons">chevron_left</i></a>
</div>
<div class="center">
<a class="btn-floating tooltipped btn-large waves-effect waves-light
blue-grey darken-2" data-position="bottom" data-tooltip="Terug naar
projecten" href="projecten.html"><i class="material-icons">close</i>
</a>
</div>
<div class="right">
<a class="btn-floating tooltipped btn-large waves-effect waves-light
blue-grey darken-2" data-position="bottom" data-tooltip="Naar volgend
project" href="prj-2-detail.html"><i class="material-icons">
chevron_right</i>
</a>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Compiled and minified Materialize JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-
rc.2/js/materialize.min.js"></script>
</body>
</html>
The solution appears to be to make the divs display: inline-block;. Then they'll align on one line.
Can u edit the codes be pre-viewable for icons?
Related
I trying position image in my html at the right side of the page but am not able to achieve. I want position text at the left
side of the page and image the right side of the page using bootstrap in the image attached.
If bootstrap has layout function to achieve such result, you can post the link for me learn.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world</title>
</head>
<body>
<main class="hero-section">
<div class="container">
<div class="section-content">
<h4>LEARNING BOOTSTRAP</h4>
<h6>Discover places near you</h6>
<button class="btn btn-primary btn-sm" type="submit">SIGN UP</button>
<a class="btn btn-primary btn-sm" href="#" role="button">LEARN MORE</a>
</div>
<div class="section-device">
<img src="pc_image.png">
</div>
</div>
</main>
<!-- Footer -->
<footer class="page-footer font-small blue">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2023 Copyright:
MDBootstrap.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
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 have multiple webpages that have the same header:
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-
1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-
3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-
1.2.5/datatables.min.css"/>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-
2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-
1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-
1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>
Since these references change with time, I'd like to embed this code in 1 html page and then reference that page in the multiple webpages. That seems much easier than going in to 20 html files and updating manually, as needed.
I've scoured around and can't find what is probably an obvious answer. Is there a way to do this with an "include" statement?
Any help is much appreciated!!!!
First question, what framework/language you're using to develop your website?
What you're trying to do is actually creating web design template.
For example in html with php,
<html lang="en">
<!-- Top Bar -->
<?php require 'TopBar.php';?>
<!-- Main Navigation + LOGO Area -->
<?php require 'MainNavigation.php';?>
<!-- Banner -->
<header class="flat-header">
<!-- Banner Content-->
<div class="header-content">
<div class="header-content-inner">
<h1 class="homeHeading animated slideInDown">Singapore Dreams - Our Business.<span>
</span></h1>
<!--<h1 class="homeHeading animated slideInDown">Financial Consulting isn’t a thing we do. <span>-->
<!--It’s the thing that runs our business.</span></h1>-->
<div class="konnect-button-1 animated bounceIn">Read More</div>
</div>
</div>
</header>
<!--Top Call to Action-->
<?php require 'indexCallToAction.php';?>
<body>
//normal html file here
</body>
</html>
TopBar.php
<?php
/**
* Created by PhpStorm.
* User: Marcia
* Date: 23/5/2017
* Time: 10:03 PM
*/
include 'var.php';
echo'
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Marcia Ong">
<meta name="keywords" content="">
<!-- Favocon -->
<link href="img/sg-alliance-logo.png" rel="shortcut icon" type="image/x-icon"/>
<!-- Title -->
<title>SG </title>
<!-- Bootstrap Core CSS -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom icon Fonts -->
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Animated CSS -->
<link href="css/animate.css" media="all" rel="stylesheet" type="text/css" />
<!-- Main CSS -->
<link href="css/default.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn\'t work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- Body -->
<body>
<!-- Pre Loader -->
<div class="loading">
<div class="loader"></div>
</div>
<div class="konnect-info">
<div class="container">
<div class="row">
<!-- Top bar Left -->
<div class="col-md-6 col-sm-8 hidden-xs">
<ul>
<li><i class="fa fa-paper-plane" aria-hidden="true"></i>';echo $EnquiryEmail;echo ' </li>
<li class="li-last"> <i class="fa fa-volume-control-phone" aria-hidden="true"></i>'; echo"$contactNum"; echo '</li>
</ul>
</div>
<!-- Top bar Right -->
<div class="col-md-6 col-sm-4">
<ul class="konnect-float-right">
<li class="li-last">
<a target="_blank" href="https://twitter.com/Sg_Alliance1"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a target="_blank" href="https://www.facebook.com/SG-Alliance-133770687187613/"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a target="_blank" href="https://www.instagram.com/sg.alliance/?hl=en"> <i class="fa fa-instagram"></i> </a></li>
</ul>
</div>
</div>
</div>
</div>
' //end of echo
?>
<!--<a target="_blank" href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>-->
<!--<a target="_blank" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>-->
I just started playing around with materializecss framework. After going through the form page. I decided to try a simple example shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<link rel="shortcut icon" href="images/icon.png" type="image/png">
<title>form example</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<div class="navbar-fixed">
<nav class="blue darken-4" role="navigation">
<ul id="slide-out" class="side-nav">
<li><div class="userView">
<div class="background blue darken-3">
<!--<img src="images/background3.jpg">-->
</div>
</div>
</li>
</ul>
<i class="material-icons">menu</i>
<div class="nav-wrapper">
<a id="logo-container" href="index.php" class="brand-logo"><img src="images/icon.png">Form</a>
<ul class="right hide-on-med-and-down">
<li><div class="right"><a class="waves-effect waves-light btn red modal-trigger tooltipped" data-position="bottom" data-delay="50" data-tooltip="Click to login or register " href="login.php" >Login</a></div></li>
</ul>
</div>
</nav>
</div>
<form id="uploadimage" class="col s12" method="post" action="" enctype="multipart/form-data" >
<div class="form-container">
<div class="row">
<div class="file-field input-field col s12">
<div class="btn waves-effect waves-light blue darken-3">
<span>browse</span>
<input type="file" id="image" name="image" accept="image/x-png,image/jpeg, image/jpg">
</div>
<div class="file-path-wrapper">
<input id="imagef1" name="imagef1" class="file-path validate" placeholder="Image 1: Product Front View" type="text">
</div>
</div>
</div>
<center>
<input type="button" id="postform" onclick="return check(this.form, this.form.image);" class="btn waves-effect waves-light red" value="Post Product" name="postform" />
</center>
</div>
</form>
<div id="modal5" class="modal bottom-sheet">
<div class="modal-content">
<p align="center">You must provide all the requested details. Please try again</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#image").change(function(){
alert("file upload changed");
});
});
function check(form, image) {
//Check each field has a value
if (image.value == '' ) {
$('#modal5').openModal();
//alert('You must provide all the requested details. Please try again');
return false;
}
}
</script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
</body>
</html>
After clicking on the browse button, the jquery code on change does not execute. What am i doing wrong here?
I was able to fix the problem via help from #wackychocolatefactory from materializecss github page. The answer lies in the order of my JavaScript files. That is moving the script of jquery and materializecss above that of $(document).ready(function(){});
so I should put it in this order
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#image").change(function(){
alert("file upload changed");
});
});
function check(form, image) {
//Check each field has a value
if (image.value == '' ) {
$('#modal5').openModal();
//alert('You must provide all the requested details. Please try again');
return false;
}
}
</script>
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 7 years ago.
Improve this question
This is my MyWebsite.html file
<DOCTYPE !html>
<html>
<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="MyWebsite.css" media="screen" type="text/css">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="top">
<div class="panel-footer row"><!-- panel-footer -->
<div class="col-xs-6 text-left">
<button id="home" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-home"></span> Home</button>
<img href="#" style="height:35px" src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png">
<img href="#" style="height:35px" src="http://www.mosa.nl/files/8613/8668/4836/available-in-app-store-badge.png">
</div>
<div class="col-xs-6 text-right">
<button id="ourApps" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-phone"></span> Our Apps</button>
<button id="contactUs" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Contact Us</button>
</div>
</div><!-- end panel-footer -->
</div>
</body>
</html>
My CSS wont really matter because I've cleared it many times because it did not work.
When I open the website in Chrome, the CSS simply does not kick in and does not take effect. For example, I would do "text-decoration: none;" for all <a> tags, but still, there would be an underline when I hover over the text. Or, when I try to change the text color, it still stays black. Why doesn't it work?
You will have to place your own CSS file
<link rel="stylesheet" href="MyWebsite.css" media="screen" type="text/css">
below
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
The simple reason is that your CSS properties in MyWebsite.css gets overrided by the CSS properties in bootstrap.min.css file.