Initiate the printing process by executing the window.print() function. As the document is being

Here's the code snippet :

        <body>

        <div class="headerCont noprint">
            <div class="headerHold">
                <div class="logoCont"><img src="images/logo.jpg" width="104" height="74" alt="Logo"></div>

                <ul id="navCont">        
                    <li><a href="blogs.html">blogs</a></li>
                    <li><a href="products.html">products</a></li>
                    <li class="active"><a href="experts.php">Expert</a></li>
                    <li><a href="events.html">events</a></li>
                    <li><a href="business.html">Business</a></li>       
                </ul>

                <div class="rightHeadCont">
                    <div class="smIcon fbIcon"><a href="#"></a></div>
                    <div class="smIcon twtIcon"><a href="#"></a></div>

                    <form id="search">
                        <input type="submit" value="Submit" class="searchBtn">
                        <input type="text" name="search" placeholder="search" class="searchInput">            
                    </form>
                </div>
            </div>
        </div>


    <div class="breadCrumbs noprint">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a>></a></li>
            <li><a>Expert</a></li>
        </ul>
    </div>

    <div class="cl"></div>

    <div class="container">

        <ul class="banner noprint">
          <li><img src="images/headerImg.jpg" /></li>
          <li><img src="images/headerImg.jpg" /></li>
          <li><img src="images/headerImg.jpg" /></li>
          <li><img src="images/headerImg.jpg" /></li>
        </ul>
        <div class="bannerShdw noprint"><img src="images/bannerShdw.jpg" width="100%" height="13"></div>

        <div class="titleCont">
            <h1>Expert</h1>
            <ul id="docIcons">
                <li class="a"><a href="#"></a></li>
                <li class="b"><a href="javascript:window.print()"></a></li>
                <li class="c"><a href="#"></a></li>
                <li class="d"><a href="#"></a></li>
            </ul>
        </div>

<?php
        $expertsql = "SELECT * FROM experts WHERE is_active = '1' ";
        $expertex = mysqli_query($db,$expertsql);

        $ispresent = @mysqli_num_rows($expertex);

        if($ispresent > 0)
        {
            while($experts = mysqli_fetch_assoc($expertex))
            {
    ?>    
                 <div class="expertCont">
                    <div class="imgCont">
                        <div class="imgHold">
                            <img src="<?php echo base_url;?>thumbnail.php?file=admin/uploads/experts/<?php echo $experts['image'];?>&width=170&height=169&maxw=170&maxh=169">
                        </div>
                    </div>

                    <h2><?php echo ucwords($experts['name']);?></h2>
                    <?php echo trim($experts['short_description']);?>

                    <div class="readMore">
                        <a href="expert-detail.php?id=<?php echo $experts['id'];?>">Read more ></a>
                    </div>
                </div>
    <?php
            }
        }
        else
        {
            echo 'No Expert Found';
        }
    ?>


</div>

CSS :-

@media print
{
    .noprint {display:none;}
}

If you want to remove the blank space at the top while printing, you can apply this CSS :

.headerCont { width: 100%; height: 85px; background: url(../images/headerBg.jpg) repeat-x bottom center;

Also, don't forget to close your style rules properly for each element to avoid any unexpected behavior.

Answer №1

When printing, it is possible that the headerCont class may still have unwanted space due to its CSS properties. To address this issue, I recommend using the !important rule:

@media print
{
    .noprint {
        display:none !important;
        height:0px !important;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The art of replacing material-ui styles with styled components

As a newcomer to UI material design, I am eager to create my own customized Button Component using styled-components. I am facing a challenge in overriding the CSS based on different button variations such as "primary" or "secondary". You can find my cod ...

Reach out to individuals who have responded to a message on Discord using JavaScript

I am looking to develop a script that will enable me to send direct messages to users who have reacted (all reactions) to a specific message by its ID. I want to exclude bots and ensure that each user only receives one message even if they react multiple ...

Unable to extract all advertisements from Facebook Marketplace

https://i.stack.imgur.com/xEhsS.jpg I'm currently attempting to scrape listings from Facebook marketplace, however, only the first listing is being scraped. Does anyone have any suggestions on how I can scrape the entire list of listings? CODE (async ...

Exploring the Power of Nuxt's asyncData Feature for Handling Multiple Requests

Within my application, there is a seller page showcasing products listed by the specific seller. Utilizing asyncData to retrieve all necessary data for this page has been beneficial in terms of SEO. asyncData ({params, app, error }) { return app.$axi ...

Tips for using the foreach loop to print out multiple arrays

I am working with two arrays in PHP: post_titles and posts. I need to figure out how to print them sequentially using a foreach loop. Printing one array at a time is not an issue, as shown below: <?php foreach ($titles as $row) { ?> <?php ec ...

When a div is clicked, the text inside the button changes. If another div is clicked, the previous text is reset

I am seeking a solution for changing the text of a button within three columns when a specific 'advice-card' div is clicked on. The text should change to 'Hide' for the clicked div, and the other buttons should switch back to 'Show ...

Having trouble with the link attribute not functioning properly for a radio button in Chrome?

<a> hyperlink for radio button is not functioning correctly in Chrome. Here is the code segment in question: <td width='7%' bgcolor='#E8E8E8'> <a href='issue.php?admin=Yes&&user=$user'> <inp ...

positioning two text sections on the left side of an image

I am attempting to create a page layout with text that should look like this: Team Name My Team Name +-------------+ Division Team Division| | Current Ranki ...

Specialized Node.js extension for automatic dependency installation

My current setup involves a custom Yeoman generator for specific applications, which comes with its own set of dependencies and configurations. - GruntJS must be installed globally; - Bower must be installed globally; - Yeoman must be installed globally ...

Notifying the view with a SignalR message from the controller upon event trigger

Just starting out with SignalR and attempting to set up a notification for a specific event triggered by an API. What I've attempted: Hub: public class NotificationHub : Hub { private static IHubContext hubContext = GlobalHost.Connectio ...

Is it possible to easily remove the trailing comma, period, or other punctuation from the end when using the JavaScript pug template engine?

Apologies for the confusion in my question wording. To illustrate, here is an example piece of code: p #[strong Genre]&nbsp; each val in book.genre a(href = val.url) #{val.name} | , I am trying to figure out how to format a comma ...

What is the importance of chaining selectors in order to utilize flexbox effectively?

Check out this code snippet: .flex-container { border: solid 1px purple; display: flex; } .flex-container div { border: solid 1px red; padding: 20px; margin: 20px; height: 100px; flex: 1 1 0%; } .flex-container ...

What is preventing me from injecting a service into an Angular factory/injector?

I came up with an authentication service (AuthenticationService) that I utilize for making calls to a WEB API. Recently, I stumbled upon interceptors and got intrigued. I thought it would be interesting to create an interceptor that can intercept requests ...

Missing ng-required fields not displaying the has-error validation in AngularJS forms

While editing any part of their address, the user should see a red invalid border around each field to indicate that the full form is required. However, for some reason I can't seem to get the 'Address' field to display this border. The set ...

Initially, the OWL Carousel image is not displaying correctly due to incorrect sizing

I am currently working with OWL Carousel and have implemented a code that displays one image at a time, with the next image sliding in every 15 seconds. The width is set to occupy 100% of the screen and I have configured the JavaScript accordingly so that ...

How to use Nokogiri to efficiently extract targeted nodes from HTML

In my Ruby script, I am trying to extract specific values from an HTML document using the Nokogiri gem. The HTML content I'm parsing includes information about a user and their registered device. #!/usr/bin/ruby require 'Nokogiri' doc = No ...

Utilizing Gulp locally without the need for global installation or referencing the bin js file

I have a gulpfile.js that runs perfectly when I type 'gulp' into the command line. Essentially, the 'gulp' bash command just calls the specific js file outlined in 'package.json >> bin >> gulp' of the globally ins ...

Find the variance between today's date and a selected date, then initiate the timer based on this variance

I have a grid containing data. I utilize the loadGrid() function to preload data or conditions before the grid finishes loading. When the active state is set to 1, my intention is to initiate a timer by calculating the difference between the current date ...

When the Ionic framework is initialized, it automatically redirects users to the home

I'm currently developing a mobile app using Ionic, and I've encountered an unusual issue. Whenever I refresh the page (pressing F5) from a specific route like "/tabs/connected/channel/edit", I always get redirected to "/tabs/home" after the state ...

Strategies for improving the efficiency of HTML and styles in a generated document

Generating the invoice printing form layout using dynamically created Razor views through RazorEngine can result in messy and hard-to-read code. The repetitive use of words like top, left, width, and height makes it challenging for human inspection and deb ...