Questions tagged [html]

Questions about HyperText Markup Language (HTML), the main language for creating web pages and other interactive information that can be displayed in a web browser.

Filter by
Sorted by
Tagged with
1
vote
1answer
1k views

How can I extract all text content from Photoshop with all associated styles for backgrounds? (see example inside)

I have provided a lot of PSDs with lots of content to a coder. There were 50+ PSD and it took a team of 4 people 2 months to build them. Furthermore, the content was in Spanish and the coder doesn't ...
0
votes
1answer
48 views

Programmatic circle diagram approach/technology

I'd like to make something like this programatically. http://www.feelingswheel.com/ Does anyone have a suggestion? Could you approach this programmatically with Illustrator, Inkscape, HTML5, or Three....
-1
votes
0answers
29 views

How to correctly set padding to fit 4 images across in a row?

My title isn't quite great but I'm going to explain as good as I can. I've got to make the front end for a site and this includes "Testimonials". The design: As you can see, it's a flexbox ...
0
votes
1answer
100 views

Best workflow for both google HTML5 banner ads and animated GIFs

We have recurrent product campaigns and we are moving on to HTML5 banner ads from just plain GIFs but we are still keeping both formats as some of our target audience is on old systems. I am looking ...
0
votes
2answers
302 views

Is there an HTML/CSS version of the StarCraft 2 Menu buttons?

I am building a webapp and I want to modify one of the StarCraft menu buttons to add them to my webapp, (StarCraft is a Blizzard Entertainment Game). This is an example photo of one of the menu pages ...
0
votes
1answer
45 views

Relative coordinates in animateMotion path

I cannot figure out why the blue ball1 in the following example does not "move to" the point on the path specified in #wire from its starting positions to mimic the path animation of the pink ball2. ...
1
vote
2answers
1k views

Force line break on mobile - currently it breaks word in half

We’ve recently updated our website. Newer look better forms etc. However with the new design there is one issues I can’t solve: Headlines are not getting displayed properly on mobile. And by ...
1
vote
1answer
157 views

Comic style scheme

I would like to build a scheme in comic style. I found the CSS markup that I like (https://codepen.io/mp/pen/ldAFs) It seems like the following tags do the job border-width: 3px 4px 3px 5px; ...
3
votes
1answer
1k views

Setting the Viewbox so that the inline SVG will “Snap” to the size of the containing element?

I created this simple inline SVG by saving as "Optimized SVG" in inkscape. Prior to saving I set the size to 200X200px. <div style="width: 200px; background-color: red;"> <?xml ...
0
votes
2answers
85 views

I need a tool to design SVG for HTML

Basically, a lot of SVG editors, even Inkscape, insert tons of random stuff into the file that is not needed to render it correctly inside an HTML. I want to be able to copy the source of the file, ...
0
votes
1answer
64 views

Can I use freepik web element in website? [closed]

Can I convert PSD web elements like a pricing plan to HTML and use it free in the commercial website without attribution? for example this component :
9
votes
3answers
388k views

What width should I design for when creating a website? [duplicate]

I just got a freelance project to design the UI for a website. Can someone tell me what layout (dimension) is used to design a website front end in Photoshop? What are the basic dimensions used?
0
votes
2answers
367 views

Convert png into svg and then use it in html between svg tag

I have web portfolio with images for the websites I worked on. For responsiveness I think SVG would be a better choice so that it does not lose any quality when browser is resized. For that reason I ...
0
votes
2answers
45 views

Different color contrast between same image

This is how to original image look like: 805px x 204px And here is how to show the image later which scaling: 265px x 67px Here is how to call the image on HTML: <img id="logo" src="Photo/my-...
4
votes
8answers
4k views

How do you create a client website design mockup/image?

For all the graphic designers who do web design too: How do you produce client design mockups for review and then convert them into HTML/Wordpress etc? Are they created in Illustrator/Photoshop and ...
-3
votes
4answers
8k views

SVG image not displaying properly in HTML webpage

I'm trying to insert an svg image that I created in Inkscape into my html web page but for some reason I can't get it to render correctly. Is there some sort of extra exporting step to get an SVG ...
23
votes
3answers
4k views

What is the convention to indicate “the same value as above”?

I have received a table of data to put on an html page. Many values in the second column are repeated for a few rows. The author indicated this by using starting double quotes (“), probably ...
0
votes
0answers
32 views

SVG borders get blurry on drag

While dragging an SVG rect the top border changes its width depending on where the rect is dragged and positioned on the screen. For example, sometimes it looks wide and blurry: And sometimes it ...
8
votes
2answers
12k views

How to convert a circle to a path?

For example, when I save an SVG from illustrator and view the code, I see a <circle> element, for example, <circle cx="131.6" cy="292.3" r="311.7" /> but I'd like for it to be a <path&...
3
votes
1answer
5k views

Why does Bootstrap 3 use Helvetica Neue?

My understanding currently is: "Helvetica Neue" is Linotype font. That means it needs to be paid for and is not free to use. It is also a font that is not for web, it is for print. It will not render ...
27
votes
10answers
20k views

Do web frameworks such as Bootstrap or HTML5 boilerplate offer anything to a designer (not developer)?

Note, this is about design much more than development. I build sites from scratch with completely hand written CSS and HTML. I've known about pre-build css templates such as Bootstrap or HTML5 ...
0
votes
0answers
104 views

Exporting Standalone Interactivity in Adobe Animate

I'll preface this by saying I'm not sure of much of the vocabulary involved here - so I might not know the term I need to be asking about. Nor am I sure that here is the best place to ask it.This is ...
3
votes
4answers
643 views

Width of unicode musical symbols vis a vis fixed width font

In my experience, the musical Unicode symbols for flat (♭) and sharp (♯) are not exactly the same width as the fixed width font that I am using, consequently columnar character alignment ...
1
vote
1answer
391 views

Inkscape svg in HTML

SVG does not always look sharp in HTML I have an SVG icon made with Inkscape. The page size is width: 200px, height: 200px and the line size is width: 170px, height: 170px. When I put it in a HTML ...
0
votes
1answer
36 views

how to hide Access to media files in a directory, if we have the full URL for a file

how to hide Access to media files in a directory, if we have the full URL for a file. How to, I make an online store, so to download one of the files in my store, I have to log in first, then it can ...
0
votes
1answer
39 views

How do you animate the height of a path in SMIL? attributeName=“height” doesn't seem to work

I've been trying to animate a simple path (i.e. circle) with <animate attributeName="height" values="100;0" dur="1s" begin="0s"/> ...this works if I slap it onto a shape (e.g. rect), but ...
0
votes
0answers
147 views

Graphic appears blurry in Chrome and oversharpened in Firefox

I exported the images on Adobe XD. For some reason the graphics on my page appear blurry in Google Chrome and Microsoft Edge and oversharpened in Firefox. Also in Google Chrome when I go inside the ...
0
votes
2answers
1k views

Rowspan in the last row of the table with CSS and without CSS

I am trying to draw the below image I am not able to get the image by using table in html. I have tried using rowspan but it just distorts the table and doesnot create the required result. How can I ...
11
votes
5answers
70k views

Email signature hell--How to include a logo image and have it stay sharp?

I found a couple useful threads on this forum with respect to the issues posed by (displaying) images in email signatures-- here, for example-- and I've searched all over the web, but still have not ...
10
votes
5answers
5k views

Is programming a website for mobile first really necessary?

I've read through a number of sources which state mobile first design is almost essential, which I can't deny it does have obvious benefits such as faster load times for mobiles which generally have ...
-1
votes
1answer
49 views

Question on graphic designer positions in which one needs to know even HTML and CSS [duplicate]

About graphic designer positions where it needs to know HTML and CSS, what are all the projects one needs to be able to do with HTML and CSS in order to be employable?
4
votes
5answers
14k views

Animated gif in Photoshop only saves as html file

I created an animated banner ad in Photoshop CC and need to save it as gif. I used Timeline/Motion. When I "Save for Web" the second box from the top is set to "GIF". I click "Save" and the only ...
0
votes
1answer
48 views

Suggestion for learning method [closed]

Currently I am studying graphic design, in my personal time am learning Html and Css, and I want to learn UX. What should I do? To stick with html and css and those are enough or learn a UX software?
2
votes
2answers
935 views

Change HTML tag styles with GREP in InDesign

I have some HTML in a text and I would like to apply a character style to the HTML tags: <p>This is some <strong>HTML</strong> I want to use.</p> I want to only change the ...
-5
votes
2answers
105 views

Minimalist website design for a software product

Is there a free HTML5 + CSS template for a website to display a basic company info and a software product?
1
vote
2answers
6k views

How do I keep Apple Mail from resizing images in my HTML signature?

I created an HTML email signature for my company, and have everything working. It contains both text and an image containing HTML links to our website, and all looks well until I add it in the ...
2
votes
1answer
5k views

Pixel Width of characters in a font

Is there any easy way to figure out the width of each character in a font? I'm trying to line up two tables of data with data scraped from a website. The issue is that the text in one section of the ...
1
vote
3answers
12k views

How to measure the distances in PSD?

I already asked here a question about font types, which are used in PSD layout, but I have another problem: How to measure all distances between objects if in .psd these objects have .png format? I ...
2
votes
2answers
1k views

How does the grid system work for a full width page?

How does the grid system work for those websites that expand to the full size of the browser (no matter how you resize) while working with a base 12 grid system (such as 960.gs)? For example, take a ...
11
votes
4answers
17k views

Responsive web design is based on screen resolution or screen size?

For mobile devices the resolution is actually big, only screen size is small. based on that: For websites design, do we target screen resolution (e.g 1920x1080)? And for mobile apps. do we target ...
1
vote
2answers
128 views

How do I go about choosing image height on a background-cover div?

I have a slider on my page with the property background cover applied so it fits the whole thing. The slider also has a 50vh fixed height. The background always ends up cutting things from the image ...
0
votes
1answer
77 views

Design flexboxes with elements that have different scale factor

I have a page with flexbox elements. Elements have picture but as the picture is for different devices it has different scale factor. What is the best option for design to be still functional but ...
1
vote
1answer
635 views

Use an svg as clipping mask for div

I would like to use a svg as a clipping mask for a div, so that where the svg is placed you see the fixed background. I tried to explain it here: The size of the svg should depend on the screenwidth. ...
4
votes
1answer
224 views

What are some classic decorative typography techniques?

I'm working on a website, and I'm using a drop cap/initial letter for the text body. I find this technique to be very eye-catching and beautiful to look at. Does anyone know any similar simple, ...
4
votes
1answer
488 views

InDesign relink Index Markers

Working with Indesign Creative Cloud 2017, I've run into an issue. I was delivered files and the supplied IDML file has about 150 Index entries that I need to relink in the content. When I export ...
0
votes
1answer
1k views

Why is my img leaving a 1px unfilled space in a table cell?

I am writing some html to go in a mail to be sent to internal users programatically. They all use Outlook 2016. (Coding for Outlook is horrific, as simple things like CSS backgrounds don't work. As ...
-4
votes
1answer
556 views

How to implement navbar list with shadow in html/css?

I have a design of navbar in mind that I want to implement for my web page. Please see the drawing I created using Inkscape. I read the tutorial on w3.org and there is an example of adding padding to ...
13
votes
2answers
74k views

Is there a “generate CSS/HTML” feature or plugin in Sketch app

I have found a script that does exactly that (generates CSS and HTML for the layers and offers an option of exporting those in % values) and cuts the work for the web-dev in half for Photoshop. Now I ...
3
votes
3answers
4k views

What is the PSD to HTML best practices with HTML5?

I'm getting quite confused with all the different methods of converting from psd to html 5. I'm trying to practice converting PSDs to HTML so i get enough experience. There are a ton of complicated ...
0
votes
1answer
622 views

how to scale artwork and content from mm to pixels

i'm making a template of a ticket of 80mm for a web app in Illustrator CC 2017, but now realize that when i go to export>save for web, the size of the artwork and content change to pixels, but not ...