BoghyBoy BoghyBoy - 23 days ago 7
CSS Question

Website does not display properly

Hello, at the moment I am facing 2 problems with my website:


  1. The fact that when I scroll down the text pops over the other topbar


    1. The fact that I have 3 radio buttons and one of them is constantly selected, and I want for the user to able to select one of them at a time




This is the website http://www.onetechsearch.com/

<style type="text/css">
#picture-side {
display: block;
float:left;
z-index: 10;
top: 10px;
left: 10px;
}
input[type="radio"]:checked+label{ border-bottom: 5px solid lime; }

#picture-side1 {
display: block;
float:left;
z-index: 10;
top: 10px;
left: 10px;
}

.site-wrap {
display: none;
}

#picture-side2 {
display: block;
float:left;
z-index: 10;
top: 10px;
left: 10px;
}

#picture2 {
visibility: hidden;
}

#video {
visibility: hidden;
}

#picture {
visibility: hidden;
}




</style>
<script src="jquery-1.8.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cat= ["Australia", "Bangladesh", "Denmark", "Hong Kong", "Indonesia", "Netherlands", "New Zealand", "South Africa", "C"];
$("#cat").select2({
data: cat
});
});
</script>


<div id="topbar">
<div class="width-container">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div id="search">
<form action="<?php bloginfo('url');?>/recipes" method="GET" id="searchF">
<?php
$searched_term = get_query_var('recipe_search');

if (empty($searched_term)) {
$searched_term = isset($_GET["search"]) ? $_GET["search"] : "";
}
?>
<input id="sfield" type="text" name="search" placeholder="keywords" <?php if (!empty($searched_term)) {echo 'value="'.$searched_term.'"';} ?>>
<input type="submit" value="Search">

<div id="picture-side">

<input type="radio" name="images" value="1" id="picture"
<?php if(isset($_GET["images"]) && $_GET["images"]=='1'){ echo 'Checked';} ?>><label for="picture">With Pictures</label>
</div>

<div id="picture-side1">

<input type="radio" name="images" value="0" id="picture2"
<?php if(isset($_GET["images"]) && $_GET["images"]=='0'){ echo 'checked';} ?>><label for="picture2">Without Pictures</label>
</div>

<div id="picture-side2">

<input type="radio" name="video" value="0" id="video"
<?php if(isset($_GET["video"]) && $_GET["video"]=='0'){ echo 'checked';} ?>><label for="video">With video</label>
</div>


<div id="time-side">
<!--<small>Published time</small>-->
<input type="text" id="from-side" name="from" placeholder="Start date"
</div>


<select id="cat" name="cat">
<option value="all" selected>All categories</option>
<option value="HI">Hawaii</option>
<option value="C">Hawaji</option>

</select>
</div>
</div>
</form>
</div>
</div>

Answer

Your Radio buttons must have the same name value to work as a group http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio