Web Development

21-Mar-23 5:50

I am struggle (I know alost nothing about html) to insert three div's inside a div, something like this: Untitled hosted at ImgBB — ImgBB[^]

I have succeeeded to put only the fist div (that one with date), but the next ones (image + texts) I cannot (yet). How can I add the next two (image + mult line texts) ?
Here is y trial (didn't work correctly):

HTML

<div style="width:100%;height:100px;border: 1px dashed #4b2869;clear:left;">
		<div style="width:100px;height:100%;border: 2px dashed #4f2869;display:flex;text-align: center;align-items:center;">
			Tuesday
			2023-03-15
		</div>
		<div style="display:flex;">
			<img src="www.test.com/img/etc.png"/>
		</div>
		<div style="display:flex;">
			text text text text text text text text text text text text</br>
			text text text text text text</br>
			text text 
		</div>
	</div>

Can you guide me to solve this task ?

Jeremy Falcon21-Mar-23 11:39

21-Mar-23 11:39

There are a couple of ways to do this, but let's go with the flexbox method since that's something worth mastering anyway.

HTML

<html>
<head>
  <style>
    section {
      background: cyan;
      border: 2px dashed blue;
      display: flex;
      height: 100px;
    }
    section img {
      width: 50px;
      height: 50px;
    }
    section > * {
      background: yellow;
      border: 2px dashed orange;
      padding: 1rem;
    }
    section > *:last-child {
      flex-grow: 1;
    }
  </style>
</head>
<body>
  <section>
    <div>
        Tuesday
        2023-03-15
    </div>
    <div>
        <img src="//www.test.com/img/etc.png"/>
    </div>
    <div>
      text text text text text text text text text text text text
      text text text text text text
      text text 
    </div>
  </section>
</body>
</html>

By default, flexbox will do what you're looking for except for one thing. If you want the last div to take up the remaining space, then you'll need to use the last-child selector to specify that.

Jeremy Falcon

_Flaviu22-Mar-23 1:23

22-Mar-23 1:23

Thank you a lot Jeremy. It works for this test, however, I don't think I would go with this solution, because the rest of my html pages are not made it with you approach, and I guess will be difficult to control that pattern several times:

HTML

<div style="width:100%;height:100px;border: 1px dashed #4b2869;clear:left;">
    <div style="width:80px;height:100%;border: 2px dashed #4f2869;display:flex;text-align: center;align-items:center;">
        Tuesday
        2023-03-15
    </div>
    <div style="width:100px;float:right;">
        <img src="MyImage.png"/>
    </div>
    <div style="float:right">
        text text text text text text text text text</br>
        text text text text</br>
        text text text text text text text
    </div>
</div>

You see, the text from the first box should be ceneterd aligned, as long the last box (the right one) should have left - top text centered.

Jeremy Falcon22-Mar-23 5:02

22-Mar-23 5:02

_Flaviu wrote:
You see, the text from the first box should be ceneterd aligned, as long the last box (the right one) should have left - top text centered.

The right box does have text aligned that way. It's the default. Check it out.

As far as the first box, look into the first-child selector. It can be used in much the same way as the last-child one used in the example.

Jeremy Falcon

_Flaviu26-Mar-23 23:23

26-Mar-23 23:23

Yes, its working now, thank you a lot !!

Jeremy Falcon27-Mar-23 4:32

27-Mar-23 4:32

You're very welcome.

Jeremy Falcon

Jeremy Falcon21-Mar-23 11:40

Wombat and Muppet know nothing about web push notifications...

21-Mar-23 11:40

Also, it's worth nothing that you only need to set display: flex on the outer container, not for every item.

Jeremy Falcon

WhoPinchedMyName19-Mar-23 9:29

WhoPinchedMyName

19-Mar-23 9:29

Muppet has asked Wombat something about web push notifications - a topic they both know next to nothing about.

Q: who knows even less than who?

Wombat
you cannot push something to a 'normal' user .. their modem/router firewall will block it. So it is a sort of fiddle... one way or another you have to get the user to install some sort of program. I gather browsers are maybe going to add some sort of such facility...

Muppet
This is precisely what you can do now... look up "Web push notifications" - it's all the rage.
You have to get permission from the user (browser), but that's all.

Wombat
well if the browser has now got that option...

yes... it looks like a push to the user... but actually the pushed messages are stored 'somewhere' and your browser pulls them

Muppet
No... there is a push...

Wombat
yes from your end you just push ... but the browser has to actively retrieve them

you cannot push a message into a user's PC .. well not unless they set their firewall to always accept unexpected messages

Muppet
Your browser is not constantly polling the server in case there's a message for it... the server tells (pushes to) your browser it has a message for it

Wombat
no it cannot! it simply won't get past the router .. unless something is telling the router it wants it

the messages will just sit there waiting if the user's browser is offline

Muppet
of course it can get past the router - all routers are open to web traffic

Wombat
because your browser has sent out a message .. and the router will accept a response from whoever the message went to.. within a time limit

Muppet
and these ntofiicatsion work by your broswer telling the server it will accept pushes from it - this is why you have to subscribe to them

Wombat
yes.. but the brower still has to ask for them! .. if you just fire a message at a router... how does it know which of many computers using it should get that message

Muppet
it knows by which browsers are signed up to accept them

Wombat
no.. the router has no idea what program is using it

Muppet
so how does the browser know when to ask for a message then?

Wombat
becasue when you tell it to allow notifications - from a specific source ... it remembers that and asks occasionally.. i think the default timeout for the router is about 15 seconds.

Muppet
no - I am 100% sure that isn't how it works

Wombat
it will be interesting to time how promptly the notification appears

Muppet
anyone can simply poll a server on a timer

Wombat
a server.. yes!

Muppet
you don't need any fancy new protocls for that
i mean any browser can poll a server using a simple javascript timer

Wombat
but servers have to set their firewall to always pass messages by Port number to specific PCs

but you cannot poll me, or my router

Muppet
You read up on these a bit more and then come and tell me I'm wrong!

Wombat
actually there is a protocol to poll my router ... but they are no longer used because bad guys cause too much trouble.. so no router now will respond to a ping

Muppet
dinner time...

Wombat
but i'd bet you a rhubarb pudding i am right

Re: Wombat and Muppet know nothing about web push notifications...

jschell21-Mar-23 5:58

jschell

21-Mar-23 5:58

WhoPinchedMyName wrote:
Q: who knows even less than who?

They have a term definition problem. And both failed to recognize that.

Definition of a TCP Push.
1. There are two actors: server and client. These do NOT define implementation but rather how each behaves.
2. A 'server' is waiting for a connection.
3. A 'client' opens a TCP connection. This is exact step defines the push. The one that opens it is the only one that can be defined as doing the push.
4. The 'client' sends a message to the 'server'.

What if the 'server' sends a message to the 'client'. Doesn't matter. It can't do that until the 'client' opens the connection.

A browser, in general, uses HTTP which is built on TCP. So HTTP in any discussion is irrelevant.
A browser, as used by the vast majority of the public, does not have a public IP.
A browser, the common ones do not act as server because of that (at least for this discussion.) It would be pointless because without a public IP nothing on the 'internet' could do step #3 in the above list.

------------------------------------------------
Web designers use API/libraries which use terminology that uses the term 'push' which has nothing to do with the above.

That sort of push does require that the browser acts as a client (see list above).

Terminology does not change that the 'client' (browser) must first open the connection.

An easy example of this is when a user asks for a report that takes a long time to run. They might sit there refreshing the page waiting seconds, minutes or hours for it to show up. Or the web designer might make the page refresh on its own. Thus at some point the user knows that the report is ready.

But if the browser is closed there is no way for the report service to 'push' a notification that the report is done to the browser.

Re: Wombat and Muppet know nothing about web push notifications...

WhoPinchedMyName21-Mar-23 7:09

WhoPinchedMyName

21-Mar-23 7:09

OK... but isn't that more or less what Wombat is saying? The only one that can open a connection is the user's browser - they are the client - and the server can only "push" a notification to them once they (the client) have opened a conection.

What's puzzling Muppet then is, if this is the case, how it is called a "push" - it's just a case of the client polling the server until the server says "OK, now I have new message for you" and returning it - that's not really any different from a client pull, and can be done with a standard JavaScript setInteraval function and AJAX call... (and when a user subscribes, set a persistent cookie that tells the page to initiates this every time it is opened).

Re: Wombat and Muppet know nothing about web push notifications...

jschell23-Mar-23 5:47

jschell

23-Mar-23 5:47

WhoPinchedMyName wrote:
OK... but isn't that more or less what Wombat is saying? The only one that can open a connection is the user's browser - they are the client - and the server can only "push" a notification to them once they (the client) have opened a conection.

That does not contradict what I said.

That is a redefinition of what the term traditionally means. So they must define the term before they can agree on what is happening.

WhoPinchedMyName wrote:
it's just a case of the client polling the server until the server says "OK

I wasn't going to read all of that but once a connection is established either side can send a request. So it is not necessary for the 'client' (my definition) to poll. However perhaps using their definition, not mine, they are redefining the term completely to suggest that the client (browser) poll is resulting in a push. That however is quite a stretch it terms not only of the original definition but even in what the meaning of 'push' is in the English language.

Re: Wombat and Muppet know nothing about web push notifications...

WhoPinchedMyName23-Mar-23 6:11

WhoPinchedMyName

23-Mar-23 6:11

I don't undersatand your definition of client and server. In web terms, a client is traditionally thought of as the end-user (or their browser), and a server is what sends them pages/data/whatever upon request.

A server can only know if a client is still connected if it receives something from the client. So a so-called "push notification" (from ther server to client) can only happen if the server has had such a "something" establishing (or keeping alive) a connection - that "something" telling it where to push the notification to.

SO how does this differ from the client using a simple AJAX call on a setTimeout to ask the server if it has anything new it wants to say? As far as I can make out, the only difference is that it can run as some kind of background service - well, whooppee, I can do without that. Seems a whole lot of effort for little benefit, though I guess someone likes it. It certiany seems to be popular (amongst web devs anyway; not so sure about end users.)

Re: Wombat and Muppet know nothing about web push notifications...

jschell24-Mar-23 12:05

jschell

24-Mar-23 12:05

WhoPinchedMyName wrote:
I don't undersatand your definition of client and server

My first response defined those specifically.

2. A 'server' is waiting for a connection.
3. A 'client' opens a TCP connection. This is exact step defines the push. The one that opens it is the only one that can be defined as doing the push.

Too much detail for this but TCP is a protocol that defines communication and establishing the connection in the first place requires a 'client' and a 'server'. Using specifically and only the definitions above.

Do not confuse those with what you might think of when using a browser and what it connects to (certainly related and it does use the protocol but it definitely uses layers on top of those.)

WhoPinchedMyName wrote:
a client is traditionally thought of as the end-user (or their browser), and a server is what sends them pages/data/whatever upon request.

That is either phrased badly or is wrong.

The traditional browser server idiom is that the browser requests (a specific type of message/data) and the server responds (a specific type of message/data) to that request.

In terms of TCP (not HTTP) the server does in fact 'send' the response based on what the client (browser) 'sent' the request.

WhoPinchedMyName wrote:
So a so-called "push notification" (from ther server to client) can only happen if the server has had such a "something" establishing (or keeping alive) a connection - that "something" telling it where to push the notification to

I can't even suggest that is phrased incorrectly. It is just wrong.

There is no communication without an open socket. None. Nothing can be sent in any way from any side unless the connection already exists.

There are two parts to the socket/connection
1. Open the socket
2. Use the socket.

Messages and communication from either side only happens with #2.

WhoPinchedMyName wrote:
SO how does this differ from the client using a simple AJAX call on a setTimeout to

Now you are confusing how libraries and protocols that live on TOP of TCP work. And perhaps because their documentation is confusing and the documentation is overloading terms for their own reasons.

It does not matter what those 'claim' to do. They must all follow the rules of TCP because otherwise there absolutely no communication no matter what they do or how they claim to do it.

WhoPinchedMyName wrote:
that it can run as some kind of background service - well, whooppee

In terms of the entire modern architecture from the browser all the way to the backend servers (multiple ones) and persisted data stores and third party services...yes background servicing is essential (technically threading processing.)

Might not be something you care about now. Might not even matter to you ever depending on where your focus lies.

Center text vertically inside a div

_Flaviu15-Mar-23 23:01

15-Mar-23 23:01

I have the following code:

HTML

<div style="width:100%;height:100px;clear:left;background-color:#aaddee;border-style: solid;border-width: 1px;float:left;">
    <div style="width:100px;height:100%;background-color:#ffeaae;border-style: solid;border-width:3px;text-align: center;vertical-align:middle;">
        Tuesday
        2023-03-15
    </div>
</div>

Why this code doesn't center the text at middle on vertical direction ?

modified 16-Mar-23 8:44am.

_Flaviu16-Mar-23 3:40

16-Mar-23 3:40

The parent div would include several divs, where the text will be aligned separately.

_Flaviu17-Mar-23 1:25

17-Mar-23 1:25

I have tried:

HTML

<div style="width:100%;height:100px;border: 1px dashed #4b2869;clear:left;">
    <div style="width:100%;height:100%;display:table;">
        <div style="width:100px;height:100%;border: 2px dashed #4f2869;vertical-align:middle;text-align:center">
            Tuesday
            2023-03-15
        </div>
    </div>
</div>

No work.

Richard MacCutchan17-Mar-23 1:47

Richard MacCutchan

17-Mar-23 1:47

I'm not a CSS expert but take a look at the example here: CSS Layout - Horizontal & Vertical Align[^]; it shows how to centre a div element.

_Flaviu17-Mar-23 3:51

17-Mar-23 3:51

Yes, I know, but the trick is that the second div has no vertical correct alignment, and I don't realise why:

HTML

<pre><!DOCTYPE html>

<html>
<head>
	<title>Horizontal and Vertical alignment</title>
	<style>
	
	.container {
		height: 200px;
		width: 400px;
		border: 2px dashed #4b2869;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		position: relative;
	}
	.container1 {
		height: 200px;
		width: 400px;
		border: 2px dashed #4b2869;
		display: table-cell;
		text-align: center;
		vertical-align: bottom;
		position: absolute;
	}
	</style>
</head>

<body style="background-color:#646464;">
	<div class="container">container</div>
	<div class="container1">container1</div>
</body>

</html>