Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems with text and side menu bar

    Hi guys, first off this is my first bash at a css/html website so go easy lol.


    (Using firefox)
    Basically I wondered too fix the text in all my divs as if i start to make the window smaller all the text just spills out of it. Which isnt very good.

    Also when opening on internet explorer I cant figure out what goes wrong with my menu on the left and why it doesnt scroll!

    Been sitting for a while now scratching my head on these matters and just dont know how to resolve it. Probably down to my lack of experience in the area. Il attach my html and css below for the page. Thanks

    HTML CODE:
    Code:
    <html>
    
    <head>
    <title> ICTATLL Workshop 2009 </title>
    <link rel="stylesheet" type="text/css"
    href="style.css" />
    </head>
    
    
    <body>
    <div id="body"> 
    
    <div id="header"> This is the Header </div>
    
    <div id="menu"> 
    <ul>
    <li><a href="main.html" >Home</a></li>
    <li><a href="books.html" >Books</a></li>
    <li><a href="http://ictatll.org/" >ICTATLL 2008</a></li>
    </ul>
    </div>
    
    
    <div id="leftmenu">
    <h3> <b><u>Page Navigation </b></u></h3>
    <p> <a href="#call"> Call for Abstracts</a>
    <p> <a href="#presentations">Presentations</a>
    <p> <a href="#further">Further Information</a>
    <p> <a href="#organisers">Workshop Organisers</a>
    </div>
    
    
    
    <div id="call"> 
    <h1><b><u> Call for Abstracts</u><b> </h1>
    <p> 
    <a name="call">Following four previous workshops (Portugal, 2005; Scotland, 2006; Japan, 2007; Sri Lanka, 2008), 
    submissions are invited for ICTATLL 2009 (Greece). Papers in relevant areas including, but not limited to, 
    applications of ICT for language analysis (e.g., corpus analysis), language teaching technologies 
    (including, CBT, teaching delivery systems, case studies), and language learning technologies 
    (including CALL, VLEs, learning assessment and competence testing). Contributions reporting practical experience 
    or theoretical perspectives are also invited.
    <br><br>
    Abstracts (~600 words) should be sent by email as an attached PDF or Word file to papers(at)ictatll(dot)org to arrive by Friday 12th June 2009. 
    Abstracts will be reviewed by the Workshop committee and decisions sent to authors by Tuesday 30th June 2009.
    <br><br>
    Authors of accepted abstracts will be asked to submit full papers. Accepted papers will be included in the Workshop Proceedings. 
    Selected papers will also be considered for publication in an associated book.
    </p>
    
    </div>
    
    
    
    
    
    <div id="presentations"> 
    <h2><b><u> Presentations </u></b></h2>
    <p><a name="presentations">Authors of accepted papers are required to register for the meeting and present their paper at the workshop. All presentations will take place 
    in plenary (there will be no parallel sessions).
    </p>
     </div>
    
    
    <div id="further">
    <h2><b><u> Further Info </u></b></h2>
    <p>
    <a name="further">Workshop Dates: Thursday 10th & Friday 11th September 2009
    <br><br>
    Venue: Department of Social and Educational Policy, University of the Peloponnese, Damaskinou & Kolokotroni St., 20100 Corinth, Greece.
    <br><br>
    Accommodation and registration information will be available soon from this Web site.
    <br><br>
    Please direct any further enquiries by email to: chair(at)ictatll(dot)org or to the Workshop Secretariat (see below).
    </p>
    </div>
    
    <div id="organisers"> 
    <h2><b><u> Workshop Organisers</u></b></h2> 
    <p> 
    <table>
    <tr>
    <td> <b>Dr. Georgios Lepouras
         <br>Department of Computer Science and Technology,
    	<br>University of the Peloponnese,
    	<br>Tripolis,
    	Greece.</b>
    </td>
    <td><b> Dr Athanassios Jimoyannis, 
    	<br>Department of Social and Educational Policy,
    	<br>University of the Peloponnese,
    	<br>Corinth,
    	Greece.</b>
    </td>
    </tr>
    <tr><td><br></td></tr>
    <tr><td><b><a name="organisers"> Dr. George R S Weir
    	<br>Department of Computer and Information Sciences,
    	<br>University of Strathclyde,
    	<br>Glasgow,
    	United Kingdom.</b>
    </td>
    <td><b> Prof. Toshiaki Ozasa
    	<br>Department of Business Information,  
    	<br>Fukuyama Heisei University,
    	<br>Fukuyama,
    	Japan. </b></td>
    </tr>
    <tr><td><br></tr></td>
    <tr> <td><b> Workshop Secretariat
    	<br>Dr. Georgios Lepouras
    	<br>Email: G.Lepouras(at)uop(dot)gr </b></td>
    </tr>
    </table></p>
    </div>
    
    <div id="footer"><p> Designed by Steven Smith</p></div>
    </div>
    </body>

    CSS Stylesheet

    Code:
    body{
      background-image: url(bg.jpg);
    
    }
    
    
    
    #body{
    
      background-color: #999999;
      border-left: 1px solid #444444;
      border-bottom: 1px solid #444444;
      border-right: 1px solid #444444;
      margin-left: 10%;
      margin-right: 10%;
      margin-top: 0px;
      margin-bottom: 0%;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 80%;
      height: 1600px;
    }
    
    
    
    #header {
      background-color: 	#6D6968;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 150px;
    
    }
    
    #footer {
      background-image:url(greymenubar.jpg);
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: 40px;
    }
    
    #footer p {
      position: absolute;
      font-size: 11pt;
      font-weight: normal;
      font-type: arial;
      color: #331144;
    }
    
    
    #menu {
      background-image:url(greymenubar.jpg);
      background-repeat: repeat-x;
      border-top: 1px solid #444444;
      border-bottom: 1px solid #444444;
      position: absolute;
      top: 150px;
      left: 0px;
      width: 100%;
      height: 40px;
    }
    
    #menu ul {
      
      list-style-type: none;
      font: bold 16px Verdana;
      width: 100%;
    
    
    
    }
    
    
    #menu li {
        float:left;
        padding: 0 75px ;
    
    }
    
    #menu li a {
    
      text-decoration: none;
      display: inline;
      color:#ffffff;
      margin-right:2px;
    }
    
    
    #menu li a:hover {
      background:url(darkgrad.jpg) no-repeat center center;
    }
    
    #leftmenu {
      background-image: url(bg.jpg) ;
      background-repeat: repeat-x;
      position: fixed;
      top: 180px;
      left: 11%;
      width: 15%;
      height: 200px;
      margin-top: 5%;
    } 
    
    
    #leftmenu p {
       font-size: 11pt;
      text-align: center;
      font-weight: normal;
      font-type: arial;
      color: grey;
    }
    
    h3 {
      font-size: 11pt;
      text-align: center;
      font-weight: normal;
      font-type: arial;
      color: grey;
    }
    
    #leftmenu a{
      text-decoration: none;
      display: block;
      color:#ffffff;
      margin-right:2px;
    }
    
    #leftmenu a:hover {
      background:url(darkgrad.jpg) repeat-x center center;
    }
    
    
    #call {
        background-color: #6699AA;
          border: 1px solid #444444;
        position: absolute;
        top: 190px;
        left: 20%;
        width: 73%;
        height: 23%;
        margin-left: 2%;
        margin-top: 5%;
        padding-left: 2%;
        padding-right: 2%;
    }
    
    #presentations {
      background-color: #6699AA;
      border: 1px solid #444444;
      position: absolute;
      top: 570px;
      left: 20%;
      width: 73%;
        height: 9%;
        margin-left: 2%;
        margin-top: 5%;
        padding-left: 2%;
        padding-right: 2%;
    }
    
    h1 {
      font-size: 17pt;
      font-weight: normal;
      font-type: arial;
      font-style: italic;
      
      text-align: center;
      color: #331144;
       }
    
    #call p {
      font-size: 11pt;
      font-weight: normal;
      font-type: arial;
      color: #331144;
    }
    
    h2 {
      font-size: 17pt;
      font-weight: normal;
      font-type: arial;
      font-style: italic;
      
      text-align: center;
      color: #331144;
    }
    
    
    
    #presentations p {
      font-size: 11pt;
      font-weight: normal;
      font-type: arial;
      color: #331144;
    }
    
    
    #further {
      background-color: #6699AA;
      border: 1px solid #444444;
      position: absolute;
      top: 767px;
      left: 20%;
      width: 73%;
        height: 16%;
        margin-left: 2%;
        margin-top: 5%;
        padding-left: 2%;
        padding-right: 2%;
    }
    
    #further p {
      font-size: 11pt;
      font-weight: normal;
      font-type: arial;
      color: #331144;
    }
    
    #organisers {
      background-color: #6699AA;
      border: 1px solid #444444;
      position: absolute;
      top: 1055px;
      left: 20%;
      width: 73%;
        height: 26%;
        margin-left: 2%;
        margin-top: 5%;
        padding-left: 2%;
        padding-right: 2%;
    }
    
    #organisers table {
      table-layout: fixed;
      font-size: 11pt;
      font-weight: normal;
      font-type: arial;
      color: #331144;
    }
    
    
    #organisers p {
      font-size: 11pt;
      font-weight: normal;
      font-type: arial;
      color: #331144;
    }
    
    #book1 {
     background-color: #6699AA;
      border: 1px solid #444444;
      position: absolute;
      top: 210px;
      left: 0%;
      width: 85%;
        height: 36%;
        margin-top: 5%;
        margin-left: 5%;
        margin-right: 5%;
        padding-left: 2%;
        padding-right: 2%;
    }
    
    #book1 p {
      font-size: 11pt;
      font-weight: bold;
      font-type: arial;
      color: #331144;
    }
    
    .book1 {
    	float: right;
    }
    
    
    .book1b {
    	float: left;
    	margin-right: 10px;
    }
    
    
    #book2 {
     background-color: #6699AA;
      border: 1px solid #444444;
      position: absolute;
      top: 870px;
      left: 0%;
      width: 85%;
        height: 37%;
        margin-top: 5%;
        margin-left: 5%;
        margin-right: 5%;
        padding-left: 2%;
        padding-right: 2%;
    }
    
    #book2 p {
      font-size: 11pt;
      font-weight: bold;
      font-type: arial;
      color: #331144;
    }
    
    .book2 {
    	float: right;
    }
    
    .book2b {
    	float: left;
    	margin-right: 10px;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Also when opening on internet explorer I cant figure out what goes wrong with my menu on the left and why it doesnt scroll!
    Start fixing your page by adding the right DOCTYPE.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello killiesteve,
    You've specified heights for #call, #presentations, #further and #organizers.
    Get rid of the height and those divs will act a lot differently.
    The absolute positioning still messes it up though, it will work a lot better if you float those divs.

    In fact, since those divs are all the same, you could trade all four of those ids for one class that would do the same thing.

    like this, CSS -
    Code:
    #leftmenu a{
      text-decoration: none;
      display: block;
      color:#ffffff;
      margin-right:2px;
    }
    
    #leftmenu a:hover {
      background:url(darkgrad.jpg) repeat-x center center;
    }
    
    
    .call {
        background-color: #6699AA;
          border: 1px solid #444444;
        width: 73%;
    float: right;
        margin-left: 2%;
        margin-top: 5%;
        padding-left: 2%;
        padding-right: 2%;
    }
    
    
    h1 {
      font-size: 17pt;
      font-weight: normal;
      font-type: arial;
      font-style: italic;
      
      text-align: center;
      color: #331144;
       }
    
    .call p {
      font-size: 11pt;
      font-weight: normal;
      font-type: arial;
      color: #331144;
    }
    h2 {
      font-size: 17pt;
      font-weight: normal;
      font-type: arial;
      font-style: italic;
      
      text-align: center;
      color: #331144;
    }
    .call table {
      table-layout: fixed;
      font-size: 11pt;
      font-weight: normal;
      font-type: arial;
      color: #331144;
    }
    And, of course, all four of those divs will have to be <div class="call">


    That's only a partial fix. The other absolute positioning still breaks the layout. Have a look at http://www.tyssendesign.com.au/artic...ning-pitfalls/
    Also, have a look at http://nopeople.com/CSS/equal_length_columns/index.html for a good 2-column layout that you could easily adapt to your site.
    Don't forget to visit every link in my sig.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When i changed the css just to have one class it only showed up one of my sections when displaying it on the browser.

    Im guessing theres no easy was then to fix the contents of a div so they dont spill out on resize? May need to just chance it and hope the users doesnt resize there window lol

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by killiesteve View Post
    When i changed the css just to have one class it only showed up one of my sections when displaying it on the browser.

    Im guessing theres no easy was then to fix the contents of a div so they dont spill out on resize? May need to just chance it and hope the users doesnt resize there window lol
    Did you change the markup too?
    And no, there is no quick fix. Pretty much requires a re-write. Did you look at that 2 column layout? That's a good base to start with.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •