I am working on a GitHub 'readme' page for my GitHub profile I have this gif that I want to be off to the right but not too far over that it is excluded. GitHub seems to not let me use the padding style so I don't know how to do this. Note I am not very experienced in HTML/CSS so I'm trying my best. The line in question is the <img/> tag line.
code currently;
# Hi there i'm Hudson or ZombieKicker7! 👋
<img align="right" alt="GIF" src="https://cdn.dribbble.com/users/1292677/screenshots/6139167/media/5387dc7e035b3efe9d94516044de66a4.gif" width="400" height="300" />
#### I'm currently:
results;
image
However, if I remove the align="right" style it will just go to its normal place in the code like so;
image
I hope this is enough information to explain the problem if not please ask and I would try to provide a better explanation.
GitHub does not let you use CSS or JavaScript in README files or other documents that it renders. That's because allowing arbitrary styling or scripting poses a bunch of different problems and READMEs are designed to be simple.
First, scripting and styling can modify other page elements and spoof parts of the page, in addition to other security problems, so GitHub doesn't allow this for security reasons. GitHub automatically sanitizes anything that's rendered using this type of HTML pipeline for this reason.
Second, allowing users to customize the appearance of items on the site with CSS can make the site hard to use or hard to read. For example, people could make text too small or with too low of a contrast for most people to read, which poses accessibility problems. GitHub wants people to have a good user experience and is required by law to be accessible.
So you may be able to use the align attribute here, but if it requires any sort of CSS, it won't be possible. You'll need to either stick with mostly plain Markdown or AsciiDoc or similar, or put the content you want somewhere else where CSS is allowed.
Related
I am trying to display some photos on a page, and it is breaking the styling of the page. Here is an example. See on the right side of the page, the images are broken, and they actually get displayed over other HTML elements like an H2 tag which says "coming soon"
Example here:
http://www.comehike.com/outdoors/parks/park.php?park_id=15
Any idea how to fix this? The problem is worse on Google Chrome
The html markup is a bit confusing, for one they all use http://wwww reference but they are hosted on the same server. Maybe I missed something but you can probably use a local site path relative to the web page, something that would be simplified sort of like the following non working code example:
<span style="margin: 3px;">
<a href="hikes/hike_image.php hike_photo_id=&photo_path=img/hiking_photos/108_2/full_cannon2.jpg">
<img src="img/hiking_photos/108_2/small_cannon2.jpg"
style="border: none;"></a>
</span>
This would make for a faster load time, save bandwith, and just be plain more efficient in my very humble opinion. Usually one uses http:// in image links when they are on a remote site.
There are multiple broken images when I load the page, it seems maybe it is the script that generates the markup that is breaking the layout.
To fix this, I would rip out the whole image-generation thing and simplify the mark-up just to have it work 'statically', ie without scripts to output images and/or markup.
Then, once it works in a static manner I would attack dynamic output, though I rarely use such techniques because I feel most of the time they are overkill for the small projects I maintain.
Happy coding & good day friend.
Update:
Storing the image path in a variable for easy site-wide changes:
One (simple) option is to use good old php for your image paths. IE, in main script:
define('BASE_PATH',realpath('.'));
define('IMG_PATH', BASE_PATH . "/img/);
// to inlude an image::
<img src="<php echo IMG_PATH; ?> pic.jpg" />
This way, changing IMG_PATH would change all the img tags that use the variable, and by using BASE_PATH this would work even if you move or copy the site on a different host.
Look up basename() function the man and related functions for more tips and examples like this.
I have a site that wraps some user-generated content, and I want to be able to separate the markup for the layout, and the markup from the user-generated content, so the u-g content can't break the site layout.
The user-generated content is trusted, as it is coming from a known group of users on my network, but nonetheless only a small subset of html tags are allowed (p, ul/ol/li, em, strong, and a couple more). However, the user-generated content is not guaranteed to be well-formed, and we have had some instances of malformed user-generated content breaking the layout of the site.
We are working with our users to keep the content well-formed, but in the meantime I am trying to find a good way to separate the content from the layout. I have been looking into namespaces, but have been unable to find good documentation about CSS support for embedded namespaces.
Anyone have any good ideas?
EDIT
I have seen some really good suggestions here, but I should probably clarify that I have absolutely no control over the input mechanism that the users use. They are entering content into one system, and my page uses that system's API to pull content out of it. That system is using TinyMCE, but like I said, we are still getting some malformed content.
Why not use markdown
If your users are HTML literate or people that can grasp the concept of markdown syntax I suggest you rather go with that. Stackoverflow works great with it. I can't imagine having a usual rich editor on Stackoverflow. Markdown editors are much simpler and faster to use and provide enough formatting capabilities for most situations. If you need some special additional features you can always add those in but for starters oute of the box capabilities will suffice.
Real-time view for self validation
But don't forget to include a real time view of what users are writing. Self validation makes miracles so they correct their own mistakes before posting data.
Instead of parsing the result or forcing the user to use a structured format, just display the content within an iframe:
<iframe id="user_html"></iframe>
<script>
document.getElementById("user_html").src = "data:text/html;charset=utf-8," + escape(content);
</script>
I built custom CMS systems exclusively for several years and always had great luck with a combination of a quality WYSIWYG, strong front-end validation, and relentless back-end validation.
I always gravitate toward CKEditor because it's the only front-end editor that can deal with Microsoft Word output on the front end...that's a must-have in my books. Sure, others have a paste from word solution, but good luck getting users to use it. I've actually had a client overload a db insert thanks to Microsoft Word that didn't get scrubbed in Tiny. HTML tidy is a great solution to clean things up prior to validation on the back end.
CK has built-in templates and classes, so I used those to help my users format without going overboard. On the back-end I checked to ensure they hadn't tried any funny business with CSS, but it was never a concern with that group of users. Give them enough (safe) features and they'll never HAVE to go rogue.
Maybe overkill, but HTML
Tidy
could help if you can use it.
Use a WYSIWYG like
TinyMCE
or CKEditor that has built in cleanup methods.
Robert Koritnik's suggestion to use markdown seems brilliant, especially considering that you only allow a few harmless formatting tags.
I don't think there's anything you can do with CSS to stop layouts from breaking due to open HTML tags, so I would probably forget that idea.
Is there a way to embed only a section of a website in another HTML page?
Example: I see an answer I want to blog about, so I grab the HTML content, and splat it in somewhere, and show only that, styled like it is on stackoverflow. Basically, I want to blockquote the section of the page with original styling, if that makes sense. Is that something the site itself has to provide, or can I use an iframe and tell it to show only a certain element or something crazy? Open to all options, but I want it to show up as HTML, not as an image (that's really a last resort).
If this is even possible, are there security concerns I need to aware of?
Don't think image should really be last resort. You have no control over the HTML/CSS of the source page, so even if you craft a solution (probably by using JavaScript to parse out the desired snippet) there is no guarantee that tomorrow the site doesn't decide to change its layout.
Even Jeff, who has control over the layout of stackoverflow.com, still prefers to screen-capture the site, rather than pull in the contents live.
Now if your goal was to have the contents auto-update, that would be a different story. But still, unless you use some agreed-upon method of sharing content, such as RSS, your solution would be very fragile.
The concept you are describing is roughly what is called a "purple include" or "transclusions". There is a library out there for it, but its not exactly actively developed. Here's a couple ajaxian articles on it.
I'd recommend using a server side solution with Python; using urllib2 to request the page, then using BeautifulSoup to parse out the bit that you need. BeautifulSoup has a very flexible selection api with which you can craft heuristics for the section you are interested in.
To illustrate:
soup = BeautifulSoup(html)
text = soup.find(text="Some text on the page that is unlikely to change")
print soup.parent.prettify()
That way if the webmaster later changes the markup on the page, your scraping script should still work.
On client side <iframe> is the only practical option. It is possible to scroll it, but it might not work in the long term, because it's technically close to clickjacking attack.
There's also cross-site XHR, but requires opt-in from destination site, and today works only in few latest browsers.
Getting HTML on server side is easy (every decent web framework has ability to download page and parse HTML and you can use XPath/XSLT or DOM to extract bit you want).
Getting styles however is going to be tricky – CSS rules may not work with HTML fragment taken out of context. You'd have to parse CSS, extract and transform rules or use browser and read currentStyle of every node.
Obviously you have to heavily filter HTML you extract to avoid XSS. It's harder than it seems.
If you don't need to automate this, a good HTML+CSS WYSIWYG editor might be able to extract content fragment with styles.
That sounds like something that IE8's Web Slices would be perfect for. However, it's only available in IE8, and the site of origin would have to implement for you to be able to take advantage of it.
I've been given the task of doing some work customizing an artist's space in MySpace. It seems that you sort of hack the HTML you want into your edit profile page (which has several empty boxes). The MySpace page, it seems, is already HTML so you can only hack into that. Suggested "tweaks" include incomplete HTML code (e.g., a <DIV> tag without a </DIV> tag to supress certain sections) and stylesheet pieces that you can "place anywhere" (meaning somewhere on your edit profile page). And the best one is that sites that offer layouts say, "Layout Code - Copy and Paste the code at the bottom of your 'I'd Like to Meet' Section!"
This cannot possibly be this lame, can it?
Is there any coherent guide to customizing MySpace pages for programmers/HTML designers? Is there a coherent DOM (including things like .contactTable etc.)? Could it be that all the tweaks are just hacks people have figured out from looking at the generated HTML?
Thanks!
This shouldn't be too hard if you whip out Firebug and do a bunch of "Inspect > click on page > edit CSS in Firebug's editor" work to see what you can learn about the structure of the page. Then mock it up to roughly how you want it and note down which elements and which styles need work and figure out how to get that set up in the profile editor.
Try approaching this from the point of view of a challenge. On the upside, MySpace allows you access to the DOM so you can screw with all sorts of things. On the downside, their choice of HTML composition is somewhat arguable.
You hit the nail on the head with your final question. The MySpace DOM is a disgusting set of nearly-infinitely nested tables. Normally, people edit the page by finding those sites that let you "cut and paste" and use their generated CSS since they've already done the hard work for isolating the proper elements.
Good luck... unfortunately, you are really going to need it. =/
Your fears are correct. MySpace "customization" is a bunch of hacks. Good luck.
You can a lot of information in this link: http://spiff-myspace.blogspot.com/
I think the same of the others answers: customize MySpace page is a difficult and complex task.
Regards,
The Separation of Layout and Content is the domain of CSS and HTML - so far well understood. Now about separating...
I'm looking for hints and Best Practices to get started with the task of providing a "skin" or "theme" for a content management system.
Background:
We are starting to embrace a Portal Server/Content Management System and are starting to change the look and feel to match our needs.
Our designer has so far mainly worked with full control over HTML and CSS, tweaking either one in order to get pixelperfect layout. With adoption of the cms there's a lot precreated HTML (very semantic, almost no tables :) that needs to be skinned with CSS and Images. Though it is possible to change the HTML fragments, I'd prefer to do so only as a last resort.
As this provides the challenge of "how to get started" my question is about any tipps how to proceed or articles that can help managing or organizing this task - e.g. best practices in designing, how to slice this task or what tool to use.
It seems bad practice to just save a dynamically generated page to disk and make changes locally. This would be somewhat ok for the CSS files but changes to HTML elements must be retrofitted to the fragments that they are generated from. I'd like to keep this out of the designer's realm if possible. Also, the thought of Dreamweaver (or any similar tool) making implicit tweaks to the HTML structure is frightening for me.
For the curious: The mentioned CMS/Portalserver is Liferay, but the question is really language- and tool-agnostic.
Edit: FireBug (as Josh suggested) is awesome for trying on-the-fly changes to css. Is there more - either in the area of tools or in-process and self-organization?
If you're looking for practical examples of separating style and content, then I'd suggestion the CSS Zen Garden. Trawling through the HTML and CSS is inspirational and enlightening and should help with what you're trying to do.
My #1 tip would be be to make everything as semantic as possible and use lots of classes and ids to hook your styles onto.
Usually, Whenever I am in a situation Like this, I bring up the page in FireFox, inspect the different elements using FireBug and see exactly what css is applied to them. THen I'l just modify the existing css until I get what I like. You can even play around in firebug and modify the CSS without "saving" those changes.
Have look at CSS Tidy, we normally use this to clean up the CSS and reorganise for development and production. However, I personally prefer writing HTML/CSS by hand before using this. It is just a matter of individual preference I guess.