The Lounge - CodeProject

This is down to how html works. Html elements are placed in a "flow" and the browser "fills" the document space with how those elements flow in. Imagine a glass box that you tipped various amounts of different coloured sand into. Now imagine putting the same sand in a glass box that is wider, or narrower. The red sand might have been an inch from the bottom in the wide box but 2 inches from the bottom in the narrow box.

If you "just want this button up a bit" then you have to take it out of the flow. So if you just want red sand two inches from the bottom then take it out of the sand you flow into the box then stick the red sand to the outside of the box two inches from the bottom. Now no matter the size the box your red sand is always where you want it as it isn't part of the flow. Great....but now resizing the box (your browser) probably doesn't have all the effects you want. Let's say the box is only 1 inch tall and your red sand is "two inches from the bottom"....it's no longer in the view plane.

So it is indeed possible to do what you want by taking elements out of the flow (the css term is absolute positioning) but it results in html that is very easy to break. So instead designers use tricks that ensure the elements look good no matter what container they are flowed into.

Thanks for the replies.

F-ES Sitecore wrote:
This is down to how html works. Html elements are placed in a "flow"

You know what else flows? Sewage. Strangely enough...

Did you ever see history portrayed as an old man with a wise brow and pulseless heart, weighing all things in the balance of reason?
Is not rather the genius of history like an eternal, imploring maiden, full of fire, with a burning heart and flaming soul, humanly warm and humanly beautiful?
--Zachris Topelius

Training a telescope on one’s own belly button will only reveal lint. You like that? You go right on staring at it. I prefer looking at galaxies.
-- Sarah Hoyt

I use VS for all web development. I mostly work in the source view especially for layout, otherwise you get a bunch of auto-styles added and lose ~~control~~ your mind.

FWIW, many layout issues can be solved with tables. Smile | :)

"Go forth into the source" - Neal Morse

Static or dynamic? If static, WYSIWYG (with half a plan) has you up in a day if not hours. Changing doesn't require a brain refresh.

The more popular Hosts have excellent tools.

It was only in wine that he laid down no limit for himself, but he did not allow himself to be confused by it.
― Confucian Analects: Rules of Confucius about his food

What editor did you use?

These days with VS Code + Angular I miss having an editor.

I used to use HoTMetaL Pro.

Now I just use the editor that came with the hosting stuff. Poke tongue | ;-P

We won't sit down.
We won't shut up.
We won't go quietly away.

YouTube, and My Mu[sic], Films and Windows Programs, etc. and FB

You didn't say what type of project you are working on, which matters a little bit.
If you are using Visual Studio Code, or Visual Studio "Classic" - the editors are a bit different.
If its an Angular Project, you can get a lot of help using Google Material Design.

Generally what I do is start out with the standard empty page (HTML)
(I think this is a repeatable pattern you can refine)

Then one by one, fill in the fields. If the elements are out of alignment,
you can adjust, using nbsp;, if you are not sure of the CSS...

take it one field at at time, and initially ignore the alignment

I suggest you make this base template your own, by using it, and adjusting it to your liking.
Moral of the story - You need a base Template that you can use over and over again.

HTML

<!-- Main Landing page rendered with  Index.HTML-->
<table class="table" [mfData]="MyList" #mf="mfDataTable" [mfRowsOnPage]="7">
    <thead>
        <tr>
             <th>
                        <!--Field 1 -->
            </th>
			<!--Field 2 etc...-->
            <th>
            </th>

            <th>
                <!--Field 2 etc...-->
            </th>
            <th>
                
            </th>
            <th>
                
            </th>
            <th>

            </th>
            <th> Update</th>
            <th> Delete </th>
        </tr>
    </thead>
    <tbody>
        <tr>
        
        </tr>
    </tbody>
    <br/>
    <br/>
    <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        <td>
            <button (click)="addRiverRun()" class="btn btn-secondary">Add NewRiver Run</button>
        </td>
    </tr>
   
    <tfoot>
        <tr>
            <td border:0></td>

            <td></td>            
        </tr>
    </tfoot>
</table>

Keep It Simple, keep it moving.

modified 30-Jul-20 13:28pm.

Its an MVC EF6 project so i can't use vs design view but have to wonder, try, swear repeat.

I really Struggle with HTML and JS. I am old.

Just FYI - I think angular is much easier than VS.

You add an import to the project in Visual Studio Code - and you essentially get 99% of this stuff
for free.

The only thing being the template I sent you.
This is not easy dude.

Keep It Simple, keep it moving.

(Editor's note: I moved your example into a PRE block for readability)

DumpsterJuice wrote:
you can adjust, using nbsp;,

I hate being a pedant about things like this, but please, no, never this. I get where you;re coming from (just get it done!) but aligning / layout is such an important (and relatively simple) skill to learn.

OK, while I'm at it, don't use tables. Use flexbox. I used to use tables because I specifically wanted a grid layout and browser support for divs and floats and all that was terrible. These days (and for a long time now) flex works on everything you'd need and it means your layout works on the desktop and your phone.

No sooner do you have something working well, someone will say "this looks rubbish on a phone" and you find yourself in a deep hole. Learn the basics and you'll never look back.

Just my 2c,

cheers
Chris Maunder

Wygiwys (what you get is what you see) is the norm. Wysiwyg seems like a distant dream. Smile | :)

I don't like wysiwyg in general.

I took over a project from someone who conceptually needed it. Buttons and fields didn't quite line up, so he "fixed" them with spaces and whatnot. It wasn't perfect, did not adapt well to different fonts or window sizes or use as controls, and the code behind it, which he didn't look at, was a horrid mess. It took me a long time to fix the HTML so that it looked good every time and was easier to add fields and buttons or otherwise modify without breaking it all.

We carefully select only the finest, highest quality DIVs, SPANs and other HTML tags through our exclusive network of boutique HTML tag suppliers. Each piece is checked, unit tested, and inspected for imperfections before being sent to our development team. There, they carefully sort and match all tag to create only the best sets of open and closing tag pairs. They fit so well you couldn't even slip a WBR between them.

Once the basic structure is built we employ artisan coders with only the finest arm tatts and beards. All Javascript is hand rolled, hand crafted, and optimised in a three stage process.

There are no comments. Ever.

All CSS, fonts, sprites and the finest Corinthian SVG fonts are sourced and imported from Italy and Spain. Assembly is carried out in temperature controlled caves in the foothills of the Icelandic plateaus. The crisp air, low noise pollution and constant temperature ensure consistent build process free of imperfections.

Deployment is, again, all done by hand by our white-glove deployment team in a positive-pressure clean room.

cheers
Chris Maunder

When it comes to web development, I definitely would not be considered a pro. Generally, what I create is not for public facing systems. I do more "internal use" systems. My stuff is so simplistic, that I don't bother with WYSIWYG.

I stick with the tried-and-true layouts for the general, functional page flow using DIVs and CSS; header, footer, left/utility pane, right/content. When it comes to forms, however, I just tell all the <table> haters to take a long walk of a short pier, and do it in the old school way that just plain works.

If I had to worry about screen readers, I might put a little effort into doing a form without the tables, but that has never been a requirement for any of my projects. I usually have to concern myself more with multi-language support.

Money makes the world go round ... but documentation moves the money.

That's the one I use, but I'm not a professional web designer, just a programmer that needs a website.

NONLINEAR

The original idea was an anagram of RAN ONLINE.

One of you lot better pick it up from here, because I can't do tomorrow.
And no, I never listen to "boy bands". Only know about the guy from some scandal my DIL talked about.
Crowded House, however, is very listenable.

Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012

Um ... Greg got that nearly two hours ago ... so you should probably tell him he's up tomorrow! Big Grin | :-D

"I have no idea what I did, but I'm taking full credit for it." - ThisOldTony
"Common sense is so rare these days, it should be classified as a super power" - Random T-shirt
AntiTwitter: @DalekDave is now a follower!

No worries...I'm sure you'll "Oi!" me. Laugh | :laugh:

Robust Services Core | Software Techniques for Lemmings | Articles

You fooled me. The email I got of your original answer was missing one word. The answer. All I got was your "Never heard.." remark.
I'm guessing you posted the message, then edited it within the 5 second rule (which is longer than 5 seconds).
So when I came back a couple of hours later, I didn't bother to check your message, on the basis I'd already read it...

So yes, all yours for tomorrow (well, today in this timezone Poke tongue | ;-P

)

Cheers,
Peter

Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012

Yes, I think I did edit it.

Robust Services Core | Software Techniques for Lemmings | Articles

I wrote some articles, got a lot of thank yous, which warms my black little heart.

Finally learning the TPL/TAP/Task framework provided me with some great fodder for articles.

I loved learning it, I loved writing about it, and I love the responses I got.

So now I want to turn my sights on some other dark corners of .NET, but I'm wondering if I should start with diving into the stuff behind expression trees or something else.

I'll take requests at this point, since I've shelved the project I *was* going to work on for reasons.

Anyway, thanks to anyone that responded, voted, whatever this month as it put a smile on my face.

Real programmers use butterflies

I was wondering what happened - I thought maybe 'work' got in the way

Quote:
expression trees

are good - Jeremy Likeness was also working on such eg Dynamically Build LINQ Expressions .. one of these days I hope someone can go from string -> parser -> expression tree dynamically ..

Else, I'm sure you'll find some mischief to get into Laugh | :laugh:

I saw that, and it's what made me think of it, though I was more thinking of doing some exploratory articles vs. producing a tool/component. Smile | :)

I tried the exploratory approach to my articles this month and got a lot of good responses so I think I'll try it again.

Real programmers use butterflies

Oh as far as the service project - I'd have to rewrite Microsoft's ServiceBase class to make what I wanted do what I wanted, how I wanted, and I'm not sure it's worth it. The idea smells funny, so I'm going to stew on the design some more and see if I can't work out a better option.

Real programmers use butterflies

Welcome to the Lounge