Menu icon Foundation

My Posts





  • 2
    Replies
  • Custom column width

    By Sader Neoklis

    custom columns

    Hello, I have a custom layout and I can mostly use Foundation columns but there are couple of occasions that I need to use custom width for some columns. I don´t want to just overwrite the CSS on app.css as I am not sure if that would be the best w... (continued)

    Last Reply by Jacky888 over 1 year ago


My Comments

Sader Neoklis commented on Sader Neoklis's post almost 5 years

Thanks a lot. Appreciate it.

Sader Neoklis commented on Sader Neoklis's post almost 5 years

Hello,

You can find my code below. I have modified the standard side nav
attributes for my site.

<ul class="side-nav"> 
        <li><a href="isi-yalitimi-nedir.php">ISI YALITIMI NEDİR?</a></li> 
        <li><a href="Nasil-calisir.php">NASIL ÇALIŞIR</a></li> 
        <li><a href="Farki.php">FARKI</a></li> 
        <li><a href="NASA-teknolojisi.php">ORJİNAL NASA TEKNOLOJİSİ</a></li>
        <li><a href="mantolama-nedir.php">MANTOLAMA NEDİR?</a></li> 
        <li><a href="enerji-kimlik-belgesi.php">ENERJİ KİMLİK BELGESİ</a></li>
        <li><a href="sikca-sorulan-sorular.php">SIKÇA SORULAN SORULAR</a></li> 
        <li><a href="Referanslar.php">REFERANSLARIMIZ</a></li> 
</ul>

  .side-nav {
    display: block;
    margin: 0;
    padding: 0 0;
    list-style-type: none;
    list-style-position: outside;
    font-family: 'Open Sans', Helvetica, Roboto, Arial, sans-serif; }
  .side-nav li {
    margin: 0 0 0 0;
    font-size: 1rem;
    font-weight: normal; }
  .side-nav li a:not(.button) {
    display: block;
    color: #666666;
    background-color: #EEEEEE;
    margin: 0;
    padding: 0.4800rem 0.500rem;
    border-bottom: 1px solid #999999; 
    /*text-align: right;*/} /*REVISED*/
  .side-nav li:first-child:not(.button) {
    border-top: 1px solid #999999;} /*ADDED TOP BORDER FOR THE FIRST LI ELEMENT*/
  .side-nav li a:not(.button):hover {
    background-color: #DAEEF3;    
    color: #666666; }
  .side-nav li a:not(.button):focus, .side-nav li a:not(.button):active {
    color: #666666;
    background-color: #EEEEEE;  
    }
  .side-nav li.active > a:first-child:not(.button) {
    color: #FFFFFF;
    background: rgb(37, 50, 66);
    background: -moz-linear-gradient(270deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    background: -webkit-linear-gradient(270deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    background: -o-linear-gradient(270deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    background: -ms-linear-gradient(270deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    background: linear-gradient(0deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    font-weight: normal;
    font-family: 'Open Sans', Helvetica, Roboto, Arial, sans-serif; }
  .side-nav li.divider {
    border-top: 1px solid;
    height: 0;
    padding: 0;
    list-style: none;
    border-top-color: white; }
  .side-nav li.heading {
    color: #008CBA;
    font-size: 0.875rem;
    font-weight: bold;
    text-transform: uppercase; }

Sader Neoklis commented on Sader Neoklis's post almost 5 years

Hello,

My browsers display all webpages exactly the same. I have also found another post on webmonkey related to this issue:

http://www.webmonkey.com/2010/12/why-percentage-based-designs-dont-work-in-every-browser/

Chrome displays the webpage 60 pixel wider than the FF. I really don´t know what the issue is and no one seems to know what is the cause. It is really frustrating.

I think because Foundation is percentage based grid system, different browsers interpret the output differently.

Sader Neoklis commented on Sader Neoklis's post almost 5 years

Hi,

I have temporarily uploaded the files here:

http://mirava.com.tr/test/foundation-demo.html

Please check it both on Chrome and FF. There is a 60 px difference between the two.

Sader Neoklis commented on Sader Neoklis's post almost 5 years

Hello, I think Chrome just renders percentage based layouts differently but in my case it results is a 60px difference in width. I tried to set the width to 960px max but then internal divs did not scales down on Chrome. I think it is a cross browser compatibility issue.

Sader Neoklis commented on Sader Neoklis's post almost 5 years

I haven´t made any changes on the mark-up. I have used one of the pre-made tamplates on the foundation page (http://foundation.zurb.com/templates.html) and for some reason Google chrome shows the entire page 60px wider. I have checked everything yet could not figure it out. About to go crazy !!! Any other thoughts???

Posts Followed

No Content

Following

    No Content

Followers

My Posts




My Comments

You commented on Sader Neoklis's post almost 5 years

Thanks a lot. Appreciate it.

You commented on Sader Neoklis's post almost 5 years

Hello,

You can find my code below. I have modified the standard side nav
attributes for my site.

<ul class="side-nav"> 
        <li><a href="isi-yalitimi-nedir.php">ISI YALITIMI NEDİR?</a></li> 
        <li><a href="Nasil-calisir.php">NASIL ÇALIŞIR</a></li> 
        <li><a href="Farki.php">FARKI</a></li> 
        <li><a href="NASA-teknolojisi.php">ORJİNAL NASA TEKNOLOJİSİ</a></li>
        <li><a href="mantolama-nedir.php">MANTOLAMA NEDİR?</a></li> 
        <li><a href="enerji-kimlik-belgesi.php">ENERJİ KİMLİK BELGESİ</a></li>
        <li><a href="sikca-sorulan-sorular.php">SIKÇA SORULAN SORULAR</a></li> 
        <li><a href="Referanslar.php">REFERANSLARIMIZ</a></li> 
</ul>

  .side-nav {
    display: block;
    margin: 0;
    padding: 0 0;
    list-style-type: none;
    list-style-position: outside;
    font-family: 'Open Sans', Helvetica, Roboto, Arial, sans-serif; }
  .side-nav li {
    margin: 0 0 0 0;
    font-size: 1rem;
    font-weight: normal; }
  .side-nav li a:not(.button) {
    display: block;
    color: #666666;
    background-color: #EEEEEE;
    margin: 0;
    padding: 0.4800rem 0.500rem;
    border-bottom: 1px solid #999999; 
    /*text-align: right;*/} /*REVISED*/
  .side-nav li:first-child:not(.button) {
    border-top: 1px solid #999999;} /*ADDED TOP BORDER FOR THE FIRST LI ELEMENT*/
  .side-nav li a:not(.button):hover {
    background-color: #DAEEF3;    
    color: #666666; }
  .side-nav li a:not(.button):focus, .side-nav li a:not(.button):active {
    color: #666666;
    background-color: #EEEEEE;  
    }
  .side-nav li.active > a:first-child:not(.button) {
    color: #FFFFFF;
    background: rgb(37, 50, 66);
    background: -moz-linear-gradient(270deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    background: -webkit-linear-gradient(270deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    background: -o-linear-gradient(270deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    background: -ms-linear-gradient(270deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    background: linear-gradient(0deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    font-weight: normal;
    font-family: 'Open Sans', Helvetica, Roboto, Arial, sans-serif; }
  .side-nav li.divider {
    border-top: 1px solid;
    height: 0;
    padding: 0;
    list-style: none;
    border-top-color: white; }
  .side-nav li.heading {
    color: #008CBA;
    font-size: 0.875rem;
    font-weight: bold;
    text-transform: uppercase; }

You commented on Sader Neoklis's post almost 5 years

Hello,

My browsers display all webpages exactly the same. I have also found another post on webmonkey related to this issue:

http://www.webmonkey.com/2010/12/why-percentage-based-designs-dont-work-in-every-browser/

Chrome displays the webpage 60 pixel wider than the FF. I really don´t know what the issue is and no one seems to know what is the cause. It is really frustrating.

I think because Foundation is percentage based grid system, different browsers interpret the output differently.

You commented on Sader Neoklis's post almost 5 years

Hi,

I have temporarily uploaded the files here:

http://mirava.com.tr/test/foundation-demo.html

Please check it both on Chrome and FF. There is a 60 px difference between the two.

You commented on Sader Neoklis's post almost 5 years

Hello, I think Chrome just renders percentage based layouts differently but in my case it results is a 60px difference in width. I tried to set the width to 960px max but then internal divs did not scales down on Chrome. I think it is a cross browser compatibility issue.

You commented on Sader Neoklis's post almost 5 years

I haven´t made any changes on the mark-up. I have used one of the pre-made tamplates on the foundation page (http://foundation.zurb.com/templates.html) and for some reason Google chrome shows the entire page 60px wider. I have checked everything yet could not figure it out. About to go crazy !!! Any other thoughts???

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content