Header layout


#42

I think you also mentioned that behaviour in css comments. but thanks for expanding on that.


#43

Even though its true, I still have to try and learn “right tool for the right job” approach. I think its my main issue - figuring out what technique is best suited for the specific task…


#44

I wholeheartedly agree! agree


#47

I added some test images to flexbox version and uploaded it for review. please take a look at test link in post # 14.

Following are some changes I made to flexbox layout just to see what happens:

  • I am using images 600 x 425.

  • header > div, main, footer > div changed width to 90% and max-width to1600px;

  • main > div changed flex-direction to column

questions:

  1. with flex-direction: row the images are not scaling proportionally but flex-direction: column appears to fix the issue

  2. I really like the layout of this portfolio page http://www.mlwebco.com/work/. I looked at view source and it appears its using flexbox. So I was wondering if same behaviour can be implemented in your flex-layout, Ron. The only difference is that I am planning to have 3 images per row. I also noticed that at that layout images are not gradually scaling…even though its flexbox based. It looks like they have a fixed size although I am not sure…


#48

Correction for above code snipet


#49

Good call. agree

Might I recommend a couple of other choices:

(1) in addition to {flex-direction:column}, also add {justify-content:center}

main > div {
    display:flex;  /* flex items can be flex boxes, too. */
    flex-basis:33.33%;  /* similar to width except more flexible */
    flex-direction:column; /* preserves aspect ratio */
    justify-content:center;  /* also add Me to vertically center images within each row */
}

(unless you are satisfied with the row of images top aligned.)
 

(2) add {align-items:center} instead of adding {flex-direction:column}.

main > div {
    display:flex;  /* flex items can be flex boxes, too. */
    flex-basis:33.33%;  /* similar to width except more flexible */
    align-items:center;  /* Add Me to preserve aspect ratio and vertically align images in each row.   */
}

Details of these properties can be found within the flex references already given. smile


#50

Sure will do. But can you explain why changing to flex-direction:column helps to keep aspect ratio…? Does it have to do with the fact that main axis changes its direction from horizontal to vertical…?


#52

It’s a good question, but I cannot answer it. There are other methods that do not involve {flex-direction:column} that preserve the aspect ratio of the image. I do not understand enough about flex to answer the specific question about {flex-direction:column}.

Here is a third choice:

main {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;  /* In this layout, this affects the last row if it has fewer content boxes than the preceeding rows.  Comment out to test; try other values. */
    align-items:center;  /* preserves aspect ratio and vertically centers images */
    margin:0 auto;
}
main > div {
    flex-basis:33.33%;  /* similar to width except more flexible */
    padding:7px;  /* it is better to assign padding around a foreground image to its parent container rather than to the image itself */
}

#53

I changed the code to your third version as I find it better logically structured: both alignment rules are within same declaration main { and as a result main > div { has less code

Thats OK, Ron because as you mentioned there are other methods that work and help preserve aspect ratio.
I slightly changed CSS to accomodate two columns layout for now. I also removed logo. I am working on the header now. I am trying to style the nav. Please take a look at test link in post # 14.How can we distribute space evenly between each nav item and also decrease/increase space between items?


#54

<off topic>
Sergiy,
  Do you have a URL to the original mountain scene image that you are presently using?
</off topic>


#55

https://pixabay.com/en/nature-waters-lake-island-3082832/


#56

Looks like border-spacing: 20px 0; set on header nav ul { working to increase space between menu items…
Not sure if px is a good choice for this property for this layout…


#57

actually padding-left on header nav ul li seems a better choice than border-spacing since it only increases distance on the left whereas border-spacing increases on both side shifting the whole menu to the left…


#58

Sergiy!

Here are a couple of variations of the header for you to play with. Let’s see if either of them moves you any closer to your desired design.

header-layout3b=ronpat.zip (1.2 KB)

header-layout3c=ronpat.zip (1.2 KB)