w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
  Home » HTML » Page 12
CSS Center responsively
I think you need to set your left and right margins to auto. Not 25%. Like this: margin-left:auto; margin-right:auto; But you have to define a width of your container to which the auto values are applied. If you take a look at the CSS of the example site you provided in your comment: #mainbody { width: 980px; /*this line*/ text-align: center; vertical-align: top; padding: 0; m

Categories : HTML

Form input checkboxes appearing as text boxes
PLEASE ESCAPE UPPER CASING. use this code.. <form name="myForm"> <input type="checkbox" name="graf1box" checked onClick="displayText();"> Display first paragraph </form> and please be careful about the double quotation also Hope it helps

Categories : HTML

2 divs, containing 2 divs each and responsive
you can try something like this <body> <div class="container"> <div class="big"> <div class="small"></div> <div class="small"></div> </div> <div class="big"> <div class="small"></div> <div class="small"></div> </div> </

Categories : HTML

Can't make a div child opaque with opacity property
Your .cover must be closed before. If you set the opacity to 0.6, the child nodes will have the same opacity. Increase the #popup z-index to get the result that you want. <div id="cover"></div> <div id="popup"> <img src="EFTI_POPOVER2.png" alt="endurance films institute" id="pop-img"> <button id="pop-but" onclick="location.href='http://endurancefilmsti.com/sales

Categories : HTML

Cant center a div within a screen
please change this width:750px; #footer { width:750px; height:50px; background-color:olive; position:absolute; margin-top:140px; text-align:center; font-family:sans-serif; } It worked for me , Hope this is what you have wanted. Edit: please see this http://jsfiddle.net/sheralam/b2mzrgxo/ , hope this was what you wanted.

Categories : HTML

CSS Background image Issues
In HTML you have a slash linking to the root /rmhOmahaTeam/assets/img/logo.png, in CSS not. I expected your CSS file is in any directory and not in the website root. background-image: url("/rmhOmahaTeam/assets/img/logo.png"); ^

Categories : HTML

Bootstrap Navbar over width error
The problem is in the parent .row element, which is making the .navbar to display weirdly. If you remove the class .row from the first div, it will work properly. CSS that is causing the problem (from bootstrap) .row { margin-right: -15px; margin-left: -15px; }

Categories : HTML

My nav is not going in my head
In your header is logo with the header's height and nav is underneath. You can float both: #logo {float: left;} nav {float: right} /* or left */ http://jsfiddle.net/cd0oopfv/ Navigation is in your header, headers height is logo + nav. But there is no space for nav. Nav is block element and if you want to have one block near by another one, you have to float them.

Categories : HTML

span multiline start from same position
You can use display: table values, for example. <style> .ga_sep{ height:10px; width:1px; border-left:1px solid #c9caca; margin:1px 8px 0 8px; position: relative; top:1px; display:inline; } div {display: table} span {display: table-cell} span:first-child {white-space: nowrap} </style> <div> <span style="color:#c9caca">Scope of Work</span&

Categories : HTML

Perl - Print div by class
Inspecting the HTML code you are trying to parse, the required div node has this declaration: <div class="productSpecs specSection"> so your code should be: my $rank = $t->findnodes('//div[@class="productSpecs specSection"]');

Categories : HTML

Find out which div is containing the "main content" with crawler
I would try multiple approaches. For example start with the obvious - is there an id="content" or class="main_content" ? Use it! Look for ids and classes that are common for big content blocks and if they exist then use them. If not then move on to less certain tests. Next try narrowing things down. is there a <header> or <nav> tag? ignore that and everything above it. Ignore a <fo

Categories : HTML

Perfect Responsive Circle iFrame
You need to wrap your iframe with two divs. The inner one should be position: absolute;, while the outer one should be position: relative. You can use a static and equal height and width in order to make it a perfect circle, as shown in this jsfiddle examples. HTML <div class="iframe-outer"><!--position: relative--> <div class="iframe-inner"><!--position: absolute-->

Categories : HTML

Footer with resizing issue css
First, i noticed some typing errors; hope they were just typo. Here is the updated/corrected part. You had no "=" before viewport and had added "d" to initial-scale! <meta name="viewport" content="width=device-width, initial-scale=1.0"> I would suggest you make use of getbootstrap.com or jquerymobile.com to get rid of many problems similar to the one you are facing.

Categories : HTML

Item margin affecting class margin
remove float:left; from .first li a{} write .first li a { text-decoration: none; color: #000; font-size: .8em; margin-right: 15px; margin-top: 13px; padding: 1px; } instead of .first li a { text-decoration: none; color: #000; font-size: .8em; margin-right: 15px; margin-top: 13px; padding: 1px; float:left; } and adjust margin padding of

Categories : HTML

Hover Over In Navigation Bar
Your nested list needs to be changed slightly. The only valid element directly inside an unordered list <ul> is the list item element <li> and not <a> This example is basic and made purely to demonstrate a method to colour the backgrounds. The Background CSS The background is applied to the list items child <a> element. Give a background color to the direct child of the

Categories : HTML

Footnote in HTML Table
You could use tfoot (http://www.w3schools.com/tags/tag_tfoot.asp) if(!empty($output)) { echo '<table cellpadding="0" cellspacing="0" class="imagetable">'; echo '<caption>Table 1</caption>'; echo '<thead><tr><th>Date</th><th>Stat 1</th><th>Stat 2</th><th>Stat 3</th></tr></thead>';

Categories : HTML

How to dynamically set data-title attribute to asp table cells
You have to do it manually. Given this one row table: <asp:Table ID="Table1" runat="server"> <asp:TableRow runat="server"> <asp:TableCell runat="server"></asp:TableCell> <asp:TableCell runat="server"></asp:TableCell> <asp:TableCell runat="server"></asp:TableCell> </asp:TableRow> </asp:Table> Loop throug

Categories : HTML

parsley.js hidden input file not validating
In the js parsley file (~line 195) you must on excluded: line put in comment or delete input[type=hidden]' var ParsleyDefaults = { // ### General // Default data-namespace for DOM API namespace: 'prsly-', // Supported inputs by default inputs: 'input, textarea, select', // Excluded inputs by default excluded: 'input[type=button], input[type=submit], input[type=reset]',

Categories : HTML

HTML UL LI a href links not working
I think some java-script or jquery function is overriding your current functionality, because the code which you posted works fine without any includes. <header> <div class="sticky-nav"> <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a> <nav id="menu"> <ul id="menu-nav"> <li><a href="http://aevidum.com">Home</a

Categories : HTML

Dropdown list In Navigation Bar
Is this what you meant? .navigation ul { display: none; position: relative; top: -40px; left: 250px; list-style-type: none; margin: 0; padding: 0; } .navigation li:hover ul { display: block; } Here's a fiddle: http://jsfiddle.net/Niffler/bxuv14Ld/

Categories : HTML

CSS button error?
It works here but not on your computer - well the CSS is probably not loaded correctly. You have an absolute path to the CSS file, so try this instad: <!DOCTYPE html> <html> <title>Tutorial</title> <head> <link rel="stylesheet" type="text/css" href="styles2.css"> </head> <body bgcolor="Green"> <center> <h1 style="color:orange">Welcome to

Categories : HTML

How to set text background color without spilling past text
Change it from a div to a span and it will only stretch its width to the contents within it. <body> <span id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</span> <br> <br> <span id="bad_way">This is the inefficient and manual way.</span> </body> http://jsfiddle.net/b

Categories : HTML

Input webfont text in a div with contenteditable appears simultaneously in other divs?
If you can use jQuery, you can do something like this: $(document).ready(function(){ $("a").click(function(){ $("body").append('<div contenteditable style="font-size: ' + $("#size").val() + 'px;">Size ' + $("#size").val() + 'px</div>'); return false; }); }); @import url(http://fonts.googleapis.com/css?family=Raleway); body {font-family: 'Raleway';} div {margi

Categories : HTML

How to make a child div alone responsive using css?
Instead of the child div being sized relative to the parent, it would have to be sized relative to something else. An example of this would be using viewport width / viewport height. http://jsfiddle.net/o5xajj9s/1/ This div would always be 50% of the viewport width (window size on a computer). Combining this with media queries where you need it I think would solve your issue. div { width: 50

Categories : HTML

Plot output using knitr is missing panel
One way to replicate the behavior you describe using the code you've provided is to first filter out all rows in "agg_subdata_avg" which contain "weekend" in the "Days" column and then proceed with plotting. Just to double-check that both levels are represented, you might try plugging this line into your Rmd file next to the xyplot function and then re-knit: print(unique(agg_subdata_avg$Days))

Categories : HTML

Image placement within a set page-wrap?
Take a look here: http://jsfiddle.net/gh129L5b/19/ #container { background-color: gray; width: 100%; height: 100%; } #wrapper { width: 80%; height: 800px; margin-left: auto; margin-right: auto; background-color: white; max-width: 48em; } #red { height: 100px; width: 100px; background-color: red; float:left; margin-top: 70%; } #blu { heigh

Categories : HTML

How should we be using length units in Polymer UIs to conform to Material Design specs?
CSS pixels does actually take pixel density into account and doesn't always map to device pixels. A CSS pixel should have a pixel density of around 96dpi at an arms length and thus maps to multiple device pixels on higher resolution displays. You can read an in-depth description at http://inamidst.com/stuff/notes/csspx

Categories : HTML

Can I share common elements of a website as objects?
There are multiple advantages to setting up some sort of server-side scripting. The first I can think of is that there are fewer HTTP requests, which will make for snappier page load times. Second, it's pretty easy to set up and it adds a whole new world of functionality. Third, I rarely come across a legitimate use case for <object> elements. That being said, one implementation in PHP coul

Categories : HTML

Can someone explain why Div hiding behind other Divs in HTML Layout?
Whenever you do use the float for the element then don't forget to clear them. For easier I always use overflow:hidden; to the parent div: <div class="parent"> <div id="leftside"></div> <div id="rightside"> </div> <div id="narrow"></div> </div> .parent{overflow:hidden;} So now, you know the key reason of hiding?

Categories : HTML

Bootstrap - Bottom align menu in navbar
This should do the trick. #myNavbar { position: relative; } #myNavbar .nav { position: absolute; bottom: 0; right: 0; margin-bottom: -10px; } JSFiddle

Categories : HTML

Cgicc embed image- cgi thinks image is script
Turns out the issue here was not with the code, but rather the directory that I was storing the image. I was trying to serve the images from the cgi-bin directory, which was causing the server to interpret it as a CGI script. I changed this line: cout << img().set("src", "tmp3.jpg").set("height", "100").set("width", "100"); to this cout << img().set("src", "/images/tmp3.jpg").set

Categories : HTML

Controlling div order in single / double column layout? Is it even possible?
I think these rules will do the job: @media (min-width: 992px) { .left { width: 60%; } .right { width: 30%; float: none; display: inline-block; margin-left: 10%; } } To make right items float properly you can set them float: none for wide dimensions and marging-left: 10% will take care of proper 10% gap between columns. Demo: http://jsfid

Categories : HTML

CSS Transitions for checkbox not working
You forgot to insert left: 0px in .checkbox label{...} class , because you expect that transition will be applied to transformation in x-Axis. Here is a working snippet. input[type="checkbox"] { display: none; } .checkbox { position: relative; width: 60px; height: 2px; background-color: black; border-radius: 10%; } .checkbox label { /*insert next line*/ left: 0px; top: -10px;

Categories : HTML

x-scrolling on webpage during mobile
You manipulate the padding of the containers using the .section* classes. remove the padding-rules from .section1, .section2, ... and the play will disappear. If you really need this padding, apply it on the individual cols.

Categories : HTML

How to Mouseover only a portion of a image and show a table & link to another webpage -HTML (CSS)
What you do is have a div with your image set as its background then inside the div you place 3 anchors with a width of 33% and different colors on hover. See my example below. div.picture { width: 300px; height: 300px; background-color: cyan; background-image: url(/images/picture.png) background-size: 100% 100% background-repeat: no-repeat; border: 1px solid black; } div.pictur

Categories : HTML

How to make an Unordered List in HTML
A list (<ul>) is not allowed inside an anchor (<a>). Officially that is. A browser will show it nonetheless. In addition: the HTML5 spec describes the content model (content that is allowed or expected inside an element) of an anchor as transparent. Transparent means that the allowed or expected content is derived from it's parent. Example: if an anchor's parent is a <p>, you s

Categories : HTML

CSS width percentage doesn't adjust
The divs are resizing correctly, if the problem is that the image is not resizing you could fix it with this css: #container_djbanner img{ max-width: 100%; } Check out this codepen. *Avoid using inline css in your html (is not a good practice).

Categories : HTML

translateY, vertical align content
SHORT ANSWER - You need to add styles to the parent too. LONG ANSWER- Add a style to the divs who are immediate children to .row .row > div { border: 1px solid yellow; /* to see what is going on. delete this if you may */ height: 100%; position: relative; } Once you add this, the p and .btn know what height to refer to FIDDLE

Categories : HTML

Issues with Opacity effect in canvas
You can set the fillStyle property of the canvas context using rgba function.

Categories : HTML




© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.