Skip navigation
BrainMcBrain
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-

 

<div> <img src="image" width="300" height="466" alt="" style="position: absolute; top: 68px; left: 280px;/&gt;&lt;/p&gt;

  &lt;p class="style2"></div>

 

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

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Mar 23, 2013 9:43 AM   in reply to BrainMcBrain

    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
    Mar 23, 2013 10:33 AM   in reply to BrainMcBrain
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 12:10 PM   in reply to BrainMcBrain

    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.

     

    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
    Mar 23, 2013 12:30 PM   in reply to BrainMcBrain

    What are you missing? This -

     

    <body>

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

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

    </body>

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 12:43 PM   in reply to BrainMcBrain

    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
    Mar 23, 2013 12:56 PM   in reply to BrainMcBrain

    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
    Mar 23, 2013 1:01 PM   in reply to BrainMcBrain

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 1:10 PM   in reply to BrainMcBrain

    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
    Mar 24, 2013 7:39 AM   in reply to BrainMcBrain

    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
    Mar 24, 2013 10:08 AM   in reply to BrainMcBrain

    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
    Mar 24, 2013 10:13 AM   in reply to BrainMcBrain

    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
    Mar 24, 2013 10:53 AM   in reply to BrainMcBrain

    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
    Mar 24, 2013 11:30 AM   in reply to BrainMcBrain

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 8:03 AM   in reply to BrainMcBrain

    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
    Mar 25, 2013 8:30 AM   in reply to BrainMcBrain

    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
    Mar 25, 2013 8:49 AM   in reply to BrainMcBrain

    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
    Mar 25, 2013 8:54 AM   in reply to BrainMcBrain

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 9:22 AM   in reply to BrainMcBrain
     
    |
    Mark as:
1 2 Previous Next

More Like This

  • Retrieving data ...

Bookmarked By (0)

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