.gridContainer {
height: 100%;
display: grid;
grid-gap: 1%;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
grid-template-areas:
"h h h h h h h h h h h h"
"b b b b b b b b b i i i"
"b b b b b b b b b i i i"
"b b b b b b b b b i i i"
"b b b b b b b b b b b b"
}
/* BCOA name across top */
.header {
grid-area: h;
}
.subhead {
grid-area: s;
}
/* top right image or logo */
.logo {
grid-area: i;
align-self: start;
}
/* for picture on left */
.picture {
grid-area: p;
}
/* to wrap around photo */
.wrap {
grid-area: w;
}
.body {
grid-area: b;
}
and the html is:
<body>
<div class="content">
<h1>Borzoi Club of America Code of Ethics</h1>
<div class="gridContainer clearfix">
<div class="logo"> <div src="images/bcoa_logo.jpg"/></div> </div>
<div class="body">
<h2>Members of BCOA pledge to abide by the Code of Ethics:</h2>
<p>The purpose of the Borzoi Club of America, Inc. is the protection of the breed. ...</p>
</div>
</div>
<?php include("_includes/footer-history.php");?>
<?php include("_includes/footer-bcoa.php");?>
</div><!-- body -->
</div> <!-- gridContainer -->
</div> <!-- content -->
</body>
Is that the logo image that got a cut and paste error or typo?
A div element is a container, it can’t be replaced with an image source.
An img element though is a “replaced element”, it has no end tag as it can’t contain anything, and it is replaced with its image source: <img src="images/bcoa_logo.jpg" />
And for a semantic html, as a content image it should also have the attributes for its pixel width and height and a descriptive alt text. E.g: <img src="images/bcoa_logo.jpg" width="400" height="250" alt="A BCOA club emblem with a Borzoi-dog over a USA map" />
I can’t make a working page of your posted code without a lot of edits, sorry.
Please post a complete template with all relevant code.
Erik, thank you so much for spotting that error in the code (<div src= etc.). That at least got the image to appear on the page, which is a start. It’s too late tonight for me to try to figure out the rest but I’ll take a look when I get up tomorrow and see if I can fix the page myself. I looked and looked and LOOKED at that code and totally missed that error. I started out in print publishing MANY years ago and learned quickly that it’s very hard to proof one’s own work. Obviously I still can’t. Thanks so much. I’ll report back tomorrow - hopefully that I’ve solved the problem.
OK - I’ve removed all the css which isn’t used in the page, found and extra </div> and removed that, re-sized the logo from the original large size down to ¼ size. I have not included the size of the logo either in the html (php actually) nor in the css because it needs to be responsive. Now the logo does drop down to start with its top edge at the top of the copy … but smack dam in the middle!
Here’s the css (ALL of it!):
@charset "UTF-8";
.gridContainer {
height: 100%;
display: grid;
grid-gap: 1%;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
grid-template-areas:
"c c c c c c c c c i i i"
"c c c c c c c c c i i i"
"c c c c c c c c c i i i"
"c c c c c c c c c c c c"
}
/* top right image or logo */
.logo {
grid-area: i;
}
.copy {
grid-area: c;
}
.copy h2 {
margin-top: 0;
margin-bottom: 0;
}
.copy li {
font-size: 1.5vw;
line-height: 1.2;
text-align: left;
margin-bottom: 1%;
}
The page code:
<body>
<div class="content">
<h1>Borzoi Club of America Code of Ethics</h1>
<div class="gridContainer clearfix">
<div class="logo"> <img src="images/bcoa_logo-sm.jpg"/></div>
<div class="copy">
<h2>Members of BCOA pledge to abide by the Code of Ethics:</h2>
<p>The purpose of the Borzoi Club of America, Inc. is the protection of the breed. To that end, the purpose of this Code is to set forth principles of practice that the BCOA Board expects its members to follow as they strive to preserve the quality of the breed. The Code represents the minimum in ethical practices. To this end, the member agrees:</p>
</div><!-- copy -->
</div> <!-- gridContainer -->
<?php include("_includes/footer-history.php");?>
<?php include("_includes/footer-bcoa.php");?>
</div> <!-- content -->
</body>
There are days when I wonder why I even TRY doing this stuff!! This method looks so easy and intuitive and I feel so stupid that I can’t get it to work!
Hmmm. It’s just dawned on me that that is NOT “all” of the css because there is a “BCOA-main” css file as well, which is listed before the “grid-template.css” file. The code above is obviously just from the second css file.
Because there is also a logo style in that main file (that just hit me as I typed the previous paragraph) I changed the name in the grid-template.css file to bodylogo instead but it made no difference.
I think you do well trying! The more you struggle, the more you learn. And you earn what you learn.
In that pattern it should be. All areas are rectangular with four sides in different sizes and fit the pattern.
The next pattern on the other hand, where c is the copy container and i is the image container:
The fourth row will extend the c area and cause it to overlap the i area. It can’t float its content around the image area, instead it also overlap its content over the image.
If the image was a float, normally the copy container would also then overlap the image, but it could float its content around.
So, instead of imitating float-right, I think you could achieve the pattern if you actually make the image a float.
But float doesn’t take effect in a grid, so in order to escape the grid environment the image would need to move into the copy container to make the copy’s content go around.
It seems like you are trying to flow content from one region into another and ‘afaik’ you can’t do that with grid.
If you want the logo to the right then you will need a separate row underneath.
e.g.
If indeed you do want your left hand content to automatically wrap around the logo then why are you messing with grid when that’s what floats were designed for:)
You use grid to set up the main sections of your page but you still need flex, floats and normal css inside the grid to control the finer details as required. Don’t try and turn everything into a grid.
Thanks Erik. The problem is that, even though I’ve been doing this stuff for years - since the 1980s I think - I have an inordinate amount of trouble getting floats to work properly, so was hoping that this method would make it easier. I do realize now, though, that I did read about keeping things in a rectangle and of course the c section above is an l shape, not a rectangle. Duh. See? This is why I feel stupid about this stuff! I figure I’m having a good day when I can remember my own name - and I’m not kidding! The older I get the worse my memory is and I just forgot the “rectangle” rule.
So what you’re saying, then, is that I can’t use the grid for “page layout” as a whole; just for specific instances. I DID get it to work to produce 4 columns displaying photos and contact info for all the club executive and committee members but that’s all that was on the page other than headers and footers.
I have to say I’m disappointed that I still have to use floats because it seems to take me 10 times as long to get a page to work that way than building pages without floats.
I do realize that I could just have a section of css-grid where I want the photo with text beside it but I’d like ALL the copy on the page to flow smoothly and if I have a “table” (for want of a better description) in the middle of it - or even at the beginning - there’s no guarantee where the copy will break when it’s on a different platform (i.e. phone vs computer).
Thanks so much for trying to help - I really appreciate it.
Thanks for your input Paul. I do realize that I could just have a section of css-grid where I want the photo with text beside it but I’d like ALL the copy on the page to flow smoothly and if I have a “table” (for want of a better description) in the middle of it - or even at the beginning - there’s no guarantee where the copy will break when it’s on a different platform (i.e. phone vs computer).
As I explained to Erik, I seem to have an inordinate amount of trouble getting floats to work and thought that css-grid would remedy that. Obviously not, which is disappointing.
I think the intended use for grid is to create the outer framework for a page layout. Specifically a layout that resembles a grid.
Then that grid will contain sub elements, the content of which may use other layout methods as required, be that basic flowing content, floats, flex, or whatever suits the desired result.
I don’t think it’s for placing every single element on the page.
I think floats are fine and simple enough, when used for what they are intended to do. They can become problematic when used beyond that, like to do the thing I said grid was intended to do, layout a whole page structure or suchlike.
But I thought floats wouldn’t work inside a grid? If the grid lays out the outer framework, wouldn’t that mean that using a float as a part of the content means the float is inside the grid? Or am I not understanding what you’re saying?
Without seeing the design you are attempting then it’s difficult to give specific answers but it seems that all you want is a logo floated right and for content to wrap the float as required.
This is standard behaviour for floats and not something grid can do. You could of course have the whole page in a grid but grid as it name implies is a grid of rows and columns in rectangular areas so you can’t have text flowing around an L shaped area.
Admittedly I have not tried, but assume an element within a grid is like any other element and floats will be floats the same. They may require clearing if there is not enough accompanying content to clear it, but that’s nothing new.
I am of course referring to a floated element as a sub element of a child of the master grid, a sub layout within the layout, not a floated element as a direct child of the grid.
OMG! OMG! OMG! It worked!! I think I love you Erik. Thank you so much! Now I just need to set a margin-left on the image. Why do they say floats don’t work in a grid when it’s obvious they do?!! I guess the difference (just thinking out loud here) is that the image is inside it’s own div now whereas before it was just an image within, say, a p tag.
Thank you so much - this will make my life SO much easier!
