|
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
|
|
|
|
|
Hi,
It is my intention to build a site shop for a photographer but I have no idea which would be the next appropriate language to focus on learning to get the job done out of Javascript or PHP.
What with other work commitments, I don't have the time to learn enough of both languages before the intended date of the site going live at the beginning of December.
I'm hoping that if I give you an outline of the kind of functionality I want you will be able to point me in the appropriate direction:
The photographer in question has a vast number of images they wish to sell as singles, or in sets of three for a reduced price in comparison to buying singles.
The images will be displayed in categories, each of which has the potential to run into a number of pages.
Customers are to be free to choose any image from any page of any category to make up their purchases.
I don't currently want to build a login and members capacity so that session data (the selections made) can be stored and come back to at a later date.
For now I want to be be able to allow customers to, on a single session basis, select as many images as they wish and then preview their selection prior to adding their final choice/s to a basket ready to check out.
I also want to be able to ensure that if there is a session in which a customer previews their choice, sees they have eight images selected, for example, and want to choose one more - in order to benefit from the set of three price, that they can go back to continue shopping without loosing the selections they had made prior to going to the preview page.
In terms of the shopping basket I cam across a paypal specific script that can be incorporated into html without the need to therefore build a php and mysql basket into the site.
I anticipate that I will have to use radio buttons or check boxes for customers to be able to make their selections prior to previewing them. But is it possible, or feasible for a form to span all the category pages and their sub pages?
Thanks in anticipation of you consideration and response
|
|
|
|
|
Member 15952980 wrote: to get the job done out of Javascript or PHP.
You probably need both: PHP runs in the server to do the backend work, while Javascript runs in the browser to manage the actual presentation (and data capture, etc.) of the web page.
You might be better looking into something like Wordpress which has many templates that you can adapt to your own needs.
|
|
|
|
|
Thankyou Richard.
Reguarding using Wordpress, I'm confident with HTML and CSS and was hoping to hand code the whole site to avoid generating lots of code I don't understand, and therefore wouldn't be able to debug more easily.
Are you familiar with Wordpress? (I've never used it but know it is avaialable as part of the hosting package I purchased for a HTML site I built)
If so do you envisage it being buggy within the context of the functionality I want?
|
|
|
|
|
Member 15952980 wrote: If so do you envisage it being buggy within the context of the functionality I want?
I have not used Wordpress myself, but I know it is in wide use. As to whether it would be buggy, there is only one way to answer such a question.
|
|
|
|
|
Fair point. It may well be my best bet for now given the timeframe I have to work to.
|
|
|
|
|
Given the choice between JavaScript and PHP, master JavsScript and also use Node for the backend work. It'll take you further these days.
Jeremy Falcon
|
|
|
|
|
Thanks for insight. I've never heard of Node before and just read a basic introduction about what it can do on W3 schools... I notice that Node work in partnership with mysql as php does. Mysql is my intended progression after php or Node.js
So does using Node mean you can skip learing php altogether?
Also, considering it is javascript based, are the server side scripts run entirely on the server as with php? Or are there client and server security concerns that put using it at disadvantage compared to using an entirely server side language such as php?
|
|
|
|
|
Member 15952980 wrote: So does using Node mean you can skip learing php altogether?
Yes
Member 15952980 wrote: Also, considering it is javascript based, are the server side scripts run entirely on the server as with php?
Yes. One of the main advantages to Node too, is that you can have what's called an isomorphic application. Which is a fancy of way of saying you can run the same code on both the client and server. Stuff that accesses the DOM will be client only, but for algorithmic type routines it's the same code.
Member 15952980 wrote: Or are there client and server security concerns that put using it at disadvantage compared to using an entirely server side language such as php?
No security concerns that PHP wouldn't also suffer. The main considerations are performance and available libraries. Google has put a lot of work into V8 (the JS engine Node is built on), so it's not nearly as slow as people would think. PHP can pre-compile into bytecode to speed up parsing prior to execution, but V8 also JITs in real time to native code in memory. Don't get me wrong, V8 will never be as fast as C/C++ or Rust and it's single threaded. But when compared to things like PHP, it does pretty well.
PHP vs Node js - Which programs are fastest?
PHP has a ton of built in functionality, like say for editing PDF files. Node doesn't. Fortunately, the community is huge for Node so finding a package to do most stuff is rarely a problem. In fact, it's so huge the real problem will be knowing which packages to avoid.
I say this as a dude who used to love PHP. I'll always have a fond soft spot for it, but times change.
Jeremy Falcon
|
|
|
|
|
Thank you very much Jeremy for taking the time to answer my questions and concerns.
I did do a course on PHP years ago, just before the laucnch of Node.js, and figured it would be easiest to just go back to learning that from scratch. But as you say times change.
You mention that PHP has a ton of functionality that Node doesn't.... My limited knowledge of php did leave me wanting to go forwards with certain capabilities. In a personal capacity I would like to build a music database. Would I be able to use Node, in conjuntion with mysql to:
- make directories (to, for example, store uploaded mp3 files)
- make pages (to, for example, print html code to make a html document)
Thanks in advance for your consideration
|
|
|
|
|
You'll be just fine in Node. It offers a bunch of modules to access things like the file system... on the server side. And there are plenty of ways to connect to a DB such as MySQL.
Jeremy Falcon
|
|
|
|
|
I need to do a small html code that looks like this: Imgupx - Upload and share your images[^]
I have tried some code, but it doesn't work:
<div>
<p>ER</p>
<img src="C:\Users\myname\Downloads\cici.png"/>
<p>341 Ohm</p>
<p>EN</p>
<img src="C:\Users\myname\Downloads\bibi.png"/>
<p>356</p>
</div>
|
|
|
|
|
For a personal web page only accessed from the same PC as the one it is being served from, you will have to use the 'file:' protocol (like http: / https: for remote sites). As you have it, it is looking for the 'C:' protocol - this is not a defined protocol. IIRC, the ':' after the 'C' needs encoding as a | e.g.
<img src="file:C|\Users\myname\Downloads\cici.png"/> For a web page accessed from a different location, you will have to save the images in a special folder (details vary based on the web server software - see your documentation) and the name will be relative to that server's root (and, in that instance, you can skipped putting the protocol component).
|
|
|
|
|
The image is for testing purpose only, the fact is the html page is like in the image: Imgupx - Upload and share your images[^]
How can I arrange multiple text and image anxt again like the image reveal ?
|
|
|
|
|
I have made it:
<div style="float:left;">
<p>ER</p>
<img src="C:\Users\myname\Downloads\cici.png"/>
<p>341 Ohm</p>
</div>
<div style="float:left;">
<p>EN</p>
<img src="C:\Users\myname\Downloads\bibi.png"/>
<p>356</p>
</div>
|
|
|
|
|
Your life will become much easier if you use a local web server for development.
- Install Node.js.
- Install a global npm package like local-web-server,
npm i -g local-web-server. - Go to your HTML files and run the web server in that directory,
ws.
If you ever do upload your work to a remote server, this will make your life much easier. Not to mention, things like cookies do not work when HTML pages are viewed over the file protocol.
Jeremy Falcon
|
|
|
|
|
How can I list several div's tags with the following pattern ?
Untitled hosted at ImgBB — ImgBB[^]
I have tried something like this:
.title{
display: inline;
}
.icon{
display: block;
}
.item-text{
float: right;
}
<div class="item-main">
<div class="title">
My title
</div>
<div class="icon">
<img src="...">
</div>
<div class="item-text">
Lorepsum imte ...
</div>
</div>
but don't work correctly.
modified 6-Mar-23 9:29am.
|
|
|
|
|
If you want the text to wrap, then float the image:
.title {
display: block;
}
.icon {
float: left;
margin-inline-end: .5em;
margin-block-end: .5em;
}
.item-text {
}
Demo[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Excellent, and if I would list several times that pattern, one under another ?
I did:
<div>
<div class="title">
Introduction To XHTML 1.0
</div>
<div class="icon">
<img src="http://dummyimage.com/200x200/f0f/fff" />
</div>
<div class="item-text">
Topics includes: Introduction To XHTML 1.0,
Introduction To Tag and Attribute Syntax,
Introduction To Element Content Syntax,
Document Structure and Head Level Tags,
Body Tag and Block Level Tags,
Understanding In-line Elements and Tags, etc
</div>
<div class="title">
Introduction To XHTML 2.0
</div>
<div class="icon">
<img src="http://dummyimage.com/200x200/f0f/fff" />
</div>
<div class="item-text">
222 2222 Topics includes: Introduction To XHTML 1.0,
Introduction To Tag and Attribute Syntax,
Introduction To Element Content Syntax,
Document Structure and Head Level Tags,
Body Tag and Block Level Tags,
Understanding In-line Elements and Tags, etc
</div>
</div>
but the pattern its not listed one under another.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
