Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
Like Tree1Likes
  • 1 Post By Vapr_Arts

Thread: What would fix this? Small issue, making progress

  1. #1
    Junior Member
    Join Date
    Jul 2014
    Posts
    23
    Member #
    39721

    What would fix this? Small issue, making progress

    So,

    I've really cleaned up the code, embracing and expanding my knowledge of writing css out, long hand...after many hours of over complicating things.

    Here's the problem: The #content div is supposed to reside on the immediate right side of the #nav div, which it does. However, it (#content div) is landing behind the #nav div, causing the 270 pixel width of the nav div to block it out.

    I've tried a few things, relative positioning of the nav div, for example. But this is what the code all looked like before I started trying any fixes. The #nav is floated left and cleared : both. I've tried no clearing, clear right, clear left. Seems like it should be pretty simple, but it eludes me.



    <html>
    <head>
    <title>anewone</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Save for Web Styles (anewpunk.psd) -->
    <style type="text/css">
    <!--
    /' good css '/

    *{margin:0; padding:0}

    body {background-color:#000}

    #wrapper {width:1124px; height:auto}

    #header {width: 1124px; height: 333px; background-image: url(../../../Documents_01.jpg);}

    #nav {width: 270px; height: 1086px; float: left; clear: both;}

    #content {width: 684px; height: 1086px; background-image: url(../../../Documents_03.jpg)}

    #right nav {width:170px; height:1086px}

    #footer {width:1124px; height:294px}

    -->
    </style>
    <!-- End Save for Web Styles -->
    </head>
    <body>
    <div id="wrapper">

    <div id="header"></div>
    <div id="nav"><img src="../../../Documents_02.jpg"></div>
    <div id="content"></div>
    <div id="content"></div>
    <div id="right nav"></div>
    </div>


    </body>
    </html>

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Why do you have 2 nav and content elements?

    Also for nav you can use html5 tags <nav></nav> same with the header and footer.

    Id delete the #right nav and extra content div. then add a display: block; to both.

    Whats the image in the nav? The documents_2 jpeg?

  4. #3
    Junior Member
    Join Date
    Jul 2014
    Posts
    23
    Member #
    39721
    The image path I simply edited for the sake of this post. The extra content div should actually be the 'right nav' div, from when I was copying and pasting.

    Just to clarify about what you meant in the html5 tags comment, you're saying take out the / in the </div> closing? Also, how/why would I add a display block to a deleted tag?

    Also, I think I fixed my original problem, just needed a float in the content tag as well. Here's the revised.

    <html>
    <head>
    <title>anek</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Save for Web Styles (anewpk.psd) -->
    <style type="text/css">
    <!--
    /' good css '/

    *{margin:0; padding:0}

    body {background-color:#000}

    #wrapper {width:1124px; height:auto}

    #header {width: 1124px; height: 333px; background-image: url(../..jpg);}

    #nav {width: 270px; height: 1086px; float: left; clear: both;}

    #content {
    width: 684px; height: 1086px; background-image: url(./03.jpg); float: left;}

    #right {width:170px; height:1086px}

    #footer {width: 1124px; height: 294px; background-image: url(../../../D_05.jpg); background-repeat: no-repeat; background-position: bottom;}

    -->
    </style>
    <!-- End Save for Web Styles -->
    </head>
    <body>
    <div id="wrapper">

    <div id="header"></div>
    <div id="nav"><img src="http://www.webdesignforums.net/forum/html-css-help/html-css-help/..2.jpg"></div>
    <div id="content"></div>
    <div id="right"></div>
    <div id="footer"></div>
    </div>


    </body>
    </html>
    Last edited by middy; Aug 03rd, 2014 at 03:18 PM.

  5. #4
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times

    What would fix this? Small issue, making progress

    Html5 tags are alternatives to divs. Example being you can use tags instead of the same can be done for header and footer and div tags

    You wouldnt have to redo your rules for ur nav div once you change it either just erase the # from #nav and your good to go

    Display block wasnt to delete the div, to be honest i think i started to explain something and went in a different direction because i cant remember where i was going with that advice. Sorry about that. I am using my phone and i go back in forth with what i write i tend to so that at times im in a hurry
    middy likes this.

  6. #5
    Junior Member
    Join Date
    Aug 2014
    Posts
    7
    Member #
    39789
    Try using HTML5 tags for your project. You can place div's inside if you need to. Take off the #'s.

    ex:
    header {
    display:block;
    }

    then maybe like

    #main-header {
    width:
    height:
    background:
    }

    #wrapper {
    width:
    }

    <wrapper>
    <header id="main-header">
    ...nav...etc.
    </header>
    ...etc.
    </wrapper>
    ...etc.

  7. #6
    Junior Member Mikasa Ackerman's Avatar
    Join Date
    Aug 2014
    Posts
    21
    Member #
    39814
    Liked
    6 times
    Quote Originally Posted by tlatch89 View Post
    Try using HTML5 tags for your project. You can place div's inside if you need to. Take off the #'s.

    ex:
    header {
    display:block;
    }

    then maybe like

    #main-header {
    width:
    height:
    background:
    }

    #wrapper {
    width:
    }

    <wrapper>
    <header id="main-header">
    ...nav...etc.
    </header>
    ...etc.
    </wrapper>
    ...etc.

    I've never seen the <wrapper> tag, and can't find a reference to it anywhere. There are lots of new tags in HTML five, among them are

    • <section>
    • <nav>
    • <hearer>
    • <footer>
    • <aside>


    but they must be referenced as tags in the style sheet (not as IDs with a #), and as I said I've never seen a <wrapper> tag.

    tlatch89, You've declared wrapper as an ID in your CSS but then used it as its own tag in the HTML. I don't understand that. Am I missing something?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:53 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com