To billeder

Noget andet er også, hvordan jeg centrerer tekst?

Ok, jeg fandt følgende til #1, men hvordan centrerer jeg vertikalt?

<div style="text-align: center;"> div>

Umiddelbart er vertikal centrering lidt af et problem i css.
Men måske virker dette:

<div style="text-align: center;" valign="middle"><div>

Det er i hvert fald sådan, man gør i tabeller.

Hvordan får jeg så teksten rykket ned (y-akse).

<ole>

Det kommer anpå resten af din kode. Der findes ikke en generel metode til vertikal centrering i HTML. Det eneste element, der kan centrere sit indhold vertikalt er td-elementet

/mvh
</bole>

Jeg vil ikke centrere den vertikalt, bare rykke rundt på den.

Hvad betyder: "bare rykke rundt på den"? Uden at vide, hvad du præcist vil, er det mere end svært at hjælpe  =)

:)

E.g. 50 pixels fra toppen.

Iøvrigt, kan det potentielt give problemer? jeg tænker på forskellige skærmstørrelser og lign.

"E.g. 50 pixels fra toppen." ... Nej - jeg spurgte, hvad du _præcist_ skal lave.

Om det kan give problemer med skærmstørrelser, kommer jo helt anpå, hvad du vil lave - og det ved vi stadig ikke  =)

My bad :-)

Jeg har nogle links, som skal være centreret på x-aksen, men på y-aksen skal de ikke være centreret. De skal være under midten.

En anden ting, og lidt i samme boldgade, er ang. billedet (min oprindelige tråd). Grunden til at jeg vil placere den centreret fremfor at skulle angive koordinater er for at gardere siden.

Jeg forstår alle ordene, men ikke måden de er sammensat på  =)

Mit bedste bud udfra det opgivne, må være noget à la:

<div style="text-align:middle">
    <img src="test.jpg" style="vertical-align:lidt_under_midten">
</div>

- men jeg tvivler på, det virker efter hensigten  =)

Se følgende:

http://peecee.dk/?id=51644

Det beskriver mit spørgsmål.

Hvad med: style="position: relative; top: 50px"

Min CSS-kode indtil videre:

body {
    background-color: #FFFFFF;
    background-image: url("bg.bmp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
}



a {
    color: black;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    font-family: "Tahoma", sans-serif;
    text-decoration:none;
}

Jeg vil have et nyt billede ind, som skal have foelgende CSS:

body {
    background-color: #FFFFFF;
    background-image: url("bar.bmp");
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: center center;
}

Hvordan faar jeg det flettet ind?

Prøv:
----------------------------------
body {
    background-color: #FFFFFF;
    background-image: url("bg.bmp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
}

a {
    color: black;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    font-family: "Tahoma", sans-serif;
    text-decoration:none;
}

.otherbackground {
    position: relative;
    top: 50px;
    left: 50%;
    background-image: url("bar.bmp");
    width: 300px;
    height: 150px;
}

-------------------------------------

Og så skal du oprette et div-element, eks.:
<div id="otherbackground"></div>

Jeg har tilføjet

.otherbackground {
    position: relative;
    top: 50px;
    left: 50%;
    background-image: url("bar.bmp");
    width: 300px;
    height: 150px;
    background-repeat: no-repeat;
}

i style.css og <div id="otherbackground"></div> i index.html, men jeg kan ikke se det?

og du er sikker på, "bar.bmp" findes?

Ja

Prøv at give div'en noget indhold, dvs. skriv noget i den, og se hvor det står.

<div id="otherbackground">asd

asd
asd
asd
</div>

det står øverste, venstre hjørne

Prøv at rette:
.otherbackground {
    position: relative;
    top: 50px;
    left: 50%;
    background-image: url("bar.bmp");
    width: 300px;
    height: 150px;
    background-repeat: no-repeat;
}
Til:
.otherbackground {
    border: 1px solid #c0c0c0;
    position: relative;
    top: 50px;
    left: 50%;
    background-image: url("bar.bmp");
    width: 300px;
    height: 150px;
    background-repeat: no-repeat;
}

Det virker stadig ikke - er det en helt umulig opgave?

html {
    background-color: #FFFFFF;
    background-image: url("bg.bmp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
}



a {
    color: black;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    font-family: "Tahoma", sans-serif;
    text-decoration:none;
}

body {
    background-color: transparent;
    background-image: url("bar.bmp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center 50px;
}



... Sørg for at bar.bmp har den størrelse der er behov for ...

Hmm, burde nok have været:

html {
    background-color: #FFFFFF;
    background-image: url("bg.bmp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
}



a {
    color: black;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    font-family: "Tahoma", sans-serif;
    text-decoration:none;
}

body {
    background-color: transparent;
    background-image: url("bar.bmp");
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: center 50px;
}

mclemens>> Det virker!

Men

body {
    background-color: transparent;
    background-image: url("bar.bmp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;

faar den billedet bar.bmp til at vaere i toppen, og ikke midten, midten.
}

Forstod det som 50px fra toppen og skrev derfor
    background-position: center 50px;

... Den center center du skrev ovenover burde placere den i midten ?
    background-position: center center;

... Eller er det ikke midt,midt eller midt samt top 50px der ønskes ?

det er (midt, midt), men naar jeg skriver 50 px., aendrer den paa billedets hoejde og ikke placering. naar jeg skriver center center, bliver de placeret oeverst

"det er (midt, midt), men naar jeg skriver 50 px., aendrer den paa billedets hoejde og ikke placering."
background-position: center 50px; bør placere den 50px fra toppen, det ændrer normalt ikke på billedets størrelse ?

"naar jeg skriver center center, bliver de placeret oeverst"
Hvis du vil have bar'en under baggrunden kan du bytte rundt på baggrundsbillede defineringerne ?

... Hvis den skal forskydes 50px ned fra midten kan du lægge nogle transparent px
ind øverst oppe i din baggrund (der skal nok bruges png eller gif istedet for bmp så)
- Ellers kan du have et ekstra baggrunds med baggrunden ... eksempel:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
<style type="text/css">
html,body {margin:0;padding:0;height:100%;}
html {
    background-color: #FFFFFF;
    background-image: url("bg.bmp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
}



a {
    color: black;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    font-family: "Tahoma", sans-serif;
    text-decoration:none;
}

#bg2 {margin-top:0px;position:absolute;top:50%;width:100%;
    background-color: #FF0;height:150px;
    background-image: url("bar.bmp");
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: center center;
}


#main {position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="bg2"></div>
<div id="main">Hej</div>
</body>
</html>

Og så øge margin-top:0px; i #bg2 for at øge px afstand fra midten eller bruge negativ px antal for at hæve. Ligeledes kan du jo pille ved top hvis det er nødvendigt ...

Jeg havde også den css i mit dokument:
html,body {margin:0;padding:0;height:100%;}
... Den burde dog ikke give det store udslag.

E.g. hvis jeg skriver

html {
    background-color: #FFFFFF;
    background-image: url("bg.bmp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center 50px;
}

saa skal den ligge sig (midt, 50), men det er ligesom at billedet forsvinder efter de 50 px - den sluger billedet?

Saa hvis jeg skriver    background-position: center center; saa er det ligesom at skrive center top.

Haaber du forstaar mig.

"lægge nogle transparent px".. der faldt 25-øren :-)

læg alle et svar, så deler vi

:o)

Tak for point :o)