Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Topics

Recent Blog Entries

Recent Status Updates

View All Updates

Popular Tags


Photo
- - - - -

Problems with layout of html document

Started by thatsme , Sep 11 2011 11:03 AM
HTML

  • Please log in to reply
4 replies to this topic

#1 thatsme

thatsme

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 218 posts

Posted 11 September 2011 - 11:03 AM

Hi, i am expereincing some terrible problems with the layout of html. I spent hours, but i cannot find what is wrong. My html and css look right. In this picture http://i53.tinypic.com/2nu7lud.png you can see whats is not working. Dark blue div (id=mainContentArea) should be below menu. You can see only part of menu. Menu is light blue and white div with letter C. Also you can see that letters in dark blue div (ktitle..) are way too far from the top of div. I did not apply any css to them to be so far. My code is here:
<!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" lang="en">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8"/><title></title>
            <script language="javascript" src="http://localhost/IPN/js/ipnews.js"></script>
            <script language="javascript" src="jquery.js"></script>
            <link rel="stylesheet" type="text/css" href="http://localhost/IPN/css/pageBackground.css"/>
            <link rel="stylesheet" type="text/css" href="http://localhost/IPN/css/variuosStyles.css"/>
            <link rel="stylesheet" type="text/css" href="http://localhost/IPN/css/header.css"/>
            <link rel="stylesheet" type="text/css" href="http://localhost/IPN/css/contentAreaStyle.css"/>
            <link rel="stylesheet" type="text/css" href="http://localhost/IPN/css/links.css"/>
            <link rel="stylesheet" type="text/css" href="http://localhost/IPN/css/menu.css"/>
        </head>
        <body id="pageBackground">
            <div id="pageStyle" class="centerAlign">
            
                <div style="width: 190px; float: left">
                    <div class="formArea regularFont centerAlign" style="height: 145px; top: 20px">
                        <div style="font-weight: bold; position: relative; top: 5px; height: 25px;">Subscribe newsletter!</div>
                        <div style="height: 120px;">
                            <form method="post" action="subscribe.php">
                                <div style="position: relative; top: 10px; right: 2px;">Name: <input class="formField" type="text" name="username"/></div><br/>
                                <div style="position: relative; top: 0px;">Email: <input class="formField" type="text" name="email"/></div><br/>
                                <input type="submit" value="Subscribe" style="height: 30px; width: 90px; color: #11ABF3; font-weight: bold; background-color: #E7E7E7; border: black 1px solid; position: relative; bottom: 5px"/>
                            </form>
                        </div>
                    </div>            
                    
                    <div id="searchAreaDiv" class="formArea regularFont centerAlign" style="height: 165px; top: 40px;">
                        <div style="font-weight: bold; font-size: 14pt; position: relative; top: 5px; height: 30px;">Search</div>
                        <div style="font-weight: bold; position: relative; top: 5px; height: 20px;">Case-insensitive</div>
                        <div style="height: 90px;">
                            <form id="searchForm" method="post" action="search.php">
                                <input style="top: 10px; width: 160px" class="formField" type="text" name="searchPhrase"/><br/>
                                <input type="submit" value="Search" style="height: 30px; width: 70px; color: #11ABF3; font-weight: bold; background-color: #E7E7E7; border: black 1px solid; position: relative; top: 20px;"/>
                            </form><br>
                        </div>
                        <a id="advancedSearchLink" style="position: relative; top: 0px; height: 20px;" class="link1" href="#" onClick="displayAdvancedSearch()">Advanced search</a>
                    </div>
                </div>
        
                <div style="width: 834px; float: right">
                    <div id="generalHeader">
                        <div id="logoArea"></div>
                        <div id="loginRegisterDiv" class="roundedCorners">
                            <div style="position: relative; top: 5px; width: inherit; height: 20px; text-align: center;"><a class="link1" href="register.php">Register and personalize your news content</a></div>
                            <div style="height: 50px;">
                                <form method="post" action="login.php">
                                    <input class="formField loginFormField" type="text" name="username"/>
                                    <input style="left: 25px;" class="formField loginFormField" type="password" name="password"/>
                                    <input class="formField loginFormField" style="height: 30px; width: 60px; left: 35px; top: 17px; color: #11ABF3; font-weight: bold; background-color: #E7E7E7; border: black 1px solid;" type="submit" value="Log in"/>
                                </form><br/>
                            </div>
                            <div style="width: inherit; height: 30px; text-align: center;"><a class="link1" href="forgotPassword.php">Forgot password?</a></div>
                        </div>
                    </div>
                    <div id="menu">
                        <div style="background-color: #11ABF3;" class="menuDiv">
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('1')" class="link1" href="conflicts.php?category=all">Conflicts</a></div>
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('2')" class="link1" href="diplomacy.php?category=all">Diplomacy</a></div>
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('3')" class="link1" href="localAffairs.php?category=all">Local affairs</a></div>
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('4')" class="link1" href="crimes.php?category=all">Crimes</a></div>
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('5')" class="link1" href="opinion.php?category=all">Opinion</a></div>
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('6')" class="link1" href="videos.php?category=all">Videos</a></div>
                            <div class="menuButton"><a onMouseOver="javascript:displaySubMenu('7')" class="link1" href="photos.php?category=all">Photos</a></div>
                        </div>
                        <div id="subMenu" class="menuDiv" style="background-color: white">
                        </div>
                    </div>
                    <div class="regularFont centerAlign" id="mainContentArea" style="height: 700px">

                    ktitle278title27</div>
                </div>
            </div>
        </body>
</html>

mainContentArea style:

div#mainContentArea{
    width: 800px;
    position: relative;
    top: 00px;
    height: 560px;
    padding-top: 0px;
    margin-top: 0px;
    background-color: blue;
}

I hope that someone of you understand what is wrong. If you need tell me to post any of my css files
  • 0

#2 Root23

Root23

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 141 posts

Posted 14 September 2011 - 08:32 PM

Hi,

If you could post up more of your CSS I may be able to help you. If you have a DropBox account, or something similar, could you just upload all of your css and html files? I'd be able to work with it better if I could open them up in my browser for testing.

In the mean time, you could also post up the CSS for your menu?
  • 0
Posted Image

#3 thatsme

thatsme

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 218 posts

Posted 15 September 2011 - 12:24 PM

here are the most of styles. If that does not help you to find the problem, i would send you my project of create accountg in dropbox

div.formArea{
    background-color: #1895CF;
    width: 180px;
    padding-left: 5px;
    color: white !important;
    text-align: center; 
    position: relative;
}


div#generalHeader{
    height: 150px;
    width: 834px;
    float: right;
    position: relative;
    background-color: #E7E7E7;
}

div#logoArea{
    height: 120px;
    width: 320px;
    background-image: url("http://localhost/IPN/pageImages/logo.jpg");
    position: relative;
    left: 40px;
    top: 15px;
}

div#loginRegisterDiv{
    background-color: #11ABF3;
    width: 380px;
    height: 100px;
    float: right;
    position: relative;
    right: 10px;
    bottom: 95px;
    padding-top: 0px;
    padding-bottom: 0px;
}

div#menu{
    height: 60px;
    width: 820px;
    float: right;
    position: relative;
    right: 14px;
}

div.menuDiv{
    height: 30px;
    width: inherit;
}

div.menuButton{
    height: 30px;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 30px;
}

body#pageBackground{
    background-color: white;
}

div#pageStyle{
    background-color: #E7E7E7;
    width: 1024px;
    height: 1000px;
}

  • 0

#4 thatsme

thatsme

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 218 posts

Posted 16 September 2011 - 11:04 AM

** YEAH. After hours of head smashing to wall i got the idea that div might be not in his place because he hasn't float property set to be right while to divs above have it. I set float: right to misplaced div too and now this div is where it has to be.
  • 0

#5 jamiecross

jamiecross

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts

Posted 26 November 2011 - 08:06 AM

You need to use the <br> Code or it is going to look like that.
  • 0
Back to HTML, CSS and Javascript



Also tagged with one or more of these keywords: HTML

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download
  1. Codecall
  2. → Language Forums
  3. → HTML, CSS and Javascript
  4. Privacy Policy
  5. Guidelines ·