Learn More
Resend Email
17
birkenspanner
7y

Just got into web development.

Y U NOT WORKING RIGHT?

How do you guys make really complex websites when I can even center an unordered list without the first child...

I write something like align-vertically: center;
And what does it do? NOTHING!
And if it does something, it mirrors the whole page, makes it all bright pink and then everything explodes and I'm alone in a dark void, only me and my PC are there and somehow I have access to the internet.
And then I look it up at stackoverflow and I'm like: Oh, ok, I'll do it this way then.
And it still doesn't work and does absolutly nothing!
So I'm trapped in this void of nothingness till the end of my days.
At least that's what it feels like.

undefined

html css webdevelopment wtf
Favorite
Ranter
Comments
  • 8
    7y
    Have you tried to use flexbox ? (display: flex)
    Centering things is vastly easier in it.
    On the other note even people quite oriented with css sometimes struggle with, you'd think, simple things.

    At least now you get all css jokes, so you got that going for you which is nice
  • 3
    7y
    I keep hearing about flexbox. I have to try it.
  • 1
    7y
    Can I see a pic of your HTML and CSS next to each other? Depends on how you have it set up.
  • 2
    7y
    @Jumpshot44 i've just looked at it and HOLY SH- IS THIS MAGIC?
  • 0
    7y
    Flexbox is phenomenal. Treehouse has a tutorial on it and I think levelup tuts does as well.
  • 1
    7y
    @Samantha12467 Here take a look:
  • 1
    7y
    @birkenspanner so I was going to make you a codepen ex. and then my laptop died (and my charger broke because life hates me) so bare with me.
    Your HTML structure is a little off, it should be set up like :
    <nav id="navigation">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    </ul>
    </nav>

    Then your CSS should look something like:
    ul{
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
    }

    li{
    float: left;
    }

    li, a{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
    }

    Something along the lines of that should work.
  • 2
    7y
    @Samantha12467 Ok thanks, gonna try that, I'm still in my very early learning phases, so that's why it was a little strange.
  • 1
    7y
    @birkenspanner all good! My first week at my very first dev job I was trying to figure something out and did a core dump on an entire project.
    Let me know if it works!
devRant © 2021 Hexical Labs LLC
Privacy Policy  |  Terms of Service
Add Comment