Parent/Children Divs positioning; & does the app write code compatible w/ browser resize?


#1

This post was flagged by the community and is temporarily hidden.


#2

This is an html and css issue independent of any software used. So many things have changed recently with HTML, CSS and Javascript that it is a good idea to refresh your knowledge.

Absolutely positioning an entire document is only useful for image layouts which work but are not current standards. Pinegrow will help you learn to properly use Html and CSS but it won’t actually teach you through instruction, you need to already have some knowledge.

The bottle necks you are talking about are in all honesty knowledge based or lack of. Spend some time to reacquaint yourself to the current 2018 standards for HTML and CSS, it will solve a lot of your issues going forward. Does not take a lot of time as long as you already understand the basics.

For the bleeding edge of Html and CSS check out this Youtube Channel


#3

Welcome to the Pinegrow forum @mark4man

Particularly this one, with print references from times and techniques long past. :wink:


The following articles may also provide further thought and insight for you regarding Pinegrow. Also if it makes it easier for you you can use one of the responsive frameworks Pinegrow supports - Bootstrap or Foundation.


Also have a look through the 40+ small videos on the Pinegrow main page. Here are a few examples:

Etc.,


Hopefully something is helpful to you.

:evergreen_tree: :heart:


Additional HTML (& other) Templates...if I purchase the app...?
#4

This post was flagged by the community and is temporarily hidden.


#5

Pinegrow is a visual editor so it is basically drag and drop. Grab hold of an element and just move it around
the page. Use the Tree tab to fine tune positioning. Again drag and drop process.

You say you do not want to go through tutorials but to learn the basics of pinegrow you should at the very least do the built-in action guide tutorial in pinegrow that teaches you how to use the features, what things are and works.

Click the coffee cup at the top right and there are guides on how to create blocks and various other things. The Support drop down in the top menu has the quick introduction to pinegrow you should at the very least go through.

After that, open up the templates included within pinegrow and look at the code and the various property settings for each element and content piece. Tear the templates a part and learn how they are structured.

If SEO is important to you go research the html5 semantic tags and microformats. A good site to start with semantic markup is http://www.schema.org

www.w3schools.com has all the html5 and css3 tags and their usage including trial sandboxes to test and play around to better understand the code.

Pinegrow gives you a visual interface to the html layout and positioning that you would write manually.
What I would do to really learn how the code is placed is to download and install Atom. Install the Pinegrow plugin for Atom and open Pinegrow. Do changes in the code and watch what happens in both Pinegrow and Atom. Alternatively you can open the html code explorer inside Pinegrow and do the samething but Atom is easier to work with and explore the code directly.


#6

You need to really understand HTML and CSS. As you know from not understanding the basics, you are running into walls that do not exist when you have the basic knowledge and understanding down.

There are really great courses on Udemy.com for less than $10 that will get you up to speed in less than a day. Alternatively you can piece meal it via Youtube and search engine queries for the exact issue you are having at the moment with your code.

All Pinegrow does is give you the visual interface to the code, understanding it that is on you to learn yourself.

From what you have been saying, this is not a Pinegrow issue it’s lack of knowledge of basic html and css.

Positioning of elements is done with CSS and to some extent with the physical positioning of the tags, embedded tags and overall page structure. There is no ONE way. The design of the page structure will guide or deter positioning elements, it is not as easy as do 1, 2, 3. It all depends on the structure and how well it is designed.

If you share actual code you are working on, the code layout itself with us we maybe able to suggest some changes or give a pointer but this really is not a how to learn html / css community.


#7

Yeah…I’ve don’t that, Terry; & it doesn’t even show up when I preview the page in a browser. I opened up the Library…dragged & dropped a div (empty placeholder) onto a page (that already had a background image), defined the dimensions, then the background color (as white)…previewed it…& it’s not there.

(&…that seems to be the only choice…‘div’…doesn’t let you choose 'container;, etc. You make it sound so simple, but it’s not…I asked for some basic help; & no one has even said, ‘oh…you need a container & then other elements that reside inside that container…just go here & select this’…it’s like no one is even reading what I’m asking for. And the selections are not that intuitive/numerous…I can’t believe ‘div’ is my only choice under Grouping Elements…you say it’s not an app issue…I’m starting to think it is…very frustrated)

mark4man


#8

I just opened up a template in Pinegrow and did some editing real quick, this is not something I would use in a live site but gives you an idea. I took some content from your page you linked and really quickly mocked up something. I did not put much thought into this and spent little time on it really.

Created some classes and reworked a few things in the html to make the layout “similar” to what is on your current page.

Positioning elements is a combination of placing the html in the correct order and proper use of CSS.

This is a real fast mockup using one of the bootstrap templates.

The css WILL be different for flex based layouts but for something real quick the code sample below works and reflows based on screen size. It will NOT be perfect but for a simple layout it gives you an idea of what to do and where things can be placed.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Jumbotron Template for Bootstrap</title>
        <!-- Bootstrap core CSS -->
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="jumbotron.css" rel="stylesheet">
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
        <style>
            body {
                width: 100%;
                margin: 0 auto;
            }    
            .row {
                width: 100%;
            }

            .wlgr {
                width: 650px;
            }

            .wsmlr {
                width: 300px;
            }

            .fl {
                float: left;
                vertical-align: top;
            }

            li {
                text-decoration: none;
                display: inline-block;
                margin-right: 20px;
            }

            li a{
                font-size: 20px;
            }

            img {
                height: 250px;
                margin-right: 10px;
            }
            .jumbotron{
                height: 250px;
                margin-bottom: 50px;
            }

        </style>
    </head>
    <body>
        <!-- Main jumbotron for a primary marketing message or call to action -->
        <div class="jumbotron">
            <div class="container">
                <img class="fl" src="http://pinegrow.com/placeholders/img12.jpg" width="200" />
                <div>
                    <h2>BURLINGTON COUNTY AREA of Narcotics Anonymous</h2>
                    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
                    <ul>
                        <li>
                            <a href="#">Meetings</a>
                        </li>
                        <li>
                            <a href="#">Events</a>
                        </li>
                        <li>
                            <a href="#">Committees</a>
                         </li>
                        <li>
                            <a href="#">Unity</a>
                         </li>
                        <li>
                            <a href="#">ASC</a>
                         </li>
                         <li>
                             <a href="#">DOCs</a>
                         </li>
                         <li>
                             <a href="#">Contact</a>
                         </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <!-- Example row of columns -->
            <div class="row">
                <div class="col-md-4 wlgr">
                    <h2>Wecome to the BURLINGTON COUNTY AREA<strong> of Narcotics Anonymous</strong></h2>
                    <p>What Is the Narcotics Anonymous Program?</p>
                    <p>NA is a nonprofit fellowship or society of men and women for whom drugs had become a major problem. We are recovering addicts who meet regularly to help each other stay clean. This is a program of complete abstinence from all drugs. There is only one requirement for membership, the desire to stop using. We suggest that you keep an open mind and give yourself a break. Our program is a set of principles written so simply that we can follow them in our daily lives. The most important thing about them is that they work.</p>
                    <p>There are no strings attached to NA. We are not affiliated with any other organizations. We have no initiation fees or dues, no pledges to sign, no promises to make to anyone. We are not connected with any political, religious, or law enforcement groups, and are under no surveillance at any time. Anyone may join us regardless of age, race, sexual identity, creed, religion, or lack of religion.</p>
                    <p>We are not interested in what or how much you used or who your connections were, what you have done in the past, how much or how little you have, but only in what you want to do about your problem and how we can help. The newcomer is the most important person at any meeting, because we can only keep what we have by giving it away. We have learned from our group experience that those who keep coming to our meetings regularly stay clean.</p>
                    <p>DRUG PROBLEM? CALL OUR HELPLINE: 1-800-992-0401</p>
                </div>
                <div class="col-md-4 wsmlr">
                    <h2>Heading</h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
                </div>
                <div class="col-md-4 wsmlr">
                    <h2>Heading</h2>
                    <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
                </div>
            </div>
            <hr>
            <footer>
                <p>&copy; Company 2014</p>
            </footer>
        </div>
        <!-- /container -->
        <!-- Bootstrap core JavaScript
    ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
    </body>
</html>

#9

The code above is from the Jumbotron template in Bootstrap 3 category of New page or project window.

You will need to open it up and export it some where in your computers storage, then replace jumbotron.html with the above code.


#10

I read your posts. There are literally a thousand or more ways to design a page, which particular way do you want it? What type of layout? Flex, Grid, other? Is this a template for Wordpress or some other Content Management System? Are there any dynamic sections? How many columns? What content? How many images and where do you want them placed?

It is impossible to mockup something without details or sample code.

I do not know the version of Pinegrow you have. I am using the Professional version.

Ask a group of designers / developers how to create a mockup and you will get a different answer from each one. It is not a simple do this then that… 1 2 3…

In the end it is going to be how you want the content displayed and if there are any dynamic areas. Flex and Grid are two different layouts, you can mix them to an extent but you run into cross browser problems.


#11

Terry…

Thanx…but the site has to look exactly the way it does on my test server…which is why I went w/ Pinegrow in the first place, to rebuild that site, from scratch…to look exactly the same…& to have the app write the code compatible w/ all contemporary devices & browser resize.

I never told you guys this…but prior to this effort…I was looking for an app that would simply convert my code to up-to-date- protocol. I guess if worse comes to worse, I’ll have to hire someone to rebuild the code. Thanx very much for your efforts, tho; & for putting up w/ me & my lack of knowledge (& my frustrations),

mark4man


#12

Unfortunately, as others have said, you really do need to have a basic grasp of HTML and CSS to use Pinegrow effectively. This program doesn’t “write code” in the manner of a program like Muse or Webflow. Basically it allows you to drag and drop pre-written code snippets (components) from front ends like Bootstrap and Foundation, as well blocks from Bootstrap. If you haven’t tried using Bootstrap Blocks yet, you might give that a shot, because it basically allows you to drag pre-made segments, like headers, content areas, footers, etc, and place them on the page in whatever order you like. You can place the block on the page, and then look to see what Bootstrap classes have been applied to it, disable and enable the classes by clicking the “eyeball” to get an idea of what effect the class has on a block, and so on.

Pinegrow is not the most intuitive program in my opinion, because there is just SO MUCh packed into the interface, and it can do most things in more than one way. For example, you could change the width of a column by changing its class, by dragging it from the handle, or by editing the code directly.

It took me about a month of just playing around with the templates, the blocks, different website templates, reading the documentation, and watching all the videos, before I really started to feel like I knew my way around the program. I still have a lot of stuff I haven’t even touched yet, like the master pages, the CMS features, and creating your own blocks. I haven’t touched the CSS Grid tools, or the flexbox tools, either. I downloaded some of the free block sets online like chockablocks and pineblocks, but haven’t even tried to use them yet.

Nevertheless, I still managed to get a basic site built and up on the web for a client after a couple of months of really working with the Bootstrap Blocks part of the program… http://www.brigadepropertymanagement.com/

I’d suggest you persevere. Take the time to reacquaint yourself with HTML and CSS, and I think you’ll find that Pinegrow can do just about anything you want.


#13

Hi there @mark4man.

Well, basically, if you ignore all the stuff about code, blocks, pinegrow, blah blah and think about WHY it is you want to remake your site, you will find the glaring answer to your question.
and
realise you CAN’T… modernise your site from your 70’s print layout, AND ignore all the "modern stuff* if you want to actually get your site up to date -and have people actually USE your site.

The basic question is WHY? do you want to do this? - what is forcing you to do this?
if it needs updating for NEW users… er, your screwed with your current design concept!
THIS is the problem.

You CANT have fixed 1280 x 1040 etc because… over half your viewers wont even be able to view your site!
As they will probably be viewing it on mobile phones. and a myriad other problems.

So, the problems you are facing are not only the code/don’t want to code/ I just need it to look like this , sort of thing, but the actual DESIGN.

as you cant really view sites DESIGNED like that on a LOT of the current devices that … your users will be using.

So your up against a big bag of fail there.

The other users have given you some great advice and links to resources, and I get your adversity to having to wade through and trawl loads of stuff in order to have to do all this , just to modernise your site, but thats the problem.

its the WHY you have to modernise your site that is missed here.

You basically have the option of taking everyones advice and finding a middle way through their suggestions that works for you,
Giving up on that and getting someone else to do it ,
Or, sticking to what you already know/have.

… and maybe some other stuff :slight_smile:

but, it boils down to your design CONCEPT.

instead of thinking I need THIS LAYOUT… look at your mobile phone and think
RIGHT!
how can I make this information EASILY accessible and simple to navigate to the stuff I’m after on THIS device
then DESIGN THAT layout.

Over half your users may be doing this.

then make it funkier and add more stuff for bigger screens.
This is called Progressive enhancement.
it is the modern design principle for websites.
Build for little screens, then scale it up for bigger ones, adding more functionality IF NEEDED. not just for the hell of it.

the old way is …well, the old way is your current way! :slight_smile: no compromise for anything else.

the next generation was graceful degradation which,
frankly designs like yours, but it scales down successively to smaller screens, loosing functionality as the display screen gets smaller.

but now, we design for the small screen and add stuff later.

this involves break points for screen sizes and more technical stuff.
but the stumbling block for yourself and your current site seems to be,

Not your lack of coding skilllzez or desire to get stuff done, but , your actual design principles and WHAT you actually want this new site layout to achieve, over your old one, then implementing this design.

As your still starting with the old design mindset, and wanting it in the new modern stuff but not implementing current best practice, and new mindset, just wanting current technologies. Its going to be a bit of a fail really.

Your site will require redesigns for both User experience and function.
so give that a bit of thought first and THEN everyones advice might make sense to you , as they are explaining how to implement a MODERN site, based on MODERN design/best practice principles and tecnologies, frameworks etc, but all this advice is lost if you stick to the same design principles.

Your users browsing habits and devices have changed. So implementing new technologies, which don’t cater for this and adhere to out dated habits kind of defeats the object of your exercise.

Get your head around that first, then other peoples advice with regards technologies should then make sense as you will realise the WHY. then u can learn the HOW.

I think this is the missing bit between your requirements and their advice.
Also, you might then, very well see just how useful Pinegrow is as that wall you hit at the beginning with it is actually an overwhelming barrier of … POSSIBILITIES!

what a conundrum!

It is actually presenting you with a myriad ways of implementing best practice!
But that hasn’t been mentioned in your list of requirements yet, so it appears to be a barrier to you.

I hope this tangental information is of some use to yourself and those offering advice as it seems to be the missing bit in your update plan.

Also, I have NO Idea why your previous posts are flagged and hidden as they seem perfectly good to me.
Good luck