llass61 Posted January 21, 2015 Share Posted January 21, 2015 (edited) I am new to css. I am trying to style a group of label/input elements for an Address. I would like to be able to display the label in front of the associated input box, and then change to show on top of the associated box (modifying the css). ## set div's to inline (the input and label are inline by default)#Prefix: "Input Prefix Name" Last: "Input Last Name" First: "Input First" and also ## change inner divs, or input and label to 'block'. Both failed!#Prefix: Last: First:"Input Prefix Name" "Input Last Name" "Input First" Getting the label to display in front is easy, but when I change my css to try and get the label and input elements to align vertically (change to 'block' display), I get really bad/weird results. Can someone tell me what I'm doing wrong and how to change it? HTML <!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>Work</title> <meta name="description" content="iPMS"> <meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/styles.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <fieldset id="clietInformation"> <legend>Client Information</legend> <div id="name"> <div id="prefix_"> <label for="prefix">Prefix:</label> <input id="prefix" type="text"/> </div> <div id="first_"> <label for="first">First:</label> <input id="first" type="text"/> </div> <div id="middle_"> <label for="middle">Middle:</label> <input id="middle" type="text"/> </div> <div id="last_"> <label for="last">Last:</label> <input id="last" type="text"/> </div> <div id="suffix_"> <label for="suffix">Suffix:</label> <input id="suffix" type="text"/> </div> </div> </fieldset> </body></html> CSS @import url("resetss.css");body, input { font-size: small; }input { font-inherit: true; border: solid black 1px;}fieldset { border: black 1px solid; padding: 5px;}/* input, label { display: block; } */#name > div { display: inline; }#name > div label { display: block; }#name #prefix { width: 2.5em; }#name #first { width: 7em; }#name #middle { width: 1em; }#name #last { width: 10em; }#name #suffix { width: 2.5em; } Edited January 21, 2015 by llass61 Link to comment Share on other sites More sharing options...
davej Posted January 21, 2015 Share Posted January 21, 2015 I don't see anything obvious in FF. Is this problem only visible in particular browsers? Of course I don't really know what you mean by "align vertically." Link to comment Share on other sites More sharing options...
llass61 Posted January 21, 2015 Author Share Posted January 21, 2015 The code that I sent you (html and css) work fine. It puts all labels and input elements "inline". In the css, I have a rule commented out: /* input, label { display: block; } */ If you uncomment this rule, you get pretty bad results. What I wanted to do was to put the the label for each associated input element on top of the input element. Example: Prefix: Last: [PreFixInputBox] [PreFixInputBox] I still wanted each different name part to be inline, just with the associated labels on top of each input element. Link to comment Share on other sites More sharing options...
davej Posted January 21, 2015 Share Posted January 21, 2015 I uncommented that line and saw no change in IE 11, FF 35, and Chrome 39. There are several ways to accomplish what you seem to be describing, however I don't think I understand why you need both a horizontal and a vertical arrangement, and I don't understand how or when you will wish to switch between them. I don't claim to be any good as css but here is an example... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>Work</title><meta name="description" content="iPMS"><meta name="author" content="SitePoint"><link rel="stylesheet" href="css/styles.css"><style>*{margin:0;padding:0;}body, input { font-size: small; }input { font-inherit: true; border: solid black 1px;}fieldset { border: black 1px solid; padding: 5px;}@media screen and (max-width:600px){#clientInformation{ width: 10em; }}@media screen and (min-width:600px){#clientInformation{ width: 30em; } }#name > div { float:left; }#prefix_, #prefix { width: 2.5em;margin-right:1em; }#first_, #first { width: 7em;margin-right:1em; }#middle_, #middle{ width: 1em;margin-right:3em; }#last_, #last{ width: 10em;margin-right:1em; }#suffix_, #suffix{ width: 2.5em;margin-right:1em; }</style> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head><body> <fieldset id="clientInformation"> <legend>Client Information</legend> <div id="name"> <div id="prefix_"> <label>Prefix:<input id="prefix" type="text"/></label> </div> <div id="first_"> <label>First: <input id="first" type="text"/></label> </div> <div id="middle_"> <label>Middle: <input id="middle" type="text"/></label> </div> <div id="last_"> <label>Last: <input id="last" type="text"/></label> </div> <div id="suffix_"> <label>Suffix: <input id="suffix" type="text"/></label> </div> </div> <br style="clear:both"> </fieldset></body></html> Link to comment Share on other sites More sharing options...
llass61 Posted January 22, 2015 Author Share Posted January 22, 2015 OK - figured it out! Guess I wasn't being very clear on what I wanted. But thanks to all who tried to help! If you load the html below, you will get one of the options I was looking for. You will get a request form for the prefix and last name with the labels on top of the input boxes. Second option I wanted was to just have the labels (Prefix:, and Last:) labels to the left of the input boxes. To do this, I just had to comment out the following line: "label { display: block; }" *** in the style section The problem I was having earlier was that I was setting the "div > div" combinator/selector with a display of 'inline'. Not sure why this causes the page to freak out. Maybe displaying a div inline is not so good! Using 'inline-block' is fine! If anyone has any info on why setting the div to 'inline' is bad, I would love to know! Thanks! <!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>iPMS</title> <meta name="description" content="iPMS"> <meta name="author" content="SitePoint"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> div { padding: 5px; } div > div { border: solid black 1px; display: inline-block; } label { display: block; } </style> </head> <body> <fieldset id="clietInformation"> <legend>Client Information</legend> <div id="name"> <div id="prefix_"> <label for="prefix">Prefix:</label> <input id="prefix" type="text"/> </div> <div id="first_"> <label for="first">First:</label> <input id="first" type="text"/> </div> </div> </fieldset> </body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted January 22, 2015 Share Posted January 22, 2015 An inline element cannot have a width, height, padding or margins. It only occupies as much horizontal space as the content that's within it, it only occupies as much vertical space on each line as the line-height CSS property tells it to. It really makes no sense to put a block inside an inline element. The block will behave nearly as if the inline element didn't exist. Link to comment Share on other sites More sharing options...
llass61 Posted January 22, 2015 Author Share Posted January 22, 2015 OK - Not sure I get the total picture though! I had a div element that I set as 'inline' (only show contents!). It had children (label,input) elements that I set as 'block' so that they would be stacked on top of each other. The question is, what will the outter div show for content. I believe you said that it would treat the outter div as if it didn't exist (since its 'inline'). But thats not what I get, I get some pretty bad results. Link to comment Share on other sites More sharing options...
Ingolme Posted January 22, 2015 Share Posted January 22, 2015 So what exactly does it look like? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now