Jump to content

Problem with W3CSS grid


gordonisnz

Recommended Posts

https://www.w3schools.com/w3css/w3css_grid.asp

 

Hello.

 

Basically I'm transforming my websites to use W3CSS as above (using the grid system)

 

Ive got 1 subdomain all set up & its all go - Eveything working fine...

 

however I am now working on a 2nd subdomain - ive copied the same w3.css file over to the second css directory...

(i may put it in a global directory later on, so all my subdomains can access it..)

 

Anyway, Im using the grid system, and also following the "try it yourself" area and all i get is 2 or 3 'grids' on top of each other - not side by side....

 

https://www.w3schools.com/w3css/w3css_grid.asp

Is there a way / trick to make a container go the full width of the screen, & each div in a row stay on the same row. (i'll also put a background color to it... - for the entire row..)
it seems strange, as my initial / first subdomain using this W3CSS was very easy. i did have problems but they were fixed within minutes.. ive been trying to fix this 1 page for about 30 minutes now & i cannot get it to go side by side.... (its getting late, i'll tackle it tomorrow)
Ps - This one page uses a separate header file to the rest of the subdomain. (once i get it going, i'll have just 1 header template)
Find M3 & you'll find the header line i'm trying to alter.
Edited by gordonisnz
Link to comment
Share on other sites

If you view source you will find there is no link to w3.css, you should be able to click this an it will take you directly to that file, but it is showing as plain text, something before this is breaking this link.

 

This

<script src="https://apis.google.com/js/platform.js" async defer type="text/javascript" />

should be

<script src="https://apis.google.com/js/platform.js" async defer type="text/javascript"></script>
Link to comment
Share on other sites

So you dont put <script blah balh blah /> - you need to do.. <script blah balh blah > </script> no self-closing on a script command ?

 

is that right ?

 

 

Thanks - it goes the full width now & shows 3 segments., (I will fix up the colours & content.. - maybe make it 2 segments / bits of sections in that row....)

 

Also got to fix up the 2nd column/ data - It does not go the full height of the first box. will spend this evening researching.

Link to comment
Share on other sites

Hmm.. Still having problems with different heights for each column - but im copying the same code i have in my other subdomain.

 

the odd thing - WHY OH WHY would anyone want different column heights in the same row / container. i would EXPECT you to deliberately code it NOT to have the same heights, but as a default - each column will have the same height.

 

is there any extra coding i need to add to make all columns in the same container the same height ?

EDIT: Just to check if my CSS file is out of date, I changed my header to read:

 

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" type="text/css" />

 

Same result.

 

http://foe.kwister.com/members/

 

(I hope someone has a sensible answer as to why a 'default' is to have different heights for each column in a row/container.)

Edited by gordonisnz
Link to comment
Share on other sites

The reason why columns all have different heights is because they only expand as far as the content within them. The "columns" are not actually columns, they're just boxes that happen to be next to each other. None of the boxes are aware that the other boxes exist, so they can't update their height based on what's next to them.

 

The easiest way to solve that with just CSS is to set a fixed height for the boxes. but if any of the content exceeds that height it will overflow. If you make the height very large to prevent that then you'll have a lot of empty unused space on the page.

 

A second solution is use use display: table-cell, wrapped in an element with display: table-row and a parent with display: table. This is effective, but you should use media queries to set the display back to block for smaller screens. Tables have never worked well on mobile devices.

 

A more modern approach is to use flexbox. Internet Explorer has only recently supported it, so you'll have to keep that in mind if you care about supporting Internet Explorer. Aside from that, I personally have disagreements with how the flexbox specification is built. The most basic box model is broken by the flexbox module and you have to wrestle with it to get it to behave responsively. By detauls it would rather show a horizontal scroll bar than allow the content within it to be rearranged to fit a small screen.

 

You could just get Javascript to find the largest of the columns and update the height of the others accordingly.

 

Overall, equal height columns are really complicated to work with in CSS, which is why practically nobody uses them.

Link to comment
Share on other sites

Ive found the CELL command - seems to be better, however i think the actual physical cell is correct, its just not putting the background colour to FILL the entire cell..

 

Its only putting the background colour immediately where the text / image is - NOT the entire area of the cell..

 

ive changed it to here :-

 

<div class="w3-container"> <div class="w3-cell-row"> <div class="w3-container w3-blue w3-cell w3-third w3-center"> <a href='/'><img src='http://www.kwister.com/img.png' alt='image of logo' style="width:100px;" /></a> </div> <div class="w3-container w3-blue w3-cell w3-threequarter w3-center"> FOE: Members Area </div> </div>

</div>

 

 

any advice ?

 

Link to comment
Share on other sites

yay... Ive fixed it (sort of)

 

<div class="w3-cell-row"> <div class="w3-container w3-blue w3-cell w3-mobile"> <a href='/'><img src='http://www.kwister.com/img.png' alt='image of logo' style="width:100px;" /></a> </div> <div class="w3-container w3-blue w3-cell w3-cell-middle w3-mobile"> FOE: Members Area </div>

</div>

 

 

The only problem is that you cannot combine the w3-cell command with w3-third etc..

 

the cell command should auto-adjust the height... of a cell - to be even accross the whole row.

 

 

https://www.w3schools.com/w3css/w3css_layout.asp (see "layout cells adjust to equal height")

 

but it wont work if you want different horizontal widths of cells. (eg :- w3-third ) they cant combine...

 

oh well..

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...