Søg
Avatar billede kgp43 Nybegynder
17. januar 2005 - 18:43 Der er 15 kommentarer og
1 løsning

Venstre og højre align

Hejsa,

Jeg har en div på 780x24 px, jeg vil gerne have runde hjørner, så jeg har lavet to billeder.

Har så prøvet at få sat billederne ud i hver deres side, men kan ikke få det til at virke.


<div id="topmenu">
  <div id="topmenu-right"><img src="img/topmenu_right.jpg"></div>
</div>

#topmenu {
    position:relative;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 780px;
    background-color: FEB300;
    height: 24px;
}
#topmenu-right {
    position:relative;
    margin-left: auto;
    margin-right: 0;
}
Avatar billede kgp43 Nybegynder
17. januar 2005 - 18:44 #1
Prøver først at indsætte højre billede, som i kan se.
Avatar billede roenving Novice
17. januar 2005 - 18:47 #2
<div id="topmenu">
  <img src="img/topmenu_right.jpg" style="float:right;">
</div>

#topmenu {
    position:relative;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 780px;
    background:url(img/topmenu_left.jpg) no-repeat #FEB300;
    height: 24px;
}
Avatar billede kgp43 Nybegynder
17. januar 2005 - 18:58 #3
virker, sådan da.

I firefox virker det perfekt, men i IE går billederne ikke helt ud til kanten (mangler 4-5px i hver side).
Avatar billede roenving Novice
17. januar 2005 - 19:05 #4
Måske skal du bare tilføje:
  padding:0;
Avatar billede kgp43 Nybegynder
17. januar 2005 - 19:09 #5
virker ikke.
Skyldes dette en fejl i IE eller Firefox?

Jeg kan forresten fjerne "url(img/topmenu_right.jpg) no-repeat" uden at det gør nogen forskel (så vidt jeg kan se).

#topmenu {
    position:relative;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 780px;
    padding:0;
    background:url(img/topmenu_right.jpg) no-repeat #FEB300;
    height: 24px;
}

<div id="topmenu">
  <img src="img/topmenu_left.jpg" style="float:left;">
  <img src="img/topmenu_right.jpg" style="float:right;">
  </div>
Avatar billede olebole Juniormester
17. januar 2005 - 19:20 #6
<ole>

Lav et div med position:relative.
Læg heri to billeder med position:absolute.
Så kan du placere de to billeder med en mindre, negativ værdi af henhodlsvis 'left' og 'right'  :)

/mvh
</bole>
Avatar billede kgp43 Nybegynder
17. januar 2005 - 19:22 #7
men, er det ikke allerede det jeg har? #topmenu
Avatar billede kgp43 Nybegynder
17. januar 2005 - 19:27 #8
Så er jeg der hvor jeg startede :P

#topmenu {
    position:relative;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 780px;
    padding: 0;
    background: #FEB300;
    height: 24px;
}
#left {
    position:absolute;
    margin-left: 0;
}
#right {
    position:absolute;
    margin-right: 0;
}

<div id="topmenu">
    <div id="left"><img src="img/topmenu_left.jpg"></div>
    <div id="right"><img src="img/topmenu_right.jpg"></div>
  </div>
Avatar billede olebole Juniormester
17. januar 2005 - 19:28 #9
Ja ... og ...?
Avatar billede olebole Juniormester
17. januar 2005 - 19:31 #10
Du fortæller ikke rigitg, hvad der er galt med den løsning - men hvis det er, at billederne ikke når helt ud, kan du prøve at gøre, som jeg skrev:
  Brug en lille, negativ værdi af 'left', henholdsvis 'right'  :)
Avatar billede olebole Juniormester
17. januar 2005 - 19:34 #11
Ooops ... det, du skriver, er jo meget langt fra det, jeg skrev. Du skal bruge 'left' og 'right' ... ikke 'left-margin' og 'right-margin'  :)
Så er der i øvrigt ingen grund til at pakke bilederne ind i de to div
Avatar billede kgp43 Nybegynder
17. januar 2005 - 19:43 #12
Okay, jeg er forvirret nu. Kan du ikke poste et eksempel?

Jeg slettede de to billed-divs "right,left" og tilføjede "left:-10; og right:+10;" men det forskyder bare hele div'en, så jeg slettede det igen.
Avatar billede kgp43 Nybegynder
17. januar 2005 - 19:44 #13
...og tilføjede "left:-10; og right:+10;" ...

- Altså til #topmenu
Avatar billede olebole Juniormester
17. januar 2005 - 19:53 #14
<div style="position:relative;width:300px;height:200px;border:1px solid red">
    <img src="pic1.gif" style="position:absolute;left:-15px">
    <img src="pic2.gif" style="position:absolute;right:-15px">
</div>
Avatar billede kgp43 Nybegynder
17. januar 2005 - 19:58 #15
Den virkede ole :)

Ligger du et svar, så er der point.


<div id="topmenu">
  <img src="img/topmenu_left.jpg" style="position:absolute;left:0px">
  <img src="img/topmenu_right.jpg" style="position:absolute;right:0px">
</div>
Avatar billede olebole Juniormester
17. januar 2005 - 21:49 #16
Fino ... så kan du gøre det en anelse mere sexy  :)

#topmenu img {
  position: absolute;
}

- og:

<div id="topmenu">
  <img src="img/topmenu_left.jpg" style="left:0px">
  <img src="img/topmenu_right.jpg" style="right:0px">
</div>

Den form for nedarvning er faktisk hele grundidéen i CSS. At bruge ID-selectors bør være undtagelsen, man kun bruger, når man ikke kan bruge tag-selectors og/eller klasser, der kaskaderer  ;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 22:58 Kan man undgå at få vist referer når der klikkes på links Af Strawberry i Browsere
I går 12:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
15/0811:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
White papers
Flere white papers »