dcsimg
www.webdeveloper.com
Results 1 to 12 of 12

Thread: Div tag and CSS (H1 and P tags not aligning correctly

Hybrid View

  1. #1
    Join Date
    Apr 2013
    Posts
    6

    Post Div tag and CSS (H1 and P tags not aligning correctly

    I am currently developing my first web site its just a sign posting site.. I have a Container DIV which holds everything inside it followed by a Header Div with Logo and Site Navigation (all done as Css3)

    Now I created a Div after this for Main Content of site of which inside this DIV I used the <h1> to give it a heading and an inline style to colour it. Then I wanted to use a <p> after but when I preview in browser (SWR Iron) There is a massive indent on the <p>

    I have tried to fix this my using margin-left but dosn't work..

    I Have some pictures of the code/css and output so you can see whats going on


    Here is my HTML


    <!DOCTYPE html/>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="CSS/main.css">

    <title>Support-Ptsd</title>
    </head>

    <body>
    <div class="Container">
    <div class="Header">
    <div class="Logo"><img src="Pictures/WhiteLogo.png" alt="Support-Ptsd.com"></div>
    <div class="MainMenu">
    <ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="">Finance</a>
    <ul>
    <li><a href="Pages/Benefits.html">Benefits</a></li>
    <li><a href="Pages/WarPension.html">War Pension</a></li>
    <li><a href="Pages/AFCS.html">AFCS</a></li>
    <li><a href="Pages/DLA.html">DLA</a></li>
    <li><a href="Pages/VeteranDiscounts.html">Veteren Discounts</a></li>
    </ul>
    </li>

    <li>
    <a href="">Activtys/clubs</a>
    <ul>
    <li><a href="Pages/Fishability.html">Fishabillity</a></li>
    <li><a href="Pages/SurfAction.html">Surf Action</a></li>
    <li><a href="Pages/Artwork.html">Art Work</a></li>
    </ul>

    </li>

    <li>
    <a href="">Therapies</a>
    <ul>
    <li><a href="Pages/PTSDDog.html">Ptsd dog</a></li>
    </ul>

    </li>
    </ul>

    </div>
    </div>

    <div id="MainContent">
    <h1 style="color:fuchsia;">Currently Under Construction</h1>
    <p> This Site is currently under construction all infomation is for testing purposes untill further notice</p>
    </div>

    <div id="botMenu"><a href="#"> Contact us</a> </div>
    </div>

    </body>
    </html>



    Current CSS


    .Container
    {
    margin:0px;
    padding:0px;
    position:relative;
    height:100%;
    width:1024px;
    left:50%;
    margin-left: -512px;
    }

    .Header
    {
    height:60px;
    background-color:#000000;
    }

    body
    {
    margin:0px;
    padding:0px;

    }

    .Logo
    {
    position:relative;
    top:10px;
    left:-3px;
    }

    .MainMenu
    {
    position:relative;
    left:30%;
    top:-130%;
    list-style:none;
    width:940px;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;
    }
    ul
    {

    font-family: Arial, Verdana;
    font-size: 20px;
    margin: 0;
    padding: 0;
    list-style: none;

    z-index:999;
    }

    ul li
    {

    display: block;
    position: relative;
    float: left;

    }

    li ul { display: none; }

    ul li a
    {

    border-radius: 12px 5px 12px 5px;
    display: block;
    text-decoration: none;
    color: black;
    padding: 5px 15px 5px 20px;
    background:#FFFFFF;
    margin-left: 4px;
    white-space: nowrap;
    }

    ul li a:hover
    {
    background:#FF3399;
    text-decoration: none;
    color: white;

    }

    li:hover ul
    {
    display: block;
    position: absolute;

    }
    li:hover li
    {

    float: none;
    font-size: 20px;
    }
    li:hover a
    {
    background:#FED6F8;
    text-decoration: none;
    color: black;
    }

    li:hover li a:hover
    {
    background:#FF3399;
    text-decoration: none;
    color: white;

    }


    #MainContent{
    position:relative;
    top:50px;
    font-family: Arial, Helvetica, sans-serif;

    }

    #BotMenu{
    background-color:black;
    position:fixed;
    top:98%;
    margin:0px;
    padding:0px;
    width:100%;
    }

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    You've got some real oddities for your positioning.

    I'm sure it has something to do with all these negative margins and top/left positions. I'm not even seeing the H1 inline style you're referencing.

  3. #3
    Join Date
    Apr 2013
    Posts
    6
    OK the H1 Is near the bottom of the HTML code inside the MainContent Div..

    The reasoning for the " Wiered postioning" Is because in CSS I wanted to Dynamical position the Container so it appeared in the middle of the users browsers when they re-sized it. This allows me to do it.

    I am not sure why it might affect other Div's.

  4. #4
    Join Date
    Oct 2012
    Posts
    42
    for the container div, drop the left position and use
    margin-left:auto;
    margin-right:auto;

    this will automatically centre the div horizontally

  5. #5
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    ^^^ What ry_lloyd said.

  6. #6
    Join Date
    Apr 2013
    Posts
    6
    Thank you,
    That is a less complicated way to achieve the effect I wanted with center positioning. It didn't solve my initial problem.

    It seems to me that using the Margin in CSS affects the margin of the whole document.

    .MainMenu
    {
    position:relative;
    left:30%;
    top:-130%;
    list-style:none;
    width:940px;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;
    }

    The margin in this DIV is what seems to be causing the problem. Removing it makes the <h1> and <p> tags appear normal However it has an adverse effect and ruins my menu positioning and the postioning of the links within.

    However that said I would prefer to display the menu as a horizontal menu anyway IE Each level within the menu is a horizonital drop down list and not vertical one.

  7. #7
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    remove the "left: 30%;" and "top: -130%;"

  8. #8
    Join Date
    Apr 2013
    Posts
    6
    Seriously are you trolling me now? How can i position the menu in the right place if i take out the Left and TOP positioning?

    should I take some of this out of the external style sheet and place it Inline? would that make the difference?

  9. #9
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Are you familiar with floats and margins? The type of positioning your using is bad practice for layouts.

    And no, you don't want to move things inline. External stylesheets are the way to go.

  10. #10
    Join Date
    Apr 2013
    Posts
    6
    NO I am not particularly familiar I am learning a great deal from you here. I havn't done any webdesign since i was 16 I am now 27.. A lot of what I done is from memory and stuff when i done web design before CSS had only just come in.....

    SO you saying I want to float the div and then set the margin left? how do i Control the top position in this way though? maybe i need some tutorials to help me understand better

    I am quite interested in learning JavaScript don't know where to start lol so much to learn all at once hahaha but i love the learning

  11. #11
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Archiac,

    Do you have a screenshot of the design you're trying to create? It may be best if I show you a simple example to achieve your desired layout.

  12. #12
    Join Date
    Apr 2013
    Posts
    6

    menu

    What I would like is for the menu to look like this

    ----------------------------------
    - Menu 1 ----Menu 2---- Menu 3 -
    -----------------------------------

    then the second level of each of theses to llook the same

    |----------------------------------|
    |- Menu 1 ----Menu 2---- Menu 3 -|
    |--- --------------------------|
    |- Sub Menu 1,1 --- Sub menu 1,2- |
    |-----------------------------------|

    ----------------------------------
    - Menu 1 ----Menu 2---- Menu 3 -
    ------------- --------------------------
    - -------- Sub Menu 2,1 --- Sub menu 122----
    ----------------------------------------


    Instead of the current standarded Menu 1
    sub1
    sub2
    sub3

    However I have just learned that may be using a Content management system would be a better way for me to go?

Thread Information

Users Browsing this Thread

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

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