www.webdeveloper.com
Results 1 to 7 of 7

Thread: divs to place where I placed them in dreamweaver??

Hybrid View

  1. #1
    Join Date
    Nov 2009
    Posts
    3

    Question divs to place where I placed them in dreamweaver??

    So me and my daughter have been working on this website and have gotten it to be centered with different browser windows and resolutions. Web designing is very new to me so I don't understand a lot of it. Anyway, I am trying to get the nav bar to move in bigger monitor sizes. In my daughter's monitor(smaller), the navbar shifts to the right a bit. And in my computer(larger) the nav bar shift a lot to the right. How do I get the nav bar to be in the position I placed it in dreamweaver??

    The site we are working on: www.gangsterpb.com/index2

    And if you want to see the old site (not centered and bigger): www.gangsterpb.com

  2. #2
    Join Date
    Nov 2009
    Location
    UK, Lancs
    Posts
    33

    No probs...

    Here is what you need to do:

    First of all paste this code in to the <HEAD> section of your document:
    <style type="text/css">
    .navCentered
    {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    }
    </style>

    Then click the image you wish to centre and go to insert > Layers > Div

    Now the second drop down the second drop down menu and you should be able to select navCentered

    Click OK.

    Done.

    By the way I wrote this without having dreamweaver open so sorry it isn't perfect. I think the second form says ID.

    This will also be in the middle no matter what the resolution, known as being fluid by the way.

    Hope this helps

  3. #3
    Join Date
    Nov 2009
    Posts
    3
    Well I'm not trying to center the main content just place the nav bar on the left to move with the content that already centers automatically..

  4. #4
    Join Date
    Nov 2009
    Location
    UK, Lancs
    Posts
    33
    The link doesn't work, can you fix it so I can see what the problem is?
    I don't understand.

  5. #5
    Join Date
    Nov 2009
    Posts
    3
    I'm not worried about what it links to right now. Its that the div is supposed to be right under the word menu in different browser windows, because in my daughter's screen, which is way smaller than mine, the div appears to be a little to the right and on my screen its WAY off to the left.

  6. #6
    Join Date
    Nov 2009
    Location
    UK, Lancs
    Posts
    33
    To be honest...haven't a clue. Hopefully someone else on here can help!

  7. #7
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    Probably your best alternative for this is to use a 2 column css layout. Cut up the image GGPageSmall.gif into the individual components (left_top, left, center_banner, center_nav, center_content, right, right_bottom) and use these as backgrounds for the appropriate div.
    your layout would be something like this...
    HTML Code:
    <body>
    <div id="container">
    	<div id="left_col">
    		<div class="left_top">
    		</div>
    		<div class="left">
    		</div>
    		<div class="left">
    		</div>
    		<div class="left">
    		</div>
    	</div>
    	<div id="center_col">
    		<div class="center_banner">
    		</div>
    		<div class="center_nav">
    		</div>
    		<div class="center_content">
    		</div>
    	</div>
    	<div id="right_col">
    		<div class="right">
    		</div>
    		<div class="right">
    		</div>
    		<div class="right">
    		</div>
    		<div class="right_bottom">
    		</div>
    	</div>
    </div>
    </body>
    Smaller images, re-usable css classes for the divs that are really the same and you have control over the design with css...
    Oh... and you use REAL TEXT instead of putting everything in images.

    I would suggest putting Dreamweaver away and learning some basic html and css... in the end life will be a lot easier.
    ...but stupidity is terminal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles