6 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 36 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Have a look at the Link below

http://purplefront.net/test.html

and also if needed here's a JS fiddle .

http://jsfiddle.net/gautamz07/hdt16ehb/

Can somebody teel me how to i center the image centrally to the opposite coloumb ?

Thank you .

Gautam.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9757
Points: 3839

First step

Get rid of, lose, forget you ever heard of bootstrap or any other foundation/css preprocessor/system or any other crap of that ilk. They all make development more difficult and maintenance more expensive.

The css on that page is an ugly pile of trash. You're learning better than that, so don't take a step backward.

You have some typos that create serious errors. Always validate your source as you go, and especially before attempting to debug. See W3C validator.

If all those list items need a class token, none of them do. This, 'data-animated="fadeInLeftBig"', is proprietary and should not be in your source. If it's a part of that bootstrap crap, it still shouldn't be in the code. If it's a jQuery construct, it's done wrongly. The proper way is to attach an event handler, which does not show in the source since it is behavior, not structure.

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test document</title>
 
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    background-color: white;
    color: black;
    font: normal 87.5%/1.5 sans-serif;
    }
 
  p {
    font-size: 1em;
    }
 
  h2 {
    font-size: 2em;
    }
 
  #container {
    display: table;
    margin: 0 auto;
    width: 970px;
    }
 
  .row {
    display: table-row;
    }
 
  .col {
    display: table-cell;
    vertical-align: top;
    width: 50%;
    }
 
  .figure {
    text-align: center;
    vertical-align: middle;
    }
 
 
  /*]]>*/
  </style>
</head>
 
<body>
  <!-- <div class="bs-example"> -->
 
  <div id="container">
    <div class="row">
      <div class="col">
        <h2 class="heading"><small>When</small> designing and implementing
        <small>CSR program, it is</small> <strong>important</strong>
        <small>to:</small></h2>
 
        <ul class="list-group leftul">
          <li>Respond to stakeholders who demand greater disclosure and
          accountability</li>
 
          <li>Provide greater non-financial performance indicators for
          international financial markets</li>
 
          <li>Respond to environmental and social pressures on the supply
          chain</li>
 
          <li>Incorporate CSR into your existing programs/events</li>
 
          <li>Engage with regulators with greater clarity and transparency</li>
 
          <li>Attract and retain talented employees</li>
 
          <li>Rise to the challenges of technology savvy consumers</li>
 
          <li>Understand the growing importance of intangible assets such as
          brand recognition</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
 
          <li>Respond to the growing influence of NGOs</li>
        </ul>
      </div>
 
      <div class="col figure"><img alt="pie chart with no labels"
           src= 
           "http://www.opensourceforu.com/wp-content/uploads/2012/03/chart.jpg"></div>
    </div>
  </div>
</body>
</html>

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 36 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Gary Thanks But i still don't get it

Gary thanks , but ii still don't get what you are trying to do in the code , Blame my ignorance or lack of in-depth knowledge in CSS , Yes i know i am guilty .

coming back to the point , My questions was , forget bootstrap , if i made a grid of 12 and divided into 2 coulombs of 6 and 6 , how do i make sure that the content of both columns are centered to each other vertically (I know i am probably asking a tough question or even maybe a senseless one ) , i hope u get what i am trying to say .

and your solution was .

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test document</title>
 
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    background-color: white;
    color: black;
    font: normal 87.5%/1.5 sans-serif;
    }
 
  p {
    font-size: 1em;
    }
 
  h2 {
    font-size: 2em;
    }
 
  #container {
    display: table;
    margin: 0 auto;
    width: 970px;
    }
 
  .row {
    display: table-row;
    }
 
  .col {
    display: table-cell;
    vertical-align: top;
    width: 50%;
    }
 
  .figure {
    text-align: center;
      } 

can u explain a bit more ? what is this technique that u've used called ? i don't mind going back to the drawing board and learning a bit more css(i see you've used less-commonly-used CSS properties here .) . don't expect you to spoon feed me , but can you tell me what will i have to learn in order to achieve what i want to learn .

Thank you .

Kind regards .

Gautam.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 19 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9757
Points: 3839

No-name technique

Consider a table. It is a container for rows (records), the rows containing data cells.

Now consider the characteristics of a table, its rows and cells. Table characteristics include expanding as required to hold all it contents. Table rows are containers for cells, and cells are always the same height as all other cells in the same row and lie side by side. In a table, all cells in a given column are the same width. One other thing is that table cells accept the vertical-align property (the th element defaults to middle and the td element defaults to top).

If we don't have tabulated data, we do not want to use table markup. But we can use those characteristics.

Thus, we have a container displaying as table, another container which holds the columns which is displayed as table-row. This div contains two containers (divs) displayed as table-cell to create the columns.

The second column, which holds the figure is set to {vertical-align: middle;}, and since the div is the same height as the column of text, its content (the image) is centered vertically relative to the row's height.

See §11 Tables and
§17 Tables (in CSS).

It is important that you bookmark the css and html specs, and read them backward and forward and from inside out; again and again.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 36 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks gary

Thanks gary for your response , i guess it will take a while to digest , but i'll read it back and forth as u suggested .

Thank you .

Kind regards .

Gautam.

Shahid1
Shahid1's picture
Offline
newbie
Last seen: 5 years 35 weeks ago
Timezone: GMT-7
Joined: 2014-09-24
Posts: 1
Points: 1

writing jobs

Spam is not tolerated on this forum. Your account is suspended. ~gt/mod

shreyasingh2
shreyasingh2's picture
Offline
newbie
Last seen: 5 years 35 weeks ago
Timezone: GMT+5.5
Joined: 2014-09-25
Posts: 1
Points: 1

Play online quiz on

[Spam is not tolerated on this site. Your account is suspended. ~gt/mod]