How to create a table inner bevel in HTML/CSS?

I'm designing this forum layout where I come up with a nice design to draw the forum tables, however, I'm not sure that this can be easily done in HTML/CSS. Before I continue to draw the whole layout, I need to know if this is achievable and how, otherwise, I'll have to ditch this effect and rethink things... For instance, the design I currently have is this one: The rows on this example have all the same height but this is just an example. The real table will actually have different row h

Html IE9 and cellspacing

It appears to me that IE9 does not recognize cellspacing. Anybody noticed the same too? <table cellpadding="0" cellspacing="10" border="0" align="center" width="100%">

Html How to link to a specific part of a page

I have a rails app and one page is a 'command center' with links to a help center. Things like, signing up or new post, etc. How can i make it so that when you click on a link, not only does it redirect to the help center, but that specific section. I tried making my links, link_to('/help#sigingup', 'Sign Up Help') and then in the help i have <h1 name='signingup'>Sign Up Help' Anyone know what i am doing wrong?

Need some HTML regex help (and yes, I know it's not supposed to be done)

So as a preface, I need this regex to move past a bug I'm waiting on server people to fix. Basically I get JSON back with unescaped " characters in HTML. I need a regex that looks inbetween <> characters and replaces " with a \". <div style="padding: 0%; width: 100%;"><span style="font-family:verdana;"><span style="font-size: 72px;">Demo!</span></span></div> UPDATED INFO: The text though is inside some json sent back as a string that I eventually need

Html Sencha Touch Horizontally Center Search Field in Navigation Bar

This question is pretty downright dumb and I might have stumbled upon a bug but I need to center my searchfield in my navigation bar in Sencha Touch and I just can't make it work. This is my code: Ext.define('Myapp.view.MyNav', { extend: 'Ext.navigation.View', xtype: 'mynav', requires: [ 'Ext.field.Search', 'Ext.Button' ], config: { fullscreen: true, navigationBar: { items: [ { xtype: 'searchfield', placeHol

Html How to add css for specific input type text

When I was trying to add some input fields with css I got a problem I couldn't make more than one css for some input fields this is the fields I have <input type="text" name="firstName" /> <input type="text" name="lastName" /> and the css is input { background-image:url('images/fieldBG.gif'); background-repeat:repeat-x; border: 0px solid; height:25px; width:235px; } I want to make the first field (firstName) with this css input { background-image:url('imag

Html Nesting <p> won't work while nesting <div> will?

I usually won't nest <p> like this: <p>The following: <p>one</p> <p>two</p> </p> and I will nest like that using <div> instead. But today I used <p> but it seems that both Emacs and Google Chrome both would consider the outer <p> closed as soon as it see a new <p> is started. (the DOCTYPE is HTML 4.01 Strict). I thought <p> is no more than a <div> but just with some pre-defined margin and padding, but is

Html how to hide my source code so to not be copied

I was recently informed by someone that my website was copied. When I looked at the linked that he gave me I so that the site was identic to mine except for the logo and text. Is there a way to hide my code? Or to make it impossible to right click on my page? I saw on some websites that if you go to it will show access denied, not a list with all your images...How do they do it? Thank you!

Html filling div using ajax?

I've recently created a website with a menu-bar to the left. My next step is to update the right side of the page with content based on what option you choose on the in the menu. I know you can use iframe but I was wondering if there is an alternative to it, like a more dynamic one! Most of the menu options are input-forms, I've read about ajax-calls to fill a div but couldn't find a good tutorial on how to achieve it. edit: Here's a sketch

Html Set Kendo Grid JSP to take remainder space

I am using JSP Wrapper version of Kendo UI. Currently, I have a fixed height for my grid: <kendo:grid name="SUBUL_02_GRID" pageable="true" resizable="true" sortable="true" height="800"> I'd like the grid to take the remainder space of my page, but setting height="100%" doesn't work. The height is set to some arbitrarily value that's smaller than 50% of the page. I'm not sure if this matters but I also have virtual scrolling enabled <kendo:grid-scrollable virtual="true

Html XSL Hyperlink with parameters

I'm working on a menu and having some trouble with creating hyperlinks in my XSL. What I want to do is get the value of ITEMNMBR from the xsl and when the link is clicked, redirect to that page, passing ITEMNMBR in the query string. I laid out what I thought would work eventually but then realized that I don't know how to get value of ITEMNMBR used in the href value. Has anyone done this and could help? I'm a newbie to XML so this is a beginner question I'm sure. If there is a better way

HTML5 `<link rel="shortcut icon" />`

The WHATWG document for HTML5 says that the rel attribute must contain values that are space-separated, and then it gives a table of allowed values. The attribue's value must be a set of space-separated tokens. The allowed keywords and their meanings... The list of allowed keywords for the link element does not include shortcut, but it does include icon. So I'm looking at the all-too-well-known tag <link rel="shortcut icon" href="/favicon.ico" /> and wondering if it is HTML5-compl

Html SVG inline vs <img>, performance and caching

I'm using SVGs extensively for obvious reasons. However I can't find any resources on the best way to implement SVG when performance is a priority. On one hand with inline SVG you have fewer requests, but on the other, using SVGs with the <img> tag allows the browser to cache them. We are talking about a web application where few users make many repeated visits. This makes the <img> approach sound more appealing. Has anyone come across any benchmarks or has personal experience on th

Html percent based CSS layout breaks on iPad

I'm trying to code a site to a customer's specifications. What I have now seems to be working perfectly on OSX Safari, Firefox, and Chrome. Untested on PC. Breaks quickly on iPad. And is completely borked on iPhone. Here's where I'm at now: Every element is percentage sized to the height of the window because the client is used to flash sites that scale to window size and wants his images to display as large as possible. On iPad iff I open the

Html What needs to be configured so that the texts don't wrap?

I'm building a website using WordPress. Although the pages are well suited for Mobile site, this particular page is displayed very congested. This is the page from the website website - If you click F12 using Chrome browser on this page and toggle the "Device Mode" you'll see how it appears on a mobile device, I'm going through the CSS files to find out what needs to be changed but I can't seem to find out. What I want is that the page should appear on a mo

Html How to maneuver between two divs using CSS?

I'm trying the following: <header> <input type="checkbox" class="menu-toggle"> </header> <nav class="top-navigation"> <ul class="top-menu"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> </ul> </nav> Where my CSS is like below: .top-menu{ display: none; } .menu-toggle:checked .top-menu{ display: block; } But I'm failing to do that. I also tried: .menu-toggle

Html "see more detail" at the bottom of a div / prevent text from leaving bottom of div

I have this news feed that I'm making for my school website and I want it to model this news feed: Harvard Website Similar to that of Pinterest I believe. I am using isotope to fill the grids so that I can sort by type and also minimize the 2d packing. Isotope My end goal is to have the size of the div be a certain percentage of the text height so that there is some variation in heights and then proceed in cutting off the rest of the text and adding a link to the full news article. Questions

How to pass parameter to Java using HTML

I am new to Java and programming in general. For background, I am working on my simple survey system. I have all the classes/methods necessary to insert and pull from MySQL and display the survey on my JSP page. This is my Index.jsp <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Survey System</title> </head> <body> <h1>Survey List</h1> <% Resul

Html How to optimize web pages for Mozilla Firefox? My pages are not displaying correctly on firefox. In chrome, it's perfect

I use Google Chrome to see how my code is rendered by a browser. Now everything is perfect in Chrome. When they are opened in Firefox some irregularities occurs. In Chrome, navigation bars fits perfect with its inner-elements (<ul><li></li></ul>). Not in Firefox. ie., some height-width mismatches. (I used % to mention height, width etc.) different colors for placeholder tag. different border colors for divs. etc. In short how to optimize the pages for Firefox?

Html set size of div which contains svg text element

I want to set width of maindiv so that it can properly contain somedynamictext. Number of somedynamictext can be dynamic. Can I show ... in svg text element? As per comments I did following <div id="maindiv" style="height:60px;display:inline-block;border:1px solid black"> <div id="MATCH" style="height:60px;display:inline-block;border:1px solid black;float:left"> <svg width="100%" height="20"> <text x="28" y="18">MATCH</text> </

Bootstrap Dropdown / HTML Element In Domain Hosted Web-Builder

I'm likely what you'd consider a complete novice when it comes to web-design and have been putting something fairly basic together using the website builder on godaddy and somewhat of a hack-job of code that I've picked up around the net (hoping all judgement is reserved). At any rate, I'm trying to make my life easier by using Bootstrap dropdown buttons but I feel like I must be missing something. The site builder allows you to add in an HTML element where you then can enter in .script or wha

Tumblr Shape HTML

Okay so i just started a Tumblr blog the other day, and when i was editing the profile page i had happily found a edit with HTML button, and i thought wow now i can finally loose this (image below) that's intruding on my theme. So, I hit CTRL + F to find code relating to the shape, and found that the shape was actually a fill rather than a preset image, so i entered the hex code for a transparent black #00000000), but to no avail, it didn't work, and after about an hour or so of scouring the

Html Menu name in hexagon shaped inline tag

.hexagon span { color: #0f0f0f; font-size: 16px; line-height: 0px; } .hexagon { font-size: 40px; /*text-align: center;*/ line-height: 45px; } .hexagon, .hexagon:hover { color: #fff; text-decoration: none; },, { background: #ed8990; } .hexagon.aqua, .hexagon.aqua:after, .hexagon.aqua:before { background: #8dd7d8; },, { background: #fd8a78; } .hexagon { width: 80

Html How can i move my h1 headings on top of my flexbox containers?

I created 3 flexbox containers (container for controlling the other two flexbox containers. In my primary and secondary flex containers i inserted 4 images and a h1 which are all wrapped together, but how can i move my h1's on top of the flex containers(outside of the flex containers) ? I started experimenting with flexbox today so consider my a rookie. JsFiddle or <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/framewo

HTML drop down list output multiline

Can any one tell me how I can get the output of a dropdown to be more than one line? I have an array that has a list of names and against each name a list of there children for example I want users to be able to through the drop down list select a name and then it displays a list of there children <form name="form" onsubmit="CheckForm()"> <select name="myOptions" onchange="document.form.showValue.value=this.value"> <option value="">Select a link</op

Html "Software error: File error, Permission denied". How to fix this error?

This perl program pretty much shows the cgi script but it has this note at the bottom of the page Software error: File error, Permission denied at /Applications/XAMPP/xamppfiles/cgi-bin/asst5/orderbolts.cgi line 34. Line 34 from cgi is this: open (ORDERS, ">>bolts.txt") or die "File error, $!"; Here is the html file <!doctype html> <html lang="en"> <body> <form action="/cgi-bin/asst5/orderbolts.cgi" method="post">

Outlook signature html

I am trying to make signature in html for my Outlook mail. The problem is that everything looks great in browser but in outlook is too wide. This should look like in the browser. Source code: <!DOCTYPE HTML> <html> <head> </head> <body> <div id="sig" style="min-width: 680px; min-height: 82px; line-height: 18px; padding: 24px 0 0 30px; font-family: Helvetica, Verdana, Arial, Sans-Serif; font-size: 12px; color: #999999;"> <img src="logo.jpg" alt="l

Html Element keeps going behind other element

The Slides is behind navigation element. I am just getting started with hmtl and css and I am wondering how to keep separated. What I am trying to achieve is no matter how wide the navigation is the body will adjust to the left but will not go behind it. Any advice will be appreciated Thanks! The css for the page body { padding-top: 50px; padding-bottom: 20px; } .body-content { transition: margin-left .5s; } input, select, textarea { max-width: 280px; } .carousel-caption p

Unwanted Gap in HTML Email for Outlook

I'm making an HTML email that's responsive without using media queries. It works, but in Microsoft Outlook 2010, which a lot of our clients use, it shows a gap between the two tables. On every other device it does NOT show a gap. How can I remove the gap in Outlook? Note: I need to use multiple tables so the email will be responsive. If I use another td instead, it won't be responsive. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> <html&g

Html Floating Div's resizing issues

I am a student just starting in Web Development. I have to create a web portfolio for an assignment. I have a navigation bar in a div floated left. And a content div floated right which is an about me section with paragraphs and lists etc. When i resize the browser, i get to a certain size and the right hand content div drops below. I would prefer text within the content div to just keep compressing into the div? Note i have to do this in HTML/CSS for the assignment as javascript solution com

Html Why does mouse-wheel scrolling stop working on a site, only some times?

My website sometimes bugs, making it impossible to scroll the page using the mouse wheel, touchpad or finger. Dragging the scrollbar, pressing space or pressing page-up/down does work. Any suggestions on what it could be, or how one would go about fixing such a bug? There dosn't seem to be any specific action or page connected to the bug, it only happens about once every other day, and has happened on several devices, OS-es and browsers (even iPads and Android, IE11 and firefox). Even hard-re

Using @media style in HTML head

I am new to html and am just creating a test webpage for curiosity sake. I am trying to make it so that when my browser window is less than 800 pixels wide my divs occupy the whole width of the screen. Otherwise they should occupy 45% of it and be inline blocks. I used the code below. They are all 45% width inline blocks regardless of my window size. Am I just using the @media tag incorrectly? I would like to define the styles in the head of the html code if possible. <!DOCTYPE html> &l

Html Bootstrap: How to center a p Element vertically in a div?

How can I vertically center this multiple Line p Element in this div while keeping it at the left side of the page? I tried already to display the parent div as table but this seems to be marked as !important in the bootstrap css. Thanks! <div class="row"> <div class="col-3"> <img src="images/pk1.jpg" alt="Telefon"> </div> <div class="col-9"> <p>asdadadas<br>asdasdasad</p> </div> </di

Html Inspinia Admin layout: left hand panel status

I am using Inspinia theme, and have modified the theme so that it remembers the status of the left hand panel (i.e. the navigation bar) though cookies. So if it is collapsed, it will stay collapsed even after refresh or login. The same for when it is expanded. The code is simple: if (getCookie('toggleSideBarPrefs') === '0') { $("body").addClass("mini-navbar"); } else { $("body").removeClass("mini-navbar"); } and I set the cookie when clicking the hamburger button: $('.navbar-minimal

Html CSS, why is min() function in max-width not working?

In the code below, I set the max-width of the 1st image to be min(40px, 10%), but apparently it doesn't work. Firefox says “Invalid property value”. Why is that? img#test1 { max-width: min(40px, 10%); } img#test2 { max-width: 10%; } <!doctype html> <html> <head> <title></title> <meta charset="utf-8" /> </head> <body> <div> <img id="test1" src="" /> </div> <div> <i

Html Assistance scaling an inline SVG graph

I have SVG bar charts that I am creating dynamically (SQL & PHP). Currently, in order to create optimised sizes, I create 3 SVG charts per chart and use CSS with media queries to display the right one depending on the device. I would obviously prefer to output one SVG chart and scale it to whatever size would work for each device which would cut my code by 3! But every time I try scaling my inline code, either with viewBox or width/height attributes, my chart either displays cut off or not

Why is my html select not selecting the first value of the data?

I have two nearly identical select options, one is showing the first value of the options in the select box as I expect but the other isn't. This one does not select the first value as I expect: <div class="col-3 col-md-1 text-center"> <select name="quantity" [(ngModel)]="item.quantity"> <option *ngFor="let quantity of quantities" [value]="quantity.value"> {{quantity.value}} </option> </select> </div> Data for the above

Html Different behavior of backgrounds applied on pseudo-element depending on position value

I was trying to create a container with a pseudo-element (::before, in this case) where on the parent element I would have a linear-gradient background with some transparency and on the pseudo-element, I would have the color. The main reason to that here is that I also wanted to have some backdrop-filter applied to it and by doing in this way, I could apply an opacity to the pseudo-element only (in this specific case, I couldn't use a background color with some alpha, so that's why the whole w

Html How can I use margin inside td in table but without using border-collapse: separate

Let say I want to make a table like this: I can already make the example if using border-collapse: separate property but the line itself get separated like this when I'm using border-collapse: collapse I can make the border still there but I can't make the margin itself #home-table table { font-family: "Nunito", sans-serif; font-size: 1em; color: #1d3962; margin: 0% auto; border-collapse: collapse; border-spacing: 0; width: 100%; max-width: 1200px; border: none; borde

Html Material Autocomplete Input showing displaying [Object object] despite using displayWith property

I'm using an input with mat-autocomplete for choosing an option of list of objects (they have ID, name, surname, etc.). I need the formControl's value to be all the object and not only the name, so I can display name + surname, and then use the ID for something else. I have no problems when searching through the input and selecting one option, it is displayed as I want and I can save the whole selected object. Issue: When I want to set the value through the code - I'm using the same form for cre

Create video background with HTML/CSS

I am creating a website in Bootstrap 5 and have created a fullscreen video background for the homepage. Is there a way I can have the video filling the viewport with the main title and navbar overlaying it as they currently are but all other page content sitting below the video so you would have to scroll down to view it? Any help would be greatly appreciated. Thank you. #myVideo { z-index: -1; right: 0; bottom: 0; object-fit: cover; width: 100vw; height: 100vh; position:absolute; } <section

Make paragraph element same width as a sibling image that has a fixed height and an auto width with only HTML/CSS

I am wondering if it is possible to make the paragraph element the same width as the image entirely through HTML/CSS. The image has a fixed height, 150px in this example, but the width is automatically determined by its aspect ratio. I don't want to use a fixed width to make them equal, I want the aspect ratio to continue to determine the picture width and the text width. Is it possible to make the parent element ".container" shrink to the width of the image somehow? Or somehow make th

Html Show the picture when the mouse comes on the span

I want to show a picture in an information box when the mouse hovers over the span. There are multiple spans. How can I do that? .tooltip { position:relative; border-bottom:1px dashed #000; } .tooltip:before { content: attr(data-src); position:absolute; top:50%; transform:translateY(-50%); left:100%; width:200px; padding:10px; border-radius:10px; background:#000; color: #fff; text-align:center; display:none; } .tooltip:hover:before { display:block; } <

  1    2   3   4   5   6  ... 下一页 最后一页 共 1567 页