Streuncked in Inlin-block

This is the HTML code →

<header class="site-header">
                
                <a href="#" class="logo"><img src="https://s3.amazonaws.com/projectsts/generic/logo.png" alt=""></a>
                <nav class="main-nav">
                    <a link href="#">Link 1</a>
                    <a link href="#">Link 2</a>
                    <a link href="#">Link 3</a>
                    <a link href="#">Link 4</a>
                    <a link href="#">Link 5</a>
                </nav><!-- main-nav -->
            </header><!-- site-header -->

and this is the CSS associated with this →

.logo,
.main-nav a {
	display: inline-block;
	color: #000000;
	text-decoration: none;
}
.logo{float: left;}
.main-nav{float: right;}
.main-nav a {
	padding: 0 .75em;
	border-right: 1px solid;
	color: #000000;
	font-size: 1.00em;
	line-height: 1.00rem;
	vertical-align: middle;
	display: inline-block;
}
.main-nav a:hover {
	text-decoration: underline;
}
.main-nav a:last-child {
	border-right: none;
}

My question →
If my understanding is not wrong then inline-block is the combination of
inline +
block
but what i am trying to achieve is that the menu should come in next row than the logo, but I have tried many css adjustments, but that didn’t worked.

Do you have any suggestions how should I give the nav a next row?

This is how the header is currently looking →

Display them as blocks, not inline-blocks, don’t float them either.
The page you linked seems to bear little resemblance to the code you posted.

1 Like

It worked, actually I gave it a try before, but there was one more culprit that was causing some issues, and itw was →

.site-header {
	/*background: #34495E;*/
	background: #FFFFFF;
	/*text-align: center;*/
}
text-align: center;

I uncommented the above, and now the text is not aligning in the middle/center.

I have one more issue, I am posting the whole code at some reference online in few moments.

Sir, Here is the Full HTML
Click Here

Since the logo is a bit larger in height so I have put the code →

	vertical-align: middle;

in .main-nav a but the menu items/list is not aligning in the exact middle of the whole header. I am doing some mistake or this property can’t do that when logo is taking auto height, and the total height is increased.

You have floated the logo and floated the nav and floats are removed from the flow and have no relationship with each other at all.

Vertical-align only applies to inline element and elements with a display of table-cell.

If you want a relationship between elements then you need to use the correct properties to make that happen. In your example the only way to move the nav down would be to use a top margin but that would rely on a magic number that wouldn’t work should the logo change size.

Instead use a technique that creates an automatic relationship between the two elements. I would use the display:table/table-cell approach to do this easily.

e.g.

.site-header{

display:table;
width:100%;
padding:0;
text-align:left;
}

.logo,
.main-nav { 
display:table-cell;float:none;vertical-align:middle;padding:15px}
.main-nav{
text-align:right;
}

The above code is over-rides to your existing so make sure it follows after the original code. The logo and the nav are now table-cells and thus will obey the vertical align command and centre themselves automatically with each other.

Be careful with percentage padding as it rarely works in the way you expect as vertical padding in percentage is based on the width of the element and thus does not scale in a way that you would expect. I always use px or em padding for top and bottom padding.

1 Like

@PaulOB, Unless she has changed her mind, this was her original goal

That is a very old thing that layout was fundamentally problematic. I have re-designed everything now. This looks like the same, but its a different Layout.

1 Like

Are there any challenges or drawbacks associated with using table/table-cells? or its usage is fairly an elite and quiet a standard and ethical practice?

Noted. will come back if have any questions.

I am not a she-woman, but a He-man. :grin:

1 Like

Ok I missed that :slight_smile:

The nav can be centred in the remaining space by applying text-align:center instead of text-align:right but you can’t have the nav in the center of the whole window (ignoring the width the logo takes up) without adding a ‘magic number’ to the right of the nav to match the width of the logo.

I would advise against doing so as it is not a natural thing to do in a responsive layout and can’t be done automatically and you would end up having to control everything at all widths. You would have to absolutely place the logo to the left so that it takes up no space and then the text could be centred with text-align:center but that means you would need to accommodate the absolute element with a lot of magic numbers into the bargain.

1 Like

From my perspective there are no problems and it is my preferred layout tool and will accomplish many of the things that flexbox can do but in a more robust manner with support going back to and including IE8.

However, there are rules and behaviours that you need to understand so beginners can get confused by how things work. In most respects the display table and table-cells properties behave much like their html table (table) and table cell (td) counterparts but without any influence on semantics. Table should only be used for tabular data but css doesn’t care or impart any semantics upon the layout as it is a presentation tool only.

A table is a shrink to fit element so if you need it to stretch the full window you need to declare it at width:100%. Cells will always fill a table so even if your table only has one cell and you tell it to be 10px wide the cell will in fact stretch to the full width of the table. Cells must always fill the width of the table. If you have two cells and you size one at 100px then the other cell will fill the table automatically. This makes it extremely useful for laying out items with or without widths.

A benefit of table-cells is that they will always have the same height as adjacent cells so if you want equal column colours then this is an automatic process. A further benefit of table-cells is that their alignment of content can be controlled with the vertical align property so you can easily align items vertically. generally though you would set the alignment to top if you were just using it for columns of unrelated content.

Cells must always touch unless you apply border-spacing to the parent (display:table element) and then cells will move apart as required except that this happens on both sides of the cell (and top and bottom if required) meaning the table may look smaller than you wanted along the width. In most cases you can simply add padding inside the cell if you want separation of content unless you are after solid background (equalising) colours then you would need the border-spacing property instead.

All in all its one of the most useful tools in the css toolbox. It’s a shame that colspan and rowspan were not implemented in css either and then it would be perfect.:slight_smile:

It’s a common mistake but vertical margins and padding where percentage is concerned refer to the width of the containing block and not the height of the element as you may have thought. Both vertical padding and margins are best described in fixed units like px, em or rem.

I wonder where Ron got that idea from? He must have mistaken you for another member:)

4 Likes

Thank you so much for such a detailed and deep insight. I was trying to accomplish so manything over-night, but I am going in a planned way now and thus saving myself from analysis paralysis.

I personally feel the one who knows these things →
Position Properties such as flot, relative position, absolute positions, blocks, table/table-cell’s knows a great fundamentals about the CSS.

I also believe If I become comfortable with the layouts I know a great deal because the other CSS/CSS3 properties can be mastered gradually over a period of time → 60-180 days.

the Fundamentals that I mentioned above do you have any suggestion other than w3schools where I can read, and absorb the basic. I have Sitepoint premium, and there around 30 books in HTML and CSS. do you recommend any book or perhaps a screencast on sitepoint Premium that will be helpful for me keeping in mind what i mentioned above.

We did a specific thread here in the forums on Sitepoint about positioning and contains many many useful nuggets of information for both beginners and advanced.

Just look through the examples and read the thread and you will find most of what you need to know. Some of it is complex and some straight forward but all useful in learning the finer detail of positioning techniques.

CSS isn’t hard but is not always easy to know which approach is right when you can accomplish the same thing in many ways. Context is the key which is why we often posters to elaborate a bit more about what they want when they ask a question although some posters get disgruntled when we don’t first give a direct answer (as in a recent thread :slight_smile: ).

4 Likes

<off-topic>

@Novicedeveloper,

What do the words in your title mean?

I tried to look up “Streuncked” in Google translate and the urban dictionary and came up empty. I could really use a clue. Thanks.

</off-topic>

3 Likes

Looks like I was supposed to type → Strucked, and some auto correction did the damage.

OK. I make my share of typos, too. But usually the spelling checker spots them. I don’t use an autocorrect utility but if I did, I don’t think it would make up a non-existent word. Autocorrect sometimes picks the wrong word, but it doesn’t make up “words” that aren’t in its dictionary… “strucked” isn’t a real English word.

I’m not a self-appointed word policeman. I am only trying to say that we sometimes have legitimate reasons for not quite understanding what you say or want. Perhaps giving your posts a little more thought or a proofread before posting would help.

Cheers :slight_smile:

1 Like

I learned today media query in 20 minutes from a video series, and I am now able to implement it quiet easily what earlier i used to think was a tough job as this notion was fed in my mind by the HTML developers who worked for me. I also applied and tested the implementation of media queries at one break point @media (max-width: 950px). It is very simple it is just like saying → Hey Media query when you see this width range implement these CSS styles. It is like If else statement of the PHP. The Live Link.

I still have some issue in my trial HTML Template regarding to padding/margin. After you suggested that for padding a fixed “px” length is sufficient rather than %age. I did that, but I have done something wrong now, and could not fix this. you can see that I have a sidebar, and in that sidebar I have created a widget like setting, but that widget is not getting the correct padding/margin as compared to the header, footer or the main content area.

And the same issue looks more vulnerable when the media query comes in action → That is when the vertical right hand sidebar falls below the main content(blog title and blog paragraph content.) you can clearly see that the wide sidebar that is just above the footer, and the vertical sidebar that is falling below the main-content under the influence of the media query have different padding/margins, but I am unable to find the fix for this and the reason why?

Let me explain you the anatomy of my sidebars →
Initially I developed a wide sidebar that is just above the footer and it has 4 boxes until the media query breakpoint reaches, but however since I wanted this to work in the vertical right hand sidebar also so while putting the same code in the right hand sidebar I created one more code but with one extra class →

.vertical {
	display:block;
	max-width: 100%;
}

This class is the only difference in full width and right hand side vertical sidebar.

P.S. → The issue is still unsolved.

I have identified one more issue in the code. One extra closing tag, but when I delete this div then the design is breaking. Dont know how to fix this.

same is also highlighted in w3c validator

The nesting is wrong. I think that may be the close of <div class="content"> so it should be at the same nested level, outside of the asides.

1 Like

Oh Yes, and now there are no w3c validations error.

Ok Boss. Sorry for the inconvenience. i understand your love and commitment for the sitepoint.com.