code help please for a new page

  • Hi,

    Im new to wordpress and site building in general ive tried my very best to use w3school site and others to try and come up with what im after and struggling after hours of trying
    can someone help me please?

    Im creating a new page called “Team Profiles” and within that page will be something like this https://postimg.org/image/g73wmlzmd/
    i want 3x images center of a page with a few lines of txt under each picture so i can edit it..
    Player Name
    Age
    location
    Highest break
    etc
    also above the 3x images a area of team name and all this process to repeat under each team changing pictures and editing as i wish

    If someone could give me a hand please or start me off im really lost ive tried on my image above but no idea how to center or add profile text under each image

    ideally each team would be separated within a boxed area but maybe thats too difficult i don’t know.

    any help with this please i would really appreciate it.
    thank you

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    Note that your issue has nothing to do with WordPress. It is really a CSS issue. As such, you may get a better response in a forum dedicated to CSS issues. I’ll give it a shot though ??

    Think in terms of rectangular boxes. Each box corresponds to <div> element blocks. You can move boxes as needed via CSS directives. Without overriding directives, the boxes are stacked in the browser window by standard “flow” rules. Often that is enough, but not always.

    Any content you want to be able to move together should be in its own box. Each team with its images and text should be in a box or <div>. Each image and text below should be in its own box. The three boxes containing the image and text should in turn be contained in a box. Your structure may be something like this:

    <body>
  <div class="team">
    Team Name
    <div class="all_images">
      <div class="img_text">
        <img><br>
        text below image
      </div>
      <!-- repeat img_text two more times -->
    </div>
  </div>
  <!-- repeat for each team -->
</body>

    By applying appropriate CSS directives to each div class, you can achieve the layout you desire. Using a CSS analyzer, such as Firebug for Firefox (other browsers have built in analyzers) makes experimenting much more efficient.

    Centering elements seems to be trickier than it should be for some reason. This should work for centering the div containing all the images:

    .all_images {
  margin-left: auto;
  margin-right: auto;
}

    For some unknown reason, these equivalent shortcuts do not always work:

    margin: 0 auto;
margin: 0 auto 0 auto;

    It’s also possible to place borders around any particular div box, so your bordered area desire is easily attained. There’s a lot more of course, but this should get you started. Good luck!

    Thread Starter bsacue

    (@bsacue)

    Hi bcworkz,

    I really appreciate all the time and effort you’ve gone to by posting the above but its still way beyond my knowledge sorry to say

    Ive copied n pasted your above into a page to see what it looks like and thats as far as i got, ive no idea how to change things or add things im basically a copy & paste man
    I think i will try a CSS forum and see what i can find out, again i had no idea css (whatever that is) was the code used i thought it was html lol

    sorry im very new but thanks all the same really

    Moderator bcworkz

    (@bcworkz)

    Ooh ooh! An opportunity to get this thread onto a WordPress topic!

    This is going to probably cause more confusion, but you’re going to need to figure this part out in order to make any progress towards your goal. In order to meet your needs, you will need to alter your theme files. The problem is when the theme is updated by the author, your changes will be lost. So before you start mucking about with your theme files, create a child theme. This will ensure your changes are protected from theme updates. Copy any theme template you want to alter to the child theme folder and work on that copy.

    FYI! The difference between HTML and CSS. All the theme template files either contain HTML or generate HTML content via the PHP programming language. In files with the .php extension, any content inside a <?php ?> block is PHP code. Any content outside is HTML sent to the browser directly as is.

    CSS are directives telling the browser how to display the HTML. They are mostly contained in the theme’s styles.css file. While there are numerous exceptions, we try to keep the actual content separate from how the content looks. So <div>This is content</div> is HTML content. Without further instruction, the browser will display it in boring black on white. But if we enter the CSS directive div {color: red;} in the style.css file, all content inside of any <div> will now be displayed as red on white. Still pretty boring, but you can imagine the possibilities if you’ve seen the long list of CSS directives on the w3schools site.

    You probably came here hoping for some code you could just paste somewhere and get the results you want. Unfortunately, it’s not that simple. You’ll need some idea of the basics and be able to do basic alterations yourself before any specific code snippet someone provides will do you any good.

    I think the most important characteristic to getting this figured out is the willingness to experiment and make mistakes. As long as you keep backup copies of your original file, you cannot break anything that cannot be easily fixed by restoring the original file. You’ve got a lot to learn, but it’s attainable if you are willing. Many thousands have figured it out, you can too.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘code help please for a new page’ is closed to new replies.

Tags