#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2014
    Posts
    12
    Rep Power
    0

    Unhappy *Novice* Unwanted Tags, Layout & SIDEBAR


    Hello All

    Before we start I want to apologise in advance for being probably the most cack handed CSS programmer out there - I have just started learning and my teacher isn't the best at explaining things so I have come to you on my knees, asking for help!

    I have read the posting guidelines, and I hope my below is validated - not quite sure how this works? I am using sublime text and did the test, which is working fine..

    I know how annoying it can be when newbies rock up and try to ask you to solve a problem without trying themselves. Rest assured, I have tried to find an answer to my problem and got a million different answers in different ways - and want to ask what you think is the most efficient way.

    I am trying to replicate the look of this website -

    https://s3.amazonaws.com/uploads.hip...blog_part2.png

    Here is my HTML & CSS:

    <!--Add CSS to the page. When complete it should look like Fashion_Blog.png
    Do you see new tags? Look them up so you are growing your tag vocabulary.
    Bonus: Google <footer> </footer> tag and implement the page footer.
    Add Google Fonts.
    -->

    <!doctype html>
    <html lang="en-us">
    <head>
    <meta charset="utf-8">
    <title>Sartre’s List</title>
    <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/style.css">

    </head>
    <body>
    <header>
    <h1><a href="index.html">Sartre’s List</a></h1>
    <h2>Better-Dressed People</h2>
    <nav>
    <a href="#">Women’s</a>
    <a href="#">Men’s</a>
    <a href="#">On the Street</a>
    <a href="#">The Catwalk</a>
    <a href="#">AdWatch</a>
    <a href="#">About</a>
    </nav>
    </header>

    <div id="sidebar">
    <aside>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </aside>
    </div>

    <div>
    <article>
    <h3>11/12/13</h3>
    <h2><a href="#">On the Street in Brooklyn</a></h2>
    <img src="fashion_photo.jpeg">
    <p>Cray culpa stumptown, flexitarian ex Odd Future do fugiat Wes Anderson proident 3 wolf moon officia bitters small batch. Et consequat do, nulla you probably haven’t heard of them High Life scenester. Vinyl fugiat High Life, kogi do VHS in aliqua lo-fi leggings gentrify Neutra tumblr. Odio vegan PBR, Marfa forage blue bottle try-hard readymade meggings retro delectus Echo Park. Ugh consectetur farm-to-table forage, laboris blue bottle McSweeney’s tattooed excepteur yr. Magna ut Schlitz flexitarian, vinyl craft beer proident yr forage 8-bit ethical sustainable placeat retro. Officia pickled beard, adipisicing gluten-free sint craft beer quis thundercats id 3 wolf moon fashion axe.</p>
    <h4><a href="#">Continues...</a></h4>
    </article>

    <article>
    <h3>11/11/13</h3>
    <h2><a href="#">Vintage in Vogue</a></h2>
    <img src="fashion_photo2.jpeg">
    <p>Selfies sunt Tumblr, delectus small batch DIY umami sint. Polaroid chambray selfies McSweeney's Cosby sweater, Pitchfork tattooed assumenda Wes Anderson Blue Bottle twee Carles ennui. Nisi locavore fugiat sapiente salvia aliqua. Shoreditch kogi exercitation fashion axe. Wolf semiotics Pinterest, laboris quis master cleanse tousled small batch street art bespoke fingerstache dreamcatcher ethical labore. Dreamcatcher iPhone typewriter, tote bag four loko fanny pack master cleanse organic PBR reprehenderit actually. Craft beer drinking vinegar wayfarers, pork belly narwhal pariatur polaroid cupidatat in 8-bit distillery anim literally.</p>
    <h4><a href="#">Continues...</a></h4>
    </article>
    </div>


    </body>
    </html>

    CSS -

    * {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    }

    .clearFix {
    clear: both;
    }


    #sidebar {
    float:right;
    width:40%;
    display: block;
    position: relative;
    margin-left: 200px;


    }

    body {
    width: 700px;
    margin-top:0;
    margin-right: auto;
    margin-bottom: 0;
    margin left: auto;
    margin:0 auto;
    border-left-width: 10px;
    border-left-style:solid;
    border-left-color: lightgray;
    border-left:10px solid lightgray;
    padding: 0 0 0 20px;
    font-family: "Lato", sans-serif;
    background-color: #white;
    font-size: 15px;
    clear: both;


    }

    h1 a {
    color: red;
    text-decoration: none;
    }

    img{
    width: 700px;
    }

    h4 {
    text-align: right;
    font-style: bold;
    color: red;
    }

    h3 {
    display:block;
    text-decoration: none;
    }

    nav a {
    color:black;
    padding-bottom: 10px;
    margin-left: 5px;
    margin-right: 10px;
    float: center;
    font-color: red;
    font-size: 20px;
    }

    article p:first-letter {
    float: left;
    color: lightgray;
    font-size: 5px;
    font-size: 75px;
    line-height: 50px;
    }

    h2 {
    text-align: left;
    color: black;
    border-bottom: 0px;
    }

    nav a {
    text-align: left;
    color:grey;
    border-color: black;
    }


    Currently you can see that this looks vaguely but really nothing similar enough to what I need. My questions are not how do I get to this - but more specific - how do I align the text I have to form the side bar (you can see I have tried already) and what am I doing wrong in CSS?

    This is a start - Im going to try and figure out the rest myself.

    Is this set up I have vaguely correct? Should I remove anything immediately?

    As seen Im trying to understand Floats, Classes, Id's, and Positioning, but am having real trouble translating these correctly into my setup.

    I've been doing lessons and reading all day to try and combat this. Someone please help!

    Please let me know if any of this is unreadable - I know the pictures won't show up but you get the idea.

    Would really appreciate it.
    Thanks
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Adelaide - Australia
    Posts
    63
    Rep Power
    3
    So what you are NOT saying is that you have taken/pirated the 'view-source' from here:

    Fashion Blog

    And you want someone to get it to work for you.

    Why don't you ask at studio.generalassemb if you can have a copy....................
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2014
    Posts
    12
    Rep Power
    0
    No, I'm actually a student at GA and this is our homework. Just wanted to get some external advice!
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Adelaide - Australia
    Posts
    63
    Rep Power
    3
    You should have said that first off?

    But if someone does it for you - You ain't going to learn.

    Time to go back to a school where everything is explained a little more.

    W3Schools Online Web Tutorials
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Adelaide - Australia
    Posts
    63
    Rep Power
    3
    I also should have mentioned that if you don't have? you should be using tools like html validator with firefox or whatever to at least give you a chance to find where and what the errors are.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    716
    Rep Power
    442
    The easiest way for us to help you is to post your code somewhere we can see it working. If you can't post it on your own site, try a service like CodePen or JSFiddle.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2014
    Posts
    12
    Rep Power
    0
    Hi Rdoyle, thanks for your reply.

    So far I have got a little further and I sorted out my problem thanks to a little kick up the arse from slopalong, it was basically the re sizing of widths and floating. I still think that my CSS is pretty messy though, with unneeded tags and probably incorrect usage of classes and ID's.. but i'm still learning!


    Sorry my fault you can't see it - try this code pen link if it will work:

    CodePen - Pen

    As you can see I've also cheated - to remove the underlines from the boxes I removed the link itself - is there anyway to remove a link underline without this method? I have tried text decoration which isn't working, and its not a border bottom, maybe it is something to do with the HTML?

    Also, really struggling to come up with a solution to the white borders of the .nav...

    Here's the final product again -

    https://s3.amazonaws.com/uploads.hip...blog_part2.png

    Anyway, thanks for your help - gonna keep trucking.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    716
    Rep Power
    442
    I modified your CodePen and put it here: CodePen - Pen

    To answer your questions, the way to remove the link underline is what you said -- text-decoration: none. I'm not sure how you were writing it, but that's the correct way.

    To explain the white borders, let me explain a couple of other changes I made.

    You had your nav just as a bunch of links after each other. Generally speaking it's best practice to write your nav links in an unordered list <ul> tag. Why? Because since it's a list of links, you use a tag meant for lists. Using the <ul> and <li> tags also gives you a structure to do other things, like dropdown menus or flyouts.

    So, I put everything in a list, then floated the <li> tags to the left (which puts them side by side), then made the <ul> tag overflow:hidden (to make it expand with the floated li tags inside it), gave the <a> tags display: block (so you can add top and bottom padding). For the borders, the best way to do this is to make the <a> tag take up all that space with padding, and add the border to it. Why do it that way? Because it gives you a big fat target to hit if you're bad with a mouse, or using a mobile device.

    My CodePen doesn't match your screenshot exactly, but it's a good start.

    P.S. The floats/overflow method is kind of old school, as you move forward you would probably handle this with flexbox, but that's a different post!
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    716
    Rep Power
    442
    I modified your CodePen and put it here: CodePen - Pen

    To answer your questions, the way to remove the link underline is what you said -- text-decoration: none. I'm not sure how you were writing it, but that's the correct way.

    To explain the white borders, let me explain a couple of other changes I made.

    You had your nav just as a bunch of links after each other. Generally speaking it's best practice to write your nav links in an unordered list <ul> tag. Why? Because since it's a list of links, you use a tag meant for lists. Using the <ul> and <li> tags also gives you a structure to do other things, like dropdown menus or flyouts.

    So, I put everything in a list, then floated the <li> tags to the left (which puts them side by side), then made the <ul> tag overflow:hidden (to make it expand with the floated li tags inside it), gave the <a> tags display: block (so you can add top and bottom padding). For the borders, the best way to do this is to make the <a> tag take up all that space with padding, and add the border to it. Why do it that way? Because it gives you a big fat target to hit if you're bad with a mouse, or using a mobile device.

    My CodePen doesn't match your screenshot exactly, but it's a good start.

    P.S. The floats/overflow method is kind of old school, as you move forward you would probably handle this with flexbox, but that's a different post!
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2014
    Posts
    12
    Rep Power
    0
    Hi RDoyle

    Thanks for your detailed reply this was really helpful. I solved the text decoration problem, I just switched from Safari to Chrome which worked. Thanks for explaining the link and list issue, I can understand now!

    As far as everything else is concerned, thank you - that makes a lot of sense and hadn't occurred to me, to make the nav list items and display them in a block. I think I get it now.. so you have to get to the route of what you want to select and then you can change it, with the <a> tag, ok.

    This really helped anyway, thank you! Now on to next weeks project...
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2014
    Posts
    12
    Rep Power
    0
    Hi RDoyle - Could you cast an eye over this one? So after starting with CSS a little over 2 weeks ago I think I am getting better, but could you give me some points on how to space out the buttons at the bottom of this project so that they look like the picture - I am having trouble selecting the right element and cannot work out how to give the button more room and width - same as with the yellow one. Everytime I try to give the .button2 margin or padding to separate it further from the text is messes up and ends up on a new line.. Also, have been trying to do some research but cannot find a solution to the lines between the relative positioned boxes?

    Screenshot by Lightshot

    Here is my code -

    CodePen - Pen

    Would appreciate any help!

IMN logo majestic logo threadwatch logo seochat tools logo