I have a HTML page with personal information details using text boxes. I have two fieldsets as in
this Jsfiddle.
As noticed that the fieldsets are placed up and down position. My question is that
How can I placed these two fieldsets side by side (left & right position)?
Thank you
I removed the form width: 40%; and assigned a float:left; property on those fieldsets. Here is the corrected fiddle: Try me
Remove width:40% from form & give float to your fieldsets.
Check this: http://jsfiddle.net/XdRYT/8/
Simplest solution is create table with two cells and one row and place each fieldset in different cell. Another bit more complicated is to use CSS to format it.
Change fieldset stye to below
fieldset {
border: 1px dotted #61B5CF;
margin-top: 1.4em;
padding: 0.6em;
float:left;
width:40%;
}
Related
How can I remove the space between the <fieldset>'s in the following example? Here's a JSFiddle.
HTML
<!-- Displays bad, but HTML looks good -->
<fieldset>test</fieldset>
<fieldset>test</fieldset>
<!-- Displays good, but HTML looks bad -->
<fieldset>test</fieldset><fieldset>test</fieldset>
CSS
*
{
margin: 0;
padding: 0;
}
fieldset
{
background-color: red;
display: inline-block;
}
I'd like to be able to leave space between the <fieldset>'s in the HTML code, since their contents are quite long. But I need them to display right next to eachother.
The best solution is to remove any spaces between inline-block (or inline) tags.
You can use comments for better readability:
<fieldset>test</fieldset><!--
--><fieldset>test</fieldset>
There is no CSS solution which can be 100% reliable.
EDIT: it doesn't seem it's the case but some template engines provide this behaviour, like twig's spaceless
Demo
How about float: left;:
CSS:
fieldset {
background-color: red;
float: left;
}
A different solution is to put the fieldsets in a DIV container and set the font-size to 0 using CSS for that container. Then, of course, set the font-size of the field-sets back to whatever you need it to.
Setting the font-size to 0 on parent container basically removes the white-space between inline-block elements of that container.
I ran into a problem when trying to style a home page that I am working on. Here is very simple version of what I am doing. http://cdpn.io/kgLzD
I am using wordpress and have the_loop within a div which outputs 8 post with a class of "post". The problem I am having is styling each post like the picture below because they are divs and have no control over choosing which "post" to style? If I was using a list then I could choose which item to style. Any help/tips/advice to achieving the styles below would be greatly appreciated.
This is where I currently am and as you can see all I basically need are the borders. How would you go about achieving this?
You could use css nth-of-type() selector - since you are floating left and have the div's two-up, using nth-of-type(2n) would select all of divs on in the right column: (see codepen here: http://cdpn.io/Iacvk)
section.home-grid {
width:440px;
}
.post {
border-top:1px solid #777;
width: 200px;
float:left;
padding: 10px;
}
.post p {
padding:.5em 1em;
width:90%;
margin:0 auto;
text-align:justify;
}
.post:nth-of-type(2n) p {
border-left:2px dotted #777;
}
Not entirely sure what you're looking for, but perhaps using an nth-child css selector on the posts will help.
http://css-tricks.com/how-nth-child-works/
I'm working in this form. Its design is exactly like this:
Right now I'm at this stage, so I am working on some little details:
As you will be able to see, the "Your text..." is stuck to the top left corner of the textarea. I'm trying to find a way to manipulate this via CSS if possible. I just need to apply some margin/padding to the text inside the textarea. If this is not possible with CSS I'm open for suggestions.
How can I manipulate the text inside the textarea via CSS?
You can use CSS padding property:
textarea {
padding: 5px;
}
Use:
textarea {
padding: 5px;
box-sizing: border-box;
}
Note: box-sizing is a CSS 3 property. It's very useful, because without it width: 100% or other will not work as you expected.
You can use CSS to create the desired effect
textarea {
padding: 20px;
margin: 10px;
}
<textarea></textarea>
Yes, the padding from CSS applied to textarea is correct. But then you need to change the "rows" and the "columns" as the dimensions of the whole textarea changes.
You can use the code below:
line-height: _px;
Use the same value as the height of the textarea.
I am trying to get a label to fill a table cell whilst having some sort of padding applied to the label.
I have tried a method I found through my searches but this does not seem to work... here is my CSS:
tr {
height: 1px;
}
td {
height:100%;
}
label {
background-color: #DCDCDC;
display: block;
font-weight:bold;
vertical-align:top;
text-align:right;
padding: 8px 5px 8px 8px;
margin: 1px 3px 1px 0px;
min-width: 120px;
min-height:100%;
height:auto !important;
height:100%;
}
Any help with this would be gratefully appreciated
From the given CSS it looks like there may be browser default padding on the table cells.
td {padding: 0;}
label {display: block; padding: 1em;}
seems to do the trick for me : http://jsfiddle.net/Fb7bS/
But a more complex table and/or inherited styles from elsewhere may add complications.
Hy,
I came over this problem long time ago. It seems that some sort of webbrowsers add a standard padding and margin to tables. How much they add, always depends on the webbrowser. But to overcome this problem you should consider the method of css reseting. What's that ? You simply add a .css file you include in your HTML Page which setts all margins/paddings and other formations done by default to zero. With this you avoid such problems.
There goes the link for CSS Reset: http://meyerweb.com/eric/tools/css/reset/
Well, in older browsers, a label cannot be set as a block level element. You could try placing a div within the label and transferring the label's styles to the div, and see if that fixes your issue.
Though also for height: 100% to work, the element must be absolutely positioned, and the parent element relatively positioned, but in some browsers table elements like td can't be relatively positioned, either. Also unless the td is meant to fill the entire length of the screen vertically, the height: 100% on both elements is unnecessary anyway.
I removed some of the "unnecessary" code and changed your format a bit here, though I'm not sure exactly what you wanted, so it might turn out to not be so unnecessary and that something else was just missing: http://jsfiddle.net/mGykJ/1/
Could you see if that's more like what you had in mind? Though if you could post your HTML, that would be helpful.
I'm trying to create a breezebrowser template (used for generating image galleries locally, outputs HTML). I've taken the HTML from my wordpress template and managed to generate the following gallery http://uploads.peasyphotos.com/20100607t-candids/gallery/ but each image goes on a new line and i don't know why, i presume it's in the CSS. What should I be looking for in the CSS to try and stop this, or what can I put around my template code to disable the CSS for that part?
Thanks
So i've got a posible answer for you.
First you have to add this css-styles to the a tag of the pictures:
display: inline-block;
height: 150px;
widht: 150px;
text-align: center;
vertical-align: top;
It works with Firefox 3.6. I'm not sure if it will work with oure lovley IE :P
I hope i could help!
In you css files, you have one file called reset.css. At line number 57, you have a one line called display block. comment it out a see. may not be a nice view. but images wont go next line.
For the anchor element having the photos use the float like this. This would take care.
float:left;
your images parent anchor tag do not have correct css. Put a class images over the anchor tags and use following css for them.
a.images {
border-bottom:1px solid #D8048D;
color:#D8048D;
display:block;
float:left;
height:159px;
margin:0 10px;
text-decoration:none;
width:100px;
}
Firstly I would recommend validating your html.
Secondly, I would suggest putting the images in a container element of some sort: possibly an unordered list. There are serious accessibility issues around having a series of links running into each other like this, with no separating non white-space characters.
Thirdly, I would use a css class on the list, and style it like this:
ul.gallery { list-style: none}
ul.gallery li { float: left; clear: none; list-style: none}