This is my code:
Enter your question here:
<form method="post" action="">
Title:
<input type="text" name="title">
<br>Further Explanation:<br>
<textarea name="content" rows="5"></textarea><br>
<input type="submit" name="input" value="Ask" />
<?php
if(isset($_POST['delete'])) {
include "connection.php";
if (mysql_query("TRUNCATE TABLE Questions"))
{
echo "Pitanje je uspesno obrisano";
} else {
echo "Nastala je greška pri brisanju pitanja<br>" . mysql_error();
}
}
?>
</form>
<form action="
<?php
$_SERVER['PHP_SELF'];
?>
" method="post">
<input type="submit" name="delete" value="delete all questions">
</form>
Now, this is what should my form normally look like:
But this is what happens when I put in or out of the div tag inside my dynamic page file:
http://tinypic.com/images/404.gif
What am I doing wrong? what is going on? :(
I'm not a CSS pro, but what I'd recommend is firing this up in Firefox after you download the add-on Firebug. Firebug will let you get right in there and mess with the CSS and HTML while it is running in the browser, so you can adjust things on the fly, turn on and off css elements, and isolate exactly what is causing the problem. Just find the div in the Firebug window and it will list every css element currently attached to it. From there, you should be able to move through the code and see where that weird CSS is coming from.
You probably have some CSS rules that change the appearance of input and textarea elements, probably something like:
input, textarea {
border: none;
}
That’s why your input and textarea elements do not have a border. And the centered align might be inherited from a parent element.
Related
I have this html:
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
I want to place the label Where? before location and What? before keywords using css.
Tried:
label[What?]:before {
content: "search_location";
color: green;
}
Didn't work.
At the moment the label location listed in my html shows up as a placeholder, not a label- likewise for the label search keywords This is fine but i would like those placeholders replacing with, for location London, Berlin, Bristol... and for search keywords Chef, Cleaner, Manager...
It's perhaps clearer if you view at: https://adsler.co.uk/jobs/
Couldn't you just place the label with html? Like this
<div class="entry-content">
<div class="job_listings" data-location="" data-
keywords="" data-show_filters="true" data-
show_pagination="false" data-per_page="10" data-
orderby="featured" data-order="DESC" data-categories=""
>
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label style="color: green;">What?</label>
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords"
id="search_keywords" placeholder="Keywords" value=""
/>
</div>
<div class="search_location">
<label style="color: green;">Where?</label>
<label for="search_location">Location</label>
<input type="text" name="search_location"
id="search_location" placeholder="Location" value="" />
</div>
Based on the HTML snippet you've provided, your CSS selector label[What?]:before is not going to resolve to anything. Square brackets [] are used to select elements based on one of their attributes (see attribute selector definition). You appear to be trying to pass in a desired value (which doesn't exist yet) as an attribute selector, which is impossible.
Looking at the site, the other trouble you're having is that the labels themselves have been hidden. This is currently in your CSS, so will need to be changed or otherwise overridden:
.job_filters .search_jobs div label {
display: none;
}
Then, as already suggested by Mr Lister, something like this will get you on the right track. I've tested in the browser on your site and it works once the labels have been unhidden:
label[for="search_location"]:before {
content: "Where?";
}
label[for="search_keywords"]:before {
content: "What?";
}
I'm going to assume that your actual intention is for the labels to display but you want to change their existing values from "Keywords" and "Location" using only CSS? It's not achievable. You could use a bit of JavaScript to change the text content, but not by CSS with your current implementation.
I got this weird problem:
I get content that is dynamically built. In this special case I also get the element "input" as content, which is then displayed directly by the browser as an element.
What I get:
<div class="search_result_content"> this is just text, but the code <input variable="" name=""> displays as an element
What i need:
You may want to add 'type="text"', so total would be like
<input type="text" name="" value=""/>
Else if the input needs to be added to a (like) 'span' or 'div', i would suggest JS or jQuery
$(document).ready(function() {
$(".search_result_content").append('<input variable="" name="">');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search_result_content"> this is just text, but the code </div>
u insert the input tag dynamically in this scenario, after inserting convert it into html format
Here's my case: I'm developing a little widget, and I was looking for a way to hide/show different DIVs on selecting a set of radio buttons. I found the proper code and adjusted it to my needs. The only problem is that the hide/show feature stops working after clicking on save while configuring the widget :S
Here's the JS:
jQuery(document).ready(function($) {
$(document).ready(function() {
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="link_to_image"){
$(".radio-option").hide();
$(".linked-image").show();
}
if($(this).attr("value")=="link_to_page"){
$(".radio-option").hide();
$(".linked-page").show();
}
});
});
});
And the HTML:
<p>
<label>Link:</label><br>
<label>
<input type="radio" name="link_to" value="link_to_image">
Link to image
</label><br>
<label>
<input type="radio" name="link_to" value="link_to_page">
Link to page
</label>
</p>
<div class="linked-image radio-option">
<label for="linked_image">Linked image:</label>
<p>
Content for linked_image DIV
</p>
</div>
<div class="linked-page radio-option">
<label for="linked_page">Linked page:</label>
<p>
Content for linked_page DIV
</p>
</div>
And the [JSFiddle] (http://jsfiddle.net/ccwsy5z4/)
Could you give me a hand with this, guys?
So finally I found out that the problem was that the JS stopped working after the AJAX started by clicking on the Save button.
And the solution for that was to recall the JS function after AJAX finished it job. To do that first I had to give a name to the JS function, called it after that, and then call it again after AJAX stopped. Like this:
jQuery(document).ready(function($) {
function radioButtonShow() {
if($(this).attr("value")=="link_to_image") {
$(".radio-option").hide();
$(".linked-image").show();
}
if($(this).attr("value")=="link_to_page") {
$(".radio-option").hide();
$(".linked-page").show();
}
};
$('input[type="radio"]').click(radioButtonShow);
$(document).ajaxStop(function() {
$('input[type="radio"]').click(radioButtonShow);
});
});
Hope this may be useful to somebody :)
i have a form below i m trying to apply class to it so that forms are next to each other rather than one below the other but its not working
below is my code
<form action="" method="POST">
<div class="imgthumb"><?php the_post_thumbnail('thumbnail'); ?></div>
<div class="votebtn">
<input type="hidden" value="<?php echo $postid; ?>" name="id" />
<input type="submit" name="submit" value="Vote" />
</div?
<div class="votecounttxt"><?php echo $votecount; ?></div>
</form>
u caa see it live at http://myproject.byethost7.com/?page_id=5
There are a number of approaches, either change the display for the form or use a float, in this instance:
form {
display: inline-block;
}
Should do it for you. Your forms are currently displaying as block content, taking up an entire 'line' instead of simply the width of their content and allowing subsequent content to 'flow' after it on the same line. Changing to inline-block will change them to do this. Floating works in a similar way from a visual perspective, however may have unforseen consequences so is likely not necessary here.
ok i got it i just had to include the styles css directly in the template...since template didn't have getheader the stylesheet was not getting loaded
Heads up: I am new to this forum and English is not my main language so sorry if its not completely understandable.
I am making a mobile website for school and it is going pretty far so well...
One problem: i have a thingy(sorry, dont know the name for it) in my css file(#styled_button) and works fine. There is one button i wanted to be positioned differently so i copied the code from '#styled_button' and created a new thingy and added postion:relative; and float:right; but for some reason my button doesnt get styled at all now. (i did change the id on my button).
EDIT: If i change my button id back to button_styled it is styled.
Even without changing the code, so #logout_button is the same as #button_styled, nothing happens.
My button:
<form action='m.member.php' method='POST'>
<input type='submit' name='logout_button' value='Logout' id="button_styled">
</form>
CSS:
#button_styled {
color:white;
background:#666;
font: bold 45px Harabara;
padding: 20px;
text-decoration: none;
vertical-align: middle;
}
EDIT: Typo removed(wasnt copy pasted from my original code), but the problem is not with the form since it works...
As by request of 'brbcode' here is the code of one of the other buttons im using:
<form action='m.loginscreen.php' method='POST'>
<p>Username:</p>
<input type='text' name='username' id="styled">
<p>Password:</p>
<input type='password' name='password' id="styled"><br>
<ul>
<li><input type='submit' name="loginbutton" value='Log In' class="button_styled"></li>
<li><input type='submit' name="registerbutton" value='Register' class="button_styled"></li>
</ul>
</form>
PS: Sorry again for my fluency in english, but for those that didnt fully understand my button works its just the styling...
It sounds like you might be using an ID on several elements in your html(?). ID's should only be used once per page - typically if you have one element that's different than all others. If you're using the button_styled type in several places, you should change it to a class. In your html:
<input class="button_styled" ... >
And in your CSS:
.button_styled {
/* your styling */
}