And this is the website http://www.onetechsearch.com/recipes/?search=&images=1&from=&to=&cat=all
I have a question, I have two elements, my log (which is in html) and an arrow with a php script, and I wanted to put them next to each other. The arrow only shows on media devices, but I can't figure out a way to put them next to each other.
Search.php
<style type="text/css">
.mylogo
{
margin: auto;
display: block;
}
</style>
<div class="site-wrap">
<div id="left-sidebar">
<div id="as-button"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i></div>
<script>
jQuery(document).ready(function(){
jQuery('#as-button').on('click', function(event) {
jQuery('#as-button').toggleClass('pressed');
jQuery('#advanced-search').toggle(0,'show');
});
});
</script>
<html>
<img src="https://i.imgsafe.org/98e95c17ab.png" width="50%" title="OneTechSearch" class="mylogo" alt="OneTechSearch" />
</html>
<div id="advanced-search">
<form action="recipes" method="GET" id="searchF1">
<input id="sfield" type="text" name="search" placeholder="keywords" <?php if (!empty($searched_term)) {
echo 'value="'.$searched_term.'"';} ?>>
<td>
<div id="picture-side">
<label for="picture">
<input type="radio" name="images" value="1" id="picture" label class="radio-inline"
<?php if(isset($_GET["images"]) && $_GET["images"]=='1'){ echo 'Checked';} ?>>With Pictures</label></option>
</div>
<div id="picture-side1">
<label for="picture2">
<input type="radio" name="images" value="0" id="picture2"
<?php if(isset($_GET["images"]) && $_GET["images"]=='0'){ echo 'checked';} ?>>Without Pictures</label></option>
</div>
</td>
And this is part of the code regarding the arrow
Styles.css
#advanced-search #as-button {
color:#fff;
padding:0.75em;
float:right;
margin: auto;
cursor:pointer;
height:80px;
border-radius:5px 5px 0 0;
}
#advanced-search #as-button.pressed{
background:#333;
}
#advanced-search #as-button i{
padding:0 0.5em;
font-size:2em;
#advanced-search #as-button .fa-search-plus {
font-size:1.4em;
#advanced-search #as-button {
display: block;
font-size: 1.3em;
padding: 0 !important;
width: 60%;
height:auto;
border-radius:5px;
}
#advanced-search #as-button i {
font-size: 2em;
padding: 3px 5px;
}
#advanced-search #as-button.pressed { background:none;}
#advanced-search #as-button.pressed i{ background:#333;}
Related
I am having a problem with my design.
I have two buttons on my product page. However because one is in a form, they are on top of each other(see image ).
I want to get the two buttons next to each other. Can someone help me out, please ? Below I added my HTML and CSS code.
Thanks in advance!
HTML:
<!DOCTYPE HTML>
<div class="container text-center">
<div class="sale">
<h1>On Sale</h1>
<p class="text-secondary">
We have new sales promotions online for a short period of time every day. We offer products from
popular labels and luxury brands in the lifestyle segment up to 75% cheaper than the
recommended retail price.
</p>
</div>
</div>
<section class="on-sale">
<div class="container">
<div class="row">
<?php
for($i = 0; $i < $countProductItems && $i < 4; $i++){
?>
<div class="col-md-3">
<div class="product-top">
<img src="<?php echo ($saleProducts[$i]['imgProduct1']);?>" class="img-fluid" alt="Product1"/>
<div class="overlay-right text-center">
<button type="button" class="btn btn-secondary" title="Quick Shop">
<i class="fa fa-eye text-white"></i>
</button>
<form action="includes/shopping-cart.inc.php?action=add&id=<?php echo ($saleProducts[$i]['ID'])?>" method="post">
<input class="text-center" type="hidden" name="quantity" value="1"/>
<input type="hidden" name="index-page" value="index">
<input type="hidden" name="product-name" value="<?php echo ($saleProducts[$i]['strProductNaam']); ?>">
<input type="hidden" name="product-price" value="<?php echo ($saleProducts[$i]['strSalePrijs']); ?>">
<button type="submit" class="btn btn-secondary " title="Add to cart" name="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
</form>
</div>
</div>
<div class="product-bottom text-center">
<p>
<?php rating_star(($saleProducts[$i]['RatingStar'])) ?>
</p>
<p><h3><?php echo ($saleProducts[$i]['strProductNaam']); ?></h3></p>
<?php sale_product(($saleProducts[$i]['intPrijs']), ($saleProducts[$i]['strSalePrijs']))?>
</div>
</div>
<?php
}
?>
</div>
</div>
</section>
</html>
CSS:
.container .sale{
padding: 3rem 0;
}
.container .sale{
font-family: var(--gugi);
}
.container .sale{
padding: 0.5% 25%;
font-size: 0.9em;
}
.on-sale{
margin: 50px 0;
}
.on-sale img{
width: 100%;
padding: 20px;
transition: 1s;
cursor: pointer;
}
.on-sale img:hover{
transform: scale(1.1);
}
.product-top{
width:100%;
display: inline-block;
}
.product-bottom .fa{
color: orange;
font-size: 10px;
}
.product-bottom h3{
font-size: 20px;
font-weight: bold;
}
.product-bottom h5{
font-size: 15px;
padding-bottom: 10px;
}
.make_red {
color: red;
}
// codefilling text[error] - nfnjsnfjsfnbjkdsnfdsfndjsfbjabsdjhbgdgabadsg
try use display:flex
.overlay-right text-center{
display: flex;
justify-content: space-between;
width: 200px;
margin: 0 auto;
align-items: center;
}
You can give the form a display: inline in your css.
Default display is block for a form
You can try this as well--
button {
display: inline;
margin: auto;
padding: 5px;
}
I have a simple page that consists of a form. There is a string for what the input box should be, and then the input box.
I want two different behaviors. When a cell phone is accessing the page, I want everything to be stacked on top of each other, but when the page is accessed via a computer I want multiple rows consisting of the the title, followed by the input box on the same row.
I've researched media queries by I still don't understand it enough to get through.
<html>
<head>
<style>
</style>
</head>
<body>
<form>
<center>
<div class="left">
First name:
</div>
<div class="right">
<input type="text" name="firstname"/>
</div>
<div class="left">
Last name:
</div>
<div class="right">
<input type="text" name="lastname"/>
</div>
<div class="left">
Email Address:
</div>
<div class="right">
<input type="text" name="email"/>
</div>
<div class="left">
Address:
</div>
<div class="right">
<input type="text" name="address"/>
</div>
<div class="left">
I've practiced yoga for at least one year:
</div>
<div class="right">
<input type="checkbox" name="oneyear"/>
</div>
<div class="right">
<input type="submit" name="submit" value="submit"/>
</div>
</center>
</form>
</body>
</html>
You have multiple choice: using Bootstrap to easily display your grid in different ways on window resize.
You can also use media queries, combine with a grid layout like Flexbox or Grid.
Or even use Jquery and the windworesize function.
Personnaly, i would choose Flexbox and the flex-direction propriety when the window reach the size of a smartphone or tablet.
To write a media querie, you just have to type something like #media screen and (max-width: 640px) for instance and write your rules inside the curly brackets.
Here is a sample code.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-size: 16px;
line-height: 22px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f5f5f5;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.my-form {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 20px;
}
.my-form .input {
width: 100%;
padding: 10px;
}
.my-form .input .left {
display: block;
width: 100%;
line-height: 24px;
padding: 3px 0;
margin-bottom: 5px;
}
.my-form .input .right {
width: 100%;
}
.my-form .input input[type='text'], .my-form .input input[type='email'], .my-form .input textarea {
display: block;
width: 100%;
height: 30px;
font-size: 16px;
padding: 3px;
line-height: 22px;
border: 1px solid rgba(0,0,0,.3);
}
.my-form .input textarea {
height: auto;
min-height: 60px;
resize: vertical;
}
.my-form .input input[type='submit'] {
display: block;
width: 100%;
padding: 15px;
background-color: navy;
color: #ffffff;
font-size: 16px;
line-height: 22px;
}
#media screen and (max-width: 1024px) {
.my-form .input:after {
content: "";
clear: both;
display: table;
}
.my-form .input .left {
float: left;
width: 35%;
padding-right: 10px;
margin-bottom: 0;
}
.my-form .input .right {
float: right;
width: 65%;
}
}
</style>
</head>
<body>
<form class="my-form">
<div class="input">
<label class="left" for="firstname">
First name:
</label>
<div class="right">
<input type="text" id="firstname" name="firstname" />
</div>
</div>
<div class="input">
<label class="left" for="lastname">
Last name:
</label>
<div class="right">
<input type="text" id="lastname" name="lastname" />
</div>
</div>
<div class="input">
<label class="left" for="email">
Email Address:
</label>
<div class="right">
<input type="email" id="email" name="email" />
</div>
</div>
<div class="input">
<label class="left" for="address">
Address:
</label>
<div class="right">
<textarea cols="10" rows="5" id="address" name="address"></textarea>
</div>
</div>
<div class="input">
<div class="left"></div>
<div class="right">
<label for="oneyear"><input type="checkbox" id="oneyear" name="oneyear" /> I've practiced yoga for at least one year:</label>
</div>
</div>
<div class="input">
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
</html>
You need Media Query for this. Media query is basically writing different CSS for devices with different widths. You can learn more from here- https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Also check out this article- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can also use jQuery for the same using matchmedia..
Here is a JSbin example for you- https://jsbin.com/kutacuzece/edit
(function($) {
/*
* We need to turn it into a function.
* To apply the changes both on document ready and when we resize the browser.
*/
function mediaSize() {
/* Set the matchMedia */
if (window.matchMedia('(min-width: 768px)').matches) {
/* Changes when we reach the min-width */
$('body').css('background', '#222');
$('strong').css('color', 'tomato');
} else {
/* Reset for CSS changes – Still need a better way to do this! */
$('body, strong').removeAttr('style');
}
};
/* Call the function */
mediaSize();
/* Attach the function to the resize event listener */
window.addEventListener('resize', mediaSize, false);
})(jQuery);
OR you can use something as simple as this-
if ($(window).width() < 960) {
$(selector).css({property:value, property:value, ...})
}
else if ($(window).width() < 768) {
$(selector).css({property:value, property:value, ...})
}
else {
$(selector).css({property:value, property:value, ...})
}
I'm doing a project but I need help with my form. I am making a brief description text box and the size I have is how big I want it but my text starts in the middle. Also, when you type the text goes beyond the box. I don't want the text to stay on one line I want it contained in the box.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Centennial College|Creating Student Profile</title>
<meta charset="utf-8">
<style id="navStyle">
/*I got some help on this coding from w3schools.*/
#image2{
position: absolute; height: 100px;
}
#navigationList{
list-style-type: none;
margin: 0;
padding:0;
overflow:hidden;
background-image: url(Images/background_header.jpg);
position: absolute; left: 310px; height: 100px; width:950px;
font-weight: bold;
}
.links{
float:left;
position: relative; top: 30px;
}
.links a{
display:block;
color:white;
text-align: center;
padding: 10px 50px;
text-decoration: none;
}
/*When someone hovers over the link the colour goes black*/
.links a:hover{
background-color:#c6f22c;
color: #45473e;
}
.links .active{
color:#6b8112;
}
</style>
<style id="bodyStyle">
#headerImage img{
width: 1245px;
}
body{
background-color:#464646;
font-family:cursive, sans-serif;
color:#464646;
}
forms{
color: #464646;
font-size: 20px;
background-color:floralwhite;
display: inline-block;
}
#formSection h1, h3{
color:aliceblue;
}
#description{
height: 150px;
width: 100%;
}
</style>
</head>
<body>
<div class="Navigation">
<!--Navigation Links with Logo. All Style code is in style sheets.-->
<img id="image2" src="Images/Logo.jpg" alt="Centennial Logo" />
<ul id="navigationList">
<li class="links">Home Page</li>
<li class="links"><a class="active" href="creatstudentprofile.html">Create Student Profile</a></li>
<li class="links">View My Performance</li>
</ul>
</div>
<div id="headerImage">
<img src="Images/ecentennial-students.jpg" alt="Header Picture"/>
</div>
<div id="formSection" style="margin:0 auto; width:75%; text-align: center;">
<h1>Enter the information below to create your student profile!</h1>
<h3>Create your Student Profile:</h3>
<forms>
<fieldset>
<legend>Student Profile</legend>
Name:
<br>
<input type="text" name="name" size="40">
<br>
Email Address:
<br>
<input type="email" name="email" size="40">
<br>
Year:
<br>
<select id="year" name="Year">
<option value="year1">Year 1</option>
<option value="year2">Year 2</option>
<option value="year3">Year 3</option>
</select>
<br>
<input type="radio" name="computerType" value="mac">Mac
<input type="radio" name="computerType" value="pc">PC
<br>
Brief Description:
<br>
<input type="text" name="Description" size="40" id="description">
<br>
<input type="Submit" value="Submit">
</fieldset>
</forms>
</div>
</body>
</html>
Souns to me that you want your input to behave exactly as a textarea. You should just use it instead.
<textarea id="description" name="Description"></textarea>
Basically I created a couple radio buttons, then hid the actual buttons, and made the labels the buttons. For some reason they won't display inline and I can't quite seem to figure out why. Does anyone know what I'm doing wrong?
.ReviewBox {
width:64%;
height:600px;
position:relative;
left:18%;
background-color:#4795d7;
margin-bottom:10px;
box-shadow:0px 2px 4px black;
border-radius:4px;
}
.ReviewBox input {
visibility:hidden;
width:0;
display:inline;
}
.ReviewBox label:hover {
color:#00aedb;
}
.ReviewBox input:checked + label {
color:#0900ff;
}
.ReviewBox p {
position:absolute;
left:12%;
color:white;
}
.ReviewBox label {
position:relative;
left:45%;
color:white;
display:inline;
}
.ReviewHeader {
position:relative;
left:7%;
top:32px;
font-size:26px;
text-shadow:0px 1px 1px black;
font-family:Lobster;
color:white;
}
.Server {
top:75px;
font-size:15px;
}
.Names label{
top:27px;
font-size:15px;
}
<div class="ReviewBox">
<h2 class="ReviewHeader">Let Us Know How We Did</h2>
<div>
<p class="Server">Server</p>
<div class="Names">
<input type="radio" name="Names" value="Juan" id="Juan">
<label for="Juan">Juan</label>
</div>
<div class="Names">
<input type="radio" name="Names" value="Sebastian" id="Sebastian">
<label for="Sebastian">Sebastian</label>
</div>
</div>
Heres a JSFiddle of what I have: http://jsfiddle.net/u6u53916/1/
<div class="names">
<input type="radio" name="Names" value="Juan" id="Juan"/>
<label for="Juan">Juan</label>
<input type="radio" name="Names" value="Pablo" id="Pablo"/>
<label for="Pablo">Pablo</label>
</div>
Just remove the middle <div class="names"> so that it is a single div enclosing the radio buttons.
just add display: inline; to your Names class. it's your code + what you're looking for:
http://jsfiddle.net/Igor_Ivancha/kywno6q0/
I am having an issue with aligning my password input box so its aligned with the email address input box any ideas?
**CSS:**
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
padding: 30px 0px 0px 10px; /* top right bottom left */
}
.column-right-login input{
margin-left:15px;
}
.column-right-login a{
color:#fff;
}
HTML:
<div class="column-right-login">
<form action="http://www.thetradinghouse.co.nz/login" method="post" enctype="multipart/form-data" id="homeLogin">
<div><label for="email">Email Address: </label> <input type="text" name="email" value="" /></div>
<div><label for="password">Password: </label> <input type="password" name="password" value="" /></div>
Forgotten Password
<a onclick="$('#homeLogin').submit();" class="button"><span>Login</span></a>
</form>
<script type="text/javascript"><!--
$('#homeLogin input').keydown(function(e) {
if (e.keyCode == 13) {
$('#homeLogin').submit();
}
});
//--></script>
</div>
This is just one idea:
.column-right-login label{
width:150px;
display:-moz-inline-stack; /*Firefox 2 hack: must come before other declarations*/
display:inline-block;
_height:50px; /*IE 6 Hack*/
/*IE 7 Hacks*/
zoom:1;
*display:inline;
}
sample: http://jsfiddle.net/aTuFq/2/
Resources: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
This works, but I suggest you go read this article:
http://www.alistapart.com/articles/prettyaccessibleforms
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
padding: 30px 0px 0px 10px; /* top right bottom left */
}
form label {
float:left;
width:100px
}
.column-right-login input {
margin-left:15px;
float:left;
}
form div {
clear:both;
}
.column-right-login a {
color:#fff;
}