So I'm trying to use Bootstrap to make a site, and I saw that there was a capability to make a dropdown menu, which I was planning on doing anyways, so I jumped on it.
I haven't been able to get it to work at all. I've searched around, re-arranged my jQuery link to be before Bootstrap's, double and triple checked that my code had the same base as w3schools' example, but I haven't gotten any action to come out of clicking the button. I even got to the point where I commented out my code and replaced it with their example, but even that didn't work.
In my css file (and I'll include a copy below), I have overridden the background and border properties of all div objects to none, or with a set border of "1px solid black" so I can see the bodies and where they're landing. I also overrode the top and bottom margins of the row class, since I was trying to have items bordered up against each other. I have deleted that part of the css file and reloaded the page to see if that was the issue, but it didn't change the issue.
Stripping my entire css file (and an empty script file I'm writing later) out doesn't fix the issue.
Stripping the extra bootstrap link that allows me to make all columns on the same row the same height doesn't work.
Stripping the integrity and crossorigin out of the main link doesn't work (I found the link like that, I figured I'd leave it at the maker's recommendation).
Stripping all three out at the same time doesn't work. And that's stripping it out with the example from w3schools, even. I got suspicious of a bad link, and used the CDN that w3schools suggested for 'minified css'. No improvement.
So I'm a little at wit's end and fairly out of my depth. I'm going to put up just the necessary html code (I've commented everything else out by now trying to test the thing anyways), and I'm going to include my css code for the title bar that it's in just for completeness, although, again, I did tear the whole file from the html document at some point. So I'd be very surprised if the issue was even css related outside of the CDN link.
html code (my dropdown menu code is commented out, the active code is from w3school's example):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To-Do Weekly List</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />
<link href="format.css" rel="stylesheet" type="text/css" />
<script src="main.js"></script>
</head>
<body>
<!-- <div class="dropdown" id="option-div">
<button id="option-btn" class="btn btn-primary dropdown-toggle" type="button"></button>
<ul class="dropdown-menu">
<li id="pswd-change"><p>Change your password</p></li>
<li id="end-user"><p>Delete your account</p></li>
<li class="divider"></li>
<li id="help"><p>Help</p></li>
</ul>
</div> -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</body>
</html>
css code:
/*all div's, negating some of bootstrap's formatting*/
div {
position: relative;
background: none !important;
border: 1px solid black !important;
}
/*bootstrap's row class*/
.row{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*the button is within this title bar*/
#title-bar{
background: #b3ffb3 !important;
border: 2px solid grey !important;
}
/*This is the direct css for the button that's commented out*/
button#option-btn{
background: url(https://cdn1.iconfinder.com/data/icons/seo-13/512/settings-128.png);
height: 3rem;
width: 3rem;
background-size: 100%;
position: absolute;
bottom: 1rem;
left: 2rem;
}
/*the div item that held my button (commented out) and had class="dropdown"*/
#option-div{
height: 6rem !important;
width: 6rem !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
}
/*just for the header in the title bar
#header{
font-size: 4rem;
padding: .50rem;
}
If anyone can see what's going on here, I'd really appreciate it. I'm hoping I've just been looking at this for far too long, and I'm missing something really small.
Alright. As luck would have it, I found the problem right after I posted this.
I hadn't seen anywhere that I needed both the css and the javascript links. Or at least, having just the css link didn't help inside the html code, only when I also added the javascript code link was I able to make the dropdown menus work from my previous code and from w3school.
Call me green, but this is the first time I've encountered Bootstrap.
Related
I've double checked my syntax for linking the CSS file in the of my HTML file, and it all looks correct to me. And when I view the page source of my HTML page, it does indeed to be linking correctly to the CSS page. But none of the styling seems to be showing up. I'm fairly certain that the linking of the CSS file is fine, but I can't understand why none of the changes are appearing.
HTML FILE:
<!DOCTYPE html>
<html>
<head>
<!--title to appear on the tab of the browser-->
<title>Midterm: Hangman</title>
<!--linking a CSS style sheet for the page-->
<link rel="stylesheet" type="type/css" href="hangman.css">
<!--running the hangman game-->
<script src="hangman.js"></script>
</head>
<!--run the main function from the javascript file when page is loaded-->
<body onload="javascript:hideWord()">
<!--adding a title that will appear on the webpage-->
<h1>Hangman</h1>
<!--create a text box, restrict to only one letter being able to be typed, create placeholder text-->
<input id="guessedLetter" type="text" maxlength="1" minlength="1" placeholder="Guess a letter" />
<!--create a button to submit guessed letter and run the compareLetter function when clicked-->
<button type="button" onclick="javascript:compareLetter()">Guess!</button>
<button type="button" onclick="javascript:hideWord()">Restart</button>
<!--underscores to hide the word that the player is guessing-->
<div id="hiddenWord"></div>
<!--a counter to keep track of number of player attempts-->
<p id="counter"></p>
<!--add instructions for the player-->
<h2>Instructions</h2>
<p>Put some instructions here!</p>
</body>
</html>
CSS FILE:
body {
background: #2C2A30;
}
button[type=button] {
background: #D94C47;
font-family: Arial;
padding: 5px 5px;
font-size: 25px;
border-radius: 5px;
padding: 7px 12px;
border: 1px solid #D94C47;
color: white;
font-weight: bold;
}
button[type=button]:hover {
background: #FF7A61;
border: 1px solid #FF7A61;
color: #2C2A30;
}
SCREENSHOT OF CHROME DEVELOPER TOOL:
SCREENSHOT OF FOLDER STRUCTURE:
You should be using <link rel="stylesheet" href="hangman.css">.
You have a typo:
<link rel="stylesheet" type="type/css" href="hangman.css">
should be:
<link rel="stylesheet" type="text/css" href="hangman.css">
Note the type --> text.
Additionally, in HTML5 you don't need the type attribute at all, so you can just have:
<link rel="stylesheet" href="hangman.css">
If the CSS page is linking to the html page, and you're not seeing updates, it's possible that this is a cashing issue. In Google Chrome, right click on the page and click 'Inspect'. THEN, wiith the inspector open, navigate to the top of the page near the address bar and right click on the refresh icon. Then select 'Empty cache and Hard Reload'.
I'm working to reproduce a design I found, the design shows a text arrow like so:
Any idea how to make that arrow? The obvious > looks wrong:
It looks like your designer used chevron-right from Font Awesome. You can install it by adding a stylesheet from the Font Awesome CDN like I've done below or through any of the other setup options. Then, you can reference the icon on the page by copying the icon code that the Font Awesome documentation supplies you with.
Here's a demo where I've tried to recreate your image:
:root {
background-color: #22272A;
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: #BCBDBD;
}
.fa-chevron-right {
margin-left: 6px;
}
HIKING <span class="fas fa-chevron-right"></span>
<!-- External Libraries -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
In production code, you may want to choose a different installation method for performance considerations that takes into account your page's needs - for example, choosing to import SVGs with JavaScript if you don't have a very large number of icons to display.
Try http://fontawesome.io
They have lots of icons - Search for 'fa-angle-right ' on this page: http://fontawesome.io/cheatsheet
Otherwise, you can use a png or an svg.
<!DOCTYPE html>
<html>
<style>
body {
font-size: 20px;
}
</style>
<body>
<p>I will display ❯</p>
<p>I will display ❯</p>
</body>
</html>
I have index.html which looks like follows:-
html {
background-color: #0000FF;
}
body{
background-color: #FF0000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Mozilla is cool</h1>
<img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">
<div style="height: 100px; width: 100px;"></div>
<p>At Mozilla, we’re a global community of</p>
<ul> <!-- changed to list in the tutorial -->
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Read the <!--a href="https://www.mozilla.org/en-US/about/manifesto/"--><span>Mozilla Manifesto</span><!--/a--> to learn even more about the values and principles that guide the pursuit of our mission.</p>
</body>
</html>
Initially the margin of h1 is with the window and there is some extra space above body element. But if i add border: 1px solid black to my body element the margin of h1 is with body element.
Why is this so? The border of body element was present even before but we were not just displaying it right?
You can use box-sizing: border-box;
Many browsers have a default user agent stylesheet which automatically adds some styles - even if you haven't specified any.
For example, in chrome, i can see that the h1 will be given a slight margin-before and margin-end which would give you the gap between the body and H1.
You can override this default style-sheet by using one of many reset style-sheets example here
User agent stylesheets will be overridden by any other styles in the following order:
Browser/user default
External
Internal (inside the tag)
Inline (inside an HTML
element)
It may also be worth reading up on css specificity as it explains a lot of simple problems you may come across
I have a .jsp file that we use as a login page at https://com-bb-dev.com.edu and in that file it has a few lines laying out some links/buttons and a live chat button.
<h2><center>Accessibility Options</center></h2>
<ul>
<access class="access">
<img src="/images/ci/ng/fonts.gif" alt="" />
<a href="#" title="Change Text Size"
onClick="page.showChangeTextSizeHelp()">Change Text Size</a>
</access>
<access class="access">
<img src="/images/ci/ng/contrast.gif" alt="" />
High Contrast Setting
</li>
</access>
</ul>
<div id="parature">
<parature>
<a id="b2b8839e-6318-4c34-9863-9071b06192f3" href="javascript:void(0);" onclick="return launchChatWindow('http://com.parature.com/ics/support/default.asp?deptID=15028&task=chat&deploymentId=b2b8839e-6318-4c34-9863-9071b06192f3');"></a>
<script src="http://com.parature.com/ics/csrchat/inc/chatDeployment.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = createDplOnLoadDelegate('b2b8839e-6318-4c34-9863-9071b06192f3', 'com.parature.com', 15026, 15028, window.onload, true);
</script>
</parature>
</div>
Up within that same file I have declared some separate styles so that I can modify them without affecting anything else that is in the same . Here is what I declared:
parature
{
float: right;
margin-right: 18px;
position: relative;
bottom: 30px;
width: 138px;
}
access
{
display: inline-block;
margin: 0px -4px 6px;
font-size: 125%;
padding-left: 24px;
}
Of course, this works fine and the buttons and links display properly in Firefox and Chrome. And to my horrid dismay it does not work in IE8. You'll see that the button is treated as a direct down-the-line item and that the two links under accessibility options to not take on any CSS formatting. Is it because they are using styles that I declared locally in the .jsp page? I've already had to go back and discover that the ancient fossil didn't support transparency so that was fun to discover and fix. This is what I've tried so far:
parature
{
float:right;
width: 138px;
}
Because I read that floats don't work if the div doesn't have a width. Not sure what to look for. The IE8 developer pane is a total nightmare.
Thanks.
You are attempting to use custom elements, which you shouldn't be doing, but IE, specifically, will not style any elements it is not aware of. That would include every non-standard element you are attempting to use now.
This can be done using javascript. Google for "html5shim" for an example of how IE is updated to accept HTML5 elements.
EDIT: In addition, the elements you are using inside the ul are invalid since ul can only contain li elements.
There's no opening tag for the li. That could be the problem. If not, you might try using an inline-block on the parature class just to see if the block will render on the page.
I am trying to put social buttons facebook and tweetmeme in our site. I liked the way it's done in yahoo sites. Please look
Yahoo Link
I looked at yahoo code, but the implementation style is very difficult to understand. It would be great if someone can help me in html/css coding.
Thanks.
Update
This is the code I have so far.. The issues I am having is Yahoo customized the css by changing the facebook and tweetmeme css behavior. Please check the attached image and compare with it. The code I am using is
<a name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a><script
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<script type="text/javascript">
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Please let me know, can we have exactly they have. I liked the look and feel of that. :)
Thank You.
I solved this for http://www.easynda.com using tips from http://neilgoodman.net/2012/01/14/making-social-buttons-line-up-in-a-row-in-css/ and some refinements.
I started by trying to use margins or padding in CSS to adjust the position of the social buttons, but that didn't work. Each button has slightly different margins and padding, which meant my adjustments never worked right and didn't look the same across browsers.
What's needed is to be able to accommodate the variation between buttons and to get them to stay where I put them in my HTML. The solution to is using floats. Max Design has a nice tutorial on floats with examples here: //css.maxdesign.com.au/floatutorial/introduction.htm.
Following the tips from Neil's site got me to here - but with clear problems.
(I'd post an image, but don't have enough reputation points yet).
The LinkedIn button sits at the top of its DIV while the FB buttons sits in the middle of it's DIV as seen in the first image. There are a couple of issues to note:
a: the FB share button width is minimum 90px per //developers.facebook.co.... All well and good, however, the width is dynamic based on the number of shares one has.
b: there is no margin between the FB share and LI share button -
c: the LI share button needs more width, and dynamic width as it will get it's own count as time goes on.
c: 20 px height is not enough for FB - even thought the FB button is only 20px, the JS adds pixels above the visible button. Also note that the bottom of the count bubble is cut off
d: and most obvious of all, the vertical positioning with LI riding high.
I solved the problem by floating a container holding the buttons with a line-height if 1 and using some CSS to float the buttons displayed inline with a min width, min height, and left padding.
The results are what was live as of the date of this posting (again, need reputation points to post images and more than two links)
Here is my HTML and CSS:
<div class="social-button-container" style="position: relative; z-index: 999;">
<!-- Facebook -->
<div class="social-button fb-like" data-href="http://easynda.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
<!-- LinkedIn -->
<div class="social-button">
<script type="IN/Share" data-url="http://www.easynda.com" data-counter="right"></script></div>
<!-- Twitter -->
<div class="social-button">
</div>
<div style="clear: both;"></div>
</div>
.social-button-container {
/*background-color: red;*/
/**
* This is a nice CSS trick that allows you to clear an element
* without having to add extra elements to your HTML. This helps
* separate content from design, which should always be an architectural
* goal.
*/
float: left;
line-height: 1;
}
.social-button {
float: left;
min-width: 100px;
display: inline;
min-height: 22px;
padding-right: 5px;
}
They are using an unordered list at the elements to show the buttons.
A UL is mostly used to show a list of items vertically but you can use CSS to make the items appear next to each other instead.
<ul>
<li style="display:inline">One</li>
<li style="display:inline">One</li>
</ul>
I think the above would work ok.
All you need to do then is right align it.
<div style="width:400px">
<ul style="float:right">
<li style="display:inline">One</li>
<li style="display:inline">One</li>
</ul>
</div>
Don't forget to use classes instead of inline styles like I have here.
Well, you basically just have to deal with the fact that one is an inline (a) element, the other a block (iframe) element, after that it becomes quite easy, just test that:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#fb_share, iframe {
display: block;
float: left;
line-height: 2em;
margin: 0 1em 0 0;
}
</style>
</head>
<body>
<a id="fb_share" name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
<script>
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js"></script>
</body>
</html>
Put your social media buttons into parent divs and give those divs an id each.
Target the inner iframe elements, e.g:
#fblikeblock iframe, #gplusblock iframe {
vertical-align: top !important;
}
where fblikeblock and gplusblock are the parent divs.
and use this on your parent divs:
#fblikeblock, #gplusblock {
display: inline !important;
position: relative;
zoom: 1;
}