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;}
Related
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>
I'm making a page that will just display an SVG image, and here are the requirements:
the vector should take up the entire window
the vector should maintain its aspect ratio (defined in the SVG file itself)
the vector should crop/clip in order to prevent skewing
The CSS...
body {
background: url(/path/to/image.svg);
background-size: cover;
}
...works almost perfectly except that when the browser window becomes too narrow it tiles instead of cropping/clipping.
Here are some screen shots (please ignore the artifacts left by dabblet):
Here the window is close to the aspect ratio of the original image
Here the window is "shorter" than the aspect ratio, and the image is cropping (as desired).
Here the window is "narrower" than the aspect ratio, but instead of cropping, the image is tiling (undesired).
Here are some thoughts that I had...
Could I change the SVG image in some way to prevent this from happening?
Could I markup/style the page to achieve the desired results?
I would prefer to keep in the realm of HTML/CSS, but if Javascript is needed, then so-be-it.
Here's the dabblet that I was working with... http://dabblet.com/gist/6033198
After some trial-and-error, this is what I found.
Adding (to the original CSS):
html {
height: 100%
}
delivered exactly what I was looking for in the original spec.
Additionally, if I wanted the image to be center when it was cropped, I could use:
html {
background: url(path/to/image.jpg) no-repeat center center fixed;
background-size: cover;
}
Lastly, if I wanted it to be centered, always maintain the aspect ratio, but NOT be cropped (i.e., some whitespace is OK) then I could do:
body {
background: url(/path/to/image.svg) no-repeat center center fixed;
background-size: contain;
}
For me I had all other properties set except background-attachment:fixed. I had experienced the same issue on a site of mine for ages, one of the most elusive and infuriating bugs I've ever come across, but adding this to the html element seems to have finally solved it for me.
This css is working.Thanks
"background-size: contain;"
.cover{background:url(images/cover.jpg) no-repeat top center; display:inline-block; width:100%; height:400px; background-size: contain;}
<div class="cover"> </div>
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;
}
I am trying to put a line-height to properly align all menu items in a wordpress menu. My problem is that it works with menus that do not have an image or description, if it does have a image or description it does not align vertically with the line-height property.
Here's what I have for the menu items working:
.menu-dropdown a.level1 > span, .menu-dropdown span.level1 > span {
height: 50px;
line-height: 50px;
padding: 0 10px;
}
Now when I use Firebuf to try and fix the problem, there is a class showing a little diferent, which is "level1 parent". Even with Firebug I cannot fix this. I´m working on localhost, so can't give a link for the problem, but if it's necessary I'll put it online.
Here´s the link, you can see the problem in main menu at the top:
http://ricardo.dyndns-at-work.com:8888/yootheme/
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.