|
For those new to message boards please try to follow a few simple rules when posting your question.- Choose the correct forum for your message. Posting a VB.NET question in the C++ forum will end in tears.
- Be specific! Don't ask "can someone send me the code to create an application that does 'X'. Pinpoint exactly what it is you need help with.
- Keep the subject line brief, but descriptive. eg "File Serialization problem"
- Keep the question as brief as possible. If you have to include code, include the smallest snippet of code you can.
- Be careful when including code that you haven't made a typo. Typing mistakes can become the focal point instead of the actual question you asked.
- Do not remove or empty a message if others have replied. Keep the thread intact and available for others to search and read. If your problem was answered then edit your message and add "[Solved]" to the subject line of the original post, and cast an approval vote to the one or several answers that really helped you.
- If you are posting source code with your question, place it inside <pre></pre> tags. We advise you also check the "Encode "<" (and other HTML) characters when pasting" checkbox before pasting anything inside the PRE block, and make sure "Use HTML in this post" check box is checked.
- Be courteous and DON'T SHOUT. Everyone here helps because they enjoy helping others, not because it's their job.
- Please do not post links to your question into an unrelated forum such as the lounge. It will be deleted. Likewise, do not post the same question in more than one forum.
- Do not be abusive, offensive, inappropriate or harass anyone on the boards. Doing so will get you kicked off and banned. Play nice.
- If you have a school or university assignment, assume that your teacher or lecturer is also reading these forums.
- No advertising or soliciting.
- We reserve the right to move your posts to a more appropriate forum or to delete anything deemed inappropriate or illegal.
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
Apologies for the shouting but this is important.
When answering a question please:
- Read the question carefully
- Understand that English isn't everyone's first language so be lenient of bad spelling and grammar
- If a question is poorly phrased then either ask for clarification, ignore it, or mark it down. Insults are not welcome
- If the question is inappropriate then click the 'vote to remove message' button
Insults, slap-downs and sarcasm aren't welcome. Let's work to help developers, not make them feel stupid.
cheers,
Chris Maunder
The Code Project Co-founder
Microsoft C++ MVP
|
|
|
|
|
احتاج الى اكواد صفحه ويب جاهزة بلغة htmlو css
Google translate: I need ready-made web page codes in html and css
|
|
|
|
|
Two things;
1) This is an English language site, and we can only accept and answer questions in that language.
I have run this through Google Translate to produce a probably-good version, but you should check it and make sure it does say what you are actually asking.
2) While we are more than willing to help those that are stuck, that doesn't mean that we are here to do it all for you! We can't do all the work, you are either getting paid for this, or it's part of your grades and it wouldn't be at all fair for us to do it all for you.
So we need you to do the work, and we will help you when you get stuck. That doesn't mean we will give you a step by step solution you can hand in!
Start by explaining where you are at the moment, and what the next step in the process is. Then tell us what you have tried to get that next step working, and what happened when you did.
If you are having problems getting started at all, then this may help: How to Write Code to Solve a Problem, A Beginner's Guide[^]
"I have no idea what I did, but I'm taking full credit for it." - ThisOldTony
"Common sense is so rare these days, it should be classified as a super power" - Random T-shirt
AntiTwitter: @DalekDave is now a follower!
|
|
|
|
|
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):
<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 ?
|
|
|
|
|
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>
<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
|
|
|
|
|
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:
<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.
|
|
|
|
|
_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
|
|
|
|
|
Also, it's worth nothing that you only need to set display: flex on the outer container, not for every item.
Jeremy Falcon
|
|
|
|
|
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
|
|
|
|
|
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.
|
|
|
|
|
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).
|
|
|
|
|
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.
|
|
|
|
|
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.)
|
|
|
|
|
I have the following code:
<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.
|
|
|
|
|
The parent div would include several divs, where the text will be aligned separately.
|
|
|
|
|
I have tried:
<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.
|
|
|
|
|
|
Yes, I know, but the trick is that the second div has no vertical correct alignment, and I don't realise why:
<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>
|
|
|
|
|
Sorry, I have tried a number of different styles and combinations but cannot get it to do what you want. But as I mentioned, I am not a CSS expert.
|
|
|
|
|
Thank you Richard a lot. As you see, the vertical alignment of the second div is not correct, and I don't know why, I am not a web developer at all.
|
|
|
|
|
I'm afraid I only dabble so my knowledge is limited. You might try opening the same question in QA to see if it gets a better response.
|
|
|
|
|
Just a heads up, floats are not needed here at all. Anyway, the vertical align property is for inline containers. A div by default is a block level element so it's ignored. To see what I mean check out the examples on MDN and W3Schools.
With that being said, there are much, much better ways to do this. If you want to vertically center without having to use explicit heights, the recommended way these days is to just use flexbox. There are a ton of other techniques like negative margins, line height, etc. too but flexbox should be something to master anyway. So, no time like the present.
<div style="width:100%;height:100px;background-color:#aaddee;border-style:solid;border-width:1px;display:flex;align-items:center;justify-content:center;">
<div style="background-color:#ffeaae;border-style:solid;border-width:3px;">
Tuesday 2023-03-20
</div>
</div>
Be aware that inline styles should be avoided. Only using them here to match your example.
Jeremy Falcon
|
|
|
|
|
It works now, thanks a lot !
|
|
|
|
|
You're very welcome.
Jeremy Falcon
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
