Was playing around with md-fab, but wanted a REALLy big md-fab button (100px) rather than the 48 and 64 px size, but seems quite problematic to achieve that, thought maybe I could be smart and just create a class as follows
.bigfab {
width: 100px;
height: 100px;
border-radius: 50px;
}
Then a button as
<button class="md-fab bigfab" >Click<br>me!</button>
While it does work, it goes quite ugly, and the highlight dies. So any suggestions?
Found a (possible) solution
Skip md-fab, use md-raised, you get a square shadow, but such is life :)
<md-button class="md-raised md-warn bigfab" >Makes clothes!</md-button>
Related
I would like to be able to add picture that always shows at the top part of the screen. I want a bar that stays at the top of it all the time. I do not know how to do it but I believe YouTube has something like it. Except I want it without the content on the side because that is a little annoying.
In order to do this, you have to use absolute positioning. This requires you to use CSS with your HTML (if you are talking about web design).
Here is the CSS
img {
position: fixed;
left: 0px;
top: 0px;
}
Here is the HTML:
<img src="YOURIMAGE.jpg" height="100" width="100">
Not to be disrespectful, but it seems as though you are not familiar with web design. I would recommend looking at W3 schools and try to grasp some of the concepts there before you continue.
I am just starting with AngularJS, which I know is meant to be an SPA. For the app we are building, all of the pages--except the index page--will have a two-column layout. We'd like the index page, however, to be a one-column, fullwidth page. Is this functionality possible with AngularJS?
I'd suggest posting a plunkr or jsfiddle, since I'm not sure I'm actually answering your question, or if there's more to your question I'm missing.
If you're doing all the pages via routing (ng-view), then just apply classes to differentiate the style for that one-column version. Something like:
.column_1, .column_2 { margin: 0; width: 50%; float: left; }
#firstpage .column_1, #firstpage .column_2 { margin: 0; width: 100%; float: none; }
and then in the html (on that firstpage only), wrap everything in div id="firstpage". Don't include that div in the routed pages, and the style will only apply for the first page. Or if you have some other set up, you can always use styles around the ng-view, too:
<div class="classname">
<div ng-view></div>
</div>
If you've got a side-column that's sitting outside your ng-view and that's what you want to turn off/on, then I'd suggest including the class on the first page (to make it go full-width), and at the same time use some kind of logic with ng-hide/ng-show on that first column.
I thought Safari had sorted this but it still seems to be an issue (unless I'm doing something obviously wrong).
I have a SVG placed inside an object tag. That is wrapped in a flexible containing DIV (e.g set to be width 50%). On resize, the container height resizes in Firefox, Chrome and Opera as I would expect but on Safari the container stays too high.
Here's an example on Codepen to demonstrate, switch to the full size result or 'editor on side' (button bottom right) to see the effect clearly in Safari: http://codepen.io/benfrain/full/fhyrD
Besides using JS to resize the SVG on load/resize, does anyone know if there is anything else I can do to make Safari behave correctly? Could of sworn I'd figured this out a few weeks back but now I seem to be hitting the issue again.
So, Sérgio Lopez had an answer for this. You can employ the intrinsic ratio for video technique that Thierry Koblentz described here: http://alistapart.com/article/creating-intrinsic-ratios-for-video. More info at this blog post: http://benfra.in/20l
Here is the cut and paste code you need in your CSS:
Surrounding object tag
object {
width: 100%;
display: block;
height: auto;
position: relative;
padding-top: 100%;
}
And this for the SVG inside:
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
im trying to create a basic profile for someone and am practicing using the 960 grid system.
I've since got the hang of using grids enough to position most elements, however the menu seems a little off to me, the right side seems to be bigger then the left, even though ive centered the menu itself and its at 100% width.
Does anybody have any ideas on why it is playing up?
Site url is http://digitalgenesis.com.au/sites/alice
css is http://digitalgenesis.com.au/sites/alice/css/main.css
Reduce the ".nav a:hover"-s padding. I think this is the problem.
Try the CSS like this:
.nav{margin-top: 20px;background:black; color:white; padding-top:10px; padding-bottom:10px;text-align:center; }
.nav li{display:inline; }
.nav a:hover{background:white; color:black; padding:10px 0px 10px 0px;}
.nav a{text-decoration:none; color:white; }
.footer{background:black; color:white; margin-top:20px; position:fixed; width:100%; bottom:0px;}
#top{width:100%; background:black; color:white;}
.title{font-size:26px; margin-top:45px; padding-left :10px;}
.wrapper{margin-top:50px;}
.logo{margin-left:0px;}
I have a simple line of text I'm replacing with sIFR for a header on my site. The site is liquid so it scales when the browser window changes width. But when I shrink the browser window down, the alt text (when I turn it on for testing) wraps to another line, but the sIFR text doesn't.
I've seen written elsewhere on the web that people implement in the sifr.js code a preventWrap=false function, but being new to JavaScript I'm not sure where to put it to make it work.
Here's the relevant CSS:
.sIFR-hasFlash h2 {
visibility: hidden;
letter-spacing: 1px;
font-size: 18px;
text-align: center;
line-height: 1.5em;
}
And the relevant JavaScript:
sIFR.replaceElement(named({sSelector: "h2",
sFlashSrc: "flash/h2_font.swf", sBgColor: "#006633",
sColor: "#FFFFFF", sFlashVars: "textalign=center", sWmode: "transparent"}));
Not sure where I would put the preventWrap=false, or if that's even the way to go.
sIFR 3 should fix this.
I had a similar problem, adding position:relative to your CSS might fix it.