Why it doesn't displayed right?

Question

0.00/5 (No votes)

See more:

Hi everybody.
I was designing a page in HTML/CSS and i came up in a problem.
This is the HTML code:

ASP.NET

<body>
    <form id="form1" runat="server">
    <div id="center">
        <div id="header"></div>
        <div id="header-menu">
            <div id="main-menu">
                <ul id="menu">
                        <li><a href="#">خانه</a></li>
                        <li><a href="#">محصولات</a>
                            <ul class="sub-menu">
                                <li><a href="#">محصولات 1</a></li>
                                <li><a href="#">محصولات 2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">درباره ما</a></li>
                        <li><a href="#">تماس با ما</a></li>
                </ul>
            </div>
        </div>
        <div id="right-side"></div>
        <div id="content">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
        </div>
        <div id="left-side"></div>
        <div id="footer"></div>
    </div>
    </form>
</body>

And here is the CSS code:

HTML

body 
{
    background: -webkit-linear-gradient(180deg,#000000,#011341); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(180deg,#000000,#011341); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(180deg,#000000,#011341); /* For Firefox 3.6 to 15 */
    background: linear-gradient(180deg,#000000,#011341); /* Standard syntax */
}
#center
{
    width:1079px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    margin-bottom:20px;
    border-radius:10px;
    background-color:Aqua;
}
#header
{
    width:inherit;
    height:200px;
    background-color:Green;
    border-radius:10px 10px 0px 0px;
}
/*----------------------- MENU ------------------*/
#header-menu
{
    width:inherit;
    height:50px;
    background-color:Blue;
    border-radius:0px 0px 5px 5px;
    direction:rtl;
}

#main-menu
{
    position:relative;
    top:10px;
    right:10px;
}

/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 28px;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}
#right-side
{
    float:right;
    width:18.1%;
    height:300px;
    border-radius:5px;
    margin:10px 10px 0px 10px;
    background-color:Orange;
}
#content
{
    float:right;
    width:60%;
    height:auto;
    border-radius:5px;
    background-color:White;
    margin-top:10px;
    padding-bottom:10px;
}
#left-side
{
    float:right;
    width:18.1%;
    height:300px;
    border-radius:5px;
    background-color:Lime;
    margin-top:10px;
    margin-right:10px;
}
#footer
{
    float:right;
    width:1079px;
    height:300px;
    border-radius:0px 0px 10px 10px;
    background-color:Black;
    margin:10px 0px 20px 0px;
}

So what's the problem with the id = center div tag?
Because i cant see the Aqua Background of center in my page.

Posted 9-May-14 7:14am

rogerfederer670

Updated 9-May-14 8:17am

idle63

Add a Solution

Comments

[no name] 9-May-14 13:20pm

maybe it is a problem of the second set of twins :)

rogerfederer670 9-May-14 13:22pm

excuse me but i didn't get what you mean!

[no name] 9-May-14 14:07pm

Then you don't know Roger Federer ;)

rogerfederer670 9-May-14 14:09pm

OK i think i got what you said ;)
But i wanna get help with my code.

[no name] 9-May-14 14:15pm

I know, but for that you have to wait for some professinals. Good luck.

rogerfederer670 9-May-14 14:18pm

OK, Good luck.

rogerfederer670 9-May-14 15:52pm

Is there anyone can help in this question?

j snooze 9-May-14 16:59pm

#center is the class name not the id of an html element. Same for all css styles.<br>
So it should be <div id="whateveryouwant" class="center">

j snooze 9-May-14 17:01pm

Sorry long day. Ignore my previous comment. Did you add a link to your style sheet in your page?

j snooze 9-May-14 17:05pm

or...your other divs background colors are overriding the parent div's background. Use your browser developer tool to see if that is the case.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Accepted Answer · 2014-05-09T19:23:00

Solution 1

in the #center, add one line:

display: inline-block;

if you want to center the whole thing add this in the body style:

text-align: center;

Posted 9-May-14 19:23pm

Peter Leow

Updated 9-May-14 19:26pm

v2