bmurphy
Gold Membership
Nuke Active Member
Posts:26
 |
| 9/13/2008 10:28 AM |
|
Hello Scott,
Thanks for the new release of property agent, the ordered list looks much better!
I was wondering if it is possible to break up the list into two vertical columns via the layout files? I guess a workaround might be to create a table with two columns and split the data into separate fields, but it's not as intuitive as I'd need to break up the data into separate custom fields.
Let me know if you have any ideas on how I might achieve this...
Thanks!
Brian |
|
|
|
|
Scott McCulloch
Administrators
Nuke Master
Posts:12548
|
| 9/13/2008 5:52 PM |
|
You should be to achieve this via css styling:-
This forum post might help |
|
Scott McCulloch
Site Administrator |
|
|
bmurphy
Gold Membership
Nuke Active Member
Posts:26
|
| 9/15/2008 4:46 PM |
|
Thanks Scott, I tried doing this, but can't seem to get it to work, here's what I have:
"Stylesheet" CSS:
#list_wrapper {
width: 400px
}
ul.multiple_columns li {
text-align: left;
float: left;
list-style: none;
height: 20px;
width: 20px;
}
"View" HTML:
This just gives me a long list of amenities and doesn't create any columns, and the bullets have been taken out.
Any suggestions? |
|
|
|
|
Scott McCulloch
Administrators
Nuke Master
Posts:12548
|
| 9/16/2008 9:20 AM |
|
I would try creating a blank html page with some css in it to get your display right. You can also use firebug for firefox to check what your styles are doing.
Looking at the item, it does look OK to float the items across the page. |
|
Scott McCulloch
Site Administrator |
|
|
avi a
Gold Membership
Nuke Master
Posts:670
|
|
bmurphy
Gold Membership
Nuke Active Member
Posts:26
|
| 9/16/2008 5:00 PM |
|
Thank You,
I tried this and the list generates ok, the bullets are there (see screenshot of amenities), but it doesn't wrap, how do I force it to wrap or generate multiple columns. What's the command to create multiple columns and control the height? Ideally I would like to force three columns. This is probably super easy, problem is I'm not a programmer. :)
New CSS:
#list_wrapper ul li {
text-align: left;
float: left;
list-style: none;
height: 20px;
width: 20px;
}
New HTML:
|
|
|
|
|
avi a
Gold Membership
Nuke Master
Posts:670
|
|
bmurphy
Gold Membership
Nuke Active Member
Posts:26
|
| 9/17/2008 1:22 PM |
|
Hi thanks for your help, the CSS is below and the complete html for the page is pasted below also. The webpage is: http://www.365mammoth.com/Test/BrianTest/PropertyAgent/tabid/224/agentType/View/PropertyID/8/Default.aspx
CSS:
#list_wrapper ul li {
text-align: left;
float: left;
list-style: none;
height: 20px;
width: 20px;
}
Any pointers you can provide is very much appreciated!
Thanks, Brian
|
|
|
|
|
avi a
Gold Membership
Nuke Master
Posts:670
|
|
avi a
Gold Membership
Nuke Master
Posts:670
|
|
bmurphy
Gold Membership
Nuke Active Member
Posts:26
|
| 9/17/2008 5:03 PM |
|
First, thanks so much, you've been a great help, this is a lot of trial and eror for someone who doesn't know the language so I really appreciate it.
I implemented the above, and I think I am really close, with two problems:
1. When I put in ul class in the html of the page, the resulting source code includes two ul tags, "ul class" and "ul". I think this is because the MULTILIST token automatically generates a second ul tag. The end result is on my page right now, where it is indented too far to the right.
2. The bullets are not showing up like they would for a regular CUSTOMLIST
SO...Is there a way to have the list with css, without the indent and with the bullets? In a perfect world the bullets here would render the same as on this page: http://www.365mammoth.com/Test/BrianTest/PropertyAgent/tabid/224/agentType/ViewType/PropertyTypeID/5/Default.aspx
Thanks!
Brian |
|
|
|
|
avi a
Gold Membership
Nuke Master
Posts:670
|
|
bmurphy
Gold Membership
Nuke Active Member
Posts:26
|
| 9/18/2008 3:49 PM |
|
Hmm...I did this but the list is not wrapping - do I need to ask it to wrap, or can I set a max height for the column and it will auto wrap?
Thanks,
Brian |
|
|
|
|
avi a
Gold Membership
Nuke Master
Posts:670
|
| 9/18/2008 10:14 PM |
|
You just forgot to add "#" before the first_list.
try this: (forget the height stuff):
#first_list ul li {
list style-type:disk;
width:120px;
float:left;
font-weight:normal;
font-style:italic;
font-size: 14px;
margin:0px;
padding:0px;
}
#second_list ul l {
list style-type:disk;
width:120px;
float:left;
font-weight:normal;
font-style:italic;
font-size: 14px;
margin:0px;
padding:0px;
}
Also for the second list don't use a break.
Put it inside divs like the first one and call it second_list.
Also add this:
#first_list, #second_list {clear:both; }
|
|
Avi A
Wizard for embedding the coolest google local search map control. (works also with PA)
Nukedesigners.com W3C valid skins for dotnetnuke |
|
|
Scott McCulloch
Administrators
Nuke Master
Posts:12548
|
| 9/19/2008 7:04 AM |
|
| Thanks avi |
|
Scott McCulloch
Site Administrator |
|
|
bmurphy
Gold Membership
Nuke Active Member
Posts:26
|
| 9/19/2008 8:41 AM |
|
IT'S WORKING!! :)
Avi,
Thanks so much for your help, I really appreciate it!
Brian |
|
|
|
|
bmurphy
Gold Membership
Nuke Active Member
Posts:26
|
| 9/19/2008 9:06 AM |
|
Uh-oh, I may have spoken too soon. It looks great in IE6, but it is jumbled in FFX 3.0.1, I have attached screenshot. It looks like a spacing issue, but I am worried if I change anything I will mess up the way it looks in IE!!! The bullets show up in FFX but not in IE. It displays four columns in FFX but 3 in IE. |
|
|
|
|
avi a
Gold Membership
Nuke Master
Posts:670
|
| 9/20/2008 12:00 AM |
|
You have added new stuff, which makes the problems.
Any way:
.RealEstateSubHead {display:block;clear:both;}
and:
list style-type { ... }
should be :
list-style-type{.... }
and each: id="first.." should have a different name (first, second, third, etc") and write for each one a different class,( like you did for two so far).
and replace the "breaks" with adding padding -top or/and bottom here:
.RealEstateSubHead {display:block;clear:both;padding: xxpx 0 xxpx 0;} (replace the xx with the space you like to create.
And generally speaking when you're testing something, don't add other things, before it's working, (in all browsers you like it to work). If you have something else to add, do it after you're finished testing and you're happy with the results. Thanks.
|
|
Avi A
Wizard for embedding the coolest google local search map control. (works also with PA)
Nukedesigners.com W3C valid skins for dotnetnuke |
|
|
avi a
Gold Membership
Nuke Master
Posts:670
|
| 9/21/2008 1:33 PM |
|
/* Standard Styles */
.RealEstateTable
{
background-color: black;
margin: 0px;
}
.RealEstateContentCell
{
color: black;
padding: 6px;
background-color: #FEFEFE;
}
.RealEstateContentCellAlternate
{
color: black;
padding: 6px;
background-color: #F0F9FF;
}
div.hr {
margin: 3px;
padding: 0;
height: 1px;
font-size: 1px;
background:#E2E2E2;
}
#first_list ul li, #second_list ul li, #third_list ul li, #fourth_list ul li, #fifth_list ul li{
list-style-type:none;
width:140px;
float:left;
font-weight:normal;
font-style:normal;
font-size: 12px;
margin:0px;
padding:12px 0 0 0px;
}
#first_list, #second_list, #third_list, #fourth_list, #fifth_list {clear:both;}
.RealEstateSubHead {clear:both;padding-top:12px;}
.CardComment {
font-style:italic;
background-color:#FFFFFF;
border:1px solid #3d4f78;
display:block;
float:left;
margin:0pt;
padding:5px 0pt 5px 10px;
width:96%;
}
cite.CardCommentAuthor {
background:transparent url("images/tip.gif") no-repeat scroll 20px 0pt;
font-style:normal;
margin:0pt;
padding:7px 0pt 0pt 15px;
position:relative;
top:6px;
}
.Normal .CardLink a:link, .Normal .CardLink a:active, .Normal .CardLink a:visited
{
color:#F27606;
font-weight:bold;
}
/* Listing Styles */
.Normal .RealEstateCity
{
text-transform:uppercase;
}
.Normal .RealEstateSubHead
{
color:#3d4f78;
font-weight:bold;
font-size:12px;
}
.Normal .RealEstateSubHeadEm
{
color:#F27606;
font-weight:bold;
font-size:12px;
display:block;
clear:both;
padding: 10px 0 10px 0;
}
.Normal .RealEstateLink a:link, .Normal .RealEstateLink a:active, .Normal .RealEstateLink a:visited
{
color:#F27606;
font-weight:bold;
}
.Normal .RealEstateLink2 a:link, .Normal .RealEstateLink2 a:active, .Normal .RealEstateLink2 a:visited
{
color:#F27606;
font-weight:bold;
font-size:16px;
}
.bed
{
background:url("images/icon_bed.gif") right center no-repeat;
}
.bath
{
background:url("images/icon_bath.gif") right center no-repeat;
}
.car
{
background:url("images/icon_car.gif") right center no-repeat;
}
a.arrowLink:link, a.arrowLink:visited, a.arrowLink:active
{
background: url("images/icon_arrow.gif") no-repeat 3px 7px;
margin:2px 10px 2px 0;
padding:2px 2px 2px 18px;
}
/* Photo Styles */
.photo_198 {
border: 4px solid #FFFFFF;
}
.album-frame .topx----,
.album-frame .top----x,
.album-frame .botx----,
.album-frame .bot----x {
height: 14px;
width: 14px;
}
.album-frame .top-x--- {
background-repeat: repeat-x;
background-image: url(images/borders/album-tstretch.gif);
text-align: left;
height: 14px;
width: auto;
}
.album-frame .top--x-- {
background-repeat: repeat-x;
background-image: url(images/borders/album-tstretch.gif);
height: 14px;
width: auto;
}
.album-frame .top---x- {
background-repeat: repeat-x;
background-image: url(images/borders/album-tstretch.gif);
text-align: right;
height: 14px;
width: auto;
}
.album-frame .mtpx---- {
background-repeat: repeat-y;
background-image: url(images/borders/album-lstretch.gif);
vertical-align: top;
height: auto;
width: 14px;
}
.album-frame .mtp----x {
background-repeat: repeat-y;
background-image: url(images/borders/album-rstretch.gif);
vertical-align: top;
height: auto;
width: 14px;
}
.album-frame .midx---- {
background-repeat: repeat-y;
background-image: url(images/borders/album-lstretch.gif);
height: auto;
width: 14px;
}
.album-frame .mid----x {
background-repeat: repeat-y;
background-image: url(images/borders/album-rstretch.gif);
height: auto;
width: 14px;
}
.album-frame .mbtx---- {
background-repeat: repeat-y;
background-image: url(images/borders/album-lstretch.gif);
vertical-align: bottom;
height: auto;
width: 14px;
}
.album-frame .mbt----x {
background-repeat: repeat-y;
background-image: url(images/borders/album-rstretch.gif);
vertical-align: bottom;
height: auto;
width: 14px;
}
.album-frame .bot-x--- {
background-repeat: repeat-x;
background-image: url(images/borders/album-bstretch.gif);
text-align: right;
height: 14px;
width: auto;
}
.album-frame .bot--x-- {
background-repeat: repeat-x;
background-image: url(images/borders/album-bstretch.gif);
height: 14px;
width: auto;
}
.album-frame .bot---x- {
background-repeat: repeat-x;
background-image: url(images/borders/album-bstretch.gif);
text-align: left;
height: 14px;
width: auto;
}
.photo-frame
{
margin: 0px;
padding: 0px;
border: 0px;
border-collapse: collapse;
}
.photo-frame TD {
margin: 0px;
padding: 0px;
}
.photo-frame .topx--
{
background-repeat: no-repeat;
background-image: url(images/borders/frame-topx--.gif);
width: auto;
height: 4px;
vertical-align: top;
}
.photo-frame .top-x- {
background-repeat: repeat-x;
background-image: url(images/borders/frame-top-x-.gif);
width: auto;
height: 4px;
}
.photo-frame .top--x {
background-repeat: no-repeat;
background-image: url(images/borders/frame-top--x.gif);
width: auto;
height: 4px;
vertical-align: top;
}
.photo-frame .midx-- {
background-repeat: repeat-y;
background-image: url(images/borders/frame-midx--.gif);
width: 4px;
height: auto;
}
.photo-frame .mid--x {
background-repeat: repeat-y;
background-image: url(images/borders/frame-mid--x.gif);
width: 4px;
height: auto;
}
.photo-frame .botx-- {
background-repeat: no-repeat;
background-image: url(images/borders/frame-botx--.gif);
width: 4px;
height: 4px;
vertical-align: top;
}
.photo-frame .bot-x- {
background-repeat: repeat-x;
background-image: url(images/borders/frame-bot-x-.gif);
width: auto;
height: 4px;
}
.photo-frame .bot--x {
background-repeat: no-repeat;
background-image: url(images/borders/frame-bot--x.gif);
width: 4px;
height: 4px;
vertical-align: bottom;
}
/* Lightbox */
#lightbox{
position: absolute;
top: 40px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#loading #loadingLink{ width: 32px; height: 32px; background: url(images/lightbox/loading.gif) no-repeat; }
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(images/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/lightbox/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
}
#imageData{
padding:0 10px;
}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; height: 22px; float: right; padding-bottom: 0.7em; background: url(images/lightbox/closelabel.gif) no-repeat; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html>body .clearfix {
display: inline-block;
width: 100%;
}
* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}
|
|
Avi A
Wizard for embedding the coolest google local search map control. (works also with PA)
Nukedesigners.com W3C valid skins for dotnetnuke |
|
|
bmurphy
Gold Membership
Nuke Active Member
Posts:26
|
| 9/23/2008 8:21 PM |
|
Hi, I did it just like you said and I have the following two issues:
1. For some reason there are smiley faces now in my web pages in both IE and FFX. I saw them in the code but didnt want to touch anything because you said not to. :)
2. Horizontal lines are messed up in IE.
Thanks,
Brian |
|
|
|
|