|
CSS - Positioning Text Boxes On Top Of Each Other
I'm pretty new to CSS so bear with me if this is a silly question.
I want to go totally CSS and 0 tables. 1 problem that I've been having with my site is that I have several forms for data entry. These are of course done in 2 column tables, label in the 1st column, text box in the right. The problem I'm having is that I cannot get the text boxes to line up properly using CSS. I am trying a test page simulating a login page. But since the words Username and Password are different lengths, the left edges of the text boxes don't line up evenly. What is the best technique to get CSS to display 2 columns like a 2 column table where the first 'column' contains a text label and the 2nd column has the input boxes aligned nice and neat? Similar TutorialsI'm new to css. I learned how to center a layout so it stays in the center of the browser when the browser is resized, but now I am having trouble trying to place elements inside the boxes I create. When I create a box and put it inside my main layout box i give it a position as to where I want it to go, but when I go into the browser and resize the browser the box stays where it is, and doesn't move with the rest of the page. the same happens for the text i put inside boxes. I guess I'm not supposed to assign an absolute value to the boxes, but how else to I get it where I want it? It's driving me crazy! this is my html:<body> <div id="container"> <div class="box"> <h1>Silver City Food Co-op</h1> <p1>520 North Bullard Street - Silver City - New Mexico - 88061 - Phone: 575-388-2343 - Monday-Saturday: 9am-7pm</p1></div> <div class="box1"><p>The Silver City Food Co-op is a member owned full-line grocery store featuring natural, organic, and local foods, everyone can shop the Co-op, anyone can become part owner of the Co-op!</p></div> <div class="box2"><div class="box3"><p2>Food News</p2></div></div> </div> </body> </html> this is my CSS body{background-color: #69916D} h1{color: #FFF; Font-family: Georgia, "Times New Roman", Times, serif; font-size: 46px; letter-spacing: 7px; font-weight: normal; margin: 0 0 0 130px} p1{font: Arial, Helvetica, sans-serif; letter-spacing: 2px; font-size: 10px; color:#FFF; margins: 0 0 0 30px} p{font: Arial, Helvetica, sans-serif; margin: 0 0 0 10px} div.box {height: 150px; width:750px; border: 0px solid; border-color: #000; background-color: #166501} div.box1 {height: auto; width: 750px; border: 1px solid black;background-color: #FFF; position: absolute; Top: 200px; z-index:2} div.box2 {height: 500px; width:750px; border: 0px solid; border-color:#000; background-color: #FFF9F6; z-index: 1} div.box3{height:auto; width: 200px; border:1px solid; border-color:#000; background-color: #FFF; position:absolute; top: 300px; left:152px} body { text-align: center; } #container {margin: 0 auto; width: 750px; text-align: left } Thanks for the help!! I came across this site with a google search. I have been trying to make a website for my new business and I've been trying to learn CSS. Everything went fine until I tested resolutions out yesterday, I noticed they changed. I've been trying to place a text box in middle of an image but I can't get it to work correctly... a perfect example of what I'm trying to achieve is found he http://www.myspace.com/nourotika I have tried and tried and this is the website that came closest to my problem... My code would be: Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #000;
}
-->
</style></head>
<body><center>
<p style="position: absolute; top: 735px; right: 314px; width: 537px; padding: 4px; background-color: #000; font-weight: bold; font-size: 11px; font-xolor: #F00; height: 548px; color: #909; overflow: visible; z-index: 1;">content goes here</p>
</div>
http://i158.photobucket.com/albums/t108/Katouuffxi/regular.jpg This would be the regular resolution I'm looking for http://i158.photobucket.com/albums/t108/Katouuffxi/resproblem.jpg And this would be my screen resolution problem Sad I really don't know how in the world to do it and I'm just so close from finishing everything... help would be much much appreciated. Here is my development site: http://www.pursuedbybear.com/sunwashed/ Is there any way to vertically center the links in the left hand nav inside their orange boxes without resorting to a table? I've tried vertical-align: middle and padding-top the #nav ul li a element, but neither works. I've done some searching here and the results haven't been encouraging - anyone have something different I could try? I mean really, this isn't exactly a super-complicated or obscure thing I'm trying to do, you'd think CSS could handle it. Any advice? Not sure if this is an HTML or CSS related question but here goes... googling gives me nothing. I have a form that I've built and on occasion one or two of the text fields may have text in side them but I've sent the text field to 'disabled' so that the user cannot change the information inside. The problem is is that some of my users are a little bit older and have a hard time seeing what is inside of the disabled text field because its already grayed out and the text inside is gray. Does anyone know if there is a way to change this or is it just a default with internet explorer? Thanks! Hi there, I have this basic CSS: Code: input.text {
font-size: 11px;
border: 1px #93A6C6 solid;
background-color: #FFFFFF;
color: #3F5674;
font-family: Arial, Helvetica, sans-serif;
}
select {
font-size: 11px;
background-color: #FFFFFF;
color: #3F5674;
padding-right: 3px
}
textarea {
font-size: 11px;
border: 1px #93A6C6 solid;
background-color: #FFFFFF;
color: #3F5674;
font-family: Arial, Helvetica, sans-serif; letter-spacing: 0px; word-spacing: 1pt;
}
The input box style isn't working correctly. The text I type in is coming out black and in a larger font than specified. If I just use style input rather than input.text it does work, but then it will put square borders around radio check boxes, which I don't want. Any ideas why it isn't working? This is the form it is being used on: Code: <form name="Albums Search" method="get" action="searchresults.php">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">
<input name="searchterm" type="text" tabindex="1" size="50" maxlength="75">
</div></td>
<td rowspan="2" align="center" valign="middle"><div align="center">
<input type="submit" value="Search">
</div></td>
</tr>
<tr>
<td><div align="center">Artist:
<input name="searchtype" type="radio" value="artist" checked>
Title:
<input name="searchtype" type="radio" value="title">
Year:
<input name="searchtype" type="radio" value="year">
</div></td>
</tr>
</table>
<p>
<textarea name="textarea"></textarea>
</p>
</form>
Thanks Hi, I'm currently using an attribute selector - input[type="text"] to put borders around text boxes, which works perfectly in firefox, opera and mozilla, but ie doesn't seem to want to know. It will do textareas, but that seems to be about the extent of it's abilities. I would like to do something like: Code:
input[type="text"] {
border-color : #F98537;
border-style : solid;
border-width : 1px;
}
The only way I can find to do a text box in ie is to use just input{...}, but that affects every input object, which is not what I would like to do. I would like to be able to set each input object separately, but as I said ie is the only one that is giving a problem. So can anyone tell me how to get ie to display borders only around text boxes, without affecting other input objects? DebbieLeigh I recently put a section on my web page that allows people to submit data to database, and it works but it looks kind of plain. And I had seen this web page (http://textsfromlastnight(dot)com/Submit-a-Text.html) and saw how they seem to use a custom text box for their submit form. Can anyone explain to me how they did this? Or if its done with something other than CSS possibly point me in the right direction to learn? Thanks in advance!! this is the first time im making a CSS website. w3schools.com really is a big help, but i came upon a problem. on the layout, on the upper left, i got my main menu. i positioned some text there with this code in <head> Quote: h1 { position: relative; top: 46px; left: 135px; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; } h2 { position: absolute; top: 63px; left: 135px; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; } ( as u can see, i tried "relative" but it doesnt work ) and then typed the links of the menu like this: Quote: <h1><a href="index.html">Home</a></h1> <h2><a href="aboutus.html">About Us</a></h2> ect. but when i rezise the browser or take a different resolution, then the text also moves along. the text doenst stay on its place on the menu. for example, if i make the length of the browser smaller, then the text moves out of the menubox, to the right. i hope u understand this. how can i make sure that the text will always stay on its place, on every browser size/resolution? Hello all, My second post . I have a div box with text in it. It looks fine in ie, but the text drops when viewed in mozilla. I have highlighted the border for clarity and want the text to remain directly underneath. I have tried adding styles to mainsection, the div in question, and also the p text attribute, with no joy. As with my last problem I am sure the solution is a simple style, but I can't find it. Any help would be much appreciated. thanks Solar. html page: http://darkspeed.atspace.com/Textest.htm CSS link: http://darkspeed.atspace.com/txtstyle.css thanks again. Hi, I am having a problem with positioning of text within a div. The CSS for my div is: #menuItem { background-image: url('../../images/menu_bg_off.jpg'); width: 146px; height: 28px; font-family: Verdana, sans-serif; font-size: 14px; font-weight: bold; background-repeat: no-repeat; } <div id="menuItem"><img src="images/spacer.gif" width="33" height="1" /><a href="">Home</a></div> The problem lies in getting the text to appear in the middle of the div. I've tried using padding-top: to nudge it down a bit, but that extends the height of the div.. which I don't want to happen. I have a bunch of these lined up vertically (forming a menu) and I don't want any space between them. margin-top: also adds this unwanted space. As you can see I'm using a transparent spacer image to nudge the text horizontally to where I need it to appear, which works. My question is.. how do I position the text vertically to where I want it to appear inside the div? Hi Basically i have positioned some text on my site in the place i need, and it looks fine while the browser is maximised. But when i resize, the text moves to accommodate. Is there anyway i can have the text in the right place, but not move when the browser is resized? Thanks Hi Guys, Basically, I have Text in a content box, all fine and dandy, this content box has a fixed width and an expanding height depending on supplied content. I now need 2 further divs, one of which floats to the right, and positioned at the top of this content div, the other also floats right but needs to be alligned bottom. Ive tried absolutes with content being relative but although this does solve the positioning problem, obviously the content text will not wrap around the divs. ------------| ------------| ------------|_______| --------------------------- ------------------ ---------------------- ---------------------------- ------------------------ -----------| -----------| -----------| -----------|_______________| Basicaally like above (sorry, cant screenshot the project im working on :]) Code: <div style="width:591px; position:relative; z-index:1;"> <div style="width:150px; height:100px; float:right;"> ZZZZZZZZZZZ </div> <div style="width:150px; height:100px; float:right;"> ZZZZZZZZZZZ </div> <div style="width:291px; height:100px; float:left;"> asfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj kasfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj kasfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj k </div> <div class="clear"></div> </div> Hi, I've recently built my first site using the Magento eccomerce paltform. I'm having a problem with the text box for the item descriptions on the product pages. The problem is that on page load the item description drops about 200px and overlaps outside of the text box area. This only happens in IE. I'm sure this is a CSS stylign issue but i'm not entirely sure what needs to be done or which attribute wil fix it. Any help would be appreciated. I'm not allowed to post urls on this forum as a new user but the website is a UK site called lowpricememory. The url is lowpricememory with dot co dot uk. You will see the problem on any product page. Thanks, Tim hey all, i'm trying to figure out how to position text in an h1 tag that uses a background image, without adding extra markup. i just need it 15px from the left of the image, and 10px from the top. here's the css for the h1 tag: Code:
h1 {
height:50px;
width:100%;
background:white url(images/h1_background.gif) no-repeat left;
margin-top:12px;
color:white;
font-size:11pt;
}
and the html is just; Code: <h1>welcome</h1> thanks! My problem is with 2 textfields that I am using css to text attributes, all is well in IE, but in netscape and firefox the letters q,y,p the bottoms get cut off. Any suggestions greatly appreciated. here is a link to the page i am working on http://www.cfwilson.com/365c/index.htm Charles Hello, If you go to http://tombraiders.net/katie/sid/index.html User: letme Pass: in you'll see that the body text is shifted halfway down the page as well as the menu. Anyone know how I can fix this? Also, how can I fix the rollover for the menu? I don't want the rollover coloured square to be so long. Thanks! I'm trying to position some things inside a DIV. Here's the basic layout: What I did was put them in DIVs position them within the "parent" DIV relative to the upper left. Doesn't seem to work, so I'm doing something wrong. Image One is easy, but the text and Image Two I just don't seem to grasping. I've looked at the Floatutorial, I'm not grasping it, or the answer isn't there. Should the text block and Image Two be within a separate DIV? Its been a long time now and I am finnaly getting back into website desiging. I am doing a simple coding but I am having a hard time trying to figure out how to do the following. I want to create a table but using only divs. So basically I am going to have a parent div acting as the whole table then sub-div acting as each row, and within those divs there will be more divs acting as each cell. But I can't figure out how to make each cell be right next to each other instead of on the next line. How do I make it look like below: |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| Also, what CSS properity do I have to use so that the content of each cell will overlap with all th surrounding cells? By overlap I mean so they will be touching each other. Hi Guys, Ive not been doing the CSS stuff too long as I used to use tables all the time for this stuff. Im ultimately trying to get 3 news articles for eg on a homepage with a mini image to the left of the text which wraps around it. The text sometimes is not going to be the size of the image so the next article needs to drop to the next line underneath. It isnt though and its listing in a diagonal line instead. Any one got any tips. Code: <div id="m1"> <div class="nw1"> <h2><a href="/">Money test title</a></h2> <p><img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" />Latest shinanigans on the money savings scene today are... just gonna pack this out to see if the image does eventually fit in at all which would be nice because it should work! But who knows eh? :D Its just an interesting topic to look into la de dah de dah!</p><br /> </div> <div class="nw1"> <h2><a href="/">Money test title</a></h2> <p>Latest shinanigans on the money savings scene today are...<img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" /></p><br /> </div> <div class="nw1"> <h2><a href="/">Money test title</a></h2> <p>Latest shinanigans on the money savings scene today are...<img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" /></p><br /> </div> </div> Ive tried a few things like putting div's around each specific article see if i could somehow force it to a new line but it isnt working. The img tags ive moved about. Im using float left on them. Any one any suggestions? Im really stumped and close to hitting the monitor If it helps I could pm the url to you if you think u can help. Thanks guys. Im hoping this is a relatively easy problem as most sites layout like this just I can't get it to do it! hehe! Hi, I have a table cell where I have to place an image and title (centered) by the side of it. I am using the following code but does not work the way I wanted. <table> <tr> <td> <img src="graphics/gifs/spotlight_xlr.gif"> Title </td> </tr> </table> The "Title" text is getting displayed by the side of the image but to the bottom. I want the Text to be centered around the image. Both the IMG and Text should be part of the same TD tag. I know with CSS it is possible. Please help. Thanks, VMRao |
|||||||