Placere indhold inde i en kasse

Jeg vil forresten mægtig gerne undgå tabeller.
Men det MÅ da være muligt at placere tingene indenfor et bestemt område uden tabeller...

Istedet for at lægge billede i din HTML via et img tag, så sæt det som baggrundsbillede i din ramme. Så behøver du heller ikke at bruge z-index :)

#ramme {
    margin: 0 auto; /* lidt nemmere at centrere sådan her */
    /*vertical-align: center;*/ /* Gætter på du ville centrere det hele vertikalt, men det kan du ikke sådan.  Prøv at kigge på http://zyph.dk/eksempler/center/ */
    /*horizontal-align: 10px;*/ /* den findes ikke? Hvad ville bruge den til? :) */
    width: 750px;
    height 550px;
    background-image: url('billeder/ramme.gif');
    background-repeat: no-repeat;
}

Horizontal-align var et forsøg på at få billedet lidt ned, men det virkede ikke... Prøver mig lidt frem lige nu, ved ikke om du fornemmer det?  ;o)

vertical-align virkede ellers fint...? Jeg skal bruge login for at komme ind på zyph-siden, så det link blev jeg ikke klogere af?

Ellers har jeg ændret koden i css som du har skrevet den, og har så fjernet
<img src="billeder/ramme.gif" alt="Ramme">
fra html'en. Men nu er rammen væk?

Skal jeg ændre andet i html'en? (Ja, jeg ved det godt, bær over med mig...)

Nå, nu har jeg sat rammen ind som baggrund, med følgende kode i css:

body {
    background: #DEE1E9;
    background-image: url("billeder/ramme.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 10%;
}

Så mangler jeg bare at placere indholdet inde i den kasse...

Jeg troede at det var smart at lave kassen som div-tag, så jeg kunne placere andre ting inde i det tag. Men hvis kassen er baggrundsbillede, hvordan placerer jeg så ting indeni? Uden at det rykker sig udenfor kanterne pga folks skærmopløsning?

Du kunne ikke komme med et link? Ellers er det lidt svært, at vide hvad du vil :] Så kan jeg hjælpe dig lidt bedre.

zyph/eksempler er oppe igen, det var min fejl :)

Et link? Går ud fra at du mener til noget der ligner? Har ikke rigtig set noget... Jeg har et oplæg (jpg), så du kan se hvad jeg håber på at ende med...?
Og mit forsøg indtil nu ligger på http://www.wibergweb.dk/test/index.html. Jeg prøver at få teksten og brikken ind i kassen...

Ah! Fint eksempel du har lavet... Leger lige lidt...

Hvad gør pre-tagget?
Det må næsten lave den lysegrå, stiplede kasse, indholdet står i?

Hvorfor har de to kasser samme størrelse (blå og grøn)?

Du kan se oplægget her: http://www.wibergweb.dk/test/oplaeg.html. Det er hvad jeg håber på at ende med...
(Ignorer lige den hvide kant rundt om billedet...)

Hvorfor skal jeg sætte margin-top og -left til halvdelen af elementets størrelse?

Ok, har luret at pre ikke laver den lysegrå kasse.

Men ellers er jeg da jævnt forvirret...! Det så så fint ud da jeg kiggede på din side, men det med at placere den blå kasse fornuftigt inde i den grønne, der står jeg af... Tror bare at jeg venter til du siger noget klogt igen!!  ;o)

Pre tagget er bare en markør, der viser teksten der står i som det står. At den er lysegrå og stiplet er bare den style jeg har givet den via CSS. Nu glemmer vi lige alt det vertical-align indtil videre, og fixer det andet ;)

Jeg kan se, at dit ramme.gif bare er en ramme. Der er ingen grund til at bruge et billede på den. Det kan sagtens laves via css.

<div id="mainRamme">
  <p>Dette står inden i rammen.</p>
</div>

og i din CSS:

#mainRamme {
  margin: 0 auto;
  width: 750px;
  height 550px;
  border: 3px solid #75809c;
}

www.zyph.dk/eksempler/wiberg

Spørg endelig løs til koden!

Kewl! Jeg tror at jeg er med...!

Din kode giver i hvert fald mening, og det virker stadig når jeg "leger videre på logik", så det tyder på at jeg rent faktisk forstår det jeg tror jeg forstår...  ;o)

Den store prøve bliver så om jeg kan få placeret indholdet korrekt inde i rammen.

Hvorfor kan jeg forresten ikke skrive æ, ø og å i den almindelige tekst mellem div-tags? Det bliver til kasser og spørgsmålstegn...

Sæt <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> ind i head istedet for <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> som du vist bruger nu.

Jamen det er jo smukt!!
Du VED ting...  ;o)

Det ser ud til at det kører for mig nu! Et sidste spørgsmål (så kan du jo svare på det med et svar i stedet for kommentar, så du kan få dine meget velfortjente point):
Det er lykkedes mig at få det hele til at stå pænt! (I hvert fald pænt nok til lege-fasen...)
Men når jeg så putter tekst ind, rykker designet sig. Jeg kan godt få teksten til at være der, men den må tilsyneladende ikke fylde hele feltet ud...

Prøv at se eksemplet på http://www.wibergweb.dk/test/index.html. Hvis jeg rykker menuteksten bare to px op, ryger hele designet pænt på plads. Men jeg må da kunne stille det hvor det står nu? Det er jo inden for menukassen...?


Du får lige hele skriveriet, i håb om at det hjælper lidt...



CSS:

body {
     
    background: #DEE1E9;

}


#mainRamme {
  margin: 0 auto;
  width: 750px;
  height 550px;
  border: 2px solid #75809c;
}


#menu {
  background-image: url('billeder/menu.gif');
  background-repeat: no-repeat;
  width: 373px;
  height: 141px;
  float: left;
}


#logokasse {
  background-image: url('billeder/logokasse.gif');
  background-repeat: no-repeat;
  width: 375px;
  height: 141px;
  float: left;
}


#indhold1 {
  background-image: url('billeder/indhold1.gif');
  background-repeat: no-repeat;
  width: 374px;
  height: 260px;
  float: left; 
}


#indhold2 {
  background-image: url('billeder/indhold2.gif');
  background-repeat: no-repeat;
  width: 375px;
  height: 260px;
  float: left; 
}


#indhold3 {
  background-image: url('billeder/indhold3.gif');
  background-repeat: no-repeat;
  width: 374px;
  height: 149px;
  float: left; 
}


#indhold4 {
  background-image: url('billeder/indhold4.gif');
  background-repeat: no-repeat;
  width: 375px;
  height: 149px;
  float: left; 
}


h1 {
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
  padding: 31px 0px 0px 4px;
}




HTML:


<div id="mainRamme">
  <div id="menu">
    <h1>
      <table>
          <tr>
            <td width="78%">    - For portaler, aviser o.l.<br>
            - For webbureauer<br>
            - For øvrige firmaer<br><br>

            - Bagom Wiberg Web<br>
            - Erfaring<br>
            - Kontakt</td>
          <td width="22%">
            - Nyheder<br>
            - FAQ<br><br><br><br><br><br>
          </td>
        </tr>
      </table>
   
    </h1></div>
  <div id="logokasse"></div>
  <div id="indhold1"></div>
  <div id="indhold2"></div>
  <div id="indhold3"></div>
  <div id="indhold4"></div>
</div>

Hov, tillægsspørgsmål?

Hvad bruger du <meta name="robots" content="all" /> til?

Du har lagt en P rundt om din mainRamme? Og en h1 rundt om din table i under menu?

Angående <meta name="robots"..> se http://www.html.dk/artikler/00007/

Du kan også lige så godt begynde at vænne dig til at skrive <br/> istedet for <br>, da <br/> bliver en del af XHTML 2.0 standarden.

Jeg har lige sat din kode lidt i orden, samt smidt et par kommentarer i CSS filen. Eksemplet er stadig på www.zyph.dk/eksempler/wiberg

Husk, at hver gang du vil skrive noget tekst, så skal der en markør til for at fortælle at det er tekst! p = afsnit (paragraph) og hX er til overskrifter.

Jeg har flyttet p på plads i de forskellige bokse nederst i stylesheetet. Jeg skriver det bare som en kommentar, da der sikkert kommer lidt mere ;-)

Ups, P er ikke med vilje... H1 har jeg siden rykket ind i tabellen, det er til skrifttype og størrelse.

Hvis jeg kopierer al din HTML, får jeg en anden skrifttype og -størrelse end du gør på din side. Men jeg kan ikke se at du angiver skrift nogen steder?
Samtidig står din tekst lige så fint i indholdsfelterne, mens min rykker op i de små kasser lige over. Huhh...?

Hvordan hitter jeg din css-fil med kommentarer?

Du tager alt koden herinde fra og erstatter dit eget stylesheet med den.

http://zyph.dk/eksempler/wiberg/style.css

Undskyld min stilhed, jeg har ligget syg.

Nu ville jeg så i gang igen, men det driller... Når jeg ændrer på skriftstørrelse, ryger siden fuldstændigt fra hinanden, ligesom det sidste du så.
Tidsmæssigt er jeg ved at være lidt for presset til selv at lave siden, som jeg ellers havde tænkt mig. Så jeg må lege igen på næste projekt.

Jeg har brug for at få siden op at køre relativt hurtigt, er det noget du kan hjælpe mig med?
Du har set forsiden. Undersiderne skal være magen til, men hvor de fire indholdsfelter er slået sammen til ét. Her skal der så komme scroll-bar hvis mit indhold er for langt. Det er vigtigt at siden virker (i hvert fald ser fornuftig ud) i de fleste browsere (ikke alle).

Jeg burde vel rykke det som separat spørgsmål til "Opgaver", men jeg spørger lige dig først...
Har du tid og lyst? Pris?


:o)    Rie

Det er bare i orden. Er glad for du ikke er helt død ;o) Kan du give mig et link dertil hvor du er kommet?

Kan nok godt hjælpe dig til en færdig løsning, men vil gerne lige se dit link først. Hvor langt henne ligger tidsfristen?

Oskar

Er ikke død, har bare lidt lungebetændelse... (Så er det nu du skal have mægtig ondt af mig...)
;o)

Jeg er ikke kommet videre siden det du sendte mig, jeg er først ved puteren igen i dag.
Jeg prøvede at lave en <h1>, <h2> osv for at styre skrifttyper, men så går det helt galt... Baggrundsbillederne rykker rundt når jeg ændrer i menuen, og de andre felter mister deres indrykning.

Jeg lavede:
/*Overskrift i indholdskasser*/
h1 {
    font-family: arial, verdana, sans-serif;
    font-size: 110%;
    color: #4D597C;
}
/*Indhold i indholdskasser*/
h2 {
    font-family: arial, verdana, sans-serif;
    font-size:100%;
    color: #7088A4;
}
/*Tekst i menuen*/
h3 {
    font-family: arial, verdana, sans-serif;
    font-size:95%;
    color: #4D597C;
}

Størrelserne skal tilpasses, det var bare en del af min leg. Men farverne er da som de skal være... Du kan se skriftstørrelserne på den gif du fik.

Jeg har ikke nogen specifik tidsfrist, vil bare gerne have det færdigt hurtigst muligt... Kan du nå det til i går?

Hehe, jeg har skam utroligt ondt af dig ;o) Hvis du kigger nederst i din CSS, så vil du se at jeg kun har fixet margin ordentligt ved p elementet. Hvis du så forestiller dig at have 2 p elementer i samme boks går det logisk nok klart, da den IKKE skal have samme margin som det foregående p element. Det bliver lidt forvirrende.

Det optimale ville være, at give de 4 bokse en masse padding, men det kan jeg desværre ikke lige finde ud af, sorry :/

Tak for medlidenheden! Har det allerede meget bedre når nu du har ondt af mig...  :o)

Er du frisk på opgaven? Og hvad vil det i så fald koste mig?

Jeg lukker lige tråden...  ;o)