CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede naquer Nybegynder
08. januar 2012 - 16:55 Der er 13 kommentarer og
1 løsning

Positionering af CSS elementer

Hej

Jeg har et simpelt CSS spørgsmål, som jeg har bøvlet med noget tid efterhånden.
Hidtil har jeg primært arbejdet med tabeller for at positionere elementer.

Jeg skal bruge et setup som nedenstående:




            1
            2
3          4
            5
            6

Hvor hvert tal dækker over en DIV boks med en bredde på 150px og en højde på 20px.
Ovenstående ville være simpelt med tabeller, men jeg kan ikke umiddelbart lure hvordan det laves smartest i CSS:

Jeg har forsøgt mig med float:left og display:inline, men har ikke fundet nogen rigtig smart måde.

Kan i hjælpe?
Avatar billede olebole Juniormester
08. januar 2012 - 17:03 #1
<ole>

Én måde kunne være:


<style type="text/css">
#dv_3,
#dv_4 {
    float: left;
}
.clear {
    width: 0;
    height: 0;
    overflow: hidden;
    clear: both;
}
</style>

<div id="dv_1">1</div>
<div id="dv_2">2</div>
<div id="dv_3">3</div>
<div id="dv_4">4</div>
<div class="clear"></div>
<div id="dv_5">5</div>
<div id="dv_6">6</div>


/mvh
</bole>
Avatar billede olebole Juniormester
08. januar 2012 - 17:05 #2
- men personligt finder jeg denne måde langt at foretrække:


<style type="text/css">
#dv_3,
#dv_4 {
    display: inline-block;
}
</style>

<div id="dv_1">1</div>
<div id="dv_2">2</div>
<div id="dv_3">3</div>
<div id="dv_4">4</div>
<div id="dv_5">5</div>
<div id="dv_6">6</div>

Avatar billede olebole Juniormester
08. januar 2012 - 17:09 #3
Sorry ... du vil jo have dem som kolonner  =)


<style type="text/css">
div {
    width: 80px;
    text-align: right;
}
#dv_3,
#dv_4 {
    width: 40px;
    display: inline-block;
}
#dv_3 {
    text-align: left;
}
</style>

<div id="dv_1">1</div>
<div id="dv_2">2</div>
<div id="dv_3">3</div><div id="dv_4">4</div>
<div id="dv_5">5</div>
<div id="dv_6">6</div>

Avatar billede olebole Juniormester
08. januar 2012 - 17:11 #4
- men der er ikke nogen eviggyldig standardmetode, hvorpå man kan få DIV (eller andre) elementer til at opføre sig som tabelkolonner. Løsningen afhænger af, hvad det præcist skal bruges til - og hvordan omgivelserne er opbygget
Avatar billede naquer Nybegynder
08. januar 2012 - 17:23 #5
Mange tak for svarene Ole - kanon feedback! :)

Desværre ser det ud til at ovenstående CSS udelukkende ændrer ved tekstens placering. Lad mig prøve at illustrere det ønskede output:


                  ............
                  |....1.....|
                  ............
                  |....2....|
.............      ............
......3....|      |....4....|
                  ............
                  |.....5....|
                  ............
                  |....6....|

Altså skal der være seks seperate bokse, når jeg forsøger med dit eksempel er det udelukkende 1,2 osv der tykkes til den ønskede placering, men så snart jeg sætter baggrundsfarve på boksene, går disse helt ind til (1) - håber ovenstående giver mening :)
Avatar billede olebole Juniormester
08. januar 2012 - 18:01 #6
Det er der stadig et utal af forskellige løsninger på (jvnf. #4). Hvad der er den hensigtsmæssige løsning er umuligt at sige.

Udfra det, du skriver, kunne en tabel sagtens være det mest hensigtsmæssige at bruge. Det kunne også være en kombination af UL/LI og DIV elementer - eller det kunne være en kombination af DIV og andre elementer - alt sammen styret af CSS. Det afhænger af, hvad det præcist er, du skal bruge det til, og hvordan resten af din kode ser ud.

Du må linke til et HTML dokument og/eller et billede af det ønskede resultat og supplere med en uddybende forklaring  =)
Avatar billede naquer Nybegynder
08. januar 2012 - 20:41 #7
Mange tak for svarene. Jeg prøver mig frem med det du har foreslået - der skulle være lidt forskellige fremgangsmåder :)

Du smider bare et svar
Avatar billede NielsErikP Mester
08. januar 2012 - 23:55 #8
Hej...
Kan du evt. bruge dette..



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
       
<html>
<head>
    <title>6 Positionerede bokse </title>
   
<style type="text/css">
#container {
    width: 600px;   
    border: 2px solid red;
}
#div1, #div2, #div3, #div4, #div5, #div6 {
    width: 150px;
    height: 20px;
    margin: 10px auto;
}
#div3, #div4 {
    float:left;
    margin-left: 37px; // Husk ændr margin-left, hvis width ændres i "#container"..
}
#noclear {
    clear:both;
}
#div1 {
    background-color: red;
}
#div2 {
    background-color: green;
}
#div3 {
    background-color: yellow;
}
#div4 {
    background-color: orange;
}
#div5 {
    background-color: blue;
}
#div6 {
    background-color: brown;
}
</style>
</head>
<body>
    <div id="container">
        <div id="div1">Div 1</div> <br>
        <div id="div2">Div 2</div> <br>
        <div id="div3">Div 3</div>
        <div id="div4">Div 4</div> 
        <div id="noclear"></div> <br>
        <div id="div5">Div 5</div> <br>
        <div id="div6">Div 6</div> <br>
    </div>   
<body>
</html>

Avatar billede naquer Nybegynder
10. januar 2012 - 20:43 #9
Det ser også ud til at gøre det :)

Som Ole foreslår, ser det ud til at mit problem lettest løses ved at lave en tabel med CSS i.

I smider bare et svar
Avatar billede NielsErikP Mester
10. januar 2012 - 22:34 #10
Hej...
Svar... Godt du fik det løst :-)
Avatar billede lilleweb Nybegynder
12. januar 2012 - 10:43 #11
Hej
Her: http://www.lille-web.dk/css.html har jeg lavet en løsning som en liste

Hvis den skal virke i de gamle IE versioner kan du give punkt nr. 3 en class ....

.... giver det mening ?
Avatar billede olebole Juniormester
12. januar 2012 - 15:40 #12
@lilleweb: Ja, der som sagt mange forskellige løsninger. Om den ene eller den anden er bedst kommer an på, hvad løsningen skal bruges til - og en tabelløsning kan sagtens være at foretrække  =)

At tredie LI element skal have tildelt en klasse, er tilgengæld hinsides debat  *o)
Avatar billede lilleweb Nybegynder
12. januar 2012 - 16:40 #13
@olebole :-)
Avatar billede NielsErikP Mester
12. januar 2012 - 23:05 #14
Hej...
Tak for point :-)
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

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
Link fra form input Af jnrmgs i HTML 9 19/09/202319:10 23/09/202313:11
includere i HTML Af slein55 i HTML 3 15/09/202313:47 16/09/202309:40
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 14:24 Nulstilling af iPhone - tracking? Af Peter S i iOS, iPhone & iPad
I går 12:34 Book et mødelokale ved en invitation Af Hek i E-mail programmer
I går 10:26 Formel med tre kriterier Af Pletz123 i Excel
I går 10:13 Hvide streger langs kanter i tabel Af Stine i Word
23/0523:05 Kan ikke udvide C drevet. Af valby i Windows
White papers
Flere white papers »


Premium
Teaser billede
Efter kåring som Danmarks bedste Microsoft-partner for andet år i træk: "Der kom sindssygt mange reaktioner"
Læs mere »
AWS' omdømme får tæsk i årets Image-undersøgelse - og selskabet nægter at kommentere på hvorfor
Nye detaljer om EU-Parlamentets datalæk: Straffeattester og pas var blandt lækkede data
Datatyveriet mod Netcompany rammer selskabets omdømme: "Det kan være enormt svært at betale af"
Se alle »
Computerworld
Teaser billede
Så nemt er det at knække et kodeord på otte tegn
Læs mere »
Første resultater: Så meget bedre er de særlige ’Copilot+’ pc’er
Microsofts udfordrer Apples Macbook med en helt ny generation af Surface-enheder: Bliver 90 procent hurtigere
Test: Motorolas lækre nye toptelefon er skarpt prissat – men den gemmer på en gevaldig bommert
Se alle »
CIO
Teaser billede
De bedste i Danmark: Se vinderne af de 15 kategorier ved Microsoft Partner Awards
Læs mere »
Her er Danmarks bedste Microsoft-Partner: Fellowmind vinder for andet år i træk
I sidste øjeblik: Danmarkshistoriens største GDPR-retssag mod det offentlige udskydes på ubestemt tid
Sådan har Coop sagt farvel til mainframen - sparer et to-cifret millionbeløb årligt på licenser
Se alle »
Job & Karriere
Teaser billede
Her er Danmarks fem bedste CIO’er lige nu: Se de fem nominerede til prisen som Årets CIO 2024
Læs mere »
Medarbejderne fik udleveret badetøfler ved indflytningen: Kom med inden for i IBM Danmarks nye topmoderne hovedkontor
Får du den løn, du fortjener? Få overblikket over hvor meget dine kolleger tjener hver måned
Google fyrer hele sit Python-team
Se alle »
White paper
Teaser billede
Guide: Sådan udvikler du en moderne netværksstrategi
Læs mere »
Opdag fordelene ved cloud-baseret backup og recovery
MDR: Transparent sikkerhed og overvågning i realtid
Rapport kortlægger de 13 bedste muligheder for at sætte turbo på din cloud computing
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »