i have to make a site for my computer sience class in high school. I have very little experience with html and coding in general. I was wondering if anybody can tell me how to add a simple messagebox to my site that answers custom questions (there are only a few questions i want to be able to ask the messagebox)
help would be greatly appreciated. or if its possible to make a messabox out of the search thing i have made so far.
this is my html code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li>
start page
</li>
<li>
go to bottom
</li>
</ul>
</nav>
<header>
<div class="bg">
<div class="content">
<div class="kolom">
<div class="atas">
<img src="IMG/planet2.png">
</div>
<div class="tengah">
<h2>Planets</h2>
</div>
<div class="bawah">
<p>Most of the exoplanets discovered so far are in a relatively small region of our galaxy, the Milky Way. We know from NASA's Kepler Space Telescope that there are more planets than stars in the galaxy. </p>
</div>
</div>
<div class="kolom">
<div class="atas">
<img src="IMG/planet2.png">
</div>
<div class="tengah">
<h2>Andromeda</h2>
</div>
<div class="bawah"></div>
</div>
<div class="kolom">
<div class="atas">
<img src="IMG/planet2.png">
</div>
<div class="tengah">
<h2>Extra</h2>
</div>
<div class="bawah"></div>
</div>
</div>
</div>
</header>
<footer>
<div class="bgf">
<div class="contentf">
<form action="home.html">
<input type="search" placeholder="ask a question..">
</form>
</div>
</div>
</footer>
</body>
</html>
Related
<article>
<h2 id="aboutme">About me </h2>
<p>I currently studying design and coding in Nanyang Polytechnic . I also have
passion or gaming</p>
<img src="index.images/rainbow%20six%20siege.jpg" class="image2"/>
</article>
<aside>
<h2>.skills</h2>
<div id="image2">
<img src="index.images/skill.jpg"/>
</div>
</aside>
I'm still new to coding, pardon me. I need help on styling them to look like the ones in the image: https://i.stack.imgur.com/xsQj4.jpg
You can just copy and paste this code. It will work. Here's the Example
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<h1 class="text-center">Hi I'm Owen</h1>
<div class="row">
<div class="col-xs-6">
<h2>About me</h2>
</div>
<div class="col-xs-6">
<h2>.skills</h2>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<img src="index.images/rainbow%20six%20siege.jpg" class=""/>
</div>
<div class="col-xs-3">
<p>I currently studying design and coding in Nanyang Polytechnic . I also have
passion or gaming</p>
</div>
<div class="col-xs-6">
<img src="index.images/skill.jpg"/>
</div>
</div>
Get started with bootstrap here -- http://getbootstrap.com/getting-started/
Hope that helps! Cheers.
Very simple JSfiddle here with just what you need.
https://jsfiddle.net/8k5fLxsn/
HTML:
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png">
<p>
Text next to image. Put anything you want here.
</p>
CSS:
img {
float: left;
margin-right: 20px;
}
I am making a site for my high school robotics team and I am completely new to html and css. How come one of the columns (the member 10 one) is not functioning like the others?
It seems one of the columns is off center. I'm not sure exactly how to describe it but I can post an image if necessary.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Robotics Team</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-------------------- UNIFORM CODE ------------------------->
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/Home">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
<!-- Banner -->
<div id="top-jumbotron" class="jumbotron">
<img src="/Images/Banner.png" class="img-responsive" alt="Responsive image">
</div>
<!----------------------------------------------------------->
<div class="jumbotron">
<h1>Team Member Bio</h1>
<p>Here you can find links to every member with some information on each of them.</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="bubble">
<h2>Member 1 </h2>
<p>Team Captain, Engineer, Coder</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 2</h2>
<p>Head Engineer, Assistant Captain</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 3</h2>
<p>Head Coder, Head Web-master</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 4</h2>
<p>Coder, Head Documenter</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 5</h2>
<p>Engineer, Head 3D Modelling</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 6</h2>
<p>Coder, Web-master, Engineer</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 7</h2>
<p>Financial Advisor, Engineer</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 8</h2>
<p>Engineer, Documenter</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 9</h2>
<p>Engineer, Coder</p>
Read More
</div>
<div class="col-md-4">
<div class="bubble" id="special">
<h2>Member 10</h2>
<p>Secretary, Mascot</p>
Read More
</div>
</div>
</div>
</div>
</body>
</html>
#top-jumbotron
{
padding-left:0;
padding-right:0;
padding-bottom:0;
margin-bottom: 0;
}
body
{
background-color: #E8E8E8;
}
.bubble
{
background-color: #ffffff;
padding: 20px;
width: 95%;
height: 175px;
border-radius: 15px;
margin-top: 10px;
margin-bottom: 10px;
}
#special
{
float: left;
}
You're just missing a /div - I notice you have a div inside a div, remember you need to close both. I use Netbeans for html and it will tell you if there is a problem. If you are on a Mac, I am told Komodo is really good, too. A good editing program is a life saver!
Fixed code:
<div class="col-md-4">
<div class="bubble">
<h2>Mina Hanna</h2>
<p>Engineer, Coder</p>
Read More
</div>
</div> <!-- this one! -->
edit there are a few things wrong with the code and michael points one out - as he says, Bootstrap is a grid. So Imagine (I actually draw it usually) a box split into 12 columns. For every row div, you should only have columns that add up to 12 inside it. You can break this and it will often still work because the div will just overflow and move down, but it's not best practice. If fixing the missing div end tag doesn't work, try fixing the row structure so it only adds up to 12 columns across the page
You can have a layout like the one you specify, however it wont necessarily work per Bootstraps intended functionality, and as such its usually a good idea to follow their recommended row structure.
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Instead of
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
...
</div>
You should do, e.g:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
Within a row, the sum of the numbers following the hyphen in each column definition should add up to 12.
I use CSS style "position:fixed" in jqmobi, but it dosen't works!
<html>
<body>
<div id="afui">
<div id="header">Test</div>
<div id="content">
<div id="index" class="panel">
<div style="position:fixed;">It dosen't works!</div>
</div>
</div>
<div id="navbar"></div>
</div>
</body>
</html>
Somebody help me? Thanks!
I need help with my web app I am working on NetBeans 7.4 and I can't get the header to appear on the first page and for some reason my links to the quiz page don't work even though the code is the same and it works for the other pages? if anyone could help me I would really appreciate it code is as follows.
<html>
<head>
<title>Poker Wizard</title>
<link rel ="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css"/>
<script src="js/jquery-2.0.3.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<div date-role="header">
<h1>Welcome to the Poker Wizard!</h1>
</div>
<div data-role="content">
Welcome to the Poker Wizard its still under construction...
<ul>
Poker Strategy</li>
</ul>
<ul>
Hints & Tips</li>
</ul>
<ul>
Rules of Poker</li>
</ul>
<ul>
Take Quiz</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h3>©Jack Leigh 2014</h3>
</div>
</div>
</div>
<div data-role="page" id="strategy" data-theme="a">
<div data-role="header">
<h1>Strategy</h1>
</div>
<div data-role="content">
First things first, you need to learn the strategies of Poker
in order to be able to play it. Decide whether you are going to play
for fun or money as the your approach to the game will be completely
different depending on your decision.
</div>
<div data-role="footer" data-position="fixed" class="ui-bar">
<a data-role="button" data-icon="home" href="index.html">Home</a>
</div>
</div>
<div data-role="page" id="hints&tips" data-theme="a">
<div data-role="header">
<h1>Hints & Tips</h1>
</div>
<div data-role="content">
This page will be about Hints & Tips of Poker
</div>
<div data-role="footer" data-position="fixed" class="ui-bar">
<a data-role="button" data-icon="home" href="index.html">Home</a>
</div>
<div data-role="page" id="rules" data-theme="a">
<div data-role="header">
<h1>Rules</h1>
</div>
<div data-role="content">
This page will be about the rules of poker
</div>
<div data-role="footer" data-position="fixed" class="ui-bar">
<a data-role="button" data-icon="home" href="index.html">Home</a>
</div>
<div data-role="page" id="quiz" data-theme="a">
<div data-role="header">
<h1>quiz</h1>
</div>
<div data-role="content">
This page will be the Quiz!
</div>
<div data-role ="footer" data-position="fixed" class="ui-bar">
<a data-role="button" data-icon="home" href="index.html">Home</a>
<div/>
</body>
</html>
<div data-role="page" id="home" data-theme="a">
<div date-role="header">
On the second line you maybe would like to fix spelling and change
date-role to data-role. I hope this is enough to accomplish what you need.
Be careful with the IDs too, double check everything. Working with jQuery Mobile is a very detailed activity.
I'm just starting a new app. Below is a basic mockup of what I am tasked to do.
I'm new to using HTML5 for my semantic markup so I'd like some feedback/help.
I'd like to understand how/where to use things like <nav> and <section>
<div id="container">
<header>
<div id="appInformation">
<a href="#" alt="Home">
<img src="">
</a>
<span>Selected AppName</span>
</div>
<div>
<span id="time">TIME GOES HERE</span>
</div>
<div>
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
</div>
<div class="">
<label>UserName</label>
</div>
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<div id="">
<!-- Team logo here-->
</div>
</footer>
Avoid unacessary Div.
Use the Time Tag instead of Div for Time Element.
Avoid Label if you don't have anything to refer too, like an input.
Selected AppName
<time datetime="YYYY-MM-DD">TIME GOES HERE</time><!-- Don't need an id Time since you can target the Time tag -->
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
<em>UserName</em> <!-- Don't use a label if you got nothing to refer too, like an input for example. -->
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<a href="yourTeamUrl" id="">
<!-- Team logo here-->
</a>
</footer>
In addition to #Simon Arnold's fine answer, I might also suggest that the <nav> usage is incorrect. A single link in a footer can hardly be construed as a "major navigation block". See the first note in green text at http://dev.w3.org/html5/spec/sections.html#the-nav-element