Søg
Avatar billede trp79 Nybegynder
04. august 2005 - 16:54 Der er 18 kommentarer og
1 løsning

Problem med simpel css

Hejsa
Jeg har problemer med at få placeret min <div id="footer"> nederst på min side. Den bliver istedet placeret til højre.
Er der nogen der kan gennemsku min fejl?

..
  <body>
    <div id="banner">
      [Banankassen]
    </div>
   
    <div id="indhold">

      <h3 class="obs advarsel">Oversigt</h3>
      Du er logget ind som <jsp:getProperty name="login" property="brugernavn"/>.

    </div>
   
    <div id="footer">
      [Bundmargintekst med tele- og adresseoplysninger]
    </div>
  </body>
  </html>

************************

BODY
{
  margin:10px 20px;
  font-size:100%
  font-family:verdana, arial,sans-serif;
  background-color:#efefef;
}
h1
{
  font-size:150%;
}
div#banner h1
{
  background:gray;
  color:white;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:100px;
}

div#indhold
{
  float:left;
  width:75%;
  background-color:#efefef;
  border-right:2px dashed gray;
  margin-right:15px;
  padding-bottom:20px;
  padding-right:10px;
}

div#indhold p
{
  font-size:90%;
  margin:8px auto;
}

div#indhold h3
{
  font-size:100%;
  margin:10px auto;
}
p#opdatering
{
  font-size:80%;
  text-align:right;
  margin-right:20px;
}

div#footer address
{
  font-size:80%;
  font-style:normal;
  font-weight:bold;
  background:gray;
  color:white;
  padding:5px;
  clear:left;
  margin:10px auto;
}

div#footer address a
{
  color:white;
  margin: 0px;
  position: relative;
}

/* H?jre kolonne */
div#rightcol
{
  width: 180px;
  position: absolute;
  top: 100px;
  right: 20px;
}
/* Menuen i h?jre kolonne */
ul#menu
{
  width:100%;
  border-width:0px 0px 0 0px;
  border-style: solid;
  border-color:#000;
  padding: 0;
  margin-left: 20px;
  font-weight:bold;
  font-size:80%;
}

ul#menu
{
  list-style:none;
  margin: 0;
  padding: 0;
}
#menu li
{
  border-bottom: 2px solid #efefef;
  color:#ffffff;
}
#menu li a
{
  display:block;
  width:100%;
  padding: 5px;
  background-color: gray;
  color:#fff;
  text-decoration:none;
}
html>body #menu li a
{
  width:auto;
}
#menu li a:hover,
#menu a.aktiv
{
  background-color:#bbb;
  color:#1a0080
}
h3.advarsel
{
  color:#c00;
  background-color:
  transparent
}
h3.obs
{
  border-top:1px solid #257;
  border-bottom:1px solid #257;
  margin-right:1em;
}


Et udfaldet kan iøvrigt ses her: http://www.ausumnet.dk/Banankasse/ny_bruger.jsp

På forhånd tak, mvh
Torben
Avatar billede olebole Juniormester
04. august 2005 - 17:17 #1
<ole>

Ehhhh .... hvad er dog det for en kode? Det er ikke HTML og ikke XHTML ... og du disabler brugen af CSS i dokumentet. Der er huller mellem fejlene. Det er nok det pæneste, jeg kan sige  :)

Enten har du ikke set dit dokument i ViewSource, eller også skal du lære en masse om webkodning, før du går videre  :)

/mvh
</bole>
Avatar billede trp79 Nybegynder
04. august 2005 - 17:30 #2
Okay, så får du lige den simpleste side her:
*******oversigt.jsp*******
<jsp:useBean id="login" class="ausumnet.Login" scope="session"/>
<% if(!login.isLoggetInd()) response.sendRedirect("./index.jsp");%>

<?xml version="1.0" encoding="UTF-8"?>
<!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" sml:lang="da"
lang="da">
<jsp:include page="/legaliseret/menu.jsp"/>

  <head>
    <title>Login</title>
    <link rel="stylesheet" type="text/css"
    href="css/common.css" media="screen" />
  </head>
  <body>
    <div id="banner">
      [Banankassen]
    </div>
   
    <div id="indhold">

      <h3 class="obs advarsel">Oversigt</h3>
      Du er logget ind som <jsp:getProperty name="login" property="brugernavn"/>.

    </div>
   
    <div id="footer">
      [Bundmargintekst med tele- og adresseoplysninger]
    </div>
  </body>
  </html>
***********oversigt.jsp slut**********

stylesheetet(common.css) er som anført i mit spørgsmål. Og det eneste der ikke virker er altså det at understående ikke bliver placeret for neden på siden men istedet til højre over menuen(som inkluderes vha. <jsp:include page="/legaliseret/menu.jsp"/> ):
    <div id="footer">
      [Bundmargintekst med tele- og adresseoplysninger]
    </div>

Hvad mener du med jeg disabler css?
Spøgsmålet er lavet som et udklip af det kode som jeg troede var relevant, deraf ..(prikkerne) før <body>.
Avatar billede softspot Forsker
04. august 2005 - 23:41 #3
Jeg tror du skal kigge lidt på det kode du inkluderer, for hvis jeg kigger på resultatet (af det link du henviser til), så er der flere DTD-definitioner og <html>-tags, samt <head>-tags. Du skal nok strømline din strategi for hvad der inkluderes hvor og fjerne dobbelt-kode (såsom DTD, <html> og <?xml...>-tags).

Det kan da godt være jeg ikke ved nok om hvordan man bygger en side op og dette rent faktisk er tilladt, men det ser for mig ret atypisk ud at udforme sin html på denne måde...
Avatar billede olebole Juniormester
05. august 2005 - 00:08 #4
Udover bunker af white-space i toppen, ser den kode, browseren skal arbejde med, sådan ud:

<?xml version="1.0" encoding="UTF-8"?>
<!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" sml:lang="da"
lang="da">
<?xml version="1.0" encoding="UTF-8"?>
<!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" sml:lang="da"
lang="da">
  <head>
    <title>Login</title>
    <link rel="stylesheet" type="text/css"
    href="css/common.css" media="screen" />
  </head>
  <body>
    <div id="rightcol">
        <ul id="menu">
          <li><a href="http://www.eb.dk">Ekstra bladet</a></li>
          <li><a href="http://www.exp.dk">Eksperten</a></li>
          <li><a href="http://www.hattrick.org">Hattrick</a></li>
          <li><a href="http://www.pol.dk">Den levende avis</a></li>
        </ul>
  </div>   
  </body>
</html>


  <head>
    <title>Ny bruger</title>
    <link rel="stylesheet" type="text/css"
    href="css/common.css" media="screen" />
  </head>
  <body>
    <div id="banner">
      [Banankassen]
    </div>
   
    <div id="indhold">
... osv - osv ...

Explorer er yderst hysterisk med, hvilken DTD, man bruger - og hvad der evt. måtte stå før. Al det rod, der optræder i begyndelsen af dit dokument, disabler store dele af CSS i IE6, da denne går i quirks mode.

Du kan evt. teste ved at skrive:
    java script:alert(document.compatMode)
- i adresselinjen og trykke 'Return'. Hvis CSS understøttes i dokumentet, returneres 'CSS1Compat' ... i modsat fald 'BackCompat'.
Avatar billede softspot Forsker
05. august 2005 - 00:21 #5
olebole >> Kan man læse noget om graden af understøttelse af CSS alt efter hvilket DTD man bruger nogen steder og er det kun IE der har dette "problem"?
Avatar billede olebole Juniormester
05. august 2005 - 00:40 #6
IE har traditionelt tolket CSS' boxmodel forkert ... f.eks. lagt border og padding indenfor elementets grænser, fastlagt af dets width og height.
Det blev lavet om i version 6.0, forudsat man bruger en fuld DTD med definitions-URL. Denne ændring kan du læse om her under The !DOCTYPE "Switch":
  http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

Erfaringen har dog vist, at IE også går i quirks mode, når der står noget før DTD'en ... f.eks. en HTML-kommentar, eller XML-prolog  :o|
Avatar billede trp79 Nybegynder
05. august 2005 - 10:57 #7
Okay, så har jeg forsøgt at ryde lidt op. Indtil videre har jeg ikke fjernet white spaces. Men et eks. på koden er som understående og der står [Bundmargintekst med tele- og adresseoplysninger] stadig til højre (over menuen) istedet for nederest på siden.

Kan vi ikke prøve at tage udgangspunkt i understående og få det til at spille, forstået på den måde at det er xhtml og således [Bundmargintekst med tele- og adresseoplysninger] kommer nederst på siden. Så smider jeg lige nogle flere point i spørgsmålet.

<?xml version="1.0" encoding="UTF-8"?>
<!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" sml:lang="da"
lang="da">
    <div id="rightcol">
        <ul id="menu">
          <li><a href="http://www.eb.dk">Ekstra bladet</a></li>
          <li><a href="http://www.exp.dk">Eksperten</a></li>
          <li><a href="http://www.hattrick.org">Hattrick</a></li>
          <li><a href="http://www.pol.dk">Den levende avis</a></li>
          <li><a href="./legaliseret/opretBananType.jsp">Opret banantype</a></li>
          <li><a href="./index.jsp?handling=log_ud">Log ud</a></li>
        </ul>
        </a>
      </div>


  <head>
    <title>Login</title>
    <link rel="stylesheet" type="text/css"
    href="css/common.css" media="screen" />
  </head>
  <body>
    <div id="banner">
      [Banankassen]
    </div>
   
    <div id="indhold">

      <h3 class="obs advarsel">Oversigt</h3>
      Du er logget ind som Torben.

    </div>
   
    <div id="footer">
      [Bundmargintekst med tele- og adresseoplysninger]
    </div>
  </body>
  </html>
Avatar billede trp79 Nybegynder
05. august 2005 - 10:58 #8
Hov første skridt må jo være at få <div id="rightcol"> ned i body!
Avatar billede roenving Novice
05. august 2005 - 11:01 #9
-- og fjern xml-prologen, så også IE fortolker vigtige css-ting efter standarden !-)
Avatar billede trp79 Nybegynder
05. august 2005 - 11:24 #10
Beklager men jeg er helt ny med xhtml(og html for den sags skyld) - hvad er xml prologen?
Avatar billede roenving Novice
05. august 2005 - 11:32 #11
Det er det tag som står foran doctype !-)
Avatar billede olebole Juniormester
05. august 2005 - 17:11 #12
- og du skal ikke være ked af, du ikke ved så meget om XHTML. Det er der ikke ret mange der gør ... og de, der ved mindst, er endda dem, der skriver flest tutorials om emnet  :)

Prøv at læse disse to:
    http://www.eksperten.dk/artikler/537
    http://www.eksperten.dk/artikler/538

- og få et mere realistisk billede af XHTML og alle de problemer, der er med realistisk brug af standarden.
Du skriver langt bedre og mere brugbar kode, hvis du skriver HTML4.01 - og så venter med XHTML, til nettet er klar til det  ;o)
Avatar billede trp79 Nybegynder
13. august 2005 - 07:09 #13
Nå, jeg må vist sætte mig noget mere ind i xhtml men det må blive når logikken bag brugergrænsefladen er færdigudviklet....

Tak for hjælpen til jer alle.

Vil de der mener de har fortjent lidt point ikke lige smide et svar, så skal jeg nok fordele dem lidt :)

God weekend, mvh
Torben
Avatar billede roenving Novice
13. august 2005 - 08:25 #14
Sålænge du medtager <?xml version="1.0" encoding="UTF-8"?> er det en umulig opgave at lave noget, som ligner ens i alle browsere ...
Avatar billede olebole Juniormester
13. august 2005 - 15:49 #15
- som roenving siger, er det ikke muligt at udvikle en brugergrænseflade, hvis ikke man bruger den rette syntaks  :)
Det, du prøver på at få til at virke, er først at lakkere båden - og på et senere tidspunkt at give den grundmaling og spartle. Det kan kun resultere i et dårligt resultat.

Hvis du vil have et brugbart resultat, fastlægger du først sproget og alle andre udenoms nødvendigheder ... derefter er du i stand til at lave en brugbar grænseflade.
Fortsætter du i det nuværende spor, kommer du med statsgaranti til at lave det meste om.

Skriver du den XML-prolog, som roenving viser, først i dokumentet, disabler du størstedelen af CSS i IE - hvorfor dine sider kommer til at se vidt forskellige ud i FF, Opera og IE.

Hvis du ikke vil lave det samme arbejde om flere gange, kunne det være, du skulle lytte til nogen, der har prøvet det mange gange  ;o)
Avatar billede trp79 Nybegynder
14. august 2005 - 00:18 #16
Ja, der skal i hvert fald læses og øves en del kan jeg se! Har læst dine to fremragende artikler olebole, så når jeg er færdig med forretningslogikken vil jeg først lave en yderst simpel brugergrænseflade, der kun lige vises de forms, og de udtræk, der er nødvendige, hvorefter jeg så må sætte mig noget mere ind i html og xhtml og i den forbindelse css.

Er i ikke venlige lige at smide et svar?
Avatar billede trp79 Nybegynder
18. august 2005 - 20:35 #17
Er i der endnu... ?
Avatar billede olebole Juniormester
18. august 2005 - 21:37 #18
ja, vi er skam - men det er vist mere, end man kan sige om Ekspertens mail-system. Det funker desværre kun pletvist  :o|

Jeg takker for rosen - og ja, webkodning er ikke helt så enkelt, som det var for få år siden ... der i 'webår' vel svarer til århundreder  :)

- og får jeg heller ikke den næste mail - og de andre også ser dette spm. og får lagt et svar - takker jeg for en sikkerheds skyld for points  ;D
Avatar billede trp79 Nybegynder
19. august 2005 - 15:42 #19
Da jeg flyver på ferie imorgen tidlig lukker jeg spørgsmålet nu - jeg håber det er i orden med jer andre. Hvis det ikke er, så må vi lige fikse det når jeg kommer hjem.
Nej desværre kører mailsystemet lidt op og ned :(

Tak for hjælpen til jer alle!
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 16:05 Samsung Galaxy vil ikke ud af "Sikker tilstand" Af ErikHg i Mobiltelefoner
08/0812:15 morf bilede Af knuldefar1942 i Fri debat
07/0822:13 Gemme største værdi Af Lemming@privat.dk i Excel
07/0821:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »