I am trying to learn more CSS. I inherited a nice layout that I have been using for a little while now and I want to keep the CSS going instead of mixing tables in there. I am currently designing a separate form to handle side by side textboxes. I was using span tags to keep these textboxes side by side but now I'm wondering what the best practice for this type of design would be. Should I use a div container and spans as I was doing or should I just use straight divs and float them as in my example?
<div style="overflow:hidden; width:100%; border:1px solid #000;">
<div>
<div style="float:left"><input type="text" /></div>
<div style="float:right"><input type="text" /></div>
</div>
<div style="clear:left">
<div><input type="text" /></div>
</div>
</div>
As far as markup choices are concerned, it is always a good hint to test your page in a text browser (Lynx, Links, Elinks), and check how it is displayed there. I am usually using some kind of list (ul, ol or dl) for my forms.
Don’t forget to checkout A List Apart’s Prettier Accessible Forms article, which gives a good start for styling forms.
I'm not entirely sure what you're trying to achieve in terms of layout, but you can get the same result using a lot less markup:
<div style="overflow:hidden; width:100%; border:1px solid #000;">
<div>
<input type="text" style="float:left" /><input type="text" style="float:right" />
</div>
<div style="clear:left">
<input type="text" />
</div>
</div>
Make sure you move those in-line styles into class or id definitions too. Avoid having css definitions in your markup.
Related
A sample form control taken from the Bulma CSS framework documentation works as expected using Bulma 0.7.2 (latest at time of writing).
However, when the form is put inside a standard html <details> tag, the height of the element changes, and some width (of the input?) changes, so that there's a visual glitch when hovering over the input.
What's causing this, and is there a style that can be applied to the <details> tag that would make the form element display correctly?
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
<br>
<br>
<details>
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-info">
Search
</a>
</div>
</div>
</details>
Edit: as a more minimal example, the style is also wrong for a single <input class="input" type="text" placeholder="Find a repository"> element inside the <details> tag.
The reason this is happening is because the padding in the input and the button is calculated based on em's and since the input is inside a <details> tag, it must be interfering with the proportions somehow - See image below:
I'm not familiar with this framework, I'm not sure there would be a way to adjust the issue. In any case, the quickest workaround would be to target the input and button inside the <details> tag and add a static padding-top and padding-bottom of 0 to both the button and the input inside the <details> tag:
details .input,
details .button{
padding-bottom: 0;
padding-top: 0;
}
After that, I find that if you reduce the input max-width to 89% instead of 100% it amends the issue with the hovering:
details .input{
max-width: 89%;
}
I'm new to this, so I apologice if the questions are stupid.
I have some code I inherited that I need to customize. I have an input defined in my html file:
<div style="display: none;">
<input id="homeIcon" type="hidden" value="true" />
I also have this in my html:
<div id="header">
<div style="float: left;">
<div id="headerTitle">
My Website
</div>
</div>
</div>
In the CSS I want to decide where to place this home icon. I want it to appear in the header to the right of the headerTitle.
Can I use the CSS to move an html element so that it appears in another div?
I managed to change the location within the current div - but not move it to an entirely new place.
Thanks,
Rocky
It's bad idea to relocate elements using CSS (absolute positioning and other stuff that will break your layout).
CSS is just for visual representation of elements, so use HTML to change elements position
<div id="header">
<input id="homeIcon" type="hidden" value="true"/>
<div id="headerTitle">
My Website
</div>
</div>
hello Rocky using css you can not move the element to another div but you can "over lap on the div area" so look like you put them to another div.using position
I am using a CMS which when building a form wraps all it's contents with what it calls an "anonymous div" to comply with XHTML, unfortunately the theme was designed without this insight and there fore the submit button CSS is:
.contact form div.control input[type=submit]
This works if the markup is:
<section class="contact">
<form>
<div class="control">
<input type="submit" />
However because this additional DIV added by CMS:
<section class="contact">
<form>
<div>
<div class="control">
<input type="submit" />
How can I write the CSS a bit more adaptive so extra markup doesn't affect it so much, but without styling the individual element via ID or class???
Alex
Your selector should still select the input, the div won't affect that. If the div is causing layout problems, you might need to make it an inline element like this:
section > form > div { display: inline }
You should be able to just add:
.contact form div div.control input[type=submit]
or
.contact form div .control input[type=submit].
Either should work fine.
Basically is what is says in the tin.
I have an input tag and independent javascript to control it. When they user is inserting data it changes one of its' classes automatically so that its color is changed by CSS which is defined elsewhere Until then everything is ok. Next: I want the whole div that contains that input to change color so that the user can be warned when something is wrong. There's a problem here: How can I select that div I want to select only using CSS?
Here's some code that works for the input:
input.wrongVal {
border-color: red;
background-color: red;
}
input.wrongVal:active{
background-color: white;
}
Here's the relevant code from the page:
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
How can I, with only CSS, select for styling the div shown here (and no other div) with, for instance, another background?
You can't do that with CSS. What you can do however is use Javascript to either change the class of the div container or wrap the div container into another div.
<div class="infoinputContainer invalid">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
or:
<div class="invalidInput">
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
</div>
You can't. Not with pure CSS.
CSS selectors only select/target children or descendants for performance purposes: if you could target :parent (like in jQuery) the browser would have to wait to render any of the page until it had processed all child nodes.
You'll have to use JavaScript instead.
You can't with just css.
What are you using to change the class when a user enters information? If it's javascript, you can use that to change the class of the parent (or grandparent) as well.
I'm helping an artist maintain her website and have inherited some pretty outdated code. Have moved lots of redundant common code to include files and am now working on moving from inline styles to more CSS-driven styles.
For the gallery pages, e.g. http://artistsatlaketahoe.com/abstract.html, a lot of inline styling is used to force the current layout. My preference would be to replace this entirely with CSS that presents the following table-like layout within the "content" div:
[image] [image descriptives and purchase button]
[image] [image descriptives and purchase button]
[image] [image descriptives and purchase button]
I'd like to middle-align the image descriptives & purchase button relative to the image if possible. And then apply some padding above and below each row to stop using tags for vertical spacing.
Any ideas how to create a div that I can use to get this kind of layout?
Thanks!
Using inline style for simplicity, move to CSS to accomplish your goal.
<div>
<img src="#" style="float: left; padding: 10px 10px 10px 0;" />
<div>
<p>Text</p>
<input type="submit" value="Submit" />
</div>
</div>
<div id="container">
<div id="row" style="display:table-row; margin:5px 0; outline:red solid 1px;">
<div id="image" style="float:left; outline:blue solid 1px;"><img src="#" /></div>
<div id="content" style="display:table-cell; padding:5px; outline:green solid 1px; vertical-align:middle;">
Image Description<br />
<input type="button" value="Button" />
</div>
</div>
</div>