|
CSS - Vertically Aligning An Input And An Img Element
At http://www.rietgors.tudelft.nl/combo/ you can see what I'm trying to do. I'd like the two elements to have either the same top or bottom, or have both elements centered vertically in the enclosing DIV. Can this be done using just CSS?
Similar TutorialsI started out working out a page thinking this *should* do what I want and lo and behold it did work in IE6 http://www.fogcat.co.uk/example/test002.html But when looking at Firefox it goes all odd. If you remove all the internal "imagediv" div from the "imagechunk" div it nearly works but doesn't algin the "link text" like IE. I'm told that display:inline-block is not properly supported, which is probably the root of my problems. What I want a set of divs down the page (the "imagedivs") Each div will contain An image - but that image will be nested inside a div - it's returned that way from a php function. Images may be of varying height so I can't use pixel values at top margins or anything like that. A link to another page The link should be positioned to the right of the image and aligned vertically with the centre of the image. This is one of those things that's a doddle with tables, but I'm trying to train myself to think CSS. What obvious thing am I over looking? Code: +--------------------------------------+ | +----------------+ | | | .............. | | --- <div> | | : : | | ... <img> | | : : | Link here | | | : : | | | | .............. | | | +----------------+ | +--------------------------------------+ +--------------------------------------+ | +----------------+ | | | .............. | | | | : : | | | | : : | Link here | | | : : | | | | .............. | | | +----------------+ | +--------------------------------------+ So I'm still on my quest to be able to create my 1st entirely CSS site, and need some help as I'm not sure how to do this. I want to be able to align a navigation list at the bottom right of the content area. Also while I'm at it, I want the site to be at a minimum 462px (just an example), but would like for it to increase in height if the content itself expands beyond the 462. And the navigation menu, I'd like to somehow keep at the bottom right of the viewable area. Thanks... here's the code... HTML Code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> </head> <body> <div class="outer"> <div class="logo"> <img src="images/logo.gif" /> </div> <div class="spacer"> </div> <div class="nav"> <a href="#">Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a><br /> <a href="#">Link 4</a><br /> <a href="#">Link 5</a><br /> <a href="#">Link 6</a> </div> <div class="content"> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p> </div> </div> </body> </html> CSS Code: Code:
body {padding:0px;
margin:0px;
}
div.outer {background-image:url('images/bg2.jpg');
background-repeat:no-repeat;
width:770px;
height:462px;
}
div.logo {text-align:right;
padding:10px;
height:75px;
}
div.spacer {float:left;
width:200px;}
div.nav {float:right;
text-align:right;
padding:20px;
}
div.content {background-image:url('images/bg3.jpg');
width:400px;
padding:20px;
}
.nav a{text-decoration:none;
color:black;
font-size:20px;
font-family:"sans serif", verdana, arial;
}
.nav a:hover{text-decoration:underline;
}
Hi, Just upgraded my monitor and am now operating on a 1280*1024 resolution. Previous website I have built have been for 1024*768 resolutions. Problem is now that some of my images are placed at the top of the screen when I want them in the middle... not with a load of blank space beneath them. I want the blank space equally around them. Anyway, I'm specifically talking about the website I have: http://www.atari-music.co.uk The front and home-pages suffer from this problem when viewed on > 1024*768 resolutions. I have attempted to fix the problem (though it is not in the code for the on-line version) by putting this into the style sheet:- IMG.middle { vertical-align: middle; } In the HTML for the image map I have:- <IMG class="middle" src="images/home.jpg" height="570" width="760" alt="ATARI - The Official Website" border="0" usemap="#siteMap"/> Am I not referencing the CSS code correctly? The image is still sitting, vertically aligned to the top. Cheers, Rob. I have a navigation bar that contains four images (side by side) as well as three text links. They all live within a <div> with the following properties: #gNav { width:768px; height:19px; text-align:left; vertical-align:middle; } i need for the three text links to line up directly in the middle (vertically) of that <div>. To achieve this in IE6 and NN+, I attach the following style to the text. .nookum { font-size:.9em; vertical-align: 25%; color:#FFFFFF; } I just learned that the vertical-align property is not recognized by IE5 and IE5.5, so in those versions, the text aligns at the bottom of the <div>. Anyone know of any workarounds or other methods of vertically aligning text that will work in these two versions of IE? Hi guys, I am trying to display two forms with several elements on a page. I would like to place the two forms on the webpage so that one is displayed on the left and the other on the right of the screen. Something like this URL http://craigbaldwin.com/blog/wp-content/uploads/2008/12/52.jpg I have written the following test and the forms are placed correctly inside the left and right divs. Code:
<HTML>
<Head>
<style type="text/css">
div.wrapper {
position: relative;
clear: both;
width: 100%;
border : 1px solid #000000;
}
div.left {
float: left;
width: 50%;
background: #ffffff;
border : 1px solid #000006;
}
div.right {
float: right;
width: 50%;
background: #ffffff;
border : 1px solid #000001;
}
</style>
</Head>
<Body>
<div class="wrapper">Wrapper
<div class="left">Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box </div>
<div class="right">Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box </div>
</div>
</Body>
</HTML>
A couple of problems with the above. 1. In Internet explorer the divs are aligned correctly but in firefox it gets all messy. 2. As long as the window is maximised then i the divs are aligned vertically correctly. If i resize the browser window then they are no longer aligned vertically. Is there a way to make them always next to each other from left to right even if the window is resized? (try resizing the window for the example i showed above) Thanks I'm wworking on a CSS template and I'm trying to vertically align two divs.... one on top of the other with a five pixel margin between the two.... However, unless I use a bunch of HTML breaks (which will result in an uneven template), I can't figure out how to do it. I've tried to vertical-align them and etc. Any help is appreciated. Oh, I know my code could be a bit more clean, this is just a comp. I've also tested this on FF so far. I doubt IE will return favourable results either. My example: www.efacln.com/Untitled-1.html My CSS code: Code:
#container
{
MARGIN: 5px;
}
#header_container
{
border-color: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
BORDER-LEFT: none;
BORDER-RIGHT: none;
WIDTH: 100%;
}
#header_content
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
BORDER-TOP: none;
BORDER-BOTTOM: none;
WIDTH: 600px;
HEIGHT: 100px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
}
#kirk_news
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
WIDTH: 550px;
HEIGHT: 100px;
FLOAT: left;
POSITION: absolute;
MARGIN-TOP: 5px;
MARGIN-RIGHT: 2.5px;
}
#navigationblock
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: THIN;
WIDTH: 410px;
POSITION: relative;
FLOAT: RIGHt;
MARGIN-TOP: 5px;
MARGIN-LEFT: 2.5px;
}
#scott_news
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
width: 410PX;
MARGIN-TOP: 1 px;
MARGIN-TOP: 5px;
}
</STYLE>
I have #sidebar on my website and within the sidebar which contains two smaller divs (Calender and Archive) inside it which are styled by #sidebar div When I put these two divs in, Calender wasn't where I wanted it to be, at the very top of the sidebar. It was a few pixels lower. To fix I went to #sidebar div and changed the top margin to -1px and now it's at the very top. Is this a sensible fix? I've checked in Chrome 2.0, Safari 4.0, Firefox 3.5 and IE 8 and it looks to be OK but there's a nagging feeling in my head that I shouldn't have needed to do this. Here is the HTML: 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=utf-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
<div id="content">jkjk</div>
<div id="sidebar">
<div id="calender"><h3>Calender</h3>
<p>fjkfjdklfjkljfsk</p></div>
<div id="active"><h3>Archive</h3>
<p>fjdkfjkfjk</p></div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
And here is the main.css: Code: @charset "utf-8";
/* Main style */
body { padding: 0; margin: 0; background-color: #000; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
.wrapper {
text-align: left;
margin: 0 auto;
width: 750px;
}
/* Header */
#header {
background-color: #996666;
margin-top: 35px;
margin-bottom: 5px;
height: 90px;
padding: 0;
border: solid 1px #F00;
}
/* Nav Bar */
div#navcontainer {
background-color: #996666;
border: 1px solid #F00;
margin-bottom: 5px;
}
div#navcontainer ul {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}
div#navcontainer ul li {
display: inline;
margin-left: -4px;
}
div#navcontainer ul li a
{
padding: 5px 10px 5px 10px;
color: #000;
text-decoration: none;
}
div#navcontainer ul li a:hover
{
color: #FFF;
}
#active a {
}
/* Main Content */
#content {
background-color: #996666;
float: right;
width: 500px;
border: 1px solid #F00;
margin-bottom: 5px;
}
/* Sidebar Styles */
#sidebar {
background-color: #996666;
float: left;
width: 243px;
border: 1px solid #F00;
}
/* The Divs that house Calender and Archive */
#sidebar div {
background-color: #800040;
}
/* The 'Calender' and 'Archive' text */
#sidebar div h3 {
background-color: #FF0;
font-size: 85%;
text-align: center;
text-decoration: underline;
margin-top: -1px; /* Remove this line and the calender 'box' should drop a few pixels from the top */
}
/* Footer */
#footer {
background-color: #996666;
border: 1px solid #f00;
clear: both;
padding: 0;
margin: 0;
}
If someone could take a look that would be great. I've commented it up for you so you should be able to find the divs easily. The code has been verified. I'm not a great web designer by any stretch of the imagination. I'm learning as I go along so hopefully someone with more knowledge can help me out. I need the text "world leaders in spirometry" to be on the same base line as the text in the logo image for Vitalograph to the left of it. This is what I want it to look like image link This is what does look like web page link Here is the CSS css link How can I get abosolute vertical placement of the text best for firefox and IE? I know I could put the tage into the logo as one image, but for SEO I would like to have the text there if possible. Thanks! Is there any way to align an element vertically? I have, for instance, some <a>'s in some <td>'s which are styled thusly: css Code: Original - css Code td a { display: block; width: 100%; height: 100%; }
so that they fill the entire <td>. The problem is that if the table row expands due to word wrap, the links stick to the tops of the cells instead of centering vertically as is the default behavior of inline elements in a table. I've tried padding: auto; on the links, that didn't do anything. How can I fix this? Hi Guys, I'm trying to align some text along an image. The problem is, I want two lines of text to the right of the image, aligned to the top. If I put a <BR> tag between the two lines, the second line gets placed below the image. Here's what I have so far. img.top {vertical-align:text-top;} <a href="http://company.com/graphics/thumb.jpg"> <img class="top" src="http://company.com/graphics/thumb.jpg"> </a> <a href="company.com">sample text</a> <a href="company.com">second line</a> Any ideas? I've tried like every switch for the vertical-align property... Hi, I am trying to achieve a layout which uses unordered lists. Within the LI, there is an image and some text. The images are all different heights though. The issue i'm having at the moment is how can I make the text vertically align within the LI? Keep in mind that I can't put a height on as each image changes height. And these lists will be generated dynamically probably - so I don't really want to specify individual heights for each one... To make it even more difficult, the text may end up spanning onto two lines at some stage if i have to enter a larger description - so that also needs to be kept in mind. I've been looking around all morning for examples of how to do this and I can't find anything - so any help would be greatly appreciated!!! Here is what I'm trying to achieve: http://www.joshsphotos.com/user_interface/final_look.gif Here is the HTML at present: http://www.joshsphotos.com/user_interface/ And the CSS: http://www.joshsphotos.com/user_interface/css/style.css Thanks! I have a website test2(dot)gigajobs(dot)com(dot)au And have a section where user can Jobseekers can login But I can't seem to format the Username and password , register as a jobs seeker and forgot password labels so it is aligned to margin-left:12px; I've tried everything I can think of and am tearinhg my hair out. css td.publish-label{width:200px; } td.publish-label a { color: ##2E8EE8; text-decoration: underline; } td.publish-label a:hover { color: #68AAE7; text-decoration: underline; } html <h2 class="widgettitle">{$translations.applicant_admin.login}</h2> <table border="0" cellspacing="2" cellpadding="2"> <tr> <td class="publish-label"> <a href="{$BASE_URL}applicant/register/">{$translations.applicant_admin.register_account}</a> </td> <br> </tr> <tr> <td class="publish-label">{$translations.applicant_admin.email_address}:<br /> <input {if $errors.username}class="error" {/if} tabindex="1" type="text" name="username" id="username" size="32" value="{$smarty.post.username}" /> <span class="validation-error">{if $errors.username}<img src="{$BASE_URL}img/icon-delete.png" alt="" />{/if}</span> </td> </tr> <tr> <td class="publish-label">{$translations.applicant_admin.password}:<br /> <input {if $errors.password}class="error" {/if} tabindex="2" type="password" name="password" id="password" size="32" value="" /> <span class="validation-error">{if $errors.password}<img src="{$BASE_URL}img/icon-delete.png" alt="" />{/if}</span> </td> </tr> <tr> <td class="publish-label"><a href="{$BASE_URL}applicant/forgot/">{$translations.applicant_admin.forgot_password}</a></td> </tr> <tr> I've managed this before, but I can't for the love of Jesus and a trumpet remember how I did it. Basically, I want to be able to add padding to whatever I've got within the <code> element. For example, I might have ; Code: <code> This is text that I want to put padding around, but currently, only the top line is having the padding applied. </code> But the padding (or a border) only applies itself to the top line. If this makes sense, help moi please EDIT Voila, I fixed it as soon as I posted this! Code:
code
{
display: block;
padding: 20px;
}
Hello, Let's say this... I have an element that has a height of 600px. I have an element inside of that element that I want aligned to the very bottom. How could I accomplish this feat? Hi guys, I just wanted to say that I think devshed is a kick butt place for getting help with all sorts of CSS problems... always seems whenever I post that someone really helpful ends up helping me solve the problem in a way I hadn't thought of... So here's the issue: I need to put two elements into a div, one aligned on the left side and one aligned on the right Now what I'm looking at is the section where I have the Home text and the Quick News. So I've put the design into XHTML and CSS he But I can't seem to get the news line to move over properly. Any suggestions? I have used float:right but it just doesn't seem to work. I tried putting a div in and align=right but that pushes the element onto the next line which I don't want. Any ideas guys? There simply has got to be an easy way to align text within a div that I'm missing somehow. Thanks! Hi, I am using linked-in stylesheets for my webpage and have an unordered list, which is inside a div, for the phone number and email address (which is an email link) which are in the top right corner of the page. The whole page is in a container div. I am trying to 'text-align' these two <li> elements to the right, the phone number does this but the email link just won't move to the right and is staying on the left! I have put the 'text-align: right' attribute for the 'ul' and the 'li' and the 'a' but to no avail. The weird thing is, I also have an undordered list for my navigation which is also on the same page, running horizontal on the left side of the page, but these seem to work fine for the alignment (each link is centered nicely in their boxes). Why won't the email link align right?! My stylesheet code: #garden-designer-contactbar ul { display: block; position:absolute; text-align: right; font-size: 20px; font-family: verdana, arial, helvetica, sans-serif; color: #666666; left:541px; top:0px; width:179px; height:51px; margin: 0; padding: 0; list-style-type: none; z-index:6; } #garden-designer-contactbar li { display: block; text-align: right; } #garden-designer-contactbar a { display: block; position:absolute; text-align: right; font-size: 12px; font-family: verdana, arial, helvetica, sans-serif; color: #666666; font-weight: normal; } My page code: <div id="garden-designer-contactbar"> <ul> <li>020 0000 000</li> <li><a href="mailto:email@email.co.uk?subject=Garden Design" title="email Garden Design" align="right">email@email.co.uk</a></li> </ul> </div> Does anyone know what might be going on? My container div for the whole page is set to 'text-align: left' but I tried removing that attribute and it just made other text on the page that wasn't specifically aligned, centre. And the email link seemed to stay where it was. Any help much appreciated! I'm trying to align a div right after an input text field. div has a background image I want to display, but no text. div is going on the next line after input. how can I keep it to the left of the input text field? Thanks I seem to recall that CSS1 or 2 had a property that could be set to specify the height of a text input box or check box or radio button, but it's been a while since I've done it and I can't find it in my notes or find the search terms that will turn up what I'm looking for, or even the page that I did it on. I thought
Code: <input type="text" style="{ height: Xpx; }">
would do it, but it doesn't. Here's some of my code ... xhtml Code: Original - xhtml Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1"></meta> <meta http-equiv="Content-Language" content="en-US"></meta> <style type="text/css"> body { margin: 0px; padding: 0px; font: normal normal normal 12px/14px Veranda,Arial,sans-serif } div { } table { width: 100%; border: none } tr { } td { } .right { text-align: right } ul { margin: 0px; padding: 0px; list-style: none } li { padding-left: 25px } label { } input { font: normal normal normal 9px/11px Arial, Veranda, sans-serif; } .textrightinput { text-align: right; height: 18px } .textleftinput { text-align: left; height: 18px } .buttoninput { height: 18px } </style> <title>Donations</title> </head> <body> <!-- Begin Body Table --> <div> <form id="form" action="https://my.domain.com/donate/" method="post"> <fieldset> <legend>Select the project(s) you wish to support.</legend> <input type="hidden" name="cc" value="checkEntries" /> <table> <tr> <td> <ul> <li><label><input type="checkbox" name="projects[]" value="Doin-it-Myself Hydropower Project" checked="checked" />Doin-it-Myself Hydropower Project</label></li> <li><label><input type="checkbox" name="projects[]" value="Joe Cell Development Project" checked="checked" />Joe Cell Development Project</label></li> <li><label><input type="checkbox" name="projects[]" value="Site Maintenance/Upkeep" checked="checked" />Site Maintenance/Upkeep</label></li> <li><label><input type="checkbox" name="projects[]" value="extra" onclick="javascript:enable('form','other')" /> Other: <input id="text" class="textleftinput" type="text" name="projects[]" value="blah blah" disabled="disabled" /></label></li> <li class="center"><label> Amount: $<input id="text" class="textrightinput" type="text" name="amount" value="25" title="Enter the dollar value you intend to donate." /></label></li> </ul> </td> </tr> <tr> <td class="right" colspan="2"> <input class="buttoninput" type="submit" value="Next⇒" title="Click to verify that we correctly received your entries." /> </td> </tr> </table> </fieldset> </form> </div> <!-- End Body Table --> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1"></meta>
<meta http-equiv="Content-Language" content="en-US"></meta>
<style type="text/css">
body { margin: 0px; padding: 0px; font: normal normal normal 12px/14px Veranda,Arial,sans-serif }
div { }
table { width: 100%; border: none }
tr { }
td { }
.right { text-align: right }
ul { margin: 0px; padding: 0px; list-style: none }
li { padding-left: 25px }
label { }
input { font: normal normal normal 9px/11px Arial, Veranda, sans-serif; }
.textrightinput { text-align: right; height: 18px }
.textleftinput { text-align: left; height: 18px }
.buttoninput { height: 18px }
</style>
<title>Donations</title>
</head>
<body>
<!-- Begin Body Table -->
<div>
<form id="form" action="https://my.domain.com/donate/" method="post">
<fieldset>
<legend>Select the project(s) you wish to support.</legend>
<input type="hidden" name="cc" value="checkEntries" />
<table>
<tr>
<td>
<ul>
<li><label><input type="checkbox" name="projects[]" value="Doin-it-Myself Hydropower Project" checked="checked" />Doin-it-Myself Hydropower Project</label></li>
<li><label><input type="checkbox" name="projects[]" value="Joe Cell Development Project" checked="checked" />Joe Cell Development Project</label></li>
<li><label><input type="checkbox" name="projects[]" value="Site Maintenance/Upkeep" checked="checked" />Site Maintenance/Upkeep</label></li>
<li><label><input type="checkbox" name="projects[]" value="extra" onclick="javascript:enable('form','other')" />
Other: <input id="text" class="textleftinput" type="text" name="projects[]" value="blah blah" disabled="disabled" /></label></li>
<li class="center"><label>
Amount: $<input id="text" class="textrightinput" type="text" name="amount" value="25" title="Enter the dollar value you intend to donate." /></label></li>
</ul>
</td>
</tr>
<tr>
<td class="right" colspan="2">
<input class="buttoninput" type="submit" value="Next⇒" title="Click to verify that we correctly received your entries." />
</td>
</tr>
</table>
</fieldset>
</form>
</div>
<!-- End Body Table -->
</body>
</html>
Can you see what I'm doing wrong? screenshot.bmp For some reason, I cannot get my 2 form elements to line up as far as height is concerened. No matter what I try, one is always slightly taller than the other, even if I set both to the same height. Any ideas? Code: input[type="text"], select {
color:#888888;
font-size:10px;
height:auto;
}
|
|||||||