The Lounge is rated Safe For Work. If you're about to post something inappropriate for a shared office environment, then don't post it. No ads, no abuse, and no programming questions. Trolling, (political, climate, religious or whatever) will result in your account being removed.
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.
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?
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
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.
<!-- Main Landing page rendered with Index.HTML--><tableclass="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><tdborder:0></td><td></td></tr></tfoot></table>
(Editor's note: I moved your example into a PRE block for readability)
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.
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.
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.
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.
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!
"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!
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 )
Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012
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. 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
Last Visit: 31-Dec-99 18:00 Last Update: 12-May-21 8:59