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; }
Related
can you help me understand what bootstrap is? I know people is it for styling pages but can you clarify it to me? A big company like Twitter, Facebook or YouTube can use it?
Bootstrap is a very nice set of "styles" for all elements of any webpage. With it, a developer can focus on what they want to build (i.e. the elements) and very easily apply all the styling (including a lot of the colours, positioning, layout, movement/javascript) by simply adding few lines of code at the start of the webpage and adding a bootstrap class to an element, or wrapping parts of their webpage in a <div>.
Here is an excellent example of a very basic site that is made to look professional very quickly using very simple bootstrap. Click on "full page demo", then view -> view source to see the source code.
You can see some classic bootstrap classes like
<div class="jumbotron text-center">
and
<div class="container-fluid">
Bootstrap is a free and open-source front-end framework developed with css and javascript.
For styling and other change of the html, we make CSS classes and ids. And the main work we do in the css file and js file . But in bootstrap there is already some files which have many built in classes and ids .
After adding bootstrap to a html file we can do many work by only calling those classes and ids .
like ,
<p class="text-center">Center aligned text on all viewport sizes.</p>
only calling the class "text-center" we can align text center . No need to do any other css .
Many big company like Twitter, Facebook or YouTube can use it. On the other hand some make their custom files like bootstrap.
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
I've been looking all over the Internet for a tutorial on using the Scott Kellum's parallax technique, but didn't find any. I've seen his example on CodePen and for the life of me couldn't figure out how to position and size elements on the page properly.
Let's say that I have a few simple sections as follows:
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
<div id="section4"></div>
Inside each section I have some content (could be any HTML). How would I go about using Kellum's technique to make backgrounds "overlap"? I'm looking for a tutorial on actually using the technique. Thank you!
This is not a very good answer, but if you want a fairly simple way of doing parallax check out skrollr. All you have to do is link the source and initialize it, and after that it is as simple as adding parameters to your elements. Also there is a very good tutorial if you just search skrollr on Google it will be one of the top hits.
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.