Avatar billede lakridserne Nybegynder
03. maj 2009 - 19:48 Der er 16 kommentarer og
2 løsninger

Har problemer med CSS layout

Hej eksperter,

Jeg og en anden en har sat os for at lave et virtuelt fodboldmanagerspil lidt lige som Virtual Manager (virtualmanager.com). Som programmmøren har jeg lidt problemer med at få siden til at funge i både ie og firefox.

Jeg skriver min side i Ruby on Rails, hvis dette har nogen betydning.

Her er koden:

style.css:

body {
    background-color: #e6e0ce;
    text-align: center;
    position: relative;
}
img {
    border-width: 0px;
}
#sortlinje {
    top: -5px;
    position: relative;
    height: 40px;
}
#main {
    top: -5px;
    background: url('../images/DesignLine.png') center;
    position: relative;
    width: 884px;
    text-align: left;
    margin: auto;
}
#content {
    position: relative;
    margin-left: 10px;
}
#footer {
    margin: auto;
    width: 884px;
    position: relative;
    bottom: 5px;
}
#designline {
    background: url('../images/DesignLine.png') center;
    position: relative;
    width: 884px;
    text-align: left;
    margin: auto;
}

application.html.erb (layout-delen af siden):

<!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" xml:lang="en" lang="en">
  <head>
    <title>
      <% if @pagetitle %>
        <%= @pagetitle %> - Virtual Football Manager
      <% else %>
        Virtual Football Manager
      <% end %>
    </title>
  <%= stylesheet_link_tag 'style' %>
</head>
<body>
<%= link_to image_tag "Top.png", :controller => 'about' %>
<div id="designline">
  <div id="sortlinje">
    <%= image_tag "SOrtLinje.png" %>
  </div>
  <div id="main">
    <div id="content">
      <%= yield %>
    </div>
  </div>
</div>
<div id="footer">
  <%= image_tag "DesignLine2.png" %>
</div>
</body>
</html>

<%, <%= og %> er alle til ruby on rails

Alt hvad der står i mellem <% og %> er ren ruby on rails kode
Alt hvad der står i mellem <%= og %> er ruby on rails kode der bliver fortolket og resultatet bliver lagt ind som ren html.

kommandoen yield er den der skifter over til den primære side.

I den er der ikke andet end en tekstlinje (ren html).

Mit problem er at den i firefox laver mellemrum mellem den hvide baggrund på siden og footeren (placeret i div'en footer).

Udover det placerer den indholdet af content alt for langt nede (alt sammen i firefox).

Hvis jeg prøver at rette det i firefox bliver den underlig i IE.

Håber på et svar (er sikkert meget simpelt).

På forhånd tak

lakridserne
Avatar billede lakridserne Nybegynder
03. maj 2009 - 20:46 #1
PS: Problemet med mellemrummet mellem baggrundsgrafikken og bundlinjen løser sig hvis man tilføjer mere tekst
Avatar billede trinefe Nybegynder
03. maj 2009 - 21:03 #2
Hmm.. Nu kender jeg ikke så godt til ruby on rails, så det er lidt svært at overskue. og det ville være rart at se hvad du mener.

Men kunne det ikke hjælpe hvis du ventede med afslutte 'content' (og måske 'main') div'ene? Eller ødelægger det hele opsætningen?

Ellers kunne du jo også bare sætte en if ind der afgør om det er den ene eller den anden browser. (det har jeg da af og til været nødt til når jeg ikke gider at slås med dem længere, selvom der sikkert findes en simpelt løsning på alt)
Avatar billede lakridserne Nybegynder
03. maj 2009 - 21:38 #3
Det har jeg prøvet (at afslutte div'erne efter), men det vil bare få det nederste billede (footeren) til at afslutte før den sidste forekomst af den almindelige baggrund.
Avatar billede trinefe Nybegynder
03. maj 2009 - 22:02 #4
Hmm er det ikke muligt at se? Evt bare et screenshot?
Avatar billede lakridserne Nybegynder
03. maj 2009 - 22:43 #5
Det gør jeg i morgen
Avatar billede lakridserne Nybegynder
04. maj 2009 - 07:50 #7
PS: Det kommer i helt skarp kvalitet, når man lige zoomer en tak ind (klik engang ovenpå billedet).
Avatar billede trinefe Nybegynder
04. maj 2009 - 09:53 #8
Nåårh nu forstår jeg problemet..
Det er jo noget skidt.. Er der egentlig nogle sider du skal have uden tekst/indhold? - For så kan man sige at problemet er irrellevant..

Hmm.. Kan ikke lige løse problemet udfra din nuværende opsætning.
Men sådan som jeg ville sætte det op ville være med:

<div class='centrerer-alt-indhold'>
(denne div indeholder alt og centrerer..)

<div class='designlinje'>
<div class='sortlinje'>
<div class='main'>
(osv alle de divs du har brug for, bare placeret i den der margin: 0 auto;)

så afsluttes alle divs undtagen 'centrerer-alt-indhold'
<div clas='footer'>
(ved ikke om der måske skal sættes en margin-top på?)
</div></div>

Så burde det ikke være nødvendigt at sætte position: relative; på de andre divs? Ved ikke hvorfor jeg har en mistanke til dem, men jeg er bare altid oppe og slås med position, så tror jeg undgår dem så meget jeg kan.
Avatar billede lakridserne Nybegynder
04. maj 2009 - 12:07 #9
Ok.

Det ville bare være rart at kunne sætte kommer snart eller lign. ind.

Prøver lige når jeg kommer hjem...

På forhånd tak
Avatar billede lakridserne Nybegynder
04. maj 2009 - 13:32 #10
Så virker siden :)

Tak for hjælpen begge to.

Jeg blev lige nødt til at detecte hvilken browser man brugte og så kunne jeg rette alt.

@trinefe: Jeg brugte din løsning og den løste problemet med at den viste mellemrummet. Tak for det! Smid et svar!

Hvis nogen har lyst at følge udviklingen blogger vi om udviklingen der hvor siden kommer til at ligge - nemlig http://virtualfootballmanager.co.cc

Tak for hjælpen
Avatar billede Dajuf Nybegynder
04. maj 2009 - 13:51 #11
Det ser ud som et interessant projekt, som jeg glæder mig til at følge. Har I evt. en mail-adresse, man kan skrive til, hvis man gerne vil være involveret eller hjælpe til i projektet? :)

Nu siger du, at det skal være lidt ligesom Vman, og jeg kan ikke lade være med at spørge: Hvem er I, der er bag projektet, på Vman? ;)
Avatar billede lakridserne Nybegynder
04. maj 2009 - 17:08 #12
Hvad mener du med bag projektet på vman?

Jeg kan lige spørge den anden.
Avatar billede Dajuf Nybegynder
04. maj 2009 - 17:16 #13
I skriver, at det skal være lige ligesom Vman, hvorfor jeg må formode, I selv spiller Vman. Derfor ville jeg lige spørge, hvem I er derinde? :)
Avatar billede trinefe Nybegynder
04. maj 2009 - 20:52 #14
Begge to? Jeg kan kun se mine poster :p
Men det var godt du fik det til at virke! Jeg følger spændt med ;)
Avatar billede lakridserne Nybegynder
04. maj 2009 - 21:33 #15
Undskyld!
Havde ikke lige set det var dig der postede to gange!

Men jeg er ved at rigge et support-system til, hvor man bare skal skrive til afdelingen crewet eller chathjælp.
Avatar billede lakridserne Nybegynder
04. maj 2009 - 21:35 #16
Hvis altså man vil med i crewet
Avatar billede lakridserne Nybegynder
04. maj 2009 - 21:36 #17
Og tak for hjælpen
Avatar billede lakridserne Nybegynder
04. maj 2009 - 21:41 #18
Jeg hedder FC Lynge Broby

Jeg ved ikke om den anden vil have den oplysning ud, men spørger ham lige.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester