HTML

59K

Solutions

30K

Contributors

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

Share tech news, updates, or what's on your mind.

Sign up to Post

I have an html page, with header, main content , footer and left hand side menu.
I have used a container class ( shown below in the example). I understand the max-width of the container changes with the size of the device and thus giving it's responsive nature.
but is it possible, to stop this behavior at some minimum width.

right now , if I view my page (sample html below), in a smaller laptop screen, the main content area is stacked below the leftMenu div. I would like to show the leftMenu and main content , side by side all the time, and when screen is too small have a horizontal scroll bars.
how can i achieve this?

<html>
    <div id="header class="container">
    </div>
     <div id="content" class="container">
         <div id="leftMenu">  </div>
         <div id="main content">  </div>
      </div>
      <div id="footer" class="container"></div>
</html>
1
Determine the Perfect Price for Your IT Services
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Hi Experts,

I'm expiriencing one of the strangest issues.

I have the following PHP Code

function ins_checkboxes($name, &$chk_array){
    
    $code = '';
    $lbl = '';
    $type = '';
    $onclick = '';
    
    foreach ($chk_array as $chk):
    
        $code = $chk['code'];
        $lbl = $chk['lbl'];
        $type = $chk['type'];
        
        $onclick = '';
        $div_specify = '';
        echo "code = $code <br />";
        if ($type == 'chk+txt') {
            
            $div_specify = "divSpecify-" . $code;
            $onclick = 'onchange="show_hide(\'' . $div_specify . '\');"';
        }
        echo "code = $code <br />";
    ?>    
    <div class="divChecks">
        
        <input type="checkbox" name="<?php echo $name; ?>[]" 
               id="chk<?php echo $code; ?>" value="<?php echo $lbl; ?>" 
                   <?php echo $onclick; ?> >
        <label for="chk<?php echo $code; ?>"><?php echo $lbl; ?></label>
            
    </div>
    
    <?php
    echo "code = $code <br />";
    if ($type == 'chk+txt'){
    ?>
        <div id="<?php echo $div_specify; ?>" class="divNoDisplay">

            <label for="txt<?php echo $code; ?>">Please Specify</label>
            <input type="text" id="txt<?php echo $code; ?>" name="txt<?php echo $code; ?>">

        </div>
    <?php
    }

    endforeach;
}

Open in new window


Thee resulting HTML of the first 2 loops iss
        code = strQ5Cert_Drive <br>code = strQ5Cert_Drive <br>    
    <div class="divChecks">
        
        <input type="checkbox" name="strQ5Certs[]" id="Driver's Licence" value="Driver's Licence">
        <label for="Driver's Licence">Driver's Licence</label>
            
    </div>
    
    code = strQ5Cert_Drive <br>code = strQ5Cert_Health <br>code = strQ5Cert_Health <br>    
    <div class="divChecks">
        
        <input type="checkbox" name="strQ5Certs[]" id="Health &amp; Safety Representative" value="Health &amp; Safety Representative">
        <label for="Health &amp; Safety Representative">Health &amp; Safety Representative</label>
            
    </div>
    
    code = strQ5Cert_Health <br>

Open in new window


You will note that I'm echo-ing my $code variable twice before my <input> and <label> tags, and once after.

In the first instance, $code = strQ5Cert_Drive, which is correct. However, when I use $code for my <label for=> and  <input id=>, you will see thhat the output  is different ... its that of $lbl.

Its been a long day, maybe I'm tired... How can this be?

Any help will be appreciated,
1
hello, i am currently working with a website that has a lot of images and using a template and editing.. so i have pictures and i have heading texts on them and buttons i am unable to position them the most that is bothering me is responsiveness as the images i have are put on the css as a url and i just cant get them to be responsive at all.. the heading and images are messed up when screen is minimized. can someone help me out? ill attach the css style and index page as thats where images r not okay. i jus need an example to one part of the image then i can do the rest.
example picture 1 on style css lines 548-560, index.html file the image part linked is line 47-57
will really appreciate!
1
what would css classes look like for the header, mainmenu classes  , if I want to equal space between the li elements in following construct.

also , if mainmenu div appears at the bottom of the header, and is centered, of the header div.

I'm using bootstrap , so I have wrapped everything inside the container class, but I don't want to use navigation classes from bootstrap.

<div class="container">
   <div class="header">
      <div class="mainMenu">
        <ul>
            <li><a>Home</a></li>
            <li><a>About</a></li>
            <li><a>Help</a></li>
         </ul>
      </div>
    </div> ----end of header

     <div>
       ---content----------------------
   </div>
</div>

Open in new window

1
example contrived for this question. I have a dropdown select control as such in my HTML page. I want to give it a slicker look.
for example, at the end of the dropdown, there is an downward arrow.
if i want to change the size, or use a different icon for the downward arrow. How can I do that?

or do i use bootstrap , to create such control. but still I don't know how would i change such icon?


<!DOCTYPE html>
<html>
<body>

<div class="newdropdown">
<select>
    <option value="abc">abc</option>
    <option value="ijk">ijk</option>
    <option value="pqr">pqr</option>
    <option value="xyz">xyz</option>
    </select>
</div>
</body>
</html>
0
Hi Experts,

I have got a html design, which I want to implement.  Please see the attached design.  I want to create a html footer like this.

Please help me in creating this html footer.  How to create a v-like image in the footer.  Please see the attached image for reference.

Capture.JPG
0
Hi,

I am attending a few of the many online PHP education courses right now, and here I have got a little challenge.

I have made this "send e-mail" form, and I am trying to create two message pop-up's to give message if the message is sent or if there is missing something to be filled in the form.
For education purposes I would very much like to make this in PHP, and it here I am getting in trouble.

With the code below, I get the right message with a green background if all fields in the form is filled out before submitting, but when I miss to fill one ore more fields in the form it displays the red background with the right message in it, but the problem is that it also displays the green box - now empty - and places it below the red one.

If anybody can give me a hint how to get the green box to disappear when all fields not are filled I would be very grateful :)

<form class="" action="index.php" method="post" style="width: 150px; margin-left: 8px; "> 
  <h3>Send e-mail</h3>
  <input type="text" name="to" value="" placeholder ="Til"><br><br>
  <input type="text" name="subject" value="" placeholder="Emne"><br><br>
  <textarea rows="10" cols="30" name="message" placeholder="Besked"></textarea><br><br>
  <input type="submit" name="" value="Send besked" style="margin-left: 50px; ">
</form>

<?php
  error_reporting(E_ALL);
  ini_set('display_errors', 1);
?>

<div class="mailmessage" style ="background: #ff3300; color: #fff; font-weight: bold; width: 

Open in new window

0
Any Recommendations on where to look to re order a list based on input, i have a list that has switches and what i am trying to do is some filtering to display checked switches

$("#check-sort-list").on('change', function() {
       var get_selected = $(this).val();
        
        alert(get_selected);
        
        if(get_selected == 1)
            {
                console.log(get_selected);
            }
        
        else if(get_selected == 2)
            {
                console.log(get_selected);
            }
        
        else if(get_selected == 3)
            {
                console.log(get_selected);
            } else 
                {console.log("No selection");}
    });

Open in new window



my list is just a normal html list with a label and a checkbox.
0
Problem:

Encountering Reference Error/.JS file unable to load. The goal is to have input from the user displayed in another text field.  Then reset the first input field so that new info can be put in. The code is 97% complete with all HTML requirements including methods and variables in the .js file. The code is in vanilla javascript and HTML. Located below and saved as a .txt for upload compatibility to the site.

Attempted solutions: Initializing the anonymous function to a variable did not work. Looking for a solution ASAP. Plugins/extra frameworks/Jquery cannot be used.
THECURRENTASSIGN1CODE91518.txt
0
Client wants me to match the font and look here: https://www.exfo.com/en/

(We're just using a solid background for each until they pick images.)

I think I've done it here: https://techgardens.com/optical-engineering/services/ 

But this should be the same:

In Chrome elements, when I look at the computed section, they are the same. But they don't look the same.

Mine Services page:
services.JPG
Mine applications page:
apps.JPG
Theirs:
theirs.JPG
What am I doing wrong? I don't think it's a caching problem, I checked it in a browser that's never been there.
0
Big Business Goals? Which KPIs Will Help You
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Hi Everyone,

I am currently working on a small web page challenge as a test for a junior web developer.

I am to build a basic web page (based on the attached mock up). I understand the concept, however it has been along time since i have written in CSS\HTML and last time i did it was common practice to use tables for positioning. I have since learnt that this is no longer correct and I am struggling to get 2 of my components to line up.



The section is an image gallery, which I have already got working and fully interactive, however i cannot get the main image and the sample images to line up as required.

Below is the code I have written, if anyone could help me with the positioning it would be greatly appreciated. (Also if there is anything in there that is bad practice please flag it up)

Thank you,
Josh

<!doctype html>
<html class="no-js" lang="">
    <html>
    <head>
    <link rel="stylesheet"
                href="https://fonts.googleapis.com/css?family=Merriweather">
    <link rel="stylesheet"
                href="https://fonts.googleapis.com/css?family=Baskerville">
    </head>
    </html>

    <body>
<!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]--> 

<!-- Add your site or application content here --> 
<!DOCTYPE html>
<html>
<head>
<meta 

Open in new window

0
I'm using bs-select and the select box, when opened, showed underneath the page header. I've tried setting the z-index but that doesn't seem to be working. Does anyone know how to correct this?

The link to the page is below and if you click on the "Change Category" dropdown you'll see what I mean but I've also attached a screenshot.

https://fayftbragg.manna.church/small-groups/category/student-ministries
0
Can someone help me to extract a video file off the news channel site?  Normally I can find an mp4 file.  This time cannot.
Thanks in advance.
1
I want to create a form that collects a persons email address and then a dynamic list of check boxes. (The dynamic part will come from a DB query, but for purposes of this question, I am providing a sample scope array.

What I need help with is how to set up the ng-repeat to allow for that dynamic list to be made available as a set of post vals upon submit.  The following is a modified piece of the code for demo purposes.

Here is the key portion of my Angular Code:

$scope.seminars = [
    { id: 1, name: 'Seminar One' },
    { id: 2, name: 'Seminar Two' },
    { id: 3, name: 'Seminar Three' },
    { id: 4, name: 'Seminar Four' }
  ];

$scope.submitFm = function (data) {
	console.log("Arrival at submit for checkboxes");
	console.log(data);
};	

Open in new window


And here is the HTML Code. I am creating a form that the attendee fills out to select which seminars they want to attend.  The first field of the form is email. The second field is a check field that I've created.  The third is my attempt at an ng-repeat to get the list of selected seminars.

<form id="attnFm" name="attnFm" class="form" ng-if="!msg">
       <input type="hidden" ng-model="attn.post_actions" ng-init="attn.post_actions='matm_attend'"/>
       <div class="row">
		 <label class="sr-only" for="email">email</label>
		 <input type="email" class="form-control" id="email"
                                         placeholder=" Email" 
                                         

Open in new window

0
www.magickitchen.com - scroll down to the purple area, please. There are three items in divs like: <div class="col-xs-12 col-sm-4 animated bounceInDown" data-id='1'>

They used to bounce in and stay in place. Now they bounce in and disappear. Something must have have changed in the CSS? I'm not sure what could cause this.
0
i am trying to manually write some css that simply involves a banner image with some text overlaid. Turns out it's not a simple as I thought. I'm only onto the second media query, and I'm running into trouble. Mostly because I'm stuck in the intermediate level of css and have not yet advanced to expert.

Here is the page: https://www.stadriemblems.com/products/enamel-pins-test/
The css is here, but you can also find it by viewing the source of the page: https://www.stadriemblems.com/static/css/enamel.css

Right Now it's only going to display in the initial desktop viewport size, so you son't be able to help me if you're on a mobie device.

Here are some problems I am running into right off the bat.

I want the text to be centered vertically. It sort of seems like it's working, but it isn't exactly. See the two image attachments for how it looks on my 1440 monitor and how it looks on my 1080 monitor.

That also leaves the issue of height. I have the height set to be a static 1440px at the largest size, but because there is a background image, and without a set width, there's nothing to expand the div. I have the width set to 100% and the background set at "contain" but I guess all those things aren't compatible. I guess I need some advisement as to what to do in this situation.

Basically, my end result is that for all media queries, I want the image to always be 100% width with a proportional height, and for the text to always be vertically centered and fit …
0
I have an interesting question

So i have an array build up of inputs like 10.

i need to display it on my front end correctly

here is the test sample frontend -

 <div id = "mobile-user-details" class="user-details__user-data border-top border-bottom p-4">
                      <div class="row">
                        <div class="col w-50">
                          <span>Mobile</span>
                          <span><?=$v_item['CONTACT_PHONE'];?></span>
                        </div>
                        <div class="col w-50">
                          <span>Landline</span>
                          <span><?=$v_item['CONTACT_LANDLINE'];?></span>
                        </div>
                      </div>
                        <div class="row">
                            <div class="col w-50">
                              <span>Email</span>
                              <span><?=$v_item['CONTACT_EMAIL'];?></span>
                            </div>
                            <div class="col w-50">
                              <span>Email</span>
                              <span><?=$v_item['CONTACT_EMAIL'];?></span>
                            </div>
                        </div>
                    </div>

Open in new window


here what outcome

fontend outcome
So what im trying to do is generate this from an array. the issue is im not sure how i can add a new div row wrap after every 2 results.
0
Hi, my web site has a request information form page which uses formmail.pl. Lately I've been receiving a lot of robot generated emails from the page so I decided to put a option box on the page whereby if the option "Human" is not selected, then no email will be sent through the formmail.pl file.

I've not too experienced with this and I've not worked with JavaScript for a long time, thus I can't get my idea to work.

On the page is a form which I've described as below:
<form name="infoRequest" enctype="application/x-www-form-urlencoded">
<input name="subject" type="hidden" value="Information Request">
<table width="100%" border="0" cellspacing="0" cellpadding="0">

I then put in a select option box for a visitor to select a value from the list:
<tr>
<td height="30" width="33%">what am I:</td>
<td textarea rows="3" cols="30" height="30" width="67%"</TD>
<select name="robotyn" onchange="checkrobot();" id="dropDown1">
        <option value="Robot">I'm a Robot</option>
        <option value="Human">I'm a human</option>
        <option value="other">Other</option>
</select>
</tr>

below that is the submit and reset buttons. My intension is for a script to be run when the submit button is checked.

<tr>
<td colspan="2" width="100%" align="center">
<input TYPE="submit" NAME="Submit" VALUE="Submit" onclick="(function() {checkrobot();return false;})()"><input TYPE="reset" VALUE="Reset">
</td>
</tr>

here is the script:
function checkrobot(){

  a = …
0
As you can see on this test page I'm working on, I have text overlaying the main background banner image, and the text resizes based on the screen size.
https://www.stadriemblems.com/products/enamel-pins-test/

It looks really good in the initial desktop state, but as you resize the window and go smaller, the text is too big to fit on the screen. To make it fit on the screen, the font size has to be made really small, which defeats the purpose of a big headline.

Font sizes based on screen sizes are controlled right in the made code here:

data-fontsize="['55','40','30','30']"
data-lineheight="['60','50','40','30']"

I'm wondering if there is a way to set some kind of container restriction that will cause it to automatically break onto two lines if the text is wider than the viewport. That way I won't have to make the font size so small just to fit.

Does that make sense? Let me know if you need more info.
0
Simplify Active Directory Administration
LVL 8
Simplify Active Directory Administration

Administration of Active Directory does not have to be hard.  Too often what should be a simple task is made more difficult than it needs to be.The solution?  Hyena from SystemTools Software.  With ease-of-use as well as powerful importing and bulk updating capabilities.

Can anyone explain the best practices in regards to link labelling specific to usability/accessibility best practices. A 3rd party who do some basic maintenance of our website have numerous image based links on the homepage which simply state "click here". If you hover over the link it does give a bit more detail on where the links takes the user but I am still not sure that is sufficient, and the label itself should be meaningful, but I am trying to emphasis the risk in them using this kind of practice. I have seen these guidelines, but I cannot find anything specific in WCAG to link labelling best practices to assist users with disabilities e.g. visual impairments. I want to draw out the types of user this type of configuration could impact - to make them improve and use more appropriate labelling.

https://webstandards.hhs.gov/guidelines/92

Just saying it 'looks poor' isn't having much weight in the argument.
0
We have two image maps on our newly launched site and they aren't working in IE 11 (govt client so we have to be compatible with that browser).  
www.radresource.net

Open in new window

- the two graphics with the spokes - I have no idea where to even start.  It works in all the other browsers.
0
<button  id="bind-trigger"></button>

Open in new window



So i have this button

im trying to trigger it with js instead of a user click but no success.

$('#bind-trigger').trigger('click');
    
    $("#bind-trigger").on('click', function() {
        alert("Bind Triggered");
    
    });
    

Open in new window


i came acorss this online and it doesnt work but is it possible to trigger a click ?
0
how can I insert an html file into another html file using javascript or jquery?
1
Hi Experts!

I have a question regarding to the file upload code. It is a simple html upload code:

<form class="smart-form" enctype="multiplart/form-data">
........
<fieldset>
        <section>
            <label class="label">File input</label>
            <div class="input input-file">
                  <span class="button"><input type="file" id="file" name="file" onchange="this.parentNode.nextSibling.value = this.value">Browse</span><input type="text" placeholder="Please upload the file in either .txt or .csv or .xls or .xlsx format" readonly="">
            </div>
      </section>
......
</form>

For my javasxript side I have this code: (I posted the information as $_FILES['Info'] to the PHP)

$('#file').change(function() {
      var file = this.files[0];
      var _formData = new FormData();
      _formData.append('Info', file);

      $.ajax({
            type: "POST",
            url: "App/uploader.php",
            dataType: "text",
            contentType: false,
            processData: false,
            data: file
      }).done(function(data){                   
            //console.log(data);
            var rData = JSON.parse(data);
            switch(rData)
            {
                  case 1:
                        $('#fileMsg ').text("SUCCESS!");
                        setTimeout(function(){location.reload(true);}, 1500);
                        break;
                  case 0:
                        $('#fileMsg ').text("FAILURE!");
                        setTimeout(function(){location.reload(true);}, 2500);
                        break;
            }
      });      
});

My issue is this:

When I use the ajax post and get a result as return I need to use setTimeout(function(){location.reload(true).... in order to upload another file. If I don't reload …
0
Hi, has anyone used the vis.js graph3d library? If so do you know how to capture the z value when clicking a bar? Tried the code below in the graph options but doesn't work? Thanks

tooltip: function onclick(point) {
          alert(point.z);
        }

Open in new window

0

HTML

59K

Solutions

30K

Contributors

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.