Jump to content
Sign in to follow this  
Guest jessica

simple problem driving me nuts!

Recommended Posts

Guest jessica

Hi everybody,I'm new to this forum. I'm trying to build my own site with CSS/HTML. I want to put my photographs on the page and for some reason I can't find it anywhere whether I should define the image positioning in the HTML or in the CSS file. I have one image on the page now by putting <img src="picture.jpg"/> in the HTML code. Now, what do I write in the CSS file to address that image and adjust the positioning???Now, another thing..I want to make my pictues move. Do I have to use javascript for that? (don't want to use Flash).Thank in advance!Jessica

Share this post


Link to post
Share on other sites

Hi Jessica and welcome to the forums.HTML and CSS can work very nicely together. There will be some that say you should do almost everything you want to with CSS and others that say you should do an equal amount in both. So, just figure out what works best for you.Having said that, here is where you can go.First, you could do it old school - use HTML to layout your page with tables or what have you and then put your images there. The position of the image would be controlled by how your table is constructed.Secondly, you could do it new school - use HTML to simply code the page, but have CSS do the majority of the layout. This owuld mean that HTML just say here is block A, here is block B, and the CSS would say block A goes here and block B goes here - based on relative or absolute positioning.So, tables (old school) are bound by how you define them (this row, this column) so how that set up will determine where things go. Using CSS to define position binds that control to the CSS definitions. Either way, and future changes will have to be made in one place or the other - so I'd figure out which is easier for you and go that direction - but understand that the second method is the "more appropriate" technique.Finally, animation. When you say "move" do you mean you would like the image to physically move from one place on the screen to the other - or just act more like a slide show? The former will take javascript and CSS where the later could be done in Image Ready.Hope this helps.

Share this post


Link to post
Share on other sites
Hi everybody,I'm new to this forum. I'm trying to build my own site with CSS/HTML. I want to put my photographs on the page and for some reason I can't find it anywhere whether I should define the image positioning in the HTML or in the CSS file. I have one image on the page now by putting <img src="picture.jpg"/> in the HTML code. Now, what do I write in the CSS file to address that image and adjust the positioning???Now, another thing..I want to make my pictues move. Do I have to use javascript for that? (don't want to use Flash).Thank in advance!Jessica

Hi Jessica,You should leave what you have in the html. In the css, add something like this:img{ position: absolute; left: 200px; top: 300px;}This is just a simple example of what you can do for positioning. Study the css tutorial on this website to see everything you can do. I would suggest adding something like:img.name{ position: absolute; left: 200px; top: 300px;}Then in the html change your pic tag to <img class="name" src="picture.jpg" />What this will do is limit all the formatting in the img.name part of your css to that pic alone. Then you can give each pic you have it's own class name and apply different styles and position to each of them.Dont forget to add a link in your <head> to your css document. I'm not experienced with moving pics yet but I think if you save your images as .bmp instead of .jpg, you can combine a series of pics in one, kind of like with those flip books. Hope I could help.

Share this post


Link to post
Share on other sites

It's better to use floating elements Put your images in a div<div class="imageBlock"><img src="bla1.gif"><img src="bla2.gif"><img src="bla3.gif"><img src="bla4.gif"><img src="bla5.gif"><img src="bla6.gif"></div>then in your CSS:

div.imageBlock { width:550px; } div.imageBlock img { display:block; float:left;  margin:0 10px 10px 0; width:200px; height:200px; }

now u can add several images in the div without changing it's "personal" classnames :)I'll hope this is what u wanted :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×