[–]▶ No.1045099>>1045101 >>1045103 >>1045110 >>1045124 >>1045139 >>1045414 [Watch Thread][Show All Posts]
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.
▶ No.1045101
>>1045099 (OP)
try setting margins to 0
▶ No.1045103>>1045106
>>1045099 (OP)
right-click inspect. all of those spaces are explained. If you still can't figure it out, put up the page somewhere.
▶ No.1045104
▶ No.1045106
>>1045103
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.
▶ No.1045110>>1045114
>>1045099 (OP)
post the css
▶ No.1045111>>1045112 >>1045113
▶ No.1045112
>>1045111
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.
▶ No.1045113
>>1045111
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.
▶ No.1045114>>1045118 >>1045119
>>1045110
the css is a mess. I have many different classes and containers and shit, it would be a bitch.
▶ No.1045115>>1045117 >>1045497
>/tech/ has gotten so bad multiple posters don't know what table-layout CSS is
▶ No.1045117>>1045639
>>1045115
so you got the answer to OP's problem or just posturing?
▶ No.1045118>>1045120
>>1045114
>guys why am I getting 14 as the answer on my math problem? I will not show my equation.
▶ No.1045119
>>1045114
>containers
>not using > and nth rules instead of using bloat classes and containers half the time
you are a fucking baby but post the css
▶ No.1045120>>1045121
>>1045118
here is the table in html:
<div id="body">
<table class="model-page">
<tr>
<td class="make-col"><span class="yikes">first</span><br></td> <td class="model-col">middle column</td> <td class="logo-col">last col</td>
</tr>
</table>
</div>
▶ No.1045121>>1045125 >>1045139
>>1045120
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;
▶ No.1045122>>1045123
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.
▶ No.1045123>>1045125
>>1045122
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.
▶ No.1045124>>1045127 >>1045385
>>1045099 (OP)
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.
https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
▶ No.1045125>>1045127
>>1045121
>>1045123
make td.make-col; width 30%
and td.logo-col; width 30%
▶ No.1045127>>1045447
>>1045124
oh, ok. You're right. The table is for layout... I guess I'll learn this shit then. thanks anon.
>>1045125
I'll try this though real quick,see if it works.
▶ No.1045139>>1045148
>>1045099 (OP)
>>1045121
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.
▶ No.1045148>>1045154
>>1045139
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.
▶ No.1045154>>1045157 >>1045175
>>1045148
>I want the middle column to only be as wide as the content
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;
}
▶ No.1045157
>>1045154
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.
▶ No.1045159>>1045175
also, the middle column isn't centered in the middle. It looks like it's slightly leaning to the left.
▶ No.1045169>>1045174 >>1045186 >>1045190
Hey mate, this should do it:
<table border=0 width = 100% cellspacing=0>
<tr>
<td bgcolor=red></td>
<td width=1% bgcolor=blue>TEXT</td>
<td bgcolor=gray></td>
</tr>
</table>
No CSS used either. Works in my Pale Moon.
▶ No.1045174>>1045175 >>1045183
>>1045169
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.
▶ No.1045175
>>1045174
It's literally just >>1045154 except hard coded into the HTML. As soon as you start to put things into the cells it'll become unbalanced again >>1045159
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.
▶ No.1045183
>>1045174
<td width=1% nowrap bgcolor=blue>TEXT</td>
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.
▶ No.1045184>>1045198
HTML rule nr 1: Don't abuse tables for layout!
▶ No.1045186>>1045190 >>1045201 >>1045397
>>1045169
> no CSS used
All these tags are considered unsupported in HTML5.
▶ No.1045190
>>1045169
apart from what >>1045186 said
values should always be in quotes.
▶ No.1045198>>1045201 >>1045447 >>1045639
>>1045184
>waaa! Table layout bad
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.
>but that's not what they were designed for
So? HTML wasn't designed for writing applications in, yet here we are.
▶ No.1045200>>1045214
>this fucking thread to figure out how to layout a simple fucking table
My goodness, HTML has become cancer.
▶ No.1045201>>1045212 >>1045216
>>1045186
So what? Isn't /tech/ always complaining about "bloat" and "reinventing the wheel" ? All that stuff has been perfected long ago. The standards bodies can go fuck themselves.
>>1045198
>No one's ever explained to me why.
They can't.
>As a counterpoint, table layouts will work on all devices, they don't require css to work, and they're dead simple to understand.
Right. But some people care more about some authority telling them it's "DEPRECATED". Fuck off with that shit.
▶ No.1045212
>>1045201
>DEPRECATED
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).
▶ No.1045214>>1045215
>>1045200
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.
▶ No.1045215>>1045221
>>1045214
>scaling columns to the screen is "esoteric"
Seriously? You can do this easily in a lot of other markup-based GUI frameworks.
▶ No.1045216
>>1045201
>"bloat"
You mongols who can't even put quotes around values or conform to XML is the reason it's bloated btw.
▶ No.1045218>>1045237
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.
▶ No.1045221>>1045276
>>1045215
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.
▶ No.1045237>>1045248
>>1045218
XHTML needs to be XML conform and needs to be send with the correct XHTML header.
▶ No.1045248>>1045251
>>1045237
Is HTML not XML conform by itself? Like, <html><head><title>Whatever</title></head><body><h1>Helloworld</h1></body></html> is not conformant or what?
▶ No.1045251>>1045265
>>1045248
<br>
<meta>
<input>
<dfsdgf someattributewithoutvalue></dfsdgf>
No. It's meant to decipher all garbage data people shove at the browsers.
▶ No.1045265>>1045277 >>1045288
>>1045251
>The <br> tag inserts a single line break.
LOL WTF
Is this even necessary.
▶ No.1045276
>>1045221
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.
▶ No.1045277>>1045284
>>1045265
Obviously. Otherwise you only have paragraphs.
▶ No.1045284>>1045332
>>1045277
>empty paragraph doesn't make a new line
WTF is this controversial design.
▶ No.1045288>>1045291
>>1045265
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.
▶ No.1045291
>>1045288
It doesn't strictly has to be a tag still though.
▶ No.1045332>>1045354
>>1045284
Are you retarded? Websites abusing it is bad enough.
There's a difference between paragraph spacing and line height.
▶ No.1045354>>1045356
>>1045332
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.
▶ No.1045356>>1045399 >>1045405
>>1045354
>text entity separated from the rest by a newline
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.
▶ No.1045357>>1045363
This is why both <p> and <br> exist.
▶ No.1045363>>1045364 >>1045368
>>1045357
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.
▶ No.1045364
>>1045363
>because wrongly
▶ No.1045366
Especially because in those fucking word processors there isn't a default indent or margin set so it's hard for newfags to differentiate.
▶ No.1045368>>1052070
>>1045363
It's incredible how many people get this wrong. Even 8chan formats posts incorrectly, the paragraphs have a class which defines 0 margin onto them, and empty lines are empty paragraphs.
▶ No.1045370>>1045384
Actually the class on it doesn't seem to do anything, which is arguably even worse.
▶ No.1045384
>>1045370
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.
▶ No.1045385>>1045386 >>1045447
>>1045124
>Tables are not for layout
Neck yourself applecult pajeet.
▶ No.1045386
Here's what I mean.
What's really astounding is that >>1045385 can still find ways to increase the mess while telling us how great tables are for layout.
>>1045385
FUCK YOU! GO BACK!
▶ No.1045397>>1045403
>>1045186
who even needs html5. the old standards can do everything that anyone ever needed. html5 only adds bloat and botnet.
▶ No.1045399>>1045400
>>1045356
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.
▶ No.1045400>>1045409
>>1045399
>it's newline separation only
Paragraphs don't exist without vertical margin or indent of the first line.
Now be silent you foul.
▶ No.1045402
I'm not an american but here's the US constitution.
As you can see, the paragraphs are indented.
https://en.wikipedia.org/wiki/Paragraph
▶ No.1045403
>>1045397
HTML5 adds tags like <footer> and <nav> and <aside> 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.
▶ No.1045405>>1045410
>>1045356
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.
<br> tag still sounds kinda bullshitty and, with context in mind, it didn't have to be a fucking tag, like why.
▶ No.1045409
>>1045400
You don't know what you are talking about.
> In plaintext files, there are two common formats. Pre-formatted text will have a newline at the end of every physical line, and two newlines at the end of a paragraph, creating a blank line. An alternative is to only put newlines at the end of each paragraph, and leave word wrapping up to the application that displays or processes the text.
▶ No.1045410>>1045419
>>1045405
><br> tag still sounds kinda bullshitty
It does because XML is shit, no matter what you use it for.
>why
Because line breaks in XML are converted to spaces or nothing depending on whether their in between other text.
▶ No.1045414>>1045447
>>1045099 (OP)
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
▶ No.1045415>>1045421
><br> 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.
▶ No.1045419>>1045423
>>1045410
B-but HTML is not supposed to be XML?
▶ No.1045421
>>1045415
I fully agree with that and point towards XML being a piece of shit.
▶ No.1045423>>1045493
>>1045419
HTML has thrown all the qualities of XML overboard only to even increase all its deficiencies.
▶ No.1045447>>1045471 >>1045474 >>1045481 >>1045656
>>1045127
>oh, ok. You're right. The table is for layout... I guess I'll learn this shit then. thanks anon.
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.
>>1045198
>No one's ever explained to me why.
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.
>>1045385
>>1045414
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.
▶ No.1045471>>1045628
>>1045447
>Just because it looks good for people with working eyes does not mean that it looks good for everyone else.
Are you blind or why is this an argument. I'm against using tables for layout btw.
▶ No.1045474
>>1045447
>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.
Wouldn't be so bad (well, the second part).
▶ No.1045481>>1045494 >>1045628
>>1045447
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
▶ No.1045493
>>1045423
Oh, look, you can actually fix this behavior with a <pre> tag, or, better, with "white-space" property set to "pre-wrap".
<html><head><title>Whatever</title></head><body><h1>Helloworld</h1><p>First</p><p style="white-space: pre-wrap;">a&#10;b</p><p>Last</p></body></html>
▶ No.1045494
>>1045481
>the screen will be full of css and javascript code
try links instead of curl.
http://links.twibright.com/
▶ No.1045495>>1045498
>&#10
Fuck, it should be or
Does code parser treat stuff literally or I'm just retarded?
▶ No.1045497
>>1045115
I haven't touched web development in years because I stopped drinking. It was the only way I could stomach it.
▶ No.1045498
>>1045495
OK, posting parser on 8ch is actually sane and does not allow funny stuff like that LOL
▶ No.1045628
>>1045471
>Are you blind or why is this an argument.
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.
>>1045481
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.
http://lynx.invisible-island.net/
https://en.wikipedia.org/wiki/Lynx_(web_browser)
▶ No.1045639
>>1045117
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 /tech/ 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.
>>1045198
>No one's ever explained to me why.
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.
▶ No.1045656
>>1045447
>but what about muh blind people?
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 <table>. For the latest css framework? Not so much.
▶ No.1045840>>1045866 >>1045869 >>1045880 >>1045889 >>1045902 >>1047075 >>1047135
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.
▶ No.1045866
>>1045840
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.
▶ No.1045869
>>1045840
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.
▶ No.1045880>>1047076
>>1045840
>I would have to make that change separate for each individual page
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, https://blohg.readthedocs.io
▶ No.1045889>>1052105
>>1045840
>Ending up just making some flex containers, dropped the tables. It's actually just what I wanted. So thanks guys.
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.
https://philipwalton.github.io/solved-by-flexbox/
>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.
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.
https://jekyllrb.com/
https://gohugo.io/
https://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.
▶ No.1045902
>>1045840
>Is there a way I could make like a CSS class but for html code?
You can use Geany's "search and replace in session" feature.
▶ No.1047075>>1047087
>>1045840
Server-side includes are what you want. They let you modularize parts of your pages like headers and footers without needing Javascript.
https://en.wikipedia.org/wiki/Server_Side_Includes
It's always been really perplexing to me how little it seems people use this.
▶ No.1047076
>>1045880
PHP and the extra overhead that comes with it is completely unnecessary, Apache and nginx both support server-side includes.
▶ No.1047087>>1047094
>>1047075
Aren't they discouraged due to "using too much CPU" or some bullshit?
▶ No.1047094>>1047102
>>1047087
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?
▶ No.1047102
>>1047094
I dunno. I'm not claiming it's true, I just remember reading several things to that effect when I first learned about them.
▶ No.1047135
>>1045840
>when I want to make a future change to, say the header of my webpages,
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
▶ No.1047929>>1051868
polite sage to thread. people are shockingly helpful to OP. am I in bizarro world or has /tech/ always been like this?
▶ No.1051860>>1051913 >>1051993
Figure this is probably the thread to ask this.
I would really like to make an image appear on hover, but inside a separate element from where the mouse is hovering. Can this be done with solely with HTML/CSS? I don't want to use Javascript.
▶ No.1051868
>>1047929
The board is so slow faggot OP is actually entertaining us
▶ No.1051913>>1052049
>>1051860
Only things that are inside of the hovered element can be affected. You could use absolute positioning to put the image outside of the hovered element, but that's about it.
▶ No.1051993>>1052049
>>1051860
It could be done if the image in a descendant (not necessarily child) of the thing you want to hover over:
.foo .bar { display: none;}
.foo:hover .bar {display: block; }
Read more about CSS selectors, there are some more than just descendant:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors
But if there is no connection between the two elements you will have to use JavaScript. JavaScript is not evil in itself, scripting the DOM is what it was invented for and what it is good for. People simply end up abusing it for things it was never meant to do, and that's where it sucks. If you decide to use JavaScript, use it sparingly and use it only to enhance the site after the fact. That means even with JavaScript disabled every feature of your site should work, even if it isn't pretty. Then use JavaScript to adjust and script the document tree to your liking.
▶ No.1052049>>1052053 >>1052055
>>1051913
>>1051993
Basically, what I'd like to do is make an image with clickable sectors via map elements, and also have those sectors display their own images next to the mapped image whenever the user hovers over them.
▶ No.1052053
>>1052049
Like this for instance.
▶ No.1052055>>1052058
>>1052049
html{
text-align:center;
}
.outer{
background:#ff0;
display:inline-block;
padding:20px;
}
.inner{
background:#0ff;
display:none;
position:absolute;
padding:20px;
top:0;
left:0;
}
.outer:hover .inner{
display:block;
}
.outer.relative{
position:relative; /* if removed, position:absolute will be global */
}
.relative .inner{
top:100%;
}
<div class="outer">
Hello world
<div class="inner">
My position and size is global
</div>
</div>
<div class="outer relative">
I have "position:relative"
<div class="inner">
My position and size are relative to outer
</div>
</div>
▶ No.1052058>>1052063
>>1052055
But can you make the blue parts overlay in the same space depending on which element you hover over?
▶ No.1052063
>>1052058
CSS is kind of retarded so yes and no.
AFAIK you can't put html content inside an image map, so you'll have to place the yellow boxes onto it using absolute positioning. However floating element positions are relative to the nearest parent that has the "position" attribute defined, so if you use absolute positioning on a yellow box, the blue box position will be relative to it.
There's 2 options
1. don't define position on the yellow box, which makes it technically impossible to position it over an image
2. use fixed positioning on the blue element, which makes it relative to the window. But then it'll always be in the same place on the window even if you scroll the page.
▶ No.1052070
>>1045368
>Even 8chan formats posts incorrectly, the paragraphs have a class which defines 0 margin onto them, and empty lines are empty paragraphs.
Nothing wrong with that.
▶ No.1052105>>1052161 >>1052255
>>1045889
This fucker, tyhis fucker right here has never done any web page programming in his life.
Know how I can tell? Because a real man uses whatever works. Divs inside of divs, tables inside or outside of divs, flexboxes are shit. Will always be shit.
A real man uses whatever the browser will render. A cuck uses the narrow mindset he was taught in commie school.
▶ No.1052161>>1052255
>>1052105
what you just said is why HTML/CSS is bloat, no standard practice = shit rendering.
▶ No.1052255>>1052417
>>1052105
> Because a real man uses whatever works.
Spoken like a true Pajeet. Actual web developers know how to write CSS that gracefully degrades. Watch this:
https://www.youtube.com/watch?v=0X6zrW2QW8Q
It is arguable whether making a title take up an entire browser window is actually a good idea, but the point is that on browsers that do not support the feature the design still gracefully falls back on a different design that can still satisfy your client, without resorting to shitty div hacks.
You can watch the entire playlist here:
https://www.youtube.com/playlist?list=PLbSquHt1VCf1kpv9WRGMCA9_Nn4vCLZ9Y
>>1052161
>what you just said is why HTML/CSS is bloat, no standard practice = shit rendering.
I used to think the same way until I actually set down and learned how HTML and CSS actually work instead of relying on handed-down lore from hipsters and Pajeets.
▶ No.1052408
>has never done any web page programming in his life
This is one thing to be proud of, not ashamed of. Like, not counting hobby projects, of course. xD
▶ No.1052417>>1052418 >>1052419
>>1052255
>https://www.youtube.com/watch?v=0X6zrW2QW8Q
Entire video is retarded
You should do
<div id="banner">
<h1>Climate change is not man made and not at a speed which matters.</h1>
</div>
In the CSS:
#banner {
height: 100%;
width:100%;
background-image: url("image.png");
background-size: cover;
}
body {
position: absolute;
height: 100%;
width: 100%;
}
No gay new elements or CSS override or flex element or vh unit needed. It's eternally backwards compatible by nature.
What I think is gay is to force a banner screen on people in the first screen. A document is supposed to be user friendly, not a powerpoint presentation.
▶ No.1052418
>>1052417
> in the first screen
*in the first place
▶ No.1052419>>1052427
>>1052417
>background-size: cover;
I just noticed that I wrote something that's probably not supported by IE5.
You can just place this in the div if you care about that:
<img src="image.jpg" style="width:auto; min-width:100%; height:auto; min-height:100%; z-index:-1;">
▶ No.1052420>>1052423
I just looked it up. min-width is supported since IE7. Cover since IE9. So I only got down 2 IE versions. I could probably go down more if I would accept the image not filling the screen or being stretched.
▶ No.1052423>>1052427
>>1052420
Assuming the background image is widescreen I could do:
<img src="image.jpg" style="height:100%; width:auto; z-index:-1;">
However that's of no use. Going further down with that banner=screen requirement is impossible since CSS "position" is only supported since IE 7.
▶ No.1052427
>>1052419
>>1052423
forgot a position:absolute; in there
▶ No.1052428