Notifikationer

Markér alle som læst Log ud

zarthax Nybegynder

19. september 2005 - 17:00 Der er 47 kommentarer og
2 løsninger

generel centrering af <div>´s ?

http://camedli.dk/test/
Jeg er kørt totalt fast... har mistet alle begreber om regler, etik og så videre, hcilket resulterer i dette skønne utoligt skæve design, (følg linket)....

Synes selv billedet er rimeligt, men det at få det til at fungere sammen... AAARGH!!

Er der en meget! venlig sjæl derude der kan rette op på dette eksempel for tid og evighed ??? skal helst kunne fungere i IE og mozilla som primær browsere....

Indholdet af de forskellige links, skal ligge "midt i billedet"....

Skulle vist have spurgt her fra startn af, for nu er jeg så forvirret at det halve kunne være nok :(

//zarthax//

Synes godt om

olebole Juniormester

19. september 2005 - 17:07 #1

<ole>

Din DTD disabler det vigtigste CSS i IE. Brug denne i stedet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

- så kan du centrere et div med:
<div width:200px;margin:0 auto">Centreret</div>

/mvh
</bole>

Synes godt om

zarthax Nybegynder

19. september 2005 - 17:13 #2

Hej Ole :)
Opdaterede med din kode, uden synlig resultat.

Jeg tror det er mig der er en klovn til at forklare mig, men det skal ike centreres, men allignes så det holder, og ser pænt ud i div. browser.

Jeg VED at jeg burde lave dette med <table>, men jeg synes ikke jeg kan finde en løsning der giver samme resultat :(

Kanon med det hurtige svar forresten ;)

//zarthax//

Synes godt om

ni Nybegynder

19. september 2005 - 17:14 #3

hvis du f.eks. har dreamweaver.. kunne du bruge en anden tilgang, nemlig og skaere billedet op i photoshop og samle det hele i tables med o border i dreamweaver, ligesom at samle et puslespil. saadan som jeg har gjort her: www.metanature.net

Synes godt om

udvikler Nybegynder

19. september 2005 - 17:17 #4

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

ved godt der står TEXT-align.... men det virker til tekst samt alt andet :)

Synes godt om

olebole Juniormester

19. september 2005 - 17:46 #5

-aco- >> Det virker kun i IE - og kun hvis du disabler brugen af CSS ... og kun p.gr.a. bugs i IE ;o)

zarthax >> Jeg forstår udmærket, hvad du vil - og det, jeg skrev, er måden, man normalt gør det på ... og måden W3C anbefaler/foreskriver :)

Synes godt om

olebole Juniormester

19. september 2005 - 17:49 #6

Dette er et lille eksempel på, hvad jeg mener - og det fungerer jo helt efter hensigten:

<!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>TITLE</title>
</head>
<body>

<div style="width:200px;border:1px solid red;margin:0 auto">
dit indhold her ...
</div>

</body>
</html>

- at lave ét stort billede er heller ikke en god idé, da det som oftest giver et aaaaalt for tungt resultat :)

Synes godt om

udvikler Nybegynder

19. september 2005 - 17:50 #7

Jamen, dit exempel virker heller ikke - den flytter bare teksten 200 px ind ?

Synes godt om

olebole Juniormester

19. september 2005 - 17:51 #8

Nej, det gør det ikke :)

Synes godt om

zarthax Nybegynder

19. september 2005 - 17:52 #9

Der er reelt kun slicing tilbage, hvis altså resultatet skal blive ordentligt...
Jeg har prøvet at indkapsle de forskellige >div> i en centreret <div>, men da de "gamle" div har en fast possition, er dette uden virkning..

Synes godt om

olebole Juniormester

19. september 2005 - 17:52 #10

Vrøvl ... hvorfor prøver du dog i det mindste ikke mit eksempel?

Synes godt om

udvikler Nybegynder

19. september 2005 - 17:58 #11

Jeg kan da se på din side zarthax at det virker nu ?
- fortjener olebole så ikk point ? :)

Synes godt om

olebole Juniormester

19. september 2005 - 18:02 #12

- og skal der bruges absolut-positionerede elementer, er dette heller ikke svært, når blot man positionerer det centrerede som relative:

<!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>TITLE</title>
</head>
<body>

<div style="position:relative;width:200px;height:400px;border:1px solid red;margin:0 auto">
<div style="position:absolute;width:20px;height:20px;left:30px;top:75px;background:red"> </div>
<div style="position:absolute;width:15px;height:160px;left:130px;top:35px;background:blue"> </div>
</div>

</body>
</html>

Der er utallige muligheder med CSS, når man kender teknologien godt :)

Synes godt om

heeris Nybegynder

19. september 2005 - 18:02 #13

hej er det sådan her du vil ha det?

http://www.hjsolutions.dk/dennis/test.html

Synes godt om

heeris Nybegynder

19. september 2005 - 18:04 #14

hov, undskyld jeg sådan kommer og blander mig, der var ingen liste da jeg gik ind for et øjeblik siden, jeres poster kom første frem nu :/

Synes godt om

zarthax Nybegynder

19. september 2005 - 18:29 #15

Det var da li´ godt pokkers.... her sidder jeg og slås i timer, og så kommer i med løsningen på et par minutter... :P

Løsningen ér at bruge relavive, istedet for absolute... poster den samlede kode her for eftertiden....:
(det er den kode som heeris har lavet...)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CV site for Dennis Pedersen</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="Author" content="Steen Hjelmstrand" />

<style type="text/css">

.menubox{
backfround-color: #cccccc;
width: 80px;
text-align: center;
font-family: 'arial';
font-size: 10px;
}

.linktxt{
display: block;
text-decoration: none;
color: black;
width: 100%;
}
.linktxt:hover{
width: 100%;
display: block;
color: blue;
}
#m_hom { position: relative; top: -180px; left: 0px;}
#m_cam { position: relative; top: -170px; left: 0px;}
#m_edi{ position: relative; top: -168px; left: 0px;}
#m_lig{ position: relative; top: -166px ; left:0px;}
#m_sho{ position: relative; top: -164px ; left:0px;}
#m_con{ position: relative; top: -162px ; left:0px;}

#m_fra{position: relative; top:-260px; left:90px; height: 200px; width:500px; border: 1px ridge black;}
</style>
</head>
<body bgcolor="#cccccc">

<table align="center" width="637">
<tr>
<td>
<div class="backing" align="center"><img src="master.jpg" border="0" width="637" height="242" alt=""></div>
<div class="menubox" id="m_hom"><a href="home.htm" target="viewer" class="linktxt">HOME</a></div>
<div class="menubox" id="m_cam"><a href="home.htm" target="viewer" class="linktxt">CAMERA</a></div>
<div class="menubox" id="m_edi"><a href="home.htm" target="viewer" class="linktxt">EDITING</a></div>

<div class="menubox" id="m_lig"><a href="home.htm" target="viewer" class="linktxt">LIGHTS</a></div>
<div class="menubox" id="m_sho"><a href="home.htm" target="viewer" class="linktxt">SHOWREEL</a></div>
<div class="menubox" id="m_con"><a href="home.htm" target="viewer" class="linktxt">CONTACT</a></div>
<div id="m_fra"></div>
</td>
</tr>
</table>
</body>
</html>

Som det ser ud nu, er ole først med løsningen, og heeris har lavet det rent fysisk...
Jeg foreslår en deling i point, men håber på lidt udspil :)

*fiser ind og lærer noget mere CSS mens jeg venter*

Tak :)

//zarthax//

Synes godt om

heeris Nybegynder

19. september 2005 - 18:33 #16

CSS er en dejlig ting :)

da jeg lavede denne løsning var der ingen poster her, men d må ha været en fejl, for de kom med de samme efter jeg postede min egen kommentar.

så jeg vil ikke komme her og stjæle point, men kan godt bruge dem, er du med på en deler ole?

Synes godt om

olebole Juniormester

19. september 2005 - 18:36 #17

*LooOooL* Jamen, det har da _intet_ med CSS at gøre ... det er bare tussegammelt HTML, der har været deprecated (forældet/uønsket) i 7-8 år :D

Synes godt om

olebole Juniormester

19. september 2005 - 18:38 #18

- skal det være en løsning, der bruger CSS til at centrere med, så er min løsning stadig den W3C anbefaler - og den eneste, der har noget at gøre med CSS :)

Synes godt om

heeris Nybegynder

19. september 2005 - 18:38 #19

har prøvet med andre metoder, men kunne kun centrere det på denne måde

Synes godt om

olebole Juniormester

19. september 2005 - 18:39 #20

Så laver du helt sikkert en eller flere fejl. Kan du heller ikke få eksemplet (19/09-2005 18:02:48) til at virke? Det er da ellers lige ud af landevejen :)

Synes godt om

zarthax Nybegynder

19. september 2005 - 18:45 #21

øh... nu forstår jeg så slet ikk mere :(
....hvordan skal det SÅ se ud ??

Synes godt om

heeris Nybegynder

19. september 2005 - 18:45 #22

han har sku ret, nu har jeg ikke prøvet det med billeder, men din metode virker her, må ha pastet det forkert.

*tager hatten af og giver ole en krammer*

Zar, du må jo se om du ka få det til at virke med det materiale du skal vise, for hvis man skal være lidt pernytten, så er oles version den mest "rigtige"

Synes godt om

Slettet bruger

19. september 2005 - 18:46 #23

<div style="margin: auto;">Foo</div> Vil _altid_ centrere din div horisontalt, hvis du vel at mærke bruger rigtig doctype og dtd-link.. Jeg kan slet ikke forstå hvad der volder jer problemer, zarthax og heeris. -!

Synes godt om

heeris Nybegynder

19. september 2005 - 18:47 #24

som sagt, så giver jeg ole ret

Synes godt om

olebole Juniormester

19. september 2005 - 18:51 #25

- rigtig nok, wicez ... men divet skal også lige have en bredde, da det jo er et block-element, som pr. definition fylder hele bredden og derfor ikke lader sig centrere ;o)

heeris >> Tak for krammeren ;D

Synes godt om

Slettet bruger

19. september 2005 - 18:57 #26

Jep, helt sikkert olebole.

heeris.. Jeg brugte et par minutter på siden til at læse alle indlæggende igennem, og havde derfor, uheldigvis, ikke fået din "omvendelse" med :o)

Synes godt om

heeris Nybegynder

19. september 2005 - 19:03 #27

//God karma smitter :)

sådan skal det se ud, så vidt jeg kan se ud fra oles metode:
http://www.hjsolutions.dk/dennis/test2.html

se lige på det ole inden wicez tager mit or for det :)

Synes godt om

olebole Juniormester

19. september 2005 - 19:40 #28

- straks voldsomt meget bedre! ;o)

Absolut ingen fejl, men man kunne jo også lægge et positioneret div som en slags container over i venstre side. Så kunne man 'plumpe' sine links derned, uden at behøve at positionere dem alle sammen. Det ville måske kunne give en anelse slankere kode :)

Jeg nævner det bare i håbet om at så lidt idéer og lidt aha-oplevelser, andre måske engang kan bruge til noget helt tredie - og for at vise, at der faktisk er et utal af forskellige løsnings muligheder med CSS ;o)

Synes godt om

heeris Nybegynder

19. september 2005 - 19:45 #29

tænk bare, så lærte man også noget idag :)

va så zar? ku det bruges?

Og så ta iøvrigt at stikke de point til ole, han had jo ret fra starten :)

Synes godt om

zarthax Nybegynder

19. september 2005 - 19:49 #30

OM det kunne bruges ??!!
Det kan i bande på :) sidder og knokler videre hele tiden, og vær sikker på der kommer flere spørgsmål såsom: "Hvordan viser jeg avi på en html side ?" og "Hvordan fjernes border på en <iframe>" for ikke at glemme "Hvordan "slukker" man for den hjælpekasse der kommer når musen holdes over et billede på siden" etc etc :)

Ole skal bare smide et svar :)
Alle tiders, det her er godt :) Godt svaret på DANSK :)
Kanon :)

Synes godt om

olebole Juniormester

19. september 2005 - 19:49 #31

Nej, zq ... jeg har jo bare siddet og kæftet op *LooL*

Jeg vil gerne have points, men jeg insisterer på at dele dem! ;o)

Synes godt om

heeris Nybegynder

19. september 2005 - 19:51 #32

*lol* :o)

ok så, vi deler :)

og husk zar, der findes ingen dumme spørgsmål ;)

Synes godt om

olebole Juniormester

19. september 2005 - 19:54 #33

At alt-teksten vises som et tooltip i IE er faktisk en browser-bug. Den skal forsyne andre klienter (f.eks. tekstlæsere, der bruges af svagtseende og blinde) med alternative informationer, samt vises, hvis billedet ikke selv kan vises.
Den attribut, der bør bruges til tooltips, er 'title':
<img src="min.gif" alt="noget tekst om billedet" title="">
- det skulle gerne overskrive alt-teksten med et tomt tooltip, der derfor ikke vises ... men alt-teksten får lov at leve, som den skal :)

Kanten om iframe'en klarer vi med:
<iframe ...... frameborder="0"></iframe>

Synes godt om

olebole Juniormester

19. september 2005 - 19:56 #34

heeris >> Jo, så sandelig eksisterer der dumme spørgsmål. Det er alle dem, der ikke bliver stillet ;D

- og du skal iøvrigt nok også lige lægge et svar :)

Synes godt om

heeris Nybegynder

19. september 2005 - 19:58 #35

eksperten poisi ;)

Nåå yes, et svar.

Synes godt om

zarthax Nybegynder

19. september 2005 - 19:58 #36

Det er ikk alt="bla bla bla"... det er den "kasse" der er i IE når du holder musen over et billede.. (der er en mappe osv og den kommer typisk i øverste venstre hjørne af skærmen. Er billedet for stort, kommer der efter noget tid en knap til at udvide billedet nederst til højre...)

*venter på svar 2 * :P

Synes godt om

olebole Juniormester

19. september 2005 - 19:59 #37

- og så går 'den gamle' i Rejseholds-koma en lille times tid .... schhhhhhh ... ;o)

Synes godt om

zarthax Nybegynder

19. september 2005 - 19:59 #38

hermed accepteret begge 2 :)
Jeg takker endnu engang :)

Synes godt om

olebole Juniormester

19. september 2005 - 20:00 #39

ahaaa .... jamen så får du lige den med på falderebet:
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="false">

- og tak for points :)

Synes godt om

heeris Nybegynder

19. september 2005 - 20:02 #40

måske andre spørgsmål skulle stilles i seperate strenge, så ange brugere nemmere kan finde dem :)

jeg må smutte, hunden skal luftes.

*sender god karma til hele banden, ka i mærke det?*

Synes godt om

zarthax Nybegynder

19. september 2005 - 20:05 #41

hehe :) Tak ole :)
Karma tildelt :) Håber i kan bruge det til noget :)
(Går mest efter det der skrives, ikke selve målingen...)

Ja, der skal laves flere strenge, for det er nogle seperate spørgsmål... besvares de her, (for mange af dem), findes de rette svar det forkerte sted, hvilket gør dem temmelig svære at finde :)

//Zarthax// <--- *Glad mand :)

Synes godt om

Slettet bruger

19. september 2005 - 20:09 #42

Synes godt om

olebole Juniormester

19. september 2005 - 20:11 #43

wicez >> Kavalleriet kommer altid til tiden (19/09-2005 19:54:24) ... nå, det var jo Rejseholdet, der skulle have min opmærksomhed ;D

Synes godt om

Slettet bruger

19. september 2005 - 20:20 #44

EEEEEEjjjj.. Det må i undskylde, Jeg prøvede på ingen måde at "hugge" point eller noget i den stil.. Ville bare være hjælpsommelig :o)

Synes godt om

olebole Juniormester

19. september 2005 - 21:21 #45

wicez >> det har jeg på intet tidspunkt forestillet mig - men jeg kender udmærket den små-paranoide fornemmelse. Jeg kommer ofte selv 'tumlende' ind i spørgsmål - og for den mistænksomme, kunne det da måske godt ligne et mønster. Tag det roligt ... det er i hvert fald ikke mig. Jeg kender dig jo ;o)

zarthax >> Jeg takker mange gange for den fine 'karma', men opfatter dig absolut ikke som et 'problembarn' - gåseøjne eller ej :)
Du kommer sikkert også fra det ocean af dårlige tutorials og fejlfyldte artikler, der oversvømmer nettet. Webkodning er i forvejen et fuldt fag - og det bliver da ikke en squid bedre af, det er så svært at finde troværdige/korrekte informationer ;o)

Til sidst er jeg helt enig i betragtningerne om sidespørgsmålene. På den anden side tror jeg, jeg i forvejen besvarer dem i gennemsnit en halv til én gang om ugen ... så de skulle være til at finde :)

Synes godt om

olebole Juniormester

19. september 2005 - 21:22 #46

... når E's søgemaskine engang bliver ført up to date - eller bare noget, der ligner ;o)

Synes godt om

Slettet bruger

19. september 2005 - 21:39 #47

Jeg er glad for at, om ikke andre så du, er klar over at jeg ikke er en "point-hapser" :o) Vil du forresten ikke være venlig at lægge et svar i min anden tråd? http://exp.dk/spm/648956

Synes godt om

olebole Juniormester

20. september 2005 - 00:56 #48

*LoL* - sjovt, du lige netop peger på det spm! :D
Det er jo netop et fint eksempel på, at jeg kommer tumlende ind og gentager, hvad en bruger tidligere har sagt ... blot på en lidt anden måde. Tak - men nej tak :)

Synes godt om

Slettet bruger

20. september 2005 - 19:26 #49

De personer, der ser negativt på den måde du, som du selv siger, "tumler ind" i spørgmål, er efter min mening utrolig snæversindede, da det, i hvert fald hos mig, ligger 100% fast, at du kun er ude på at hjælpe, og på ingen måde prøver at "nappe" point i allerede besvarede spørgsmål -!

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS