I am practising creating websites and I have found a template which I am working on right now.There is a fancy scale bar on the page.Anyone can help me??I do not know how to create this,it looks hard to create.I have tried several times and I failed.
The image of scale bar is right here
The <meter></meter> tag should be okay for this, though you'll need to style it to get the effect you want. This site can give you pointers on that.
Related
I do a lot of work during the day and I program in quite a few languages so doing CSS work is a little tough because i don't specialize in it. I have run into an issue where wordpress no longer works for me so I have to do mysite on my own. can you guys point me to a web resource that will show me how to get a a look of a multi-level horiz. menu at the top of my homepage similar to the one found here?
https://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/
I got that link from a similar thread here on S/O.
I copied all of the code there and put it in the appropriate CSS and HTML files, but I do not get the multi-leveledness. I only got a vertical menu on the left side without color. I'm a source coder, and generally automate things and I'm horrible at designing anything. I draw stick people and that's as far as my artistic talent goes. so CSS falls into that same boat. thanks!
If you really only got a vertical menu on the left side without color, that sounds like none of the CSS styles are actually taking effect. And since none of the elements have classes from what I can see, it sounds like your CSS isn't actually loading or being applied to the DOM. How have you included the CSS rules into your website? Before trying to use a different demo, try to get this specific one working by looking at your HTML structure and figuring out how to get the styles to grab onto the right elements...
So I've been tinkering with a REALLY simple web page (and this is why this is painful for me - it's a simple page) and I've been trying to make it responsive. I sort of had it looking right on a mobile screen, but the more I tweaked my code, the worse it got on other sizes.
So..I really hope that I'm not asking TOO much - but again the page is super simple, so this might be simple to answer..so I'll just jump in and ask a few questions :/
I want the page's big call to action image to disappear on a phone screen, and I'm trying to get the logo to center and the phone number to center right under it. I'm trying to get the bullet points images to center above the two lines of text..and the contact form to just fall in right below it (contact form was working just fine it seemed, so no big question there)
I'll link a live copy of the page as a reference - and a link to a page I've been mimicking in case it helps.
http://lab.blacksunresearch.com/ is my page
http://landing.trugreen.com/growth29 is the page im mimicking (sort of)
Again, I hope it doesnt sound like a TON of stuff, but the page is so simple, I'm probably only missing a few lines of code in my media queries
Thanks!
Edit: Moose, emoticon removed - also, I did ask a question - "How do I make this page more responsive?"
Open their CSS and look at parts with media-queries. There is what you want.
There are only 2 css which you should look through:
themeform.css
themeresponsive.css
You have to include some css to make it responsive ( Custom css , Jquery ,Jquery Mobile , Bootstrap etc) . Or you can simply put some Media Queries where you want your webpage to Act differently, ie responsive .
I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.
Lets say I had just made an awesome looking picture I intend to use as a navigation bar. I exported it as a jpg and now I need to make the actual navigation bar.
I originally thought of image mapping but that's like ancient and does not support drop down menu's. I googled around and I still couldn't find an answer. How do I use one photo as my navigation bar?
Thanks in advance
You can use the technique of CSS sprites; setting your awesome picture as background-image for your menu headings, and using background-position to display the appropriate part of the picture in each heading.
Getting this to be pixel-perfect may require an amount of experimentation and patience.
Hello I am trying to fix the look of this site my original site was this
http://graydaddy.com
but know that I integrated it with the grou.ps community platform the nav menu gets messed up and the image gets moved down by a bit.
I have been looking at it for a while but cant seem to find the error especially because I did not modify at all the div that contains the nav menu
here is the modified
http://www.graydaddy.com
This is probably a dum mistake by my part but thanks for any assistance
I think I know what your problem is. Each navigation image is a different height. And because there are no styles applied to the table cells, the inconsistent image sizes are throwing off the spacing between the horizontal line rows and the image rows.
If it's possible, redo this navigation with an ordered list, and text as HTML text, not image text. Using images as navigation in the way that your site does, is very bad practice.
If it's not possible, re-create each image to be the same exact height.
*Edit: it just dawned on me, you probably used some sort of online GUI editor to create this navigation, if that's the case, there is not much I can help you with as I am not familiar with the Grou.PS. But you'll probably have to redo the navigation to be more precise
Thanks