Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Need help with CSS on a website that I'm trying to build

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #191546
    SwissCheeseHeart
    Participant

    Hello,

    I’m trying to build my own website but have very limited knowledge of HTML and even less of CSS. Thus, I’m running into all sorts of problems while trying to code my site, and I don’t have enough experience to 1) diagnose any of the issues or 2) fix them. I’ve tried Googling solutions, but most of them use coding that I’ve never seen let alone used.

    Basically, this is what I want my website to look like:

    My aim is that the height of the body will change according to the browser size, thus I want a scroll bar there. I also need the text in the link boxes vertically and horizontally centered.

    Anyway, this is what my coding is giving me in CSSDesk:

    This is currently what my HTML looks like:

    */
    <html>
    <header><title>Website Name</title></header>
    <body>

    Header

    <ul class=”menu”>
    <li id=”menucell”>Link 1
    <li id=”menucell”>Link 2
    <li id=”menucell”>Link 3
    <li id=”menucell”>Link 4
    <li id=”menucell”>Link 5

    Body
    Footer

    </body>
    </html>*/

    And this is what my CSS currently looks like:

    */
    body {
    background-color: #C6FEB5;
    }

    p {
    font-family: Verdana;}

    div {
    margin: auto;
    }

    #header {
    width: 700px;
    height: 150px;
    background-color: black;
    color: white;
    margin: auto;
    margin-top: 10px;
    }

    ul.menu li {
    display: inline-block;
    position: relative;
    }

    body {
    margin: auto;
    font-family: verdana;
    font-size: 11px;
    }

    #menucell {
    width: 100px;
    height: 50px;
    border: 2px solid black;
    background-color: white;
    text-align: center;
    vertical-align: middle;

    }

    #content {
    width: 700px;
    height: 200px;
    background-color: white;
    }

    #footer {
    width: 700px;
    height: 50px;
    background-color: black;
    color: white;
    margin-bottom: 10px;
    margin: auto;
    }
    /*

    A few other issues:

    • When I try to add padding to the inside of the body, it makes the body wider for some reason. I need to add padding so that my text isn’t hugging the border, but I can’t have that extra width. How do I accomplish that?
    • Text overflows all of my divs (the cells on the table, the body, the footer, and the header). How do I make it stay within the borders of the div?

    I would greatly appreciate any and all help.

    #191551
    SwissCheeseHeart
    Participant

    I think this is what you’re looking for: http://codepen.io/DanceWithButterflies/pen/NPRbLJ

    *I just checked the site. It’s not even displaying the boxes for the links now. I have no idea how to fix it, either. xD

    #191729
    SwissCheeseHeart
    Participant

    Thank you! It looks so much better now. :)

    Is there a way to insert padding in the body (as in the big white space that I have on the site, not the site body itself) without the padding widening it?

    #192182
    SwissCheeseHeart
    Participant

    Thank you for your response, but since my original post, I’ve decided to go in a different direction with my site. I will, however, keep this piece of information in mind as it quite possibly will be useful later. ^^

    #192183
    SwissCheeseHeart
    Participant

    Thank you! The padding seems to be working fine now.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.