ds_tx

How can I get rid of extra white space in DIV surrounding video?

In DIV surrounding video, browser is adding a bunch of white space between bottom of video and text description with link to webpage.

See - http://dstall.com/Test.html and http://dstall.com/Test.txt

Note: Example on left uses iframe instead of video tag, but loads video way too wide, then adds a scroll bar beneath which must be used to center video in frame. Is there a fix for that? bc in MediaWiki browser does not add white space below video as seen in example above, so if video were centered without scroll bar, I would need no fix for white space.

What CSS will add arrows to collapsible DIVs?
See - http://dstall.com/Test2/

What CSS will close uncollapsed DIV when expanding another DIV?

What CSS will put a border at top and bottom of collapsed header?

I corrected HTML so there's only a single class and that eliminates indent of root of page view.
But now when I expand page view, the subcategories are indenting to the left instead of to the right, and all the buttons and connecting lines are misaligned.

See - http://dstall.com/Test/

Instead of creating another class, I think the .tree class that creates the +/- buttons and the connecting lines needs to be modified, but I don't know how to do that.

See - http://dstall.com/Test/Test.txt and https://iamkate.com/code/tree-views/

Would you look at CSS and HTML here? http://dstall.com/Test/Test.txt

I add CSS class "customUL" to ul tag that already had CSS class "tree".

When I add that CSS it does nothing.
 

I'm using Tree View by I Am Kate - https://iamkate.com/code/tree-views/
But am getting a big indent; see -
http://dstall.com/Test/
http://dstall.com/Test/Test.txt

How can I eliminate the indent for tree view UL/LI so that it aligns left with DIV header and text?
I've tried several things but they don't work.

What CSS will add arrows to collapsible DIVs?
See - http://dstall.com/Test2/

What CSS will close uncollapsed DIV when expanding another DIV?

What CSS will put a border at top and bottom of collapsed header?

Changed flex: 1 1 74.75%, and flex: 1 1 24.75% to flex: 3 1 0, and flex: 1 1 0, and it works much better.
The 3 is number of times bigger than 1 (3:1 or 75%:25%).

Now all collapsible DIVs collapse at same time.

I'd still like to know how to set max image size and center it.
I suppose using center tag would center image, but how do I set max size and still have image responsive at smaller than max size?

I made it work, but the right sidebar (right2 DIV) collapses below left1 DIV much sooner than the 3 DIVs above footer collapse beneath each other, and sooner than 3 images in left1 DIV collapse beneath each other .
See - http://dstall.com/Test/ and https://dstall.com/MOD/Main_Page

I prefer all collpsible DIVs collapse at same time - right2, pix, left3, center4, right5.
When right2 DIV collapses so soon, then it's so wide that images in it are huge compared to other 3 images in left1 (Main DIV).

Is there a way to assign max size to image and center it, so that it remains responsive as needed, but does not fill width of screen when collapsed while screen is still so wide - perhaps 300px, no bigger than needed to fill smallest screen (320px)?

I want left Main DIV to be 75%, right sidebar 25%.
So instead of flex: 1 1 auto for left1 and right2, I'm using flex: 1 1 74.75%, and flex: 1 1 24.75%
(75% and 25& broke width and pushed right2 DIV below left1).

Is there a better way to achieve that proportion so that more narrow right2 DIV does not collapse so soon?

To make all DIVs collapse, I also had to add all other DIVs to @meda screen CSS (not just left1)  -

@media screen and (max-width: 700px) {
  .pix, .left1, .right2, .left3, .center4, .right5 {   
    flex-direction: column;
  }
.pix, .col.left1, .col.right2, .col.left3, .col.center4, .col.right5 {
    flex: 1 1 100%;
}
}

Also added to all DIVs I want to be collapsible (pix, left1, right2, left3, center4 and right 5) - 

flex: 1 1 0;

At bottom of page, I've tried recreating the four div pix section from W3 template (Architect) and that doesn't work either.
Only displays 2 pix inline instead of 4, and won't collapse to column, only resizes.
See -
http://dstall.com/Test2/
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_architect&stacked=h
https://www.w3schools.com/w3css/tryw3css_templates_architect.htm
https://www.w3schools.com/w3css/4/w3.css

I've revised SampleHTML so it has full header.
See - http://dstall.com/SampleHTML.txt
And I've uploaded it here - http://dstall.com/Test/
Everything displays as I want, and is resizeable but does not collapse into column.

I've added flex-wrap to my container CSS - .box { display: flex; flex-wrap: wrap; width: 100%; padding: 0; } 

I've changed width of Main Div (.left1) from 75% to flex: 3 1 0
and width of right sidebar (.right2) from 25% to flex: 1 1 0 

I've also changed width of pix from 33% (.three) to 100% (.one),
and width of three DIVs in a row (.left3, .center4, .right5) from 33% to 100%.

See - http://dstall.com/Test2/

Right sidebar (.right2) still will not collapse below Main DIV (.left1).

In Main DIV at full browser width on desktop, all three pix DIVs stack on top of one another in a column instead of displaying in a row, and stretch full width of browser.
I want them to center, with a maximum size.

Also, all three DIVs in a row (.left3, .center4, .right5) above footer stack on top of one another in a column.

When I add .row (flex-direction: row) to container for pix and three DIVs they still stack instead of displaying in a row.

When I delete width from container so it's - .box { display: flex; flex-wrap: wrap; }, then the Main DIV and right sidebar collapse all the way to the right.

I have a responsive design working for a MediaWiki Main Page at - https://dstall.com/MOD/
All DIVs resize smaller or larger with browser width, but I want them to collapse into full width single column for smaller screen notepads and mobile phones.

In containers (.box) there is a full width header at top (.welcome) and full width footer at bottom (.left6).
Beneath header is container (.box) with a main DIV (.left1) and right sidebar (.right2).
Beneath that (and above footer) is another container (.box) with three DIVs (.left3, .center4, .right5).

The right sidebar (.right2) does not collapse below the main DIV (.left1).
The three DIVs (.left3, .center4, .right5) do not collapse beneath one another.

I would also like the three images in the main DIV (.left1) to collapse beneath one another and center in screen with a percent of screen rather than full screen.

See CSS and HTML (summary without content) -
http://dstall.com/SampleCSS.txt
http://dstall.com/SampleHTML.txt
 

I have a navigation tree menu like on help page - How To Create a Tree View
I'm using menu on a MediaWiki site.
The a:active function bolds the active page in the tree view, but tree view remains hidden (unexpanded).
How can I make tree view expand to the active page?
 

I found help page for CSS Image Gallery, but I'd like to know if there's a way to -
1) have square DIVs that resize proportionally as browser expands, and
2) have images align center and overflow edges of square DIVs (only show center part of image, not full image)
3) have click on image expand image in Lightbox overlay
I'm using the following CSS with DIVs that are divided equally across full width container, but that only controls width of images, leaving the height proportional to width and not the same as width.

.image img { width:100%; height:auto; }

Thanks. line-height: normal didn't work, but line-height: 100% did

I changed id #box to class .box, and that fixed padding on DIVs 3, 4, 5 and 6. There's 0 padding on all of them now, except 5 which has 10px top and bottom.
But there's still padding being added top and bottom to DIVs 1 and 2, even though CSS has padding set at 0, and HTML for all DIVs is essentially the same as shown in code above.

See - http://dstall.com/Test/

I have DIVs with virtually the same CSS. In one instance, padding is being added and cannot be removed. In other instance(s), padding cannot be added.
See - http://dstall.com/Test/  Enlarge browser as needed to see that padding is being added to top and bottom of DIVs "One" and "Two", and will not apply to DIV "Five" (or any of the other numbered DIVs). See HTML and CSS below -
 

<head>
  <link rel="stylesheet" href="Test.css">
</head>

<div id="welcome" class="home">
  Welcome
</div>

<div id="box">
<div class="col left1">
	<div id="box" class="title title1">One</div>
		Text
</div> 
<div class="col right2">
	<div id="box" class="title title2">Two</div>
		Text
</div>
</div>

<div id="box">
<div class="col left3">
	<div id="box" class="title title3 pad">Three</div>
		Text 
</div> 
<div class="col center4">
	<div id="box" class="title title4">Four</div>
		Text
</div> 
<div class="col right5">
	<div id="box" class="title title5">Five</div>
		Text
</div> 
</div>
<div id="box">
<div class="col left6">
	<div id="box" class="title title6">Six</div>
		Text
</div>
</div>

#welcome {
    background-image: url("https://dstall.com/MOD/images/1/1f/Background.jpg"); 
    background-repeat: repeat-x repeat-y;
    background-position: center;
    padding: 0 !important; 
    margin: 0 0 5px 0; 
    text-align: center;
    font-size: 1.2em; }

#box { display: flex; width: 100%; margin-bottom: 5px; }

.col { text-align: left; padding: 10px; }

.left1 { width: 76%; background-color: #f5fafe !important; margin-right: 5px; border: 1px solid #cedff1 !important; } /* Wikiblue1 */
.right2 { width: 24%; background-color: #f4fff9 !important; border: 1px solid #cdf2e0 !important; } /* Wikigreen1 */

.left3 { font-size: 0.9em; line-height: 120%; width: 33%; background-color: #FFFFF0 !important; margin-right: 2.5px; border: 1px solid #FFE4C4 !important; } /* Ivory  */
.center4 { font-size: 0.9em; line-height: 120%; width: 33%; background-color: #FFFFE0 !important; margin-left: 2.5px; margin-right: 2.5px; border: 1px solid #EEE8AA !important; } /* LightYellow */
.right5 { font-size: 0.9em; line-height: 120%; width: 33%; background-color: #FFFAF0 !important; margin-left: 2.5px; border: 1px solid #FFDAB9 !important; } /* FloralWhite */

.left6 { font-size: 0.9em; line-height: 120%; width: 100%; background-color: #FFF5EE !important; } /* SeaShell */

.title { 
   display: block; 
   font-size: 14pt;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box; }

.title1 { background-color: #cedff1 !important; border: none; padding: 2px 0 3px 0 !important; } /* Wikiblue2 */
.title2 { background-color: #cdf2e0 !important; border: none; padding: 2px 0 3px 0 !important; } /* Wikigreen2 */
.title3 { background-color: #ffe4c4 !important; border: none; padding: 2px 0 3px 0 !important; } /* Bisque */
.title4 { background-color: #eee8aa !important; border: none; padding: 2px 0 3px 0 !important; } /* PaleGoldenRod */
.title5 { background-color: #ffdab9 !important; border: none; padding: 20px 0 30px 0 !important; } /* PeachPuff */
.title6 { background-color: #eee8aa !important; border: none; padding: 2px 0 3px 0 !important; } /* LavendarBlush */