/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Hjælp til centrering af baggrund
Fra : Peter Benjamin Madse~


Dato : 01-12-07 17:16

Hej alle

For at tage det fra starten af, så er jeg en vaskeægte newbie til
det her hjemmesidebyggeri. Det er ikke ensbetydende med at jeg er
en tåbe til det, men det betyder at i gerne må have lidt
tålmodighed med mig og svare som i måske ville svare, for
eksempel, en idiot.

Nu til sagens kerne.
Jeg har et firma, som jeg er ved at bygge et site til. Her har
jeg ganske simpelt sat mig ned og lavet hele rammen og
overskriften i et .Jpeg dokument i Photoshop.
Tanken var, at lave et site med så lidt scrolling og så få klik
som muligt.

Jeg har for nemheds skyld loadet filen op i photobucket, så i kan
se den.
http://s225.photobucket.com/albums/dd75/Jotuntroll/?action=view&c
urrent=Textpage1test.jpg

Det jeg gerne vil have den her fil til, er at ligge som baggrund
på siden og skrive tekster ovenpå/indeni det frie felt.
Men ideen var samtidig, at det skal være centreret i browseren,
når kunden kigger på det, og jeg kan åbenbart ikke overtale min
dreamweaver til at lade den være i midten.

Alle gode forslag og eventuelle alternativer er meget velkomne.
Ved godt det blev lidt langt, men som sagt, jeg er nybegynder,
bær over med mig.

Vh Peter Benjamin Madsen



--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Jørgen Farum Jensen (01-12-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 01-12-07 18:01

Peter Benjamin Madsen skrev:

> Alle gode forslag og eventuelle alternativer er meget velkomne.
> Ved godt det blev lidt langt, men som sagt, jeg er nybegynder,
> bær over med mig.
>

Hele idégrundlaget til side, så løser du
dety konkrete problem på følgende måde:

Opret et div-element med en bredde og højde svarende
til pixelmålene på din grafik.

Læg grafikken ind som baggrund i denne div.

Og skriv din HTML-markører og din tekst
inde i div'en.

Her er css'en:

div#container {
width:760px;
height:580px;
margin:0 auto;
}

og HTML-koden kunne ikke være nemmere
<div id="container">
[ Siden tekst ]
</div>

Jeg er meget specifik omkring dette, for det
er den hurtigste måde at få dig til at indse
hvilken blindgyde det er du er ved at begive dig
ind i. Det er simpelthen "mørkets gerninger",
du vil lave

En webside er i modsætning til en trykside
et dynamisk objekt. Websidens synlige størrelse
beror på et mylder af faktorer, hvoraf du
kun har indflydelse på nogle ganske få.
At fastholde sit indhold i en statisk ramme
er at forkaste alle de muligheder, der er
i webdesign og i stedet låse sig fast til
begrænsningerne.

Nu kan jo ikke vide, hvad dit websted
kommer til at handle om, men generelt er
det vel sådan, at man laver et design (et
layout) der understøtter indholdet,
før man laver et design og tilpasser
sit indhold efter dette.

Det er i hvert fald min designfilosofi.

Det er /ord/ der sælger, hvad enten det
er varer eller ydelser, meninger, holdninger,
viden eller tro - ikke design (medmindre
man er grafiker eller billedkunstner og
vil sælge sit håndværk/sin kunst).






--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Sune Storgaard (01-12-2007)
Kommentar
Fra : Sune Storgaard


Dato : 01-12-07 18:23


"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> skrev i en meddelelse
news:47519341$0$2100$edfadb0f@dtext02.news.tele.dk...
<klip en fin smørre>

> Det er i hvert fald min designfilosofi.

Jeg er ikke uenig, jeg kan også godt selv være lidt special hvad angår
brugervenlighed, og principper..

Men er man villig til at sælge ud af dem, for at nå sit mål, så findes der
løsninger.

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Om dreamweaver kan arbejde videre på den ved jeg ikke, foretrækker notepad
til html (faktisk bruger jeg oftest crimson editor men det er mit lille
fetish)



Martin (02-12-2007)
Kommentar
Fra : Martin


Dato : 02-12-07 07:37

Sune Storgaard wrote:
> http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Det som jeg synes gør CSS underligt (jo jeg kan godt finde ud af det,
men der er bare nogle ting som ikke rigtig giver nogle mening imo)

Ovenstående link har jo den der "dead center" boks.
CSS til den er følgende (har fjernet det overflødige)

#content {
margin-left: -125px;
// Hvorfor -125px ?
position: absolute;
top: -35px;
// Hvorfor -35 ?
left: 50%;
}

Birger (02-12-2007)
Kommentar
Fra : Birger


Dato : 02-12-07 11:59

"Martin" <martin@aarhof.eu.invalid> skrev i en meddelelse
news:475252ad$0$90269$14726298@news.sunsite.dk...
> Sune Storgaard wrote:
>> http://www.wpdfd.com/editorial/thebox/deadcentre4.html
>
> Det som jeg synes gør CSS underligt (jo jeg kan godt finde ud af det, men
> der er bare nogle ting som ikke rigtig giver nogle mening imo)
>
> Ovenstående link har jo den der "dead center" boks.
> CSS til den er følgende (har fjernet det overflødige)
>
> #content {
> margin-left: -125px;
> // Hvorfor -125px ?
> position: absolute;
> top: -35px;
> // Hvorfor -35 ?
> left: 50%;
> }

Det er ikke så underligt - og svarene står på siden.
left: 50% placerer boxen midt på den vandrette streg.
Boxen ender med at være 250px bred. Den placeres på midten, og skal derfor
have en margin (afstand til det udenom) på det halve, men den afstand går
den forkerte vej: (teksten eller kanten af boxen) skal flytte til venstre,
ikke til højre. Derfor -125px;!
Tilsvarende med højden.

Du skriver du har fjernet det overflødige fra CSS - men du har fjernet noget
meget væsentligt.
Nemlig at den absolut positionerede #content, er placeret inde i en anden
absolut positioneret #horizon.
Uden den går det slet ikke.
Desuden har du fjernet width og height fra #content - det er dem der er
grundlag for de negative margener.

Birger



Jørgen Farum Jensen (02-12-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 02-12-07 12:18

Martin skrev:

> Ovenstående link har jo den der "dead center" boks.
> CSS til den er følgende (har fjernet det overflødige)
>
> #content {
> margin-left: -125px;
> // Hvorfor -125px ?
> position: absolute;
> top: -35px;
> // Hvorfor -35 ?
> left: 50%;
> }

Det "overflødige" er jo netop det der
forklarer det du citerer. Når du positionerer
venstre kant af en med en bredde på 250 pixel
left:50% står den jo netop ikke på
midten. Det er venstre kant, der er centreret.
Derfor skal venstre kant rykkes til venstre
med ½ bredde. Og det gør man altså med en negativ
margin.

Men når man har et elements bredde er
vandret centrering jo ganske lige til:
sæt margin-right og margin-left til auto,
så bliver elementet midtstillet i det vandrette.

Lodret centrering kan lade sig gøre på
samme måde, men det er ikke særlig smart.
Lodret centrering forudsætter en fikseret
mængde indhold ved en eller anden given
størrelse af brugerens browservindue. Hvad
er den? Og hvilken skrift og skriftstørrelse
er den lige din bruger har?

Dit link henviser til en smuk demo af de
ovennævnte principper - men hvad kan den
bruges til?

Jeg henviser til min egen artikel om emnet:
http://webdesign101.dk/csslayout/autocentrering.php


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Peter Benjamin Madse~ (02-12-2007)
Kommentar
Fra : Peter Benjamin Madse~


Dato : 02-12-07 20:16

Wow, det gik stærkt ligepludselig.

Jeg har dog imellemtiden bygget sitet op så det bare er
venstreorienteret i browseren.
Men når det er loadet op, så linker jeg det herinde. Folks
meninger er ret gode og jeg vil meget gerne lytte og lære :)


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Peter Benjamin Madse~ (02-12-2007)
Kommentar
Fra : Peter Benjamin Madse~


Dato : 02-12-07 22:17

Som lovet, så er her et link til Hjemmesiden.

Det er beregnet til live-rollespillere og er egentlig bare en
form for galleri, med mulighed for handel.

Forslag, kritik og hjælp er meget velkommen. Det er mit første
rigtige arbejde med hjemmesider og jeg vil som sagt meget gerne
lære :)

Vh Peter

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Leonard (02-12-2007)
Kommentar
Fra : Leonard


Dato : 02-12-07 22:21

On 02 Dec 2007 21:16:37 GMT, Peter Benjamin Madsen wrote:

> Som lovet, så er her et link til Hjemmesiden.

Hvor?

--
Leonard
Mine biler: http://vw.leonard.dk/

Peter Benjamin Madse~ (03-12-2007)
Kommentar
Fra : Peter Benjamin Madse~


Dato : 03-12-07 21:10

Woaaw. Det er hvad der sker når man er alt for træt og forsøger
at tænke samtidig.
www.darkwerks.eu
Så skulle den være der :)

vh
Peter
>
> > Som lovet, så er her et link til Hjemmesiden.
>
> Hvor?
>
> --
> Leonard
> Mine biler: http://vw.leonard.dk/


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Kerim Ellentoft (03-12-2007)
Kommentar
Fra : Kerim Ellentoft


Dato : 03-12-07 21:58

Peter Benjamin Madsen <peter@anime.dk> skrev :

>Woaaw. Det er hvad der sker når man er alt for træt og forsøger
>at tænke samtidig.

Det skulle da kunne klares ved at smide hele indholdet i en <div>
og så i css:

div {width: 760px; height: 580px; margin: 0 auto}

PS. Husk også at angive baggrund til hvid på body, ikke alle har
hvid som default baggrundsfarve i deres opsætning.
--
Kerim
Når der svares på et indlæg, svar venligst under det citerede
og skær venligst det væk, du ikke svarer på.

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste