Aligning my border

Discussion in 'HTML & Website Design' started by AshtonUK, Jun 24, 2007.

  1. #1
    For some reason my border that im designing at www.stopsimpin.com doesnt align the way i want it when i view it in dreamweaver...how can i align it so what i see is what i get?

    i would like to center it under the banner

    thanks
     
    AshtonUK, Jun 24, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, for starters stop using dreamweaver and learn to code HTML - or at least restrict yourself to code-view for doing that.

    WYSIWYG is inherently broken in concept for HTML because with all the different screen sizes and resolutions, what you see is most likely NOT what the user is going to get, I don't care how you code it. One of the whole POINTS of HTML is to work regardless of resolution and in fact adjust to it.

    Case in point, you ended up with HTML that looks like this:
    
    <div id="apDiv1"></div>
    <div align="center">
      <blockquote>
        <blockquote>
          <blockquote>
            <p align="center"><img src="ssbanner.jpg" width="646" height="224" /></p>
            <p align="center">&nbsp;</p>
            <p align="center">&nbsp;</p>
          </blockquote>
        </blockquote>
      </blockquote>
      </div>
    
    Code (markup):
    For something that should probably be coded as:

    
    <h1>Stop Simpin<span></span></h1>
    
    Code (markup):
    Hang on, I'll make a working sample of what I mean.
     
    deathshadow, Jun 24, 2007 IP
  3. AshtonUK

    AshtonUK Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    ok, i dont understand how that helps me get the grey bar aligned correctly under the banner
     
    AshtonUK, Jun 24, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    And here it is.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <title>Stop Simpin</title>
    
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    
    body {
    	background:#000;
    	text-align:center; /* IE 5.x centering */
    }
    
    #container {
    	width:894px;
    	text-align:left; /* undo IE 5.x fix */
    	margin:0px auto;
    }
    
    h1 {
    	height:217px;
    	font:bold 24px/217px sans-serif;
    	padding-bottom:71px;
    	text-align:center;
    	color:#FFF;
    	background:url(images/horborder.jpg) bottom left repeat-x;
    }
    
    h1 span {
    	display:block;
    	height:217px;
    	background:url(images/ssbanner.jpg) center center no-repeat;
    	margin-top:-217px;
    	position:relative; /* fix depth sorting after margin */
    }
    
    </style>
    
    </head><body>
    
    <div id="container">
    	<h1>Stop Simpin<span></span></h1>
    </div>
    
    </body></html>
    Code (markup):
    and if you don't care about IE5.x or earlier, you could lose that container DIV too.

    One of the keys to good code is minimizing the HTML to content that if you turn image AND/OR CSS off, you still get a meaningful page. The "Stop Simpin" H1 text is hidden behind your image which is in the span - which we 'ride up over it' using the negative margin. Then we can pad the bottom putting the banner there... Moves all the images out of the HTML and into the CSS - where they belong since those are presentational images, not content. (even the logo image)

    Do yourself a favor, drop dreamweaver in the trash, go get a plain text editor (win32pad, edit+, etc) and work with it directly - you'll save yourself heartaches and headaches in the long run.
     
    deathshadow, Jun 24, 2007 IP
  5. danfinney

    danfinney Peon

    Messages:
    25
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Totally disagree on this one. I have hand coded websites WITH Dreamweaver for years. DW automates processes, has great find/replace tools, checks links, DW templates and library items are fantastic, and it allows you to visually navigate your code (meaning you can scroll down click on a logo and in the split-pane hand edit the code).

    I agree with the sentiment that you cannot rely on any WYSIWYG tool, but Dreamweaver is a giant leap above any text-editor.

    Don't even get me going on how much of a time saver it can be with database integrated sites and how much time snipits can save. Not to mention being able to look up those rare CSS commands.
     
    danfinney, Jun 24, 2007 IP
  6. danfinney

    danfinney Peon

    Messages:
    25
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    And now a non-off-topic reply:

    Ashton,

    Dreamweaver's Design Panel will sometimes not display sites accurately. You might find, for instance, that you can see an element in all modern browsers, but it doesn't show up in Dreamweaver. Use Dreamweaver as an outlining tool, and then preview the code in your target browsers.

    I find that dreamweaver does not always display my complex CSS layouts as well as a regular browser. This is not an error in your code, so don't worry.
     
    danfinney, Jun 24, 2007 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Resulting in lazy and sloppy coding habits.

    As would any other good text editor.

    Which is next to useless if you are writing relational/portable (like you should be) without the full source local (which is good to isolate from messing up other pages).

    Bloated buggy outdated crap you are better off NOT using since most of them are broken cross browsers out-of-box anyways.

    Which isn't a concern if you put your content in flow order or use classnames/ID's that actually MEAN something.

    While I find it an overpriced pile of crap that just gets in the way of my writing good code... But then for me Win32pad is all I need. (That and all the better editors are tab based WITHOUT being able to drag and drop the MDI windows out of their parent - which is useless on multi-display)

    Don't even get me started on the number of crap broken database integrated sites I've billed people a grand or two to go in and fix after someone sold them on that malarkey.

    I just have all of the selectable ones of these:
    http://arantius.com/misc/webref/

    linked into my Opera panel.

    Dreamweaver is as much of a blight upon the internet as frontpage - and while you CAN use it just for codeview mode, at that point you are just introducing ANOTHER rendering engine to the mess, are previewing in something completely different from what the user is going to use, and just dropped anywhere from $300 (dw) to $1500 (suite 3) to $80K (get caught with a pirated copy by the Bureau) for something you can do BETTER with a plain jane text editor and the actual browsers people are going to use.

    "Professional Tool" my backside.
     
    deathshadow, Jun 25, 2007 IP
  8. danfinney

    danfinney Peon

    Messages:
    25
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Sounds like you are blaming the tool for operator problems. I utilize the tool effectively, I do not run in to any of the issues you mentioned. Don't forget to take your medicine.
     
    danfinney, Jun 25, 2007 IP
  9. AshtonUK

    AshtonUK Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    i totally dropped dreamweaver and am now using joomla, i have a few questions though

    i would like to remove the horizontal grey bar at the top and bottom of my page, currently my main logo is in the top left and barely visible, the actual image is a lot larger and would like to have it center of my page?

    how would i be able to do this?

    i also would like to remove some of the font such as "main menu" on the nav bar.... any help wud be greatly appreciated

    my site is www.stopsimpin.com
     
    AshtonUK, Jun 25, 2007 IP
  10. AshtonUK

    AshtonUK Peon

    Messages:
    32
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    i see, it can get quite confusing looking at something in the dreamweaver panel which is aligned totally different from how its presented in the window of a browser, i also couldnt tell how i was to truly align it in the center
     
    AshtonUK, Jun 25, 2007 IP