When I move my input element on the page using it's parent element I can't use it anymore to type something in or hit submit. I've tried using padding using the form's 'input' class but that just stretches out the form.
I'm using a React component.
<div>
<div class='input-container'>
<form class='input' onSubmit={searchQuery}>
<input placeholder='search wikipedia' onChange={searchField} />
<input
class='search-img'
type='image'
src='https://assets.stickpng.com/images/59cfc4d2d3b1936210a5ddc7.png'
value='search'
/>
</form>
</div>
{resultInfo.map((result) => (
<a
class='page-link'
href={"http://en.wikipedia.org/?curid=" + result[1]}
>
{result[0]}
</a>
))}
</div>
My CSS:
* {
box-sizing: border-box;
}
.page-link,
.page-link:visited {
color: #000000;
display: block;
}
.logo-container {
display: flex;
justify-content: center;
}
.logo {
position: fixed;
top: 10%;
left: 27%;
height: 250px;
}
.input-container {
padding-top: 260px;
padding-left: 520px;
}
.search-img {
height: 14px;
padding-left: 5px;
}
Related
The following HTML is being generates radio_buttons as selectors from an image label
<div class='small-2 columns buttonselector'>
<label for="content_ki_id_1">
<input class="invisi-selector" type="radio" value="1" name="content[ki_id]" id="content_ki_id_1" />
<img src="/assets/circle.svg" />
<div></div>
</label>
</div>
The CSS properly makes the radio button invisible, but there is a gap in handling the wrapper and its visibility on radio_button selected
.buttonselector > div {
width: 100%;
height: 100%;
background: #fff;
}
.invisi-selector {
opacity: 0;
}
.invisi-selector:checked + div {
border-color: #ba53ad;
border-width: 4px;
}
the wrapper cannot logically take the selector's class for it would be invisible. How can the checked action be binded to the wrapping div?
It can't, but you can use absolute positioning to make it look like it is.
.buttonselector>label {
width: 100%;
height: 100%;
background: #fff;
display: block;
position: relative;
}
.invisi-selector {
opacity: 0;
position: absolute;
}
.invisi-selector~div {
z-index: -1;
position: absolute;
left: -4px;
top: -4px;
width: 100%;
height: 100%;
}
.invisi-selector:checked~div {
border: 4px solid #ba53ad;
}
<div class='small-2 columns buttonselector'>
<label for="content_ki_id_1">
<input class="invisi-selector" type="radio" value="1" name="content[ki_id]" id="content_ki_id_1" />
<img src="/assets/circle.svg" />
<div></div>
</label>
</div>
Hello All I hope you are doing Fine! So actually I'm working a chatroom and Im having problem displaying the messages. You see what is actually happening is that when i enter a message the message box goes down. Instead what I want is that I want the messages at the top go behind the navbar and I want the container which shows the message to show a scrollbar so the message send box will stay in place
my index.php
body {
overflow: none;
}
.container {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
overflow: auto;
}
.darker {
border-color: #ccc;
background-color: #ddd;
}
.container::after {
content: "";
clear: both;
display: table;
}
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
.container img.right {
float: right;
margin-left: 20px;
margin-right: 0;
}
.time-right {
float: right;
color: #aaa;
}
.time-left {
float: left;
color: #999;
}
<div class="container">
<p>
<div id="load_msg"></div>
</p>
<span class="time-right">11:00</span>
</div>
<div class="container darker">
<form method="POST" action="">
<input type="text" name="message" id="message_id" />
<button type="button" id="send_msg">Send</button>
</form>
</div>
You have two .container: One for the messages and another for the form. You need to separate the two, so give the container for the messages an id. TheN you set a height for the container with the id.
HTML
<div class="container" id="msg">...</div>
<div class="container">...</div>
CSS
#msg {
height: 100px;
}
Take a look at this link
I made a form with checkbox as a forest image. I need to place another transparent background with text from html parameter (data-forest) over the forest checbox image but I have to do this only by CSS. I've tried so many solutions but no one work properly. Anyone have some idea?
Final effect on hover:
JsFiddle: https://jsfiddle.net/ac9z8sgd/
HTML
<form action="action" method="get">
<input type="hidden" name="test" value="test" />
<ul>
<li><input id="checkbox" type="checkbox" name="forest_type" value="forest_1"><label for="checkbox_forest" data-forest="Estern forest">Forest 1</label></li>
</ul>
<button type="submit">Submit</button>
</form>
CSS
/* Default check button */
#checkbox + label {
background: url('http://i.imgur.com/Ds7gh7b.jpg?1');
background-repeat: no-repeat;
height: 250px;
width: 250px;
padding: 15px 15px;
display: inline-block;
position: relative;
}
/* Hover action */
#checkbox + label[data-forest]:hover {
background: rgba(0,0,0,0.8);
content: attr(data-forest);
display: inline-block;
font-size: 20px;
color: white;
position: relative;
}
Use a pseudo-element.
/* Default check button */
#checkbox + label {
background: url('http://i.imgur.com/Ds7gh7b.jpg?1');
background-repeat: no-repeat;
height: 275px;
width: 184px;
display: inline-block;
position: relative;
}
/* Hover action */
#checkbox + label[data-forest]:hover::after {
background: rgba(0, 0, 0, 0.8);
content: attr(data-forest);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
font-size: 20px;
color: white;
display: flex;
}
<form action="action" method="get">
<input type="hidden" name="test" value="test" />
<ul>
<li>
<input id="checkbox" type="checkbox" name="forest_type" value="forest_1">
<label for="checkbox_forest" data-forest="Estern forest">Forest 1</label>
</li>
</ul>
<button type="submit">Submit</button>
</form>
JSfiddle with Transitions
My suggestion:
label[data-forest]:hover:before {
background: rgba(0,0,0,0.8);
content: attr(data-forest);
font-size: 20px;
color: white;
margin-top: 240px;
margin-left: -15px;
position: absolute;
width: 100%;
text-align: center;
}
BTW: Maybe 0.8 is too much a high value for a perceptible transparency. I'd make it 0.4.
So, I am new to programming (3rd day) and I got a problem with my buttons.
The thing is I want each button to be next to other, not above.
I have tried using all kinds of position. But none of them works.
My css:
#about {
margin: 0 auto;
width: 200px;
border:navy solid;
display: block;
}
#forum {
margin: 0 auto;
width: 200px;
border:navy solid;
display: block;
}
#shop {
margin: 0 auto;
width: 200px;
border:navy solid;
display: block;
}
Html:
<ul>
<div id="about">About</div>
<div id="forum">Forums</div>
<div id="shop">Shop</div>
</ul>
What am I doing wrong? (Sorry for my bad english).
Since you are using the same style on all the elements, you can use a class instead of id.
HTML
<input type="button" class='classname' />
<input type="button" class='classname' />
<input type="button" class='classname' />
CSS
.classname {
margin: 0 auto;
width: 200px;
border:navy solid;
display: inline-block;
}
That you need to change is:
display: block;
To
display: inline-block;
I'm guessing your buttons are being centered in a column on the page currently.
Try this:
HTML
<ul id="button_list">
<li class="button" id="about">About</li>
<li class="button" id="forum">Forum</li>
<li class="button" id="shop">Shop</li>
</ul>
CSS
#button_list {
padding-left: 0px;
}
#button_list li {
list-style: none;
display: inline;
margin-right: 10px;
}
Fiddle: http://jsfiddle.net/patrickbeeson/v9307r0f/
I have a question about making a button show image
For example, I have four buttons
I want Each button showing image in the same content for images
In other words:
When you press one of the buttons show you image
here is an example: https://jsfiddle.net/i5yal/yvCtQ/1/
<div id="section-container">
<div class="section-img-container"><a>images will appear here</a>
</div>
</div>
<div id="section-button-container"><div>
<div class="section-button1"><a>1</a>
</div>
<div class="section-button2"><a>2</a>
</div>
<div class="section-button3"><a>3</a>
</div>
<div class="section-button4"><a>4</a>
</div>
</div>
</div>
CSS code:
#section-container {
background-color: #C0C0C0;
width: 300px;
height: 300px;
margin:0 auto;
}
#section-button-container {
width: 300px;
height: 30px;
margin:0 auto;
}
.section-button1 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 30px;
margin-right: 20px;
}
.section-button2 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}
.section-button3 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}
.section-button4 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}
.section-img-container {
background-color: #008080;
background-position: center center;
width: 270px;
height: 270px;
margin: 0 auto;
}
To avoid using JavaScript, it's possible to use CSS (albeit there has to be some minor adjustments to your HTML in order to do so); so given the amended HTML:
<div id="section-container">
<div class="section-img-container">
<input type="radio" name="images" id="img1" />
<img src="http://placekitten.com/300/300/" />
<input type="radio" name="images" id="img2" />
<img src="http://lorempixel.com/300/300/nightlife" />
<input type="radio" name="images" id="img3" />
<img src="http://lorempixel.com/300/300/people" />
<input type="radio" name="images" id="img4" />
<img src="http://dummyimage.com/300x300/000/f90.png&text=image+lorem+ipsum" />
</div>
</div>
<div id="section-button-container"><div>
<div class="section-button1">
<label for="img1">1</label>
</div>
<div class="section-button2">
<label for="img2">2</label>
</div>
<div class="section-button3">
<label for="img3">3</label>
</div>
<div class="section-button4">
<label for="img4">4</label>
</div>
</div>
</div>
And the following CSS:
#section-button-container label {
display: block;
text-align: center;
height: 100%;
line-height: 30px;
cursor: pointer;
}
input[type=radio],
input[type=radio] + img {
display: none;
}
input:checked + img {
display: block;
}
JS Fiddle demo.
This does require that the browser supports the :checked pseudo-selector and the CSS next-sibling + combinator, however; and takes advantage of the label being able to check/uncheck a radio input (so long as the for attribute of the label identifies the id of the relevant input).
References:
:checked pseudo-selector`.
:checked pseudo-selector compatibility.
For the animation portion investigate this library, used it myself and it works nicely => animate.css
for the changing of the image it is rather trivial here is one way to do it.
$(document).ready(function() {
var viewer = $('img.viewer');
$('a.section-button').click(function () {
viewer.attr('src', 'your new path to new image');
});
});
In the above I added the classes that would be attached to the main view area so you'd have:
<img class="veiwer" />.
You'd just hide this or load up a default image when the page loads.
Also using "section-button" class on each anchor. I didn't account for positioning in the list of choices there meaning 1, 2, 3, 4th picture and so on. It might be easiest to have data-attributes for that on the section buttons. So something like.
<a class="section-button" data-imgrc="path to the large image" data-number="1">1</a>
Note you could also if you just have numbers inside the section buttons just grabber the inner text however personally I prefer data-attributes.