How to use only DIV without id and without absolute position?« Back to Questions List

I tried to create 3 div boxes 300x200 -horizontaly, and I dont want absolute position and any of id element. How i could do that ? Problem is with absolute position if i change to relative all visual crashing. I need only export 3 layers something like this with end output:

.box1,.box2,.box3 {
	display:inline-block;
	float:left;
	width:300px;
	height:200px;
	padding:5px;
	background-color:tomato;
}
Asked by omaticx
Added September 4, 2015 2:03 pm

Do you have the right answer? If you do other users will benefit from your contribution, share your knowledge with the community!

Hi Omaticx,

Sorry for the delay, but long weekends are what they are.

There are a few steps you have to do to accomplish this, but you must also keep in mind that you are breaking the Photoshop logic of design (x,y,z) to match HTML – impossible.

Step 1: Reset Your Parent Div CSS

Follow the instructions on this post: //exportkit.com/answers/how-do-i-add-content-after-the-html-export – to reset your target Div based on your requirements.

Step 2: Use Class Tag to Create Divs

Class Tag: //exportkit.com/plugin/layer-tags/advanced-layer-tags/class-tag only works with folders and not with layers. If you use Class Tag with a layer it will have no effect. When using Class Tag, you must follow the rules (eg. there are no styles, you must define them).

IMPORTANT:

What you are attempting to do is considered advanced for a new user because you are breaking the logic of Photoshop to match HTML = never what you expect. There are a lot of things to consider when doing something like this – and you should start with a few other basic things first.

  1. When using Class Tag – NO PROPERTIES are stored. So if you set a background color to the div – it may render blank because you did not assign a width and height to it – HTML rule
  2. When using Class Tag – you must manually assign an external style to the element

Start With Our PSD Templates

Please download our PSD templates: //exportkit.com/resources/learn/psd-templates – there are a lot of examples to get you started. Check the layer tag folder.

Adding External CSS

If you plan to add external styles to Class Tags (advanced) you will need to use Code Tag: //exportkit.com/plugin/layer-tags/basic-layer-tags/code-tag or link the files externally: //exportkit.com/plugin/environments/html5/using-external-files-with-html5.

Caution

We DO NOT advice you do this for your first few projects. You are diving head-first into the “virtualization” side of Export Kit and Photoshop (advanced) – without understanding the basics. Please start with our PSD templates then go from there.

Answer by admin
Answered On September 7, 2015 11:19 pm #
Looking for another answer? View other questions in Output or get premium support for guaranteed results.
Asked by omaticx
1750 views
1 answer
Last Answered 9 years ago by admin

Categories

Recent Answers

asked by admin
asked by anup-sarkar
asked by originalife07
asked by yudhis
[+] View All Recent Questions

Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.