1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Interface Problem

Discussion in 'CSS' started by iCreate, Aug 31, 2005.

0
  1. #1
    Hi Guys,

    I'm having a few issues concerning a layout I'm attempting to do in CSS.

    Firstly I'll let you see for yourselves the problem.

    www.icreate.cc/cssprobs

    I imagine you can see what I'm hoping to get it to look like (2 columns with a gap inbetween).

    Also, as you can see, when one column has more content than the other the shorter column breaks. I was wondering whether its possible to make whichever becomes the shortest the same length as the longest, so basically no matter which has the most content in, the other one will keep in line.

    I'm pretty much starting out in the whole 'CSS for Layout' thing so my limited knowledge in this particular area has left me a bit stumped.

    If anyone can lend a hand and help me sort out the above problems then I would appreciate it!

    Cheers,

    - Keir
     
    iCreate, Aug 31, 2005 IP
  2. just-4-teens

    just-4-teens Peon

    Messages:
    3,967
    Likes Received:
    168
    Best Answers:
    0
    Trophy Points:
    0
    #2
    could you possibly paste your code?
     
    just-4-teens, Aug 31, 2005 IP
  3. Dji-man

    Dji-man Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    If the longest column is ALWAYS the longest, yes, it is possible. And there are a few different ways to do it.

    check out positioniseverything.net for help and templates.

    Good luck.
     
    Dji-man, Aug 31, 2005 IP
  4. iCreate

    iCreate Guest

    Messages:
    62
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi,

    I've got the column bit correct now but I am now having problems with alignment. The interface part now looks fine in firefox (ignoring from the nav links) but in IE there is a gap between the top of the two columns and the columns themselves.

    The other problem, as you can see, is that the nav links aren't sitting under eachother as they should be.

    Any suggestions?

    Many thanks,

    Code is as follows:

    CSS:

    .Banner {
background-image: url(Banner.jpg);
height: 75px;
width: 724px;
left: auto;
top: 0px;
right: auto;
bottom: auto;
}
.Main {
width: 724px;
}
.Content {
float: left;
width: 500px;
left: 2px;
right: auto;
bottom: auto;
position: relative;
font-family: Georgia;
font-size: 12px;
font-weight: normal;
color: #000000;
}
.Top {
background-image: url(Top.jpg);
height: 15px;
width: 722px;
top: 90px;
float: left;
}
.Nav {
width: 200px;
height: 30px;
float: right;
}
.NavOff {
font-family: Georgia;
font-size: 12px;
font-weight: normal;
color: #385C01;
background-color: #C2FD6D;
height: 30px;
width: 194px;
cursor: pointer;
line-height: 30px;
float: left;
display: block;
margin-left: 22px;
border-left-width: 6px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: solid;
border-left-color: #C2FD6D;
clip:   rect(auto auto auto auto);
}
.NavOn {
font-family: Georgia;
font-size: 12px;
font-weight: normal;
color: #73BD02;
background-color: #DCFEA9;
height: 30px;
width: 194px;
cursor: pointer;
line-height: 30px;
float: left;
margin-left: 22px;
border-left-width: 6px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: solid;
border-left-color: #81D303;
left: 6px;
}
    Code (css):
    Page Code:

    

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background: #ccc url(bg.gif) repeat-y 50% 0;
background-color: #009bca;
background-image: url(Background.jpg);
}
-->
</style>
<link href="Test.css" rel="stylesheet" type="text/css">
</head>

<body>
<div align="center">
  <div class="Main">
  <div class="Banner"></div>
  <div class="Top"></div>
  <div class="Content">aaaa</div>
  <div class="NavOff" onClick="window.location.href='home.php';" onMouseOver="this.className='NavOn';" onMouseOut="this.className='NavOff';">aa</div>
  <div class="NavOff" onClick="window.location.href='home.php';" onMouseOver="this.className='NavOn';" onMouseOut="this.className='NavOff';">aa</div>
  <div class="NavOff" onClick="window.location.href='home.php';" onMouseOver="this.className='NavOn';" onMouseOut="this.className='NavOff';">aa</div>
  <div class="NavOff" onClick="window.location.href='home.php';" onMouseOver="this.className='NavOn';" onMouseOut="this.className='NavOff';">aa</div>
  <div class="NavOff" onClick="window.location.href='home.php';" onMouseOver="this.className='NavOn';" onMouseOut="this.className='NavOff';">aa</div>
  <div class="NavOff" onClick="window.location.href='home.php';" onMouseOver="this.className='NavOn';" onMouseOut="this.className='NavOff';">aa</div>
  <div class="NavOff" onClick="window.location.href='home.php';" onMouseOver="this.className='NavOn';" onMouseOut="this.className='NavOff';">aa</div>
  </div>
</div>
</body>
</html>
    PHP:
     
    iCreate, Sep 1, 2005 IP