Image dimensions in CSS or HTML; or a Bit of Both?

I'm asking this because I have a site with several pages with small images illustrating text either floated left or right. I want each image to be the same width but not the same height. I want to use the same CSS or as much as I can, on each left or each right image.
Usually, I try not to declare the width in the HTML but put it in the CSS. Is there much difference?
One compromise would be to declare the width in the CSS and the height in the HTML. That seems OK to me but I just want to check if there's a right way to achieve what I'm after.
Thanks
Martin

martcol wrote:
Hello PZ
I guess the question isn't should I put the height/width in but what's the most economic option in my situation.
Say I have 4 small images on my page. Two float left and two float right. All the images have the same width but different height.
The left images are in a <div class="leftimage"> and the right in their own <divs> so I can have one rule for left or right with the float but I will need different rules to cover the image height.
So do I can take the image width out of the HTML and cover that in my CSS. I'd always presumed that the best way to go was to keep your HTML as light as possible. If I only cover the width of the image in those two rules, I either:
     1) write a rule for each image to cover the unique height and put an id on each image in the HTML
     2) put all height/width declarations back in the HTML
     3) put the width in the CSS and the height in the HTML
Or go have a glass of red wine!
Martin
humm...... for me I'd always put the width and height in the html. I think you can become a little obsessive when trying to keep the html as light as possible. Also if I need to change the width/height of the image at anytime its easier in the html than to go looking for it in the css rules.

Similar Messages

Spry dataset problem. Image dimensions with css

Hey guys.
I'm new to spry, and not an experienced web designer with beginner knowledge in programming.
I am using a spry data set to make a blog kind of interface. I'm using a master/detail layout from the Dreamweaver presets. I am using html, not xhtml and dreamweaver cs4.
I want to change the dimensions of the images in the detail container. I would like to use the max-width command. I have tried using an id tag on the image detail column and using the width command on it with little luck.
How can I do this. Using css is a must, because I'll be using InContext Editing so other users can upload images and posts. So they won't have to worry about the dimensions.
Thanks alot.
Helgi

I forgot to mention one other problem
The layout that I sketched up is the one I am going for. So a tip on how to get the text and the headings to flow around the image like shown in the picture would be greatly appreciated. Is it recommended to use tables inside div tags or spry for that matter?
Thanks a million.

CSS or HTML code to create resizable images to display in small view

I am a book publisher and am publishing books to be read on Adobe Digital Editions. I'm looking for the CSS or HTML code to create resizable images that will display in "small view." Does anyone happen to know how to do this?

hi,
Our customers want to start reports by pushing a button instead of clicking on a link inside a dashboard.Create a dashboard page with all buttons referring to your dashboards....Is that fine???
There u ll refer to your dashboard which has download,refresh all the options
thanks,
saichand.v

Problem with CSS and HTML

I don't understand what is wrong but I don't see the styles when I preview my html in chrome.
Here's my CSS
@charset "UTF-8";
/* CSS Document */
html {
          min-width: 768px;
body {
          font-size: 100%;
          font-family: Arial, Helvetica, sans-serif;
          line-height: 1.5rem;
.wrapper {}
img {
          width: 100%; /*All images will be 100% the size of their parent */
.baseline {
          background-image: url(../images/baseline.svg);
strong {
          font-weight: bold;
em {
          font-style: italic;
/* ----------------------------------------------------------------------------------------- ------------- Masthead */
.masthead {
          height: 6rem;
          background-color: rgba(51,153,255,1);
          margin-bottom: 1,5rem;
h1 {
          font-size: 1.5rem;
          color: #9F6;
          position: absolute;
          margin: 2.25rem 0 0 4%;
/*---------------------------------------------------------------------------------------- --------------------article --*/
article {
          padding: 0 4% 1.5rem;
.headline {
          height: 4.5rem;
          margin-bottom: 1.5rem;
          background-colour: rgba(0,0,0,.15)
h2 {
          font-family:Georgia,"Times New Roman", Times, serif;
          font-size: 2.25rem;
          position: absolute;
          margin: 1.5rem 2% 0;
.placeholder {
          width: 20%;
          flow: left;
          margin: 0 2.5% 1.5rem 0;
p {
          margin-bottom: 1.5rem;
.footnote {
          height: 4.5rem;
          background-color: rgba(0,0,0,.15)
.footnote p {
          font-size: .875rem;
          position: absolute;
          margin: 1.5rem 2% 0;
/*---------------------------------------------------------------------------------------- -------------------- Bottom --*/
.Bottom {
          height: 15rem;
          background-color: rgba(51,153,255,1);
.bottom p {
          font-sizes: .875rem;
          color; #FFF;
          position:absolute;
          margin: 1.5rem 4%
Here's my HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Box Model Tutorial</title>
<link href="box-model/reset.css" rel="stylesheet">
<link href="box-model/general.css" rel="stylesheet">
</head>
<body class="baseline">

                  <header class="masthead baseline"> 
                                <h1>Victoria</h1>

           <div class="wrapper">
                         <article>
                          <header class="headline">
                                    <h2>Tourism British-Columbia</h2>
                          </header>
                               <img src="box-model/images/images/British_Columbia_Legislative_Building,_Victoria,_BC_Wallpape r_2c8nm-1.jpg" alt="box-model/images/images/British_Columbia_Legislative_Building,_Victoria,_BC_Wallpape r_2c8nm-1.jpg">
                                
                                <p>The capital city of British Columbia, Victoria boasts many historic buildings and some of the most fascinating museums in Western Canada. The city benefits from one of Canada's mildest climates, which allows its residents to pursue outdoor pleasures all year round.
Victoria enjoys some of the country's most exhilarating scenery: there's an ocean or mountain vista around every corner, while the city's flower gardens are famous the world over. Whether your taste runs to golfing, hiking, biking and fishing or you're more the shopping, dining and theatre type, there are no end of delights for you and your family in Victoria – the city was included in the Top 10 Family Vacations in Canada in the TripAdvisor 2011 Travelers' Choice awards.
Established in 1843 by James Douglas as a fort for the Hudson's Bay Company, Victoria's British ancestry is apparent in the double-decker buses, horse-drawn carriages, formal gardens, and tearooms. The city is now a cosmopolitan centre with a lively entertainment scene and a wonderful array of attractions.</p>
               <footer class="footnote">
                                     <p> Article Footer (Related Articles, Footnotes, Authors Bio, etc.) </p>
                                 </footer>
                      </article>
                       </div> 

    <footer class="bottom">
             <p>Main Footer (Copyright, related Links, Legal, privacy, logo, etc.)</p>
    </footer>
</body>
</html>

Lines 6 & 7 of your HTML file (exercise-boxmodel.html), change this:
<link href="box-model/reset.css" rel="stylesheet">
<link href="box-model/general.css" rel="stylesheet">
to this:
<link href="reset.css" rel="stylesheet">
<link href="general.css" rel="stylesheet">
Your CSS files are in the same folder as your .html file. But your original linkage shows that they're within a sub-folder called 'box-model'. That link was returning a 404 Not found error. Hence, the browser was unable to load your CSS files.
Replace the code and you should be able to view it.

Image dimension limitations in Photoshop Elements?

I'm trying to find out what the maximum image dimensions are for Photoshop Elements 8.0
I know Photoshop CS increased the previous limit of 30,000x30,000 to 300,000x300,000.
According to this page, PSE 5 and 6 were limited to 30k:
http://kb2.adobe.com/cps/402/kb402760.html
Yet according to this page, PSE 5 can reportedly handle 300k:
http://kb2.adobe.com/cps/333/333456.html
I'd like to upgrade from Elements v4 to v8, but one thing I need to ensure is that it can handle >30000px images, otherwise I'll have to go for CS5...
Can anyone give me a definitive answer, please?

When you installed the plugin(s), the installer should have created a folder in
C:\Program Files (x86)\Image Trends Inc\Hemi 1.0
Go to the Hemi 1.0 folder and copy the three plugins that don't say x64 and paste them into the pse 11 editor plugins folder
C:\Program Files (x86)\Adobe\Photoshop Elements 11\Plug-Ins

Image dimension in cm or picca or inches

is it possible to get image dimension in cm or picca or inches other than pixels. I tried with Imagero but it gives only in pixels. Is there any package to get in cm or picca?
Thanks,
Thanuja.

ok i got ur point.
so formula is
inches=pixels/dpismall clarification. I got the pixel value of the image. Is it possible to get the dpi of an image as well? If so then using the above formula i can
easily find out the dimension in inch right.
am i clear or going wrong somewhere? for the first time iam dealing with this images,dpi,inches and pixel sort of thing. Only now i understood what dpi is.
and one small clarification
have visited ur site http://balusc.xs4all.nl/srv/dev-jep-fil.html . Fileservlet really helped me. but when i navigate other links in ur site like java tutorial the content is not in english. its something like the below
In deze Nederlandstalige Java tutorial wordt uitgelegd hoe het object geori�nteerde programmeertaal Java in elkaar steekt. Java is een krachtige platform-onafhankelijke taal dat op praktisch alle gebieden toegepast kan worden. Van mobiele telefoons (Java Micro Edition, Java ME), via computerprogramma's (Java Standard Edition, Java SE) tot grote dynamische webapplicaties (Java Enterprise Edition, Java EE).
I dont know which language it is? could not understand? should i download any font or is it in any other language. u not from India? name sounds like an south indian.
Thanks
Thanuja

How to reference background image url from css?

Hello,
I have uploaded some images and css files to the "Shared Components > Images".
How can I reference my images as "background-image:url('XXX.gif')" for a css element?
Thanks,
John

To make what Tyler said explicit: APEX doesn't perform recursive (or indeed any) substitution on static files, Re: Use uploaded images in uploaded CSS, so images in static files can't be referenced using #APPLICATION_IMAGES# or #WORKSPACE_IMAGES# in style sheets that are themselves static files. The Re: Help with STATIC HTML file reference another STATIC HTML/CSS file..

Can I use Web App data string (image) in a CSS hover function?

I am developing a "show and tell" company employee profile using the Web App. I built my list item and the detailed items. Works fine. However, I have no hover function. So I created some css - a div id and added a background image then a div hover with another image for the hover. This worked. I moved the code over from Dreamweaver to BC – inside the Web App (the list template). I replaced the image paths with the Web App data string - image ( ex. {tag_employee photo} ). Then I did the same for the hover – I switched out the image to the data string ( ex., {tag_employee photo2} ). It doesn't work now.
All the CSS is written inside the body so it's not pulling from an outside path. I figured an outside path may not understand the data string.
How can I get this to link with the image data string? Am I missing something?
How can I create a image switch using CSS and the hover function WITH the BC Web App data strings?
Below is how I wrote the DIV id:
# List_photo {
    height: 200px;
    width: 200px;
    background-image:url("{tag_employee photo (200px)}");
    position: relative;
    margin-bottom:10px;
    display:block;
# List_photo:hover {
    height: 200px;
    width: 200px;
    background-image:url("{tag_employee photo (hover)}");
    position: relative;
    margin-bottom:10px;
    display:block;
Thanks!
Robert

Hi Robert,
The concept of what you are doing will work (so long as the <style>s are on the actual page) but you need to append '_value' to any image tag to get the image url and not the HTML output of the image.
So your tag would be {tag_employee photo (hover)_value}

Is there a Preserve Image Dimension when Relinking Setting in Framemaker 9?

Hi,
I am using Framemaker 9 (structured Frame) and would like to know if there is a setting (similar to InDesign) that preserves image dimensions when relinking. In InDesign, you can turn this setting off so that the updated linked graphic will not scale or move in the document. Does Framemaker have a similar setting? We use Illustrator CS3 to create graphics. These graphics are then saved to Adobe Acrobat X Pro PDF files. I Import by Reference the PDF file using the Grahic element in Structured Framemaker. If I make any changes to the graphic file in Illustrator, the graphic that was imported into the Framemaker document shifts inside the anchored frame and then I have to recenter all the updated graphics in Framemaker. Is there a setting in Framemaker that will allow me to update a graphic file in Illustrator without having to recenter it in Framemaker?
I currently have the following File Handling & Clipboard options selected in Illustrator:
Copy AS:
-PDF
-AICB (no transparency suuport)
-Preserve Appearance and OverPrints
But, these settings do not seem to help much for the imported graphic files in Framemaker.
I appreciate any information you can provide.
Thank you for your help.

*** haven't checked, because I don't have any pre-9.0 files easily available *** ... but from what I remember, if you're really just viewing the files in 9.0 you should need to save them explicitly back to an earlier version. FM may mark the files as "changed" when it opens them, but that's because it checks things like datestamps and cross-references. If you do not, yourself, explicitly change any content in the file you have opened, you don't need to save the changes; just close the file unsaved. Check my supposition with a couple of files before relying on it! And other people will be able to give you a more detailed explanation of why file you haven't touched yourself still show up as "changed".

Spry Photo Gallery Image Size via CSS

Hello!
I´ve been customizing the spry photo gallery for a couple of time, but got my little problem when viewing it on a mobile phone. When you load up the pictures with a size of 450 x 300 px for example, put up the right xml file with it´s width and height, so the gallery shows the pictures in that size. So what I want to do is that you can specify the image size with css depending on the device you´re watching the site with. There is div in the css called "mainImage" where the size is in %. When you change it to 75% for example. The pictures are correctly shown with 75% of it´s original size, but the outline (grey background) is still in 100%. When you make this grey background transparent it´s still there and moves the caption down. I guess there have to be done some changes within the SpryImageViewer.js, but I just know very little things about JavaScript. Do you have any clues how to change this to specify the image size via CSS?
Thank you for your help!!!
Kind regards,
Joerg

I see you are still using Spry 1.5. Have you considered upgrading to
Spry 1.6.1?
Also your XML is broken, if you open up your xml in a normal standards
complaint browser such as firefox, you will see that it doesn't render
a normal tree view as it would do with other xml files. So i suggest
checking those errors out.
Its mainly because you forgot to close your starting tag of the
gallerys node. (<gallery
base = ""
background = "#FFFFFF"
banner = "#F0F0F0"
text = "#000000"
link = "#0000FF"
alink = "#FF0000"
vlink = "#800080"
before your xml starts.

Finder doesn't show image dimensions

Hi!
I have a problem with image dimensions in Finder. Finder doesn't show image dimension info in preview column and Get Info window. But when I open in Preview app I can see dimensions in Get Info window. How to solve this problem. If I want to sort images by dimension, I can't do that. Because Finder doesn't know image dimensions. You can see images below.

Terence Devlin wrote:
That's because the Finder is a file manager and works from file metadata. The data you're seeking is about the file contents. You need to use a Photo Manager or Browser.
There is someone who can sort images by dimensions and see dimensions in list view. Also if Finder will not show image dimensions, why give me "Dimensions" and "Resolution" option to select in list view.
VikingOSX wrote:
Launch a Finder window. Press command+J, and set Show Item Info. Now the image dimensions will show below each image icon. If it is a movie, then the duration of the movie is shown.
I have done this. But doesn't show information.

Choose Preserve Image Dimensions When Relinking

Is there a way to change the preference "Choose Preserve Image Dimensions When Relinking" from scripting? This setting is accessible in the user interface ( in the Edit menu / Preferences / File Handling tab ).
Andreas

I am not sure but try:
app.imagePreferences.preserveBounds = true;
// If true, preserve image bounds when relinking.

Can I include both CSS and HTML codes in one Open HTML Editor.

Somehow Cell phones are not properly reading css codes. Is there any way to include both CSS and HTML codes in one Open HTML Editor?

Hammad, their code is fairly mobile friendly. Per my other discussion with you ( http://topliners.eloqua.com/thread/8532 ), Eloqua's code is responsive for the most part. Most of their issues lie with the styling of the email where you will get different fonts and different sized fonts throughout the email and some other minor display issues.
What you are trying to accomplish is extremely difficult to do because you do not have the access to the HTML to better control how the responsive template works which is why the Eloqua templates (and most ESP templates) stick to the more basic side of emails.
If you want to use Eloqua's WYSIWYG to make their responsive email you can do so, but I would recommend deleting all their body text before editing anything because of the inconsistencies in their code. Otherwise, I think you would be better off coding the emails outside of Eloqua using a 3rd party editor whether it's something more robust like Dreamweaver or Coda, or whether you feel comfortable working in a more text environment with programs like Notepad++ or Brackets.
At the end of the day remember you are paying Eloqua for these and if you choose to stick with the WYSIWYG and you are not getting the results you expect you need to tell Eloqua through your support channels.

Column view in Finder does not display image dimensions

Image dimensions display a -- when browsing in column view. If I view info on the image it appears. If I move off the highlighted image file and go back it disappears again. I have looked into the spotlight solution and do not have any folders listed under Privacy. I am running 10.7.4 and all updates are current.

Go to your Finder "Go" menu hold the option key and choose Library. Then go to Preferences folder and trash this file:
com.apple.finder.plist
Then, restart, or log out and in again.
(You may have to reset a few finder prefs the way you like them.)

Image Dimensions not showing

This MAY be a Photoshop CS3 issue, so forgive me if it is, but I can no longer see image dimensions in the (Leopard) finder. The problem seems to have started when I upgraded to Photoshop CS3, but I upgraded to Leopard just a few days prior to the CS3 upgrade. If I look at images that were already on my hard drive before Leopard, the dimensions appear. Any new images I save via Photoshop no longer have dimensions appearing in the finder preview area.
Edit: This definitely appears to be a Leopard issue. It appears that ALL new images, no matter which program saved it, do not have dimensions attached. I opened a jpeg with Preview and saved it as both a jpeg and a png, and no dimensions appeared.

I was doing a lot of graphics stuff the other day, for many hours, and noticed that the things I had just saved were not showing the pixel dimensions in the Finder. For me simply selecting the image in the Finder caused the dimensions to appear. You might also try a restart, then open a folder with the new images and see if the dimensions are now present. Also had a bizarre result in Cover Flow where several newly created images all displayed as being exactly the same (all looked like the first image created). In that case a force restart of the Finder brought things back to sanity.
Francine
Francine
Schwieder

Image dimensions in CSS or HTML; or a Bit of Both?

Similar Messages

Maybe you are looking for