CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede Slettet bruger
22. november 2012 - 00:22 Der er 13 kommentarer og
1 løsning

div box HJÆLP

Hej eksperten :)

Jeg har leget lidt med at lave en boks i div's og css men det er ikke gået så godt.

Jeg har 9 billeder:
top_left, top_mid, top_right
mid_left, mid_mid, mid_right
bot_left, bot_mid, bot_right

det består af layoutet på min boks.


Nu vil jeg så høre om der var en af jer derude der lige ved hvordan man får sat det op så det bliver til en fin boks man kan smide indehold i :)

På fårhond tak :)
Avatar billede olebole Juniormester
22. november 2012 - 00:57 #1
<ole>

<div>
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
    <div>
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
    </div>
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
</div>

/mvh
</bole>
Avatar billede Slettet bruger
22. november 2012 - 01:00 #2
Hvor insætter man så data henne der skal være i boksen :)
Og virker denne metode i alle browsere :)
Avatar billede olebole Juniormester
22. november 2012 - 01:07 #3
Indsætter data? Prøv at forklare præcis, hvad du skal bruge  =)
Avatar billede Slettet bruger
22. november 2012 - 01:16 #4
skal bruge en boks til fx. en login boks på en hjemmeside og de billeder er layoutet på boksen grunden til at jeg har 9 billeder er fordi den skal være rezizeable :)
Avatar billede scootergrisen Nybegynder
22. november 2012 - 02:03 #5
Kig på CSS border-image så kan du gøre det med ét billede.
http://css-tricks.com/understanding-border-image/
Avatar billede olebole Juniormester
22. november 2012 - 04:53 #6
#5: Det er så den gamle diskusion igen: Hvis det er noget, der skal bruges til noget, er det nok meget godt at vælge noget, der virker  =)

@Koymi: Du kan prøve at kopiere denne kode over i et tomt dokument og kaste den i en browser. Den virker i alle aktuelle browsere og rimelig mange generationer tilbage:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dialog Test</title>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 12px "Segoe UI", Tahoma, sans-serif;
    background: #c0c0c0;
}
.dlg-box {
    position: relative;
    display: inline-block;
    width: 400px;
    padding: 58px 47px 42px 47px;
}
.dlg-box .top-left {
    position: absolute;
    left: 0;
    top: 0;
    right: 37px;
    height: 50px;
    z-index: -1;
    background: url(http://img822.imageshack.us/img822/7824/dlgtopleft.png) no-repeat;
}
.dlg-box .top-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 32px;
    width: 37px;
    z-index: -1;
    background: url(http://img835.imageshack.us/img835/4918/dlgtopright.png) no-repeat;
}
.dlg-box .bot-left {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 50px;
    width: 37px;
    z-index: -1;
    background: url(http://img255.imageshack.us/img255/9357/dlgbotleft.png) left bottom no-repeat;
}
.dlg-box .bot-right {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 37px;
    height: 32px;
    z-index: -1;
    background: url(http://img13.imageshack.us/img13/1861/dlgbotright.png) right top no-repeat;
}
.dlg-box .back-fill {
    position: absolute;
    left: 29px;
    top: 50px;
    right: 31px;
    bottom: 32px;
    z-index: -1;
    background: #fff;
}
.dlg-box .title {
    position: absolute;
    top: 24px;
    left: 40px;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
}
</style>
</head>
<body>

<div class="dlg-box">
    <div class="title">Log ind ... eller noget</div>
   
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque facilisis eros eu urna feugiat vestibulum. Donec orci tellus, cursus a scelerisque quis, suscipit eget nunc.
        Etiam bibendum purus non nisi sodales sit amet accumsan tortor varius. Pellentesque nec leo nisi. Proin auctor varius ligula, et porta leo suscipit a. Nunc eleifend, justo vitae
        volutpat scelerisque, dui arcu tempus leo, eu laoreet felis elit non arcu.</p>
       
    <p>Maecenas auctor aliquam elit quis blandit. Sed dictum pretium dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel est orci,
        non interdum lacus. Vivamus ac metus vitae nulla ullamcorper rhoncus eu sed mi.</p>
   
    <div class="top-left"></div>
    <div class="top-right"></div>
    <div class="bot-left"></div>
    <div class="bot-right"></div>
    <div class="back-fill"></div>
</div>

</body>
</html>
Avatar billede olebole Juniormester
22. november 2012 - 04:55 #7
- og med brugbare URL'er  *D

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dialog Test</title>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 12px "Segoe UI", Tahoma, sans-serif;
    background: #c0c0c0;
}
.dlg-box {
    position: relative;
    display: inline-block;
    width: 400px;
    padding: 58px 47px 42px 47px;
}
.dlg-box .top-left {
    position: absolute;
    left: 0;
    top: 0;
    right: 37px;
    height: 50px;
    z-index: -1;
    background: url(http://img822.imageshack.us/img822/7824/dlgtopleft.png) no-repeat;
}
.dlg-box .top-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 32px;
    width: 37px;
    z-index: -1;
    background: url(http://img835.imageshack.us/img835/4918/dlgtopright.png) no-repeat;
}
.dlg-box .bot-left {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 50px;
    width: 37px;
    z-index: -1;
    background: url(http://img255.imageshack.us/img255/9357/dlgbotleft.png) left bottom no-repeat;
}
.dlg-box .bot-right {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 37px;
    height: 32px;
    z-index: -1;
    background: url(http://img13.imageshack.us/img13/1861/dlgbotright.png) right top no-repeat;
}
.dlg-box .back-fill {
    position: absolute;
    left: 29px;
    top: 50px;
    right: 31px;
    bottom: 32px;
    z-index: -1;
    background: #fff;
}
.dlg-box .title {
    position: absolute;
    top: 24px;
    left: 40px;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
}
</style>
</head>
<body>

<div class="dlg-box">
    <div class="title">Log ind ... eller noget</div>
   
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque facilisis eros eu urna feugiat vestibulum. Donec orci tellus, cursus a scelerisque quis, suscipit eget nunc.
        Etiam bibendum purus non nisi sodales sit amet accumsan tortor varius. Pellentesque nec leo nisi. Proin auctor varius ligula, et porta leo suscipit a. Nunc eleifend, justo vitae
        volutpat scelerisque, dui arcu tempus leo, eu laoreet felis elit non arcu.</p>
       
    <p>Maecenas auctor aliquam elit quis blandit. Sed dictum pretium dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel est orci,
        non interdum lacus. Vivamus ac metus vitae nulla ullamcorper rhoncus eu sed mi.</p>
   
    <div class="top-left"></div>
    <div class="top-right"></div>
    <div class="bot-left"></div>
    <div class="bot-right"></div>
    <div class="back-fill"></div>
</div>

</body>
</html>
Avatar billede Slettet bruger
22. november 2012 - 11:44 #8
super smid nogen svar og så ser jeg lige på det når jeg kommer hjem.
Avatar billede olebole Juniormester
22. november 2012 - 14:18 #9
Prøv det først, så kan du altid uddele point, når/hvis evt. ændringer er i hus  *o)
Avatar billede Slettet bruger
22. november 2012 - 16:13 #10
Det virker ju glimrende men du har vel ikke et eksempel hvor der bliver brugt 9 billeder :) For nu har jeg ju lavet layoutet efter det :) fik af vide at det godt kunne lade sig gøre med kan ikke få det til at virke :)
Jeg indsætter lige min kode på det som ikke virker:)

KODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da-dk" lang="da-dk" >

<body>

<style>
.box_Container {
    border: 1px solid black;
    height: 200px;
    width: 200px;
}

.top_left {
    background-image: url('./box_top_left.png');
    height: 12px;
    width: 12px;
    float: left;
}

.top_mid {
    background-image: url('./box_top_mid.png');
    margin-left: 12px;
    margin-right: 12px;
    height: 12px;
}

.top_right {
    background-image: url('./box_top_right.png');
    height: 12px;
    width: 12px;
    float: right;
}

.mid_left {
    background-image: url('./box_mid_left.png');
    width: 12px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.mid_mid {
    background-image: url('./box_mid_mid.png');
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 12px;
    margin-right: 12px;
}

.mid_right {
    background-image: url('./box_mid_right.png');
    width: 12px;
    margin-top: 0px;
    margin-bottom:0px;
}

.bot_left {
    background-image: url('./box_bot_left.png');
    height: 12px;
    width: 12px;
    float: left;
}

.bot_mid {
    background-image: url('./box_bot_mid.png');
    height: 12px;
    margin-left: 12px;
    margin-right: 12px;
}

.bot_right {
    background-image: url('./box_bot_right.png');
    height: 12px;
    width: 12px;
    float: right;
}
</style>

<div class="box_Container">
    <div class="top">
        <div class="top_left"></div>
        <div class="top_right"></div>
        <div class="top_mid"></div>
       
    </div>
    <div class="mid">
        <div class="mid_left"></div>
        <div class="mid_mid">Her skal være text</div>
        <div class="mid_right"></div>
       
    </div>
    <div class="bot">
        <div class="bot_left"></div>
        <div class="bot_right"></div>   
        <div class="bot_mid"></div>
       
    </div>
</div>



</body>


Kan ikke få mid_left og mid_right til at vises, og så kan jeg heller ikke få kassen til at blive den størrelse jeg deffinerer.
Avatar billede olebole Juniormester
22. november 2012 - 16:18 #11
Hehe ... nej, jeg laver ikke en mere kluntet version, fordi du er for doven til at skære din designfil en anelse anderledes  =)
Avatar billede Slettet bruger
22. november 2012 - 16:26 #12
det er bare iorden :) det var også bare et spørgsmål men det kunne ju være at du kunne se hvad der var galt med min kode :)

Men tak for hjælpen smid et svar :)
Avatar billede olebole Juniormester
22. november 2012 - 16:47 #13
Selvtak, men jeg samler ikke point. Læg selv et svar og accepter det, så tråden lukkes  =)

Hele udgangspunktet i din løsning er uhensigtsmæssig. Dels er det næsten altid noget rod at float'e elementer. Derudover sætter du ikke størrelser på dine 'mid' elementer - hvorfor de ikke vises. Du kan heller ikke få indhold til at ligge fornuftigt i boksen, da du ikke flytter 'mid' elementerne ud af sidens naturlige flow.

Alt i alt er du helt på vildspor med den løsning  =)
Avatar billede Slettet bruger
22. november 2012 - 16:52 #14
ok mange tak bruger dit eksempel :)

Lukker og slukker :)
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 dag 15:09 Mobilrouter mangler forbindelse i Sverige Af perhol i Routere & Switches
I dag 10:53 WordMat Af jgormm i Word
I går 16:58 Netværk bliver ved med at "hoppe af" når jeg åbner for mange faner eller specifike spil Af Lars i LAN/WAN
I går 14:44 MS Outlook Af lbc i Office & Kontorpakker
19/0917:14 Udvid partition - Mulighed er nedtonet, ikke aktiv Af Uvanga i PC
White papers
Flere white papers »


Premium
Teaser billede
Professor Christian Damsgaard: Her er de tre vigtigste sikkerhedsmæssige udfordringer ved at lægge dine data i clouden
Læs mere »
Her er Danmarks kommende AI-lov: Se det fulde lov-udkast fra regeringen
Microsoft vil træne AI på dine LinkedIn-opslag og kommentarer: Sådan undgår du det
Henrik Bodskov om sin exit fra Aeven: “Da jeg kørte ind på parkeringspladsen, løb tårerne lidt ned ad kinden”
Se alle »
Computerworld
Teaser billede
I aften sker det: Din iPhone får en monumental opdatering
Læs mere »
Alt om Apples store opdatering til iPhone, Mac, Watch og iPad
Microsoft tvangsinstallerer app i din Office 365 i næste måned: Du kan ikke slippe
Apple opdager alvorlig sårbarhed i ældre iPhones og iPads
Se alle »
CIO
Teaser billede
Til kamp mod legacy og teknisk gæld: Uffe har skrottet 200 servere og 1.000 routere og switches på 140 lokationer
Læs mere »
Microsoft opsplitter Office og Teams: Sådan fungerer opdelingen
”Det fylder helt oppe på direktionsgangene:" Danske topkonsulenter løfter sløret for det allervigtigste it-tema lige nu
Overgangen til Windows 11 kan udløse store bøder, hvis du ikke passer på
Se alle »
Job & Karriere
Teaser billede
Tryg skiller sig af med 225 it-medarbejdere: Outsourcer stor del af sin it-drift til indere
Læs mere »
Her er fidusen: Sådan fastholder KMD og Twoday deres it-folk i lang tid
Henrik Bodskov fratræder som topchef for Aeven: Her er den nye topchef
Novo Nordisks CIO og digitale topchef, Anders Romare, forlader selskabet
Se alle »
White paper
Teaser billede
Tidsbegrænset kampagne: Overvejer du at udskifte eller tilføje printere i din forretning? Vi kan tilbyde én eller flere maskiner gratis
Læs mere »
Få automatisk styr på alle virksomhedens persondata
IT i front: Sådan bliver netværk en strategisk driver
Sådan samler du virtualisering og containerdrift i én løsning
Se alle »

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