Web Analytics Made Easy -
StatCounter Table showing up underneath float - CodingForum

Announcement

Collapse
No announcement yet.

Table showing up underneath float

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Table showing up underneath float

    Hi guys!

    I am a college student just beginning my Web and Software Development program. I am taking a class on CSS and I'm having trouble with one thing in particular. On my site, I have a floating image on the right hand side, and I have a table that I want centered, but right now it is showing up partly underneath the float. How can I fix this?

    Here are the two pieces of code that are part of this, and a snapshot of how it's showing up right now.

    Code:
    table { text-align: center;
    		border: 1px solid hsl(0, 0%, 0%);
    		box-shadow: 2px 2px 2px;
    		width: 20%;
    		margin-left: auto;
    		margin-right: auto; }
    
    img {  float: right;
    		padding-right: 20px;
    		width: 40%;
    		overflow: auto;
    		display: inline;
    		clear: both;
    		margin-bottom: 20px;
    		margin-left: 20px; }
    Click image for larger version

Name:	Screen Shot 2016-09-28 at 11.00.07 AM.jpg
Views:	1
Size:	50.4 KB
ID:	2283629
    Last edited by vinyl-junkie; Sep 28, 2016, 11:45 PM. Reason: added code tags

  • #2
    CSS alone doesn’t tell us anything. CSS is styling HTML and without seeing the HTML (structure) we can’t tell what’s wrong or how to do it right.
    Stop solving problems you don’t yet have!

    Comment


    • #3
      Originally posted by VIPStephan View Post
      CSS alone doesn’t tell us anything. CSS is styling HTML and without seeing the HTML (structure) we can’t tell what’s wrong or how to do it right.
      Oh. My bad. Rookie mistake :P

      Here is the first half of the HTML, which should be all you need.

      Code:
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="murphy.css">
      <title>Murphy's Pet Sitting</title>
      </head>
      <body>
      <div id="wrapper">
      <header>
      <h1>Murphy's Pet Sitting</h1>
      </header>
      <main>
      <br><br><br>
      <img src="petpic1.jpg" alt="Me and my dog, Sophie">
      <br>
      <p>Hi! My name is Murphy Johnson and I love being with animals!</p>
      
      <p>I watch many different kinds of pets. So far, I have pet sat for:</p>
      <table border="visible">
      	<tr>
      		<td>Dogs</td>
      	</tr>
      	<tr>
      		<td>Cats</td>
      	</tr>
      	<tr>
      		<td>Ferrets</td>
      	</tr>
      	<tr>
      		<td>Parrots</td>
      	</tr>
      	<tr>
      		<td>Rabbits</td>
      	</tr>
      	<tr>
      		<td>Chinchillas</td>
      	</tr>
      	<tr>
      		<td>Gerbils</td>
      	</tr>
      	<tr>
      		<td>Hamsters</td>
      	</tr>
      </table>
      <br><br>
      Last edited by vinyl-junkie; Sep 28, 2016, 11:44 PM. Reason: added code tags

      Comment


      • #4
        Uhm, given you only have one TD per TR, with no obvious headings or columns, what the devil makes those a <table> or tabular data? that's just a list... in no specific order; we have tags for that, they're called <ul> and <li>

        From your code, I have NO clue what it is you are trying to accomplish though -- you seem to be trying to screw around with CSS values on a table for nothing... and worse trying to use presentational attributes that have no business in ANY HTML written after 1997.

        ... which means I question greatly the qualifications of whoever is teaching you HTML. Of course, I question the qualifications of anyone who'd tell you to wrap a first level heading <h1> in a <header> tag, to even USE the idiotically pointless <main> tag, to not have a media target on your stylesheet embed which is something you should have been taught the same time they told you about <link>, multiple breaks doing padding's job when there's no semantic reason to be using breaks...

        I know you're just starting out, but you might want to find a better source for learning from.
        Walk the dark path, sleep with angels, call the past for help.
        https://cutcodedown.com
        https://medium.com/@deathshadow

        Comment


        • #5
          Originally posted by deathshadow View Post
          Uhm, given you only have one TD per TR, with no obvious headings or columns, what the devil makes those a <table> or tabular data? that's just a list... in no specific order; we have tags for that, they're called <ul> and <li>

          From your code, I have NO clue what it is you are trying to accomplish though -- you seem to be trying to screw around with CSS values on a table for nothing... and worse trying to use presentational attributes that have no business in ANY HTML written after 1997.

          ... which means I question greatly the qualifications of whoever is teaching you HTML. Of course, I question the qualifications of anyone who'd tell you to wrap a first level heading <h1> in a <header> tag, to even USE the idiotically pointless <main> tag, to not have a media target on your stylesheet embed which is something you should have been taught the same time they told you about <link>, multiple breaks doing padding's job when there's no semantic reason to be using breaks...

          I know you're just starting out, but you might want to find a better source for learning from.
          Correct about the tables. I am just screwing around with them right now to figure out how they work (remember I just want it to figure out how to center it right now). I'll add more values later. But thanks for that...

          Well, I really have no idea. I have always been taught to use h1 in the header. I never understood the <main> tag but I've gotten flagged in previous assignments for not using it.

          Padding would make sense. I originally used <br> in my HTML before I learned CSS, and they have never really taught me the best way to use padding to eliminate the need for them.

          This is a college level course. It's probably me just not understanding what I'm learning. I'm not really that smart sometimes... I don't know. Whatever.

          Comment


          • #6
            HTML defines what the content is. CSS defines how the content should look.

            You should not worry about appearance at all when writing the HTML. Just use the most appropriate tag to define what each piece of content is.

            The <main> tag is a recently introduced tag for accessibility. It tells web readers and similar which part of the content is the real content of the page so that the rest of the page (navigation, ads, asides etc) can be ignored until later. It is a replacement for role="main". Deathshadow tends to mix that tag up with the pointless ones that were added for outlining which no browser has any plans to support such as <header> <aside> <footer> etc.
            Stephen
            Learn Modern JavaScript - http://javascriptexample.net/
            Helping others to solve their computer problem at http://www.felgall.com/

            Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

            Comment


            • #7
              Originally posted by felgall View Post
              It is a replacement for role="main".
              Which like the rest of Aria roles nothing of value implemented, and was, well...

              Originally posted by felgall View Post
              Deathshadow tends to mix that tag up with the pointless ones that were added for outlining which no browser has any plans to support such as <header> <aside> <footer> etc.
              Since they are ALL redundant to numbered headings and horizontal rules if you use them properly. In that way "main" is redundant to logical document order and the first HR or H2 on the page (whichever comes first).

              When people couldn't even be bothered to use the existing tags in 4 Strict properly, throwing more tags into the specification is not the answer! PARTICULARLY if you're just going to re-introduce all the redundancies HTML 4 was trying to get rid of.
              Walk the dark path, sleep with angels, call the past for help.
              https://cutcodedown.com
              https://medium.com/@deathshadow

              Comment


              • #8
                Originally posted by jacobgallipeau View Post
                Correct about the tables. I am just screwing around with them right now to figure out how they work (remember I just want it to figure out how to center it right now).
                Formatting tables for that type of alignment is a pain in the *** -- flat out. They are NOT a well behaved element when allowed to dynamically size. That said, we'd need to see not just the full markup, but the FULL CSS to be truly sure of how your elements are interacting. Incomplete snippets are like doing brain surgery through a keyhole without an endoscope.

                Also though, until you have a fully properly written content and semanitc markup -- with the markup chosen for what things are and NOT what you want them to look like -- you really have no business trying to apply ANY style to the page. To that end an incomplete table with no caption, TH, THEAD, TBODY, or SCOPE attributes probably isn't worth trying to "learn" anything about styling since you would NEVER in production code have a table that only has one TD per TR, and generally if all you have is TD, it's probably NOT tabular data.

                In that same way, targeting ALL images and ALL tables for the behaviors you're trying to use? That's asking for the page to bite you later in the design. That's why we have classes since are you REALLY sure that every <img> on the page is going to receive that exact same styling? I'm a stickler for avoiding "classes for nothing" but really you haven't written ENOUGH HTML to even be applying style yet.

                Which is why I suspect you're being taught it all wrong by someone likely not qualified to teach it.

                Originally posted by jacobgallipeau View Post
                This is a college level course. It's probably me just not understanding what I'm learning.
                I'd put a fair share of the blame on the educator themselves -- if they're marking you down for not using a tag that was only just introduced and serves ZERO legitimate purpose on a page, they likely have ZERO business teaching. Admittedly, I say that about most college level educators in IT. They're so full of **** and pack their students so full of **** every workplace I've ever been has had to spend months if not a full on year "deprogramming" the BS out of the student.

                But to be fair, I've rarely if ever met a "college level" educator in the field web development or design who had any business even flapping their gums on the topic. They've all universally been ignorant twits... I'm saying twit, I mean a more offensive word with a different vowel. Leeches upon the teat of society as it were.
                Walk the dark path, sleep with angels, call the past for help.
                https://cutcodedown.com
                https://medium.com/@deathshadow

                Comment


                • #9
                  Originally posted by deathshadow View Post
                  Which like the rest of Aria roles nothing of value implemented
                  Have you ever tested any pages in a web reader that does make use of the aria roles?
                  Stephen
                  Learn Modern JavaScript - http://javascriptexample.net/
                  Helping others to solve their computer problem at http://www.felgall.com/

                  Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

                  Comment


                  • #10
                    Originally posted by felgall View Post
                    Have you ever tested any pages in a web reader that does make use of the aria roles?
                    Is there even such a thing?!? No seriously... I've never come across one on any real platform. I mean, that emacs offshoot that tries but is utterly useless as an actual user-agent for... well... users! About the only thing it's good for is content theft.

                    Admittedly, content thieves seems to be the only legitimate audience for microformats, aria roles, much of the endless pointless META people slop into pages, or the lions share of these "new" HTML 5 tags. They don't seem to serve any real legitimate use for ACTUAL users -- normal or those with accessibility needs. At BEST they add pointless redundancies, at worst they're idiotic code bloat.

                    Which is why I won't be surprised when the day comes that we're being told to use <noun><verb><adverb><conjunction> and <adjective> tags just to make sure all the utterly pointless and uselessly redundant crap is slopped all over the place for an over 9000:1 code to content ratio.

                    Once you've got a logical document order with proper heading structure, anything more is just wasting bandwidth dicking around... or at least would be if UA's got off their asses and bothered finishing their HTML 4 implementations before diving into 5... which of course is why I expect to see ZERO movement on the front of any of the 5 or ARIA stuff doing a damned thing any time soon. They have a history of saying "Oh, this will help with accessibility on _______" and then not delivering for a decade or more.

                    ... or the browser makers who did care throwing it all in the bin and saying "You know what? **** having users!" like Opera did.
                    Last edited by deathshadow; Sep 30, 2016, 04:42 AM. Reason: Farking laptops, can't type on these things worth ****
                    Walk the dark path, sleep with angels, call the past for help.
                    https://cutcodedown.com
                    https://medium.com/@deathshadow

                    Comment


                    • #11
                      As far as I’ve understood the sectioning elements like article, section, aside, and everything related to that was introduced for better content publishing and automated processing. That is, an article or section marked as that would be an entity that can stand on its own and that could be re-used/republished in a very different context – therefore also the arbitrary heading numbering as you might not know in which context an article/section is re-used and embedded, so the hierarchy is supposed to be solely based on the nesting level of the article/section.

                      But we’re slightly diverging from the original question of jacobhallipeau. While it’s good to point out flaws in the approach or coding this shouldn’t lead to discussions/rants about basics. Please don’t overwhelm newbies with stuff that might be too much to process yet or is completely unrelated to their question.
                      Stop solving problems you don’t yet have!

                      Comment


                      • #12
                        Actually it just occurred to me, the table might be centered... floats aren't in flow unless you tell elements to treat them as in flow... a div wrapping the heading, paragraph and table with "overflow:hidden" on it may correct the problem since by the spec overflow makes containers obey floats instead of passing under them. Tables can sometimes ignore floats that way.

                        Again though, a complete version of the page might help diagnose it better. Snippets don't give the entire picture properly.
                        Walk the dark path, sleep with angels, call the past for help.
                        https://cutcodedown.com
                        https://medium.com/@deathshadow

                        Comment

                        Working...
                        X