22 replies [Last post]
mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Hello -

I am working on creating a two column list within a footer include file. The list that I am working on is being fed in from a database. I know posting the code would make it easier. Unfortunately, I cannot list the URL or code due to confidentiality reasons.

1. Can anyone point me in the right direction as far as creating a column layout in a footer include file?

2. If there are multiple stylesheets how do I make a specific stylesheet work for one column and not the other? Will it always pull one stylesheet by default?

Thanks so much for any guidance. I will continue to search through the site for answers.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

mdwebcat wrote: ... I know

mdwebcat wrote:

... I know posting the code would make it easier. Unfortunately, I cannot list the URL or code due to confidentiality reasons. ...

The last time I checked Lorem Ipsum wasn't copyrighted or protected in any way.

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Thank you for your response.

Thank you for your response.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

1. not sure I fully

1. not sure I fully understand your needs here. how do you want it too look. Will the content be structured with lists?

2. Yes, if you call a css file in the html, then one will be called upon.

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Hi - thank you. let me try to

Hi - thank you.

let me try to better explain....

There is a footer include file. Within the footer include file there are already existing quick links in two columns side by side(home, about us, etc.) I have a list that needs to go under the top two columns of quick links which I have done but I need to put it into two columns.

The list that I am trying to put into two columns is being fed in by a database. Right now it just displays as one long running list of links. I am not able to view the actual list within an HTML file - in fact I cannot even see what the list is until I test the page. I place the code within the footer include file that will pull the database info into that area that I specify.

I just want to be able to put it into two columns but it needs to be in the footer include but NOT part of (or a continuation of) the Quick Links (columns above it). I am guessing that I need to somehow specify this in the stylesheet but not entirely sure how to.

Thanks again.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

I was just trying to say that

I was just trying to say that you could replace the confidential bits with some lipsum.com text so that you could show an example.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

yes, an example plz.

yes, an example plz.

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Okay - let's try this. 1. I

Okay - let's try this.

1. I need to place a list into two columns which is generated from a database.

2. I cannot manually type in each list because again it is generated from a database and is not viewable as a list until you test the page.

3. There are a few ways that this code is added to the document and this depends on if it is aspx or a php page.

4. For php pages I use an include file on the php page such as:
 include("Directory1/filename.php"); The filename.php holds the code that feeds the list from the database.

5. For the aspx pages I past specific form code into the page that feeds in the list from the database.

So my question is: How can I force the list to divide into two columns if I cannot manually type in the list because it's being fed in from a database? How do I define that this will automatically divide into two columns when displayed?

Thanks!

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

have the backend php/asp code

have the backend php/asp code generate two lists, float them left.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

mdwebcat wrote: ... How can I

mdwebcat wrote:

... How can I force the list to divide into two columns if I cannot manually type in the list because it's being fed in from a database? How do I define that this will automatically divide into two columns when displayed? ...

Hmm. Could you give the list items a 50% or slightly smaller total width each and then float them left? I guess it depends on what order they have to be in.

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Thanks very much for your

"have the backend php/asp code generate two lists, float them left."

Thanks very much for your response. Smile However, I don't know what code to use to make this happen.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

mdwebcat wrote:... However,

mdwebcat wrote:

... However, I don't know what code to use to make this happen.

I don't know what code to specifically tell you without seeing the markup. I can only guess.

ul#footerList {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
}
ul#footerList li {
width: 49%;
float: left;
white-space: nobreak;
}

How's that?

If the list items are different heights you'll have to look at gary.turner's site for the inline-block gallery example.

Deuce wrote:

have the backend php/asp code generate two lists, float them left.

That's a valid idea. If it's created in the backend you can make it output anything you need.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

delete

double post

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Okay - thanks. I will give

Okay - thanks. I will give this a try. I appreciate your help! If this does not work then I will try to post the code but put in false info that refer to any company names and URLs. Thanks again! Smile

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Okay - was not able to get

Okay - was not able to get that to work.

Here is the portion of the PHP page where I have the code:

FYI - "listname" is supposed to represent the list being fed in from the database.

<div id="footer"> 
  <div id="bottomlinks"> <a href="there are horizontal & centered quick links this section</a><br/>
    <br/>
     </div>
<div id="listname"> 
    <?php include("Directory1/FileName.php"); ?>
  </div>

Here is what I have in the general stylesheet:

**The #Footer portion was already there.

* =Footer 
----------------------------------------------- */
footer { position: relative; }
	#bottomlinks { font-size:12px; text-align:center; margin-top:20px;}
 
	#bottomlinks a {color: #c1371e;}
 
/* =List Name 
----------------------------------------------- */
 
ul#listname {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
}
ul#listname li {
width: 49%;
float: left;
white-space: nobreak;

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

You have ul#listname in the

You have ul#listname in the CSS and <div id="listname"> in the markup.

You need to show the parsed markup not the PHP code.

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Thanks for your help.

Thanks for your help. Unfortunately, I am not sure what you mean? Thanks again. I appreciate it. I will keep working at it.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

I was just saying that

I was just saying that ul#listname doesn't target <div id="listname"> because it's a div, not a list.

Show the code your browser sees, not the unparsed PHP. Raw PHP has no meaning.

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Ok here is what the footer

Ok here is what the footer code says when I view the source in the browser. I have had to change all URLs and company names because of confidentiality. Does this help?

<div id="footer"> 
  <div id="bottomlinks"> <a href="http://www.url.html"> 
    Quick Link</a> | <a href="http://www.url.html"> 
    Quick Link</a> | <a href="http://www.url.html"> 
    Quick Link</a> | <a href="http://www.url.html"> 
    Quick Link</a> | <a href="http://www.url.html"> 
    Quick Link</a> | <a href="http://www.url.html"> 
    Quick Link</a> <br/>
    <a href="http://www.url.html"> 
    Quick Link</a> | <a href="http://www.url.html"> 
    Quick Link</a> | <a href="http://www.url.html"> 
    Quick Link</a> | <a href="/sitemap.html">Sitemap</a><br/>
    <br/>    <div id="listname"><link rel="stylesheet" type="text/css" href="/stylesheets/main.css" />
 
<div id="listname"><h4>Our Neighborhood Links</h4><ul><li><span class="itemName">Company Name</span><br /><a class="itemLink" href="http://www.url.com">Company Name</a></li><li><span class="itemName">Company Name</span><br /><a class="itemLink" href="http://www.url.com">Company Name</a></li><li><span class="itemName">Company Name</span><br /><a class="itemLink" href="http://www.url.com">Company Name</a></li><li><span class="itemName">Company Name</span><br /><a class="itemLink" href="http://www.url.com">Company Name</a></li><li><span class="itemName">Company Name</span><br /><a class="itemLink" href="http://www.url.com/">Company Name</a></li><li><span class="itemName">Company Name</span><br /><a class="itemLink" href="http://www.url.com">Company Name</a></li><li><span class="itemName">Company Name</span><br /><a class="itemLink" href="http://www.url.com">Company Name</a></li><li><span class="itemName">Company Name</span><br /><a class="itemLink" href="http://www.url.com">Company Name</a></li></ul></div><br/>
    <a href="http://www.url.com/">Company Name</a> provided 
    by ABC Company<br/>
  </div>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

Then try something like

Then try something like this:

div#listname ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
}
div#listname ul li {
width: 49%;
float: left;
white-space: nobreak;
}

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

See the attachment for the

See the attachment for the results using your markup and my styling.

AttachmentSize
untitled.png 16.24 KB
mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Thanks very much for your

Thanks very much for your help Smile I will give this a try.

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 10 years 8 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

This worked! Thanks very

This worked! Thanks very much for your help. I have not run across this issue before so I really appreciate your time.

The only thing left that I need to do is bring the columns closer together and then it will be perfect Smile

Thanks again!! Big smile