PDA

View Full Version : Positioning an image problems



isilme
Sep 13th, 2010, 01:38 AM
Okay, I'll start this off by saying I'm a complete beginner. I'm sure I'm making some fundamental, stupid mistakes. I'm using dreamweaver to make a page, and I'm having some issues. I'm trying to position a logo using a div tag. Here's my code:



<div style="
left: 0;
top: 0;
position: absolute;">
<img src="Images/logo.png" width="556" height="260" alt="random image" />
</div>


As it is, the image is flush with the window on the left and top. Makes sense. However, if I input any value into the left or top parameters (from 1 to infinity) it gives me the same amount of space, regardless of what the number is, so I can't position the image like I want to. If I input a percentage into the parameters though, it works like it should. What am I doing wrong?

teedoff
Sep 13th, 2010, 02:35 AM
Can you post your html code as well?

isilme
Sep 13th, 2010, 02:47 AM
Sure thing:



<!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>title</title>
</head>

<body>
<div style="
left: 0;
top: 0;
position: absolute;
z-index:1;
">
<img src="Images/logo.png" width="556" height="260" alt="random image" />
</div>

</body>
</html>


I didn't intentionally add anything on there other than the div tag, so I'm pretty sure anything else is just dreamweaver default stuff or accidental.

Doctor_Varney
Sep 13th, 2010, 03:10 AM
I'm sure I'm making some fundamental, stupid mistakes. I'm using dreamweaver to make a page

Bingo!

----------------

DW doesn't seem to know much else about CSS positioning than the absolute. Very bad start for a beginner. I know, 'cos i've been there myself.

To code HTML & CSS properly, first you'll need this (http://notepad-plus-plus.org/).

Then start reading this (http://www.w3schools.com/css/css_boxmodel.asp).

And this (http://ifyoucodeittheywill.com/beginners/).

Have a good shuffle around, then come back if you have any more questions.

Dr. V

isilme
Sep 13th, 2010, 04:21 AM
Ah! Thanks for the tips :)

Laurence
Sep 13th, 2010, 11:09 AM
HI Mate

I think there is a problem with your coding of your HTML and CSS . I suggest you to apply the basics of HTML building blocks perfectly.



email templates (http://www.dotmailer.co.uk/email_templates/)

rettgoings
Sep 13th, 2010, 01:53 PM
<div style="
left: 0;
top: 0;
position: absolute; float: left;">
<img src="Images/logo.png" width="556" height="260" alt="random image" />
</div>



Try this, by adding "float:left;"

Be careful with divs also. you may want to learn how they work layered.

teedoff
Sep 13th, 2010, 04:50 PM
Honestly, I dont know why Dreamweaver gets such a bad wrap. lol I know I know, it does sometimes put way extra junk coding in for server side languages sucha s CF and php, but for a beginner starting out learning html and css, its a fantastic tool! Provided of course they dont rely heavily on the wizards to do the work, or if they do use the wizards, go back and LEARN what code does what and how it works. Dreamweaver is a powerful and fantastic GUI editor that has its advantages....it has awesome file and content management as well as a great ftp client. anyway, my two cents for what its worth..lol

Doctor_Varney
Sep 13th, 2010, 08:06 PM
Honestly, I dont know why Dreamweaver gets such a bad wrap.

Because it's a heap of steaming duck-billed platipus dung, that's why! :mad:


for a beginner starting out learning html and css, its a fantastic tool!

I totally disagree. It precipitates very bad coding habits in the beginner.
The only thing it's fantastic for, is making pages with outdated and almost extinct layout paradigms.


Provided of course they dont rely heavily on the wizards to do the work, or if they do use the wizards, go back and LEARN what code does what and how it works.

Yes, but how many of these people will actually take the time to do this?
More to the point - how many college teachers are actually encouraging their students to do this?
The answer to this, at least here in the UK, you might find shocking.


Dreamweaver is a powerful and fantastic GUI editor

Actually, it's a very misleading one. The most 'fantastic' (actually - most accurate) GUI editor is a desktop with a text editor and a couple or three of the web's leading browsers open, side by side...


that has its advantages....it has awesome file and content management as well as a great ftp client.

Indeed. On this, I can't disagree. But there are plenty of freeware FTP clients that work just as well.

And as for the 'two cents worth' - DW costs a LOT more than 2cents - just to use as a 'content management system - when you already have one, called Windows Explorer! :)

Dr. V

teedoff
Sep 13th, 2010, 09:39 PM
lol ok points well taken, but I for one learned on DW and yes I can raise my hand and say that I studied the code produced in any html or css or coldfusion or php script as it was designed.
I think without DW i would have never learned coldfusion as well as I have...lol
Anyway, this is off topic for the original poster's question.

btw...dreamweaver or not...learning proper CSS is essential in creating great looking sites. The OP obviously hasnt learned CSS yet, regardless of using DW, notepad++, jEdit or any text editor..lol

Doctor_Varney
Sep 13th, 2010, 11:33 PM
LOL, very true on that.

Actually, we came from the same stock you and I. I learned on Dreamweaver too but I have to say, when I tried to implement CSS P (as in seperate style sheets), I did find it rather confused at times. The WYSWYG drag'n'drop aspect only really shines on absolute positioning. That's why I dont think it's a great teaching aid... an adequate one, depending on the student's attitude, of course. I didn't start to get my head around CSS until a friend of mine took me through replacing my absolute-positioned DIVs with the box model - then it all started to click.

Now, once I had my CSS primer, I decided to take this further by enrolling at college as a mature student. When we got down to work, what was the first thing they showed us? Dreamweaver! I asked at what point do we learn box model theory and my tutor said:

"Oh, that's rather advanced. We don't do that, because we teach Dreamweaver."

I realised this course was going to be as useful as a wax coffee spoon, when I showed the tutor my half baked CSS site, hoping for advice on how to fix it - and he said:

"That's really clever - how did you do that?"
--------------------------------------------------

I hasten to add, I have never tried learning Coldfusion so you may have a good point! :)

Dr. V

isilme
Sep 14th, 2010, 02:03 AM
Okay, on your advice I went back and tried to get a bit more grounded with the basics. I read the lessons you suggested and am now using text-based coding software rather than dreamweaver. I solved the positioning problem I had, but now I have another one.

Centered on my site, I have an image that works as a bar that my buttons sit on top of (for aesthetic reasons.) I want to position my different button images so that they sit in the same spot on the bar, regardless of the browsers size. However, when I scale down the window, the bar and the buttons move at different rates. I was thinking I could position the buttons in absolute terms relative to the bar. I made an attempt below. Is the theory sound? If so, what did I do wrong?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<div id="container" style="
text-align: center;
z-index: 0;
margin-top: 10px;">
<img src="http://i944.photobucket.com/albums/ad288/ahspepperbox/misc/navigationbar.png" height="67"></img>
<div id="button" style="
z-index: 1;
text-align: center;
margin-top: -55px;">
<img src="http://i944.photobucket.com/albums/ad288/ahspepperbox/Buttons/multimedia.png" width= "134" height="48"></img>
</div>
</div>
</html>


My css:


#container {text-align: center; border-style: dotted; border-color: red; border-width: 2px;}

#button {position: absolute; right: 380px;}


Thanks for any help

teedoff
Sep 14th, 2010, 02:11 AM
LOL, very true on that.

Actually, we came from the same stock you and I. I learned on Dreamweaver too but I have to say, when I tried to implement CSS P (as in seperate style sheets), I did find it rather confused at times. The WYSWYG drag'n'drop aspect only really shines on absolute positioning. That's why I dont think it's a great teaching aid... an adequate one, depending on the student's attitude, of course. I didn't start to get my head around CSS until a friend of mine took me through replacing my absolute-positioned DIVs with the box model - then it all started to click.

Now, once I had my CSS primer, I decided to take this further by enrolling at college as a mature student. When we got down to work, what was the first thing they showed us? Dreamweaver! I asked at what point do we learn box model theory and my tutor said:

"Oh, that's rather advanced. We don't do that, because we teach Dreamweaver."

I realised this course was going to be as useful as a wax coffee spoon, when I showed the tutor my half baked CSS site, hoping for advice on how to fix it - and he said:

"That's really clever - how did you do that?"
--------------------------------------------------

I hasten to add, I have never tried learning Coldfusion so you may have a good point! :)

Dr. V

Thats a funny story. Thankfully, I had and still have a great instructor. Im taking php from him presently. But, even though we used and still use DW, he made sure we didnt just do things the easy way, and that we actually learned the coding aspect as well. As far as the CSS absolute issues you had, I have to say I never experienced the issues you described. Of course, when working with CSS myself, I try to code that by hand myself, and not use the wysiwyg aspect of DW.
You should give Coldfusion a shot! its not hard at all, and its rather like learning html. All tag based language, so its somewhat easier than say PHP or perl.

teedoff
Sep 14th, 2010, 02:14 AM
Okay, on your advice I went back and tried to get a bit more grounded with the basics. I read the lessons you suggested and am now using text-based coding software rather than dreamweaver. I solved the positioning problem I had, but now I have another one.

Centered on my site, I have an image that works as a bar that my buttons sit on top of (for aesthetic reasons.) I want to position my different button images so that they sit in the same spot on the bar, regardless of the browsers size. However, when I scale down the window, the bar and the buttons move at different rates. I was thinking I could position the buttons in absolute terms relative to the bar. I made an attempt below. Is the theory sound? If so, what did I do wrong?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<div id="container" style="
text-align: center;
z-index: 0;
margin-top: 10px;">
<img src="http://i944.photobucket.com/albums/ad288/ahspepperbox/misc/navigationbar.png" height="67"></img>
<div id="button" style="
z-index: 1;
text-align: center;
margin-top: -55px;">
<img src="http://i944.photobucket.com/albums/ad288/ahspepperbox/Buttons/multimedia.png" width= "134" height="48"></img>
</div>
</div>
</html>


My css:


#container {text-align: center; border-style: dotted; border-color: red; border-width: 2px;}

#button {position: absolute; right: 380px;}


Thanks for any help

Dont be afraid or ashamed to use Dreamweaver! lol it really is a great way to learn when just starting out. You will eventually graduate to a more specific text editor sucha s notepad ++, but until then DW is a great tool.

Doctor_Varney
Sep 14th, 2010, 09:02 AM
Okay, on your advice I went back and tried to get a bit more grounded with the basics. I read the lessons you suggested and am now using text-based coding software rather than dreamweaver. I solved the positioning problem I had, but now I have another one.

Centered on my site, I have an image that works as a bar that my buttons sit on top of (for aesthetic reasons.) I want to position my different button images so that they sit in the same spot on the bar, regardless of the browsers size. However, when I scale down the window, the bar and the buttons move at different rates. I was thinking I could position the buttons in absolute terms relative to the bar. I made an attempt below. Is the theory sound? If so, what did I do wrong?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<div id="container" style="
text-align: center;
z-index: 0;
margin-top: 10px;">
<img src="http://i944.photobucket.com/albums/ad288/ahspepperbox/misc/navigationbar.png" height="67"></img>
<div id="button" style="
z-index: 1;
text-align: center;
margin-top: -55px;">
<img src="http://i944.photobucket.com/albums/ad288/ahspepperbox/Buttons/multimedia.png" width= "134" height="48"></img>
</div>
</div>
</html>


My css:


#container {text-align: center; border-style: dotted; border-color: red; border-width: 2px;}

#button {position: absolute; right: 380px;}


Thanks for any help

Well, for a start, as you may have picked up by reading our rants on Dreamweaver - absolute positioning isn't the best way to ensure flexibility. Like salt, it needs only a pinch and then only when absolutely necessary (if you'll excuse the pun).

Next, work on getting all your CSS into a seperate stylesheet. Not only will it make it easier to organise your mind but it also assists people when they want to help you on forums. That's before all the attendant benefits associated with seperating style from content.

Just recently, I came across this article (http://www.vanseodesign.com/css/css-positioning/), posted by another member and I can say it's definitely worth the read. I recommend making a study of all the topics it covers... I think it's especially relevant to where you are right now, on your journey towards understanding CSS. I'm reading it myself atm.

Dr. V

cdorob
Sep 14th, 2010, 12:10 PM
You can as well have a look at Flexi CSS Layouts (http://extendstudio.com/product/tableless-css-layouts-for-dreamweaver.html) - it's a Dreamweaver extension that makes CSS Layouts without coding.

teedoff
Sep 14th, 2010, 03:11 PM
You can as well have a look at Flexi CSS Layouts (http://extendstudio.com/product/tableless-css-layouts-for-dreamweaver.html) - it's a Dreamweaver extension that makes CSS Layouts without coding.

*GASP* not a dreamweaver extension?!?! lol....

I'm not so sure I would use an extension that doesnt allow you to at least write part of your own CSS code. I haven't used this extension mentioned, so I cant say, but I wuold much rather write code myself than have a wizard do it all for me. Where is the learning in that?

Also really, go to w3schools (http://www.w3schools.com)and start learning the basics. They have easy walk through tutorials and even simple short quizes after each chapter. When you learn the basics, you can then start discovering new ways to do things you previously thought was either too hard, or not possible.