I'm doing a little HTML project, I Have a Main CSS code the HTML that I'm stuck on,
I have (as you'll see in my code) a dropdown button which gives you several options, Now what I want is for when you click one of the options-
1. It shows the option in the main dropdown button (The text on it [Changing from "$4-$30 Aud" to whatever they pick])
and I want somehow for the "Add to cart" button to change to code that would redirect to what has been picked above it (the options mention above)
Anyway thanks for you help
CSS:
.button {
background-color: #ffffff;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 1px 2px;
cursor: pointer;
}
ul {display: inline;
list-style-type:none;
text-decoration: none;}
.button:hover{
background-color: #595959;
}
.header {
text-align: center;
background-color: #2ac9b7;
color: black;
position: fixed;
width: 100%;
padding: 20px;
}
html, body{
width:100%;
height:100%; background-color: #62666d; margin: 0px;
}
h1 {
font-weight:bold;
color: #000000;
font-size:42px;
}
.main {
font-family: arial;
margin: 0px;
}
.Content {
top:0;
bottom:0
left:0;
right:0;
margin-top: 160px
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
img
{
display: block;
margin: 0 auto;
}
HTML
<html>
<head>
<link rel="stylesheet" href="Masters_baby.css">
<div class="Main">
<div class="header">
<div class="links">
<ul><button class="button">Home</button> </ul>
<ul><button class="button">Shop</button></ul>
<ul><button class="button">Art</button></ul>
<ul><button class="button">About Me</button></ul>
<ul><button class="button">Support</button> </ul>
<ul><button class="button">Production</button></ul>
</div>
</div>
</div>
</div>
<IMG STYLE="position:absolute; TOP:23px; LEFT:20px; WIDTH:130px; HEIGHT:50px" SRC="Logo.png">
</head>
<body>
<IMG STYLE="TOP:180px; LEFT:30px; WIDTH:50px; HEIGHT:50px" SRC="Flame.png">
</body>
</div>
</div>
<div class="parallax"></div>
<div style="height:4950px; width:80%; margin:0 auto; background-color:#98eacc; margin-top: 44px">
<div class="Products" style="padding-top: 50px;">
<div class="∞ Frosted Kumquat" style= "width: 100%; height:9.1%; width:80%; margin:0 auto; background-color:#fff; ">
<p style="font-size: 25px">∞ Frosted Kumquat</p>
<IMG STYLE="WIDTH:35%; HEIGHT:63%" SRC="candle.jpg" >
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 80%;">A fresh citrusy smell that fills the room, Its is fairly stong washing out any unwanted smells or just lifting the room. Best for someone who doesnt like the smell of overly sweet but likes the fresh smell of fruit.</td>
<td>
<div class="dropdown"><button class="dropbtn">$4-$30 AUD</button>
<div class="dropdown-content">Melts $4.00 Tea light(6) $5.00 Candle in a Tin $14.00 Specitally Candles $15.00-$30.00 Boxed candle $22.00 Triplet pack of candles $28.00</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="kin#kinskards.com">
<!-- Specify a PayPal Shopping Cart Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name" value="Birthday - Cake and Candle">
<input type="hidden" name="amount" value="3.95">
<input type="hidden" name="currency_code" value="USD">
<!-- Display the payment button. -->
<input type="image" name="submit"
src="Add2Cart.png"
alt="Add to Cart" STYLE="WIDTH:70%; HEIGHT:20%">
<img alt="" width="1" height="1"
src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</html>
Again Thanks for any help :)
First of all, place all of your content in the <body>. Your head is where you link to stylesheets, load scripts and set meta-data etc. you don't want to have any content such as your header in the head.
You can achieve things like this with JavaScript. Let me give you an example.
Lets say we have the following HTML:
<select class="selector">
<option value="10">10$</option>
<option value="20" selected>20$</option>
<option value="30">30$</option>
</select>
Selected plan: <span class="selected_plan">20$</span>
We want to change the content of the span with class selected_plan to the value selected in our select element.
First we need to create a new script (load your scripts at the bottom of your body).
<script> // place your script here </script>
or
<script src="link_to_your_js_file.js"></script>
Next we need to select our elements like so:
let selector = document.querySelector('.selector');
let selectedPlan = document.querySelector('.selected_plan');
Then we listen for when the select changes:
selector.addEventListener('change', function() {
selectedPlan.innerHTML = selector.value + '$';
});
I created this JSFiddle for you so you can experiment with this particular example: https://jsfiddle.net/dgyyyoh8/1/
EDIT:
If I'm correct you want to change attributes as well. You can use the setAttribute method for this.
let link = document.querySelector('.element');
link.setAttribute('href', selected.value);
Take a look at this JSFiddle: https://jsfiddle.net/dgyyyoh8/2/
Select our element
Create an event for when the selector changes
Set the innerHTMl of the link equal to 'Go to (text of the option)'
Set the href attribute equal to the selected options' value.
EDIT:
There are ways to change the appearance of the select element.
For example: https://codepen.io/ericrasch/pen/zjDBx
I'd suggest you also take a look at the CSS Framework Bootstrap. This framework contains a lot of classes you can work with to really take your styling to the next level.
Related
I am trying to create Google's Advanced Search page copy. I am new to programming and I'm having 2 problems. First is that link titled "google search" should be inside the gray bar positioned at the start of the page. Second, I am trying to write css code to reverse positions of texts and their correlated input fields, because I noticed in Google's html that it is also coded in reverse and then corrected from initial position.
Help would be greatly appreciated!
.label {
color: rgb(218, 32, 32);
margin-left: 15px;
padding: 15px;
margin-bottom: 15px;
} */
html, body {
padding: 0;
margin: 0;
font-size: 16px;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color:black;
text-decoration: none;
}
.navbar a:hover{
text-decoration: underline;
}
.content {
margin-top:100px;
text-align:center;
}
#textbox {
font-size: large;
height: 30px;
width: 500px;
border-radius: 25px;
}
.graybar{
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial,sans-serif;
height: 60px;
width: 100%;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
.margin {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
body {
font-family: arial,sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Search</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
<a href="index.html">
Google Search
</a>
</div>
</div>
<div class="label">Advanced Search</div>
<h3 style="font-weight:normal">Find pages with...</h3>
<form action="https://google.com/search">
<input class="margin" value autofocus="autofocus" id="xX4UFf" name="as_q" type="text">
<label for="xX4UFf" class="float">all these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="CwYCWc" name="as_epq" type="text">
<label for="CwYCWc" class="float">this exact word or phrase:</label>
<br>
<input class="margin" value autofocus="autofocus" id="mSoczb" name="as_oq" type="text">
<label for="mSoczb" class=float>any of these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="t2dX1c" name="as_eq" type="text">
<label for="t2dX1c" class="float">none of these words:</label>
<br>
<input type="submit">
</form>
</body>
</htmL>
Here is how website looks
Assuming that you can change your HTML, flexbox is the solution to both of your issues.
Let's start with your header. You need your image and your text to be both in the grey box, with the image on the left side and the text on the right side.
If you set your header to use display: flex, then you can specify justify-content: space-between to tell the browser to render the child elements with as much space as is possible between them. For two children, that will result in the first child being on the left, and the second child being on the right. If there were more children, they'd be spaced evenly between (eg left, middle, right for three children etc.)
In your case, this would simply require adding the appropriate styling to the .graybar class which is serving as your header:
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial, sans-serif;
height: 60px;
width: 100%;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color: black;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
body {
font-family: arial, sans-serif;
}
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
Google Search
</div>
</div>
I've left the other styling as you had in your original.
CSS's flexbox is extremely powerful; you can use it for your other issue with the labels/inputs as well, if you can modify your HTML. Looking at the actual Google advanced search page here, your HTML doesn't actually look anything like the original, so I'm assuming you're not restricted to keeping the same HTML as you have in your original post.
Let's instead structure our HTML like this:
<div class="row">
<input type="text" id="allwords" >
<label for="allwords">All these words</label>
</div>
We can now apply display: flex to each row and leverage the flex-direction property to reverse the order of the children so that the label is displayed prior to the input.
.row {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
label {
display: block;
margin-right: 8px;
}
<div class="row">
<input type="text" id="allwords">
<label for="allwords">All these words:</label>
</div>
Generally I wouldn't recommend doing it like this, but I'm equally unsure why you're trying to force inputs before labels in your HTML. :)
For more information about CSS's flexbox, I highly recommend this guide from CSS-Tricks.
I'm trying to achieve the following:
Create 3 input elements in a row
Each should have a logo to the left of it, centered perfectly.
Each should have a border-bottom that spans the logo as well.
Like the following image:
However with my current code the images can't be centered and the border doesn't span them. Here's my code:
input {
border: none;
width: 250px;
background-color: #393d49;
border-bottom: 1px solid #767D93;
padding: 10px;
}
form img {
width: 24px;
height: 24px;
}
<form>
<img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
<input type="email" placeholder="E-Mail"><br>
<img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
<input type="password" placeholder="Password"><br>
<img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">
<input type="text" placeholder="Username"><br>
</form>
As it was suggested, I would also use the font-awesome library. But if your not comfortable with that idea, here is how you can do without.
form, .form-row, input {
background-color: #051024;
}
.input-icon, label, input {
display: inline-block;
}
form {
padding: 0.8em 1.2em;
}
.form-row {
padding: 0.8em 0;
padding-bottom: 0.2em;
}
.form-row:not(:last-child) {
border-bottom: solid #18273a 1px; /* Only the last row has a border */
}
.input-icon {
width: 15px;
height: 15px;
margin: 0 10px;
}
label {
max-width:4em; /* Or the maximum width you want your lebel to be */
min-width:4em; /* Same */
color:white;
font-weight: 100;
}
input {
border:none;
padding: 0.8em 0.5em;
color: #6691c9;
font-size: 15px;
outline: none; /* No glowing borders on chrome */
}
<form>
<div class="form-row">
<!-- Put your image here, like so -->
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-email">Email</label>
<input id="form-email" type="email">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-password">Password</label>
<input id="form-password"type="password" placeholder="(8 characters min)">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-user">User</label>
<input id="form-user" type="text"><br>
</div>
</form>
If you're feeling adventurous
Try bootstrap, it has all you need to create cool web sites (it also includes the font-awesome library).
I want to make a control panel for the admin part of my website. The control panel I developed consists of several buttons. What I need is whenever I click one of the buttons, that option's sub-menu will appear right next to it. For example, I have "My Account" as one of the main options. If I click on the "My Account" button, its sub-menu (with Update Profile and Change Password etc.) will appear.
Here's the code for the control panel:
<div class="main-area">
<div class="control-panel">
<h1>Admin Control Panel</h1>
<button class="categories">My Account ►</button><br /><br />
<button class="categories">System Users ►</button><br /><br />
<button class="categories">Applicants ►</button><br /><br />
<button class="categories">Blacklist ►</button>
<br /><br />
<button class="categories">Jobs ►</button><br /><br />
<button class="categories">Requirements ►</button><br />
<br />
<button class="categories">Reports ►</button>
Here's the CSS part:
body {
font-family: arial;
background-color: #0F8DC7;
}
.control-panel {
border: solid 1px #000;
padding: 15px;
border-radius: 15px;
box-shadow: 5px 5px 5px;
width: 300px;
text-align: center;
display: inline-block;
height: 370px;
background-color: #FFE400;
}
.main-area {
width: 500px;
margin: auto;
}
.categories{
width: 200px;
}
Hoping for some answers not involving JavaScript.
It's just a demo, I haven't styled your code for a better view.
You have to use css :hover to achieve this functionality. And put your button(menuItem) and submenuItems(li) inside "ul" tag like this,
<ul>
<button class="categories">My Account ►</button><br /><br />
<li>First</li>
<li>Second</li>
</ul>
Add this css code ,
.main-area ul li{
display : none;
}
.main-area ul:hover li{
display : block;
background:blue;
height:auto;
width:8em;
}
Style your submenu items as you want.
jsFiddle
Here is my website.
http://www.gtaresources.net/
The css makes anchor elements have certain css properties and i just want it for like a navigation bar. just the login button and when i add a menu. But for now you can see that green behind the image at the top right. It's not supposed to go behind every anchor i just want it for certain ones and i can't or don't know how to do inline css for only the menu with the a:visited and a:hover and stuff. What's the solution? I just need to make some of the css only work for a certain elements or elements.
I made notes of where the css that is interferring begins and ends.
Here my source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>GTA Resources</title>
<style type="text/css">
html
{
background-color: #003300;
padding-right: 11%;
padding-left: 11%;
}
body
{
background-color: black;
}
#p
{
color: white;
}
#para
{
color: white;
padding-right: 2%;
padding-left: 2%;
}
a
{
color: #003300;
}
.logo
{
padding-top: 4px;
padding-left: 4px;
}
ul { <!-- Css that is interferring begins -->
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
a:hover, a:active {
background-color: #7A991A;
} <!-- Css that is interferring ends -->
</style>
<script type = "text/javascript">
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;
var unArray = ["admin"];
var pwArray = ["password"];
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Logged In.");
window.location = "/victoria/logged_in.html";
return false;
}
}
</script>
</head>
<body>
<ul background="/victoria/cutiepie2.jpg" hidden>
<li>Call</li>
<li>Text</li>
<li>Home</li>
<li>News</li>
<li>Media</li>
<li>Downloads</li>
<li>Forum</li>
</ul>
<img src="/victoria/logo.jpg" width="250" height="75" class="logo">
<ul style="list-style-type: none;margin: 0;padding: 0;overflow: hidden;position: absolute;top: 4px;right: 4px;">
<li style="float: left;"><a style="display: block;width: 120px;font-weight: bold;color: #FFFFFF;background-color: black;text-align: center;padding: 4px;text- decoration: none;text-transform: uppercase;" href="/victoria/logged_in.html">Log in</a></li>
</ul>
<form name = "myform" style="position: absolute; top: 0;right: 0;" hidden>
<p id="p">Username: <input type="text" name="username">
Password: <input type="password" name="pword">
<input type="button" value="log in" onclick= "validate()"></p>
</form>
<center><h1 style="color: #003300;">GTA Resources</h1></center>
<center><img src="http://i1-news.softpedia-static.com/images/news2/Call-of-Duty-Ghosts-Publisher-Wants-to-Break-GTA-5-Sales-Record-Soon-392209-2.jpg"
width="1000" height="500"></center>
<br><br>
<p id="para">
Welcome to Gta Resources. This is a site all about gta, the cheats, mods, and videos of within it. From hiliarous videos to
videos of how to make, convert, and import mods into gta. This site has everything. Right now it focuses on Gta 5 but in the future it will have topics on all
the other Gta's too. This site will have media on the Mods for example, details in a description, videos on and how to do them, and download links, unless
there is no link. Then I will try my best to give information on it, and where you might be able to get it. There will be a forum soon for discussing topics
on anything Gta related. And just have a good time. Enjoi!!:)
</p>
<center>Click here for help</center>
<p id="p" style="text-align: right;">GTA Resources(c) 2014</p>
</body>
<!--MTD(c) 2014-->
</html>
The clean method to do this would be using CSS classes. In your HTML, add a class to the css elements that should have the green background.
HTML:
my link
CSS:
a.green-on-hover:hover {
background-color : green;
}
Note: The class name, is just like a variable-name can be anything, even 'hyphens' are allowed in the class-name. I gave 'green-on-hover' you can call it anything you want.
Found this very simple tutorial to help you with classes:
http://www.tizag.com/cssT/class.php
Hope that helped. Let me know if you have questions.
One Suggestion: Try to make your question, more generic next time.
You background the anchor with green and you put inside the image on it and you see the result of yours.
try this
html:
<a href="/index.html">
<img width="250" height="75" class="logo" src="/victoria/logo.jpg">
<span></span>
</a>
css:
a,a:link, a:visited {
color: #ffffff;
position:relative;
display: block;
font-weight: bold;
padding: 4px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
}
a span{
position:absolute;
width:100%;
height:100%;
background-color:#98bf21;
z-index:2;
left:0;
top:0;
}
a img{
position:relative;
z-index:0;
}
I'm trying to insert a search field in my header (black zone) but doesn't work. I want the search field inline with "SimpleCMS"...
See this screenshot to understand:
I want it on the same line as the header text...
There's my HTML code:
<div id="header"><h1><?php echo($header_text); ?></h1>
<div style="float: right;">
<form action="search.php" method="get">
<input type="text" name="q" id="q" value="Search..." />
<input type="submit" value="Search" />
</form>
</div>
</div>
And my CSS:
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
}
The problem is that you use a <h1> element. This will span over the whole width (see here) of the top so that every other element will be placed below it. Use a <span> instead and style it according to your needs. Using position-absolute as alpaca lips nao suggests might work as well.
Update: Use position: absolute;
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
position: relative;
}
#header div form {
position: absolute;
top: 75px;
right: 25px;
}