• Web Development - WAYWO - #8
    5,576 replies, posted
It's got that pure CSS smell. [img]http://i.minus.com/irEGoOoNfpsVO.gif[/img]
I am not very experienced with CSS, and i was wondering if there is anyway to make a background image come form a directory rather than a url?
[QUOTE=zedpenguin;44484459]I am not very experienced with CSS, and i was wondering if there is anyway to make a background image come form a directory rather than a url?[/QUOTE] What does that even mean?
[QUOTE=zedpenguin;44484459]I am not very experienced with CSS, and i was wondering if there is anyway to make a background image come form a directory rather than a url?[/QUOTE] [QUOTE=Jelly;44484679]What does that even mean?[/QUOTE] I think he means he's seen code like this: [code] background-image: url(http://example-image.com/image.jpg); [/code] and he's wondering how to do this: [code] background-image: url(image/hosted-on-my-own-site.jpg); [/code] Unless he means "how to I make it come from a directory on my hard drive instead of a URL", in which case, that's a different and not-CSS-related question.
Anyone familiar with Firefox XUL styling? I've modded the tab bar so that the tabs are square and tiny, but when I tried to remove double borders I get this instead: [img]http://i.imgur.com/V081Qpj.png[/img] That little pixel in the bottom left of the tab is annoying the hell out of me, and i don't know what I should do to get it to go away. Documentation of the firefox UI is spotty at best. The declaration that causes that effect is a simple border-left: none. Without it, the tab bar looks like this: [img]http://i.imgur.com/kxywViR.png[/img] ...which I think is pretty ugly. [editline]bleh[/editline] Oh and also the background is shining through the tabs for some reason.
[QUOTE=zedpenguin;44484459]I am not very experienced with CSS, and i was wondering if there is anyway to make a background image come form a directory rather than a url?[/QUOTE] [code] background: url('path/to/file.jpg'); [/code] You can also use [B]background-image[/B], I just prefer to use [B]background[/B] in case I need to do something like: [code] background: url('path/to/file.jpg') top left no-repeat; [/code]
I've made a quick and dirty [url=http://dev02.basbieling.com/mandelbrot/]mandelbrot generator in liquidscript[/url] to see how efficient it is compared to coffeescript and liquidscript is the clear winner: [url=http://dev02.basbieling.com/mandelbrot/mandelbrot.coffee]mandelbrot.coffee 2.6K[/url] [url=http://dev02.basbieling.com/mandelbrot/mandelbrot.js.old]mandelbrot.js 3.1K[/url] [url=http://dev02.basbieling.com/mandelbrot/mandelbrot.liq]mandelbrot.liq 1.9KB[/url] [url=http://dev02.basbieling.com/mandelbrot/mandelbrot.js]mandelbrot.js 2.0KB[/url] [t]http://i.imgur.com/JfuU4MK.png[/t]
[QUOTE=Mega1mpact;44491781]I've made a quick and dirty [URL="http://dev02.basbieling.com/mandelbrot/"]mandelnbrot generator in liquidscript[/URL] to see how efficient it is compared to coffeescript and liquidscript is the clear winner: [URL="http://dev02.basbieling.com/mandelbrot.coffee"]mandelbrot.coffee 2.6K[/URL] [URL="http://dev02.basbieling.com/mandelbrot/mandelbrot.js.old"]mandelbrot.js 3.1K[/URL] [URL="http://dev02.basbieling.com/mandelbrot.liq"]mandelbrot.liq 1.9KB[/URL] [URL="http://dev02.basbieling.com/mandelbrot.js"]mandelbrot.js 2.0KB[/URL] [t]http://i.imgur.com/JfuU4MK.png[/t][/QUOTE] links no workey bro
[QUOTE=RusselG;44495732]links no workey bro[/QUOTE] fixed
[QUOTE=Moofy;44485975][code] background: url('path/to/file.jpg'); [/code] You can also use [B]background-image[/B], I just prefer to use [B]background[/B] in case I need to do something like: [code] background: url('path/to/file.jpg') top left no-repeat; [/code][/QUOTE] Yes it was the second one, thank you!
The first one should work too, it'll just repeat by default
[QUOTE=djjkxbox360;44505833]The first one should work too, it'll just repeat by default[/QUOTE] But in case he needs no-repeat he would have to manually add it afterwards, thus 2 lines. [code] background-image: url('path/to/file.jpg'); background-repeat: no-repeat; [/code] [editline]10th April 2014[/editline] Which is why I just like to use background: for any case. :v:
I found out that vector based physics are very easy to implement [URL="http://hell2000.no-ip.org/html/vectors.html"]http://hell2000.no-ip.org/html/vectors.html[/URL] yes I know that mr. doob did something like this
who wants to help me make a webpage concept of an app. its pretty simple. basically it has openstreetmaps in the background (just a background image), with 2 images on the bottom that go between a list and a search. its for a class btw this is what i put together so far [t]http://i.imgur.com/gM1EaIr.jpg[/t]
[QUOTE=TonyTheBean;44518353]who wants to help me make a webpage concept of an app. its pretty simple. basically it has openstreetmaps in the background (just a background image), with 2 images on the bottom that go between a list and a search. its for a class btw this is what i put together so far [t]http://i.imgur.com/gM1EaIr.jpg[/t][/QUOTE] I'm confused, do you want us to HELP you make it or do you want us to actually MAKE it?
this is insanely hard because my iphone 4 has a higher resolution than my laptop. [editline]11th April 2014[/editline] [QUOTE=Moofy;44518678]I'm confused, do you want us to HELP you make it or do you want us to actually MAKE it?[/QUOTE] Help me through it, give me some tips. What i'm stuck on right now is getting the bottom right button to be aligned on the bottom right of the webpage.
[QUOTE=TonyTheBean;44518806] Help me through it, give me some tips. What i'm stuck on right now is getting the bottom right button to be aligned on the bottom right of the webpage.[/QUOTE] not sure if this is the right way to solve it but you will have to set your html and body as a height of 100% [code] html, body { height: 100%; } [/code] then give the button a position of fixed and a bottom of 0, same with right. [code] #box { position: fixed; bottom: 0; right: 0; } [/code] Don't know if this is the most optimal way, but since I guess the site is not gonna be scrollable it would work. Here's a fiddle: [url]http://jsfiddle.net/hkYys/[/url]
[QUOTE=Moofy;44518913]not sure if this is the right way to solve it but you will have to set your html and body as a height of 100% [code] html, body { height: 100%; } [/code] then give the button a position of fixed and a bottom of 0, same with right. [code] #box { position: fixed; bottom: 0; right: 0; } [/code] Don't know if this is the most optimal way, but since I guess the site is not gonna be scrollable it would work. Here's a fiddle: [url]http://jsfiddle.net/hkYys/[/url][/QUOTE] Right now I have everything in a centered div thats the res of my phone (960x640), with all the UI elements in there. How would I have that inside of the div?
[QUOTE=TonyTheBean;44518968]Right now I have everything in a centered div thats the res of my phone (960x640), with all the UI elements in there. How would I have that inside of the div?[/QUOTE] I think you have to make your div position: relative; Then those boxes position: absolute; Then you can use bottom: 0; and right/left: 0; ([I]absolute positioning inside a relative positioned element makes it jump around INSIDE that relative div, so it won't go to the bottom of your browser but instead the bottom of that relative element.[/I])
Anyone knows a sublime plugin that improves code hinting? Specifically I want to see function parameters and html code hinting in php/js strings.
[QUOTE=Miljaker;44521297]Anyone knows a sublime plugin that improves code hinting? Specifically I want to see function parameters and html code hinting in php/js strings.[/QUOTE] SublimeLinter? I'm not sure if it's actually linting you're looking for though, to me it sounded like that. Also, this thread is full of questions all of a sudden. Use the questions thread. :v:
Someone asked me for a website, So I got started... I don't want this post on google if you search for the site so I'm not posting the URL to the original site. Original | Concept | Live Development [t]http://puu.sh/859rd.png[/t][t]http://puu.sh/84MAC.png[/t][t]http://puu.sh/859vK.png[/t] Development Version: [url]http://lucky.almost-there.org/computerCare/[/url] Need to do alot more polishing, but I got this done in about 3 hours.
[QUOTE=lkymky;44522343] [code] <link href='css/style.css' rel='stylesheet'> <link href='css/reset.css' rel='stylesheet'> [/code] [/QUOTE] You might want to swap them around. Also remember to support older browsers, the people in need of computer care are more likely to be using them.
[QUOTE=CBastard;44522368]You might want to swap them around. Also remember to support older browsers, the people in need of computer care are more likely to be using them.[/QUOTE] Yes, I do have that in mind, I also need to make the site accessible. I'm sticking to display:block layout with clearfix and floats and crap, rather than flexbox which is what I prefer. Is this appropriate to use? [URL="http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/"]Source[/URL] [code] <!--[if lt IE 9]> <script> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); </script> <![endif]-->[/code] I think I'm going to have a fallback CSS class, I don't think it will be that much more work than putting in a compatibility library.
[QUOTE=lkymky;44522382]Yes, I do have that in mind, I also need to make the site accessible. I think I'm going to have a fallback CSS class, I don't think it will be that much more work than putting in a compatibility library.[/QUOTE] You're probably going to need test virtual machines with Internet Explorer 7-11, maybe 6. Also the HTML5 semantic tags aren't supported, no CSS media queries and there is no CSS animation in IE <9. Also you'll need to move reset.css before the bootstrap CSS too or it defeats the point of both. [editline]12th April 2014[/editline] [QUOTE=lkymky;44522382] I'm sticking to display:block layout with clearfix and floats and crap, rather than flexbox which is what I prefer. [/QUOTE] You've currently got nothing in the design which needs to be floated. [QUOTE=lkymky;44522382] Is this appropriate to use? [URL="http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/"]Source[/URL] [/QUOTE] That's only IE8. IE7 isn't dead yet, especially when the target market is likely to have old computers and software.
[QUOTE=CBastard;44522459]You're probably going to need test virtual machines with Internet Explorer 7-11, maybe 6. Also the HTML5 semantic tags aren't supported, no CSS media queries and there is no CSS animation in IE <9. Also you'll need to move reset.css before the bootstrap CSS too or it defeats the point of both. [editline]12th April 2014[/editline] You've currently got nothing in the design which needs to be floated. That's only IE8. IE7 isn't dead yet, especially when the target market is likely to have old computers and software.[/QUOTE] damn, The best option here is probably to just downgrade the site then, :downs: This is going to be funny. That is okay though, Ill continue with HTML5 until I finish the design.
[QUOTE=Moofy;44521737]SublimeLinter? I'm not sure if it's actually linting you're looking for though, to me it sounded like that. Also, this thread is full of questions all of a sudden. Use the questions thread. :v:[/QUOTE] I don't think that's linter. Basically, the only reason I'm still using Dreamweaver is because of this: [IMG]http://i.imgur.com/wLwPQKI.png[/IMG] Now I don't necessarily need the documentation (even if it is extremely useful) but I at least need the parameters. The second part is this: [IMG]http://i.imgur.com/9k3JuZL.png[/IMG] While typing this, it first suggests the "echo" then it suggest html tags, then it starts suggesting html attributes, picking style and inside the style it suggest css properties. Meanwhile in sublime when I do echo " it suggests php. Kinda useless.
[QUOTE=Miljaker;44525247]I don't think that's linter. Basically, the only reason I'm still using Dreamweaver is because of this:[/QUOTE] What you are demonstrating is IntelliSense or Code Completion ([url]https://en.wikipedia.org/wiki/Intelligent_code_completion[/url])
If you want something more up-to-date that offers this - considering that your Dreamweaver version might be a little bit old - [url=https://www.jetbrains.com/phpstorm/]PHPStorm[/url] might cut your cake, considering that in the long run, it's much cheaper than paying for Adobe's Creative Cloud crud. Especially if you don't plan on using it for commercial purposes, in which case it's cheaper than Sublime. I use RubyMine myself, and considering how neat it is, PHPStorm probably isn't much different.
[t]http://i.imgur.com/YtKuXFV.png[/t][t]http://lw2.co.uk/ktty.gif[/t] *{outline:1px solid rgba(255,0,0,0.1);} so useful for prototyping edit: using just em for everything, changing body font-size with css to scale whole site, pretty cool
Sorry, you need to Log In to post a reply to this thread.