I am here to ask a couple of questions if I may.
I understand that the CSS is for styling, I have some method which works to a degree i.e text changing but this seems to be limited.
I have about 600 html pages that have some exact content on the pages.
I would have liked to be able to have a CSS or text doc which can be altered to change all html pages in one hit.
Though I am limited to html and css only, other options are not available to me.
I would one like to change blocks of text that is some volume, and images if possible, so I don't have to redo every page as it's very time consuming.
The other issue it needs to be cross browser compatible.
I know there are some great minds out there, I am willing to give any of them a go...
You should be able to use the css rule, "content: <desiredTextOrAttribute>"
https://www.w3schools.com/cssref/pr_gen_content.asp
Suppose you want to be able to set the title on all 600 pages to Company X:
HTML:
<div class="companyName"/>
CSS:
.companyName:after {
content: "Company X"
}
Here is a fiddle: https://jsfiddle.net/onm30rdn/1/
Of course, you won't be able to dynamically change this, and I think Javascript would be a way better solution in general. But this will work.
Assuming you can make your own custom stylesheets with css, you might get some love from pseudo-elements, such as ::before and ::after.
https://www.w3schools.com/css/css_pseudo_elements.asp
Basic idea is that if you can select an html element reliably, you can make a virtual element next to it for the browser to display. The code below would append "hello" before the existing text.
HTML
<body>
<p class="foo">World</p>
</body>
CSS
.foo::before {
content:"Hello ";
}
Result
Hello world
Related
I do hate to keep asking questions. I have been trying to add code to my website. No matter what code I add, none of it works. I have changed the names of the CSS names thinking that would work but it fails.
Currently I am trying to add in some image gallery blocks. I am on w3 schools and it works.
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery
I bring the CSS and code to my website and it looks like this:
https://postimg.cc/image/ifn4dsqrr/
I have tried so many card and block codes and they all either mess up my homepage or ruin the css and I have to revert back to the previous version.
Over the last 2 days I have spent 6 hours trying to get 4 little responsive blocks with image background and text overlay to simply work in between 2 banners.
Here is a link to my test store where I am building out a homepage:
http://newdev-vitavibe-com.3dcartstores.com/
I am determined to learn why. I opened up a request to pay someone to build this homepage for me. I had lots of offers but I really want to learn how myself.
If you are willing to use bootstrap you could put them in containers, I linked below the documentation for this. Bootstrap will make your life a lot easier when it comes to grids, saved my butt plenty of times.
https://getbootstrap.com/docs/4.0/layout/grid/
Inspecting the html of your site, a saw that what you want could be accomplished with the following html structure
<div id="fullWidthBlock" class="fullWidthBlock2">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div id="fullWidthBlock">...</div> <!-- all the div.gall where here -->
Note that the <br/> between the two div#fullWidthBlock where removed.
And dont repeat the id attribute it is meant to be unique in each html document.
Thats the page with the changes:
Take a look at "!important" keyword in CSS. You should use it like that:
#smth { color: red !important; }
I am looking for a way to format a section of my page so users can easily copy a small block of text while on a mobile device.
Are there any classes in Bootstrap, some HTML, or a way to format my CSS to make this easier. I know browsers except IE don't like javascript copying text to the clipboard.
Since your question is specific to HTML & CSS for mobile, here are some thoughts.
I find that having large hit areas available on the elements you want the user to interact can help to start with. E.g. paddings on <p>s for example. So when a user starts tap-holding to initiate text selection, it'll more likely fall on the hit area of the paragraph. (A nifty trick is replacing margins with paddings!)
Try to make sure your content that is selectable follow a natural content flow box model. No weird floats or absolutely positioned content or otherwise content that might confuse the selection widget. Make it as document-like as possible!
Read up on the ways that you can control selection, e.g. user-select CSS property - https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
You might want to disable text selection on elements that don't make sense, to help make text selection cleaner on the parts that matter.
Large font sizes are obvious, but maybe not so obvious is very large line-heights is fantastic for making text-selection a little less awkward! It can improve readability greatly on the side as well, my favourite for body text is line-height: 1.6;.
If you use viewport meta tag, make sure they can zoom in to fill the text/paragraph edge-to-edge comfortably when they want to. This can help a lot to get up close, to do the text selection and get tactile with your content.
However, if you do want to try JS, then I would recommend clipboard.js: https://clipboardjs.com/
Think also about what your users want to copy ahead of time, you might be able to do some analytics and allow users to highlight common text. This is done on Medium by the way to lead as a good example.
You could make it so that when they click on the element, all the text is selected automatically, so all they had to do, assuming they're using a modern mobile device, is long-tap and press copy to clipboard.
document.getElementById("TextParent").onclick(function(){
fnSelect("TextParent");
});
So your html would look something like the following:
<div id="TextParent">
Click anywhere in this div to select this text!
</div>
Adding to this, Nexii Malthus has a good point in regards to the hit areas on mobile phones, so maybe try to add some extra padding to the div.
You should definitely try https://clipboardjs.com/.
<!-- Target -->
<div id="bar">Mussum ipsum cacilds...</div>
<!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
Copy to clipboard
</button>
and activate it using following javascript new Clipboard('.btn')
Look created sample https://jsfiddle.net/gevorgha/fbeof421/
Note
There are some compatibility issues with iOS devices that do not copy target on trigger action, but it selects target and allows user to copy it manually.
I asked a question like this yesterday, but I seem to not understand much about the reason why the css shows this location. For example:
example1 http://puu.sh/k5r57/6e59005bdd.jpg
Selecting an image further down the DOM, suddenly selects the topmost banner, but selecting its children selects location where I would have expected that to be judging by the flow of the box-model.
Or,
example2 http://puu.sh/k5rkp/b07bdcd576.jpg
Highlighting the parent div 'Requirements' does not require the entire contents the box would originally select.
Is it something in the CSS why I don't understand how the box model in this website works?
CSS Zen Garden is a CSS experiment site. The whole point of it is for authors to take a single fixed unchanging HTML page and use CSS to restyle it; the idea being to demonstrate how much power CSS has even without you having to modify your HTML code.
Some of the page designs created this way for the Zen Garden site look wildly different from each other, and they achieve that by using all kinds of CSS tricks to move elements around the page.
In short, the behaviour you've described is pretty much what I'd expect from the CSS Zen Garden site.
It is intended for you to learn from; if you're struggling with it, try reading the CSS source code; there may be useful comments there.
Use a div with class 'clear' before closing the tag like below
In this the clear should have the style like below
<style>
.clear {
clear:both;
}
</style>
<div>Hello JDudez
<div class="clear"></div>
</div>
I'm trying to setup a preview box for an html editor on one of my pages. I made a standard <div id="preview"></div> style container, in which I occasionally drop my html source, and that works fine enough.
The problem is, bootstrap's styles are seeping into the container and 'poisoning' my preview. I see two solutions to this:
Move preview into an iframe
Apply some kind of clear/reset css to the element where I host the preview
eg:
<div id="preview" class="clean-css">
</div>
.clean-css {
div, p: {
border: 0;
margin: 0;
}
/* a bunch of reset css stuff here */
}
I consider iframe a clunky solution and sort of a last resort. I'd much rather keep my stuff on one page. So I started looking into various reset css stylesheets. Unfortunately, it seems most of them are geared towards equalizing differences between browsers and don't reset all styles to their bare values (for example, blockquote keeps its bootstrap styling).
I can keep googling for a better reset-css stylsheet, or I can try to fill in the holes in the stylesheet I have now. But before that, I figured I should ask more experienced frontend devs what's their experience with this.
Is there a more comprehensive clear css solution out there?
Is trying to clear up bootstrap a fool's errand and I should just go with the iframe instead?
After a few months of trying to make reset CSS work, the answer is: just use the &$^* iframe.
There are just too many potential problems and pitfalls, from balancing reset's class precedence to the fact that any CSS will just roll over legacy color / positioning attributes (which are still relevant in email authoring).
iframe is a headache to integrate into the page, but at least you know it can be done, and once it is done, it stays done.
I think the ideal is to use CSS purely for the layout and presentation, and HTML for the content. But let's say, the company wants to change a "Related articles" box from the bottom of the page to the top of the page. In such case, won't using CSS alone be not an ideal solution, but is better to alter the HTML as well? So as things are right now, HTML still takes a role in the page layout and presentation? Thanks.
Things still appear in the same order as they are in the html - it's not as restrictive as that as we can use absolute and relative positions, but those are undesirable - it's better to use to dom flow to handle placement, and that means yes, you should move the node in the html.
As Jason said, CSS is for styling the content, the content itself and its order is defined by the data (html), as order is necessary for the context of information, so it lies firmly in the 'data' part of what we do rather than the 'display'
EDIT:
I should say this: If you want your data to be totally independent of the display, you should consider defining your pages as xml only and using xsl to define the layout. xsl combines with css to completely abstract the display away from the data.
It does on two levels:
Firstly, the order of elements is still important. CSS floats are used a lot for layout but they also require elements to be in a certain order to get things in the right place. For example, lets say you have two buttons:
<input type="button" value="Click Me">
<input type="button" value="No, Click Me!">
These are next to each other. Lets say someone asks you to move the second button to the far right. This is how you do it:
<input type="button" value="No, Click Me!" style="float: right">
<input type="button" value="Click Me">
If you don't do this, the second (floated) button will appear below the other.
The second way HTML is still important is that there are still things that you need HTML tables for that can't be done in pure CSS at all, in a browser-compatible way (meaning IE6 support generally) or easily. This isn't something the pure CSS zealots like to hear but, like it or not, in the real world it's still true.
This is especially true with HTML emails. If you thought browser support for CSS was bad, mail program support is so much worse. Generally speaking you avoid CSS altogether with HTML emails and just pretend like its still 1999.
HTML still defines the hierarchy for elements.
HTML divides your page in logical sections. CSS then applies a certain look/feel/style to those sections.
If you want to change your page layout to include a section inside another one, you have no choice but to modify your HTML because HTML has a role on page layout.
You can actually move blocks around using nothing but CSS. The compromise always boils down to how good your CSS skills are and how much compatibility with older browsers you're after or care about. There are limits to what CSS can do, so yes, HTML definitely still has a role to play.
it is possible to change the "source order" of divs or use css to change positions. But if its more practical to just change the html, then there's no other way round it. At the end of the day, if its more important content then the source should reflect it for semantic reasons.