locked
Simple Question: Adding a space before a div RRS feed

  • Question

  • I created a new page with one div (the code is below) in EW3 and the div by default goes to the very top of the page.  How do I put a space before the div?  In other words, how do I get on top of the div in EW3 so I can hit enter on the keyboard to move the div down one line?

    Thanks in Advance.

    <!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 content="text/html; charset=windows-1252" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    </head>

    <body>

    <div>
    </div>

    </body>

    </html>


    Tony
    Friday, October 15, 2010 2:47 PM

All replies

  • .topspace {margin-top: 1em;}

    <div class="topspace">
    content
    </div>

    Or put padding on the body element: body {padding-top: 1em;}


    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Friday, October 15, 2010 2:58 PM
  • Don't work in design view.

    Seriously, design view is loath to have the cursor located anywhere outside of an element. Instead of doing this, work in split view, find the opening div tag for the div you're talking about, and add your line-break or content container before that opening tag. Once it is created in code (split) view it will appear in design view when you click down there.

    [EDIT: Cheryl understood your question better than I did. When I re-read it after seeing her post I saw that what you were after was not to insert actual content above the div, but simply to move its position down. In that case, her response addresses your question more accurately, so please mark her response as the answer.]

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Friday, October 15, 2010 3:00 PM
  • I understand you can add padding, but I think this is a yes or no question and that's why it's driving me crazy.  If I cut everything on the page the cursor will appear at the top of the page and all I have to do is hit enter and then paste what I cut.  That solves the problem, but there has to be an easier way.

    Ignoring the code for a moment, is there a way to do that?

     


    Tony
    Friday, October 15, 2010 4:18 PM
  • What do you mean by "space"?

    To add a paragraph (or other HTML tag) before the <div> in Design or Split view:
    Make sure the Quick Tag Selector (QTS) is showing (View->Quick Tag Selector)
    Select the <div> on the QTS
    From the dropdown, select Insert HTML
    Type in the HTML required (example: <p>&nbsp;</p>
    Click the green arrow.

    The Inserted HTML will go before the <div>

    If all you want is a blank space, then add margin or padding to the <div> as Cheryl described.


    Ron Symonds
    Microsoft MVP (Expression Web)

    www.rxs-enterprises.org/fp
    Friday, October 15, 2010 4:34 PM
  • "Ignoring the code for a moment, is there a way to do that?"

    Yes. Take the time to learn something about HTML and how a Web page actually works. You can't just "ignore the code," because the code IS the page. Design view is a simple approximation of what the code builds. To actually see the true expression of the code you must preview in browser.

    EW is NOT a WYSIWYG tool. No Web development tool is, or can be, in the sense that a DTP layout tool, or even a word processor, can be. In a properly structured, valid page, there are no blank spaces . None . Everything on the page is in a container, and if you don't understand those containership relationships, and pardon me, but you clearly don't, you will not be able to develop for the modern Web.

    You cannot work exclusively in design view. If you try, you are doomed to failure and frustration, and anything you produce is almost certain to break badly in one or more, or even all, standards-compliant browsers.

    Stop and take the time to avail yourself of the learning resources listed in the BEFORE POSTING thread. Download, watch, and work through Cheryl's "Build A Basic Web Site" video tutorial. Then take the HTML and CSS courses available, free, at w3schools. Then you will understand more about what goes on in a Web page and how it actually works.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Friday, October 15, 2010 4:42 PM
  • "Yes. Take the time to learn something about HTML and how a Web page actually works. You can't just "ignore the code," because the code IS the page. Design view is a simple approximation of what the code builds. To actually see the true expression of the code you must preview in browser."

    Ok, here we go again.  I asked a simple question. A valid question.  A curious question. The arrogance of your response is common in this forum; when I make a post I know it's a matter of time before I get an answer like yours.

    FYI: you don't know what I know, and I'm not looking to be judged, I was just looking for a simple answer.


    Tony
    Friday, October 15, 2010 4:51 PM
  • Quite simply, all I want to do is enter a line, just like if I had hit enter in Microsoft Word.  That's all.


    Tony
    Friday, October 15, 2010 4:53 PM
  • Tony,

    I would have to agree that without understanding how the layout of a "Web Page" works you will become quite frustrated quite quickly. Although I think this is a band-aid to your solution maybe by positioning your div to relative you might get closer to what you want? Doing this you can at least drag the div where you want, but again this I dont think this will be your long-term answer. Hope that helps somehow.

    Good Luck!

    Friday, October 15, 2010 5:03 PM
  • I agree with you 100%.  Having stated that, if you are underneath a div, I know you can hit the enter key while in EW3 to go down a line, but for some reason you cannot get above the div to do the same.

    In general, my issue with this forum is that it is an EW forum and not a css forum.  I agree, css is important, without a doubt, but sometimes I have questions as it relates to the quirks of the software and not the css, as is the case here.

    Thanks.


    Tony
    Friday, October 15, 2010 5:12 PM
  • "all I want to do is enter a line, just like if I had hit enter in Microsoft Word"

    That will be entering a new paragraph
    <p>....</p>, as in my previous post. In my opinion, it is easier in code view than the described method.

    There is no such thing as a simple line in a web page.


    Ron Symonds
    Microsoft MVP (Expression Web)

    www.rxs-enterprises.org/fp
    Friday, October 15, 2010 5:14 PM
  • "Doing this you can at least drag the div where you want, but again this I dont think this will be your long-term answer"

    Tony, Please do NOT take advice to do that.  Creating layers for no needed reason will break a page in a heartbeat, no matter how good it looks in Design View.  Read the many threads on this forum about broken pages when text is resized in the browser.

    Now,

    Design View is not Word, and a web page is not like a word document.

    "enter a line": meaning what?  Another div?  A paragraph?  A newline within an existing paragraph? Space (padding, margin)?

    Work in Split View, and use Code View when it's faster and easier.  For example, if all you are asking is how to put your cursor in front of the first div on a page, the fastest thing to do is simply put the cursor in front of the <div> tag in Code View.

    If you mean a new line in front of the content in that div, but still within the div, just put your cursor in front of the first word and hit "enter".

     If you mean something else by "enter a line", please elaborate.
    Friday, October 15, 2010 5:17 PM