Cols and rows

Rainer Goergen · 2018-11-21 22:29:17

Hi, now I want to use the col and row programming to insert logos like at this website.
Only the logos 3 or 4 inside a col and some rows:

https://www.richter-frenzel.de/unterneh … en/marken/

But I don't know how to arrange them horizontal middle and/or vertical middle.

This is my testsite. I didn't try formatting but I am confused that the logos are not in the order of the cols:

https://www.birkenhof-sanitec.de/links.php

???

Need help, thank you,

Rainer

rod barbee · 2018-11-21 23:26:48

if you want to use the "row" class, you need to add a space before the word "row" in your html.

This: <div class="col_4row">
Should be: <div class="col_4 row">

It might work better if you create several "grid_12" divs and put only three "col_4" divs inside of that.

When you use grid_12, then three col_4 divs will fill it. If you want four columns, use four col_3 divs, etc.

What you're doing now uses one grid_12 div and inside of that you have 10 col_4 divs. But three of those are written class= "col_4row", which isn't a class. So the proper css isn't being applied.

The row class is used in case you want to force a following row before the current row gets filled. It doesn't look like you're doing that though. So that's why I suggest you create several grid_12 divs and put three col_4 divs inside of each.

and not all of your col_4 divs have been closed (the last two or three I think)

and you have closing </span> tags in each col_4, yet there is no opening <span> tag. You should remove those.

also, the height and width attributes in your <img> tags should have quotes around them: height="200" width="200"
https://www.w3schools.com/tags/att_img_width.asp

rod barbee · 2018-11-21 23:57:18

oh, and you have this before your grid:

<h3><span style="color: #2b888f;">Unsere Marken</span></h1>

you're opening with a h3 tag and closing with a h1 tag

Rainer Goergen · 2018-11-22 17:11:06

Ooh, thank you very much Rod, a lot of things I have maken wrong.
The work goes on. One more question:

How can I align the logos horizontally centered in the row and in the column?
I tried it with margin: auto - all logos are vertically centered - this is ok.
I tried it then with padding: 20px - all logos are getting smaller.

But I cannot center them horizontally.

https://www.birkenhof-sanitec.de/links.php

Rainer

Last edited by Rainer Goergen (2018-11-22 19:11:17)

gengl · 2018-11-22 21:45:20

In your CSS, try this -

vertical-align: middle;

Rainer Goergen · 2018-11-22 22:50:14

So - I have inserted all images for the logos.
All images are 50 px height (with photoshop).
But the website looks terrible.

@ Rod - please have a look at the html code.

I have no custom.css created for this site, I wanted only use html, because there will be no changes in the future.

Rainer

rod barbee · 2018-11-22 22:54:30

I’ll take a look when I get to my pc later today. (On iPad now)
You’re going to need to style it, you can’t do it all with html.
Html is the structure, css gives it the look you want.

Rainer Goergen · 2018-11-22 22:59:37

Thanks, especially the keuco.png. I don't know why it is not at the place like the others.

Tanks, I need a pause. My eyes are a at time a rectangle.

Rainer

rod barbee · 2018-11-23 00:29:21

in the inline css for keuco.png you've got margin auto;. It should be margin: auto;

I'm not sure why you're putting everything in <span> elements. Seems there's no need for that. I don't think it hurts anything though, just something extra you don't really need as far as I can tell.

In your image inline css you have both display: inline; and, following that, display: block;.
Again, it doesn't hurt, it's just messy. You can get rid of display:inline;, since display: block; overrides it anyway.

rod barbee · 2018-11-23 00:36:11

in the future, if you want to do something like this again, instead of writing all that inline css (which can be prone to errors), give each image a class. Something like "links". Then write custom css that will apply to that class. That way all you need to do is add the class to the image attributes.

<img class="links" src="..." height="50" width="xxx" alt="yyyy">

and in your custom css:

img.links {
border: 0;
display: block;
margin: auto;
padding: 5px;
}

Rainer Goergen · 2018-11-23 01:44:08

Thank you very much, now I will try it like you have written. The errors are, because I copied and pasted it from another site. Then I have read this with display: block and inserted it additionally.

Rainer

Rainer Goergen · 2018-11-23 06:39:51

Sorry Rod, wrong topic, I have deleted the post. This is the right topic.

Site works fine now, thanks a lot.

Last question:

How can I get the margin from the left column and the right column equal.
At this time the margin of the right column is much more smaller then the left.

Rainer

Last edited by Rainer Goergen (2018-11-23 06:40:50)

rod barbee · 2018-11-23 08:49:27

padding and such are the same for both sides. It just looks like the space on the right is smaller because some of the logos on the right are wider than on the left.

Rainer Goergen · 2018-11-23 23:49:29

This is true, depends it of the grids size? Don't know.
There is always the same formatting also I change the size of the main copy value.

Rainer

Last edited by Rainer Goergen (2018-11-24 01:54:18)

rod barbee · 2018-11-24 00:06:40

Can you start a new topic for the new question?

rod barbee · 2018-11-24 00:15:33

Rainer Goergen wrote:

This is true, depends it of the grids size? Don't know.

Rainer

No. The column widths are all the same. The wider widths of a couple of the logos on the right just take up more space than the ones on the left, making the right hand side of those logos closer to edge.

You could rearrange the logos do it appears more balanced.

Community @ The Turning Gate

#1 2018-11-21 22:29:17

Cols and rows

#2 2018-11-21 23:26:48

Re: Cols and rows

#3 2018-11-21 23:57:18

Re: Cols and rows

#4 2018-11-22 17:11:06

Re: Cols and rows

#5 2018-11-22 21:45:20

Re: Cols and rows

#6 2018-11-22 22:50:14

Re: Cols and rows

#7 2018-11-22 22:54:30

Re: Cols and rows

#8 2018-11-22 22:59:37

Re: Cols and rows

#9 2018-11-23 00:29:21

Re: Cols and rows

#10 2018-11-23 00:36:11

Re: Cols and rows

#11 2018-11-23 01:44:08

Re: Cols and rows

#12 2018-11-23 06:39:51

Re: Cols and rows

#13 2018-11-23 08:49:27

Re: Cols and rows

#14 2018-11-23 23:49:29

Re: Cols and rows

#15 2018-11-24 00:06:40

Re: Cols and rows

#16 2018-11-24 00:15:33

Re: Cols and rows

Board footer