Ok - I admit it - I still use nested tables for gals - I need a good DIV tutorial....

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • EddyTheDog
    Just Doing My Own Thing
    • Jan 2011
    • 25433

    #1

    Ok - I admit it - I still use nested tables for gals - I need a good DIV tutorial....

    I have been playing with DreamWeaver all night and I can not get the hang of these new fangled 'div' things.

    They don't align properly and pop in any place on the page they bloody well like!

    I need it to work with the Repeat Region as well as I do most of my gals from a database, and that makes it even worse.

    I have Googled until my fingers are numb and I can't find a tutorial that helps.

    HELP before another laptop is launched out of the window....
  • FlexxAeon
    Confirmed User
    • May 2003
    • 3765

    #2
    lol....i remember tables

    if the web tutorials aren't doing it for you then you must be having a specific problem?

    if you're not using divs with CSS then you're only doing it half right
    flexx [dot] aeon [at] gmail

    Comment

    • webboy21
      Confirmed User
      • Nov 2004
      • 573

      #3
      willing to help...for a price of course ;)
      Available for: CSS | XHTML | PHP | MySQL | Webdesign

      Comment

      • FlexxAeon
        Confirmed User
        • May 2003
        • 3765

        #4
        just offhand i'd do a gal something like:

        CSS
        Code:
        .main {
             margin: 0;
             padding: 0;
             width: 800px;
        }
        
        .thumbholder {
             float: left;
             margin: 0;
             padding: 0;
             width: 200px;
             height: 200px;
        }
        HTML
        Code:
        <div class="main">
        
             <div class="thumbholder">
             <img src="thumb.jpg" />
             </div>
        
        
             <div class="thumbholder">
             <img src="thumb.jpg" />
             </div>
        
             (etc as many times as you need thumbs)
        
        </div>
        but thats bare-bones, basic, no style whatsoever. just a jump off point
        flexx [dot] aeon [at] gmail

        Comment

        • EddyTheDog
          Just Doing My Own Thing
          • Jan 2011
          • 25433

          #5
          Originally posted by webboy21
          willing to help...for a price of course ;)
          Another couple of days/nights of this and I might even take you up on that!

          Comment

          • EddyTheDog
            Just Doing My Own Thing
            • Jan 2011
            • 25433

            #6
            Originally posted by FlexxAeon
            just offhand i'd do a gal something like:

            CSS
            Code:
            .main {
                 margin: 0;
                 padding: 0;
                 width: 800px;
            }
            
            .thumbholder {
                 float: left;
                 margin: 0;
                 padding: 0;
                 width: 200px;
                 height: 200px;
            }
            HTML
            Code:
            <div class="main">
            
                 <div class="thumbholder">
                 <img src="thumb.jpg" />
                 </div>
            
            
                 <div class="thumbholder">
                 <img src="thumb.jpg" />
                 </div>
            
                 (etc as many times as you need thumbs)
            
            </div>
            but thats bare-bones, basic, no style whatsoever. just a jump off point
            That does help.

            I think it is the 'float' that I am getting wrong.

            Thanks

            Comment

            • FlexxAeon
              Confirmed User
              • May 2003
              • 3765

              #7
              Originally posted by EddyTheDog
              That does help.

              I think it is the 'float' that I am getting wrong.

              Thanks
              yeah floats can get ugly. hard to explain but varying div heights will make them go awry. they'll also go bad if they "think" they have more width to span across than they actually do. comes down to pixels being exact. to have full control over them make sure that divs that are floating one after the other are either all the same height or are somehow cleared inbetween.
              flexx [dot] aeon [at] gmail

              Comment

              • munki
                Do Fun Shit.
                • Dec 2004
                • 13393

                #8
                Cock Swallowing Sluts ftw...

                I have the simplest tastes. I am always satisfied with the best.” -Oscar Wilde

                Comment

                • EddyTheDog
                  Just Doing My Own Thing
                  • Jan 2011
                  • 25433

                  #9
                  Originally posted by FlexxAeon
                  yeah floats can get ugly. hard to explain but varying div heights will make them go awry. they'll also go bad if they "think" they have more width to span across than they actually do. comes down to pixels being exact. to have full control over them make sure that divs that are floating one after the other are either all the same height or are somehow cleared inbetween.
                  I think you have cracked my problem.

                  I have been adding content and letting the div deal with size (height) itself. I need to fix the size of the div and make sure it can fit the content. That combined with my confusion over floats is causing the issues I am sure.

                  So bloody obvious!

                  Should have come to GFY first .

                  Thanks Again.

                  Damian
                  Last edited by EddyTheDog; 10-25-2011, 09:47 PM.

                  Comment

                  • raymor
                    Confirmed User
                    • Oct 2002
                    • 3745

                    #10
                    Here's a simple recipe.

                    Start with a fresh page, nothing but thumbs iin divs to start. That will isolate problems from other supposedly unrelated CSS or elements.

                    Your divs contain thumbs. Thumbs, being images, are sized in pixels, so the divs will be sized in pixels. Set the width of that class of divs to be a few pixels wider than the thumbs they contain. (Only images and things that align to images should be set in pixels, btw.)

                    divs are normally block elements, meaning that they force a new line. You don't want a new line for each image, so in your CSS set that div class to "display: inline;". You're DONE! You have neat rows of images!

                    You can also set those divs to float: left, but float takes some getting used to. It's tricky. Play with floats some time, but first get comfortable with the basics of the block model.

                    Now you probably want to put this group of thumbs in a real page. Hey, we just said the word "group". That's what a div REALLY is, a group. So will make all those separate thumbs into group by putting a div tag around them. In your css, set that div to have a solid green border so you can see the outline of the group of thumbs. This marks your selfs contained box of thumbs. Copy - paste it into your page. The stuff inside the green box, the thumbs, should look just the same as it did on own page, since it's self contained. If it doesn't, remove whatever CSS is accidentally affecting the thumbs. Don't "fix" it for now, just remove it. Later you can put it back, but make it more specific so it affects only what it's supposed to affect and doesn't break your thumbs.

                    Perhaps that group of thumbs, the big green box, needs to be resized, have margins added, etc. to better fit the page. You do that by applying CSS to he big green div, not what's inside it. You may want to set it's width as a percentage, such as 50% to be half the page width.

                    If something breaks, more often than not the fix is to GET RID of some CSS. Most pages have too many CSS positioning and sizing rules that make too many assumptions, rather than not enough rules. It's the browser's job to figure out how to make the page look "right" on any given screen in any given size of window. Let it do it's job, making limited CSS rules only where the browser doesn't make it look nice when left to do it's own job.
                    For historical display only. This information is not current:
                    support&#64;bettercgi.com ICQ 7208627
                    Strongbox - The next generation in site security
                    Throttlebox - The next generation in bandwidth control
                    Clonebox - Backup and disaster recovery on steroids

                    Comment

                    • EddyTheDog
                      Just Doing My Own Thing
                      • Jan 2011
                      • 25433

                      #11
                      Originally posted by raymor
                      Here's a simple recipe.

                      Start with a fresh page, nothing but thumbs iin divs to start. That will isolate problems from other supposedly unrelated CSS ..........
                      More great stuff.

                      Thanks!

                      Comment

                      • jimmycooper
                        Confirmed User
                        • May 2010
                        • 4016

                        #12
                        Originally posted by raymor
                        Here's a simple recipe.

                        Start with a fresh page, nothing but thumbs iin divs to start. That will isolate problems from other supposedly unrelated CSS or elements.

                        Your divs contain thumbs. Thumbs, being images, are sized in pixels, so the divs will be sized in pixels. Set the width of that class of divs to be a few pixels wider than the thumbs they contain. (Only images and things that align to images should be set in pixels, btw.)

                        divs are normally block elements, meaning that they force a new line. You don't want a new line for each image, so in your CSS set that div class to "display: inline;". You're DONE! You have neat rows of images!

                        You can also set those divs to float: left, but float takes some getting used to. It's tricky. Play with floats some time, but first get comfortable with the basics of the block model.

                        Now you probably want to put this group of thumbs in a real page. Hey, we just said the word "group". That's what a div REALLY is, a group. So will make all those separate thumbs into group by putting a div tag around them. In your css, set that div to have a solid green border so you can see the outline of the group of thumbs. This marks your selfs contained box of thumbs. Copy - paste it into your page. The stuff inside the green box, the thumbs, should look just the same as it did on own page, since it's self contained. If it doesn't, remove whatever CSS is accidentally affecting the thumbs. Don't "fix" it for now, just remove it. Later you can put it back, but make it more specific so it affects only what it's supposed to affect and doesn't break your thumbs.

                        Perhaps that group of thumbs, the big green box, needs to be resized, have margins added, etc. to better fit the page. You do that by applying CSS to he big green div, not what's inside it. You may want to set it's width as a percentage, such as 50% to be half the page width.

                        If something breaks, more often than not the fix is to GET RID of some CSS. Most pages have too many CSS positioning and sizing rules that make too many assumptions, rather than not enough rules. It's the browser's job to figure out how to make the page look "right" on any given screen in any given size of window. Let it do it's job, making limited CSS rules only where the browser doesn't make it look nice when left to do it's own job.
                        Great stuff indeed. As ghetto as this may sound, and given that all of my galleries are done on a black background, my method has been to either scale or resize a black strip between each thumb. Kind of like this one.


                        Comment

                        • seeandsee
                          Check SIG!
                          • Mar 2006
                          • 50945

                          #13
                          any TOOL to help me out with css, i dont want to code css :D
                          BUY MY SIG - 50$/Year

                          Contact here

                          Comment

                          • raymor
                            Confirmed User
                            • Oct 2002
                            • 3745

                            #14
                            Originally posted by seeandsee
                            any TOOL to help me out with css, i dont want to code css :D
                            Plenty of them, but like any tool for doing any job the tool is only useful after you know how to do the job.

                            Are you asking for a spark plug wrench, or are you asking for a robot that knows how to change spark plugs because you don't know how? There is no tool that knows how to do graphic design.
                            For historical display only. This information is not current:
                            support&#64;bettercgi.com ICQ 7208627
                            Strongbox - The next generation in site security
                            Throttlebox - The next generation in bandwidth control
                            Clonebox - Backup and disaster recovery on steroids

                            Comment

                            • PowerCum
                              CjOverkill
                              • Apr 2003
                              • 1328

                              #15
                              We use a combination of divs and tables.

                              The main problem with divs is that img into them are not downloaded in sequential way, while with tables you can control what will show first on the surfer browser and what will not.

                              We also use compression to send all the html to the surfer as fast as possible.

                              In any case, you can achieve the same crap rendering speeds with tables and with divs. From all our tests, the fastest way is a combination of divs + tables.
                              CjOverkill Traffic Trading Script
                              Free, secure and fast traffic trading script. Get your copy now

                              Comment

                              • blackmonsters
                                Making PHP work
                                • Nov 2002
                                • 20990

                                #16
                                Tables work great.

                                I value the idea of "tableless design" just as much as I value this "<br />"

                                Fucking bullshit.
                                Your neighbor will murder you with frogs
                                Click here

                                Comment

                                • potter
                                  Confirmed User
                                  • Dec 2004
                                  • 6559

                                  #17
                                  Originally posted by blackmonsters
                                  Tables work great.

                                  I value the idea of "tableless design" just as much as I value this "<br />"

                                  Fucking bullshit.
                                  Only on GFY will you see some guy ranting about how he's still using html code techniques from 15 years ago like he's right in doing so.

                                  Comment

                                  • FlexxAeon
                                    Confirmed User
                                    • May 2003
                                    • 3765

                                    #18
                                    Originally posted by potter
                                    Only on GFY will you see some guy ranting about how he's still using html code techniques from 15 years ago like he's right in doing so.
                                    i'm on a crusade to bring back html <layer> and image maps
                                    flexx [dot] aeon [at] gmail

                                    Comment

                                    • amateurbfs
                                      Confirmed User
                                      • Jun 2010
                                      • 1316

                                      #19
                                      Originally posted by potter
                                      Only on GFY will you see some guy ranting about how he's still using html code techniques from 15 years ago like he's right in doing so.
                                      Lets not forget <font>

                                      Comment

                                      • Naughty
                                        Confirmed User
                                        • Jul 2001
                                        • 6478

                                        #20
                                        I use tables all the time. The ones using wysiwyg only should be worried, not us;-)
                                        seks.ai for sale - ping me

                                        Comment

                                        • seeric
                                          ..........
                                          • Aug 2004
                                          • 41917

                                          #21
                                          www.lynda.com

                                          Don't look back. Best learning site ever.

                                          Comment

                                          • Evil Chris
                                            OG
                                            • Dec 2001
                                            • 13247

                                            #22
                                            I really should brush up on my CSS too.


                                            It PAYZE to post on GFY

                                            chris at payze.com | Skype chriswrp

                                            Comment

                                            • Why
                                              MFBA
                                              • Mar 2003
                                              • 7230

                                              #23
                                              http://w3schools.com/ is a good source for basic tutorials.

                                              Comment

                                              • Lace
                                                Too lazy to set a custom title
                                                • Mar 2004
                                                • 16116

                                                #24
                                                Originally posted by seeric
                                                www.lynda.com

                                                Don't look back. Best learning site ever.
                                                +1
                                                Your Paysite Partner
                                                Strength In Numbers!
                                                StickyDollars | RadicalCash | KennysPennies | HomegrownCash

                                                Comment

                                                • wehateporn
                                                  Promoting Debate on GFY
                                                  • Apr 2007
                                                  • 27176

                                                  #25




                                                  I could do with brushing up on that stuff, with coding I tend to learn just what I need to
                                                  Last edited by wehateporn; 10-26-2011, 03:30 PM.

                                                  Comment

                                                  • CyberHustler
                                                    Masterbaiter
                                                    • Feb 2006
                                                    • 28750

                                                    #26
                                                    I still use tables on some basic sites... fuck it.
                                                    Last edited by CyberHustler; 10-26-2011, 03:53 PM. Reason: FUCK YOU FAGGOT!
                                                    “If you can convince the lowest white man he’s better than the best colored man, he won’t notice you’re picking his pocket. Hell, give him somebody to look down on, and he’ll empty his pockets for you.”

                                                    Comment

                                                    • blackmonsters
                                                      Making PHP work
                                                      • Nov 2002
                                                      • 20990

                                                      #27
                                                      Originally posted by potter
                                                      Only on GFY will you see some guy ranting about how he's still using html code techniques from 15 years ago like he's right in doing so.
                                                      It's better just because it's new right?



                                                      Dragging your pants off your ass is new, but I don't think it's better than pulling up
                                                      my pants which is 1000's of years old.

                                                      Your neighbor will murder you with frogs
                                                      Click here

                                                      Comment

                                                      • wehateporn
                                                        Promoting Debate on GFY
                                                        • Apr 2007
                                                        • 27176

                                                        #28
                                                        Originally posted by blackmonsters
                                                        It's better just because it's new right?



                                                        Dragging your pants off your ass is new, but I don't think it's better than pulling up
                                                        my pants which is 1000's of years old.

                                                        It's one of those assumptions that people make "It's newer, so it's better!". It's like when everyone started by the first flatscreens and the colour was pretty poor. In some cases a basic html page can be exactly what the doctor ordered and can out-perform a fancy CMS

                                                        Comment

                                                        • garce
                                                          Confirmed User
                                                          • Oct 2001
                                                          • 7103

                                                          #29
                                                          "New" is a bit of stretch. A basic html page does not need tables. Honestly, I don't think I've used a table in six years. No need - I'm not posting spreadsheets.

                                                          Comment

                                                          • TheDoc
                                                            Too lazy to set a custom title
                                                            • Jul 2001
                                                            • 13827

                                                            #30
                                                            Nothing wrong with a table in a gallery.... as long as you're not nesting them crazy, it's fine.

                                                            Total trash html pages convert just as good or bad, as perfectly created html pages.

                                                            Use whatever method allows you to create them the fastest and skip all the "you should do it this way" bullshit.
                                                            ~TheDoc - ICQ7765825
                                                            It's all disambiguation

                                                            Comment

                                                            • jimmycooper
                                                              Confirmed User
                                                              • May 2010
                                                              • 4016

                                                              #31
                                                              I don't know how to do tables or css and even if I did, I would still want to lay out my galleries exactly as I do now via my 'black strip method'. Minimalist but effective like these.

                                                              http://www.starletsheet.com/tgp/nude...e-black-heels/
                                                              http://www.starletsheet.com/tgp/nude...ne-sunglasses/

                                                              Given that, and also considering that submitting galleries is only a small part of what I should be doing, would it benefit me to learn either? I obviously like to learn as much as possible about everything, but time constraints sometimes make it difficult

                                                              Comment

                                                              • potter
                                                                Confirmed User
                                                                • Dec 2004
                                                                • 6559

                                                                #32
                                                                Originally posted by blackmonsters
                                                                It's better just because it's new right?



                                                                Dragging your pants off your ass is new, but I don't think it's better than pulling up
                                                                my pants which is 1000's of years old.

                                                                Listen you little ignorant shit. Maybe you should go pick up a book, go to school, or do some research before you go spouting off again. An education might come in handy for you. CSS isn't new, it's been around since 1996. The technique of using tables for layout is old. Mind you this is a fucking webmaster hub, you just basically stated to the world you don't have the simplest idea of HTML standards in front of hundreds if not thousands of webmasters. We're talking the most BASIC code known to man - HTML - you don't understand. Wow.

                                                                Since you seem to have your head so far up your own ass to understand anything I'll give you a brief summary. HTML tables were created to allow the creation of uniform tabular data on web pages. It was basically the equivalent of creating an xcel spreadsheet on the web. The reason you use tables for layout is because when the web first started no one knew what the fuck they were doing, and they found it easy to instead of using the table tag as intended - to use it for layout. There wasn't much of a learning curve, and it was far easier to pick up (mind you there wasn't much of any schooling at the time for this type of stuff, people had to learn on their own).

                                                                It's the equivalent of flipping a screw driver around and using the butt of it as a hammer, because you don't know any better.

                                                                But no, you go right ahead and spout off like you know what the fuck you're talking about. You go right ahead stating you don't understand HTML. It's not like you're doing so in front of webmaster peers or anything. It's not with two clicks of a mouse you could be learning your trade, understanding it, and bettering yourself. Instead you keep up the ignorant "I'm a backwards ass dude on the interwebs and even though I don't even know HTML, I'm going to post up completely incorrect statements to webmasters".

                                                                This isn't an argument. There's no opinion. HTML is HTML, there is no interpretation, it has very specific documentation on how it works and how it's designed. It's like spelling. You can go spelling things all fucked up as much as you want, but if you tell people it's ok to spell things wrong - you're just going to look like that much more of a moron.

                                                                Comment

                                                                • magicmike
                                                                  Confirmed User
                                                                  • Feb 2003
                                                                  • 2384

                                                                  #33
                                                                  I think people are just happy using tables to create a simple gallery rather than css and div's etc.

                                                                  We use css, especially in any modern functional site. But if I just need to space a few images, on a quick gallery a table isn't going to be bad, or throw up a table of links.
                                                                  Just Porno with both classic and mobile porn versions.
                                                                  Gay Porn Our mega gay site tranny porn

                                                                  Comment

                                                                  • TheDoc
                                                                    Too lazy to set a custom title
                                                                    • Jul 2001
                                                                    • 13827

                                                                    #34
                                                                    Originally posted by potter
                                                                    Listen you little ignorant shit. Maybe you should go pick up a book, go to school, or do some research before you go spouting off again. An education might come in handy for you. CSS isn't new, it's been around since 1996. The technique of using tables for layout is old. Mind you this is a fucking webmaster hub, you just basically stated to the world you don't have the simplest idea of HTML standards in front of hundreds if not thousands of webmasters. We're talking the most BASIC code known to man - HTML - you don't understand. Wow.

                                                                    Since you seem to have your head so far up your own ass to understand anything I'll give you a brief summary. HTML tables were created to allow the creation of uniform tabular data on web pages. It was basically the equivalent of creating an xcel spreadsheet on the web. The reason you use tables for layout is because when the web first started no one knew what the fuck they were doing, and they found it easy to instead of using the table tag as intended - to use it for layout. There wasn't much of a learning curve, and it was far easier to pick up (mind you there wasn't much of any schooling at the time for this type of stuff, people had to learn on their own).

                                                                    It's the equivalent of flipping a screw driver around and using the butt of it as a hammer, because you don't know any better.

                                                                    But no, you go right ahead and spout off like you know what the fuck you're talking about. You go right ahead stating you don't understand HTML. It's not like you're doing so in front of webmaster peers or anything. It's not with two clicks of a mouse you could be learning your trade, understanding it, and bettering yourself. Instead you keep up the ignorant "I'm a backwards ass dude on the interwebs and even though I don't even know HTML, I'm going to post up completely incorrect statements to webmasters".

                                                                    This isn't an argument. There's no opinion. HTML is HTML, there is no interpretation, it has very specific documentation on how it works and how it's designed. It's like spelling. You can go spelling things all fucked up as much as you want, but if you tell people it's ok to spell things wrong - you're just going to look like that much more of a moron.
                                                                    http://www.w3.org/TR/CSS2/tables.html
                                                                    ~TheDoc - ICQ7765825
                                                                    It's all disambiguation

                                                                    Comment

                                                                    • FlexxAeon
                                                                      Confirmed User
                                                                      • May 2003
                                                                      • 3765

                                                                      #35
                                                                      i love how these discussions always spiral into a big geek battle royale. like http://gfy.com/showthread.php?t=866382 - 4 pages of code yammering

                                                                      Originally posted by potter
                                                                      It's the equivalent of flipping a screw driver around and using the butt of it as a hammer, because you don't know any better.
                                                                      oh snap
                                                                      flexx [dot] aeon [at] gmail

                                                                      Comment

                                                                      • blackmonsters
                                                                        Making PHP work
                                                                        • Nov 2002
                                                                        • 20990

                                                                        #36
                                                                        Originally posted by potter
                                                                        Listen you little ignorant shit. Maybe you should go pick up a book, go to school, or do some research before you go spouting off again. An education might come in handy for you. CSS isn't new, it's been around since 1996. The technique of using tables for layout is old. Mind you this is a fucking webmaster hub, you just basically stated to the world you don't have the simplest idea of HTML standards in front of hundreds if not thousands of webmasters. We're talking the most BASIC code known to man - HTML - you don't understand. Wow.

                                                                        Since you seem to have your head so far up your own ass to understand anything I'll give you a brief summary. HTML tables were created to allow the creation of uniform tabular data on web pages. It was basically the equivalent of creating an xcel spreadsheet on the web. The reason you use tables for layout is because when the web first started no one knew what the fuck they were doing, and they found it easy to instead of using the table tag as intended - to use it for layout. There wasn't much of a learning curve, and it was far easier to pick up (mind you there wasn't much of any schooling at the time for this type of stuff, people had to learn on their own).

                                                                        It's the equivalent of flipping a screw driver around and using the butt of it as a hammer, because you don't know any better.

                                                                        But no, you go right ahead and spout off like you know what the fuck you're talking about. You go right ahead stating you don't understand HTML. It's not like you're doing so in front of webmaster peers or anything. It's not with two clicks of a mouse you could be learning your trade, understanding it, and bettering yourself. Instead you keep up the ignorant "I'm a backwards ass dude on the interwebs and even though I don't even know HTML, I'm going to post up completely incorrect statements to webmasters".

                                                                        This isn't an argument. There's no opinion. HTML is HTML, there is no interpretation, it has very specific documentation on how it works and how it's designed. It's like spelling. You can go spelling things all fucked up as much as you want, but if you tell people it's ok to spell things wrong - you're just going to look like that much more of a moron.
                                                                        You have french fries in your sig.





                                                                        Your neighbor will murder you with frogs
                                                                        Click here

                                                                        Comment

                                                                        Working...