Search the Community

Showing results for tags 'clear'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 5 results

  1. I am using the Float page in CSS from this site to teach my coding class and I was wanting students to float their image next to the paragraph and heading in the example below but I can't get it to work. Every time I have tried to add a picture it will only appear below the paragraph and not next to it. I've tried giving the image a class of "column pic", I've tried giving it it's own division and and floating it to the right, I've put these divisions in multiple places and used multiple css but I can't get it to work. I ended up using the absolute position property to move it to the position I wanted. Any help is appreciated! This is a link to the Tryit: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_cols <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .header, .footer { background-color: grey; color: white; padding: 15px; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } .menu { width: 25%; } .content { width: 75%; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; } .menu li:hover { background-color: #0099cc; } </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="clearfix"> <div class="column menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="column content"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> </div> <div class="footer"> <p>Footer Text</p> </div> </body> </html>
  2. I have been building a website that I like but it is a little bit 'busy' looking. I have a background image (a picture of bark) with multiple boxes floating on it with the info. For example, I have a boxs for navigation, one for the title, and one eith the article. They are spaced out so you can see the bark background through the cracks. I like this but it distracts from the main information in a way I dont want. How can I suround these boxes with a semi transparent white so that you can only lightly see the image through it. I still want the picture to be clear on the edges just have the 'fog' in the center. i tried putting them in an element that has the opacity set down but that affects all child elements. How can i do this but keep the inside text fully clear?
  3. The last example for window.clearTimeout() method has an explanation that appears to be inconsistent with the 'try it yourself' example on the JavaScript Timing Events page. I have put the text needing corrected in red: How to Stop the Execution?The clearInterval() method is used to stop further executions of the function specified in the setInterval() method. Syntaxwindow.clearInterval(intervalVariable) The window.clearInterval() method can be written without the window prefix. To be able to use the clearInterval() method, you must use a global variable when creating the interval method: myVar=setInterval("javascript function",milliseconds); Then you will be able to stop the execution by calling the clearInterval() method. ExampleSame example as above, but we have added a "Stop time" button: <p id="demo"></p><button onclick="myStopFunction()">Stop time</button><script>var myVar=setInterval(function(){myTimer()},1000);function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;}function myStopFunction(){clearInterval(myVar);}</script> Try it yourself » If I have been learning my lessons correctly, typing in var makes the variable local. If this is the case, then it would seem the clearInterval() worked without setting a global variable. Does this need updated?
  4. It’s my first post so here I go. I have been taking a course on HTML and I’m already familiar with C. I need to submit a value from a hidden input field when the form is submitted, this works fine, however what I need to do is submit a new value 2 seconds after the first one has been submitted. I need to make this happen without any additional buttons. The code below (without CSS) writes the value to my application just fine but I dont know how to submit a second value 2 seconds later. Hoping someone can help <!DOCTYPE html><html><!-- InstanceBegin template="/Templates/BW500.dwt" codeOutsideHTMLIsLocked="false" --> <head> <!-- InstanceBeginEditable name="doctitle" --> <title>BW500</title> <!-- InstanceEndEditable --> <link rel="stylesheet" type="text/css" href="css/styles.css" media="screen"> <script type="text/javascript" src="js/convert.js"></script> </head> <body> <div id="outer_wrapper"> <div id = "wrapper"> <div id = "banner"> <h1>BW500</h1> </div> <div id ="logo"> <img src="images/logo_siemens.jpg"> </div> <div id ="topnav"> <ul> <li><a href='index.html'>Process</a></li> <li><a href='status.html'>status</a></li> <li><a id="onlink" href='control.html'>Control</a></li> <li><a href='PID.html'>PID</a></li> <li><a href='spa.html'>Parameters</a></li> <li><a href='Manuals.html'>Manuals</a></li> <li><a href='network.html'>Network</a></li> </ul> </div> <div id ="data"> <table id="table_data"> <!-- InstanceBeginEditable name="data" --> <form action="control.html" method="post" id="resets"> <tr> <td>Reset Total 1</td> <td><input type="submit" name="Reset"value="256"></input></td> </tr> <tr> <td>Reset total 2</td> <td><input type="submit" name="reset"value="512"></input> </td> </tr> <script language="JavaScript">control(<?--#exc cmd_argument='printf("%i",outReadUword(16 ))'-->)</script> <?--#exec cmd_argument='SsiOutput( "", "Write Failed" )'--> <?--#exec cmd_argument='scanf("reset", "%u", OutWriteword( 16 ))'--> <?--#exec cmd_argument='printf( "%i",outReadUword(16 ))'--> </form> <!-- InstanceEndEditable --> </table> </div> <div id ="copywrite"> <p>Copywrite Siemens Canada Limited</p> </div> </div> </div> </body><!-- InstanceEnd --></html> control.html
  5. Hello there, I have developed this piece of php/html code, for my custom Wordpress theme. <?php get_header(); ?><div class="layout clearfix"> <div id="content"> <?php if (have_posts()) : ?> <div id="loops-wrapper" class="left"> <?php while (have_posts()) : the_post(); ?> <div id="article-<?php the_id(); ?>" class="article clearfix"> <div class="post-others-wrap"> <p class="categories"><?php the_category('<br />'); ?></p> <div class="khmedia-social"> <p class='st_facebook_vcount' displayText='Facebook'></p> <p class='st_twitter_vcount' displayText='Tweet'></p> <p class='st_email_vcount' displayText='Email'></p> </div> </div> <div class="post-date-wrap"> <p class="post-date"> <span class="day"><?php the_time('d'); ?></span> <span class="month"><?php the_time('M'); ?></span> <span class="year"><?php the_time('Y'); ?></span> </p> </div> <div id="article-title-<?php the_id(); ?>" class="post-title"> <h1> <?php echo the_title(); ?> </h1> <div id="article-excerpt-<?php the_id(); ?>" class="post-content"> <?php wp_link_pages( array( 'before' => '<div class="pages">'.'पृष्ठ:', 'after' => '</div>' ) ); ?> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="pages">'.'पृष्ठ:', 'after' => '</div>' ) ); ?> </div> </div> </div> <?php endwhile; ?> <div id="pagelinks" class="clearfix"> <?php previous_post_link('<div class="prevlink">%link</div>'); ?> <?php next_post_link('<div class="nextlink">%link</div>'); ?> </div> </div> <?php endif; ?> </div> <div class="sidebar"> <?php if ( is_active_sidebar( 'primary' ) ) : dynamic_sidebar( 'primary' ); endif; ?> </div></div><?php get_footer(); ?> And now here is the CSS for it: .layout { display: block; margin-top: 3em; width: 100%;} #content { line-height: 1.5em; width: 697px; float: left; padding-right: 30px; position: relative; min-height: 300px;} .clearfix { clear: both; content: " "; display: block; line-height: 0; visibility: inherit;} #loops-wrapper { display: block;} #loops-wrapper .article { padding-left: 122px; width: 600px; margin-bottom: 50px; min-height: 150px; display: block; position: relative;} #loops-wrapper .article .post-others-wrap { left: 0; display: block; position: absolute; width: 100px; margin: 55px 0 0; text-align: right; line-height: 1.5em;} #loops-wrapper .article .post-others-wrap .khmedia-social { display: block; border-top: 2px solid #8AE234; border-bottom: 2px solid #8ae234; padding: 0 0 5px; margin-top: 20px;} #loops-wrapper .article .post-others-wrap .categories { color: black; position: relative;} Actually, the main content area is expanding with large data. But, when I insert a simple post with only the title. The div is overlapping with the footer.Here is my site link: http://www.khmedia.in Please help guys...