|
When deep in the pit of "why won't that button move up just a bit" and googling solution awash with divs, css margins and other cave drawings, I think there must be a way to grab elements from a tool bar and place them where I want then have compiler make it all just work.
I found one in WYSIWYG Web Builder and was able more or less to do what I had envisioned.
So, all you top gun web devs, do you use this stuff or hand roll it still because?
TIA
|
|
|
|
|
No. I use VS (various versions, or occasionally VS Code for PHP development) but NEVER use it in Source / Split view. When I need to tweak / debug CSS I just load the page in Chrome and use dev tools to inspect the applied CSS, add rules, adjust values, and even tinker with the HTML. Then copy/paste changes back to the source. The downside with that is I have to remember all the elements where I changed any CSS values; to make this manageable I tend to work in very small "increments" updating the source CSS / HTML frequently and reloading the page (all very well, of course, unless the page is the result of a complex or non-repeatable transaction).
But then I'm a technophobe; I tend to shun frameworks and a plethora of "tools". My trustiest tool is Notepad (the original version, not ++ or any other enhanced version).
|
|
|
|
|
DerekT-P wrote: Then copy/paste changes back to the source. The downside with that is I have to remember all the elements where I changed any CSS values; to make this manageable I tend to work in very small "increments" updating the source CSS / HTML frequently and reloading the page
You may want to explore the Filesystem tab in Chrome dev tools: it'll save your changes to the original CSS file.
Might just be for when you're working on a localhost webserver, but I've found it pretty useful.
|
|
|
|
|
I use editors first because I hate CSS layout, and a good designer takes care of a lot of the boilerplate though I usually have to go back and modify it by hand. Honestly, I prefer when the design team can produce a mock of the page all laid out and then I templatize and make it dynamic. But then I'm not a web developer and wasn't by trade, though i had to wear a lot of hats at some companies.
Real programmers use butterflies
|
|
|
|
|
Lately I use Visual Studio Code... time ago I used Notepad++.
A lot of years ago I used something similar to Dreamweaver (or how that would have been spelled), but using Chrome, Edge... tools to debug worked very well for me.
Of course I've suffered what is intended to with CSS, but I've done it that way...
PS: I'm not in any way a top gun web dev... I have done some web pages, but always as side jobs or because it was needed to do certain task.
![Beer | [beer]](https://codeproject.freetls.fastly.net/script/Forums/Images/beer.gif)
|
|
|
|
|
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.
|
|
|
|
|
|
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. 
"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. 
|
|
|
|
|
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.
<!--
<table class="table" [mfData]="MyList" #mf="mfDataTable" [mfRowsOnPage]="7">
<thead>
<tr>
<th>
<!--
</th>
<!--
<th>
</th>
<th>
<!--
</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. 
|
|
|
|
|
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! 
"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. 
|
|
|
|
|
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 )
Cheers,
Peter
Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
