Greenguy's Board
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

Greenguy's Board (http://www.greenguysboard.com/board/index.php)
-   General Business Knowledge (http://www.greenguysboard.com/board/forumdisplay.php?f=10)
-   -   Please To Have Your Opinions (aka Dummy Wants To Edit 150+ Categories Again) (http://www.greenguysboard.com/board/showthread.php?t=67281)

Greenguy 2015-04-20 01:18 PM
Please To Have Your Opinions (aka Dummy Wants To Edit 150+ Categories Again)
 
I got a bug up my ass :D

With my current layout, the list of other categories is on the bottom of each category page:
http://www.link-o-rama.com/greenguy/1testold.htm

I'm thinking about adding the list of categories to either:
The Left Side Of The Pages: http://www.link-o-rama.com/greenguy/1testleft.htm
The Right Side Of The Pages: http://www.link-o-rama.com/greenguy/1testright.htm

If I do decide to put the list on either side, it wouldn't be difficult to do, just time consuming (but not 2 years like last time)

So, what's everyone's opinion? Please vote & comment if you feel it's necessary |shake|

ecchi 2015-04-20 03:35 PM
I voted left (damn my politics :) ) but that is assuming you thin the page to fit. It needs to be "less fixed" if you are going to add more columns. At the moment those fat banners force it too wide for an extra column. Make the size a percentage of the width instead of fixed eg:
Code:
Simple but effective.

Also, the right column is for good sponsor ads, not for housekeeping or menus. You get most clicks in the right column.

Greenguy 2015-04-20 03:48 PM
Oh fuck - when I was testing things, I did it on a bannerless page, so everything fit.

Back to the drawing board I guess.

mOrrI 2015-04-20 05:39 PM
What resolution are you in?

pc 2015-04-21 07:43 AM
Why dont you use the css3 drop down menu from top or slide from left or right ( personally I would choose slide from left ) , that also looks great on mobile phones.)

http://callmenick.com/_development/slide-push-menus/
This way you wouldn't need to worry about resolution.

I would vote for left slide menu but theres no option for that in the pool. Edit.

Greenguy 2015-04-21 09:14 AM
Thanks pc - I will def look into that |thumb

Greenguy 2015-04-21 10:09 AM
OK - looking at what pc posted, I do like the idea of the menu sliding in from the left. But, you need to click a static "button" in order for the menu to appear. Seeing as most of my pages are really long, I thought a "button" that "hovered" on the top left of the page would be a good idea. So no matter where you are on the page, the nav "button" is there on the top left.

My problem, as you might have guessed from all the quotes, is that I'm not sure what these "things" are called in the HTML world. I searched for "hovering button" on that site pc linked to & got a bunch of things for when your mouse moves over a "button" or area of the page.

So if anyone has any tips as far as the wording on what I'm looking for...|shake|

Greenguy 2015-04-21 10:14 AM
...also, does anyone know if it matters that the menu sliding in will be longer/taller than the browser?

pc 2015-04-21 10:14 AM
You can have sliding div stick out like 10px from the left when its on hidden mode. On that 10px space you can have arrow pointing right side or image placed vertically with "menu categories" or whatever you like that serves as a static button.
Also since you have 150 categories or so you can make the panel absolute and scrollable.

pc 2015-04-21 10:16 AM
Make your test page and we go from there.

Greenguy 2015-04-21 10:24 AM
Quote:
Originally Posted by pc (Post 538214)
Make your test page and we go from there.
I'm actually working on that right now :)

Greenguy 2015-04-21 11:01 AM
OK - what did I screw up?
http://www.link-o-rama.com/greenguy/1-slide.htm

Greenguy 2015-04-21 11:49 AM
Actually, nevermind. I obviously screwed something up by adding my own stuff to the example.

I'm going to put his example online, make sure that works, then I'll monkey around with adding my own stuff & making changes.

Greenguy 2015-04-21 12:46 PM
OK - I'm stuck :(
http://www.link-o-rama.com/greenguy/1-slide.htm

I've got a button that is a standard button just sitting on the top of the page. When you click it, a menu does come out from the left, but it's not scrollable, and the "close" button on top doesn't work :(

Cleo 2015-04-21 04:11 PM
Quote:
Originally Posted by Greenguy (Post 538220)
OK - I'm stuck :(
http://www.link-o-rama.com/greenguy/1-slide.htm

I've got a button that is a standard button just sitting on the top of the page. When you click it, a menu does come out from the left, but it's not scrollable, and the "close" button on top doesn't work :(
Safari is showing this as an error but I don't know how to fix it.

http://www.greenguysboard.com/board/...1&d=1429647021

Also you have the Google Analytics in the wrong place. It should be before the closing head tag.

ecchi 2015-04-21 04:19 PM
I know you probably won't care about this but be aware that I think you will find that what you are trying to do probably won't work in XP IE8. (The broken example does what you said on my Vista box but not on my XP IE8 box. Although, on the bright side, what does appear in XP IE8 is scrollable, which it isn't on Vista!)

ecchi 2015-04-21 04:22 PM
Have you noticed how we are helpfully posting more problems for you, but not giving you one iota of solutions!
We are nice like that. :)

pc 2015-04-21 06:10 PM
Working code below is the http://callmenick.com/post/slide-and...s3-transitions source code with bits of your css but now you have to eliminate things step by step to see what was the problem.
Couldn't figure it out so I started from the begining.
Hope that helps.

index.html

Code:






Slide And Push Menus With CSS3 Transitions
   































   

       

           
           
           
           
           
       

   

   
   

       

           

               
               
           

       

       

           

               

Off Screen Menus That Transition Into View Using CSS3


           

       

   



   

       

           
           

               
             
           


           

               

Vegetables



               

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.



               

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.



               

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.


               
           


       

   



   

       

           

               
               
               
           

           

               
                    © 2014, Nick Salloum
                    callmenick.com
               
           

       

   











base.css

Code:
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* CSS Reset
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
body {
    line-height: 1
}
h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-weight: normal;
}
ol,
ul {
    list-style: none
}
blockquote {
    quotes: none
}
blockquote:before,
blockquote:after {
    content: '';
    content: none;
}
del {
    text-decoration: line-through
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a img {
    border: none
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Globals
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background-color: #67b5d1;
    color: #505050;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    /* line-height: 1.8; */
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1;
    font-weight: 400;
}
a {
    text-decoration: none;
    color: #67b5d1;
}
a:hover {
    color: #3184a1
}
/* clear floated divs */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Template
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
#wrapper {
    width: 100%;
    margin: 0 auto;
}
#main {
    background-color: #fff;
    padding: 30px 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Info Bar
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
#info-bar {
    background-color: #40a2c5
}
#info-bar a {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    display: inline-block;
    margin: 0;
    padding: 10px;
}
#info-bar a:hover {
    background-color: #3184a1
}
span.all-tutorials,
span.back-to-tutorial {
    display: block;
    width: 50%;
}
span.all-tutorials {
    float: left;
    text-align: left;
}
span.back-to-tutorial {
    float: right;
    text-align: right;
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Header
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
header {
    padding: 30px 0
}
#title {
    text-align: center
}
#title h1 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 10px;
}
#title h2 {
    color: #b5dbe9;
    font-size: 20px;
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Footer
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
footer {
    padding: 30px 0;
    text-align: center;
}
footer span {
    color: #fff
}
footer span a {
    color: #b5dbe9
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Media Queries
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
@media all and (max-width: 600px) {
  #info-bar a {
      display: block
  }
  span.all-tutorials,
  span.back-to-tutorial {
      width: 100%
  }
  span.all-tutorials,
  span.back-to-tutorial {
      float: none;
      text-align: center;
  }
  span.all-tutorials {
      border-bottom: solid 1px #3184a1
  }
  #title h1 {
      font-size: 20px
  }
  #title h2 {
      font-size: 16px
  }
}

style.css


Code:
body { margin:0px 0px; text-align:center; font-family:'Comic Sans MS',Arial,sans-serif; font-size:20px; color:#00f600; background:#000000; }
a:link { color:#00ce00; }
a:visited { color:#00a700; }
a:hover { color:#1eff1e; text-decoration:none; }
a:active { color:#6cff6c; text-decoration:none; }

body {
    overflow-x: hidden
}
#wrapper {
    position: relative;
    z-index: 10;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
section {
    margin-bottom: 30px
}
section h1 {
    font-family: "Oswald", sans-serif;
    margin-bottom: 10px;
}
section p {
    margin-bottom: 30px
}
section p:last-child {
    margin-bottom: 0
}
section:last-child {
    margin-bottom: 0
}
section.toggle {
    text-align: center
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}
nav.menu {
    position: fixed;
    z-index: 20;
    background-color: #003300;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
nav.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav.menu a {
    font-weight: 200;
    color: #00ff00;
}
button.close-menu {
    background-color: #006600;
    color: #00ff00;
}
button.close-menu:focus {
    outline: none
}
nav.slide-menu-left {
    top: 0;
    width: 200px;
    height: 100%;
}
nav.slide-menu-left li {
    display: block;
    text-align: center;
}
nav.slide-menu-left li:first-child {
    border-top: none
}
nav.slide-menu-left li:last-child {
    border-bottom: none
}
nav.slide-menu-left a {
    display: block;
    padding: 1px;
    font-size: 14px;
}
nav.slide-menu-left button.close-menu {
    margin: 10px 0;
    padding: 10px 30px;
    background-color: #006600;
    color: #00ff00;
}
nav.slide-menu-left {
    left: -200px}
body.sml-open nav.slide-menu-left {
    left: 0
}

Greenguy 2015-04-22 07:33 AM
Won't putting that base.css on the pages screw up my existing (basic) HTML?

Meaning, it's got this in there:
Code:
td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
Won't that mess up all my existing tables?

Greenguy 2015-04-22 07:36 AM
Quote:
Originally Posted by Cleo (Post 538226)
Also you have the Google Analytics in the wrong place. It should be before the closing head tag.
I double checked & I have it in the right place according to what's in my analytics account:
Quote:
PHP Implementation
Create a PHP file named "analyticstracking.php" with the code above and include it on each PHP template page. Then, add the following line to each template page immediately after the opening tag:

pc 2015-04-22 07:49 AM
Quote:
Originally Posted by Greenguy (Post 538235)
Won't putting that base.css on the pages screw up my existing (basic) HTML?

Meaning, it's got this in there:
Code:
td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
Won't that mess up all my existing tables?
Not really sure, does it work without it ?

But you can apply separate classes to different tables if yes.

I would take out any unnecessary css styles checking one by one each time if it works or not ( disable chrome cache pages for very often checking for changes )

Greenguy 2015-04-22 08:01 AM
Something just crossed my mind: aside from the style of the button (which I'm pretty sure I can figure out) the script does work as described on that site (except for the Close button)

So what I need to know how to do is this:
Quote:
Originally Posted by pc (Post 538213)
Also since you have 150 categories or so you can make the panel absolute and scrollable.
I did try to take the height tag out of the css but it loaded just the same.

pc 2015-04-22 08:07 AM
overflow-y:scroll;

The scroll itself you can also nicely style.

Greenguy 2015-04-22 08:24 AM
Quote:
Originally Posted by pc (Post 538241)
overflow-y:scroll;

The scroll itself you can also nicely style.
That's good bingo! |thumb I also made some progress on the button |lol|

http://www.link-o-rama.com/greenguy/1-slide.htm

pc 2015-04-22 08:41 AM
Once you finish menu and apply it to your site we will start implementing thumbnails upload and merging it with db.
|loony||boobies|


All times are GMT -4. The time now is 07:33 PM.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.1
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
© Greenguy Marketing Inc