Hi,
I am new to CSS.
I want to have an image (170x250) centered and have some text to the
right of it, starting from top of the image.
I have:
..info
{
position: absolute;
top:100px;
left:200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #000000;
word-spacing: normal;
line-height: 10pt;
padding:10
}
..info img {
position:absolu te;
top:0;
left:0;
width:170px;
align:center;
padding:10;
float:left;
}
and in html:
<div class="info">
<p><img ...> blah blah blah
</div>
But the text starts from the bottom of the image.
Where am I goofing up? 7 13824 as*******@hotma il.com wrote: Hi, I am new to CSS. I want to have an image (170x250) centered and have some text to the right of it, starting from top of the image. I have:
.info { position: absolute; top:100px; left:200px; font-family: Arial, Helvetica, sans-serif; font-size: 100%; color: #000000; word-spacing: normal; line-height: 10pt; padding:10 } .info img { position:absolu te; top:0; left:0; width:170px; align:center; padding:10; float:left; }
and in html: <div class="info"> <p><img ...> blah blah blah </div>
But the text starts from the bottom of the image.
Where am I goofing up?
The position absolute in the img style means it will ignore the .info
container.
All you really need is
..info img {float:left;}
<div class="info">
<img ...> blah blah blah
</div>
Thank you meltdown.
if I want to center both the image and the text next to the image and
assign some charactersitics to the blah blah text, do I do:
..info {
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #000000;
word-spacing: normal;
line-height: 20pt;
font-weight: 700;
text-align:center;
padding:10
}
..info img {
float:left;
}
This seems to not show part of the image, but when I click on it, it
shows the whole image! Or, whe I keep adding new lines of "blah blah"
the image keeps showing more of the hidden part. as*******@hotma il.com wrote: I want to have an image (170x250) centered and have some text to the right of it, starting from top of the image. I have:
.info { position: absolute; top:100px; left:200px; font-family: Arial, Helvetica, sans-serif; font-size: 100%; line-height: 10pt;
Really bad idea. 100% is good but 100% might be 6pt ot might be 26pt
depending on the user's settings, so drop the fixed line-height toa
void problems.
padding:10
10 what?
} .info img { position:absolu te; top:0; left:0; width:170px; align:center; padding:10; float:left; }
float and position: absolute; can not be used together like that. See
the CSS spec for details.
and in html: <div class="info"> <p><img ...> blah blah blah </div>
But the text starts from the bottom of the image.
Where am I goofing up?
Assuming that your container is variable width (if it's fixed width the
whole things is even easier).
..info {
position: relative;
margin-top: 100px;
}
..info p {
margin-left: 50%;
padding: 1em 1em 1em 90px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #000000;
background-color: #FFFFFF;
}
..info img {
position: absolute;
left: 50%;
top: 1em;
margin-left: -85px;
border: 1px solid red;
}
<div class="info">
<img src="" alt="" width="170" height="250" />
<p>Pellentesq ue habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Fusce lacus. Suspendisse potenti. Pellentesque
mauris ligula, faucibus sit amet, sagittis quis, pellentesque at,
magna. Vivamus justo neque, vestibulum vitae, malesuada eget, pharetra
quis, lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque at urna id lectus suscipit malesuada. Nullam est. Donec a sem.
Aenean hendrerit, augue egestas hendrerit iaculis, augue metus dictum
enim, molestie tincidunt dolor magna non quam. Cras est. Proin
facilisis lacus vitae mi.</p>
Image is centered and text appears to the right of the image, and the
tops of both text and image are aligned.
Steve as*******@hotma il.com wrote: Thank you meltdown. if I want to center both the image and the text next to the image and assign some charactersitics to the blah blah text, do I do:
.info { float:left;
You want everything in the center, why float the .info container to
the left ? font-family: Arial, Helvetica, sans-serif; font-size: 100%; color: #000000; word-spacing: normal; line-height: 20pt; font-weight: 700; text-align:center;
This make the text centered on each line, and it won't do anything to
the image, since the image is floated. padding:10 } .info img { float:left; }
This seems to not show part of the image, but when I click on it, it shows the whole image! Or, whe I keep adding new lines of "blah blah" the image keeps showing more of the hidden part.
If you want to center the content, give .info automatic margins.
Then .info will be centered. To limit info to a small area in the
center, give it a limited width:
.info {width:40%;marg in:auto}
Here is an example: http://www.reenie.org/test/test20.htm
Thanks a lot Steve.
I tried your code but:
- the image did not show at all. When I removed the "margin-left:-85px"
it showed up.
- The text shows at the bottom, with some distance between itself and
the image.
I used the sample from Spartanicus' page and it works, although the
text for some reason, starts a little lower than the top of the image
(unlike his sample page).
I sincerely appreciate your assistance and pointing my mistakes to me. as*******@hotma il.com wrote: Thanks a lot Steve. I tried your code but:
What code? Please quote the parts of the message you are replying to.
- the image did not show at all.
In which browsers? And with which doctype? I tested in IE6, FireFox
1.0.7 and Opera 8.51 with a doctype that triggers standards mode.
It doesn't work in IE5.5 (image overlaps text slightly) but that could
be corrected by feeding IE<6 slightly differnt styles via conditional
comments or any one of a number of CSS hacks.
See http://steve.pugh.net/test/test100.html for my demo.
When I removed the "margin-left:-85px" it showed up.
But then it won't be centered.
- The text shows at the bottom, with some distance between itself and the image.
If you've removed the margin from the image then there will be all
sorts of things different.
I used the sample from Spartanicus' page and it works, although the text for some reason, starts a little lower than the top of the image (unlike his sample page).
Spartanicus' solution is simpler than mine. Use it instead. Are you
using the same doctype he is? If not then doctype sniffing may explain
the vertical alignment differences.
Steve This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Kai Grossjohann |
last post by:
I would like to put a text input field (in the sense of <input
type="text">) and an image next to each other, where I know the size
in pixels of the image, and I know the total width in em. I haven't
found a way to do this.
I tried
<span style="width:20em">
<input type="text">
<img width="25px" src="...">
|
by: Chris Beall |
last post by:
I'm struggling with how to handle, on a web page, images that contain
text that the user must be able to read. Examples: tombstone photos,
photos or scans of historic documents (handwritten or typed), a map with
place names, route numbers, etc.
(An appropriate alternative for audio UAs would be provided and is not a
part of my concern).
I see two ways to handle these images:
1. Dynamic scaling, with the source image containing enough...
|
by: UJ |
last post by:
I have need to convert a text string (with formatting) to an image. This is
so that I can resize the image to different sizes and the formatting stays
exactly the same regardless of the size. I actually want the font size to
increase/decrease as the image grows/shrinks much the way text does in a
flash object. Is there an easy way to do this programmatically? It needs to
be done behind the scenes on my web site - user enters some text - I...
|
by: SeanT |
last post by:
Greetings and salutations! I am having a real issue with the VB.NET
TreeView control. I need to display an image (a.k.a. logo, picture,
etc) from a file as the treenode object. I can not seem to find a way
to do this in .NET. I have tried the DrawImageUnscaled and thought
that was the way to go, but I was wrong. If anyone has any
suggestions, please help! The code I have currently follows:
Public Sub mTreeViewLoad(ByVal m_xmld As...
|
by: Samuel R. Neff |
last post by:
I have a set of radio buttons in a win form that each have an image
and text, like so:
O
O
O
O
How can I set it up so that the image is left aligned, next to the
radio button indicator, and the text is left aligned next to the
| |
by: DarkSaturn |
last post by:
Is there a method of using the CSS float command on images to contain itself within a single paragraph?
The problem I'm running into is trying to use float images on a listing page, I have an image (say 100 pixels high) that is set to float left, the text that I'm floating around it is only 2 lines high (leaving room for additional text below). Because there is room for additional text floating right of the image my next paragraph text...
|
by: helraizer1 |
last post by:
Hi all,
I have a dynamic image that picks out data from a dynamically created .line file.
showimage.php(5)
<?php
include("linesfile.php5");
$linesDataFile = new DataFile("data.line");
|
by: Jonathan Sachs |
last post by:
I'm trying to compose a list of items, each of which consists of text
that wraps around a picture at the left margin. The examples I have
seen tell me to do it like this:
<p><img src="xxxx.jpg" align="left" width=nn height=nn>zzz zzzzz zz
zzzzz...</p>
In my case, since the wrapped text includes a headline, I assume I am
supposed to do this:
|
by: tharden3 |
last post by:
Hey Bytes,
The website I'm working on is coming along just fine, and I'd like to thank all of you PHP folks who have been helping me out. I'm almost done with the coding!
I'm trying to get the data-basing code finished with. I've got my products, with lines of text next to it that serve as descriptions. With each of those entries, I have images. I've implemented the code for displaying the text, and I've also implemented the code for the...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
| |
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |