By kingto on

Thx,

I built a views page, and I would like to display that page just like this: http://www.18wos.org/files/example.PNG

But..um, it's not worked well, and just caused by css.

you can see: http://www.18wos.org/china-map-for-euro-truck-simulator

I'm using these css to try to display it,

could you please help me to point the mistakes?

Thank you very much.

.view-item-CTS {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 11px; FLOAT: left; PADDING-BOTTOM: 5px; MARGIN: 5px 10px; WIDTH: 150px; COLOR: #666; LINE-HEIGHT: 1.1em; PADDING-TOP: 5px; HEIGHT: 150px
}
.view-data-node-title{
clear: both; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; MARGIN-BOTTOM: 2em; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; 
}
⋅ Categories: Drupal 5.x

Comments

kingto’s picture

kingto commented

lol

kingto’s picture

kingto commented

I wonder if perhaps someone could help me, thx

i-sibbot’s picture

i-sibbot commented

You have a CSS float issue.

Read up on css floats and clearing.

Having a quick look at your css, looks like you need to properly reference you elements.... ah, what the heck, here.


<style>
ul.gallery{
  padding:0;
  margin:0;
  width:300px;
}
ul.gallery li{
  display:block;
  width:100px;
  height:100px;
  background:#FF0000;
  margin:10px 10px 0 0;
  list-style:none;
  float:left;
}
</style>

------------------

<ul class="gallery">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

You restrain the

  • 's and force them onto a new line but stipulating the width of the
      . Then the floats take care of the rest.
    • tjkoblentz’s picture

    tjkoblentz commented

    Side note: remove the white space in your HTML between <li> tags... it can cause white space when rendered in a browser.

    kingto’s picture

    kingto commented

    thank you very much, both of you.

    let me try it.