The files link when I open them normally but when I open them in localhost the .css file seems to have no effect.
Here's the code:
<link rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="random.css">
I've tried the file root as localhost too and still nothing. Any help here?
file structure is C:/Users/Kieran/Desktop/xampp/htdocs/portfolio/random.css
file structure is C:/Users/Kieran/Desktop/xampp/htdocs/portfolio/random.html
HTML file is in the same place.
Entire HTML code:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="random.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="main.html">Kieran Lythgoe Portfolio</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="panel panel-primary" id="panel1" style="width: 15%";>
<div class="panel-heading">Image Split</div>
<div class="panel-body">An image split into difference sections with different links</div>
<div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='imagesplit.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div>
</div>
<div class="panel panel-primary" id="panel2" style="width: 15%";>
<div class="panel-heading">Boolean</div>
<div class="panel-body";>A simple example of boolean with the use of addition of two numbers</div>
<div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='boolean.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div>
</div>
<div class="panel panel-primary" id="panel3" style="width: 15%";>
<div class="panel-heading">Random</div>
<div class="panel-body";>A simple example of boolean with the use of addition of two numbers</div>
<div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='other.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div>
</div>
</body>
</html>
Try it like this
<link rel="stylesheet" type="text/css" href="mystyle.css">
The type="text/css" attribute should be part of the <link> element:
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="random.css">
And remove the first line <link rel="stylesheet" type="text/css">
This should work :
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="random.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="main.html">Kieran Lythgoe Portfolio</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="panel panel-primary" id="panel1" style="width: 15%";>
<div class="panel-heading">Image Split</div>
<div class="panel-body">An image split into difference sections with different links</div>
<div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='imagesplit.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div>
</div>
<div class="panel panel-primary" id="panel2" style="width: 15%";>
<div class="panel-heading">Boolean</div>
<div class="panel-body";>A simple example of boolean with the use of addition of two numbers</div>
<div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='boolean.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div>
</div>
<div class="panel panel-primary" id="panel3" style="width: 15%";>
<div class="panel-heading">Random</div>
<div class="panel-body";>A simple example of boolean with the use of addition of two numbers</div>
<div class="panel-footer panel-primary" id="footer1"><button onclick="window.location.href='other.html'" class="btn btn-primary" id="btn">CLICK HERE</button></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>
Here is the result without random.css :
https://i.imgur.com/eaTi03U.png
Related
I mentioned the bootstrap navbar fix code correctly. When I am scrolling the screen, my sections overflowing the navbar. Navbar is not yet fixed in the top of the page. Kindly confirm the changes should be made in bootstrap.min.css or we should change in HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>RaLas</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cookie">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="stylesheet" href="assets/css/oldcss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" crossorigin="anonymous">
</head>
<body>
<!-- Start: Navigation Clean -->
<nav class="navbar navbar-light navbar-expand-md navbar-inverse navbar-fixed-top navigation-clean sticky-top">
<div class="container"><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1"><img src="assets/img/Logo_name.png" style="margin-left: -5px;height: 40px;width: 200px;">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link active navbar-text" href="#home" style="color: #205D84;"><strong>HOME</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link navbar-text" href="#aboutus" style="color: #205D84;"><strong>ABOUT US</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link navbar-text" href="#services" style="color: #205D84;"><strong>SERVICES</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link navbar-text" href="#contactus" style="color: #205D84;"><strong>CONTACT US</strong></a></li>
</ul>
</div>
</div>
</nav>
<!-- End: Navigation Clean -->
<section id="home" style="padding-top: 0px;padding-bottom: 0px;">
<header id="homepage" class="masthead text-center text-white d-flex home" style="background-image: url("assets/img/homepage_Background_only.jpg");margin-top: 0px;padding-top: 0px;">
<div class="container my-auto" style="margin-top: 161px;">
<div class="row" style="margin-top: 150px;">
<div class="col-lg-10 mx-auto" style="margin-top: -150px;"><img src="assets/img/Ralas_logo_homepage_png.png" style="width: 316px;">
<h2 style="margin-bottom: 7px;">Welcome to RaLas</h2>
</div>
</div>
<div class="col-lg-8 mx-auto" style="margin-top: 10px;"><a class="btn btn-primary text-center btn-xl js-scroll-trigger home_page_button button_hover" role="button" href="" style="background-color: rgba(22,138,221,0);padding-top: 5px;height: 30px;font-size: 15px;">Follow us</a></div>
<!-- Start: social media Icons -->
<div class="row" style="height: 400px;margin-top: 30px;">
<div class="col-12 col-sm-4 col-md-4 col-lg-4" style="height: 130px;">
<div class="login-card"><img class="profile-img-card" src="assets/img/insta.png" style="width: 60px;height: 60px;">
<p class="profile-name-card" style="color:white">Instagram</p>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4" style="height: 130px;">
<div class="login-card"><img class="profile-img-card" src="assets/img/facebook.png" style="width: 60px;height: 60px;">
<p class="profile-name-card" style="color:white">Facebook</p>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4">
<div class="login-card"><img class="profile-img-card" src="assets/img/whatsapp.png" style="width: 60px;height: 60px;">
<p class="profile-name-card" style="color:white">Whatsapp</p>
</div>
</div>
</div>
<!-- End: social media Icons -->
</div>
</header>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="assets/js/scrollscript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src='contatcjs/sampjs.js'></script>
<script src='contatcjs/faq.js'></script>
<script src="assets/js/script.min.js"></script>
<script src="assets/js/scrollscript.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</body>
</html>
Try to replace the class navbar-fixed-top with just fixed-top class in <nav class>
I try to use the materialize.css library. I used the HTML setup with the CDN and copied a navbar inside (https://materializecss.com/getting-started.html)
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<nav class="nav-extended">
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
</div>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab">Test 1</li>
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
</ul>
</div>
</nav>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
The are not aminations, both "Test1" and "Test2" get displayed. I guess there is something missing, because I get no error. Does anyone know how to do this?
I can see you are trying to use tab in navbar. So, you are missing 2 things:
JQuery CDN link
Initialization
You have to refer to this documentation to implement tab: https://materializecss.com/tabs.html
Demo in codepen: https://codepen.io/Bibeva/pen/KKwyqre
Final code:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav class="nav-extended">
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
</div>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab">Test 1</li>
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
</ul>
</div>
</nav>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<!--JavaScript at end of body for optimized loading-->
<!-- Jquery CDN Newly Added -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Initialization Newly Added -->
<script>
$(document).ready(function () {
$('.tabs').tabs();
});
</script>
</body>
</html>
You have to use tab class properly, try the below code
.tab a{
color:#bbb !important;
}
.tab a.active{
color:#eee !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<div class="row ">
<div class="col s12">
<ul class="tabs red lighten-1">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3">Test 3</li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
</div>
All the code work so far but whenever i try and input bootstrap elements after the header its not displaying properly? Anyone know what going on here? Not sure why because the code all works so far? Anything after the header-main div is not displaying correctly!
<!DOCTYPE html>
<html>
<head>
<title>The Beckwood - Scunthorpe</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=satisfy"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy"
rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="header-main">
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#" >
<img src="assets/img/logo.png">
</a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>MENU</li>
<li>GALLERY</li>
<li>ABOUT</li>
<li>BOOK A TABLE</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
<div class="hero">
<h1 id="welcome">Welcome to The Beckwood.</h1>
<p>The Beckwood is a family run pub located in scunthorpe offering quality homemade food, carverys, events and live sports.</p>
<div class="btn btn-primary">View Menu</div>
<div class="btn btn-primary">Book a table</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Why the button is located on the left and not under the picture?
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="~/Content/My.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">
<img src="~/Images/FirstImage.jpg" class="img" />
<button type="button" class="btn btn-default">Buy</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Image is an inline element such as span, not block element such as div, so next element is following the image on the same line.
To make it block element you can put the image inside the div:
<div><img ...></div>
or use style to make it block element
<img style="display: block;" >
or using the css annotation:
.img { display: block; }
Because neither image or button are block elements. This doesn't have anything to do with bootstrap.
img {
display: block;
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="~/Content/My.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">
<img src="https://placebear.com/100/100" class="img" />
<button type="button" class="btn btn-default">Buy</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You need to set this CSS rule:
.panel-body { display: grid; }
Or this one:
.img { display: block; }
And here is the jsfiddle
I am making a Navbar using Bootstrap 3 and when I put in the ul tag and add a list item it doesn't show up. I have tried wrapping it in a div with the class of container but that doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Course</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="logo.png"></a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
</div>
</div>
</div>
<div class="row">
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384- 0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="scripts.js"></script>
</body>
</html>
Please use navbar code listed in bootstrap documentation.
You need to replace class="nav-collapse collapse navbar-responsive-collapse"> with class="collapse navbar-collapse"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.png">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
use border first on your css file to locate where is your nav bar location in the page like this..
div class="navbar navbar-default navbar-fixed-top" style="border:2px solid #000000">
this will guide you..
Hope it helps..
Looks like you're missing JQuery.
Add this above your bootstrap JS
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Here's an example codepen http://codepen.io/anon/pen/zBRLZo