Photoshop Question posted in
The official user guide can be found here.

How can I convert my CSS into my HTML using Style attributes – Photoshop

Recently I’ve been creating several designs using HTML, then linking them to a CSS file.

The problem I’m having is that the website that I’m uploading these designs to, doesn’t allow <div> tags. I could just upload the design as an image, but I want to use my one designed in html rather than photoshop.

So I’m trying to figure out how I can convert my css into my html, as it doesn’t allow <div> tags.

I’ve tried inserting my CSS directly into my html file via a <style> tag but that doesn’t read it. If I change <div> to <p> then it does work. I’ve also tried using CSS inline converts to change the css to html but that didn’t work either.

So basically, I have to figure out how to convert my entire bio so that the css is converted into style attributes.

Here is some example code I’ve created:

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
        margin: 0; padding: 0; border: 0;
        background: #fffff url(images/bg.png);
        font: 19px Helvetica, Arial, Sans-Serif;
        color: black;
        line-height: 24px;
        background-position: center top;
}

body {
    min-width: 800px;
}



#content {
    background-color: #b8e5f6;
    margin: 0 auto;
    width: 900px;
	height: 600px;
    margin-top: 10px;
    margin-bottom: 30px;
    border-radius: 65px;
}

#content {
	position: relative;
}

#content-desc {
    position: relative;
    top: 230px;
    left: 64px;
    width: 370px;
    height: 100px;
}


#Ocean {
	position: relative;
    background-color: #004a80;
    margin: 0 auto;
    width: 900px;
	height: 70px;
    margin-top: 270px;
}

#Sand {
	position: relative;
    background-color: #f8cc61;
    margin: 0 auto;
    width: 900px;
	height: 160px;
    border-bottom-right-radius:65px;
	border-bottom-left-radius:65px;
}

#Amazon {
    position: absolute;
	margin: 0 auto;
	margin-bottom: 10px;
	width: auto;
    top: 470px;
    left: 80px
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> Bio </title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
<body>
		<div id="content">	
		
				<div id="content-desc">	
					<p>  A bunch of random text I've added for example purposes.  </p>
				</div>
				
				<div id="Ocean"></div>
				
				<div id="Sand"></div>
			
				<div id="Amazon">
					<a href="https://www.amazon.co.uk" target="_blank" rel="nofollow"><img id="amazon" src="http://i.imgur.com/2vj7NAr.png" alt="Header" height="30%" width="30%"></a>
				</div>
		</div>
</body>

I’ve been playing around with it for hours, but I’m not having much luck as I’m quite new to html coding. Especially getting the different boxes and text to overlay each other without <div> tags.

I’m also used to using the absolute positioning to place my text and images and relative was a bit tricky.

Is anyone able to please point me in the right direction for the above example code so that I can learn how to convert the rest of my designs?

Thank you.

Tags:

2

Answers


  1. 0

    You mean like this??

    If you are not allowed to use style tags in the html head and need to convert your styling to inline, you can use this tool – it is pretty handy!

    Login or Signup to reply.
  2. 0

    The browser does this automatically if you copy the rendered elements from the page into an element with the contenteditable attribute.

    The following code automatically outputs the code of an element with that attribute:

    var editable = document.querySelector("[contenteditable]");
var code = document.querySelector("code");
new MutationObserver(function(mutations){
  code.textContent = editable.innerHTML;
}).observe(editable, {childList: true, attributes: true, characterData: true, subtree: true});
    <div contenteditable style="border: 1px solid black"></div>
<code></code>

    Try copying and pasting some of its code into it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search