Text not following CSS formatting when content is added below - html

Please bare in mind that I am new to code!
So I have a header and some text, that I am wanting to place on top of a background image that i have input using CSS, therefore the positioning is key.
It was all working fine, until i added more HTML content under neither the text. From this it was just as if the text wasn't picking up my CSS instructions.
HTML:
<div id="sidemicro">
<text class="circleheader"><h3>Special Occasion?</h3><p>Give us a call and </br> we'll see how we can make </br> your tour extra special!</p></br>
This is the text i need to format:
<div id="form">
<form action ='otterabout.php' method='POST'>
*Your Name: <input type='text' name='name'><br />
*Your Email: <input type'text' name='email'><br />
*Date of visit: <input type'date' name='date'><br />
*Time of visit: <input type'time' name='time'><br />
*Group Size: <input type'text' name='groupsize'><br />
<input type='submit' name='submit' value='Login'>
<input name='reset' type='reset' value='Reset'>
</form>
</div>
</div>
This is the content under the text which has stopped it formatting.
CSS:
.circleheader {
margin-top:70%;
margin-left:15%;
}
.circletext {
text-align:center;
margin-left:35%;
}
Thanks!

Is this the type of formatting you're looking for? FIDDLE.
CSS
.sidemicro {
margin-left: 10px;
width: 600px;
border: 1px solid black;
background: url('https://res.cloudinary.com/roadtrippers/image/upload/v1396514626/p2nmpjpgjsm8iihdh5ip.jpg');
background-size: 600px;
background-repeat: no-repeat;
}
.circleheader {
width: 200px;
border: 0px solid black;
margin: 10px auto;
color: white;
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
}

Related

How can i place "Comment:" on red line?

How can I place "Comment:" on red line as shown in the above picture? I know it's a little bit of a silly question, but as a beginner it would be helpful for me.
Here is a code snippet:
body {
border: 1px solid black;
height: 550px;
width: 550px;
padding: 5px;
}
h2 {
text-align: center;
}
<h2>FeedBack Form</h2>
<strong>Name:</strong>
<input type="text" />
<br>
<br>
<strong>Comment:</strong>
<input type="text" style="height:100px; width:250px;" />
<br>
<br>
<strong>Email Address:</strong>
<input type="text" />
See this fiddle
Please add vertical-align: text-top; or vertical-align: top; as style for the input.
Add the below given to your CSS
input[type="text"]{
vertical-align: text-top;
}
try with this:
<strong>Comment:</strong> <input type="text" style="height:100px; width:250px; vertical-align:top;"/><br><br>
I just added vertical-align: top to you input text.
But as a suggestion, I think you may want to use textarea instead input text. And inline css styles is not a thing I would recommend.
Add vertical-align css property
<strong style="vertical-align: top;">Comment:</strong>
<html>
<head>
<title>FeedBack Form</title>
<style>
body {
border: 1px solid black;
height:550px;
width:550px;
padding:5px;
}
h2 {
text-align: center;
}
</style
</head>
<body>
<h2>FeedBack Form</h2>
<strong>Name:</strong> <input type="text" /><br><br>
<strong style="vertical-align: top;">Comment:</strong> <input type="text" style="height:100px; width:250px;"/><br><br>
<strong>Email Address:</strong> <input type="text" />
</body>
</html>

Showhide CSS not working on Wordpress

I've got this piece of CSS/HTML code that works good on jsfiddle and when I do a test.html on my browser but when I try to use it on a wordpress page (style in style.css and html on the page) just does not work.
I checked all the possibilities I could, there is no overwriting from the style, no browser problem... little help?
This is the test site:
http://manuscript.bugs3.com/
https://jsfiddle.net/1zeatcxp/
input#show, input#hide {
display:none;
}
div#paragraph {
display:none;
}
input#show:checked ~ div#paragraph {
display:block;
}
input#hide:checked ~ div#paragraph {
display:none;
}
.showthis {
float: left;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
text-align: center;
width: 80%;
}
.hidethis {
float: right;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
<label for="show">
<div class="showthis">
<span>[Show]</span></div></label><input type=radio id="show" name="group"><label for="hide"><div class="hidethis"><span>[Hide]</span></div></label>
<input type=radio id="hide" name="group">
<div id="paragraph">Content</span>
It looks like your HTML is being mangled by the wordpress editor, this is what I see on your page:
<div class="showthis">[Show]</div>
<p><input id="show" name="group" type="radio"><label for="hide"><br>
</label></p>
<div class="hidethis">[Hide]</div>
<p><label for="hide"></label><br>
<input id="hide" name="group" type="radio"></p>
<div id="paragraph">
<p>Content</p>
</div>
As you already discovered, remove_filter ('the_content', 'wpautop'); is the correct way to deal with this problem. You must make sure to place this in the functions.php file of your theme.
Edit:
Try it with the following HTML:
<label for="show"><span class="showthis">[Show]</span></label>
<input type=radio id="show" name="group">
<label for="hide"><span class="hidethis">[Hide]</span></label>
<input type=radio id="hide" name="group">
<div id="paragraph">Content</div>
You should not be nesting block-level divs inside of label elements. It is not valid HTML, see https://stackoverflow.com/a/18609649/2126792.

CSS Background color doesn't work unless a height is specified or it's floated?

Can anyone explain why on the 3rd line of the CSS in this JFiddle demo why the div ID of #form_container requires a height in order for the background to show if a float:left is specified at line 14?
I thought floats did not remove objects from the flow of the browser...
<div id="form_container">
<form id="contact_form" action="#" method="get" accept-charset="utf-8">
<p>
<label for="byour_name">Name:</label>
<input type="text" name="byour_name" value="" id="byour_name">
</p>
<p>
<label for="byour_email_address">Email:</label>
<input type="text" name="byour_email_address" value="" id="byour_email_address">
</p>
<p>
<label for="subject">Subject:</label>
<input type="text" name="formsubject" value="" id="form_subject">
</p>
<p>Message:
<br/>
<textarea id="form_messagebox" name="Message" rows="20" cols="25"></textarea>
</p>
<p>
<input id="submitBtn" type="submit" value="Send it!">
</p>
</form>
CSS
#form_container {
width: 300px;
/* height: 300px; Background works with this uncommented if the float is enabled*/
border: 2px red solid;
padding: 0 10px 0 10px;
background-color: red !important;
}
#form_container form {
color: black;
}
#form_container input, p {
margin: 0;
padding 0;
float:left; /* This breaks the background */
display:inline;
}
#form_container label {
width: 200px;
position:relative;
}
#submitBtn {
}
#contact input, textarea {
box-sizing: border-box;
color: rgb(0, 0, 0);
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px;
background-color: rgb(221, 220, 219);
font: normal normal normal 16px/1.3em'open sans', sans-serif;
border: 0px solid rgb(192, 185, 181);
}
#form_messagebox {
height: 150px;
width: 200px;
}
here is fiddle of your que see this
http://jsfiddle.net/jkkheni/eJS6b/3/
added a css class of clear
.clear{ clear:both; height:0px; width:0px; display:table; content:"";}
and added a div in your html
<div class="clear"></div>
before closing div with id form_container
when you use float always clear all float.
or you can also use overflow:hidden in div with form_container id
float removes height of the element if it is not specified.
Try:
#form_container{
overflow:hidden;
}
DEMO here.
OR
clear floats after finishing form:
<div class="clr"></div>
.clr{clear:both;}
DEMO here.

Search Bar with background graphics

I have a search box like below and i am using bootstrap to give a flexible layout. How can use a design like below and make sure i can get a stretchable search box.
You'd need a container to put your input box in, and put a front and end div to it. Depending on browser compatibility you might want to add a few more div's to make sure your input box is shown properly in browsers like IEX7/8 though.
So you'd have the following:
<form class="searchbox">
<input type="text" class="text" />
<input type="submit" class="submit" />
</form>
Accompanied by the following example CSS
form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; }
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; }
form.searchbox input.submit { background:url(rightside_image.gif); }
Add your Html part like this
<div class="searchbox">
<input class="lightsearch" type="text" name="s" onfocus="doClear(this)" value="">
</div>
css part, download a search box image and replace it with the name
.searchbox input.lightsearch {
background: url("images/lightsearch.png") no-repeat scroll 0 0 transparent;
border: 0 none;
color: #575757;
font-size: 11px;
height: 19px;
margin-top: 24px;
padding: 2px 5px 2px 24px;
width: 170px;
}

Search field isn't on same line as text

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;
}