Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning Help

    Hello
    I will not be the first, nor the last, noober to ask for help so I thank you for your patience in advanced.
    I am using DW CC6 and having an issue with positioning and with extra spaces on top of page, below header and around navigation bar.
    I want to eliminate all spaces at top, under header/between start of nav bar.


    Here is my code for the top of the page

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Get Out To Hunterdon</title>
    <style type="text/css">
    #wrapper {
        width: auto;
        margin: 0 auto;
    }
    #top {
        text-align: center;
        color: rgba(252,251,251,1.00);
        background-color: rgba(0,0,0,1.00);
        font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    #mainnav {
        background-color: rgba(247,251,247,1.00);
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        width: auto;
    }
    #MainLeft {
        background-color: rgba(255,251,251,1.00);
        float: left;
        height: 620px;
        width: 610px;
        margin-right: auto;
        margin-left: auto;
        font-family: adamina;
        font-style: normal;
        font-weight: 400;
        color: rgba(0,0,0,1.00);
        font-size: large;
        line-height: normal;
    }
    #rightside {
        background-color: rgba(8,78,3,1.00);
        float: right;
        height: 200px;
        width: 400px;
    }
    #rightsidebeneath {
        background-color: rgba(22,21,175,1.00);
        float: right;
        width: 400px;
        height: 200px;
        clear: none;
    }
    .Highlights {
        background-color: rgba(251,159,8,1);
    }
    .Highlights {
        float: left;
        height: 150px;
        width: 340px;
    }
    .contentbox {
        background-color: rgba(11,221,239,1.00);
        height: 200px;
        width: 335px;
        float: left;
        margin-left: 2px;
        margin-top: 15px;
        display: inline-block;
        -webkit-transition: all 1s ease-in-out .5s;
        -o-transition: all 1s ease-in-out .5s;
        transition: all 1s ease-in-out .5s;
    }
    #footer {
        background-color: rgba(6,249,41,1);
        height: 100px;
        width: auto;
        clear: both;
    }
    h1 {
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 600;
        text-align: center;
        white-space: normal;
        font-size: large;
        text-decoration: none;
    }
    p {
        text-align: left;
        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        font-style: inherit;
        font-weight: 400;
        font-size: 14px;
        padding-left: 12px;
        padding-right: 8px;
        letter-spacing: 0em;
        word-spacing: -1pt;
        line-height: normal;
        position: static;
        visibility: inherit;
    }
    #ul {
        list-style-type: none;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 700;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        bottom: 0px;
        top: -39px;
    }
    #mainnav a {
        width: 12.5%;
        display: block;
        float: left;
        text-align: center;
        text-decoration: none;
        background-color: rgba(3,59,11,1.00);
        color: rgba(249,238,238,1.00);
        padding-bottom: 6px;
        bottom: 31px;
        -webkit-box-sizing: inherit;
        -moz-box-sizing: inherit;
        box-sizing: inherit;
        margin-bottom: 10px;
        height: 20px;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        padding-top: 6px;
    }
    #mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
        text-decoration: none;
        background-color: rgba(4,137,7,1.00);
    }
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        width: auto;
    }
    #slideshow {
        float: right;
        height: 220px;
        width: 400px;
        background-color: rgba(247,6,10,1.00);
    Last edited by VIPStephan; 08-16-2014 at 08:13 PM. Reason: added code BB tags

  • #2
    New Coder
    Join Date
    Aug 2014
    Posts
    97
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Without a screen shot or a link to the page it's difficult to know exactly what you're talking about but I think most likely relates the default margin/padding of the body in the browser. Put this at the top of your css. If that doesn't work then you'll want to post a screen shot or a link to the page in question.
    Code:
    body {
        margin: 0px;
        padding: 0px;
    }

  • #3
    New Coder
    Join Date
    Aug 2014
    Posts
    97
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Oh also, please make sure the use the forums code tags to post code, so that it is easier for use to read. You need to hit the "Go Advanced" button at the bottom to get to the page that has the code tag buttons on it, or once you learn how the tags look you can simply type them in the quick reply box as you go.

  • #4
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by fastsol View Post
    Oh also, please make sure the use the forums code tags to post code, so that it is easier for use to read. You need to hit the "Go Advanced" button at the bottom to get to the page that has the code tag buttons on it, or once you learn how the tags look you can simply type them in the quick reply box as you go.
    Will do
    Tried the new body code
    didn't change
    I was thinking I messed up the #top margins (the black background around header image) or Is the order of {} important?
    Positioning Help-htdwebsite.jpg

  • #5
    New Coder
    Join Date
    Aug 2014
    Posts
    97
    Thanks
    0
    Thanked 18 Times in 18 Posts
    I see now that you already had a "body" css rule, you had just put it towards the bottom, which is ok but generally a broad rule like that goes at the very top of the css. Your picture is a little small for us to see things very well. At this point I think you need to post the entire html of the page that includes all the divs and such. You're asking for us to look at stuff that you haven't given the code for. Also please explain better based on the exact names of the divs what you're trying to do. It's been confusing when you say "top" cause you have div id of top but I'm not sure if you mean that or the top of the page. It's generally a good practice to give your ids of things specific names and not generalized names like "top" cause that doesn't tell you, me or anyone else what that is supposed to be or do.

  • #6
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by fastsol View Post
    I see now that you already had a "body" css rule, you had just put it towards the bottom, which is ok but generally a broad rule like that goes at the very top of the css. Your picture is a little small for us to see things very well. At this point I think you need to post the entire html of the page that includes all the divs and such. You're asking for us to look at stuff that you haven't given the code for. Also please explain better based on the exact names of the divs what you're trying to do. It's been confusing when you say "top" cause you have div id of top but I'm not sure if you mean that or the top of the page. It's generally a good practice to give your ids of things specific names and not generalized names like "top" cause that doesn't tell you, me or anyone else what that is supposed to be or do.
    Top refers to top div, header refers to header div, etc
    hope I pasted this correctly
    Here is a link to a larger image html, css | Great Expectations Marketing

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Get Out To Hunterdon</title>
    <style type="text/css">
    #wrapper {
        width: auto;
        margin: 0 auto;
    }
    body {
        margin: 0px;
        padding: 0px;
    }
    #top {
        text-align: center;
        color: rgba(252,251,251,1.00);
        background-color: rgba(0,0,0,1.00);
        font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    #mainnav {
        background-color: rgba(247,251,247,1.00);
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 200;
        width: auto;
    }
    #MainLeft {
        background-color: rgba(255,251,251,1.00);
        float: left;
        height: 620px;
        width: 610px;
        margin-right: auto;
        margin-left: auto;
        font-family: adamina;
        font-style: normal;
        font-weight: 400;
        color: rgba(0,0,0,1.00);
        font-size: large;
        line-height: normal;
    }
    #rightside {
        background-color: rgba(8,78,3,1.00);
        float: right;
        height: 200px;
        width: 400px;
    }
    #rightsidebeneath {
        background-color: rgba(22,21,175,1.00);
        float: right;
        width: 400px;
        height: 200px;
        clear: none;
    }
    .Highlights {
        background-color: rgba(251,159,8,1);
    }
    .Highlights {
        float: left;
        height: 150px;
        width: 340px;
    }
    .contentbox {
        background-color: rgba(11,221,239,1.00);
        height: 200px;
        width: 335px;
        float: left;
        margin-left: 2px;
        margin-top: 15px;
        display: inline-block;
        -webkit-transition: all 1s ease-in-out .5s;
        -o-transition: all 1s ease-in-out .5s;
        transition: all 1s ease-in-out .5s;
    }
    #footer {
        background-color: rgba(6,249,41,1);
        height: 100px;
        width: auto;
        clear: both;
    }
    h1 {
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 600;
        text-align: center;
        white-space: normal;
        font-size: large;
        text-decoration: none;
    }
    p {
        text-align: left;
        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        font-style: inherit;
        font-weight: 400;
        font-size: 14px;
        padding-left: 12px;
        padding-right: 8px;
        letter-spacing: 0em;
        word-spacing: -1pt;
        line-height: normal;
        position: static;
        visibility: inherit;
    }
    #ul {
        list-style-type: none;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 700;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        bottom: 0px;
        top: -39px;
    }
    #mainnav a {
        width: 12.5%;
        display: block;
        float: left;
        text-align: center;
        text-decoration: none;
        background-color: rgba(3,59,11,1.00);
        color: rgba(249,238,238,1.00);
        padding-bottom: 6px;
        bottom: 31px;
        -webkit-box-sizing: inherit;
        -moz-box-sizing: inherit;
        box-sizing: inherit;
        margin-bottom: 10px;
        height: 20px;
        font-family: source-sans-pro;
        font-style: normal;
        font-weight: 400;
        padding-top: 6px;
    }
    #mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
        text-decoration: none;
        background-color: rgba(4,137,7,1.00);
    }
    
    #slideshow {
        float: right;
        height: 220px;
        width: 400px;
        background-color: rgba(247,6,10,1.00);
    }
    .contentbox:hover {
        top: 0px;
        -webkit-transform: 1;
        -o-transform: 1;
        transform: 1;
        bottom: 0px;
    }
    a {
        font-weight: bold;
        text-decoration: none;
    }
    a:link {
        color: rgba(252,179,5,1.00);
    }
    a:visited {
        color: rgba(8,248,5,1.00);
    }
    a:hover, a:active, a:focus {
        color: rgba(32,143,10,1.00);
        text-decoration: underline;
    }
    
    </style>
    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2,n4,n7,n6:default;adamina:n4:default.js" type="text/javascript"></script>
    </head>
    
    <body>
    <div id="wrapper">
      <header id="top">
        <h4>Get Out To Hunterdon County</h4><img src="Images/HunterdonWebGraphics/homepageheaderlogo.png" alt=""/></top></header>
        <nav id="mainnav">
          <p><a href="index.html">Home</a></p>
          <p><a href="Inns.html">Inns</a></p>
          <p><a href="Dine.html">Dine</a></p>
          <p><a href="Wineries.html">Wineries</a></p>
          <p><a href="Stay.html">Stay</a></p>
          <p><a href="Getout.html">Get Out</a></p>
          <p><a href="#">Events</a></p>
          <p><a href="#">About Us</a></p>
        </nav>
      <article id="MainLeft">
          <h1>Get Out To Hunterdon County</h1>
        <p>Welcome to ultimate repository of information about all the wonderful  things to do in Hunterdon Country, New Jersey. Our purpose here is to be the  central location to find all of the fun, elegant and interesting things to do  in the County. Casual elegance is the style when experience the best of the new  and old. <br>
              Hunterdon County offers so many things for you to Get Out and Do. Inns,  Wineries, Fine Dining, Casual Dining, and romantic places to stay. In between  the activities Hunterdon offers encompasses Air, Water and Land. Almost every  month, there are tours, events, competitions for all walks of life. Home to  great artists and artisans, a studio trip is a must. There are numerous places  to shop for unique items. <br>
              River towns, old mill towns, historic towns and even a city make up the  &ldquo;centers&rdquo; of the county, with rolling hills and farmland interspersed between  destinations. History plays a big part in the county, from re-enactments, to  exhibits and displays. Our roots pre-date the American Revolution and you will  feel as if you stepped back in time at many of our historical locations. There  are many more places to see our country&rsquo;s history as it evolved, from authentic  steam railroading to the beginnings of the industrial revolution.<br>
              Each town seems to have its own flavor that will enrich you, from  concerts, to town events such as Bastille Day in Frenchtown, The great bed race  of Milford, The re-enactment of the Lindberg Kidnapping  Trial to the ShadFest In Lambertville.<br>
              All of this so close to Philadelphia (40 minutes) and Manhattan  (1+hour), that day and weekend trips are just what you need to get back to your  roots.<br>
              Get out to Fine Dining, Wineries, Outdoor Activities (Air, Water and  Land), Romantic places to stay, Historic Sites,   Exquisite Arts to experience along with some cool events. <br>
              Get Out and experience Hunterdon County for a great adventure. So  close, yet it seems like you are worlds away. 1+ hour out of Manhattan, 40  Minutes from Philadelphia. </p>
    <span style="text-align: left;"></span> </article>
      <aside id="rightside">Premier Advertising site
        </aside>
        <article id="slideshow">Content for  id "slideshow" Goes Here</article>
      <aside id="rightsidebeneath">Day Plans for This Week<form><input type="email"></form></aside>
      <div class="contentbox">Content for  class "contentbox" Goes Here</div>
      <div class="contentbox">Content for  class "contentbox" Goes Here</div>
      <div class="contentbox">Content for  class "contentbox" Goes Here</div>
        <footer id="footer"><span style="">Content</span> for  id "footer" Goes Here</footer>
      </header>
    </div>
    </body>
    </html>
    Last edited by VIPStephan; 08-16-2014 at 08:14 PM. Reason: added code BB tags

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,436
    Thanks
    23
    Thanked 629 Times in 628 Posts
    width: auto; is the default value. It does not need to be used, but margin: 0 auto; needs to have a width. Try something like this:
    #wrapper {
    width: 960px;
    margin: 0 auto;
    }

    and maybe
    #mainnav {
    width: 100%;
    }

    From the image you uploaded it looks like it's too
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Post #6 was in moderation queue; I’ve approved it and it’s visible now, please note.

  • #9
    New Coder
    Join Date
    Aug 2014
    Posts
    97
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Ok I can't be 100% sure cause I don't have the image of the header to put in my test page, but it looks like the margin of the h4 is the cause of your gap above the nav. I suggest using a reset css file to make all browsers defaults the same. Put this code in a reset.css file and include it on the page BEFORE your other css.
    Code:
    /*////////////// CORE FILE DO NOT MODIFY ////////////////////*/
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    caption, article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    That will give you a clean start for all elements, granted now you'll have to style all the elements cause all of their default styling will be gone, but this is the best way to do css in the modern age. Also you should really move all the styles on the your page to an actual css file, rather than in the head of the page, it's just bad practice the way you have it.


  •  

    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
    •