CSS layout som fungerer i Internet Explorer

oskaremil · 1. august 2006

Trenger litt hjelp til prosjektsiden min, myPal Home.

Ja jeg, vet, designet er crappy, men det er ikke dette jeg har prioritert ennå. Jeg har store plager med layouten. Vedlagte CSS fil viser hvordan layouten er bygd opp. Layouten på siden fungerer fint med Firefox (1,5) og Opera (8), men ikke med IE6. Jeg har en header, en meny på venstresiden, innhold og footer. Meninger er at footer skal være permanent i bunnen av nettleseren. Footer er altså der den skal. Problemet er at IE ikke viser "content" div skikkelig.

Som dere kanskje ser ved visning i IE6, så "slutter" innholdet utenfor nettleser vinduet. Scrollbaren til høyre ( i About og Documents er der såpass mye innhold at scrollbaren dukker opp. Dersom den ikke dukker opp, så resize nettleseren til en mindre størrelse) forsvinner sammen med innholdet nedover, slik at IE brukere ikke klarer å se hele innholdet.

Er det noen som kan hjelpe meg slik at siden vises nogenlunde likt i IE6 som den gjør i Opera/FireFox ?

Har nå plagast i to uker med dette, ingen andre sider jeg har oppsøkt kan hjelpe meg med hvordan å fikse dette. Jeg tror problemet er at IE6 ikke klarer å lese stylesheet'et skikkelig, og dermed viser siden feil.

main_layout.css

Endret 1. august 2006 av oskaremil

Kannutt · 1. august 2006

Hei!

Jeg kan ordne dette for deg på 10 minutter. Slik jeg ser det har du mye unødvendig kode i css i tillegg til noen center og border i html. Men betingelsen er at du lover å ta bort den footeren som følger bunnen på lesevinduet! Du bare kan ikke ha den slik!! :no:

oskaremil · 2. august 2006

Footeren har jeg vurdert å ta vekk, ja. Har du lyst å fikse så er det supert. Har dog et lite krav, om dette er mulig, content-div må være frittstående, dvs den må ikke være nøstet inn i andre div-tagger. Det gjør at kildekoden til websiden blir lettere å lese, siden dette er et software prosjekt med mange deltagere er det sannsynlig at det er flere enn meg som kommer til å oppdatere websidene og da er det greit å ha et enkelt og standardisert kodedesign. Bruker php include for å sette inn frames, og vil gjerne beholde mitt oppsett for en standard body som vist nedenfor:

<body>
   <?php include('frame.php'); ?>
   <div id="content">
       blahblahblahblah
   </div>
</body>

div-taggene til header og meny må kunne startes og lukkes i frame.php

Er første gang jeg lager en webside ved hjelp av CSS, så der er nok kanskje en del unødendig kode, ja :whistle:

Endret 2. august 2006 av oskaremil

Kannutt · 2. august 2006

Her har du css og de tre sidene dine. Tror det skal være ganske enkelt å forstå.

CSS

body

{

margin: 0px;

}

.style2

{

font-size: xx-large;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

}

#head

{

position: relative;

float: left;

margin: 0;

width: 900px;

height: 150px;

background: #0066FF;

color: #000000;

text-align: center;

vertical-align: middle;

}

#wrap

{

position: relative;

float: left;

margin-top: 5px; }

#left

{

position: absolute;

top: 0;

left: 0;

width: 150px;

height: 100%;

background: #ffffff;

}

#content

{

position: relative;

float: left;

width: 750px;

height: auto;

margin-left: 150px;

background: #FFFFFF;

color: #000000;

}

#foot

{

position: relative;

float: left;

width: 900px;

height: 20px;

background: #0066FF;

color: #000000;

text-align: center;

}

Fontstyle

p

{

font-size:11px;

font-style:normal;

font-size-adjust:inherit;

font-stretch:normal;

}

h3

{margin-bottom:0;}

p,a,h1,h3,h2,table

{

font-family: Verdana, Arial, Helvetica, sans-serif;

}

a

{

font-size:12px;

color:#000099;

text-decoration:none;

}

a:hover

{

color:#0033CC;

text-decoration:overline underline;

}

.documentationtable

{

width: 100%;

font-size:12px;

background:#CCCCCC;

text-align:left;

vertical-align:top;

}

.documentationtable_col1

{

width:200px;

}

.documentationtable_col2

{

width:400px;

}

.newsheader

{

border-bottom:solid thin #999999;

width: 80%;

text-align:left;

}

.newsdate

{

color:#000099;

width: 80%;

text-align:right;

}

.newscontent

{

width:80%;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</style>

</head>

<body>

<div id="head"><span class="style2"> myPal Home </span>

</div>

This page is still under heavy construction. Currently IE6 has some troubles displaying the page

properly. We apologize this. This webpage displays properly with

<a href="http://www.mozilla.com/firefox/">Firefox</a>

or

<a href="http://www.opera.com/">Opera</a>.

</p>

<div class="newsheader"><h3>Dynamic news database functional</h3></div><div class="newsdate"><p>2006-07-27 16:03:08</p></div><div class="newscontent"><p>Now the news database is functional. This means that it's less work adding news, this resulting in more news. Cheerio!</p></div><div class="newsheader"><h3>More developers added</h3></div><div class="newsdate"><p>2006-07-27 15:01:37</p></div><div class="newscontent"><p>Added several developers. This will increase overall activity and hopefully speed up the planning phase. We are currently discussing which features should be included in first release.</p></div>

<div class="newsheader"><h3>New sketches added</h3></div>

<div class="newscontent"><p>New sketches added in "Documents" sections.</p></div>

</div>

</a>

<ul>

<li><a href="about.php">About</a></li>

<li><a href="docs.php">Documents</a></li>

<li><a href="http://sourceforge.net/forum/?group_id=169555">Forums</a></li>

<li><a href="http://sourceforge.net/projects/mypal">SF.net summary</a></li>

</ul>

</div>

<div id="foot"><a href="http://mypal-project.blogspot.com">Weblog of project administrator</a>

( <a href="http://mypal-project.blogspot.com" target="new_window">new window</a> )</div>

</body>

</html>

about

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<meta name="generator" content="Adobe GoLive" />

<title>About</title>

<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />

<link href="css/fontstyle.css" rel="stylesheet" type="text/css" media="all" />

</head>

<body>

<div id="head"><span class="style2"> myPal Home </span>

</div>

<div id="wrap">

<div id="content"><h1>About myPal</h1>

<h2>The idea</h2>

<p>

The idea "myPal" came to me at springtime 2006. At that time I was busy finishing a

Bachelor's degree at Aalesund University College, so I did not have any spare

time to start with this project. Despite the lack of time, I had some moments where

new features of myPal evolved. The basic idea with myPal is to provide a desktop

agent beeing able to handle email, calendar. Later on, a contact management system

and something I like to call "social filesharing" evolved.</br>

I do realize that out there, it exists applications that let you manage email, contacts

and calendar all-in-one (like M$ Outlook or Evolution Mail). myPal does not aim to

be a shallow copy of these programs. myPal aims to present the email/calendar functionality

in a whole new version. myPal will be running discreetly on the desktop as an agent.

When user interface is up this should take no more than max 600x400px of the screen.

The user interface should be minimalistic, but functional and provide just the options

you as a user might need at the time. The ultimate goal with the user interface is that

no functionality should be more than two mouse-clicks away.

</p>

<h2>Email client</h2>

<p>

The email client will be fullworthy email client. The original idea about was to create

a lightweigth email client, but as time went by I realized that a lightweigth email

client would quickly become an unusable client as spam starts to arrive. The email

client will include a self-learning spam filter and possibilities to create own

filter rules and organize email in different folders based on those filter rules.

There will also be support for an adressbook and management of multiple email accounts.

To start with, email client will include support for POP/SMTP.

</p>

<h2>Calendar</h2>

<p>

The calendar will to only be a tool for keeping track of own events. The calendar will

also be a tool for keeping track of your friends events. By adding contacts to myPal users

can monitor eachothers events. Of course, there will be an option to make an event private,

meaning no-one but you can watch the event. It will be possible to define own event types (

like "Birthday", "Meeting" or whatever ) and assign an icon to these. Events can repeat on daily,

weekly, monthly or yearly basis in a specified time-interval. As we are aware of,

different cultures and differens nations have different special days. The days that are marked

with red in the calendar. Users will have the option to define which dates are special dates.

These dates will be marked red in the calendar, and it will also be possible to specify a name

for these special dates, names like "National day" or "Christmas day". When user is online, data will be

synchronized to an external database. In case myPal data disappears from the computer ( due to

reformatting or harddisk crash ) this data can easily be obtained next time myPal is installed.

For privacy reasons, events from the calendar might be encrypted before they are stored in the

database, but this has not been decided yet.

</p>

<h2>Social filesharing</h2>

<p>

The social filesharing system will make it possible for users to share documents with eachother.

The main idea behind this is that users define files/directories they want to share. Users contacts

can download these files. Also, when a contact has updated his/her fileshare, the user will recieve

some sort of notification. Privacy is an issue here to, the files should be encrypted between

users. This will slow down the transfer rate, but will in return add a layer of protection.

</p>

<h2>Contact management</h2>

<p>

With myPal users can add and remove contacts. Note that these contacts are different from email contacts.

The management system will be build on a database and a webservice. The management system should be secure

enough for users to submit private information. The contact management system will detect if users are online

or offline, and also provide connections between users.

</p>

<br /><br />

<p>Cheers, O ( project admin ).</p>

</div>

<div id="left">

<a href="http://sourceforge.net">

<img src="http://sflogo.sourceforge.net/sflogo.php?group_id=169555&type=4" alt="SourceForge.net Logo" />

</a>

<ul>

<li><a href="index.php">News</a></li>

<li><a href="about.php">About</a></li>

<li><a href="docs.php">Documents</a></li>

<li><a href="http://sourceforge.net/forum/?group_id=169555">Forums</a></li>

<li><a href="http://sourceforge.net/projects/mypal">SF.net summary</a></li>

</ul>

</div>

</div>

<div id="foot"><a href="http://mypal-project.blogspot.com">Weblog of project administrator</a>

( <a href="http://mypal-project.blogspot.com" target="new_window">new window</a> )</div>

</body>

</html>

docs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<meta name="generator" content="Adobe GoLive" />

<title>Documents</title>

<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />

<link href="css/fontstyle.css" rel="stylesheet" type="text/css" media="all" />

</head>

<body>

<div id="head"><span class="style2"> myPal Home </span>

</div>

<div id="wrap">

<div id="content"><h1>Documents</h1>

<h2>Document downloads</h2>

<p>

These documents describe the functions and structure of myPal with UML.

Indended audience is developers interrested in contributing to the project.

</p>

<br>

<table class="documentationtable">

<tr>

<th class="documentationtable_col1">Document name</th>

<th class="documentationtable_col2">Description</th>

<th>Download</th>

</tr>

<tr>

<td>Featurelist - Email management</td>

<td>Describes the functionality required for the email module.</td>

<td><a href="/mypaldocs/Featurelist - Email management.doc">.doc</a></td>

</tr>

<tr>

<td>myPal - Structure</td>

<td>Describes the main architecture of myPal.</td>

<td><a href="/mypaldocs/myPal_Structure.pdf">.pdf</a></td>

</tr>

<tr>

<td>myPal - Use Case</td>

<td>Describes the main user scenarios of myPal.</td>

<td><a href="/mypaldocs/myPal_UseCase.pdf">.pdf</a></td>

</tr>

<tr>

<td>Use Case - Contacts</td>

<td>Describes the user scenarios for contact management system.</td>

<td><a href="/mypaldocs/UseCase_Contacts.pdf">.pdf</a></td>

</tr>

</tr>

<td>Use Case - Email</td>

<td>Describes the user scenarios for email client.</td>

<td><a href="/mypaldocs/UseCase_Email.pdf">.pdf</a></td>

</tr>

<tr>

<td>Use Case - Events</td>

<td>Describes the user scenarios for the calendar/scheduler.</td>

<td><a href="/mypaldocs/UseCase_Event.pdf">.pdf</a></td>

</tr>

<tr>

<td>Use Case - Filesharing</td>

<td>Describes the user scenarios for social filesharing.</td>

<td><a href="/mypaldocs/UseCase_Fileshare.pdf">.pdf</a></td>

</tr>

</table>

<br />

<br />

<h2>Preview sketches</h2>

<P>

These images are for planning purposes only. They are mostly intended for developers and does in no way represent

the final product.

</P>

<table class="documentationtable">

<tr>

<th class="documentationtable_col1">myPal location</th>

<th class="documentationtable_col2">Description</th>

<th>View/Download</th>

</tr>

<tr>

<td>Calendar - Month</td>

<td>

This represents the "Month" view in myPal. Current date is marked, dates with events are marked

as bold. Red days in the calendar are marked, and in this view, user has also added an own red day,

"National Day". Events are marked with icons representing the event type.

</td>

<td><a href="images/calendar_month.png">.png</a></td>

</tr>

<tr>

<td>Calendar - Week</td>

<td>This represents the "Week" view of the calendar. Events that day will be shown with a graphical timespan.</td>

<td><a href="images/calendar_week.png">.png</a></td>

</tr>

<tr>

<td>Calendar - Hover event</td>

<td>Notifications like this will be shown when user hovers an event. Examples are shown for events marked in month view</td>

<td>

<a href="images/calendar_month_birthday.png">(Birthday).png</a>

<a href="images/calendar_month_important.png">(Important).png</a>

</td>

</tr>

<tr>

<td>Contact management</td>

<td>No information added yet</td>

<td><a href="images/contact_plain.png">.png</a></td>

</tr>

<tr>

<td>Email interface</td>

<td>No information added yet</td>

<td><a href="images/email_plain.png">.png</a></td>

</tr>

<tr>

<td>Email window</td>

<td>

This shows an example of what a part of the user interface might look like. Its contents

is an information area, a content area and a footer.

</td>

<td>

<a href="images/read_email.png">.png</a>

</td>

</tr>

<tr>

<td>Toolbar</td>

<td>

This is an example of how the toolbar might look in myPal. The toolbar is not always going

to be visible.

</td>

<td>

<a href="images/toolbar.png">.png</a>

</td>

</tr>

</table>

</div>

<div id="left">

<a href="http://sourceforge.net">

<img src="http://sflogo.sourceforge.net/sflogo.php?group_id=169555&type=4" alt="SourceForge.net Logo" />

</a>

<ul>

<li><a href="index.php">News</a></li>

<li><a href="about.php">About</a></li>

<li><a href="docs.php">Documents</a></li>

<li><a href="http://sourceforge.net/forum/?group_id=169555">Forums</a></li>

<li><a href="http://sourceforge.net/projects/mypal">SF.net summary</a></li>

</ul>

</div>

</div>

<div id="foot"><a href="http://mypal-project.blogspot.com">Weblog of project administrator</a>

( <a href="http://mypal-project.blogspot.com" target="new_window">new window</a> )</div>

</body>

</html>

Har endret stilarket, og gjort noen endringer på siden. Har ikke gjort noe med fontstyle.

news(index)

Endret 2. august 2006 av Kannutt

oskaremil · 2. august 2006

ok. takker og bukker. skal prøve dette. men en liten fråga: Går det an å gjennomføre dette uten å bruke wrapper ? Det hadde igrunn vært mer praktisk om jeg slapp å nest'e divtags, slik at siden blir seende ut slik:

<body>
<div id="header">Yarrr</div>
<div id="left">Press me</div>
<div id="content">Aye aye</div>
</body>

Endret 2. august 2006 av oskaremil

Kannutt · 2. august 2006

ok. takker og bukker. skal prøve dette.

6601118[/snapback]

Du må selvsagt fjerne alle

greiene. Vet ikke hva det var som gikk galt når jeg skulle legge det inn her....

Iris_L · 2. august 2006

Du må selvsagt fjerne alle QUOTE greiene. Vet ikke hva det var som gikk galt når jeg skulle legge det inn her....

Du glemte "/" i den nederste quoten din

Endret 2. august 2006 av Iris_L

Kannutt · 2. august 2006

ok. takker og bukker. skal prøve dette. men en liten fråga: Går det an å gjennomføre dette uten å bruke wrapper ? Det hadde igrunn vært mer praktisk om jeg slapp å nest'e divtags, slik at siden blir seende ut slik:
<body>
<div id="header">Yarrr</div>
<div id="left">Press me</div>
<div id="content">Aye aye</div>
</body>
6601118[/snapback]

Tja, går sikkert an.

Grunnen til at wrapperen er der, er for å få footeren til å plassere seg riktig. Årsaken til rekkefølge og posisjonering på content og left er for å tvinge content til å ligge til høyre for meny, selv om du gjør nettleservinduet mindre enn innholdet.

Men er sikkert en løsning på det.... Men forstår ikke helt hvorfor og hva du mener.

Endret 2. august 2006 av Kannutt

Logg inn

CSS layout som fungerer i Internet Explorer

Anbefalte innlegg

oskaremil

Lenke til kommentar

Videoannonse

Kannutt

Lenke til kommentar

oskaremil

Lenke til kommentar

Kannutt

Lenke til kommentar

oskaremil

Lenke til kommentar

Kannutt

Lenke til kommentar

Iris_L

Lenke til kommentar

Kannutt

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer