Getting all divs to adapt to window size

HTML & CSS
1

Hello!
I am attempting to create a website to show my awesome website building skills… and have run into a slight problem.
I can put the
max-width:100%;
to the containing divs, but when I attempt to put it to the logo div, or the menu div, it proves to be ineffective and the divs do not change with the window size.
Any tips?
http://new.jessallen.me

2

OK, jessallen6. You probably don’t need much help since you are already in the awesome category.

Why don’t you give the HTML validator a run for its money and see what it has to say about your HTML.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fnew.jessallen.me%2F

You might try indenting your code to make it human readable, too. It helps one spot errors.

Click the little “message filtering” button near the top left of the page for an executive summary.

1 Like
3

The “awesome” comment was a slight joke… lol
Also, the nbsp’s are gone. I posted that code a few days ago, have been working since.

4

I know… and I slightly laughed. :tongue:

Do you have some updated code for us to evaluate? You could update that URL with the repaired code, maybe?

Let there be progress!!!

5

You can check back for now! Still working obviously.

6

jessallen6.

Did you check you page with the validator after making the corrections? The validator still shows 6 errors to me.

The indentation is much better but could be improved to make levels of tags clearer… don’t start a line with a span and end with a td even if the HTML is valid.

Can you indent the CSS, too?

Getting all divs to adapt to window size:

If you realize that most HTML elements are fluid by default, and only stop being fluid when poorly chosen CSS is applied, then you will get the drift of my first lines of advice…
1) get rid of fixed widths, especially on block elements.
2) fixed heights are out, too, unless specifically needed.
3) {max-width:100%} in conjunction with a fixed width as it is used on #container, is useless. {max-width:1150px} alone would work just fine.
4) avoid inline-styles such as <td style="padding-left:10px">. Use CSS.

There will be more, but I need to read your code more thoroughly first and you probably want to update your page again.

Cheers

2 Likes
7

Are the images for the slider and the individual images foreground images or background images?

8

You are really helpful! The hawks game was on and then I had to run errands and now I’m headed off to work.
Will do more work on it tomorrow!

9

Well, here ya are. Based on your amazing code…

The top image (where the slider is likely to go) is a background image. The lower 3 are foreground images in table-cells (because it was easy).

As this demonstrates, it doesn’t take much to make images fluid and even to add a touch of responsiveness. Drag narrow and have fun.

The background image at the top is in a relatively positioned box. One might add a slider to such a box if the aspect ratio is correct.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>background image</title>
<!--
images applied to .slidebox as background images.
-->
    <style type="text/css">
.outer {
    max-width:960px;
    margin:0 auto;
}
.slidewrap {  /* Keep the box.  Properties, if any, depend on slideshow width vs page width. */
/*    max-width:900px;
    margin:0 auto; */
}
.slidebox {
    position:relative;
    background-image:url(http://lorempixel.com/960/320/city/);
    background-repeat:no-repeat;
    background-size:cover;
    padding-top:33.33%;  /* height of box. based on aspect ratio of slides = height/width */
}
.table {
    display:table;
    width:100%;
    table-layout:fixed;
    border-spacing:10px 10px;
    background-color:#ace;
}
.tcell {
    display:table-cell;
}
.table img {
    display:block;
    width:100%;
    height:auto;
}
@media screen and (max-width:400px) {
    .tcell {
        display:block;
    }
    .tcell + .tcell {
        padding-top:10px;
    }
}
    </style>
</head>
<body>

<div class="outer">
    <div class="slidewrap">
        <div class="slidebox"></div>
    </div>
    <div class="table">
        <div class="tcell">
            <img src="http://lorempixel.com/300/300/sports/" width="300" height="300" alt="photo">
        </div>
        <div class="tcell">
            <img src="http://lorempixel.com/300/300/cats/" width="300" height="300" alt="photo">
        </div>
        <div class="tcell">
            <img src="http://lorempixel.com/300/300/nature/" width="300" height="300" alt="photo">
        </div>
    </div>
</div>

</body>
</html>
1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.