0

Okay so, Building an account page, and using the same kind of method we normally use when constructing pages, we seem to have this issue where it's like a large white block/space is in the background, so essentially some kind of element or div with white background colour. Only issue is, there isn't anything that should be causing this, and it most certainly isn't the body.

See image (minor details aside, it is not finished as work has stopped due to this issue!)

The account and operative buttons elements (columns) are supposed to have a white background, while the background behind these two divs should be green. We assumed this would be the body.

body {
    font-family: 'nunito', sans-serif;
    /*width: 100%;*/
    height: 100%;
    background-color: #049E84 !important;
    overflow: hidden;
    align-content: center;
    float: inherit;
    margin-top: 0;
}

#account {
    margin-top 100px;
    padding: 50px;
    margin-bottom: 100px;
    /* font-family: 'nunito', sans-serif; */
    /* float: inherit;*/
    /* width: 70%;*/
    /* margin-left: 19%;*/
    /* margin-top: 0;*/
    align-content: center;
    background-color: #049E84;
}

#info {
    text-align: center;
    width: 60%;
    height: 75%;
    background-color: white;
    padding: 25px;
    font-family: 'nunito', sans-serif;
    font-size: 35px;
    color: dimgrey;
    float: left;
    border-radius: 60px;
}

#operativeButtons {
    text-align: center;
    padding: 25px;
    margin-left: 30px;
    background-color: white;
    border-radius: 60px;
    width: 15%;
    height: 75%;
    float: right;
}

#yourAccount {
    font-family: 'nunito', sans-serif;
    font: bolder;
    color: #282828
}

#valid {
    color: grey;
    padding-top: 20px;
    font-weight: bold;
}

#tickets {
    color: #049e84;
}

#warning {
    color: #ff0000;
}

#uname {
    display: inline;
}

p {
    line-height: 1;
}

.title {
    padding-top: 10px;
    color: black;
}

#bg {
    background-color: #049e84;
}
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<div id="bg">
    <div id="account">
        <div id="info">
            <div id="yourAccount">
                YOUR ACCOUNT</div>
            <hr style="height:1px;border:none;color:#049e84;background-color:#049e84;" />

            <p class="title">Username:</p>
            <p id="username" class="details"></p>

            <p class="title">Name:</p>
            <p id="name" class="details"></p>

            <p class="title">Email:</p>
            <p id="email" class="details"></p>

            <p class="title">Phone:</p>
            <p id="phone" class="details"></p>

            <p class="title">Address:</p>
            <p id="address" class="details"></p>

            <p class="title">Your Tickets:</p>
            <p id="tickets" class="details"></p>

            <p id="valid"></p>
            <hr style="height:1px;border:none;color:#049e84;background-color:#049e84;" />
        </div>
        <div id="operativeButtons">
            <p id="home">Home</p>
            <p id="logout">Logout</p>
            <p id="deleteaccount">Delete Account</p>
            <p id="warning">WARNING:</p>
            <p id="warningmessage">Deleting your account will entirely erase all your data from our database. By
                clicking, you acknowledge this. <br> All tickets will be erased</p>
        </div>
    </div>
</div>

Please note in the code above that the html and body tags are closed later after the PHP, this isn't the issue. :)

any help would be greatly appreciated, I am completely perplexed! That being said though, I'm also very tired.

Waleed Iqbal
  • 1,308
  • 19
  • 35
Kieron Lamb
  • 46
  • 7
  • It is look like you have to set `padding-bottom` to the header – לבני מלכה Dec 27 '18 at 06:18
  • I don't see it? – Kieron Lamb Dec 27 '18 at 06:21
  • 1
    I don't see the green header as it is in the image you shared. Is there something missing in the html? But still try adding `padding: 100px 50px 50px 50px;`in the `#account` in CSS – Waleed Iqbal Dec 27 '18 at 06:29
  • Yes sorry, I have just realised that I have missed a crucial part to the story. – Kieron Lamb Dec 27 '18 at 06:31
  • This only happens when the page is put onto wordpress. when opened from raw html file, it looks acceptable. As soon as it is on wordpress, white block appears in background - I've made sure it's not a part of the page settings too! :( – Kieron Lamb Dec 27 '18 at 06:32
  • Try adding the padding the way I suggested. And let me know if it works. – Waleed Iqbal Dec 27 '18 at 06:34
  • It made it a little better, but didn't solve it, but the other comment about clearing floats worked - so maybe I was just being an idiot! Thanks for your help anyway Waleed! <3 – Kieron Lamb Dec 27 '18 at 06:35

1 Answers1

0

Looks like you lack a clear of the floats, that's why the parent element (#account) does not get the expected height.

You can use a clear fix like this:

#account:after {
    content: "";
    display: table;
    clear: both;
}

more info here:

https://css-tricks.com/snippets/css/clear-fix/

Another dirty way to do it is adding <br clear="all"/>. before closing #account.

Teodor Todorov
  • 66
  • 1
  • 10