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.
Related
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?
I have properly linked the online bootstrap style sheet in html, but when I open the link, the 'Click here!' doesn't come in a button. How do I solve this?
Here's my code:
using btn-primary
This is the output:
No button there
To get the button, the <button> tag is used. And type is set on the basis of necessary like button, submit.
<div class="container">
<button type="button" class="btn btn-primary">Primary Button</button>
</div
For further detail, you can visit to https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
set button not div
<button type="button" class="btn btn-primary">Primary</button>
see here:https://getbootstrap.com/docs/4.0/components/buttons/
BUT IT WORK WITH DIV check if you have bootstrap script
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="btn btn-primary">Primary</div>
</div>
It should work with a div as well as button or anchor tag just try.
<div class="btn btn-primary">Primaray</div>
OR
<button type="button" class="btn btn-primary">Primary</button>
OR
Primary
I want to create a wordpress page which I can put the html code to do the following please
1) Google custom search box (which i can get the GCS code from google) but it has to be OVER an image. not above or below the image :). image will be hosted on my site media library
2) round icons buttons below the search box similar to the one i have attached which bounces when mouse over (images of these icons can be changed and destination urls assigned by me)
the attached example is the yahoo new tab extension for firefox
any help is appreciated.
i have attached the sample page image and the view source code of that page to help understand my context. the difference is that the search will be by google instead of yahoo
thank you friends!
view code below as its not letting me attached doc
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" type="text/css" href="newtab.css">
<link rel="stylesheet" type="text/css" href="brand.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body id="bg" class="flexContainer bgImage">
<div id="bookmarksAbsolute">
<div id="bookmarksFlex" class="uiBG"></div>
</div>
<div id="searchTrendingNowContainer"></div>
<div id="mainContainer">
<div id="uiBlur"></div>
<div id="uiContainer">
<form id="submitSearchNew">
<img id="magnifierNew" src="icons/mag3.svg">
<input type="text" id="searchBoxNew" autocomplete="off" name="p" tabindex="1">
</form>
<div id="searchSuggestContainerNew" class="searchSuggestContainerNew displayNone"></div>
</div>
<div id="urlHidden"><span id="urlContent"></span></div>
</div>
<div id="darkOverlay"></div>
<div id="pageFooter">
<div id="ownerContainer">
<a id="ownerName" class="credit"></a>
<a id="onFlickr" class="credit flickr"></a>
</div>
<div class="newTopSitesContainer" id="topSites"></div>
<div id="urlInfo"></div>
</div>
<div class="dropup" id="dropupMenu">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
</button>
<ul class="dropdown-menu options-list">
<li><a id="toggleViewText" class="toggleText unselectable"> </a></li>
<li class="divider"></li>
<li id="tnDiv" class="displayNone"><a id="toggleTN" class="unselectable"> </a></li>
<li id="tnDivider" class="divider displayNone"></li>
<li><a id="editButton" class="unselectable"> </a></li>
<li class="divider"></li>
<li><a id="feedBack" class="feedBackLink unselectable"> </a></li>
</ul>
</div>
</body>
<script src='newtab.js'></script>
</html>
I do not understand you, if you need show up input tag and image in other image?
If is it yes, use z-index CSS for image for example:
<div class="base"> <!-- z-index = 1 -->
<input type="search" class="search" /> <!-- z-index = 2 -->
<div class="buttons_footer"> <!-- z-index = 2 -->
<button></button>
<button></button>
<button></button>
.....
</div>
</div>
I hope to help
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.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
So, I've customized the design for the 404 page - however, I'm having trouble implenting it.
I've learned quickly that for one you have to embed the CSS directly into the HTML - and secondly it doesn't seem like I can use html.erb or embedded ruby in other words. With that said, what is the best way for me to implement the following design code to my 404.html page?
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<title>New Error Design</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/mystyle.css" rel="stylesheet">
<link href="css/mediaquery.css" rel="stylesheet">
<link rel="stylesheet" href="css/selectify.css" />
</head>
<body>
<header class="navbar navbar-inverse">
<div class="container">
<div class="row">
<div class="col-md-3 logo">
<img src="images/logo.png" alt="logo">
</div>
<div class="col-md-3 pull-right">
<button type="button" class="btn btn-info sign-i-u">Sign IN</button>
<button type="button" class="btn btn-info sign-i-u">Sign Up</button>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12 error_text">
<h1> Sorry, the page you requested is not found</h1>
<div class="col-md-12">
<div class="col-md-6 col-md-offset-3 text-center">
<%= link_to 'sign Up', new_user_registration_path, class: "btn btn-primary buttons_style" %>
<%= link_to 'Login', new_user_session_path, class: "btn btn-primary buttons_style" %>
<%= link_to 'Return To Home', root_path, class: "btn btn-primary buttons_style" %>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<p class="f-logo"><img src="images/footer_logo.png" alt="logo-image"></p>
<p class="links">
Blog
About
Privacy
Terms
Copyright
</p>
<p class="copy">2014 © Company name. All Rights Reserved</p>
</div>
</footer>
</body>
</html>
While this will mostly be opinion based, here's how I've done it...
I prefer to have a Rails template which I can use to generate the HTML for a 404 page, then simply save that page in the public/ folder of the app. This way, when the app changes, I can quickly visit a route to generate the 404 page, then save the HTML to the public/ directory.
Make sure you set up your application to use the custom pages. Rambling Labs has a good example of how to do this.