Hi I am struggling with a joomla application that I am currently writing.
I am using Joomla 3.3 and in this instance I am using the icons that come with the menu, the text for the menu is vertically aligned (correct) but the images are top aligned.
I have tried to google the problem with little success and just wondered if anyone knew how to solve, screenshot attached.
http://www.prntscr.com/63c5x96zp.jpg
.desktop ul.art-hmenu > li.ext > a img,
.desktop ul.art-hmenu > li.ext > ul > li > a img {
vertical-align: middle
}
Related
I'm trying to get my app to look and behave similar to the Angular Material website: https://material.angular.io/components/categories
I've cloned https://github.com/angular/material.angular.io and run it locally, but I'm struggling with finding out the correct styles I need to apply to which elements (and I don't want to just copy everything from that project, I'd rather learn how to achieve what I want so I can apply it then to some other projects as well). I've inspected the elements and styles using the Chrome dev tools, but I was unable to reproduce it all in my Stackblitz example below:
I've started a project on Stackblitz by simply cloning the Sidenav example and adding my own primary toolbar:
https://stackblitz.com/edit/material-angular-io-behavior?file=app%2Fsidenav-overview-example.html
My main goals:
Contents scrollbar should not cover primary toolbar on wide screens, but is allowed to do so on smaller screens
Keep primary and secondary toolbars "connected" when resizing (width smaller than 600px)
For wide screens:
Fixed Sidenav (in a box)
Narrow scrollbar for sidenav contents
Is it recommended to use flexbox to layout the whole app? And is it possible to place the scrollbars as intended using flexbox?
UPDATE:
final version:
https://stackblitz.com/edit/material-angular-io-behavior-with-bootstrap
Resources that helped me getting there:
Introduction to CSS
Learn CSS Variables for free
Learn Flexbox for free
Learn CSS Grid for free
angular/flex-layout
Okay, I tried to reproduce the navbar similar to the website of Angular Material, StackBlitz HERE.
The contents of the page are separated from the primary toolbar and the sidenav.
The vertical scroll of the page is different from the side menu and does not impact the primary toolbar.
The content of the page is done through the .
And all that was done with Flex-Layout.
I hope this will help you.
DEMO:
With relation to your code on stackblitz, you can add below code in your current CSS :
#media (max-width: 600px) {
.main-mat-toolbar {
position: static !important;
}
.example-container {
position: static !important;
}
}
You can read more about #media queris in CSS at Using media queries
We have been using empty anchor tags with css for years to allow hover states with no issues. Here is a sample of the css and html.
a#phone:link, a#phone:visited { width:34px; height:34px; display:inline-block; background:url(phone.png) center top no-repeat; }
a#phone:active, a#phone:hover { background:url(phone-hover.png) center top no-repeat; }
After a lot of digging I finally got cke to stop deleting my empty anchor tags, here is what I did if interested or helpful. I tried to set the removeEmpty but that didn't work until I added protectedSource:
config.contentsCss = '/css/editor.css';
config.protectedSource.push(/<a[^>]*><\/a>/g);
enterCKEDITOR.dtd.$removeEmpty.a = 0; code here
That finally prevented cke from deleting the tag, however the icons still does not appear in the wysiwyg editor. Its all there in code view...
I have stylesheetparser installed and the other styles in the linked css file are displaying correctly, including floating divs that have a width/max-width defined.
When I view the web page in Dreamweaver or a web browser, all the icons are there and working great, but the links/icons don't appear in cke. I can/have added a no-break space, but that adds margin/line-height, and just messes up the alignment design and layout.
What am I missing? Is this expected behavior? I don't think it should be. Is this a bug?
Any thoughts/ideas/help? Thanks!
What a great responsive menu might I first of all say. I'd like to take this a little further by adding a small logo into the slide out.
At the moment I'm doing this by firstly adding a good deal of padding to this element:
.mm-menu > .mm-list {padding:160px 0 0 0;}
Then I'm using the menu div created I'm inserting with jquery a div which holds the logo as a background image:
$("#mobile").prepend("<div class='logo'></div>");
CSS for this:
#mobile .logo {width:80%; height:124px; max-height:124px; z-index:1000; position:absolute; top:10px; left:50%; margin-left:-40%; background:url(../Images/mob_logo_slide.png) top center no-repeat;}
This all looks great until you have a menu that is a little longer than the users screen, so then when you scroll the first menu items such as Home, About Us ect all overlay onto the jQuery inserted logo.
I need a way of making the 160 padding being the top of the menu so it does not scroll over it.
Thanks in advance.
I'm trying to get two images to repeat ( one shadow image on the right, the other on the left) in the background exactly like this site.
So far I am unable to get the CSS code correct:
http://www.elegantthemes.com/preview/Modest/
I examined the code for that site and have the shadow images I wish to use. I tried to duplicate the code that Elegant Themes is using on a WordPress site running Headway:
.right-shadow { background: #ffffff url(images/right-shadow.png) repeat-y top right; }
.left-shadow { background:url(images/left-shadow.png) repeat-y top left; }
But it did not work.
Then I tried:
body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top;}
This worked for the right shadow image - it appears correctly
Then I tried
body {background:#ffffff url(http://websitebuddha.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;}
This worked for the left shadow image - it appears correctly
Now when I tried and combine the code to display both shadow images along Y left and Y right as such:
body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top, url(http://website.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;}
It does not work - both images do NOT appear
I also tried this:
body {
background-image: url(http://website.com/wp-content/uploads/2012/07/right-shadow.png), (http://website.com/wp-content/uploads/2012/07/left-shadow.png);
background-repeat: repeat-y right top, repeat-y left top;
}
This also does not work - both images do NOT appear
How can I get this to work exactly as it does with the Modest Theme by Elegant themes?
Thanks for reading.
I think you can use Multiple Backgrounds for your solution.
The background property has been overhauled to allow for multiple backgrounds in CSS3.
CSS
body {
background: url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png) 0 0 repeat-y,
url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png)center right repeat-y;
}
I hope this will help you :- http://tinkerbin.com/Iw4yJ1H3
here's one way you could do it. Not using backgrounds as such. Although you could place the images as backgrounds on the divs or simply have them added as images within the divs. You could even do away with the divs and sinmply use images instead of the divs.
http://jsfiddle.net/6UEXc/
Hope that helps.
On this page (http://www.bonniesphere.com/blog/elsewhere/) the "li" items have an image instead of a bullet. But the image is centered vertically, and in multi-line entries it doesn't look good. Can anyone tell me if there is something in the CSS that should be changed?
Here's the relative code:
.entry ul {list-style-type:none;}
.entry ul li{padding: 0 0 0 15px;background: url(img/ol.gif) no-repeat left center;margin-left:10px;}
Many thanks for your help...
replace center with top:
background: transparent url(img/ol.gif) no-repeat scroll left top;
.entry ul {list-style-type:none;}
.entry ul li{padding: 0 0 0 15px;
background: url(img/ol.gif) no-repeat left top center;
margin-left:10px;}
Just typed that out of the top of my head, but the "top" attribute might do it.
You could try and replace the left or center with the top tag, can't check for you as my webdeveloper addon is playing tricks on me. :(
I checked locally, it's the center tag. But there's still an extra bit of whitespace needed.
.entry ul li{padding: 0 0 0 15px;background: url(img/ol.gif) no-repeat left 4pt;margin-left:10px;}
Basically you need to specify the offset from the top. You had center which obviously centered the image vertically.
As a rough guess, I used 4pt but it depends on exactly where you want to position the image. With 4pt it roughly aligns it to the first line, but any change in font-size will screw up the positioning.
Personally, using top for the vertical position is a little too high for my likings.
This is very odd... I tried all three suggestions above, and none of them changed anything. A little more info, if it helps: it's a Wordpress blog (on my server) and I'm editing style.css through the theme editor. (That shouldn't make any difference...)
Do you suppose there's something elsewhere in the CSS that's making the image stay aligned at the center, over-riding this code??
Thanks for your suggestions... I had Firebug but had never used it - so with a combination of Firebug and the "compare" feature of BBEdit, I was finally able to figure it out! The template author had supplied a fix for the bullet points, but when I uploaded the most recent version of the theme, the problem occurred again. I found it, and voilà...
Thanks to the two programs, I was also able to find a fix for something else that wasn't working.
I'm a happy camper! At least... until the next time I run into something I can't fix...
:-)