div not moving

Discussion in 'CSS' started by gameathlete, Dec 3, 2013.

  1. #1
    Can someone please assist me. I'm new to CSS, I've created this page: http://www.learnpceasy.com/example2/dad.html and I cannot get the arrow (.arrow) to move at all. I've tried to edit the "top", "right" and "bottom" attributes but it won't move can anyone assist me? Thank you in advance.
     
    gameathlete, Dec 3, 2013 IP
  2. homer7

    homer7 Well-Known Member

    Messages:
    268
    Likes Received:
    25
    Best Answers:
    4
    Trophy Points:
    125
    #2
    Hi
    you have a lots of invalid css rules
    don't leave space between the value and unit and always end your rule with semicolon, e.g
    top:300px;
     
    homer7, Dec 3, 2013 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    You've got a LOT of problems there -- I'm not sure where you are trying to position that arrow, but on the whole you seem to be relying on broken positioning methods and endless DIV/classes for nothing garbage. The markup is a terror with it's complete lack of semantics -- like using two DIV to do blockquote and CITE's job, DIV to do a FORM's job, non-breaking spaces inside paragraphs to do padding or margin's job, attributes like bgcolor, topmargin, leftmargin, marginwidth, etc, etc, that have no business in any HTML written after 1997, and of course no doctype so good luck getting that working consistently across browsers. You don't even have anything resembling properly formed markup since you're opening a DIV before BODY (div can only go INSIDE body), closing a form tag that doesn't seem to be opened, etc, etc...

    I'd be willing to toss together a quick example rewrite for you with a breakdown/explanation -- but first I need to know what you're trying to accomplish since I'm seeing four different layouts in four different browsers...
     
    deathshadow, Dec 4, 2013 IP
  4. gameathlete

    gameathlete Active Member

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #4
    Thank you guys for all of your help and my apologies on being such a noob. I really need to familiarize myself with the rules of layouts and positioning..as you can see I'm clueless. Deathshadow thank you for your detailed explanation, I was unaware of 100% of what you shared with me. In short I saw this website (http://mondezhollomon.com/) and I wanted to create something similar. I wanted the red arrow to point to the form and for the rest of the elements I just wanted to position them so that they would be symmetrically pleasing to the eye. (I planned to experiment with the positioning of them until It looked good). And of coarse I wanted the layout to look the same on all of the browsers.
    What is your recommendation for someone like me who knows just enough to create a mess but not enough to know the rules that can help me clean this mess up? (any books, videos, etc.) Thank you in advance.
     
    gameathlete, Dec 4, 2013 IP