...

View Full Version : Problems with text and side menu bar



killiesteve
03-05-2009, 03:10 PM
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:


<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



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;
}

abduraooft
03-05-2009, 03:38 PM
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 (http://www.alistapart.com/articles/doctype).

Excavator
03-05-2009, 05:40 PM
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 -

#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/articles/css/absolute-positioning-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.

killiesteve
03-05-2009, 06:26 PM
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

Excavator
03-05-2009, 08:19 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum