Alignment issues

[knowledgenotebook]

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.

[Shikkediel]

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

[knowledgenotebook]

@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.

[Jerba]

@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.

[knowledgenotebook]

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.

[Jerba]

@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)

[Jerba]

@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.

[knowledgenotebook]

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

[Jerba]

add margin: 0;

Works for me…

[knowledgenotebook]

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.

[Jerba]

@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.

[knowledgenotebook]

As a temp solution, I replaced the h2 element for the Header with
<span style="font-size:30px">Knowledge<br/> NoteBook</span>.
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?

[Jerba]

@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)

[knowledgenotebook]

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

[Jerba]

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…

[Author]

Posts