Søg
Avatar billede dennism Nybegynder
03. marts 2009 - 15:30 Der er 8 kommentarer og
1 løsning

Relativ positionering

Jeg har dette lille kode eksempel med relativ positionering:

<div style="margin:0px auto;width:500px;height:500px;background-color:#e0e0e0;">
    <div style="position:relative;left:-100px;background-color:#efefef;width:100px;height:100px;">Test 1</div>
    <div style="background-color:#000000;color:#ffffff;width:100px;height:100px;">Test 2</div>
</div>

En HTML-fil med koden kan ses her:
http://dennismadsen.com/uploads/relative.html

Som I kan se, så vil jeg gerne have at "test 1" står til venstre for containeren. Problemer er, at jeg gerne vil have den sorte boks (test 2) hopper op i toppen af containeren - det ser som om at boksen med "test 1" stadig "fylder" i containeren.

Håber nogen kan hjælpe mig.
Avatar billede trissebasse Nybegynder
03. marts 2009 - 21:14 #1
hej.

margin-top {-100px;}
Avatar billede dennism Nybegynder
03. marts 2009 - 21:14 #2
Ingen der kan hjælpe med dette?
Avatar billede trissebasse Nybegynder
03. marts 2009 - 21:15 #3
hov!!!!

Det hedder:    margin-top:-100px;
Avatar billede dennism Nybegynder
03. marts 2009 - 21:16 #4
Det er en meget statisk løsning - jeg vil gerne have en dynamisk løsning, hvor jeg ikke skal tage højde for alle de underliggende elementer - som i så fald skal have en martin-top.
Avatar billede trissebasse Nybegynder
03. marts 2009 - 21:17 #5
Ikke hvis du wrapper og derefter floater dine elementer
Avatar billede zips Juniormester
03. marts 2009 - 21:38 #6
Måske dette kan bruges.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">
#main {margin:0px auto;width:500px;height:500px;background-color:#e0e0e0;}
#test1 {position:relative;margin-left:-100px;background-color:#efefef;width:100px;height:100px;float:left;}
#test2 {background-color:#000000;color:#ffffff;width:100px;height:100px;}
</style>
</head>
<body>
<div id="main">
<div id="test1">Test 1</div>
<div id="test2">Test 2</div>
</div>

</body>
</html>
Avatar billede mclemens Nybegynder
03. marts 2009 - 21:52 #7
Et element der kun er placeret via. relative reserverer pladsen alternativt til floating kan være at benytte absolute placering som her:

<div style="margin:0px auto;width:500px;height:500px;background-color:#e0e0e0;">

    <div style="background-color:#000000;color:#ffffff;width:100px;height:100px;        position:relative;">

    <div style="    color:#000;      position:absolute;          left:-100px;background-color:#efefef;width:100px;height:100px;">Test

1</div>Test 2</div>
</div>

eller:

<div style="margin:0px auto;width:500px;height:500px;background-color:#e0e0e0;        position:relative;">
    <div style="          position:absolute;left:-100px;background-color:#efefef;width:100px;height:100px;">Test 1</div>
    <div style="background-color:#000000;color:#ffffff;width:100px;height:100px;">Test 2</div>
</div>
Avatar billede dennism Nybegynder
04. marts 2009 - 09:41 #8
mclemens >>

Tak for din kommentar. Dit første bud fungerer rigtig godt :)
Vil du smide et svar?
Avatar billede mclemens Nybegynder
04. marts 2009 - 09:57 #9
Velbekom, og tak for point :o)
Avatar billede 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.

Loading billede Opret Preview
Kategori
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 17:38 Video ikoner Af Malm i Windows
I går 17:27 Video ikoner Af logbuilders i Windows
16/0110:29 Negativ billeder på samsung Af ALICE i Småopgaver
15/0115:45 HJÆLP - Lopslag, Indeks? Hvad gør jeg! Af Eva i Excel
14/0119:38 Webmail yousee Af nu_igen i E-mail programmer
White papers
Flere white papers »