CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

marzman Nybegynder

03. august 2006 - 21:07 Der er 11 kommentarer og
1 løsning

div/css corner float

Hejsa...

Jeg sidder med et lille css projekt...

jeg har 3 billede filer:
Corner_left.jpg
Corner_right.jpg
top_bg.jpg

Jeg forsøger at få de to hjørner til at float hver sin vej i et banner...

koden vil derfor se således ud...:

<div style="width: 100%; height: 95px; background: url('top_bg.jpg') repeat-x; margin-bottom: 10px;">
<div style="height: 95px; width: 17px; float: left; background: url('corner_left.jpg') no-repeat;"></div>

<div style="position: relative; height: 95px; width: 17px; top: -99px; float: right; background: url('corner_right.jpg') no-repeat;"></div>

</div>

Problemet er bare at det højre hjørne ikke vil floate til højre det rigtige sted... den hopper nemlig en linje ned...

Hvordan kan jeg få det til at virke, fordi koden skulle efter min over bevisning...?

Hilsen Kenneth

Synes godt om

knudgert Nybegynder

03. august 2006 - 21:18 #1

Prøv at lade div'en med float: right stå før koden med float: left.

Synes godt om

mclemens Nybegynder

03. august 2006 - 21:26 #2

Hvad med:

<div style="width: 100%; height: 95px; background: url('top_bg.jpg') repeat-x; margin-bottom: 10px;position:relative;">

<div style="height: 95px; width: 17px; background: url('corner_left.jpg') no-repeat;"></div>

<div style="position: absolute; height: 95px; width: 17px; right:0px; background: url('corner_right.jpg')

no-repeat;"></div>

</div>

Synes godt om

mclemens Nybegynder

03. august 2006 - 21:28 #3

position:relative; samtidig med
float: ...; er vel ikke helt logisk?

så:

<div style="width: 100%; height: 95px; background: url('top_bg.jpg') repeat-x;

margin-bottom: 10px;">
<div style="height: 95px; width: 17px; float: left; background:

url('corner_left.jpg') no-repeat;"></div>

<div style=" height: 95px; width: 17px; float: right; background:

url('corner_right.jpg') no-repeat;"></div>

</div>

Synes godt om

mclemens Nybegynder

03. august 2006 - 21:29 #4

(position:relative; og top definering fjernet)
... enten den eller absolute placering...

Synes godt om

marzman Nybegynder

03. august 2006 - 21:46 #5

hvad hvis jeg vil sætte et billede ind på den bg-top altså oven på... ?

Synes godt om

mclemens Nybegynder

03. august 2006 - 21:58 #6

Altså ovenover billedet?

- så kaster du en position:relative; på
<div style="width: 100%; height: 95px; background: url('top_bg.jpg') repeat-x; margin-bottom: 10px;">

og indsætter det element du har i div'en og placerer så elementet med absolute, top, right , bottom, left afhængig af behovet ... regner med at jeg forstod det du tænkte på...

Synes godt om

marzman Nybegynder

03. august 2006 - 22:02 #7

altså hvis du har det 2 hjørner vil jeg gerne have et logo ved siden af corner_left...

hvordan gør jeg det så den er oven på top_bg.jpg ?

Synes godt om

mclemens Nybegynder

03. august 2006 - 22:07 #8

Jeg er ikke sikker på hvad du mener men det jeg skrev før er den ene mulighed, den næste er at lægge flere elementer in i div'en og floate dem også ... her er lige den med absolute...

<div style="width: 100%; height: 95px; background: url('top_bg.jpg')

repeat-x;margin-bottom: 10px;position:relative;">

<div style="height: 95px; width: 17px; float: left; background:

url('corner_left.jpg') no-repeat;"></div>

<div style=" height: 95px; width: 17px; float: right; background:

url('corner_right.jpg') no-repeat;"></div>

<img src="billede.jpg" style="position:absolute;right:-100px;">

</div>

Synes godt om

mclemens Nybegynder

03. august 2006 - 22:09 #9

- ellers så kast et link til en illustration hvor du har placeret dem i et maleprogram - eller placeret figurer på størrelse med dem ... position:absolute; i kombination med placering left / right / top / bottom samt floats er måder du kan placere det på... skal elementet placeres uden til hoved div'en skal du bruge absolute...

Synes godt om

marzman Nybegynder

03. august 2006 - 22:12 #10

cool nu virker det... det er fordi at billedet skal være efter du 2 floats... det havde jeg ikke lige tænkt på...

tak for hjælpen mclemens... og tak til jer andre som skrev her...

Synes godt om

mclemens Nybegynder

03. august 2006 - 22:22 #11

Velbekom, og tak for point :o)

Synes godt om

marzman Nybegynder

03. august 2006 - 22:23 #12

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
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
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	3	29/09/202410:58	20/03/202513:38

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

14:00

Bliv it-driftsdirektør hos Metro Service eller bidrag til PET’s offensive operatinoer: Her er 10 ledige stillinger, som du kan søge i påsken

12:00

På uventet eventyr i det ydre rum: Ved en fejl bliver en dreng jordklodens repræsentant

17/04

Hvordan skaber vi en mere menneskevenlig digital fremtid? Få nogle bud her

17/04

CVE-databasen reddet i allersidste øjeblik - ny bevilling godkendt

16/04

Netcompany-stifterne André Rogaczewski og Claus Bo Jørgensen skovler penge ind: Har tjent næsten 600 millioner kroner på et år

16/04

Prøvekørt: Der er mange gode grunde til at kalde BMW i5 for den bedste el-stationcar til dato

16/04

Sådan modererer Mads og 20 andre danskere alt indhold på Metas danske platforme fra et center i Barcelona

16/04

Jeg købte tømmermands-pizza for alle mine bitcoins og gik glip af en formue: Nu overvejer jeg at gå all-in igen

16/04

Ny fond haste-etableret: Vil forsøge at redde sårbarhedsdatabasen CVE fra nedlukning

16/04

Den omstridte rigmand Peter Thiels selskab Palantir lander vigtig ordre hos Nato: En sejr for USA

16/04

Danske sikkerheds-eksperter: Lukning af verdens vigtigste sårbarhedsdatabase kan få alvorlige konsekvenser

Vis flere artikler

IT-JOB

Nordic RCC

Application Architect at the heart of the Nordic Green Transition

Netcompany A/S

Microsoft Operations Engineer

Jyske Bank

Senior Forretningsudvikler til pris-området

Blue Idea ApS

IT-supporter – yd 1st level support til vores kunder

Scan Global Logistics

D365 Finance Developer - Business-Oriented with Solution Design Expertise

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

59 min siden	Efter lukning af Edge, hvordan gendannes alle fanebladene? Af Philip Kuhlmann i Browsere
I går 15:46	Meta AI = Svær at foor væk ? Af Ikke-ekspert i Chat & Messaging
I går 12:05	Intet signal Af Gnuff i PC
16/0420:01	Coca-Cola - eller Pepsi-Cola automater i The White House, USA ? Af Ikke-ekspert i Fri debat
16/0416:53	Mailkonto iPhone fungerer ikke Af carstenpri i E-mail programmer