I have a horizontal menu and want to place a search form in line with it but it appears left aligned on a new line.. I am new to html so just learning the basics (working on my third site just really got the hang of CSS).
<div id="nav">
<span class="nav">
<span id="jqFade"><img src="images/skydevUpperNav.png"></span>
<span id="jqFade"><img src="images/goftbUpperNav.png"></span>
<span id="jqFade"><img src="images/genUpperNav.png"></span>
<span id="searchBox">
<form action="#" method="get">Search
<input type="text" name="searchGoogle" size="12" maxlength="45" />
</form>
</span>
</div>
Use display: inline-block;
Working fiddle:
http://jsfiddle.net/wN6Ae/1/
CSS:
searchBox{
display: inline-block;
margin-left: 10px;
}
Form elements are rendered as block by default, so you'll need to set the search box form to display: inline-block;. Wrapping block elements in spans is not an effective solution since it doesn't change the way the contained elements are rendered.
jsFiddle demo: http://jsfiddle.net/Bf46a/
you should use <ul> with <li> tags for navigation and float:left; the list elements span is not nice. set list-style-type: none; if u dont whant the list styles displayed. <img> should be closed too -> <img .... />
Related
In my HTML file example.html I have:
<a onclick="document.getElementById('D').innerHTML='some text'">
clickme
</a>
where D is the id of some <div>.
So by clicking on 'clickme', some text is inserted in div D.
Is there a way to do this without using Javascript, and without using href to an external html file?
That is 'some text', the text to be inserted in div 'D', should be defined completely within my example.html.
As some comments have said, yes, HTML is static by nature, but you can still accomplish this using css, because css has its own events an almost state management
I present two options:
1. You can have your content hidden and then show it when click
explanation: we use a checkbox to emulate the button, then in css we see if the checkbox is checked then we make the content visible
2. You can use pseudoelements to insert content using CSS
If you dont want this content in your HTML and you want to literaly insert it without JS, you can use a pseudoelement to "create" a new element and place it in your div (note the quotes there) so basically css will use a pseudoelement, but we use the same checkbox trick to let CSS handle the state and not need JS
As you can see it can be somewhat done, in the sense that you are adding content (to the users eyes) without javascript, but not without limitations:
Resources:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
Working examples of both alternatives:
/*hide the inputs/checkmarks and the content*/
input, .visibleAfterClick {
display: none;
}
/*position the fake button*/
label {
position: relative;
display: block;
cursor: pointer;
border: 1px black solid;
text-align: center;
}
/*show the hidden content when element is clicked*/
input:checked~div .visibleAfterClick {
display: block;
}
/*'Insert' content when element is clicked*/
input:checked~div .InsertAfterClick::after {
display: block;
content: 'Content inserted after click';
}
<h1>Option 1</h1>
<input id="check01" type="checkbox" name="menu" />
<label for="check01">Fake button</label>
<div>
Content always visible <br />
<span class="visibleAfterClick">
Content visible after click
</span>
</div>
<br /><br /><hr /><br /><br />
<h1>Option 2</h1>
<input id="check02" type="checkbox" name="menu" />
<label for="check02">Fake button</label>
<div>
Content always visible <br />
<span class="InsertAfterClick">
</span>
</div>
Trying with the below code but not getting exact output.
Can someone please help me here?
<head>
<title>question3</title>
</head>
<body>
<form>
name:<input type="text" name="hjcg"><p style="text-align: right">jgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</p>
username::<input type="text" name="hjcg"><span style="text-align: right">hjgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span>
</body>
</html>
<p> tags are block level elements which makes them full width on a new line.
To make them appear on the same line as other elements, you can style them as inline or inline-block elements or use elements that are inline like <span>
To make elements appear on the next line you can use <div> tags which are block level elements by default (which you can change too using css)
<html>
<head>
<title>question3</title>
</head>
<body>
<form>
<div>
name:<input type="text" name="hjcg">
<span style="text-align: right">jgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span>
</div>
<div>
username:<input type="text" name="hjcg">
<span style="text-align: right">hjgdfiuhio hjgiofhuorgfo gfd7uyte8u7tr98gt</span>
</div>
</form>
</body>
</html>
Using Flex should fix your issue, but you should definitely consider using an external css file.
You can add it to your html page with:
<link href="your_style_file.css" rel="stylesheet">
then you could try:
form{
display: flex;
}
or even better, giving your form a class or an id like
<form id="my-form">
or
<form class="these-forms">
and then
#my-form{
display: flex;
}
or
.these-forms{
display: flex;
}
Please check FlexBoxFroggy if you want to learn Flex basics in minutes.
What you are doing actually with text-align is align text within its container.
What you want in aligning items inside the form. Displaying the form as Flex will help you do that.
I am using w3.css in my codeiniter project and I want to put them next to each other.
Here is my code:
<a type="button" class="w3-btn w3-blue w3-pull-left" href="http://localhost/cblog/posts/ikkinchi-post">Tahrirlash</a>
<form action="http://localhost/cblog/posts/delete/2" method="post" accept-charset="utf-8">
<input type="submit" value="O`chirish" class="w3-btn w3-red">
</formm>
Why do you have type="button" attribute on your link?
To display the elements on one line change their style to:
display: inline-block;
Or if you don't need padding
display:inline;
So it will look like this
a,form{
display:inline-block;
}
You can take a look at the documentation for W3.css and see if there's a class that will make an element display inline and maybe use the classes designed for navigation bars. If there's not, then you can create a class yourself and assign it to the element you wish.
.displayInline { display: inline;}
I run into a css issue.
I have a form, and inside it I want to show a label and some info in each line.
The html for the form is:
<form class="form_dialog">
</br>
<label>Status: </label>
<span><img src="images/check.png" alt="check mark" width="16" height="16"/></span>
</br></br>
<label>Type: </label>
<span>V1</span>
</br></br>
<label>Description: </label>
<div class="sp">16 Nodes - Test for long description.
This system is good in all cases. Max length is 100.</div>
</form>
The css for all the tags are:
form.form_dialog {float: left; clear: left;}
.form_dialog div {float:left; clear:left}
.form_dialog label {
display: block; float: left;
width: 12.0em; min-height: 2.0em; text-align: right;
}
.form_dialog span {
margin-left: 3.0em;
}
div.sp {
display:inline;
margin-left:3em;
margin-right:3em;
width:70%;
}
My prob here is that for the description info, I want to keep the text lines indented(each line starts from the same position) as well as inline with label. But cannot achieve it.
Any one can help on this? Thanks.
You are creating a table. You could use a table, or use two seperate elements, placed side by side inside of a containing .
<div class="container">
<div class="formContainer">
</div>
<div class="textContainer">
</div>
</div>
Then float each container and align your text using CSS.
Agreed with Trendy, also, since you starting using span tag, you should just use the span
<span>16 Nodes - Test for long description.
This system is good in all cases. Max length is 100.</span>
I'm wondering what are the best solutions to structure a html form with labels and inputs.
I used to do this with float: left to the label and float: right for the inputs. And each line is surround with a block clear: both.
But i don't think these CSS property were made for something like that..
So what are the others solutions ? Tables ?
Well it really depends on what you want the form to look like. For example, if you want a clear grid with borders I recommend using a table.
To duplicate what you have, you can do this:
<label for='textbox'>Label</label><input type='text' id='textbox' />
And then this css:
label { display: inline-block; width: 100px; }
This will make the label stay on the same line as in input element but will push it the appropriate distance.
Personally, I try to avoid using floats to align elements. I would rather use position absolute and set left or right and top or bottom. To me floating is like asking the browser to do it for you, and maybe some browsers (cough ie cough) will decide to draw it a little differently.
Form markup and CSS will always be a personal choice. Sure, there are some rights and wrongs semantically and technically from a CSS point of view, but there certainly isn't one (or even a few) "right" techniques.
My personal preference is to float the label left and contain my inputs inside lists, which I personally consider more semantic than a div or p tag.
HTML:
<form>
<fieldset>
<ol>
<li>
<label for="input1">Label 1</label>
<input type="text" name="input1" id="input1">
</li>
<li>
<label for="input2">Label 2</label>
<input type="text" name="input2" id="input2">
</li>
<li>
<label for="input3">Label 3</label>
<input type="text" name="input3" id="input3">
</li>
</ol>
<button type="submit">Submit</button>
</fieldset>
</form>
CSS:
li {
clear: left;
margin-bottom: 10px;
}
label {
float: left; /* You could use "display: inline-block;" instead. */
margin-right: 10px;
width: 80px;
}
tables is also a solution.
also , Div with 2 inner divs( left and right)
or 1 div with both elements with float:left with margin-left.