|
CSS - Help Aligning Text At Right Place Vertically Next To An Image.
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! Similar TutorialsHi 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 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, 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. Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? I am designing this page: theticketsguide.com/sample Scroll down to where the text reads, "Easy Navigation." I have (more or less) managed to vertically align this text with the image next to it, but I used padding instead of a cleaner, more exact "vertical-align" function. I've tried to put vertical-align:middle for the text, but it doesn't do anything. Any help as to what the right solution is to this? I don't want to use padding. Thanks, Brandon Using CSS, is it possible to vertically align centrally text to an image as you can using tables? A simple example using a table would be <table border="0" width="100%"> <tr> <td><img border="0" src="image.gif" width="609"height="115"></td> <td valign="middle">Ray did this</td> </tr> </table> Using CSS so far I've got... <p><img class="imglft" border="0" src="img.jpg" width="434" height="400" alt="my image">Ray did this> The CSS for imglft is... .imglft{ float: left; margin-right: 30px; } I've tried putting the whole lot in a DIV and using text-align: middle and vertical-align: middle but that doesn't work. You can see what I mean by comparing http://brisray.com/grad.htm or http://members.lycos.co.uk/brisray/grad.htm with http://brisray.com/ray/rgrad.htm or http://members.lycos.co.uk/brisray/ray/rgrad.htm Ray I 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 | | | : : | | | | .............. | | | +----------------+ | +--------------------------------------+ 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 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;
}
I'm trying to figure out how to align the text with the text so that it text starts up and to the top right of the image. And I"m talking about the top middle div. http://kansasoutlawwrestling.com/v3/index.html I have a line item where I'm pulling in text and an image from a dB. I would like the text to align at the top and not sure how to do it. Code: <li>Song name <img src="beatles.jpg"> Artist Test page: Played songs I have tried margins but then the image moves and the text is always aligned at the bottom of the image. Thanks for your help! Hi all, I have a pesky little problem that I can not seem to figure out on my own. I have a set up like this PHP Code: <span class='navitem'><a href='index.php'> <img src='myimage.gif'>Go Home</a></span> My Css Code is PHP Code: #leftnavcontent .navitem { border-bottom:1px dotted #DADADA; font-size:12px; font-weight:normal; line-height:16px; } #leftnavcontent .navitem img { margin-right:5px; border:none; } My problem is that the image is not aligning with the text. As in there is just a slight maybe 1 or 2 pixel border bottom from the image that makes it dip just above the navitem box which makes it look a little funky. Any ideas? I currently have been trying to align an h1 tag over top of a css background image. I have tried a whole bunch of things but have returned the code back to its most basic form My external css div looks as follows: #content_funny{ width: 315px; height: 51px; background-image:url(images/funnyvideos1.gif); background-repeat:no-repeat; float:left; clear:left; margin:0px 0px 0px 0; display:inline; } My index file is as follows <div id="content_header"><div id="content_funny"><a href="http://www.tokenhumor.com/categories/7/funny_videos.html"><h1>Funny Videos</h1></a></div> For some reason the text in its natural state is laying differently for IE and FF, preventing me from using any positioning lines within my external style sheet. Any help with this is much appreciated, I m pulling my hair out I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09 I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move. Here is one of the examples: Code:
#homepage-bar h2.construction {
position:fixed;
top:225px;
left:505px;
}
I tried changing to position: absolute; I also tried to use percentages on the left: I know this is easy, but I can't find the fix after googling for 30 minutes. Help! 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? 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>
Hi, I need some help for aligning text inside a css box. let me first say, that i am using a wysiwyg editor and i am aware of this being a red flag for some folks .... to make my problem better understandable, please see following picture - this is how i want it to be: the area of interest is a 3 column box (left and right are fixed widths, middle column is variable), the middle box (highlighted in blue) is the box, which has a background picture ('Melanie Wanders') on the top/left .... then it has some text (one looong line) and also a picture to the right (alignment: right). what i wanted is, that when the user resizes the window, that the text is able to wrap around the image on the top right - and it does exactly that (you can also view the online version here) well, what happens is this: my problem: when i try to use the 'p' tags to enter a paragraph, it messes up the appearance in FF (completely) and it still shows the text right on the top, above the background image. I also tried to align the text line to the bottom of the box, but it wouldn't do so. i did also try to have the image ('Melanie Wanders') as an actual image aligned Top/Left, but it wouldn't wanna work for me with the other image next to it. i might get it to work, if this is my only option .... finally, here the code used (you will also find the code online, if you follow the above link) Code:
.inner_middle_content_row { width: 100%; height:300px ; }
.inner_middle_content_row_left { background-image: url(images/inner_table/left.png); background-repeat: repeat-y; background-position: right 0; width:125px; height:300px; float:left; }
.inner_middle_content_row_right { background-image: url(images/inner_table/right.png); background-repeat: repeat-y; width:20px; height:300px; float:right; }
.inner_middle_content_row_middle { background-color: white; background-image: url(images/about_us/melanie_title.jpg); background-repeat: no-repeat; background-position: left top; width:auto; height:300px; margin-left:125px; margin-right:20px; }
Code: <div class="inner_middle_content_row"> <!--agl:cssobject id="inner_middle_content_row" type="Column Middle Scale" /--> <div class="inner_middle_content_row_left"> <p class="submenu_brown">Melanie Wanders</p> <p><a class="submenu_gray" href="wilhelm%20wanders.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Wilhelm Wanders</a></p> <p><a class="submenu_gray" href="philosophie.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Philosophie</a></p> <p><a class="submenu_gray" href="history.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">History</a></p> </div> <div class="inner_middle_content_row_right"></div> <div class="inner_middle_content_row_middle"> <img src="images/about_us/melanie_portrait.jpg" alt="" width="160" height="180" align="right" border="0" />Chef Melanie Wanders received her Culinary Arts and Management degree .... their own hand-made chocolate company - Wanders Artisan Chocolaterie.</div> it would be great to find a solution to this - the easy way out would be to just skip the background image and have the text start right on top left .... but i like the idea of having a nice title like this - please tell me your opinion though another thing i realize is, that the whole alignment is off in IE ... this is an issue i think i have read before and it has to do with this 3px or 5px off thing in IE right? i think i will look into this some other time. Thanx for reading this - please bare with me, as my mother-language is not english and i might have expressed myself not clearly |
|||||||