Anyone a real pro with html, css?

Anyone a real pro with html, css?

So I've been having a problem with this table for the past couple hours... I'm trying to make a simple table consisting of three cells, so one row and three columns. I want the middle column to be centered with the span I place inside of it and the other outside cells taking up the rest of the space within the table. I've included a picture to better help explain what I'm trying to do...

What keeps happening is the top table. What I want it to look like is the bottom table. I'm using inline-block for the middle cell which is what I want, the middle cell then changes to fit the text inside of it perfectly, but then the two outside cells do not fill the gaps completely. There's weird spaces between them. Any suggestions on what to do? Thanks.

Attached: help.png (1267x336, 8.99K)

Other urls found in this thread:

jsfiddle.net/
css-tricks.com/snippets/css/complete-guide-grid/
css-tricks.com/snippets/css/a-guide-to-flexbox/
en.wikipedia.org/wiki/Paragraph
links.twibright.com/
lynx.invisible-island.net/
en.wikipedia.org/wiki/Lynx_(web_browser)
blohg.readthedocs.io
philipwalton.github.io/solved-by-flexbox/
jekyllrb.com/
gohugo.io/
blog.getpelican.com/
en.wikipedia.org/wiki/Server_Side_Includes
twitter.com/SFWRedditGifs

try setting margins to 0

right-click inspect. all of those spaces are explained. If you still can't figure it out, put up the page somewhere.

jsfiddle.net/

Tried doing this, the row is going 100% across the page, but the cells do not... The row is covering 100%, but the cells are only covering like 95%... the remaining 5% is just row, no cells.... if that makes sense.

post the css

it's 2019

this is likely going to be too low level so there are several abstraction libraries you can use on top of that to help implement an html table.

I'm just a beginner. I just really know html and css, haven't started learning js yet. So I'd prefer a solution with just html, css.

the css is a mess. I have many different classes and containers and shit, it would be a bitch.

Attached: c51307ace57c539b1e83fe3e87eb854436adca4958d9f348e7af468d611200cf.gif (350x263, 80.68K)

so you got the answer to OP's problem or just posturing?

...

you are a fucking baby but post the css

here is the table in html:



first middle column last col

the css for hopefully all the elements in the table:

#body {
padding:0px;
padding-bottom:90px; /* Height of the footer */
}
table.model-page {
border-collapse: collapse;
width: 100%;
height: 100px;
text-align: center;
font-family: system-ui;
color: black;

}
td.make-col {
background-color: red;
max-width:100%;
white-space:nowrap;
padding: 0px;

width: 100%;

}
span.yikes {
font-size: 20px;
background-color: orange;

}
td.logo-col {
background-color: gray;
padding: 0px;

height: 100px;


}
td.model-col {
font-size: 70px;
background-color: blue;
display: inline-block;
height: 100px;
padding: 0px;

OP here. I've just been changing the display and position elements back and forth for like the past three hours hoping it'll eventually end up like how I want it, but no dice.

also, I can't use col percent, 1st = 30, 2nd = 40, 3rd= 30 cause I want the middle columns width to change as I change the text inside of it.

Does it have to be a table? This sounds like you want to use a table for layout, which is not what tables have been designed for. Tables are for presenting data in a tabular fashion. If you want to do layout use CSS grid or flexbox.
css-tricks.com/snippets/css/complete-guide-grid/
css-tricks.com/snippets/css/a-guide-to-flexbox/

make td.make-col; width 30%
and td.logo-col; width 30%

oh, ok. You're right. The table is for layout... I guess I'll learn this shit then. thanks user.

I'll try this though real quick,see if it works.

Why is the middle one inline-block? That will definitely mess up the table structure.

Remove inline-block, then add "white-space:nowrap" and "width:0" to the middle cell, and remove the width properties from other cells.

Close, thanks for your input. But I want the middle column to only be as wide as the content, which is text in this case, that it is in.

That's what it does.
table.model-page { border-collapse: collapse; text-align: center; font-family: system-ui; color: black; width: 100%; height: 100px; }td.make-col { background-color: red; white-space:nowrap; padding: 0; } span.yikes { font-size: 20px; background-color: orange; }td.model-col { font-size: 70px; background-color: blue; white-space: nowrap; padding: 0; width: 0; height: 100px; }td.logo-col { background-color: gray; padding: 0px; height: 100px; }

Attached: Untitled.png (1580x134, 7.65K)

I must have another class or css tag conflicting with my shit, cause my middle column is like taking up 70% of the space and I've got like only 5 letters in it.

also, the middle column isn't centered in the middle. It looks like it's slightly leaning to the left.

Hey mate, this should do it:

TEXT

No CSS used either. Works in my Pale Moon.

oh shit, this works. Just one minor problem, when I put characters with a space, it creates a new line. I tried making the text in there inline, but it still makes two lines.. anyway way to fix that? You seem to know a thing or two about this shit.

Attached: help2.png (1344x61, 1.14K)

It's literally just except hard coded into the HTML. As soon as you start to put things into the cells it'll become unbalanced again
I don't think there's a way to fix that using a table, flexbox might work but as soon as you release the page for other people then all the retards with ipads will start complaining because flexbox isn't well supported and breaks on their devices. The real problem is what you're trying to accomplish because I highly doubt it's going to result in a good page design to begin with.

To fix the newline problem you need to use white-space:nowrap.

TEXT
Does the trick. By the way, if you want my advice for the future: always use the simpliest available solution - will make your work so much easier.

HTML rule nr 1: Don't abuse tables for layout!

All these tags are considered unsupported in HTML5.

apart from what said
values should always be in quotes.

No one's ever explained to me why. As a counterpoint, table layouts will work on all devices, they don't require css to work, and they're dead simple to understand.
So? HTML wasn't designed for writing applications in, yet here we are.

My goodness, HTML has become cancer.

So what? Isn't Zig Forums always complaining about "bloat" and "reinventing the wheel" ? All that stuff has been perfected long ago. The standards bodies can go fuck themselves.

They can't.
Right. But some people care more about some authority telling them it's "DEPRECATED". Fuck off with that shit.

No but because browsers react differently to tables because they were never meant for layout and tables render slower you fucking retard and put CSS in an external file so it can be cached (Yes. Those old values will just be converted to CSS by every browser anyway).

Problem isn't the table, it's the esoteric spacing that OP wants for the cells for some reason. Nobody would use a table like this normally.

Seriously? You can do this easily in a lot of other markup-based GUI frameworks.

You mongols who can't even put quotes around values or conform to XML is the reason it's bloated btw.

BTW, about HTML.
It is said HTML isn't XML conformant and we have XHTML for that yadda yadda.
So, the question is, how exactly? Is it the fact you can just shit out unmarked plain text as a response to a client? Or is it something else? I mean, if you open and close your tags correctly, it should be pretty XML-ey, right?
I'm really confused about XHTML/HTML differences pls no flame.

The goal is to create a flexible cells from which the middle one takes absolute priority in claiming space, and the rest of the space is distributed evenly for the other cells regardless of what content the cells have. That's very specific and strange requirements and I don't understand why you'd want that.

XHTML needs to be XML conform and needs to be send with the correct XHTML header.

Is HTML not XML conform by itself? Like, WhateverHelloworld is not conformant or what?

No. It's meant to decipher all garbage data people shove at the browsers.

>The tag inserts a single line break.
LOL WTF
Is this even necessary.

In WPF for example, that's fairly simple to do by making the middle column have "auto" width and then giving the other columns a width of "*". That's it, you're done.

HTML is shit if it can't elegantly handle sizing containers to their contents as a priority and then filling space with other stuff.

Obviously. Otherwise you only have paragraphs.

WTF is this controversial design.

You'd have tabs and newlines and spaces fucking everywhere on the page if you read whitespace from a HTML document like it was in a text editor.

It doesn't strictly has to be a tag still though.

Are you retarded? Websites abusing it is bad enough.
There's a difference between paragraph spacing and line height.

In text-only (CLI) browsers there should be no difference.
Inserting empty lines to format shit within a paragraph is breaking the paragraph.
Inserting empty lines to make margins between paragraphs could and should be achieved by some more graphical parameter that dictates margins between paragraphs, should it not?

I'm coming from a simple idea that a paragraph is a text entity separated from the rest by a newline. Thus, an empty paragraph should at LEAST bear a newline within. Like, WTF.

A certain margin or a first line indent. Example is with both for demonstration.
However a paragraph can also contain new lines within.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a new line within that paragraph. This is a paragraph. This is a paragraph.

This is another paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.

This is why both and exist.

Attached: Untitled.png (1502x767, 91.25K)

This reminds me how most documents are formatted wrongly because wrongly because retards always make new paragraphs when they want to make a new line and make 2 paragraphs to create the paragraph space.

>because wrongly

Especially because in those fucking word processors there isn't a default indent or margin set so it's hard for newfags to differentiate.

It's incredible how many people get this wrong. Even Zig Forums formats posts incorrectly, the paragraphs have a class which defines 0 margin onto them, and empty lines are empty paragraphs.

Actually the class on it doesn't seem to do anything, which is arguably even worse.

No it does but the default behavior is being overwritten through "margin:0px;" in the CSS. If you remove that or disable CSS in your browser the entire page looks like reddit spacing. It's fucking horrible.

Neck yourself applecult pajeet.

Here's what I mean.
What's really astounding is that can still find ways to increase the mess while telling us how great tables are for layout.

FUCK YOU! GO BACK!

Attached: no_css.png (1366x625, 46.91K)

who even needs html5. the old standards can do everything that anyone ever needed. html5 only adds bloat and botnet.

As far as plaintext is concerned, it's newline separation only. Like, not double-newline, just a newline.
This response is 2 paragraphs, not counting the post number quote. With the post number quote, it's 3 paragraphs.

Paragraphs don't exist without vertical margin or indent of the first line.
Now be silent you foul.

I'm not an american but here's the US constitution.
As you can see, the paragraphs are indented.
en.wikipedia.org/wiki/Paragraph

Attached: United_States_Constitution.jpg (600x724, 126.64K)

HTML5 adds tags like and and which make it easier for machines to interpret pages. You could argue that it's a bad thing but I think it's mostly good.

Embedded videos and audio are also a HTML5 feature.

If we think about more graphical mode though, I can see now where you are coming from. Still a paragraph is not necessarily separated from the rest with a margin or a first line indent, and prose paragraphs do not allow linebreaks in general.
tag still sounds kinda bullshitty and, with context in mind, it didn't have to be a fucking tag, like why.

You don't know what you are talking about.

> tag still sounds kinda bullshitty
It does because XML is shit, no matter what you use it for.
Because line breaks in XML are converted to spaces or nothing depending on whether their in between other text.

CSS is crap. plain html only. just use fucking tables there's literally nothing wrong with them. if there is some problem it's because browsers are shit

> tag still sounds kinda bullshitty and, with context in mind, it didn't have to be a fucking tag, like why.
To elaborate: linebreaks are a part of content, not a part of markup, this shit should have been encoded with special character input formatting or something.

B-but HTML is not supposed to be XML?

I fully agree with that and point towards XML being a piece of shit.

HTML has thrown all the qualities of XML overboard only to even increase all its deficiencies.

Using tables for layout was a shitty hack from back when CSS did not have flexbox and grids. And even back then it was a bad idea because it would fuck with non-visual user agents. HTML is for content only, CSS is for presentation.


Because you are making your life harder by abusing something (or else this thread would not exist) and you make life harder for users of screen readers and text-only browsers. Tables are for tabular data, and screen readers and text-only browsers will render them in an appropriate fashion. Just because it looks good for people with working eyes does not mean that it looks good for everyone else.

Anyone who advocates using tables for layout should have their eyes burned out with a glowing metal rod and be forced to only use websites that use tables for layout.

Are you blind or why is this an argument. I'm against using tables for layout btw.

Wouldn't be so bad (well, the second part).

text browsers will show unreadable garbage anyway. they show everything as plain text so the page that you see on the screen will be full of css and javascript code and you then have to find the actual content from all that crap

Oh, look, you can actually fix this behavior with a tag, or, better, with "white-space" property set to "pre-wrap".

WhateverHelloworldFirst
a
b
Last

try links instead of curl.
links.twibright.com/

Fuck, it should be or
Does code parser treat stuff literally or I'm just retarded?

I haven't touched web development in years because I stopped drinking. It was the only way I could stomach it.

OK, posting parser on 8ch is actually sane and does not allow funny stuff like that LOL

I am not blind myself, thank God, but other people are not so fortunate. I think making content accessible when you have the technology to do so should be common decency. It's not even just people who are full-on blind, people with bad eyes could still benefit as well.


What? No, that's not how text-only browsers work, they don't just show you the source code. A text-only browser will render a good representation if the page is well-structured.

See, back when the web was being just invented, graphical web browsers were not common. Instead of browsers people were using "user agents", which could really be anything. Usually they were text-only interfaces, so HTML was designed to be able to render on these devices as well. Pic related is Lynx.
lynx.invisible-island.net/
en.wikipedia.org/wiki/Lynx_(web_browser)

Attached: Lynx-wikipedia.png (1100x799, 15.53K)

When I posted that he hadn't posted any HTML or CSS. I could have probably guessed the solution but I'm not wasting my time when someone can't even provide their code. I just found it amusing that Zig Forums has fallen so far and been infested with so many youngfags that most of the anons here don't understand how to use HTML tables. I'm just amused that I've gotten so old something that everyone knew when I was doing webdev has fallen out of being common knowledge.


I'll try to explain how this meme got started. In the early days on the web tables were the only thing we really had to make unique layouts. Something like your typical web forum would pretty much be tables everywhere. Lots of fags started doing things like embedding images within them/around them and many other tricks of the sort. These layouts typically looked fine as long as you were running IE but regularly broke on other browsers and things like WebTV and handheld devices.

Since IE was trash and Microsoft stopped doing regular updates to fix bugs once they gained most of the user base there was a revolt against it. This is why webdevs started pushing the idea of following a standard and along with that came CSS. CSS was great and allowed you to code HTML once and have the layout changed depending on the end user's device/resolution/browser etc. Tables for layout became old fashioned and seen as something one should stop doing because they still rendered so differently on various browsers/devices. Most people still used them widely and hacked together some CSS rules to fix any problems with them but a small subset of people went so anti-table that they refused to use them even for tabular data.

What ended up happening is we came full circle and everything is still as bad as ever. Around the same time the "don't use tables" meme got started and it looked like their was going to be good standards put in place a little thing called AJAX started to become popular. AJAX led directly to the web 2.0 meme and javashit was suddenly everywhere. This was considered not a problem because the standards said you should code for no-javascript devices first and only add AJAX features on top of that for people that could use them. Of course eventually people stopped caring about non-js users all together and at some point they stopped caring about the standards too.

So now you have a web almost fully controlled by Google and their botnet. Chrome is considered the "living standard" much like IE was in the mid-90s. No one really dose their own website from scratch anymore and they rely on a bunch of frameworks and pre-built applications like Wordpress. Instead of having websites that work and look good on every device you end up with websites thrown together to look good on the lowest common denominator (cell phones) with everything else as an afterthought.

Just use whatever you want for your design. At the end of the day no one cares about what's running under the hood. The normalfags think javascript cryptocoin miners are a swell idea they aren't concerned about the data inside those tables taking a little longer to load.

Attached: 44564a0576dc6192120c8060f6a5110b61b2ef9f1f8c22c694e0258354f85176.gif (700x700, 311.2K)

Table layouts are best for blind people as well. The reason is simple: 2-dimensional layouts are a trap for screen-readers, because they contain information in the square of the screen-size. Reading out every cell in order doesn't cut it, you'd never reach what your looking for. Instead, you want to be able to scan down columns and across rows. Screen readers contain powerful ways of doing this when the layout is a . For the latest css framework? Not so much.

Wow, this got 86 more replies than my le reddit post did, I'm shocked. This OP btw. So, I actually finally got it figured out and working pretty well. Ending up just making some flex containers, dropped the tables. It's actually just what I wanted. So thanks guys.

Question since there seem to be some people in here that really know their stuff. I'm very new to webdev, only been practicing it for a couple days now. I'm making a lot of webpages, but I'm worried about one thing: when I want to make a future change to, say the header of my webpages, currently, I would have to make that change separate for each individual page, right now I just have like 11, but next week I could have 200. Is there a way I could make like a CSS class but for html code? IF that makes sense? Thanks.

Attached: 1548199952849.jpg (1600x2400, 515.94K)

You're supposed to construct the pages on a web server.

The only other option is to use javascript and either load the header for each page, or replace all links so they load/replace the page contents instead of navigating to a different page.

put it in a iframe or rewrite it in something that supports templates. html is for static content not those where the content might change like that.

What you want is a website that via PHP or whatever includes a .html header and footer file in each of your pages.
Look at web 1.0 CMSs like Webspell (lol).

Or blohg, blohg.readthedocs.io

I'm glad you took my advice, that's precisely the thing flexbox was created for. I remember when I first learned about flexbox my jaw dropped and I was like "wait, we can do all these things in pure CSS without any hacks!?". This is where I first learned about flexbox.
philipwalton.github.io/solved-by-flexbox/


Not in HTML, it is pure content without any logic. HTML (and XML) is not really meant to be written by hand (even though you can do it), it is meant to be generated. There are three solutions: one very bad, one that you should only use when you need it, and one that's actually good but not suitable for all cases.

< The bad solution (client-side generation)
Use Javascript to generate the header. This is bad because it requires users to run interactive code for something that is not supposed to be interactive. People who don't have Javascript or have it turned off will not be able to use our website. Javascript should only be used when necessary (e.g. when making an interactive web app) or as optional eye candy (and even then you should ask yourself whether it really is a good idea). I'm including this option for the sake of completeness.

< Server-side generation
When you use a search engine the designers cannot know every possible search query, so the page has to be generated unique to each request. This means that the user sends a request like "search for dragon-dildo", the web server runs some code to query a database on its end, uses the result to generate HTML on the fly, and finally sends the generated HTML back to the users. This requires you to have access to a web server (not something that cheap hosting solutions provide), it puts extra work on the server and it opens up an attack vector because now your server is executing code sent in by the user.

Server-side generation is not a bad solution, but in your case it causes more problems than it solves. I would avoid it unless there was not other way (like when implementing a search engine).

< Static site generation
Static site generation takes the idea of server-side generation, but runs in only once. You have a program, the generator, which generates the HTML for you once, then you upload the files to the server and the server only serves the static content. This is what I do, I can generate the files on my home computer without needing control over the web server.

When using a static site generator you don't write your entire HTML file, you write a template with placeholders which the generator will then fill in. So in the case of a header you would leave a placeholder in every page and then the generator would fill in all the pages. Most generators can also do entire blogs instead of just individual pages.

Common generators are Jekyll, Hugo or Pelican.
jekyllrb.com/
gohugo.io/
blog.getpelican.com/

I cannot tell you which one is best because I have written my own in Scheme using GNU Guile. Writing your own static site generator is a bit of a ritual of passage in Lisp communities.

You can use Geany's "search and replace in session" feature.

Server-side includes are what you want. They let you modularize parts of your pages like headers and footers without needing Javascript.

en.wikipedia.org/wiki/Server_Side_Includes

It's always been really perplexing to me how little it seems people use this.

PHP and the extra overhead that comes with it is completely unnecessary, Apache and nginx both support server-side includes.

Aren't they discouraged due to "using too much CPU" or some bullshit?

Are they? I find that hard to believe when you would otherwise need an additional process running to interpret PHP or whatever other language you want to run server-side just for the purpose of piecing together elements to construct a whole HTML on client request. Why would that be more efficient than something already built into the server process?

I dunno. I'm not claiming it's true, I just remember reading several things to that effect when I first learned about them.

server side includes
or use PHP with template

both are different ways of doing:

pageX.html
#INSERT header.html HERE
page content

header.html
content to include in pages