MichaelF

It has been several days since I posted this topic. Does anyone have any advice as to why the transform: rotate property seems to add so much space after the photos on the web page I referenced?

I have a conundrum in this web page: https://allenstown-alt.org/news-analysis/20200812-early-fall-concert.htm I created some CSS styles to overlap and rotate some photos but they result in a big empty space below the photos. I have to use <p style="margin-top: -350px"> to force the following paragraph upward. The top two photos are animated horizontally. The styles for the photos are of the form: .photo1 { position: relative; top: 10px; left: 0px; z-index: 1; transform: rotate(-10deg); } The photos are grouped in a DIV block and each photo references one of

Dear dsonesuk, I tried inserting the left: calc(50vh + 425px); into my <a href> tag as part of the style parameter, but whatever changes I tried for the two values, the Top button would not line up at the right edge of the content table in the 850px width and the max width. I checked the W3schools CSS site for more details about calc and found an example that used percentage instead of whatever vh stands for. After some experimenting, I found that left: calc(50% + 370px); positioned the Top button at the same relative position in the 850px width and the maximized width. That me

I have a CSS style that creates a TOP button fixed to the bottom right of a web page so, as you scroll, it stays put. How can I detect when the browser window is maximized so as to keep the Top button on the lower right edge of the content? My page design uses an 850px wide whole page table for content so the page width is fixed whether the browser window is at 850px or maximized. This is how a Word or PDF document behaves. The Top button appears at the lower right of the window at 850px but at the center of the page when the browser is maximized. The basic properties position the To

I just did an experiment. I saw somewhere on one of the W3.CSS pages that you could download the css file and run it locally. I examined the file and saw at the top two statements with html definitions. The first one included box-sizing:border-box. When I looked up the box-sizing property, the default was content-box, as you stated. I commented out the two html statements and then added a link to that local file before the link to my css file. Amazingly my left, center, and right div blocks displayed as expected again. I did have to add "line-height: normal" to my p, th, td, and a fe

I did move the link to my css file below the link to W3.css and the problem persisted. I don't understand the difference between a border-box and a content-box but I agree with your sentiment. There are so many useful and interesting W3.css classes but I can't use them if they distort basic element behaviors n unexpected ways. Has anyone else noticed this problem?

I was looking for a more flexible way of creating popup tooltips when I came upon the W3.CSS framework. It Unfortunately, it seems to mess with my own css styles. For example, as soon as I added this link tag to the file head section, <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> all the paragraph elements increased in line height. Also, I use div blocks for left, center, and right columns. W3.CSS narrowed the div blocks by about 10-20 pixels, pushing the whole page to the left. My div blocks use float: left and different width values to buil