Web Development

2-Apr-23 21:34

I need to center a text vertically (and horizontally) along the whole page, and for that I need to setup the height property as relative, respectively whole page. I have tried:

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</script>
<style>

body {
	font-family: Arial;
	color: #f9f9ff;
	background-color:#293138;
}

.center-text {
	height:100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

</style>
</head>
<body>

<div class="center-text">
	Test
</div>

</body>
</html>

How can I achieve this ?

Richard Deeming2-Apr-23 22:12

Richard Deeming

2-Apr-23 22:12

Using Flexbox:

CSS

.center-text {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Demo[^]
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

_Flaviu2-Apr-23 22:59

2-Apr-23 22:59

Excellent ! It works. Thanks!

Graeme_Grant2-Apr-23 22:36

Graeme_Grant

2-Apr-23 22:36

_Flaviu wrote:
How can I achieve this ?

Take you pick: 11 Ways to Center Div or Text in Div in CSS[^]

Graeme

"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee

_Flaviu2-Apr-23 23:01

Final Project ideas that integrates ChatGpt

2-Apr-23 23:01

I have read that post, I didn't noticed any solution with relative height, I've read not very carefully though.

Mohamad Shoumar29-Mar-23 5:16

Mohamad Shoumar

29-Mar-23 5:16

I’m undergoing an intensive programming boot-camp over 12 weeks. I learned html,css, js,php, react, laravel and nodejs. I need to do a final project over 30 days. Below are the requirements:

Minimum of two user types: admin, user, client, buyer, seller, etc.
Push Notification or Email System
At least two features from the below list:
Chatbot

ChatGPT API

Graphs and Charts

Parallax / Animations

Multi-Language

Multi-Theme

Machine Learning Predications

Data-Related Features.

I’m encouraged to pick up on a project that is not related to Web Development, specifically: Mobile Application,Internet of Things, Arduino, AI…

I need some ideas with chatgpt api integrated into them. For example one of my collogues proposed a smart wallet that takes the user salary, goals and based on that will create a customizable plan, it will use chatgpt to give the user advices and push notifications when he/she purchase stuff that exceeds the budget.

Thanks in advance

Re: Final Project ideas that integrates ChatGpt

Gerry Schmitz29-Mar-23 5:50

Gerry Schmitz

29-Mar-23 5:50

Why pick the ones you don't understand (and which most likely the "teacher" didn't either, at this stage). 30 Days.

"Before entering on an understanding, I have meditated for a long time, and have foreseen what might happen. It is not genius which reveals to me suddenly, secretly, what I have to say or to do in a circumstance unexpected by other people; it is reflection, it is meditation." - Napoleon I

How to add horizontal line under DIV

wenwan131424-Mar-23 19:08

wenwan1314

24-Mar-23 19:08

<pre>How to add horizontal line under DIV</pre>

Richard MacCutchan24-Mar-23 22:37

Richard MacCutchan

24-Mar-23 22:37

HTML hr tag[^]

Gerry Schmitz29-Mar-23 5:53

Gerry Schmitz

29-Mar-23 5:53

I never mastered web development, but I did master the horizontal rule.

Jeremy Falcon27-Mar-23 4:46

27-Mar-23 4:46

The horizontal rule answer will work perfectly. But, if you don't want to create a separate element (tag) for it, then there is a second way... just use the bottom border on the div tag itself. Divs by default will span 100% of their container, so the net effect would be the same as a hr tag but while keeping the document tree clean.

CSS

#with-border {
  border-bottom: black 1px solid;
}

HTML

<div id="with-border">
  Howdy
</div>

Jeremy Falcon

vefaakin6-Feb-24 22:27

vefaakin

6-Feb-24 22:27

there is a <hr> html tag for this purpose, and you can further sytle it with CSS if you want.

Vefa

Richard Deeming6-Feb-24 22:40

Richard Deeming

6-Feb-24 22:40

1. You are replying to the wrong person.
2. The post is almost a year old.
3. The <hr> element was already mentioned by Richard MacCutchan in the first reply to the question.

Resurrecting old posts to repeat what has already been said stinks of plagiarism, which is not tolerated here, and of "rep point farming", which is also not tolerated.

If you're going to reply to a question, make sure you have read and understood the question, that your answer hasn't already been posted, and that you are replying to the correct message.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Jeremy Falcon7-Feb-24 5:56

7-Feb-24 5:56

vefaakin wrote:
there is a <hr> html tag for this purpose, and you can further style it with CSS if you want.

And it shouldn't be used. Stop giving terrible advice online. It's conflating presentation with semantic markup of a document. Using an hr tag is no better than using a bold tag or marquee tag. Just because they exist doesn't mean it's a good idea.

Jeremy Falcon

Jeremy Falcon27-Mar-23 4:47

facebook and twitter share button plugins not working properly

27-Mar-23 4:47

Also, I think the only reason your question was downvoted btw was because it was poorly formatted. You'll probably get more answers if you put just a bit off effort into the question. Just a tip for next time. Smile | :)

Jeremy Falcon

Member 1595298024-Mar-23 2:13

Member 15952980

24-Mar-23 2:13

I am attempting to add facebook and twitter share button plugins to the pages of a website I am working on. So far I have only added them to three pages because I am having mixed results with functionality on both my local copy of the site and the live version.

In order to generate the code for the facebook share button on each page, I followed the instructions here - https://developers.facebook.com/docs/plugins/share-button.

In order to generate the code for the Twitter share button, I followed the instructions here https://publish.twitter.com/#

For both the facebook and twitter share buttons I generated the code using the urls of the live site and pasted that code in both the relevant live and local pages.

The code generated and embedded in the divs "shares" and "share-box" is as follows:

HTML

<pre><!-- FACEBOOK SHARE - JavaScript SDK -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v16.0" nonce="bZ0Vs3J7"></script>

			<div id = "shares">
				
				<!-- FACEBOOK SHARE PLUGIN CODE-->
				<div class = "share-box">
				<div class="fb-share-button" 
					data-href="https://superspreads.co.uk/superspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html" 
					data-layout="button" 
					data-size="small">
					
					<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fsuperspreads.co.uk%2Fsuperspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a>   
				</div>
				</div>
				
				<!-- TWITTER SHARE PLUGIN CODE-->				
				<div class = "share-box ">
				<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" 	
					class="twitter-share-button" 
					data-show-count="false">Tweet</a>
					
				<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
				</div>

			</div>

Opera is the only browser that tolerates the plugins on both a local copy of the site and the live version

In firefox, the local copy of the site tolerates both the plugins and they work as intended. That is clicking the "share" or "tweet" buttons activates the relevant plugin and provides the opportunity to share the chosen url on facebook and twitter respectively. The information in the page specific open grapgh tags and twitter meta tags are collected also.

As you hover over the facebook button, prior to clicking, the code that will be parsed is:
https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&sdk=joey&u=https://superspreads.co.uk/superspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html&display+popup&ref=plugin&src=share_button

As you hover over the twitter button, prior to clicking, the code that will be parsed is:
https://twitter.com/intent/tweet?ref_src=twsrc^tfw|twcamp^buttonembed|twterm^share|twgr^&text=Areas I cover| Plasterer | Super Spreads - Dewsbury - West Yorkshire&url=https://superspreads.co.uk/superspreads-area-I-cover--plasterer-dewsbury-west-yorkshire.html

With the live site, firefox shows the anchor text for each button, "Share" and "Tweet", when the page is first loaded, but not the graphics for each button. When the page is refreashed "Share" dissappears. "Tweet" remains and the link works to a point but not all the intended code is parsed. The plugin is reduced to providing you a means to tweet something but not share the intended url. Hence as you hover over the twitter anchor text, in this instance, the code that will be parsed is:
https://twitter.com/share?ref_src=twsrc^tfw

chrome and edge behave the same for both the local and live versions of the site: The facebook button functions and displays as intended. The twitter button only displays the link text, "Tweet", and as with the live firefox twitter link, not all the intended code is parsed.

safari struggles to fully load the pages of the local version of the site that have the facebook and twitter plugins code active on them. And won't go beyond the SERP when you click on the live site link there.

Because the plugin code comes from the recommended sources, and has been pasted into the sites html as instructed, I really am at a loss as to how to tackle the problem. Has anyone encountered this before and solved the issue?

I wondered if it might be something to do with my host provider but then the problems are not limited to the live site....

Thanks, in anticipation of your response.

Re: facebook and twitter share button plugins not working properly

Member 1595298027-Apr-23 5:32

Member 15952980

27-Apr-23 5:32

UPDATE:

I have discovered that all the functionality failings mentioned in my original post are only relevant to when you are on a desktop device! I'm unsure about tablets aswell becasue I don't have one to test with...

However, I downloaded all the browsers to my mobile and the share buttons worked on all of them. Plus the information they retrieved from each page for sharing purposes was accurate also.

I am still stumped, and cross actually, that there should be an issue with the functionality on desktop appliances. Although 98%+ of social media browsing is carried out on phones and tablets in 2023 overall just under 50% of other browsing is still carried out on desktops (https://www.broadbandsearch.net/blog/mobile-desktop-internet-usage-statistics). Plus with all the efforts web designers/developers have to go to to make their sites work on all platforms, why are big tech providing code resources that are throwing up these problems?

I still want to keep this post open because the issue is not solved on desktops. And I'm about to design a site that sells images. I doubt many people will part with substantial sums by what they see of these images on a mobile device... And they are hardly going to be encouraged by seeing/experiencing broken social links on all the pages they care to view on their desktop.

If anyone can share with me how they incorporated their share buttons across all devices successfully, I'd really appreciate it.

Re: facebook and twitter share button plugins not working properly

Member 1595298027-Apr-23 6:01

Member 15952980

27-Apr-23 6:01

UPDATE-2 > PROBLEM SOLVED > 27.04.2023

As I pointed out in my first post of this thread, I assumed the best way to achieve adding facebook and twitter share buttons to a site I work on would be to utilise the code generation tools I found on official sources for both facebook and twitter.

I was stumped by the poor results of the plugins, produced by these facebook and twitter resources, when using a multitude of browsers on a desktop computer (chrome, firefox, edge, safari and opera).

When using the internet, on a desktop computer, to do doing something non code related I stumbled upon a webpage that had functioning social media share buttons. I viewed the source code and adapted what I found for the site I work on - including styling these buttons in a fashion that suited the sites colour scheme. My adaptations worked for both facebook and twitter. This webpage also had code for sharing the page via email. So I adapted that too. Soon after this I found a simple way of incorporating a share button for whatsapp too.

The bare-bones code to add these four share buttons, so that they work across all platforms, is as follows:

For a facebook share:

<a href="https://www.facebook.com/sharer.php?u=[the url of the page you want to share goes here]"></a>

For a twitter share:

<a href="https://twitter.com/share?url=[the url of the page you want to share goes here]"></a>

For an email share:

<a href="mailto:?[the url of the page you want to share in the email goes here]"></a>

To share via whatsapp

<a href="https://wa.me/?[the url of the page you want to share in the whatsapp message goes here]"></a>

The site I found left the anchor tag textless and just styled it with an icon for each share.

In my case I chose to add the text "Share", "Tweet", "Email" and "WhatsApp" to the anchors just so it will be a bit more informative to the person browsing what the button does. It seems there are many webpages out there that have both share and follow social media anchor tags on their pages - but no instructions to the person browsing which anchors do which! In recent discussions about this I've found that this leaves tentative users (usually over 45 years of age) to ignore them out of fear. And leaves confident users to leave them alone because they don't have time to go through the irritation of not knowing wheather the anchor in question will take them to the social site in question or wheather it will give them the opportunity to share the page they are on. I concluded each scenario is a potentially wasted opportunity so designed the share buttons to be more instructive.

In the interests of being instructive (particularly for the tentative user) I also designed the anchor tags to behave like anchor tags. That is they behave differntly in the hover state than the resting state.

Furthermore, because I incorporated image-based icons in the anchor tags I was legitamately able to use the title property, which in best practice is reserved for images, within the anchor tag. This way fool proof instructions about the intention behind connecting with the ahcor could be relayed.

Finally, in order to do what I could to keep the person engaged with the site I added the 'target="_blank"' property to the anchors. So the code might not generate pop up behaviour, but atleast engaging in the share would lead to a new window being opened rather than being taken away from the site completely.

By the time I'd incorporated all this instruction via code, the facebook share button code, for the index page of the site I work on, looked like this:

<div class = "fb" >
	<div class = "fb-share-box-image">
		<a href="https://www.facebook.com/sharer.php?u=https://www.superspreads.co.uk/" 
		target="_blank" title = "Share this page on Facebook or in Messenger" >
												
			<div class = "fb-share-box-text">
				Share
			</div>						
		</a>
	</div>
</div>

And the styles for it were as follows:

.fb{
	height:21px;
	width:78px;
	float:left;
	margin-right:8px;
	border:0px solid red;
	border-radius: .25em;
	background-color:#8b7462	
}
.fb-share-box-image a{
	display:inline;
	float:left;
	background-image: url(facebook-and-messenger-share_match_anchor_5.png);
	background-repeat:no-repeat;
	height:19px;
	width:73px;
	padding-top:3px;
	padding-left:5px;
	font-size:70%;
	font-weight:bold;
	border:0px solid red;
	color:#d9c8ba;	
}
.fb-share-box-image a:hover{
	display:inline;
	float:left;
	background-image: url(facebook-and-messenger-share_match_hover_3.png);
	background-repeat:no-repeat;
	height:19px;
	width:73px;
	padding-top:3px;
	padding-left:5px;
	border:0px solid red;
	font-size:70%;
	font-weight:bold;
	color:#e6e0e0;	
}
.fb-share-box-text{
	display:inline;
	float:right;
	height:19px;
	margin-top:1px;
	width:38px;
	border:0px solid blue;
}

As you look at the live share button here www.superspreads.co.uk

The "fb" class formed the perimeter of the whole brown shaped button.

The "fb-share-box-image" class is what adjusted the look of the anchor image and text according to resting and hover states.

The "fb-share-box-text" class confirmed the position of the anchor text within the image.

You will notice each of the classes contain 0px solid borders. Switching these to 1px solid was very useful when it came to seeing how everything was fitting together.

If you view the html source code of the index page you will notice that as well as parsing the url for the page to be shared, additional text is being parsed also. In the case of:

1...The Twitter share... This is to accomodate the twitter card generated by sharing the page. The card itself is determined by the information contained in the twitter meta tags situated in the header section of the page.

2...The Email share.... This addtional text is added so that the subject and body fields of the email are pre-populated. This is just a suggestion and can be altered by the user but a tentative user may find this pre-population useful.

3...The WhatsApp share.... This addtional text is added so that the message content is pre-populated. Again this is just a suggestion and can be altered by the user but a tentative user may find this pre-population useful.

4...The Facebook share.... No additional text is required because the facebook meta tags (situated in the header section of the page) contain all the detail to be parsed.

The text to be parsed on each of the web sites pages twitter share was individually typed to match the meta data contained in the pages twitter:title tag.

I hope this thread is now of use to budding social media coders

I need ready-made web page codes in html and css / احتاج الى اكواد صفحه ويب جاهزة بلغة htmlو css

Hussein Bajeham22-Mar-23 22:16

Hussein Bajeham

22-Mar-23 22:16

احتاج الى اكواد صفحه ويب جاهزة بلغة htmlو css

Google translate:
I need ready-made web page codes in html and css

Re: I need ready-made web page codes in html and css / احتاج الى اكواد صفحه ويب جاهزة بلغة htmlو css

OriginalGriff22-Mar-23 22:18

OriginalGriff

22-Mar-23 22:18

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!

Three divs inside a div

_Flaviu21-Mar-23 5:50

Re: Three divs inside a div

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

Re: Three divs inside a div

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