Adobe Community: Code for moveable text fields?

BrainMcBrain Calculating status...

Currently Being Moderated

Code for moveable text fields?

Mar 23, 2013 9:36 AM

Hi I'm just trying to cram some learning in and get to grips with the basics of HMTL and CSS, but I've hit a stumlbing block. Sorry if I appear a bit stupid here, I'm just not getting this whole css thing at all, I don't understand how it works.

Anyway at the moment I am just trying to create a basic website, nothing fancy and all I want at this stage are a background, images I can drop and drag wherever I like, and most importantly text fields that i can do the same with. I have managed to work out how to easily place images on the page using the following code-

but so far as text is concerned I appear to be constrained to positioning it like a word document, ie. left, right, centre etc..

I'm watching tutorials, searching google, and playing around with dreamweaver but just can't seem to find any way to insert a similar kind of ...layout object? where i can insert text and then click and drag, change the size of the text field and just place it on the page somewhere, next to the image, underneath, wherever i feel it looks best. I just want a peice of code that does that, it seems like quite a basic feature, and that's all i want at this stage, just basic features to form the structure of my website so i can get it in place and then go on and develop it further. I can't find anything anywhere that explains how to do this! So I am beginning to question whether it is even possible and maybe I am completely missing the point about web design.

Can someone please explain this or tell me a bit of code that does the same thing as the code above for placing images, that i can insert text into and change the size and drag and drop easily using the mouse?

I've been spending the past day tearing my hair out trying to find out this one simple thing so i can get on and build my site. Up until now I have been using tables, but I don't think it is a very good way to approach this.

Help, someone, PLEASE! Just a bit of code is all I want and then I can get on and build the rest my site....

1482 Views 45 Replies Latest reply: Nancy O., Mar 25, 2013 10:20 AM

Replies 1 2 Previous Next

Currently Being Moderated

1. MurraySummers,

Mar 23, 2013 9:43 AM in reply to BrainMcBrain

Report

Expunge any sense of drag and drop from your brain. It will lead you into horrifyingly dark and twisty passages. You do not drag and drop to build a stable web page.

Accept the fact that whatever you place on the page will be located where the normal flow of the code puts it (i.e., as the browser reads your code from top to bottom, it renders each element on the screen as soon as it places the preceding element. That's called the normal flow. If you want to move things from where the browser puts them, then you need to apply margins and floats (your two workhorse tools for page layout).

Does this begin to make sense? If so then we can continue.

|
Mark as:
Currently Being Moderated

2. BrainMcBrain,

Mar 23, 2013 10:00 AM in reply to MurraySummers

Report

It makes sense in so far as I now understand that my appraoch has been completely wrong up until now and there is a better way to to it that resolves any possible issues with comaptibilty. Margins and floats sound like concepts that could provide the desired layout features I am looking for, and something I can work with. I've appraoched this sor far by creating a background about 1024 pixels wide, and placing images and text within tables set to the centre of the page. I know this is not the right way to go about it so before i go on to develop the structure of my site, which is not going to be too fancy, I just want a basic site to present and arrange my photographs, with some text next to them somewhere.

I'm watching these tutorials but they are going into so much detail, things that i should know, and techniques i would probably be best implementing, but at this stage I am not interesting in learning everything about it, I just want some basic tools to arrange my site, and then when it's done THEN I can continue learning more tricks and features.

So please do elucidate further, fire across some code if you like so i can get on with this, any help you can offer is appreciated.

|
Mark as:
Currently Being Moderated

3. MurraySummers,

Mar 23, 2013 10:33 AM in reply to BrainMcBrain

Report

Start by reading this -

http://www.apptools.com/examples/pagelayout101.php

|
Mark as:
Currently Being Moderated

4. BrainMcBrain,

Mar 23, 2013 11:52 AM in reply to MurraySummers

Report

Looks helpful, just reading this link now. It might help though if it provided all the code for each segment it is explaining. I am copying and pasting the code into dreamweaver and no boxes are appearing, so I obviously need some more code. Excuse my ignorance. I'm sure this is all basic simple stuff, but I'm afraid I'm just not getting it yet! I understand it is appraoching the layount from the perspecive of layers or cascaded sheets. I just need the code and then I can experiment with it myself and work out exactly what it is it is doing...

|
Mark as:
Currently Being Moderated

5. BrainMcBrain,

Mar 23, 2013 12:06 PM in reply to BrainMcBrain

Report

Oh man why is this so hard to learn? What IS IT that I am NOT getting!

OK here is the code where I copied in the code from that page to diaply the red and blue boxes of text-

<!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>Untitled Document</title>
<style type="text/css">
   #Layer1, #Layer2 {
      border: 1px solid;
      height: 100px;
      position: absolute;
      width: 200px;
   }
   #Layer1 {
      border-color: red;
      left: 100px;
      top: 100px;
   }
   #Layer2 {
      border-color: blue;
      left: 100px;
      top: 210px;
   }
   </style>
</head>

<body>
</body>
</html>

Now, IF I look on the design page, there are no boxes of the likes displayed on the page you reference. So what is it I am not doing right here? Where do I enter the text so it appears in the boxes?

|
Mark as:
Currently Being Moderated

6. Nancy O.,

Mar 23, 2013 12:10 PM in reply to BrainMcBrain

Report

Work through the exercises in these sites to learn the fundamentals of HTML (content) & CSS (styles). Afterwards, DW will make a bit more sense to you.
http://www.html.net/
http://w3schools.com/
http://www.csstutorial.net/

I just want a basic site to present and arrange my photographs, with some text next to them somewhere.

Is this want you're looking for? View source in browser to see the underlying CSS & HTML code.
http://alt-web.com/TEMPLATES/Dark-Grid-II.shtml

Nancy O.

|
Mark as:
Currently Being Moderated

7. MurraySummers,

Mar 23, 2013 12:30 PM in reply to BrainMcBrain

Report

What are you missing? This -

<body>
<div id="Layer1"></div>
<div id="Layer2"></div>
</body>

|
Mark as:
Currently Being Moderated

8. BrainMcBrain,

Mar 23, 2013 12:35 PM in reply to Nancy O.

Report

I will do and thank you, I have already had a look at some tutorials. I'm cramming though because I want to get a site up running with lots of content as quick as possible though.

So my basic question is this.

I want to create a box like the one on that tutorial page, what is the full code?

EDIT thanks Murray, that's what i was looking for. Excuse my limited understanding, just getting a bit frustrated with it all. Will look into that code and try to get my head round it and use it to develop the basic structure of my site now.

|
Mark as:
Currently Being Moderated

9. Nancy O.,

Mar 23, 2013 12:43 PM in reply to BrainMcBrain

Report

I want to get a site up running with lots of content as quick as possible though.
Fast & furious isn't going to produce professional looking results. Slow down. Learn the basics. Then put your combined knowledge together to build a good product you can be proud of.
I want to create a box like the one on that tutorial page, what is the full code?

View source in browser. In Firefox, right click anywhere on the page and select View Page Source from the drop-menu.

Copy & paste the code into a new, blank HTML document.

Nancy O.

|
Mark as:
Currently Being Moderated

10. BrainMcBrain,

Mar 23, 2013 12:52 PM in reply to Nancy O.

Report

I'm not big on programming, I just want an application that can realise what design I have in mind, and I need to throw something together quick.

I'm sure I'll get there in the end.

|
Mark as:
Currently Being Moderated

11. Nancy O.,

Mar 23, 2013 12:56 PM in reply to BrainMcBrain

Report

I'm not big on programming, I just want an application that can realise what design I have in mind, and I need to throw something together quick.
Maybe you should be using Adobe Muse instead of Dreamweaver.
http://www.adobe.com/products/muse.html

Nancy O.

|
Mark as:
Currently Being Moderated

12. MurraySummers,

Mar 23, 2013 1:01 PM in reply to BrainMcBrain

Report

It's OK with you if what you produce looks like it was just thrown together quickly?

|
Mark as:
Currently Being Moderated

13. BrainMcBrain,

Mar 23, 2013 1:05 PM in reply to Nancy O.

Report

probably. I thought that was basically the function of the dreamweaver app though?

|
Mark as:
Currently Being Moderated

14. BrainMcBrain,

Mar 23, 2013 1:08 PM in reply to MurraySummers

Report

Until I can do more work on it i just want a bog standard web page that present my artwork. As long as it's tidy and compatible with most browers it'll do for now. Like I say, I just want a nice background with images and words in the right place. If i can do that it'll look presentable until such times as i can learn more and add some bells and whistles. i aleady have some pages looking nice, but I don't really know if they will look roight on other browers.

|
Mark as:
Currently Being Moderated

15. Nancy O.,

Mar 23, 2013 1:10 PM in reply to BrainMcBrain

Report

DW is pro level software. Coding skills are required to get the most out of it.
MU is consumer level software aimed at non-coders & hobbyists.

If you don't have the time or patience to learn good coding practices, don't use DW. Use MU.

Nancy O.

|
Mark as:
Currently Being Moderated

16. BrainMcBrain,

Mar 23, 2013 6:35 PM in reply to Nancy O.

Report

I will eventually want to use DW I think so might as well learn the basic of coding. I hate coding though, which is why I am 40 and still don't know much about it. That's for the boffins to work out, I'm an artist, not a programmer, but I don't have enough money to pay people to do the presentation work for me.

Anyway, that tutorial site you posted is helping.

I got my background to do what i want-

body {
background-attachment: fixed;
          background-position: top;
          margin: 0;
          background-image: url(image link);
          background-repeat: repeat-y;
}

So it centres on the page, regardless of how wide the page is. Now I am trying to get the content of the page to centre with it, relative to the background, if you know what I mean, but I'm just hitting a wall, don't know how to do that. Someone please fire the code over to me that does that?

I just want the basic building blocks in place so i can go and design the page. I want to write the content, but I'm stuck learning code language... Once I get the basics I'll be able to expand on it and develop it from there. I just want to write the damn page! It's not going to be anything fancy, I just want the bits to go where they are supposed to...

Help.

|
Mark as:
Currently Being Moderated

17. BrainMcBrain,

Mar 23, 2013 7:20 PM in reply to BrainMcBrain

Report

Right I think the code I am looking for is this-

<div align="center">

</div>

Bang, there you go. Simple as that.

I know I am being lazy, but when you have a structure that you want to put in place and the tools aren't working it's frustrating + I have a deadline for something else to work to...

Thanks for the all help. If you don't mind maybe I can pick your brains again sometime?

I think the problem with a lot of these tutorials is they are always throwing in hints and stumbling blocks to look out for and ways to avoid doing it the wrong way, but they should maybe just lay out the basics and I can usually go on from there, make the inevitable mistakes and then work out how to overcome them. It's the first rule in teaching, let the student make his own mistakes. Doing things wrong is the best way to learn how to do things right.

|
Mark as:
Currently Being Moderated

18. MurraySummers,

Mar 24, 2013 7:39 AM in reply to BrainMcBrain

Report

BrainMcBrain wrote:

<div align="center">

</div>

Bang, there you go. Simple as that.

Yes, but wrong. The align attribute is obsolete and will not allow your page to validate. Here's a better way -

<div class="whatever">
</div>

with this CSS -

.whatever { width:980px; margin:0 auto; }

Bang - the div centers in any viewport width.

|
Mark as:
Currently Being Moderated

19. BrainMcBrain,

Mar 24, 2013 9:33 AM in reply to MurraySummers

Report

ok.

This so confusing. I've basically got the material and structure of the web I want to design in my head, but I've spent the whole weekend trying to wrap my head around this code, which is a complete and utter nightmare.

I'm experimenting with basic things and there was this piece of code if i chaged the pixel width from 480px to 490px, above that it no longer appears as a box of text but a plain red box, and I'm kind of thinkning wtf is this all about? It makes NO sense. How can changing the width by 10px alter the way it looks so dramatically????

OK, I've made some progress and worked out how to get an image to appear in a fixed position relative to my background, and I know how to wrap text around it, just when I do that I can no longer position it where i want.

I'm just looking for the basic code to do this so i can write this, I don't want to learn everything about CSS at this stage, I don't have the time.

   <div align="center">
            <img src="iimage" width="300" height="466" alt="" style="position: relative; top: 50px; left: -170px;></div><div id="Layer1" >
          </div>

How do i wrap text around that?

I'm just fumbling about with little clue on what I am doing, I just don;t understand how all this works!

Thanks for the help but I am getting really frustrated with all this now and tempted to just go back to writing the page with tables.

|
Mark as:
Currently Being Moderated

20. BrainMcBrain,

Mar 24, 2013 9:47 AM in reply to BrainMcBrain

Report

I'm just going to have to sit down and go through the whole thing and learn it by scratch, there are things that I'm obviously not getting, it't not clikcing into place. I'm going to have to just work through an entire set of tutorials.

|
Mark as:
Currently Being Moderated

21. BrainMcBrain,

Mar 24, 2013 10:07 AM in reply to BrainMcBrain

Report

OK this is a the basic layout i am working from, a background image that is fixed and centres and an image positioned somewhere on the page. I'm trying to work out how to get text to wrap round it to fill the remainder of the area within the background image. I'm sure this is quite simple but I just can't work it out. I'm tired and red up. Anyone know what the code is so i can play around with it and get an idea of what I am doing?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>

<style type="text/css">

   body {
             background-attachment: fixed;
          background-position: top;
          margin: 0;
          background-image: url(image);
          background-repeat: repeat-y;
}

</style>

</head>

<body>

<div align="center">
<img src="image" width="300" height="466" alt="" style="position: relative; top: 50px; left: -170px;></div><div id="Layer1" >
</div>

</body>

</html>

|
Mark as:
Currently Being Moderated

22. Nancy O.,

Mar 24, 2013 10:08 AM in reply to BrainMcBrain

Report

Creating your First Web Site in DW (5 part tutorial)
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.htm l

Best of luck,

Nancy O.

|
Mark as:
Currently Being Moderated

23. MurraySummers,

Mar 24, 2013 10:13 AM in reply to BrainMcBrain

Report

Try starting with one of the DW starting pages:

File > New > 1 column fixed, centered

However your code might be adjusted to be valid like this -

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
          margin: 0;
          background-image: url(image);
          background-repeat: repeat-y;
          background-position:center;
}
#container {
           width:980px;
          margin:0 auto;
}
</style>
</head>

<body>
<div id="container">
<img src="image" width="300" height="466" alt="">
</div>
</body>
</html>

There is no need to use positioning at this stage. The image can be located anywhere you want it with floats and margins.

|
Mark as:
Currently Being Moderated

24. BrainMcBrain,

Mar 24, 2013 10:36 AM in reply to MurraySummers

Report

Right i think I have finally got it to do what i want from that, cheers Murray. Thanks all for the help. Sorry for being a noob. I will persevere.

|
Mark as:
Currently Being Moderated

25. MurraySummers,

Mar 24, 2013 10:53 AM in reply to BrainMcBrain

Report

There is no doubt that the more comfort you feel with code, the easier DW will become in general. Good luck!

|
Mark as:
Currently Being Moderated

26. BrainMcBrain,

Mar 24, 2013 11:24 AM in reply to MurraySummers

Report

And away we go, back to actually writing the web site again. Thanks Murray for accomodating my noobness and impateience and taking the time to tell me the code.

|
Mark as:
Currently Being Moderated

27. MurraySummers,

Mar 24, 2013 11:30 AM in reply to BrainMcBrain

Report

It's really not hard. Just don't be afraid of it.

|
Mark as:
Currently Being Moderated

28. BrainMcBrain,

Mar 24, 2013 12:28 PM in reply to MurraySummers

Report

Just stressing. Hit a wall with the format I was trying to implement and my wrist was hurting etc.. I know I'm being lazy but sometimes the best way to crack a piece of software is to just dive in and start swimming.

|
Mark as:
Currently Being Moderated

29. BrainMcBrain,

Mar 25, 2013 7:56 AM in reply to BrainMcBrain

Report

Here I am tearing my hair out trying to get the code to do what i want again.

Basically, the format of my body in the site content takes this form

body {
          background-attachment: fixed;
          background-position: top;
          margin: 0;
          background-image: url();
          background-repeat: no-repeat;
          background-color: #000000;
}

Background centred in the brower window, content scrolls over the background which remains fixed.

On the other hand, the main introduction page I have designed I want a static background and the text/links to remain static as I scroll down the page, however i can only acheive this by have the page content on the left, ie.

body {
          width: 900px;
          height: 1220px;
          background-image: url();
          background-repeat: no-repeat;
          background-color: #666666;
}

As soon as I centre it then the content starts scrolling independently again!

My question is, how to do I achieve this layout where the text remains fixed to the background image, but centres like in the code above?

I'm playing about with the code, but I can't seem to work out how to dio it. As soon as i get the image to centre, then the content starts floating automoatically, and i don't know why???

Can anyone please help resolve this matter, because i can't. I don't know what code I need to adjust to make this work..

|
Mark as:
Currently Being Moderated

30. MurraySummers,

Mar 25, 2013 8:03 AM in reply to BrainMcBrain

Report

BrainMcBrain wrote:

Here I am tearing my hair out trying to get the code to do what i want again.

Basically, the format of my body in the site content takes this form

body {
          background-attachment: fixed;
          background-position: top;
          margin: 0;
          background-image: url();
          background-repeat: no-repeat;
          background-color: #000000;
}

Background centred in the brower window, content scrolls over the background which remains fixed.

OK so far, but the background is not centered. It is top & left aligned.

On the other hand, the main introduction page I have designed I want a static background and the text/links to remain static as I scroll down the page

Sorry - you mean you want the background to be fixed as well, just the same as it is on the home page? If so then also add the background-position:fixed style to your body rule. We would need to see your code to answer the question about the text links.

|
Mark as:
Currently Being Moderated

31. BrainMcBrain,

Mar 25, 2013 8:16 AM in reply to MurraySummers

Report

The first bit of code I posted centres the background, the second is top and left aligned. That's how it appears in my browser anyway..

I want the background to be fixed in both scenarios. On the main index page I want the background to centre and the content to remain fixed on the background as I scroll down, so the full image I have created can be seen.

Also do you know why the following two bits of code don't appear to do the same thing? <p></p> seems to do what it is told and centres on the page, <p1></p1> on the other hand defaults to the left...? Only difference I can see is I have added a 1 to the selector. So what am I missing there then, who knows....

p {font-family:"Times New Roman", Times, serif;letter-spacing:-0.03em;font-size:1em;color: #FFFFFF;}
p1 {font-family:"Times New Roman", Times, serif;letter-spacing:-0.03em;font-size:1em;color: #FFFFFF;}

<p align="center">Text</p>
<p1 align="center">Text</p1>

|
Mark as:
Currently Being Moderated

32. MurraySummers,

Mar 25, 2013 8:30 AM in reply to BrainMcBrain

Report

The first bit of code I posted centres the background, the second is top and left aligned. That's how it appears in my browser anyway..

No, it doesn't.

The first bit of code is this -

body {
          background-attachment: fixed;
          background-position: top;
          margin: 0;
          background-image: url();
          background-repeat: no-repeat;
          background-color: #000000;
}

background position is fixed at top (explicitly) and left (by default).

I want the background to be fixed in both scenarios.

Make it so by repeating that background-attachment:fixed style.

<p></p> seems to do what it is told and centres on the page, <p1></p1> on the other hand defaults to the left...?

<p1> is not an HTML tag, but <p> is.

|
Mark as:
Currently Being Moderated

33. BrainMcBrain,

Mar 25, 2013 8:38 AM in reply to MurraySummers

Report

I thought it might be that.

As for the code I posted I can assure you that the background image IS centring in the brower window, whether or not there is anoter piece of code over riding this somewhere, but i don't think so... I checked it out in Chrome and Firefox.

I tested out the exact same code in a new file and entered precisely the following in the body, and it still produces a centred background image.

<style>
body {
          background-attachment: fixed;
          background-position: top;
          margin: 0;
          background-image: url();
          background-repeat: no-repeat;
          background-color: #000000;
}
</style>

|
Mark as:
Currently Being Moderated

34. MurraySummers,

Mar 25, 2013 8:49 AM in reply to BrainMcBrain

Report

I beg your pardon and thank you for the opportunity to educate myself.

W3C says this -

http://www.w3.org/wiki/CSS/Properties/background-position

Typically, the values of this property are specified two values. The first value represents the horizontal position and the second represents the vertical position.
If only one value is specified, the second value is assumed to be 'center'.

My mistake.

|
Mark as:
Currently Being Moderated

35. BrainMcBrain,

Mar 25, 2013 8:52 AM in reply to MurraySummers

Report

No worries. Any idea how to get the text to remain fixed on the background, I don't know what it is that has changed bewteen the two exmaples I posted.

|
Mark as:
Currently Being Moderated

36. MurraySummers,

Mar 25, 2013 8:54 AM in reply to BrainMcBrain

Report

As I said earlier, we'd need to see the code for the page to say anything further.

|
Mark as:
Currently Being Moderated

37. BrainMcBrain,

Mar 25, 2013 9:05 AM in reply to MurraySummers

Report

OK the full text is this-

With this code here, background is centred and the content is scrolling independently.

<!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>

<style>
body {
background-attachment: fixed;
background-position: top;
margin: 0;
background-image: url();
background-repeat: no-repeat;
background-color: #000000;
}
</style>
</head>

<body>
<p align="center" class="style1">text</p>
<div align="center">
<h2 align="center">TEXT</h2>
</div>
</html>

However, if I replace the body selector declarations to this...

body {
          width: 900px;
          height: 1220px;
          background-image: url(backgrounds/greenbrainbackgrounds.jpg);
          background-repeat: no-repeat;
          background-color: #666666;
}

...I get the background on the left, content fixed to background.

I want centred and fixed, if you get what i mean. How do I do that?

|
Mark as:
Currently Being Moderated

38. Nancy O.,

Mar 25, 2013 9:22 AM in reply to BrainMcBrain

Report

Try this:
http://alt-web.com/TEST/Resizable-BG.shtml

Nancy O.

|
Mark as:
Currently Being Moderated

39. BrainMcBrain,

Mar 25, 2013 9:34 AM in reply to Nancy O.

Report

Sorry no. I don't know if I am supposed to edit that text to my requirements, but anyway i tried a few edits and it's either stretching the image to fill the screen or still the same problem as before.

Also, one of my hmtl files, when i add text to the body it isn't appearing in the design tab, but appears in the browers. Bug?

|
Mark as:

1 2 Previous Next

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points

Dreamweaver

Code for moveable text fields?

Mar 23, 2013 9:36 AM

More Like This

Bookmarked By (0)

Answers + Points = Status