css problem

4 Posts

tmazurek Reply #1, 17 years, 5 months ago

Hello every1

Could any1 help me what to do here to get proper displaying in firefox and opera... It works ok in IE
site adress http://www.sejfy.webarte.pl/index.php?id=57
instalation was done as wiki tells to..
im newbie in modx so if any1 Could andswer id realy apreciate it

cheers all

64 Posts

Katzenfutter Reply #2, 17 years, 5 months ago

Your problem seems to be a bit complex.
I assume, you don´t really know how to handle CSS and/or XHTML... but... I´ll try to give you some hints without explaining too much...

Let me just guess:
First of all your surrounding DIV (class .thumbscontainer) might need a certain width, assume 400px wide.
Do this by preventing some CSS like this (place it in your template between <head> and </head>)

.thumbscontainer {
padding: 0;
margin: 0;
width: 400px;
}

After that, your "container" will be 400px wide.
I´d float every <li> in that container to the left, giving every <li> a padding/margin of about 10px to the left.

That would be:

.thumbscontainer ul {
padding: 0;
margin: 0;
}

.thumbscontainer li {
float: left;
padding: 0 0 0 10px;
}

All put together:


<script type="text/css">
.thumbscontainer {
padding: 0;
margin: 0;
width: 400px;
}

.thumbscontainer ul {
padding: 0;
margin: 0;
}

.thumbscontainer li {
float: left;
padding: 0 0 0 10px;
}
</style>

Check this out and we might get a bit further down that rocky road wink

Cheers!

$cd /pub
$more beer

64 Posts

Katzenfutter Reply #3, 17 years, 5 months ago

A reply to my own reply... well okay.
To explain what i mentioned above:

You use that HTML:

<div class="thumbscontainer">
<ul class="thumbs">
	<li>
		<a href="/assets/galleries/57/5.jpg" rel="lightbox[maxigallery]" title="fot1 - ">
		 	<img src="/assets/galleries/57/tn_5.jpg" class="thumbnail" title="fot1  » Click to zoom ->" alt="fot1  » Click to zoom ->" />
		</a>
		<p style="width: 130px;">
			fot1
		</p>
	</li>
</ul>
</div>

The part with your <li>...</li> holds a photo. To place every photo side by side each other is to float them in a specific container, here: a DIV associated with the class "thumbscontainer".
My CSS from above should set every <li> to float to the left, as long as they are placed inside the "thumbscontainer".
The last <li> should be followed by a clearing <p> or such a thing to end the "floating" of <li>´s.
HTML:

<p class="clr"> </p>

CSS:

p.clr{
    padding:0;
    margin:0;
    clear:both;
    font-size:0;
    line-height:0;
    height: 0;
}

The CSS clear the floating and let every following element in your HTML fit into place as it should.

$cd /pub
$more beer

4 Posts

tmazurek Reply #4, 17 years, 5 months ago

ok ill give it a try but shall start puting those inside my template css or maxigallery css?

cheers

64 Posts

Katzenfutter Reply #5, 17 years, 5 months ago

Just to have a consistent way to write code or general stuff:
Place it in your own files.

Code of MaxiGallery goes into their files, your code goes where your code has to go...
It wouldn´t matter in the end, but with a consistent way where code is placed you can easily (even more easier) locate and solve upcoming issues.

$cd /pub
$more beer