Placer billede korrekt med CSS!!!

Har du kigget i guiden fra w3schools ?
http://www.w3schools.com/css/css_positioning.asp

Hej :)

Nej desværre - jeg har kigget tingene igennem det løser ikke mit problem :(

Du må nok ligge det online eller noget andet så vi har en reel mulighed for at se hvad der sker.
Det gode ved HTML/CSS mv er jo netop at vi kan se alt i kildekoden.

Hej igen, jeg kan desværre ikke vise jer min side, men har lavet denne test side i stedet: http://klasse.aabc.dk/ve-aspnet/akemver1/Website_test/default.htm

Denne side viser mit problem, med at når skærmopløsningen ændres, så ændres placeringen af billedet.

Der er to logoer, det øverste er relvative og det nedereste er absolute.


Håber i kan hjælpe!

Et relativt positioneret element placerer sig i forhold til sin oprindelige position og et absolut positioneret element placerer sig i forhold til det først parent-element med en position. I de to situationer du har sat op vil placeringen derfor sker ud fra øverste venstre hjørne i browseren.

Du fortæller ikke hvad de skal positioneres efter, altså hvad du forsøger at opnå - men det normale er at have en side centreret med en div med en bredde og margin: auto, sætter du så en position: relative på vil absolut positionerede elementer inden i den div placere sig efter div'ens position og ikke browserens.

Hvis du har en side, som ikke klæber sig specifikt til venstre side. Så er det en dårlig ide at benytter position:absolute, for du kan ikke vide, hvor på skærmen, eks. en align=center på andet indhold vil stå.
Derfor vil det være bedre at benytte position:relative, for det er en position der er relativ til, hvor i koden den er placeret.

Alternativt kan du opstille din side i et table, og benytte de forskellige muligheder for background-image, align, halign, valign, hspace og vspace.
På den måde kan du eks. centrere din table, men stadig styre din billeder præcist i forhold til denne.

Mit problem ligger i at jeg har en menu som er centreret på den menu bar vil jeg gerne sætte et billede som jeg har og skal dermed placere det.

Problemet er så, at når skærmstrørrelsen bliver mindre bliver der mindre plads fra kanten til menu baren (altså mindre luft i begge sider)

Men det billede jeg har placeret vil jo ikke ændre sin placering, så den kommer til at stå langt ude til højre når skærmstørrelsen ændrer sig.

uden reel kode er det svært at sige - men som udgangspunkt så sæt position: relative (eller absolute) på din menu og placer billedet absolut inden i den menu.

Det bliver noget rod at lave dynamisk størrelse på din side. Benyt meget hellere en fast bredde angivet i pixels. Og centrer den evt. med en simpel:
<CENTER>
<TABLE STYLE='width:800px;'>
  <TR>
  <TD STYLE='background-image: url(baggrund.jpg); background-repeat: no-repeat'>
    knapper
  </TD>
  </TR>
  <TR>
  <TD>
    indhold
  </TD>
  </TR>
</TABLE>
</CENTER>


eller hvis du vil have billedet stående på linie med din menu:
<CENTER>
<TABLE STYLE='width:800px;'>
  <TR>
  <TD>
    knap1
    <IMG SRC='billede.jpg' HSPACE='10px' ALIGN='middle'>
    knap2
  </TD>
  </TR>
  <TR>
  <TD>
    indhold
  </TD>
  </TR>
</TABLE>
</CENTER>

sidstnævnte svarer til en position:relative; left:0px; top:0px;
(eller sagt på en anden måde position:static;)

med tags som center, attributter som hspace og align samt design vha tables er vi vist tilbage i 90'erne - det er, med al respekt, ufattelig forældet kode du lige har disket op med.

Nu kender jeg jo ikke hans side, men hvis dette ville passe ind, så bliver det nok ikke meget mere simplificeret. Der er absolut ingen grund til at hive sig selv i håret, over position absolute, og forskellig rendering på forskellige klienter, hvis man meget enkelt kan undgå det! :-)

Den eneste af ovennævnte tags, jeg har noget at udsætte på det er Center, som w3c vist ikke anbefaler at bruge.
Men hvis alternativet er et længere java regnestykke, med risiko for browser specifik rendering, så er center tagget stadig den sikre løsning. (og simpleste)

der er absolut ingen der har talt om andet end html og css. jeg gætter i øvrigt på at du mener javascript og ikke java - uanset hvad så er ingen af disse nødvendige. Om center er "lovligt" eller ej afhænger af din doctype så det handler ikke om hvorvidt det anbefales at bruge eller ej - det handler om at vælge nogle standarder der ikke hører til i forrige århundrede.

koden kan skrives betydelig mere simplificeret som forklaret i 5# - helt uden brug af javascript, men altså ren CSS og HTML.