So here's the website that has the container that I want to emulate: container
Here's the textbox specifically:
Here's what mine looks like:
They gave their css file and I looked at their html source code. I got the part in the html and css that pertains to the demo text and style. Here's all the code in fiddle
I'm pretty new to web programming, just a couple weeks in. And the css for the demo text looks daunting. I'm trying figure out how mine is different. Can anyone tell me what I need to do to fix my container to look like theirs? Thanks
Here's a fixed version: http://jsfiddle.net/dain/XJqvG/6/
The main problems were:
you haven't included the required JavaScript and CSS files, this
custom scrollbar requires the libraries as explained at the top of the article
you have to set a fixed height on the sample element
For some reason it still doesn't want to scroll with the touchpad, but that might just be something with JSFiddle.
Related
can anyone help me to make a sticky section which will be like this https://stonescorner.denta.com.au/ (mobile version) example site. i would like to create a same section with 2 buttons on swipepages.com but i am not sure what would be right custom css and html to use on the site to make something like this. anyone could help me on that. have a great day!
Regards
Jahidul
i would like to create a same section with 2 buttons on swipepages.com but i am not sure what would be right custom css and html to use on the site to make something like this.
You will need to use the positions property of CSS. Either position fixed or sticky.
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 in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.
I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.
Any pointers would be appreciated!
The site this can be seen on is http://www.darkmatter-designs.com/
As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>
I know, it's weird.
I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it..
But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..
I'm looking for a good css technique to use nav tabs that look exactly like this:
I have a div with a logo that has a background and I want the tabs to overlap exactly like in the pic.
I don't want to use drupal's entire html and css structure as I need it to be lightweight. Does anyone know how to do that?
I'll point you to this website: http://pea.rs/ for some good CSS design patterns.
And more spefically this page: http://pea.rs//navigation/horizontal-tabs
There's a pretty good modern browser version of what you're looking for, sans filling in your background and logo.
Of course, border-radius isn't supported in IE8 and below, so you'll either have to be ok with that or use one of the many round-corner techniques.
Hope that helps!
Dumb question with a simple answer, I think.
I am building a site that has a completely different layout on one page from the rest. On one page, the design requires a liquid vertical layout, so I need the following code: *{height:100%;}On the other pages I just want the default height.
I tried to add a class to the html tag, which works in the html, but not in the CSS file. I tried:
*.myClass
and
html.myClass
but it doesn't seem to work.
I can't seem to find any info on this online. Is it even possible to add classes to the html tag?
I am using wordpress, so I can easily check to see which page I'm on and add myClass.
I guess I could also use #import to get a different style sheet based on the page I'm on, but that seems like a longwinded way of doing things.
How can I specify height:100% as a value of the html tag on specific pages only?
Can anyone point me in the right direction?
Thanks,
J
Perhaps .myClass, .myClass body {height: 100%}?
It is indeed possible to add a class to the <html> tag.
Live Demo (see code)
This will work, because I just applied this in one of my projects earlier today. :)
html,body {
height:100%
}
If you have pages that require the default height, then don't load this css style. You can place it in a separate CSS file.