http___www.ucionica.net_trikovi_horizontalno-centriranje-elemenata-css-om-1308__1.xml
1.1 1.2 1.3 2.1 3.1 3.2 3.3 4.1 5.1 5.2 5.3 6.1 7.1 8.1 9.1 10.1 11.1 12.1 13.1 14.1 15.1 16.1 18.1 20.1 20.2 21.1 22.1 23.1 24.1 25.1 32.1 34.1 34.2 35.1 35.2 36.1 37.1 38.1 39.1 40.1 41.1 42.1 43.1 43.2 43.3 44.1 45.1 46.1 47.1 48.1 49.1 50.1 51.1 52.1 53.1 54.1 55.1 56.1 57.1 58.1 59.1 60.1 61.1 62.1 63.1 64.1 65.1 67.1 68.1 69.1 70.1 71.1 74.1 75.1 76.1 77.1 78.1 80.1 81.1 82.1 83.1 85.1 86.1 87.1 90.1 91.1 92.1 93.1 95.1 95.2 96.1 97.1 98.1 98.2 98.3 99.1 99.2 100.1 101.1 101.2 102.1 103.1 105.1 106.1 107.1 108.1 110.1 111.1 112.1 113.1 114.1 114.2 116.1 118.1 118.2 119.1 120.1 120.2 121.1 124.1 125.1 126.1 128.1 129.1 129.2 129.3 130.1 131.1 132.1 133.1 134.1 135.1 135.2 136.1 137.1 138.1 139.1 141.1 141.2 142.1 143.1 144.1 145.1 146.1 146.2 147.1 148.1 149.1 151.1 152.1 154.1 155.1 156.1 157.1 158.1 159.1 160.1 161.1 162.1 163.1 164.1 166.1 167.1 168.1 169.1 170.1 171.1 172.1 173.1 175.1 176.1 177.1 178.1 179.1 180.1 181.1 182.1 183.1 184.1 185.1 187.1 188.1 189.1 190.1 191.1 192.1 193.1 194.1 196.1 198.1 199.1 200.1 203.1 204.1 205.1 206.1 208.1 209.1 210.1 211.1 212.1 214.1 215.1 216.1 217.1 219.1 220.1 221.1 223.1 224.1 225.1 226.1 228.1 229.1 230.1 231.1 232.1 234.1 235.1 237.1 238.1 239.1 240.1 241.1 242.1 243.1 245.1 246.1 248.1 249.1 250.1 252.1 253.1 254.1 256.1 257.1 258.1 259.1 261.1 262.1 263.1 265.1 266.1 267.1 268.1 269.1 270.1 271.1 272.1 274.1 275.1 276.1 277.1 278.1 280.1 281.1 283.1 284.1 285.1 287.1 288.1 289.1 290.1 291.1 293.1 294.1 295.1 296.1 297.1 298.1 299.1 300.1 301.1 302.1 304.1 305.1 307.1 308.1 309.1 312.1 313.1 314.1 316.1 317.1 318.1 319.1 321.1 322.1 323.1 325.1 326.1 327.1 327.2 328.1 329.1 330.1 331.1 332.1 333.1 334.1 335.1 336.1 337.1 338.1 339.1 340.1 341.1 342.1 343.1 343.2 344.1 345.1 346.1 348.1 349.1 349.2 349.3 350.1 351.1 352.1 352.2 352.3 352.4 353.1 354.1 355.1 356.1 357.1 358.1 359.1
As mojoPortal content management system continues to evolve it is fairly common that new CSS is added over time for new or changed features. During upgrades we never touch existing skins in your site in case you have customized them. We do update the skins in /Data/skins but not the ones used by sites, these are located under /Data/Sites/[SiteID]/skins and we never touch those. Therefore it is a good idea to keep an eye on changes mentioned in the blog release announcements. Below is a list of changes that have occurred over various version releases. CommentsWidget We changed a lot of the markup for the CommentsWidget which is used in the blog, the Comments module and the Page Comments feature. We suggest rewriting your CSS to support the new markup and CSS classes. If you would rather use the old CSS Classes, you can add the following to your theme.skin. <portal:CommentsWidget runat="server" OuterPanelCssClass="bcommentpanel" InnerPanelCssClass="postlistwrap" ItemWrapperCssClass="postwrapper postcontainer" DateWrapperCssClass="forumpostheader" ItemBodyCssClass="postbody" LeftPanelCssClass="postleft" RightPanelCssClass="postright" UsernameWrapperCssClass="forumpostusername" AvatarWrapperCssClass="forumpostuseravatar" RevenueWrapperCssClass="forumpostuserattribute" theme.skin changes When we changed out the File Manager we had the opportunity to clean out some hard coded images that were added to the Administration Drawer items out of the code. This used to be done via a setting in the user.config. Now instead of adding things to the in the user.config and touching the web.config, just add the code below into your skins theme.skin file. style.config changes Colorbox has been updated and now has a different path to each style. The code below shows what you'll need to update in your style.config. In the future, we suggest that skin developers add a colorbox theme into their skin and not use these calls in the style.config. none none none none none CSS changes - The new CKEditor configuration requires this CSS. Add it to one of your skin CSS files. If you don't want to add this CSS, you need to add to your user.config. .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } .text-indent-1 { text-indent: 40px; } .text-indent-2 { text-indent: 60px; } .text-indent-3 { text-indent: 80px; } .font-xsmall { font-size: 60%; } .font-small { font-size: 80%; } .font-normal { font-size: 100%; } .font-large { font-size: 120%; } .font-xlarge { font-size: 140%; } /* Responsive Styles | Comment out this media query if your skin is not responsive */ /* Media Query Start */ @media (max-width: 767px) { .image-left, .image-right { display: block; margin: 0 0 10px; text-align: center; img.image-left, img.image-right { display: table; margin: 0 auto 10px; vertical-align: top; /* Media Query End */ .image-center { display: block; margin: 0 0 10px; text-align: center; @media (min-width: 768px) { .image-left { float: left; margin-right: 10px; .image-right { float: right; margin-left: 10px; .image-captioned figcaption { font-size: small; margin: 10px 0; opacity: 0.7; - Class on Related Posts list in Blog is now spelled correctly. Replace brelatedosts with brelatedposts. We updated to jQuery 1.9 and jQueryUI 1.10.0. As a result, you may find that custom plugins you are using are not working correctly. Ideally, you should look for updated versions of any plugins, but if needed you can add this property on in the layout.master file of your skin. All Artisteer skins need this because their jQuery code is not yet compatible. If you are using a Superfish menu and adding the mojosuperfish.js script reference in your layout.master file, you should update that to mojosuperfish150.js With the addition of new options for displaying a short author bio on Html content instances and in the Blog, you may need to add some CSS to style it. The following is an example of CSS I added to some of the included skins: div.authorinfo { clear: both; div.authorinfo a.avatar, div.authorinfo a.avatar img, div.authorinfo img { float:left; The divLeft, divCenter, and divRight (and divAlt1 and divAltContent2)can be changed from <asp:Panel to <portal:LayoutPanel and you can add a non-visual control: that allows setting a few properties from theme.skin to control which CSS classes are assigned to the layout panels. We added support for Facebook Comments as a new option. For it to work you need to add this in layout.master just below the GoogleAnalytics top control which is just inside the body element: Custom skins need one of these added to the style.config file to support the new Audio and Video Players: These are for jPlayer used in the Audio Player and Video Player features. Choose one of these 3 to style these features. If you include the allskins one, it contains both of the skins for jPlayer and then you can specify which skin is used by setting this custom CSS class to either bluemonday or pinkflag. Or to reduce the total amount of CSS you can choose one of the other files and include only one of the skins for the media player. none none none none We made changes in mojoPortal to support Artisteer 3.1. The changes required making some things even more flexible to support the markup variations in Artisteer 3.1 vs previous versions of Artisteer. Skins created in older Artisteer versions need the theme.skin file to be updated as a result, as do skins based on the jQueryUI skin. To update an existing skin created in Artisteer 3.0, download the extra-skins.zip from our CodePlex download page and copy the theme.skin file from one of the artisteer30 skins included in the zip. Similarly to update a skin created in Artisteer 2.4/2.6, copy the theme.skin file from one of the artisteer24 skins. For really old Artisteer skins based on artisteer-greenlagoon, you can copy the theme.skin file from the artisteer-greenlagoon skin in the extra-skins.zip For skins based on jqueryui-1, we have updated that skin in the /Data/skins folder so you can copy the theme.skin file from there. We added the main CSS to the help page, in some cases this may cause a problem if you have a background image or color that obscures the help content. You should be able to fix it by adding this to your CSS: body.help-page { background-color: white; background-image: none; color: black; We also changed the behavior of the alternate content panes so that if they have no content they are hidden by default. If this poses a problem for your skin, you can revert to the previous behavior by setting HideEmptyAlt1="false" and/or HideEmptyAlt2="false" on the portal:StyleSheetCombiner control in your layout.master. to revert to the previous behavior. If you are using any of the Artisteer skins or skins based on the jqueryui-1 skin, there are a few new entries needed in the theme.skin file. Other skins do not need these changes. Skins based on jqueryui-1 need this: <portal:OuterWrapperPanel runat="server" ExtraCssClasses="ui-widget" <portal:OuterBodyPanel runat="server" ExtraCssClasses="ui-widget-content ui-corner-bottom" Skins based on Artisteer-24* or artisteer-30* need this: <portal:OuterWrapperPanel runat="server" Element="div" ExtraCssClasses="art-post" RenderContentsOnly="false" LiteralExtraTopContent="                   " LiteralExtraBottomContent="   " DetectSideColumn="true" SideColumnxtraCssClasses="art-block" SideColumnLiteralExtraTopContent="                   " SideColumnLiteralExtraBottomContent=" " <portal:OuterBodyPanel runat="server" Element="div" ExtraCssClasses="art-postcontent" RenderContentsOnly="false" DetectSideColumn="true" SideColumnxtraCssClasses="art-blockcontent" SideColumnLiteralExtraTopContent="                   " SideColumnLiteralExtraBottomContent="   " Skins based on artisteer-greenlagoon or artisteer-swirly1 need this: <portal:OuterWrapperPanel runat="server" Element="div" ExtraCssClasses="art-Post" RenderContentsOnly="false" LiteralExtraTopContent="                   " LiteralExtraBottomContent="   " DetectSideColumn="true" SideColumnxtraCssClasses="art-Block" SideColumnLiteralExtraTopContent="                   " SideColumnLiteralExtraBottomContent="" <portal:OuterBodyPanel runat="server" Element="div" ExtraCssClasses="art-Postcontent" RenderContentsOnly="false" DetectSideColumn="true" SideColumnxtraCssClasses="art-BlockContent" SideColumnLiteralExtraTopContent="                   " SideColumnLiteralExtraBottomContent="   " In order to support the new feature that allows you to configure a custom CSS class on the body from page settings, change the opening body element in your layout.master file like this: Add these to the style.config for your custom skins: none none none none none none none We revamped the PageLayout.aspx page and it needs this new CSS: .pagelayout .addcontent { float: left; margin: 0 0 20px; .pagelayout .panelayout { clear: both; margin: 0 0 20px 0; padding: 0; .pagelayout .panelayout h2 { margin: 0 10px 10px 0; text-align: center; .pagelayout .regularpanes { clear: both; margin: 0 auto; width: 630px; .pagelayout .pane { clear: none; float: left; margin: 20px 0 20px 0; position: relative; .pagelayout .layoutcenter { margin: 20px 30px; .pagelayout .layoutalt1, .pagelayout .layoutalt2 { float: none; clear: both; width: 190px; margin: 0 auto; position: relative; .pagelayout .altlayoutnotice { margin-bottom: 20px; .pagelayout .panelistbox { position: relative; width: 190px; .pagelayout .pane select { margin-right: 10px; width: 170px; .pagelayout .layoutbuttons { position: absolute; right: 0; top: 5px; .pagelayout .layoutbuttons input { display: block; margin-bottom: 10px; The following CSS is needed for the Scroller feature in the Feed Manager: .feedscroller { background-color: #E5E5E5; border: 2px solid #E5E5E5; display: block; overflow: hidden; position: relative; text-align: center; .feedscroller .rsswrapper { display: block; height: 250px; overflow: hidden; position: relative; .feedscroller .rssentries { position: absolute; The following CSS is needed for the Flickr Gallery: .hidden { display: none; .fthumbs img { box-shadow: #333 2px 2px 5px; cursor: pointer; margin: 5px; padding: 5px; span.btn { background-color: #eee; border-radius: 8px; box-shadow: #999 2px 0px 3px; color: #aaa; cursor: pointer; display: inline-block; font: 12px/14px Arial, Helvetica, sans-serif; margin-left: 5px; padding: 10px; span.btn.pages { background-color: #fff; span.btn.pages:hover, span.btn.pages.sel { background-color: #f3f3f3; span.btn:hover, span.btn.sel { background-color: #000; .galleryinfo { display: inline-block; margin-top: 10px; position: relative; This CSS is needed to style the login inputs: .login .passwordbox { width: 15em; Thanks to Steve Railsback it is now easy to use icons for the administration menu links by adding this to your style.config file: none We added support to allow the use of icons in the menu for Artisteer skins. For Artisteer skins, in order to hide them by default add this to the stylemojo.css file: .art-menu .t img { display:none;} .art-vmenu .t img { display:none; } For other skins add this: AspNet-Menu .img{display:none;} Changed search results to more semantically correct ordered list element. Add this to CSS so it doesn't show number bullets. ol.searchresultlist { list-style-type:none; } Need to add this for Bing Maps: .bmap { position:relative; } Add this to style.config: none none Add this to your style.css: ol.formlist { list-style:none; margin: 0px; } li.settingrow { list-style:none; } div.sitemap . AspNet-TreeView-Collapse { background: url('collapse.gif') 0 0 no-repeat; width: 15px; margin-right: 5px; float:left; cursor: pointer; line-height: 15px; AspNet-TreeView-Hide { display:none;} div.sitemap a. AspNet-TreeView-Expand, div.sitemap a. AspNet-TreeView-Collapse { text-decoration: none; } Added an alternative file manager based on jQuery, you need to add this to your style.config to add the needed styles for the new file manager: none Added consistent styles for GridView. Many features including the traditional File Manager and Shared Files features use GridView. We actually have a choice of built-in GridView themes and you can choose the one you like best and add it to your style.config file. The following choices are possible: none none none none none none Last Modified by Joe Davis on Jun 22, 2018
1.1 1.2 2.1 2.2 3.1 4.1 8.1 9.1 10.1 11.1 15.1 17.1 18.1 20.1 21.1 23.1 24.1 27.1 30.1 31.1 33.1 34.1 35.1 36.1 38.1 39.1 40.1 43.1 44.1 45.1 46.1 47.1 49.1 50.1 52.1 53.1 54.1 55.1 56.1 58.1 59.1 60.1 62.1 63.1 64.1 65.1 65.2 65.3 65.4 65.5 66.1 67.1 68.1 69.1 70.1 71.1 72.1 73.1 73.2
Svi koji se bave razvojem weba vjerojatno su ponekad imali potrebu horizontalno centrirati block elemente koji nemaju fiksnu širinu. U ovom vodiču učimo Vas kako to najelegantnije izvesti. Postoji nekoliko metoda za izvesti identičnu stvar međutim ova ne zahtjeva CSS hackove ni Javascriptove, a podržana je u svim browserima, pa čak i Internet Exploreru 6. Uz ovaj CSS trik, vaš kôd ostati će validan. Stvari naučene u ovom naprednijem vodiču često možemo primjeniti na elemente poput navigacije, paginacije i slično. Naš (x)HTML kôd između body tagova izgledati će ovako: Početna O nama Usluge Kontakt Naš CSS kôd izgledati će ovako: padding: 0; margin: 0; body { font-family: Georgia, "Times New Roman", Times, serif; a, a:visited { text-decoration: none; a:focus, a:hover { #container { margin: 30px; #nav { overflow: hidden; position: relative; background: #EFEFEE; #nav ul { float: left; position: relative; #nav li { display: block; float: left; list-style: none none outside; position: relative; font-size: 18px; margin-left: 1px; #nav a { display: block; padding: 6px 12px; background: #DDDDDD; line-height: 25px; #nav a.selected { color: #FFFFFF; background: #333333; Objašnjenje metode Možda se neki CSS property-i koji nisu vezani uz veličine i boje čine suvišni, ali ukoliko izostavite koji stvar vjerojatno neće fukcionirati. Prije svega, bitno je utvrditi kako floatani elementi bez property-a width imaju širinu koliko je širok sadržaj tog elementa. Omotač navigacije sa id-om nav ima property overflow budući da je sadržaj unutar njega floatan i bez ove ili neke druge metode za čišćenje visina tog diva iznosila bi 0. Ovakav način čišćenja ne radi u Internet exploreru 6. Druga stvar zbog koje nam je potreban properyty overflow je kako ul element ne bi stvorio dodatnu horizontalnu navigaciju. Također je bitno napomenuti da ukoliko koristite padajuće izbornike overflow hidden bi ih prekrio. Upute za čišćenje nakon float elemenata moći ćete pročitati u jednom od sljedećih vodiča. Metoda za centriranje funkcionira tako da prvo ul floatamo kako bi se prilagodio sadržaju, a zatim smo ga pomaknuli u desno za 50% širine njegovog roditelja (eng. parent), u ovom slučaju div-a sa id-om nav. Elemente li također smo prvo floatali kako bi se prilagodili sadržaju, a zatim svakog od njih pomičemo u lijevo za 50% nakon čega bi stvar trebala biti centrirana. Rezultat Ukoliko ste sve pažljivo slijedili, tada biste trebali dobiti nešto nalik na sliku ispod: Pokušajte resizeati browser kako biste utvrdili da je Vaša navigacija uvijek na sredini. Resursi HTML dokument ovog vodiča sa uključenim CSS-om preuzmite ovdje. Nadamo se da je ovaj vodič koristio! Za sva pitanja slobodno se obratite na mail igor@ucionica.net.