Forums

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

Home Forums CSS styling a scholarlly research paper

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #203986
    drone4four
    Participant

    I’ve got a mockup (sort of) for how I want my webpage styled. The content is a boring scholarly research paper. I am trying to format my webpage the way this Lorem Ipsum placeholder text is formatted in LibreOffice Writer. See here: http://i.imgur.com/tUaoGkl.png

    Before I get to styling the title, author and date, I am focusing on the abstract. For starters I tried Googling:

      css research paper
      “abstract research” stylesheet
      “abstract research” responsive webdesign

    which returned white papers written by webdevlopers for stylesheet specs – not what I was looking for. What should I be Googling to better uncover great templates for scholarly content? Without a template, I tried creating my own. Here is the class declration I created in my style sheet:

    .abstract {
    max-width: 150px;
    font-family: 'Courier New';
    color: red;
    text-align: justify;
    }

    I then called it in my markup using a class divider. But its like the divider isn’t even there when parsed. Here is my test case: http://codepen.io/Angeles4four/pen/doVNqW
    How come my css for the abstract doesn’t parse? I feel like the answer is simple, but I fail to understand what I am doing.

    Can someone strike me with a cluebat?

    Thanks for your attention.

    #203989
    Paulie_D
    Member

    You have some invalid HTML in there.

    You can’t have div as children of p tags…and it looks like you have some unclosed tags also.

    Validate your code. – https://validator.w3.org/#validate_by_input

    Also, you have a header in there but it’s empty…is that intentional?

    The proposed design is a fairly simple thing…my guess is that it’s the html errors (and I haven’t looked at the CSS yet) is causing most of your issues.

    #204028
    drone4four
    Participant

    Thank-you Paulie: I closed my paragraph tags. I was gonna save my w3 validation for the HTML and CSS when its in my local test case. Right now I am just having fun in my codepen. I’ll be sure to use the w3 validator when I transfer what I’ve learned from codepen and these forums over to my local text editors.

    Thank-you Senff. I uncommented in the P element in my CSS and got rid of the P before the abstract class in my markup. The abstract is looking good now.

    I’ve done a little more work on this CSS. Right now I am focusing on styling (1) blockquotes, (2) the hr tag and (3) aligning text to the right.

    Here is my updated testcase:
    http://codepen.io/Angeles4four/pen/doVNqW

    #1
    Notice the ‘scholar’ rule in the CSS: its the text parsed with yellow font on the webpage. I’ve ‘pinched’ the text with a value of 200px for the width property. I intend on widening it back to 400px for the final product, I’ve just temporarily made it 200px to demonstrate to all of you that it isn’t centered perfectly between the left and right margin. How do I center whats inside this blockquote?

    #2
    When it comes to my HR tag, w3schools is telling me that it’s not supported in HTML5. So it’s been deprecated. The w3schools page doesn’t suggest an alternative. What would you folks suggest I use as a substitute to HR?

    #3
    I am also struggling with styling the references. All I am trying to do with the references is align the text to the right margin, rather than to the left (as per default). To achieve right side alignment, here is the rule I have been using:

    .reference {
    margin-right: 3cm;
    }

    I also tried

    .reference {
    margin-right: 40px;
    }

    Both of these aren’t doing what I am trying to do. What should I be using instead?

    One further question: When I mark your posts as “Good Answers” it doesn’t register because the next day I have to do it again. How do I permanently mark your answers as good? Or is there a bug in the forum software?

    Thanks again guys for the help.

    #204042
    drone4four
    Participant

    Thank-you @Atelierbram for answering my questions. You actually went way beyond just answering my questions – – you completely transformed my CSS and HTML to exactly what I set out to achieve. My friend, I really wasn’t expecting this. You did an amazing job. You are such a kind soul.

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