When I add something to my css file to test, nothing happens on the webpage.
Random text so that I can post this without it asking for more details.
<html>
<head>
<title>Basket Gifts</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<img src="http://www.displaybanner.com/images/sample_banner.jpg" alt="Banner">
</div> <!--ends the header-->
<div id="main">
<p>Mum & Baby girl gifts<br>
<p>Mum & Baby boy gifts<br>
<p>Nail & Beauty products<br>
<p>Food Hamper<br>
<p>Chocolate Hamper<br>
<p>Fruit Basket<br>
<P>Cheese & Biscuits Hamper<br>
<br><br>
<h3>Select your price range</h3>
<form>
<input type="radio" name="hi" value="value">$30-40</input><br>
<input type="radio" name="hi" value="value">$40-50</input><br>
<input type="radio" name="hi" value="value">$50-60</input><br>
<input type="radio" name="hi" value="value">$60-70</input><br>
<br><br>
<input type="text" name="Name" placeholder="Name"><br>
<input type="text" name="Phone" placeholder="Address"><br>
<input type="text" name="Address" placeholder="Phone Number"><br>
<input type="text" name="email" placeholder="Email Address"><br>
<input type="text" name="confirm email" placeholder="Confirm Email">
</form>
</div> <!--Ends the main content area-->
<div id="footer">
<p>Your Receipt and order confirmation will be sent to your email soon, A confirmation of delivery will be sent three days before the date required.<br> Please not all baskets will be posted. <br>No collections are appplicable.<br>
</div> <!--ends the footer-->
</div> <!--ends the container-->
</body>
What is wrong with this? my css doesnt link to my html file.
style.css:
#container {
background-color: red;
}
#header {
background-color: red;
}
p {
font-family: calibri;
}
Any help would be appreciated.
I did run your code, It works fine.
If even without correct your code, it was also works fine.. I mean your styles are applied in html file.
Here is Image when run your code(without correct your code)
Even though, you missed lots of close tags,
Here is corrected code,
<html>
<head>
<title>Basket Gifts</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<img src="http://www.displaybanner.com/images/sample_banner.jpg" alt="Banner">
</div> <!--ends the header-->
<div id="main">
<p>Mum & Baby girl gifts</p><br>
<p>Mum & Baby boy gifts</p><br>
<p>Nail & Beauty products</p><br>
<p>Food Hamper</p><br>
<p>Chocolate Hamper</p><br>
<p>Fruit Basket</p><br>
<P>Cheese & Biscuits Hamper</p><br>
<br><br>
<h3>Select your price range</h3>
<form>
<input type="radio" name="hi" value="value">$30-40</input><br>
<input type="radio" name="hi" value="value">$40-50</input><br>
<input type="radio" name="hi" value="value">$50-60</input><br>
<input type="radio" name="hi" value="value">$60-70</input><br>
<br><br>
<input type="text" name="Name" placeholder="Name"><br>
<input type="text" name="Phone" placeholder="Address"><br>
<input type="text" name="Address" placeholder="Phone Number"><br>
<input type="text" name="email" placeholder="Email Address"><br>
<input type="text" name="confirm email" placeholder="Confirm Email">
</form>
</div> <!--Ends the main content area-->
<div id="footer">
<p>
Your Receipt and order confirmation will be sent to your email soon, A confirmation of delivery will be sent three days before the date required.<br> Please not all baskets will be posted. <br>No collections are appplicable.<br>
</p>
</div> <!--ends the footer-->
</div> <!--ends the container-->
</body>
</html>
You have several wrong in your html code, I added fixed html and css for you:
<!DOCTYPE html>
<html>
<head>
<title>Basket Gifts</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="header" >
<h1>Basket Gifts</h1>
<p>Would you like baskets made and delivered anywhere in New Zealand? Click on the link below to choose what types of basket you want,<br> choose the price range and the the delivery address, and the date required. once all the contact details and the direct credit payment is confirmed,<br> an email will be sent to you confirming delivery, and the number of the track and trace parcel Please allow for two weeks before the requested date.</p>
</div> <!--ends the header-->
<div id="main" >
<p>Mum & Baby girl gifts</p>
<p>Mum & Baby boy gifts</p>
<p>Nail & Beauty products</p>
<p>Food Hamper</p>
<p>Chocolate Hamper</p>
<p>Fruit Basket</p>
<P>Cheese & Biscuits Hamper</p>
<br><br>
<h3>Select your price range</h3>
<form>
<input type="radio" name="hi" value="value" />$30-40<br>
<input type="radio" name="hi" value="value" />$40-50<br>
<input type="radio" name="hi" value="value" />$40-50<br>
<input type="radio" name="hi" value="value" />$60-70<br>
<br><br>
<input type="text" name="Name" placeholder="Name" /><br>
<input type="text" name="Phone" placeholder="Address" /><br>
<input type="text" name="Address" placeholder="Phone Number" /><br>
<input type="text" name="email" placeholder="Email Address" /><br>
<input type="text" name="confirm email" placeholder="Confirm Email" />
</form>
</div> <!--Ends the main content area-->
<div id="footer" >
<p>Your Receipt and order confirmation will be sent to your email soon, A confirmation of delivery will be sent three days before the date required.<br> Please not all baskets will be posted. <br>No collections are appplicable.</p>
</div> <!--ends the footer-->
</body>
</html>
This is the CSS
#container {
background-color: red;
}
#header {
background-color: red;
}
p {
font-family: calibri;
}
#main, #footer, #container, #header {
text-align: center
}
Related
I have this html which i want to target with css. The problem is that i can't find the right css selector.
The problem is that . entry-content doesn't work. Neither does.event-manager-form. The form itself is a Wordpress event manager form and want to style in with, amongst others,, border-radius
<div class="entry-content">
<form action="/post-an-event/" method="post" id="submit-event-form" class="event-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Your account</label>
<div class="field
account-sign-in">
You are currently signed in as <strong>Bla bla</strong>. <a c class="button" href="...">Sign out</a>.
</div>
</fieldset>
<!-- Event
Information Fields -->
<h2 class="section-title">Event Details</h2>
<fieldset class="fieldset-event_title">
<label for="event_title">Event Title<span class="require-field">*.
</span></label>
<div class="field required-field">
<input type="text" class="input-text event_title" name="event_title" id="event_title" placeholder="Event title" attribute="" value="" maxlength="" required />
</div>
</fieldset>
<fieldset class="fieldset- event_online">
<label for="event_online">Online Event<span class="require-
field">*</span></label>
<div class="field
required-field">
<label><input
type="radio" name="event_online" id="event_online"
attribute="" value="yes" /> Yes</label>
<label><input
type="radio" name="event_online" id="event_online"
attribute="" value="no" /> No</label>
I have one html page (index.html) I am trying to link to another page (createprofile.html) using a button on the index page. I've tried onclick and using href, but when I click the button, and error appears on a blank white page that says Cannot GET /action_page.php?.
I've tried several ways to link these but it's simply not working...
Here is the index.html with the button I am trying to link (signupbtn).
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
`enter code here`<link rel="stylesheet" href="page.css">
</head>
<body>
<form action="action_page.php" style="border:1px solid #ccc">
<div class="container">
<h1>Welcome to Mission Connect!</h1>
<p>Please create an account.</p>
<hr>
<label for="email"><b>Email</b></label> <br>
<input type="text" placeholder="Email Address" name="email" required>
<br>
<br>
<label for="password"><b>Password</b></label> <br>
<input type="password" placeholder="New Password" name="password" required>
<br>
<br>
<label for="password"><b>Repeat Password</b></label>
<input type="password" placeholder="Re-enter New Password" name="password-repeat" required>
<p>By creating an account you agree to our Terms & Privacy. </p>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<a href="createprofile.html"><button type="submit" class="signupbtn">Create My Account</button>
</a>
</div>
</div>
</form>
</body></html>
And this is the html page (createprofile.html) I'm trying to link it to.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="page.css">
<h1>Welcome to Your Mission Connect Profile. </h1>
<br>
Select Profile Picture:
<br>
<br>
<form action="/action_page.php">
<input type="file" name="pic" accept="image/*">
<input type="submit">
</form>
<br>
<br>
<form>
First Name:<br>
<input type="text" name="firstname">
<br>
<br>
Last Name:<br>
<input type="text" name="lastname">
<br>
<br>
Gender:
<br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
Location:<br>
<input type="text" name="location">
<br>
<br>
Home Congregation:<br>
<input type="text" name="homecongregation">
<br>
<br>
Status:
<br>
<input type="radio" name="status" value="Preparing" checked> Preparing (Pre-Missionary)<br>
<input type="radio" name="status" value="InTheField"> In the Field ( (Current Missionary)<br>
<input type="radio" name="status" value="Supporting"> Supporting (Missionary Supporter)<br>
<br>
<br>
Language(s):<br>
<textarea name="message" rows="10" cols="70">
</textarea>
<br>
<br>
Location(s) of Interest:<br>
<textarea name="message" rows="10" cols="70">
</textarea>
<br>
<br>
Duration:
<br>
<input type="radio" name="duration" value="shortterm" checked>
Short- Term<br>
<input type="radio" name="duration" value="longterm"> Long-Term<br>
<input type="radio" name="duration" value="undecided"> Undecided<br>
<br>
<br>
Why are you interested in missions?:<br>
<textarea name="message" rows="10" cols="70">
</textarea>
<br>
<br>
Describe your past missions experience(s):<br>
<textarea name="message" rows="10" cols="70">
</textarea>
</form>
How can I make these two pages link?
your form action is /action_page.php where is your action_page.php ? just remove to form action action_page.php if you don't have any form action.
If you're using HTML:
<form action="action_page.php"
The same thing would go with JSON but I wouldn't recommend.
If you want a button with a hyperlink for <form action:
Stack Overflow
Preview:
Stack Overflow
Try using these methods.
I have an form that I want to have a user fill in. I want to lay it out that the name fields are next to each other and all other fields are on their own separate line.
I have used the below code, have tried putting paragraphs and "brs" , but still no luck...
The code below:
<div style="float:left;">
<label for="username"><b>First Name*</b><span class="required"></span> </label>
<input id="user_first_name" name="FirstName" size="30" type="text" placeholder="First" />
</div>
<div style="float:right;">
<label for="name"><b>Last Name*</b><span class="required"></span></label>
<input id="user_last_name" name="LastName" size="30" type="text" placeholder="Last"/>
</div>
<!--<label><b>Full Name </b><span class="required">*</span></label><input type="text" name="FirstName" class="field-divided" placeholder="First" style="float:left" />;<input type="text" name="Surname" class="field-divided" placeholder="Last" style="float:right"/> <p></p>-->
<label><b>Email </b><span class="required">*</span></label><input type="email" name="Email" class="field-long" placeholder="Email" value="<?php echo $_POST['Turnover']; ?>" />
<label><b>Phone </b><span class="required">*</span></label><input type="number" name="Phone" class="field-divided" placeholder="Number" />
<label style="font-size:10px">only numbers, no special characters</label>
Returns the below image:
So, for some reason the Email Address Label is very much out of place (it should be above the input that is reading 1500 - the way Phone is above number
I'm sure that it's a silly little thing, but I just can't place it
I have tried various combinations of "< p>" and "< br >",but to no avail.
You need to add "clear both" ( <div style="clear:both"></div> ) to prevent the content below mixed up with your 2 floating divs.
Example code:
<div style="float:left;">
<!-- something here -->
</div>
<div style="float:right;">
<!-- something here -->
</div>
<div style="clear:both"></div>
<!-- more goes here -->
I would use something like Bootstrap, if I were you. However, here's a custom solution:
input {
width: 100%;
display: block;
}
div.inline {
width: 100%;
display: table;
}
div.inline div {
display: table-cell;
}
div.inline div:nth-child(n+2) {
padding-left: 10px;
}
<div class="inline">
<div>
<label>First Name:</label>
<input>
</div>
<div>
<label>Last Name:</label>
<input>
</div>
</div>
<div>
<label>Email:</label>
<input>
</div>
<div>
<label>Phone:</label>
<input>
</div>
wrap your bottom 3 inputs and labels in a div and add 100% width to each input and label
<div style="width:100%;clear:both;display:block;">
<label style="width:100%;display:block;"></label
<input style="width:100%;display:block;">
</div>
.flexi{
display:flex;
flex-flow:row;
}
<div class="flexi">
<div>
<label for="username"><b>First Name*</b><span class="required"></span> </label>
<input id="user_first_name" name="FirstName" size="30" type="text" placeholder="First" />
</div>
<div>
<label for="name"><b>Last Name*</b><span class="required"></span></label>
<input id="user_last_name" name="LastName" size="30" type="text" placeholder="Last"/>
</div>
</div>
<div>
<!--<label><b>Full Name </b><span class="required">*</span></label><input type="text" name="FirstName" class="field-divided" placeholder="First" style="float:left" />;<input type="text" name="Surname" class="field-divided" placeholder="Last" style="float:right"/> <p></p>-->
<div>
<label><b>Email </b><span class="required">*</span></label><input type="email" name="Email" class="field-long" placeholder="Email" value="<?php echo $_POST['Turnover']; ?>" />
</div>
<div>
<label><b>Phone </b><span class="required">*</span></label><input type="number" name="Phone" class="field-divided" placeholder="Number" />
<label style="font-size:10px">only numbers, no special characters</label>
</div>
</div>
Read about css and html on internet .
Floating causes parent to remove height. thats why yo email pops in mill
https://jsfiddle.net/d69Lxmst/3/
I have this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> </title>
<style>
.name {
width: 130px;
}
</style>
</head>
<body>
<h1> Test </h1>
<form>
<fieldset class="name">
<label for="firstName">Name</label> <input type="text" name="firstName" id="firstName" required> <br /> <br/>
<label for="last_name">Surname</label> <input type="text" name="last_name" id="last_name" required> <br /> <br/>
</fieldset>
<br />
<p>
<label for="textarea"> Free text </label> <textarea name="box_with_sizecss_and_placeholder" placeholder="Please type" id="textarea"></textarea>
</p>
<p class="range">
<label for="ran">Rank</label><br />
Easy <input type="range" id="ran" name="ran" min="1" max="8" step="1" /> Hard
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
I want to make the the Free text and rank go next to the fieldset name (with some space) and the button to be in the middle of the page.
How can I make it work?
For the previous code I want to make this part to be next to the fieldset:
<p>
<label for="textarea"> Free text </label> <textarea name="box_with_sizecss_and_placeholder" placeholder="Please type" id="textarea"></textarea>
</p>
<p class="range">
<label for="ran">Rank</label><br />
Easy <input type="range" id="ran" name="ran" min="1" max="8" step="1" /> Hard
</p>
And the submit button be and the middle of the page.
Thank you in advance.
I did this really easily with some searches like "Put two divs next to each other" and "Center a div".
http://pastebin.com/SLQfGpQC
Hey guys I'm getting a strange XML error I just can't seem to find the solution too, can any of you see the error?
Edit: I have added the relative code, The project is a form that validates inputs using basic HTML5 pattern attributes etc.
XML Parsing Error: not well-formed
Location: file:///C:/Users/Michael/Desktop/assignment/customer.xml
Line Number 47, Column 81: <input type="text" id="firstname" maxlength="20" pattern="[A-Za-z]+" required />
----------------------------------------------------------------------------------------------^
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description"
content="This document is about a Pizza meal being offered at a restaurant " />
<meta name="keywords" content="
Assignment1 5570891 Restaurant Meal" />
<meta name="author" content="[Michael Freeman]" />
<link href= "styles/Styles.css" rel="stylesheet" type="text/css" />
<!--<script src="jquery.js"></script>
<script type="text/javascript" src="alternative.js"></script>-->
<script type="text/javascript" src="product.js"></script>
<title> Michael's Pizza Assignment </title>
</head>
<body>
<!-- Contains the header information that sits on top of the page-->
<header>
<h1>
Order Online
</h1>
</header>
<!-- The navigation bar and "current" class which is used in the CSS-->
<nav>Pizza|Extras
</nav>
<!-- Contains the information in the top bar of the page, this bar maintains its appearance throughout all pages and informs the user of the purpose of the page-->
<nav class="orderbar"><p>
Register|Complete payment
</p>
</nav>
<!-- Contains the information in the second bar of the page, this bar maintains its appearance throughout all pages-->
<article class="secondbar">
<h3>Please fill out the following form to register
</h3>
</article>
<section>
<form id="registerform" method="post" action="http://mercury.ict.swin.edu.au/it000000/formtest.php">
<fieldset id="person">
<legend>Customer registration</legend>
<p><label for="firstname">First Name:</label>
<input type="text" name="name" id="firstname" maxlength="20" pattern="[A-Za-z]+" required />
</p>
<p><label for="surname">Surname:</label>
<input type="text" name="surname" id="surname" maxlength="20" pattern="[A-Za-z]+" required />
</p>
<p><label for="age">Date of birth:</label>
<input type="text" name="age" id="age" required pattern="(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d" placeholder="DD/MM/YYYY" />
</p>
<p><label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="Your#email.here" required/>
</p>
<p><label for="phonenumber">Phone number:</label>
<input type="tel" name="phonenumber" id="phonenumber" maxlength="10" placeholder="Mobile number:04xxxxxxxx" required/>
</p>
</fieldset>
<fieldset>
<legend>Address details</legend>
<p><label for="address">Residential address</label>
<input type="text" name="raddress" id="raddress" maxlength="40" requried/>
</p>
<p><label for="suburb">Suburb/Town</label>
<input type="text" name="suburb" id="suburb" maxlength="20" required/>
</p>
<p><label for="state">State</label>
<select name="state" id="state" required>
<option value="Vic" selected="selected">Vic</option>
<option value="NSW">Nsw</option>
<option value="QLD">Qld</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select></p>
<p><label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" pattern="[0-9]{4}" maxlength="4" required/>
</p>
<p><label>Delivery Address</label>
<input type="text" name="daddress" id="daddress" maxlength="40"/></p>
<p><label>The same as residential address:</label>
<input type="checkbox" name="checkaddress" id="checkaddress" />
</p>
</fieldset>
<p><input type="submit" value="Register" id="submit" />
<input type="reset" value="Reset" />
</form>
</section>
<!-- The footer which contains a link that allows users to email the author of the page-->
<footer><p>Email</p> <a href="mailto:5570891#student.swin.edu.au" >Michael Freeman</a>
</footer>
</body>
</html>
There are no “empty” attributes in XML – required is invalid, it has to be of the form attributename="value".
Convention for converting empty HTML attributes to XHTML is repeating the attribute name as value, required="required".