Menu
Community /Pin to ProfileBookmark
@cootheadJun 25.2022 — #Not enough information ! !
What is the actual content that requires a vertical line?
Perhaps you should read this...
[url=https://www.coothead.co.uk/make-a-web-page.html][color=#00f]How to make a web page[/color] [/url]
... before making these excursions into vague CSS usage.
[i]coothead[/i]Without any additional information available,
my guess would be to create a narrow element with only a right or left border visible.
https://www.w3schools.com/howto/howto_css_vertical_line.asp (3 sek)
or the above using jsfiddle
https://jsfiddle.net/971Lchxs/ 
@NogDogJun 25.2022 — #Or just make the
;)
https://jsfiddle.net/trw0n9v2/1/ without having explicit information on the html element..i can suggest that you can use the right or left border for the element A vertical line can be created in HTML using transform property in <hr> tag. With the help of this property, you can rotate a horizontal line to a vertical line.
I actually want to create a page separator.
So on the left pane, I would have Admin Control Panel to create webform items (textbox, textarea, checkbox, radio button, etc.) and on the right pane, you can say a sort of browser that shows the Admin how his form item looks like.
Anyway, I asked for help here because I had lost my previous project files. On it, I managed to build the vertical line (page separator) using css found on some tutorial. Just now, I have found my previous project files. Found that css code. I think this code did the trick. Look here ...
What you think ? This code did the trick to build the vertical line (page separator) ?
**Code Context:**
Actually, you people will get confused so I have decided to share my previous project's code with you all here.
Here, check this code on your browser.
Fire-up Xampp/Wampp and test on your local server.
**FULL CODE: 1.**
admin.php
admin.php
**(Last worked on this incomplete file on: 6th Apr 2022).**
**NOTE: Add the php & html starting & ending tags where necessary as I removed them before submitting my code to this forum as forum rejects my submission unless I remove these php tags. I mentioned in my code where the php and html opening & closing tags should be.**
Even though I quit working on the above file halfway, it still works and will show you an idea what I am building.
Now after I quit the above mentioned file (Code 1 above), I re-started working on the same project again. This time I tried to lessen the code, see if I can restructure the code so it does not look messy (if I ever need to update the code in the future). The following is what I came-up with .....
Do fire-up your LocalHost and test the code and do not just glance-over the code!
Play with my work on your browser.
**FULL CODE 2**
admin_editing.php
admin_editing_.php
**(Last worked on this incomplete file on: 2nd May 2022).**
**NOTE: Add the php & html starting & ending tags where necessary as I removed them before submitting my code to this forum as forum rejects my submission unless I remove these php tags. I mentioned in my code where the php and html opening & closing tags should be.**
Even though I quit working on the above file halfway TOO, it still works and will show you an idea what I am building.Hi,
I opened this thread to learn how to build vertical line with html5 as I forgetful in css and if I lose my notes again, like before, then do not want to be opening thread again.
Above 2 codes belong to previous project which I put on hold.
Currently working on new project and that too needs the vertical line for the same reason. @JMRKER#1644914
Show me what you mean. A code example. I am curious.
After showing me that, then check my latest posts.@NogDog#1644922
Very good.
But you got text on top and bottom of vertical line. I wanted on both sides.
Say, I never thought of having texts on top and bottom. I think your code will become handy for me to fancy up my design.
Cheers! :)
Do check my latest posts.@sibert#1644926
Thanks.
But how would you write texts on left & right sides of the vertical line.
And ontop and on bottom of it too ?
Do check my latest posts.@Anushka00#1644938
Thanks.
But how would you yourself write texts on left & right sides of the vertical line ?
And ontop and on bottom of it too ?
Can we see your code sample ?
Do check my latest posts.@arel3#1645002
Cheers.
But let me see how you yourself would code it in very simplest form.
And, I want text left side & right side and ontop and on bottom of it too.
Do check my latest posts.@houseofarfa11#1645025
Ah! Very good idea.
Now can we see how you code it, perhaps ?
Show how would you write texts on left & right sides of the vertical line.
And ontop and on bottom of it too.
Do check my latest posts.I recommend using flex layout to arrange your containers side by side and then apply a border to one of them.
Or, in order to get the line centered exactly, to both of them, border-right to the left one and border-left to the right one. This will avoid the need of additional elements and other trouble. @Sempervivum#1645049
I never really used flex apart from copy from a tutorial. Don;t understand the flex.
Show me what you mean if you can simplify the flex what I already grabbed from the tutorial.
here is again, what I grabbed ...
More htmlish looking and less css looking syntax would be better,
Can we not do it without using html div ?
Which "latest"? Do you have a JSFiddle that shows your intentions or attempts?@novice2022#1645051
This can be reduced to a very simple setup:
https://jsfiddle.net/Sempervivum/e507tLop/2/
Flex and grid layout are essential for creating responsive or flexible layouts. For details read here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ @sibert#1645052
I do not know how to use jsfiddle. Never used it. But it seems I better get learning to use it.
I meant my latest post, at the time. Which was this:
https://forum.webdeveloper.com/d/400082-how-to-do-vertical-line-in-html-5/11
[url=https://postimages.org/]
[img]https://i.postimg.cc/qMjf6N6H/jsfiddle.png[/img][/url]
And 3. Paste the link in your post:https://jsfiddle.net/2w1eunob/
I often isolate a single tiny problem and solve each small problem before I put it all together.
It saves a lot of time for anyone that want to help you. And the chance to get a better answer increases.
**Links removed by Site Staff so it doesn't look like you're spamming us. Please don't post them again.**@Sempervivum#1645053
What do I save the file as that contains the grids ?
Can you see: **5. Define Named Grid Areas**
https://www.developerdrive.com/how-to-create-a-css-grid-step-by-step/
I saved the code as html but I see no code rendering in my browser.@novice2022#1645294
When I put the HTML and CSS into a test file it's rendering exactly as in the example.
Did you use the basic HTML, doctype, header, footer?
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document
BTW: Seems to be a fine tutorial for grid layout.@Sempervivum#1645296
I saved file as: grid.html
In that code I spot the CSS only, no HTML. No HTML, no content visible.
The CSS should be placed inside the head and the <html> should occur only once in order to make this valid. @Sempervivum#1645298
The stupid tutorial did not say what to save as and just gave this code:
Nothing else. So, it seems now I have to guess the html and make it up. Nit-witt tutorials are not they ?@Sempervivum
Silly me!My mistake, the tutorial had the html right at the beginning and then they covered the remaining part of the whole page with different sections and their css codes.
Working now. Look:
Did I do everything correct or foolishly missed something out ?
Thanks for all your html help to me. :)@Sempervivum#1645300
Yes,I found it. I had a hunch it might be on the top of the page.
Now you are welcome to make the grids flashy, like hologram.
Say, you know of any functions that will make it hologramish in colour ? Know of any good tutorial atleast ?
Hologramish shiny on the border edges of the grid. That would be nice design.
Like twinkling stars or shiny moon or heavy beaming sunray. That sort of thing. Something that catches the eye and makes your heart jump into your mouth! Like Christmas chards with Santa flying in the sky with his reindeers in twinkling shiny stars.
No browser will care about this, however the CSS should be placed inside the head.
What do you mean by hologram? You will find a lot of effects named "hologram" on codepen but I'm afraid most of them will be too complex.
Check if a simple gradient is sufficient to start with:
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient @Sempervivum#1645303
Yep. I think that's the code pen I need:
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
But it's gonna be a little too deep for a beginner to build from scratch without any example templates.
If you know of any more that got good templates to start with then do let me know. It's a nightmare searching for these kind of things on google if you do not know of any popular pen sites that will help you build holographic templates based on others' templates.
Here is some more holographic effects:
https://www.google.com/search?q=Holographic+effect&client=firefox-b-d&sa=X&tbm=isch&source=iu&ictx=1&vet=1&fir=Q0aOxsbsBz4NUM%252CxQKkC2CO0qfSIM%252C_%253B_TbxymHhVkM6XM%252CjXaafG2fsGjL_M%252C_%253BL16SERKRF3O5rM%252C_OzEs42DqnkepM%252C_%253B-juWEQZiaYsCwM%252C_OzEs42DqnkepM%252C_%253BCHIvCpsSg1Y-PM%252CS0tpjfT4ebGujM%252C_%253BvzSTN84f4YoClM%252CdtYNEW08ssqlMM%252C_%253BX9EcZyYg3k262M%252Cj8MAHNt-O1lu-M%252C_%253BMFKgAmp9jQV2KM%252C5p41jAfw-bksWM%252C_%253BllrHIkX_dGdh4M%252CRdPoDwdvov0JTM%252C_%253B2IDc_X4N6ryRzM%252CodHb_rNzYHaoKM%252C_%253BWhLQLcJe3SGUQM%252CAOU_-GAZ-RinHM%252C_%253BBmOv1pkElV-k7M%252C_OzEs42DqnkepM%252C_%253BxI3IjC4Cy7nouM%252CKUhskWvQ-jHVOM%252C_&usg=AI4_-kRX3-1xKHR95vQNTyKBYprf7yckEA&ved=2ahUKEwjqxPOWvPH4AhWOR2wGHWWOBdcQ9QF6BAgEEAE&biw=1366&bih=643&dpr=1#imgrc=Q0aOxsbsBz4NUM
So yes. You did understand what I was talking about.I see. Regarding the patterns visible in the results of google one would either need an algorithm to create them on HTML5 canvas or a seamless tile or image.
I would recommend to apply some CSS gradients first. This would help you to understand CSS better and, one step further, you might apply CSS animations to them. @novice2022#1645036 What if you made two iFrames, [url=https://nedesestimating.com/quantity-takeoff-services/]Takeoff Services[/url] , [url=https://nedesestimating.com/]Construction Estimating Services[/url] , [url=https://nedesestimating.com/lumber-takeoff-services/]Lumber Takeoff Services[/url]
I will fix any kind of HTML CSS & Bootstrap & Javascript issues of your site within 1 hour.
https://www.fiverr.com/share/qeY8g2
How To Do Vertical Line In Html 5 ?
Hi,
[code]
<hr>
Above is horizontal line in html 5.
So, how to do vertical line in html 5 only ?
Then, how to do it in css too in simplest form ?
Sign in
to post a comment39 Comments(s) ↴
0
@cootheadJun 25.2022 — #Not enough information ! !What is the actual content that requires a vertical line?
Perhaps you should read this...
... before making these excursions into vague CSS usage.
[i]coothead[/i]
reply?
0
@JMRKERJun 25.2022 — #my guess would be to create a narrow element with only a right or left border visible.
reply?
0
@sibertJun 25.2022 — #>@novice2022#1644911 Then, how to do it in css too in simplest form ?
or the above using jsfiddle
reply?
0
@NogDogJun 25.2022 — #Or just make the hr[code=html]
<h1>Here comes a line</h1>
<hr style="height:200px;width:4px;background-color:green;margin-left:2em">
<p>Ta-da!</p>
[/code];)
reply?
0
@sibertJun 26.2022 — #Another option if you prefer external CSS...reply?
0
@Anushka00Jun 27.2022 — #reply?
0
@arel3Jun 28.2022 — #There isn't a code element that makes a vertical line like <hr>reply?
0
@houseofarfa11Jun 28.2022 — #reply?
0
@novice2022authorJun 28.2022 — #Ok. Thanks you everyone for your replies. Did not expect that many responses. :)I actually want to create a page separator.
So on the left pane, I would have Admin Control Panel to create webform items (textbox, textarea, checkbox, radio button, etc.) and on the right pane, you can say a sort of browser that shows the Admin how his form item looks like.
Anyway, I asked for help here because I had lost my previous project files. On it, I managed to build the vertical line (page separator) using css found on some tutorial. Just now, I have found my previous project files. Found that css code. I think this code did the trick. Look here ...
<i>
</i><div style="display:flex;">
What you think ? This code did the trick to build the vertical line (page separator) ?
**Code Context:**
<i>
</i>//ADD HTML OPENING TAG HERE
<head>
1a.
<br>
<div style="display:flex;">
<div>
<form method="POST" name="text_field_maker" id="text_field_maker" action="">
<fieldset>
<label for="text_field_label">Text Field Label:</label><br>
<input type="text" name="text_field_label" id="text_field_label" minlength = "2" maxlength="40" size="25" title="Minimum 2 characters, Maximum 40 characters" required>
<br>
<label for="text_field_title">Text Field Title:</label><br>
<input type="text" name="text_field_title" id="text_field_title" minlength = "2" maxlength="40" size="25" title="Minimum 2 characters, Maximum 40 characters" required>
<br>
<button type="reset" name='text_field_maker_reset_button' id='text_field_maker_reset_button'>Reset</button>
<button type="submit" name='text_field_maker_submit_button' id='text_field_maker_submit_button'>Submit</button><br>
</fieldset>
</form>
</div>
<hr>
<div>
2nd div code goes here. This div is like the code browser.
</div>
//ADD HTML CLOSING TAG HERE
Actually, you people will get confused so I have decided to share my previous project's code with you all here.
Here, check this code on your browser.
Fire-up Xampp/Wampp and test on your local server.
**FULL CODE: 1.**
admin.php
<i>
</i>
//ADD PHP OPENING TAG HERE
session_start();
//ADD PHP CLOSING TAG HERE
//ADD HTML OPENING TAG HERE
<head>
1a.
<br>
<div style="display:flex;">
<div>
<form method="POST" name="text_field_maker" id="text_field_maker" action="">
<fieldset>
<label for="text_field_label">Text Field Label:</label><br>
<input type="text" name="text_field_label" id="text_field_label" minlength = "2" maxlength="40" size="25" title="Minimum 2 characters, Maximum 40 characters" required>
<br>
<label for="text_field_title">Text Field Title:</label><br>
<input type="text" name="text_field_title" id="text_field_title" minlength = "2" maxlength="40" size="25" title="Minimum 2 characters, Maximum 40 characters" required>
<br>
<button type="reset" name='text_field_maker_reset_button' id='text_field_maker_reset_button'>Reset</button>
<button type="submit" name='text_field_maker_submit_button' id='text_field_maker_submit_button'>Submit</button><br>
</fieldset>
</form>
</div>
<hr>
<div>
//ADD PHP OPENING TAG HERE
if($_SERVER['REQUEST_METHOD']=='POST')
{
if(ISSET($_POST['text_field_maker_submit_button']))
{
$text_field_label = ucwords($_POST['text_field_label']);
$text_field_id = str_replace(' ','',ucwords($_POST['text_field_label']));
$text_field_name = str_replace(' ','_',strtolower($_POST['text_field_label']));
$text_field_title = ucfirst($_POST['text_field_title']);
<i> </i> if(EMPTY($_SESSION['html_form_builder']))
<i> </i> {
<i> </i> echo __LINE__; echo '<br>';
<i> </i> $_SESSION['html_form_builder'] =
<i> </i>
<i> </i> "<form method='POST' name='html_form_builder' id='html_form_builder' action=''>
<i> </i> <label for="$text_field_label">$text_field_label:</label><br>
<i> </i> <input type='text' name="$text_field_name" id="$text_field_id" minlength = '2' maxlength='40' size='25' title="$text_field_title" required>
<i> </i> </form>
<i> </i> ";
<i> </i> echo $_SESSION['html_form_builder'];
<i> </i> }
<i> </i> else
<i> </i> {
<i> </i> $_SESSION['html_form_builder_new'] =
<i> </i> $_SESSION['html_form_builder'] = str_replace('</form>','', $_SESSION['html_form_builder']);
<i> </i> //$_SESSION['html_form_builder'] = str_replace('</form>','', $_SESSION['html_form_builder']);
<i> </i> //$_SESSION['html_form_builder'] = str_replace('</ol>','', $_SESSION['html_form_builder']);
<i> </i> $_SESSION['html_form_builder_new'] = '<br>'.
<i> </i> "
<i> </i> <label for="$text_field_label">$text_field_label:</label><br>
<i> </i> <input type='text' name="$text_field_name" id="$text_field_id" minlength = '2' maxlength='40' size='25' title="$text_field_title" required>
<i> </i> </form>
<i> </i> ";
<i> </i> //$_SESSION['html_form_builder'] . $_SESSION['html_form_builder_new'];
<i> </i> echo $_SESSION['html_form_builder'] .= $_SESSION['html_form_builder_new'];
<i> </i> unset($_SESSION['html_form_builder_new']);
<i> </i> }
<i> </i>}
}
//ADD PHP CLOSING TAG HERE
</div>
</div>
<br>
<form method="POST" name="save_form" id="save_form" action="">
<fieldset>
<label for="form_name">Form Name</label><br>
<input type="text" name="form_name" id="form_name" minlength = "2" maxlength="40" size="25" title="Minimum 2 characters, Maximum 40 characters">
<br>
<button type="submit" name='reset_form_button' id='reset_form_button'>Reset Form</button>
<button type="submit" name='save_form_button' id='save_form_button'>Save Form</button><br>
<br>
</fieldset>
</form>
</head>
//ADD HTML CLOSING TAG HERE
//ADD PHP OPENING TAG HERE
if($_SERVER['REQUEST_METHOD']=='POST')
{
if(ISSET($_POST['reset_form_button']))
{
session_destroy();
}
elseif(ISSET($_POST['save_form_button']))
{
if(!ISSET($_SESSION['html_form_builder']) && EMPTY($_SESSION['html_form_builder']))
{
die('ERROR ALERT: Build your form first before trying to save it!');
}
<i> </i> //$_SESSION['html_form_builder'] =
<i> </i> $_SESSION['html_form_builder'] = str_replace('</form>','</fieldset>', $_SESSION['html_form_builder']);
<i> </i> //$_SESSION['html_form_builder'] = str_replace('</form>','', $_SESSION['html_form_builder']);
<i> </i> //$_SESSION['html_form_builder'] = str_replace('</ol>','', $_SESSION['html_form_builder']);
<i> </i> $_SESSION['html_form_builder_new'] =
<i> </i> $_SESSION['html_form_builder'] = str_replace("<form method='POST' name='html_form_builder' id='html_form_builder' action=''>","<form method='POST' name='html_form_builder' id='html_form_builder' action=''><fieldset>", $_SESSION['html_form_builder']);
<i> </i> //$_SESSION['html_form_builder'] = str_replace('<ol>',' ', $_SESSION['html_form_builder']);
<i> </i> //$_SESSION['html_form_builder'] = str_replace('</ol>',' ', $_SESSION['html_form_builder']);
<i> </i> //$_SESSION['html_form_builder'] = str_replace('</form>',' ', $_SESSION['html_form_builder']);
<i> </i> $_SESSION['html_form_builder'] .= '<br>'.
<i> </i> "
<i> </i> <button type='submit' name='reset_form_button' id='reset_form_button'>Reset Form</button>
<i> </i> <button type='submit' name='save_form_button' id='save_form_button'>Save Form</button><br>
<i> </i> </fieldset>
<i> </i> </form>
<i> </i> ";
<i> </i> echo $_SESSION['html_form_builder'];
<i> </i>}
}
//ADD PHP CLOSING TAG HERE
admin.php
**(Last worked on this incomplete file on: 6th Apr 2022).**
**NOTE: Add the php & html starting & ending tags where necessary as I removed them before submitting my code to this forum as forum rejects my submission unless I remove these php tags. I mentioned in my code where the php and html opening & closing tags should be.**
Even though I quit working on the above file halfway, it still works and will show you an idea what I am building.
reply?
0
@novice2022authorJun 28.2022 — #Hi again,Now after I quit the above mentioned file (Code 1 above), I re-started working on the same project again. This time I tried to lessen the code, see if I can restructure the code so it does not look messy (if I ever need to update the code in the future). The following is what I came-up with .....
Do fire-up your LocalHost and test the code and do not just glance-over the code!
Play with my work on your browser.
**FULL CODE 2**
admin_editing.php
<i>
</i>
//ADD PHP STARTING TAG HERE
session_start();
$form_name = 'untitled_form';
$form_id = 'untitled_form';
//ADD PHP CLOSING TAG HERE
//ADD HTML STARTING TAG HERE
<head>
<title>Admin Account</title>
</head>
<body>
<br>
<div name="form_editor" style="display:flex;">
<form method="POST" name="text_field_maker" id="text_field_maker" action="">
<fieldset>
<legend><b>Text Field Properties</b></legend>
<label for="text_field_label"><b>Label:</b></label><br>
<input type="text" name="text_field_label" id="text_field_label" minlength = "2" maxlength="40" size="25" title="Minimum 2 characters, Maximum 40 characters" required>
<br>
<label for="text_field_type"><b>Type:</b></label><br>
<select name="text_field_type" id="text_field_type" required>
<option value=""></option>
<option value="text">Text</option>
<option value="email">Email</option>
<option value="url">Url</option>
</select>
<br>
<label for="text_field_title"><b>Title:</b></label><br>
<input type="text" name="text_field_title" id="text_field_title" minlength = "2" maxlength="40" size="25" title="Minimum 2 characters, Maximum 40 characters" required>
</fieldset>
<fieldset>
<button type="reset" name="text_field_maker_reset_button" id="text_field_maker_reset_button">Reset</button>
<button type="submit" name="text_field_maker_submit_button" id="text_field_maker_submit_button">Make</button><br>
</fieldset>
</form>
//ADD PHP STARTING TAG HERE
Do not put closing </div> here.
//ADD PHP CLOSING TAG HERE
<hr>
<div name="form_preview">
//ADD PHP STARTING TAG HERE
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
//echo __LINE__; echo '<br>';
<i> </i>if(ISSET($_POST['form_generator_reset']))
<i> </i>{
<i> </i> session_destroy();
<i> </i>}
<i> </i>elseif(ISSET($_POST['text_field_maker_submit_button']))
<i> </i>{
<i> </i> //echo __LINE__; echo '<br>';
<i> </i>
<i> </i> $text_field_label = trim($_POST['text_field_label']);
<i> </i> $text_field_label = strtolower($text_field_label);
<i> </i> $text_field_label = ucwords($text_field_label);
<i> </i> $text_field_label = str_replace('_',' ',$text_field_label);
<i> </i> $text_field_label = strip_tags($text_field_label);
<i> </i>
<i> </i> $text_field_name_1 = trim($_POST['text_field_label']);
<i> </i> $text_field_name_2 = strtolower($text_field_name_1);
<i> </i> $text_field_name_3 = str_replace(' ','_',$text_field_name_2);
<i> </i> $text_field_name = strip_tags($text_field_name_3);
<i> </i>
<i> </i> $text_field_id_1 = trim($_POST['text_field_label']);
<i> </i> $text_field_id_2 = strtolower($text_field_id_1);
<i> </i> $text_field_id_3 = str_replace(' ','',$text_field_id_2);
<i> </i> $text_field_id_4 = str_replace('_','',$text_field_id_3);
<i> </i> $text_field_id = strip_tags($text_field_id_4);
<i> </i>
<i> </i> $text_field_title = trim(strip_tags($_POST['text_field_title']));
<i> </i>
<i> </i> $text_field_type = trim($_POST['text_field_type']);
<i> </i>
<i> </i> //$_SESSION['text_field_label'] = $_POST['text_field_label']; //DUPLICATE SIMILAR TO THIS ON ALL OTHER INPUT TYPES SECTIONS.
<i> </i>
<i> </i> if(!ISSET($_SESSION['form_code']) || EMPTY($_SESSION['form_code']))
<i> </i> {
<i> </i> //echo __LINE__; echo '<br>';
<i> </i>
<i> </i> $_SESSION['form_code'] = '<form>
<i> </i> <fieldset>
<i> </i> <label for=' .'"' .$text_field_name .'"' .'>' .$text_field_label .':' .'</label><br>
<i> </i> <input type=' .'"' .$text_field_type .'"' .' name=' .'"' .$text_field_name .'"' .' id=' .'"' .$text_field_id .'"' .' minlength=' .'"' .'2' .'"' .' maxlength=' .'"' .'40' .'"' .' size=' .'"' .'5' .'"' .' title=' .'"' .$text_field_title .'"' .' required>'
<i> </i> .'</fieldset>
<i> </i> </form>
<i> </i> ';
<i> </i>
<i> </i> echo $_SESSION['form_code'];
<i> </i> }
<i> </i> else
<i> </i> {
<i> </i> //echo __LINE__; echo '<br>';
<i> </i>
<i> </i> $_SESSION['form_code'] = str_replace('</form>','',$_SESSION['form_code']);
<i> </i> $_SESSION['form_code'] .= '<fieldset>
<i> </i> <label for=' .'"' .$text_field_name .'"' .'>' .$text_field_label .':' .'</label><br>
<i> </i> <input type=' .'"' .$text_field_type .'"' .' name=' .'"' .$text_field_name .'"' .' id=' .'"' .$text_field_id .'"' .' minlength=' .'"' .'2' .'"' .' maxlength=' .'"' .'40' .'"' .' size=' .'"' .'5' .'"' .' title=' .'"' .$text_field_title .'"' .' required>'
<i> </i> .'</fieldset>
<i> </i> </form>';
<i> </i>
<i> </i> echo $_SESSION['form_code'];
<i> </i> }
<i> </i>}
<i> </i>elseif(ISSET($_POST['form_generator_save']) && ISSET($_SESSION['form_code']) && !EMPTY($_SESSION['form_code']))
<i> </i>{
<i> </i> //echo __LINE__; echo '<br>';
<i> </i>
<i> </i> $form_name = $_POST['form_name'];
<i> </i> $_SESSION['form_code'] = str_replace('</form>','',$_SESSION['form_code']);
<i> </i> $_SESSION['form_code'] .= '<fieldset>
<i> </i> <button type=' .'"' .'submit' .'"' .' name=' .'"' .'form_demo_reset' .'"' .'id=' .'"' .'form_demo_reset' .'"' .'>Reset Form</button>
<i> </i> <button type=' .'"' .'submit' .'"' .' name=' .'"' .'form_demo_submit' .'"' .' id=' .'"' .'form_demo_submit' .'"' .'>Save Form</button><br>
<i> </i> </fieldset>
<i> </i> </form>';
<i> </i>
<i> </i> $_SESSION['form_code'] = str_replace('<form>','<form method=' .'"' .'POST' .'"' .' name=' .'"' .$form_name .'"' .' id=' .'"' .$form_id .'"' .' action=' .'""' .'>' .'<legend><b>Form: ' .$form_name .'</b></legend>',$_SESSION['form_code']);
<i> </i> echo $_SESSION['form_code'];
<i> </i>
//ADD PHP CLOSING TAG HERE
<i> </i> <div name="">
<i> </i> <hr>
<i> </i> <textarea name="form_code" id="form_code">
<i> </i>
<i> </i> //ADD PHP OPENING TAG HERE
<i> </i> echo htmlspecialchars($_SESSION['form_code']);
<i> </i>
<i> </i> //ADD PHP CLOSING TAG HERE
<i> </i> <textarea>
<i> </i> </div>
<i> </i>
<i> </i> //ADD PHP STARTING TAG HERE
<i> </i>
<i> </i> session_destroy();
<i> </i>}
}
//ADD PHP CLOSING TAG HERE
</div>
</div>
<hr>
<div name='form_saver'>
<br>
<form method="POST" name="form_generator" id="form_generator" action="">
<fieldset>
<legend><b>
//ADD PHP OPENING TAG HERE
echo "Form: <i><b>$form_name</b></i>";
//ADD PHP CLOSING TAG HERE
</b></legend>
<label for="form_name"><b>Form Name:</b></label><br>
<input type="text" name="form_name" id="form_id" minlength = "2" maxlength="40" size="25" title="Input between 8 to 40 characters for your Form Name." value="
//ADD PHP OPENING TAG HERE
echo $form_name;
//ADD PHP CLOSING TAG HERE
"
required>
</fieldset>
<fieldset>
<button type="submit" name="form_generator_reset" id="form_generator_reset">Reset Form</button>
//ADD PHP OPENING TAG HERE
//Do not change the button type from 'submit' to 'reset' as need to detect this button as a submit to destroy session to erase the generated form.
//ADD PHP CLOSING TAG HERE
<i> </i><button type="submit" name="form_generator_save" id="form_generator_save">Save Form</button><br>
</fieldset>
</form>
<br>
</div>
</body>
//ADD HTML CLOSING TAG HERE
admin_editing_.php
**(Last worked on this incomplete file on: 2nd May 2022).**
**NOTE: Add the php & html starting & ending tags where necessary as I removed them before submitting my code to this forum as forum rejects my submission unless I remove these php tags. I mentioned in my code where the php and html opening & closing tags should be.**
Even though I quit working on the above file halfway TOO, it still works and will show you an idea what I am building.
reply?
0
@novice2022authorJun 28.2022 — #I opened this thread to learn how to build vertical line with html5 as I forgetful in css and if I lose my notes again, like before, then do not want to be opening thread again.
Above 2 codes belong to previous project which I put on hold.
Currently working on new project and that too needs the vertical line for the same reason.
reply?
0
@novice2022authorJun 28.2022 — #Show me what you mean. A code example. I am curious.
After showing me that, then check my latest posts.
reply?
0
@novice2022authorJun 28.2022 — #Very good.
But you got text on top and bottom of vertical line. I wanted on both sides.
Say, I never thought of having texts on top and bottom. I think your code will become handy for me to fancy up my design.
Cheers! :)
Do check my latest posts.
reply?
0
@novice2022authorJun 28.2022 — #Thanks.
But how would you write texts on left & right sides of the vertical line.
And ontop and on bottom of it too ?
Do check my latest posts.
reply?
0
@novice2022authorJun 28.2022 — #Thanks.
But how would you yourself write texts on left & right sides of the vertical line ?
And ontop and on bottom of it too ?
Can we see your code sample ?
Do check my latest posts.
reply?
0
@novice2022authorJun 28.2022 — #Cheers.
But let me see how you yourself would code it in very simplest form.
And, I want text left side & right side and ontop and on bottom of it too.
Do check my latest posts.
reply?
0
@novice2022authorJun 28.2022 — #Ah! Very good idea.
Now can we see how you code it, perhaps ?
Show how would you write texts on left & right sides of the vertical line.
And ontop and on bottom of it too.
Do check my latest posts.
reply?
0
@SempervivumJun 28.2022 — #Or, in order to get the line centered exactly, to both of them, border-right to the left one and border-left to the right one. This will avoid the need of additional elements and other trouble.
reply?
0
@novice2022authorJun 28.2022 — #I never really used flex apart from copy from a tutorial. Don;t understand the flex.
Show me what you mean if you can simplify the flex what I already grabbed from the tutorial.
here is again, what I grabbed ...
<i>
</i><div style="display:flex;">
More htmlish looking and less css looking syntax would be better,
Can we not do it without using html div ?
reply?
0
@sibertJun 28.2022 — #>@novice2022#1645045 But how would you write texts on left & right sides of the vertical line.
> And ontop and on bottom of it too ?
> Do check my latest posts.
Which "latest"? Do you have a JSFiddle that shows your intentions or attempts?
reply?
0
@SempervivumJun 28.2022 — #This can be reduced to a very simple setup:
Flex and grid layout are essential for creating responsive or flexible layouts. For details read here:
reply?
0
@novice2022authorJun 30.2022 — #I do not know how to use jsfiddle. Never used it. But it seems I better get learning to use it.
I meant my latest post, at the time. Which was this:
reply?
0
@sibertJun 30.2022 — #>@novice2022#1645106 I do not know how to use jsfiddle.
[img]https://i.postimg.cc/qMjf6N6H/jsfiddle.png[/img][/url]And 3. Paste the link in your post:
I often isolate a single tiny problem and solve each small problem before I put it all together.
It saves a lot of time for anyone that want to help you. And the chance to get a better answer increases.
reply?
0
@holidaymakerJul 01.2022 — #Great post! I am actually getting ready to across this information, is very helpful my friend. Also great blog here with all of the valuable information you have. Keep up the good work you are doing here,**Links removed by Site Staff so it doesn't look like you're spamming us. Please don't post them again.**
reply?
0
@novice2022authorJul 11.2022 — #What do I save the file as that contains the grids ?
Can you see: **5. Define Named Grid Areas**
I saved the code as html but I see no code rendering in my browser.
reply?
0
@SempervivumJul 11.2022 — #When I put the HTML and CSS into a test file it's rendering exactly as in the example.
Did you use the basic HTML, doctype, header, footer?
BTW: Seems to be a fine tutorial for grid layout.
reply?
0
@novice2022authorJul 11.2022 — #I saved file as: grid.html
<i>
</i>
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Title</title>
</head>
<body>
<style>
.container {
height: 90vh;
width: 90vw;
margin: 2rem auto;
display: grid;
grid-template-areas: "header header header"
"left main right"
"footer footer footer";
grid-template-rows: 1fr 3fr 1fr;
grid-template-columns: 1fr 2fr 1fr;
}
.cell-1 {
background: deepskyblue;
grid-area: header;
}
.cell-2 {
background: orangered;
grid-area: left;
}
.cell-3 {
background: limegreen;
grid-area: main;
}
.cell-4 {
background: gold;
grid-area: right;
}
.cell-5 {
background: blueviolet;
grid-area: footer;
}
.cell {
color: white;
font-size: 2.5rem;
text-align: center;
padding: 4rem;
}
</style>
</body>
</html>
[code]
The stupid tutorial did not say what to save as and just gave this code:
[code]
.container {
height: 90vh;
width: 90vw;
margin: 2rem auto;
display: grid;
grid-template-areas: "header header header"
"left main right"
"footer footer footer";
grid-template-rows: 1fr 3fr 1fr;
grid-template-columns: 1fr 2fr 1fr;
}
.cell-1 {
background: deepskyblue;
grid-area: header;
}
.cell-2 {
background: orangered;
grid-area: left;
}
.cell-3 {
background: limegreen;
grid-area: main;
}
.cell-4 {
background: gold;
grid-area: right;
}
.cell-5 {
background: blueviolet;
grid-area: footer;
}
.cell {
color: white;
font-size: 2.5rem;
text-align: center;
padding: 4rem;
}
reply?
0
@SempervivumJul 11.2022 — #The CSS should be placed inside the head and the <html> should occur only once in order to make this valid.
reply?
0
@novice2022authorJul 11.2022 — #The stupid tutorial did not say what to save as and just gave this code:
<i>
</i>.container {
height: 90vh;
width: 90vw;
margin: 2rem auto;
display: grid;
grid-template-areas: "header header header"
"left main right"
"footer footer footer";
grid-template-rows: 1fr 3fr 1fr;
grid-template-columns: 1fr 2fr 1fr;
}
.cell-1 {
background: deepskyblue;
grid-area: header;
}
.cell-2 {
background: orangered;
grid-area: left;
}
.cell-3 {
background: limegreen;
grid-area: main;
}
.cell-4 {
background: gold;
grid-area: right;
}
.cell-5 {
background: blueviolet;
grid-area: footer;
}
.cell {
color: white;
font-size: 2.5rem;
text-align: center;
padding: 4rem;
}
Nothing else. So, it seems now I have to guess the html and make it up. Nit-witt tutorials are not they ?
reply?
0
@novice2022authorJul 11.2022 — #Silly me!My mistake, the tutorial had the html right at the beginning and then they covered the remaining part of the whole page with different sections and their css codes.
Working now. Look:
<i>
</i>
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Title</title>
</head>
<body>
<style>
.container {
height: 90vh;
width: 90vw;
margin: 2rem auto;
display: grid;
grid-template-areas: "header header header"
"left main right"
"footer footer footer";
grid-template-rows: 1fr 3fr 1fr;
grid-template-columns: 1fr 2fr 1fr;
}
.cell-1 {
background: deepskyblue;
grid-area: header;
}
.cell-2 {
background: orangered;
grid-area: left;
}
.cell-3 {
background: limegreen;
grid-area: main;
}
.cell-4 {
background: gold;
grid-area: right;
}
.cell-5 {
background: blueviolet;
grid-area: footer;
}
.cell {
color: white;
font-size: 2.5rem;
text-align: center;
padding: 4rem;
}
</style>
<div class="container">
<div class="cell cell-1">1.</div>
<div class="cell cell-2">2.</div>
<div class="cell cell-3">3.</div>
<div class="cell cell-4">4.</div>
<div class="cell cell-5">5.</div>
<div class="cell cell-6">6.</div>
<div class="cell cell-7">7.</div>
<div class="cell cell-8">8.</div>
<div class="cell cell-9">9.</div>
</div>
</body>
</html>
Did I do everything correct or foolishly missed something out ?
Thanks for all your html help to me. :)
reply?
0
@novice2022authorJul 11.2022 — #Yes,I found it. I had a hunch it might be on the top of the page.
Now you are welcome to make the grids flashy, like hologram.
Say, you know of any functions that will make it hologramish in colour ? Know of any good tutorial atleast ?
Hologramish shiny on the border edges of the grid. That would be nice design.
Like twinkling stars or shiny moon or heavy beaming sunray. That sort of thing. Something that catches the eye and makes your heart jump into your mouth! Like Christmas chards with Santa flying in the sky with his reindeers in twinkling shiny stars.
reply?
0
@SempervivumJul 11.2022 — #>Did I do everything correct or foolishly missed something out ?
No browser will care about this, however the CSS should be placed inside the head.
What do you mean by hologram? You will find a lot of effects named "hologram" on codepen but I'm afraid most of them will be too complex.
Check if a simple gradient is sufficient to start with:
reply?
0
@novice2022authorJul 11.2022 — #Yep. I think that's the code pen I need:
But it's gonna be a little too deep for a beginner to build from scratch without any example templates.
If you know of any more that got good templates to start with then do let me know. It's a nightmare searching for these kind of things on google if you do not know of any popular pen sites that will help you build holographic templates based on others' templates.
Here is some more holographic effects:
So yes. You did understand what I was talking about.
reply?
0
@SempervivumJul 11.2022 — #I would recommend to apply some CSS gradients first. This would help you to understand CSS better and, one step further, you might apply CSS animations to them.
reply?
0
@BostJul 15.2022 — #calc(50vw - 3px)reply?
0
@NedesEstimating246Jul 22.2022 — #I just visited your page and glad to read the content uploaded by you. I must say it is very informative and time saver content. I also provide some services regarding. reply?
0
@JaneNguyen1018Jul 29.2022 — #Bugs on your website? Can't handle it yourself? Looking for a fix? Need HTML/CSS/Javascript/Bootstrap bugs fixed?I will fix any kind of HTML CSS & Bootstrap & Javascript issues of your site within 1 hour.
reply?