I am trying to make the two elements in the header, the pink section and the green section, be inline ( in one line and not wrapping to a new line as the green section is currently).
However, I can't use display:inline; as the items need to have a width.
How can I achieve both of these elements being inline and keep their widths?
Here is the page where the elements are: https://dl.dropboxusercontent.com/u/270523/help/new.html
The inline-block solution:
#logo {
width: [WIDTH1]%;
min-width: 225px;
background: pink;
}
#input{
width: [WIDTH2]%;
background: green;
}
#input,#logo {
display: inline-block;
height: 100%;
vertical-align:top;
}
Where [WIDTH1] + [WIDTH2] = 100%.
For this to work, you need to delete the whitespaces between the two elements.
So not like now:
<section id="logo"></section>
<section id="input">
<input id="searchInput" type="text" name="search" autocomplete="off">
</section>
But instead:
<section id="logo"></section><section id="input">
<input id="searchInput" type="text" name="search" autocomplete="off">
</section>
You've set the float to the #input section but not the #logo section.
#logo {
width:20%;
float: left;
}
Your section input is dropping because it is having extra width, make it around 77% then it will work for you.
#input{width:77%;}
first of all it is really nice You use html5 tags its good for You. In my opinion the easiest way is use a float for all of elements in header, but remember to clear:both parent tag.
Here is demo of modified your code: http://jsfiddle.net/bartekbielawa/WgtAP/
Related
I have design this box with angular material. I can not break these two words in two line(up and down).i have included a image. Here i want 1349 and New Feedback in two line. I am new in angular material. thanks
<style>
.box-item {
background-color: cornflowerblue;
width: 100px;
height: 120px;
}
.box-text {
color:white;
}
</style>
<div layout="row" style="padding: 32px;" ng-cloak>
<md-whiteframe class="md-whiteframe-2dp box-item" md-colors="[enter image description here][1]background:'blue-400'}"
flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout
layout-align="end center" layout-margin>
<span class="md-display-1 box-text">1349</span>
<span class="box-text">New Feedbacks</span>
</md-whiteframe>
</div>
That is a css question.
You want to order 2 inline elements (span) in 2 lines.
You should try to style one of them as block element or to add br tag between them.
<style>
.box-item {
display: inline-block;
background-color: cornflowerblue;
height: 120px;
}
.box-text {
color:white;
display: block;
}
</style>
Example Here
That's because the <span> tag is an inline element by default and only takes up as much width as necessary.
If you need to use a span and require the item's on separate lines then either change the behaviour of the element through CSS by changing it's display property to block as stated by Cuzi, add a single line break between the elements using the <br> tag or use a block-level element such as the <div> tag.
I recommend using the right element for the job. So a block-level tag like the <div> tag would be ideal. This would cause both elements to take up the full width available and thus be on separate lines without the requirement for an extra line of css, (plus you save a byte of space per element within the HTML!
Heres how to do it in CSS.
.box-text {
color:white;
display: block;
}
Heres with a <br> tag:
<span class="md-display-1 box-text">1349</span>
<br>
<span class="box-text">New Feedbacks</span>
And the simplest and most semantic of the three, with div tags:
<div class="md-display-1 box-text">1349</div>
<div class="box-text">New Feedbacks</div>
Into a page I have the following
<div id="submitEventButtonDiv">
<div id="wwctrl_backButton" align="right">
<input id="backButton" type="submit" onclick="return clickSubmitButton();" value="Back">
</div>
<div id="wwctrl_submitEventButton" align="right">
<input id="submitEventButton" type="submit" onclick="return clickSubmitButton();" value="Submit">
</div>
</div>
As you can see there is an external div having id="submitEventButtonDiv" that contains 2 divs containing in turn 2 input fields.
Obviously when the 2 input field are displayed appear one below the other (because they are contained into a div that is block element).
How can I display one beside the other? (I can't delete the div that contains each input field because it is automatically rendered by a tag library that I am using, this that I have post is the rendered HTML obtained from a page that us Struts 2 tag library that wrap HTML following its logic, so in this case I can only work on CSS to do it)
Tnx
Just display the child elements inline.
#submitEventButtonDiv > div {
display:inline;
}
codepen here http://codepen.io/anon/pen/jEmaed
Depending on your cross browser needs, use flexbox:
#submitEventButtonDiv {
display: flex;
}
Will make all of the children flex items, which by default, stack horizontally, like you want.
If you float them both they'll be positioned next to each other. Adding
#submitEventButtonDiv > div {
float:left;
display:inline;
}
To your css should position them both to the left of the page next to eachother.
If the inner div IDs are always same, then you can add the following styles in your css:
div#wwctrl_backButton {
display: inline-block;
width: 50%;
}
div#wwctrl_submitEventButton{
display: inline-block;
width: 50%;
}
This generates the desired effect.
#submitEventButtonDiv > div {
display:inline;
float:right;
}
I have a checkbox next to 3 lines of text. I wish to center the checkbox vertically against these lines of text:
A
[] B
C
I'm attempting to do this via div containers while resisting the immense temptation to revert to tables. Here's my code so far:
<div style="overflow:auto;">
<div style="height:57px; float:left;margin-right:15px;">
<input style="vertical-align:middle;height:100%" type="checkbox"
name="theCheckbox" id="checkboxId">
</div>
<div style="float:left;">
A<br/>
B<br/>
C
</div>
</div>
JSFiddle
While the above 'works', I'm not happy about the hard coded height. Changing 57px to 100% makes the checkbox disappear (computed height becomes 0). Removing the height style from the div alltogether also results in a disappearing checkbox. Can anyone suggest improvments or alternative solutions to achieve my goal?
EDIT: I have to support IE7+ amongst other browsers.
You could treat the elements as a table (without actually using a table) like this:
HTML
<div id="container">
<div class="tableCell">
<input type="checkbox" name="theCheckbox" id="checkboxId">
</div>
<div class="tableCell">A<br/>B<br/>C</div>
</div>
CSS
#container { display: table; }
.tableCell {
display: table-cell;
vertical-align: middle; }
See the fiddle here: http://jsfiddle.net/QpnkV/2/
For backwards compatibility think about using scripts in your dochead like this:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
How about this?
HTML:
<input type="checkbox" name="theCheckbox" id="checkboxId"/>
<div id ="try">
A<br/>
B<br/>
C
</div>
CSS:
#checkboxId{
position:relative;
vertical-align:middle;
}
#try{
position:relative;
display:inline-block;
vertical-align:middle;
}
Here is the JSFiddle
You can position the checkbox vertically using absolute positioning.
For your HTML, you can simplify it as follows:
<div class="wrap">
<input class="control" type="checkbox" name="theCheckbox" id="checkboxId">
<div class="label">A
<br/>B
<br/>C
<br/>D</div>
</div>
and apply the following CSS:
.wrap {
border: 1px dotted gray;
position: relative;
overflow: auto; /* triggers hasLayout in IE7 */
}
.control {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
.label {
margin-left: 20px;
}
Demo Fiddle: http://jsfiddle.net/audetwebdesign/N23qr/
The tradeoff here is that you need to hard code a value for margin-left on the .label container, which is less restrictive than specifying a height value.
Note About IE7
To get position: relative to work correctly for .wrap, you need to make sure that IE7 invokes the hasLayout property, which can be effected by applying overflow: auto. For more details, see: IE7 relative/absolute positioning bug with dynamically modified page content and specifically, http://www.satzansatz.de/cssd/onhavinglayout.html#rp
I have the following HTML code and I want to make my form aligned in center.
<form action="advsearcher.php" method="get">
Search this website:<input align="center" type="text" name="search" />
<input type="submit" value="Search"/>
</form>
How can I do that?
#Lucius and #zyrolasting have it right.
However, you will probably need to give the form a specified width for it to work properly.
form {
margin: 0 auto;
width:250px;
}
Just put some CSS into the stylesheet like this
form {
text-align: center;
}
then you're done!
Being form a block element, you can center-align it by setting its side margins to auto:
form { margin: 0 auto; }
EDIT:
As #moomoochoo correctly pointed out, this rule will only work if the block element (your form, in this case) has been assigned a specific width.
Also, this 'trick' will not work for floating elements.
This will have the field take 50% of the width and be centered and resized properly
{
width: 50%;
margin-left : 25%
}
May also use "vw" (view width) units instead of "%"
Use center:
<center><form></form></center>
This is just one method, though it's not advised.
Ancient Edit: Please do not do this. I am just saying it is a thing that exists.
Just move align="center" to the form tag.
<form align="center" action="advsearcher.php" method="get">
Search this website:<input type="text" name="search" />
<input type="submit" value="Search"/>
</form>
The last two lines are important to align in center:
.f01 {
background-color: rgb(16, 216, 252);
padding: 100px;
text-align: left;
margin: auto;
display: table;
}
#form{
position:fixed;
top:50%;
left:50%;
width:250px;
}
You can adjust top & left depending on form size.
Try this :
Set the width of the form as 20% by:
width : 20%;
now if the entire canvas is 100 %, the centre is at 50%. So to align the centre of the form at the centre, 50-(20/2) = 40.
therefore set your left margin as 40% by doing this :
left : 40%;
simple way:Add a "center" tag before the form tag
<center><form></form></center>
does work in most cases like The Wobbuffet mentioned above...
I make a small chat. There was a problem with CSS, because I'm more a programmer than a layout designer.
HTML:
<div class="chat_input_box">
<input type="text" class="chat_input_text" name="message">
<input type="submit" value="Отправить" class="chat_submit_button">
</div>
CSS:
.chat_input_box {
width: 100%;
}
.chat_input_text {
width: 83%;
}
.chat_submit_button {
margin-right: 0px;
}
The problem is that it is not goes to set the width of the text field maximum without hardcode (83% for example).
try to put button and input filed into two different divs. Give button div CSS parameter "float: right; width: someAmount px;"
Not really what you asked for, but as close as possible: http://jsfiddle.net/TQvg8/