|
CSS - Align Caption/textbox
Hi,
I try to use two div's to align a caption and a textbox for I don't want to use dozens of Code: between the two below ain't that good Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#the_textbox {
position:absolute;
border:1px #FF0000 solid;
left:145px;
top:0px;
font-size:16px; font:"Courier New", Courier, monospace;
text-align:left;
width:90
}
#menulist ul {
position:absolute;
left:6px;
list-style-type:none;
border:1px #FF0000 solid;
font-size:16px;
width:90;
top:0px;
}
</style>
</head>
<body>
<div id="menulist">
<ul>
<li>Fname</li>
<li>Lname</li>
<li>Address</li>
<li>Phone</li>
<li>Gender</li>
<li>BirthDate</li>
<li>Nationality</li>
<li>Marital Status</li>
</ul>
</div>
<div id="the_textbox">
<form id="" name="" action="" method="post">
<input type="text" name="Input6" id="Input5" value="" size="25" /><br />
<input type="text" name="Input6" id="Input5" value="" size="25" /><br />
<input type="text" name="Input6" id="Input5" value="" size="25" /><br />
<input type="text" name="Input6" id="Input5" value="" size="25" /><br />
<input type="text" name="Input6" id="Input5" value="" size="25" /><br />
<input type="text" name="Input6" id="Input5" value="" size="25" /><br />
<input type="text" name="Input6" id="Input5" value="" size="25" /><br />
<input type="text" name="Input6" id="Input5" value="" size="25" /><br />
<input type="submit" value="Submit Registration"/>
</form>
</div>
</body>
</html>
Similar TutorialsI'm trying to set up a box to hold an image and a caption. I thought it would be really easy, but I'm having huge difficulties... Here's what I want: A floating box contains my image and caption. It shrinks to fit the image width (which varies depending on the image), and the caption wraps onto new lines if needed. Simple, eh? Well, apparently not... I just can't get my text to wrap. If the line of text is longer than the image, it stretches the whole container. No matter how many workarounds I try! Can someone please tell me how it's done using CSS?! I have an image that is float: right that I want a caption under. I read the Floatutorial and another float tuturial and thought I did what it said, but now the image floats left of the caption - sort of. I want the image to float left and the caption in dk blue to be beneath it. Here is the problem page Here is the css code for the float part: Code: .imgRight {
clear: none;
float: right;
min-width: 100px;
color: #3399FF;
font-weight: bold;
}
.imgRight img {
margin: 0px 0px 10px 20px;
border: 1px solid #000099;
overflow: visible;
}
Here is the xhtml code for the float part: Code: <p>Vitalograph Ltd was founded in 1963, building on a successful business in respiratory
diagnostic and therapeutic products started in 1951. </p>
<div class="imgRight"><img src="../images/p_model.jpg" width="275" height="182" alt="Vitalograph P Model Spirometer" />
1966 Vitalograph P Model Spirometer</div>
<p>Vitalograph achieved its early success
by taking spirometry from a complex laboratory test to a simple effective screening procedure
- with the key benefit of providing early detection, and therefore more effective treatment.</p>
Hi all, I'm setting up a travel, photoblog for my trip around the world next semester (I'm a junior in college), and am having trouble getting the captions to match up on vertical images. Examples by clicking "more photos" on oliverwolfe dot net. I'm using the Wordpress CSS Theme Zack 990 Currently, the captions always set to 990 pixel-width, which fits perfectly with the theme and horizontals. For verticals, I want to know if there is a conditional statement I can add to the CSS so that, if I add a vertical image, the caption will change to 680 width. Thanks! I wish to place a small image with a caption by its side in the middle of a div. What would be the better approach, (i)to put the two in a div and use absolute positioning or (ii)to use margins to position the two. Either way seems to work but I am looking for an approach that would be considered correct by a professional web developer. All help would be greatly appreciated. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body
{ text-align: center;
min-width: 1044px;
margin: 0px;
padding: 0px;
font-family: arial;
}
#wrapper
{ position: relative;
text-align: left;
width: 1044px;
height: 100%;
margin: 0px auto;
}
#top-header-block
{ width: 1010px;
height: 170px;
background-color: cyan;
}
#top-header-block img
{ height: auto;
width: auto;
}
#logo
{ float: left;
}
/*------------------------------------------*/
#inner-div
{ height: auto;
width: auto;
position: absolute;
left: 567px;
top: 41px;
}
#inner-div img
{ float: left;
}
#inner-div p
{ float: left;
margin-top: 3px;
margin-left: 5px;
color: #0d2474;
font-family: arial,sans-serif;
font-size: 11px;
font-weight: bold;
}
/*------------Alternative to above-------------*/
#img-B
{ float: left;
margin-left: 315px;
margin-top: 40px;
}
#top-header-block p
{ float: left;
margin-top: 43px;
margin-left: 5px;
color: #0d2474;
font-family: arial,sans-serif;
font-size: 11px;
font-weight: bold;
}
/*------------------------------------------*/
</style>
</head>
<body>
<div id="wrapper">
<div id="top-header-block">
<a href="#">
<img id="logo" src=""
alt="" width="248" height="65"/></a>
<div id="inner-div">
<a href="#">
<img src=""
alt="" width="66" height="20" /></a>
<p>: 0 items</p>
</div>
<!-------------Alternative to above-------------------------------->
<a href="#">
<img id="img-B" src=""
alt="" width="66" height="20" /></a>
<p>: 0 items</p>
<!----------------------------------------------------------------------->
</div>
</div>
</body>
</html>
Help, I'm trying to combine two effects I came across. The code works well but I have a problem when the image changes width. The caption box doesn't size accordingly. I tried multiple iterations for the transbox width without success. Any help would be greatly appreciated. Here is the code source: Dropshadow Image Caption Code: <html>
<style type="text/css">
div.image_wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
display: block;
margin: -5px 5px 5px -5px;
padding: 4px;
position: relative;
}
div.image_wrapper {
background: url('_images/shadow.gif') no-repeat bottom right;
clear: right;
float: left;
margin: 0 0 0 25px;
padding: 0;
position: relative;
}
.transbox {
margin: 0;
padding: 0px;
background-color: #000;
opacity:0.6;
filter:alpha(opacity=60);
position: absolute;
top: 0;
right: 11px;
width: 95%; /*PROBLEM RIGHT HERE*/
height: 5em;
}
.image_wrapper p {
margin: 0;
padding: 10px;
color: #FFF;
position: absolute;
top: 0;
right: 5px;
font-size: 36px;
font-weight: bold;
font-family:Georgia, "Times New Roman", Times, serif;
text-shadow: 3px 3px 3px #000;
}
</style>
<body>
<div class="image_wrapper"><img src="_images/_main/HomePageGraphic.png" width="475" height="400" border="0" /><div class="transbox"></div><p>HOME</p></div>
</body>
</html>
See the current solution here ... What I would like to do is dump the table, so that the images and captions wrap at screen width. I have been experimenting with CSS and <span>s but as yet haven't managed a similar formating. And ideas/solutions/pointers would be greatly appreciated Chris Jones URL How's it going, If you look at this page, you'll notice that the text doesn't wrap around the image, but instead breaks after the caption just below the image: http://www.trophyfishingcharters.com/test/ Ideally, I want the text to wrap around the picture, with the caption remaining just below the photo. How can I pull this off? Thank you. I have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left. Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right. Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this. html code Code: <div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div> css tags: Code:
.wide_column_header {
float:left;
width:558px;
margin:0 0 0 5px;
background-image:url(../images/wide_header.jpg);
height:21px;
font-size:100%;
font-weight:900;
line-height:100%;
vertical-align:bottom;
color:#fff;}
.headerbartext {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-left:15px;
line-height: 140%;}
.headerbartextright {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-right:15px;
line-height: 140%;}
hello, I've a question about css for texboxes. I've created a file named textbox.css with these values textbox { border-style: solid; border-color: #000000; border-width: 1px; background-color: white; ; } This file have been imported in form.php file. There are about 20 textboxes in these file. Is there anyway i can declare the textbox.css there and change the display of all the textboxes in the form without the need to type class=textbox on every textbox. My css for links works fine for every link on a page just my importing the links.css file. thanks in advance how can i create a halo shadow around the textbox on focus? an example can be seen at http://www.macromedia.com when you click on the search box, it changes its style. thanks for the help in advance. i have the following to change the background but not the outlines <input type="text" name="textfield" onblur="toggleColor(this)" onfocus="toggleColor(this)" class="normal"> function toggleColor(objElement) { if (objElement.className=='normal') objElement.className='focus'; else objElement.className='normal'; } .normal { background-color: #cccccc; color: #000000; } Hi Friends How to create the curve text box , any great idea Hi, I cant seem to find anything to do with TextBox height using CSS. I want to make it shorter and smaller. What code Do i use? Thanks. I have a pretty simple question. I was wondering if someone could point me in the right direction. Im trying to locate a resource which could illustrate how to add some CSS elements to TexBox, RadioButtons and other basic controls. For example, on this page: http://www.sparkpeople.com/myspark/register.asp The backround of the TextBox controls and RadioButtons are the same color as the rest of the page. I would appreciate anyone's help. Thanks in Advance. I styled a textbox in the newsletter section, it appears fine at Firefox but not at ie. There is a default value set for the textbox, it should appear right next to the arrow I styled textbox with but instead, it appears on it. You can view it he http://www.refinethetaste.com/html/default.asp?Section=product&PRODUCTID=10 css. Quote: input.quantity { float:left; border:1px solid #000000; width:50px; background:url(../images/isaret_3.gif) 4% 50% no-repeat #FFFFFF; text-indent:15px; } Quote: <td> <input class="quantity" type="text" id="PRODUCTQUAN" value="1" onKeyup='if(this.value==0){this.value=1; this.select();}' onclick="this.select();" /> </td> Hi, I am using this class for .textbox, input.text_class, select.select_class{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; background-image: url(./textbox_shadow.gif); height: 18px; width: 160px; margin: 0px; padding: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #BFBFBF; border-right-color: #E2E2E2; border-bottom-color: #EEEEEE; border-left-color: #C8C8C8; } for text box , how can I made tghe text box invisible or hidden style.display = "none"; Hi, I have 5 input textbox in my page. I want to change the background color of one input textbox to red. How to change the color of the input box to red? Thank you Hey all, I have a position div with a background image that sits just above and to the right of a text box. The image appears higher because I want it to overlap the text box. Most of the area that overlaps the text box is transparent. My problem is the transparent area makes it so you have to click the on the left side of the text box to place the cursor inside. Is their any way to make it so the transparent areas I can click inside the text box while leaving the image appearing over the text box? Thanks is there a way to set background color of a text box to transparent? I expected this to be working: 'background-color:transparent; I've searched and searched with no luck. Does anyone know if it is possible to set a style that would set all my disabled textboxs to a grey bg color, back to white on enabling. I know I can perform it through javascript. I'm just trying to do as much with styles as possible here. If someone could point me in the right direction I'd appreciate it. I only need it to work in IE6. Thanks How would I make a textbox flat with css? so that there is 1 solid black line around it? |
|||||||