Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

HTML Forum


You are currently viewing our HTML Forum as a guest. Please register to participate.
Login



Post a Project »

Find a Professional HTML Freelancer!

Find a Freelancer to help you with your HTML projects

FREE Outsourcing eBook!

Reply
Why is there a gap there?
Old 03-29-2007, 03:07 AM Why is there a gap there?
Skilled Talker

Posts: 52
Name: ana
Trades: 0
Im trying to create a two coloum news page layout on this page:
http://www.outer-edge.com.au/development_site/news.html but I cant seem to remove the gap from the title and the news text in the 2nd colum??
ana_rad is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 03-29-2007, 03:22 AM Re: Why is there a gap there?
Extreme Talker

Posts: 169
Trades: 0
Code:
<div id="news">
  <div id="news_content">
    <div id="news_COL1">
      <div id="news_title">Big Blue Adventure Fest</div>
	<p>This Easter (7–8 April), in the breathtaking surrounds of NSW's Blue Mountains, the southern hemisphere's biggest adventure carnival - The Australian Climbing Festival - will be held for the first time.</p>
    </div>
    <div id="news_title">Kayakers Still Ready and Able for Tasman</div>
    <p>The disappearance, and presumed death, of trans-Tasman kayaker Andrew McAuley has not dissuaded two young Sydney men from making their own attempt at taking on the 2,200km of wild waves that lie between Australia and New Zealand.</p>	
  </div>
</div>
First off, you should probably be using soemthing like h1 to h6 instead of the div for the title, secondly your CSS states this:
Code:
#news_COL1 p {
width: 350px;
margin: 0px;
}
This only refers to your left column, you right cloumn is unaffected by this because you close up the div before hand.
Also you have a news_COL2 id, but don't actually use it. It also doesn't have any properties for the p element defined.
__________________
George Bush would never take me alive.
MJM_RDS is offline
Reply With Quote
View Public Profile
 
Old 03-29-2007, 09:29 PM Re: Why is there a gap there?
Skilled Talker

Posts: 52
Name: ana
Trades: 0
I have now tried using a list however I can't seem to setup the 2 colums side by side. It works perfectly in IE 7:

http://www.outer-edge.com.au/development_site/news.html

I bascially want to set up a 2 colum layout where each news item has a small thumb nail image set at the top left of the title.

Any ideas?

HTML

<div id="news">
<div id="news_content">

<ul class="left">
<li class="left"><h5>Big Blue Adventure Fest</h5>
This Easter (7–8 April), in the breathtaking surrounds of NSW's Blue Mountains, the southern hemisphere's biggest adventure carnival -
The Australian Climbing Festival - will be held for the first time.</li>

</ul>

<ul class="right">
<li><h5>Kayakers Still Ready and Able for Tasman</h5>
The disappearance, and presumed death, of trans-Tasman kayaker Andrew McAuley has not dissuaded two young Sydney men from making their own attempt at taking on the 2,200km of wild waves that lie between Australia and New Zealand.</li>
</ul>
</div>

</div>

CSS

#news ul.left {
width: 250px;
float: left;
padding-right: 40px;
}

#news li {
list-style: none;
}

#news ul.right {
width: 250px;
}

#news h5 {
color: #FF6600;
margin: 0px;
font-size:12px;
}

#news_content {
height: auto;
font-size: 12px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 20px;
background-color: #FFFFFF;
text-align: justify;
}

Last edited by ana_rad; 03-29-2007 at 09:35 PM..
ana_rad is offline
Reply With Quote
View Public Profile
 
Old 03-29-2007, 10:18 PM Re: Why is there a gap there?
Kirtan's Avatar
Who Am I?

Posts: 377
Name: Venkat Raj
Location: Salem, South India
Trades: 3
Remove this rule to make 2 coloumns
Code:
#news ul.right {
width: 250px;
}


And add

#news h5 {
color: #FF6600;
margin: 0px;
font-size:12px;
padding:0 0 0 100px;
background-image:url(image.gif) right center no-repeat; /* for thumbnail */
}
__________________
All the Buddhas of all the ages have been telling you a very simple fact: Be -- don't try to become.

Last edited by Kirtan; 03-29-2007 at 10:20 PM..
Kirtan is offline
Reply With Quote
View Public Profile Visit Kirtan's homepage!
 
Old 03-29-2007, 10:51 PM Re: Why is there a gap there?
Skilled Talker

Posts: 52
Name: ana
Trades: 0
Thanks for that. The colums work but I need to use a different thumb image for each list item. The image doesnt appear in firefox but does in IE7??
ana_rad is offline
Reply With Quote
View Public Profile
 
Old 03-30-2007, 12:28 AM Re: Why is there a gap there?
Kirtan's Avatar
Who Am I?

Posts: 377
Name: Venkat Raj
Location: Salem, South India
Trades: 3
Add this..
background-image:url(image.gif) right center no-repeat; /* for thumbnail */
to classes and use those class for each li OR
use img within #news with float:left;

May be use include quote i.e. "image.gif" instead of image.gif and it may force FF not to show images.
__________________
All the Buddhas of all the ages have been telling you a very simple fact: Be -- don't try to become.
Kirtan is offline
Reply With Quote
View Public Profile Visit Kirtan's homepage!
 
Old 03-30-2007, 02:45 PM Re: Why is there a gap there?
Extreme Talker

Posts: 169
Trades: 0
Why are you using a list for your columns? Is it a list, no it is not a list.
Your first approach was better and working, why not stick with it and just fix what I said?
__________________
George Bush would never take me alive.
MJM_RDS is offline
Reply With Quote
View Public Profile
 
Old 04-01-2007, 07:54 PM Re: Why is there a gap there?
Skilled Talker

Posts: 52
Name: ana
Trades: 0
Ok, I've changed it to using div blocks, however I cant seem to get the 2 colum layout to work in Firefox. Works nicely in IE 7.

http://www.outer-edge.com.au/development_site/news.html

HTML

<div id="news_content">

<div id="news_COL1">

<h5 class="news1">Big Blue Adventure Fest</h5>
<p>This Easter (7–8 April), in the breathtaking surrounds of NSW's Blue Mountains, the southern hemisphere's biggest adventure carnival -
The Australian Climbing Festival - will be held for the first time.</p>

</div>

<div id="news_COL2">

<h5>Kayakers Still Ready and Able for Tasman</h5>
<p>The disappearance, and presumed death, of trans-Tasman kayaker Andrew McAuley has not dissuaded two young Sydney men from making their own attempt at taking on the 2,200km of wild waves that lie between Australia and New Zealand.</p>

</div>

</div>


CSS

#news_content {
padding-left: 40px;
padding-right: 40px;
font-size: 12px;
}
#news_COL1 {
width: 300px;
float: left;
padding-right: 20px;
}
#news_COL2 {
width: 300px;
}
#news_content h5 {
color: #FF6600;
width: 300px;
}
#news_COL1 p, news_COL2 p {
text-align: justify;
margin: 0px;
}
ana_rad is offline
Reply With Quote
View Public Profile
 
Old 04-01-2007, 09:07 PM Re: Why is there a gap there?
Extreme Talker

Posts: 169
Trades: 0
Good start, now let's try this CSS on for size. I certainly didn't invent it, but I have been using it for a long time now to have two fixed columns.
Code:
  #news_content {
    overflow: hidden;
    width: 600px;
    }
  #news_COL1 {
    float: left;
    width: 300px;
    border-right: 300px solid #FFF;
    margin-right: -300px;
    }
  #news_COL2 {
    width: 300px;
    float: left;
    }
Should work, but I may have made a typo or something, was of the top of my dome.
__________________
George Bush would never take me alive.
MJM_RDS is offline
Reply With Quote
View Public Profile
 
Old 04-01-2007, 09:14 PM Re: Why is there a gap there?
Skilled Talker

Posts: 52
Name: ana
Trades: 0
I've updated the code with your code - however it didnt fix it

Now it doesnt work in both browsers :-(
ana_rad is offline
Reply With Quote
View Public Profile
 
Old 04-01-2007, 10:58 PM Re: Why is there a gap there?
Extreme Talker

Posts: 169
Trades: 0
Both browsers I guess you mean the awesome Opera and the second awesome Firefox, because it still works in IE.
You forgot a rule, the float on news_COL2, that should fix it, but may create errors with the bottom border that your using to create the angle, just a guess though, and should be easy enough to fix, but since I'm leaving for a long time tomorrow someone else will hopefully come along and help you.
__________________
George Bush would never take me alive.
MJM_RDS is offline
Reply With Quote
View Public Profile
 
Old 04-02-2007, 02:30 AM Re: Why is there a gap there?
Skilled Talker

Posts: 52
Name: ana
Trades: 0
I've finially managed to get this page right in IE 7, Firefox, Opera & Netscape, however in IE 6 the right colum overflows the page width...

can anyone help please?

http://www.outer-edge.com.au/development_site/news.html

HTML

<div id="news">
<div id="news_content">

<div id="news_COL1">

<img src="images/news_images/news1 - big blue.gif" height="90" width="115" alt="News Image" align="left" />
<h5>Big Blue Adventure Fest</h5>
<p>This Easter (7-8 April), in the breathtaking surrounds of NSW's Blue Mountains, the southern hemisphere's biggest adventure carnival - The Australian Climbing Festival - will be held for the first time.</p>

</div>

<div id="news_COL2">

<img src="images/news_images/news1 - kayakers.gif" height="90" width="115" alt="News Image" align="left" />
<h5>Kayakers Still Ready and Able for Tasman</h5>
<p>The disappearance, and presumed death, of trans-Tasman kayaker Andrew McAuley has not dissuaded two young Sydney men from making their own attempt at taking on the 2,200km of wild waves that lie between Australia and New Zealand.</p>

</div>

</div>

</div>


CSS

#news {
background: url(images/white_bg_top.jpg);
background-repeat: no-repeat;
background-color: #FFFFFF;
height: auto;
width: 800px;
padding-top: 100px;
}

#news_content {
padding-left: 40px;
padding-right: 40px;
font-size: 12px;
overflow: hidden;
}

#news_COL1 img, #news_COL2 img {
padding-right: 10px;
padding-bottom: 10px;
}

#news_COL1 {
float: left;
width: 340px;
display: block;
}

#news_COL2 {
margin-left: 380px;
width: 340px;
}

#news_content h5 {
color: #FF6600;
width: 320px;
margin: 0px;
padding: 0px;
}

#news_COL1 p, news_COL2 p {
margin: 0px;
padding: 0px;
}

Last edited by ana_rad; 04-02-2007 at 02:54 AM..
ana_rad is offline
Reply With Quote
View Public Profile
 
Old 04-05-2007, 06:01 PM Re: Why is there a gap there?
Extreme Talker

Posts: 169
Trades: 0
add this hack for IE, should fix the issue:
Code:
* html #news_content{
  height: 1%;
}
be sure to always check the code I post for spelling errors
__________________
George Bush would never take me alive.
MJM_RDS is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Why is there a gap there?
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.47420 seconds with 12 queries