Forums

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

Home Forums CSS Alignment issues

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #205851
    knowledgenotebook
    Participant

    I put together our future website based on my interns’ work here, http://knowledgenotebook.com/new/

    However, several issues remains, specifically,
    1. The logo
    Current one is just a placeholder, not good. For this issue I’ll have one intern to address it.

    1. The alignment of the header content
      The left content of “Knowledge NoteBook” is not aligned with the content on the right size;
      also, right now we’ve got a bit too much height for the header.
    2. The navigation buttons need to move up just a bit, also, need to remove the blueish border of each button

    3. Mobile access support is inadequate
      Specially for the navigation buttons (the ones on the right won’t show up on Android, not tested with iPhone yet).
      Probably code:
      `<meta name=”viewport” content=”width=device-width, initial-scale=1″>
      does not suffice.

    Please see html as well as css code in the following codepen page,
    http://codepen.io/knowledgenotebook/pen/mJamMg

    See if you can help with any.

    Many thanks.

    #205852
    Shikkediel
    Participant

    I wanted to take a look but a script on that page apparently got unstable so I had to interrupt it. Anybody else have this issue? It happened in this other topic I recently visited as well :

    http://codepen.io/anon/pen/rVoeyz

    #205853
    knowledgenotebook
    Participant

    @Shikkediel, I appreciate it. Here’s the current status.

    #2 The alignment of the header content
    The left content of “Knowledge NoteBook” is not aligned with the content on the right size;
    also, right now we’ve got a bit too much height for the header

    Not Done.

    #3
    The navigation buttons need to move up just a bit, also, need to remove the blueish border of each button
    Done.

    #4Mobile access support is inadequate
    Specially for the navigation buttons (the ones on the right won’t show up)

    Not Done.

    The style sheet may be found at the following URL,
    http://knowledgenotebook.com/new/stylesheets/styles.css

    Thanks.

    #205854
    Jerba
    Participant

    @knowledgenotebook I don’t want to come across as rude, but I’ve noticed that you ‘perhaps’ tend to use this forum as essentially a service rather than a means of outsider perspective or general help / troubleshooting.

    Luckily for you, this community will generally help you regardless, but still try and be a little considerate and make sure you sufficiently attempt to fix the problem yourself using your initiative and search engines and post here as a last resort.

    Despite the this, I’ll try and give you a hand with the issues listed above.

    #2 The alignment of the header content
    The left content of “Knowledge NoteBook” is not aligned with the content on the right size;
    

    I can’t remember how to quote so the above will have to do for now.

    I believe your problem here is vertical alignment there is a css property used to manipulate this, you can read about it here at http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

    #3
    The navigation buttons need to move up just a bit, also, need to remove the blueish border of each button
    Done.
    

    The solution to this problem is (incredibly likely) very basic CSS and a quick Google search would probably provide you with the answer. It’s likely a padding / margin issue.

    In regards to the border… You can simply remove it using border:none

    #4Mobile access support is inadequate
    Specially for the navigation buttons (the ones on the right won’t show up)
    

    http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    I hope this was helpful.

    #205855
    knowledgenotebook
    Participant

    Additional notes regarding #2 The alignment of the header content The left content of “Knowledge NoteBook” is not aligned, that is, currently it seems center between the top edge of the div and the bottom edge, but I’d like it to move up a bit so that the text would look better. The CSS class impacting this behavior is “jumbotron” starts at the line 4199 of the following CSS file, not strong with this illogical language of CSS, don’t know how to fix this class,
    (sorry, I accidentally got rid of the CSS file windows in the codepen, hence, unable to update it),
    http://knowledgenotebook.com/new/stylesheets/styles.css

    I’d to thank those who’ve been helpful and able to help.

    #205856
    Jerba
    Participant

    @knowledgenotebook .jmb1 h2 on line 5682 set the margin to 0, it’s inheriting 20px top and 10px bottom margin from line 1179 (styles.css)

    #205857
    Jerba
    Participant

    @knowledgenotebook Use Chrome’s developer tools, more particularly the inspect element functionality to help you fix issues like this it will clearly visually represent the padding and margin of elements using a highlight.

    #205858
    knowledgenotebook
    Participant

    I’ve added
    margin-top:0px; margin-bottom:0px;
    .jmb1 h2
    to no effect. Was I not doing it right?

    #205859
    Jerba
    Participant

    add margin: 0;

    Works for me…

    #205861
    knowledgenotebook
    Participant

    Here’s my exact code:
    .jmb1 h2 {
    color: inherit;
    // reset margins, DL 8/1/2015
    margin:0;
    }

    Still to no effect. For yours, I’m curious to know why the logo was not included in the case.

    #205862
    Jerba
    Participant

    @knowledgenotebook it’s probably being overwritten further on the in styling so just find out where and prevent it. The reason the logo isn’t on that image is because I used a section screen capture and didn’t capture the entire header.

    #205868
    knowledgenotebook
    Participant

    As a temp solution, I replaced the h2 element for the Header with
    &lt;span style="font-size:30px"&gt;Knowledge&lt;br/&gt; NoteBook&lt;/span&gt;.
    It looks better. However, the BR height is too much.
    Something like:
    %lt;span style=”font-size:30px; br{height:5px;} >

    won’t work, how to do it?

    #205869
    Jerba
    Participant

    @knowledgenotebook

    You are aware I’ve provided you with a solution right..?

    h1, .h1, h2, .h2, h3, .h3 {
        margin-top: 20px;
        margin-bottom: 10px;
    }
    

    That is where it’s inheriting the margins from (line 1179 in styles.css)

    #205871
    knowledgenotebook
    Participant

    It didn’t work. The h1, .h1, h2, .h2, h3, .h3 {…} shouldn’t be touched because it would mess up with existing text format.

    #205876
    Jerba
    Participant

    I think it might be worth while if you take a look at some tutorials to help you grasp the basics of CSS.

    http://www.w3schools.com/css/default.asp

    https://www.codecademy.com/tracks/web

    This is an incredibly straightforward fix and it seems a lack of basic knowledge is making it difficult or perhaps I’m terrible at explaining the solution…

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