Avatar billede meyer Nybegynder
04. juni 2008 - 11:55 Der er 34 kommentarer og
1 løsning

tabelbredde i css

Dette spørgsmål er relateret til mit tidligere problem:
www.eksperten.dk/spm/833793

Kan jeg på nogen måde styre bredden i min menu automatisk, forstået på den måde at når jeg taster et menupunkt og undermenuer ind i min database så laver systemet en automatisk bredde på skærmen inkl. i CSS filen?

/* common styling */
.menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:25px; font-weight: bold; text-align:center;

color:#fff; border:0px; background:#193441; line-height:25px; font-size:12px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#3E606F;}
.menu ul li:hover ul {display:block; position:absolute; top:25px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#91aa9d; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#91aa9d; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#91aa9d; color:#000;}
.menu ul li:hover ul li a:hover {background:#d1dbbd; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

Her har den jo en fast bredde på 104 og den næste kommer så 105px henne - men det går jo ikke hvis menupunkterne er f.eks 200px bredde - kan man styre det?
Avatar billede w13 Novice
04. juni 2008 - 11:59 #1
Er det ikke bare at sætte noget padding-left:20px; på det ul-element.

(Du har ingen tabel i den kode, så vidt jeg kan se?)
Avatar billede meyer Nybegynder
04. juni 2008 - 12:05 #2
Nej der er ingen tabeller i menuen, men bredden er jo styret i ovenstående css :-)

Hvor er det du mener jeg skal sætte det ind?
Avatar billede w13 Novice
04. juni 2008 - 12:08 #3
Linjen:
padding-left:20px;

:)

Og det er vel så i din ul tror jeg?

.menu ul {padding:0; margin:0; list-style: none;}

bliver til:

.menu ul {padding:0; padding-left:25px; margin:0; list-style: none;}
Avatar billede meyer Nybegynder
04. juni 2008 - 12:10 #4
Tager den så længden af min tekst og smider 25 px ind til venstre for den? :-)
Avatar billede w13 Novice
04. juni 2008 - 12:12 #5
Det burde den ja :)
Avatar billede meyer Nybegynder
04. juni 2008 - 12:13 #6
Det gør den desværre ikke - den rykker bare topmenuen 25px til venstre :-)
Avatar billede w13 Novice
04. juni 2008 - 12:16 #7
Nå ja, men så ret:

.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}

til:

.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none; padding-left:25px;}
Avatar billede meyer Nybegynder
04. juni 2008 - 13:01 #8
Er ked af at sige det, men så rykker den bare submenuerne :-(
Avatar billede w13 Novice
04. juni 2008 - 13:18 #9
Og hvad skal den? :)
Avatar billede meyer Nybegynder
04. juni 2008 - 13:25 #10
Den skal ha' den bredde som teksten i databasen er og gerne + f.eks. 25 px :-)
Avatar billede w13 Novice
04. juni 2008 - 13:30 #11
Så skal padding-left vel bare være padding-right? Så tilføjes 25px til højre for teksten.
Avatar billede meyer Nybegynder
04. juni 2008 - 13:39 #12
Det ændrer ikke rigtigt noget.
Avatar billede meyer Nybegynder
04. juni 2008 - 13:39 #13
Skal jeg ændre noget i den nederste del af css-scriptet?
Avatar billede w13 Novice
04. juni 2008 - 13:53 #14
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative; padding-right:25px;}
.menu ul li ul {display: none; padding-right:25px;}
.menu ul li ul li{padding-right:25px;}

vil resultere i 25px på højre side af teksten i li-elementerne. Om det kan ses afhænger af, hvordan du har bygget din side op.
Avatar billede meyer Nybegynder
04. juni 2008 - 14:15 #15
Nu gør den det at den smider de 25px ind mellem menupunkterne...
Avatar billede w13 Novice
04. juni 2008 - 14:16 #16
Kan jeg se, hvordan den gør?
Avatar billede w13 Novice
04. juni 2008 - 14:16 #17
Du kan også prøve med:

.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative; margin-right:25px;}
.menu ul li ul {display: none; margin-right:25px;}
.menu ul li ul li{margin-right:25px;}
Avatar billede meyer Nybegynder
04. juni 2008 - 14:23 #18
Det sidste er sat ind :-)

Du kan se det her: www.meyerweb.dk/w13/
Avatar billede w13 Novice
04. juni 2008 - 14:27 #19
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li a {padding-right:25px;}
.menu ul li ul {display: none; padding-right:25px;}
.menu ul li ul li a {padding-right:25px;}

Måske?
Avatar billede w13 Novice
04. juni 2008 - 14:28 #20
Og du skal så nok rette:

.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:25px; font-weight: bold; text-align:center; color:#fff; border:0px; background:#193441; line-height:25px; font-size:12px; overflow:hidden;}

til:

.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; height:25px; font-weight: bold; text-align:center; color:#fff; border:0px; background:#193441; line-height:25px; font-size:12px; overflow:hidden;}
Avatar billede meyer Nybegynder
04. juni 2008 - 14:29 #21
Den skriver ikke alt hvad der står i databasen i den første hovedmenu - prøvede at lave den lang for at se om den klarededet hele.
Avatar billede meyer Nybegynder
04. juni 2008 - 14:30 #22
skal (width: 104px;) ændres på nogen måde?
Avatar billede meyer Nybegynder
04. juni 2008 - 14:33 #23
Ups...skrev vist samtidig med dig ;-)
Avatar billede w13 Novice
04. juni 2008 - 14:33 #24
;)
Avatar billede meyer Nybegynder
04. juni 2008 - 14:33 #25
Det skrider da den rigtige vej :-)
Avatar billede meyer Nybegynder
04. juni 2008 - 14:47 #26
Jeg kan sgi ikke få den til det i submenuerne  :-(
Avatar billede w13 Novice
04. juni 2008 - 14:56 #27
Submenuerne må nok have en fast bredde, for ellers risikerer du - som nu - at et punkt er bredere end de andre. Du kan ikke sætte dem til bare at være lige store uden at bruge JavaScript eller lave det i tabeller i stedet.
Avatar billede meyer Nybegynder
04. juni 2008 - 15:00 #28
Hmmm...det var ikke så godt :-)

Kan man lave det i tabeller så den popper nedover det andet?
Avatar billede meyer Nybegynder
04. juni 2008 - 15:16 #29
Har lige tabt modet her - nu viser det sig at den ikke kan poppe op over en flashfil - kan man løse det på nogen måde? :-(
Avatar billede w13 Novice
04. juni 2008 - 15:26 #30
Nej, Flash-filer vil som standard ligge øverst. Keysersoze har flere gange nævnt et trick, men jeg har aldrig set en reel kode til det.
Avatar billede meyer Nybegynder
04. juni 2008 - 15:28 #31
Suk ok - jeg må prøve at søge på det så - eller lave et nyt spørgsmål med det så dukker han nok op :-)
Avatar billede meyer Nybegynder
04. juni 2008 - 17:34 #32
Tror jeg har klaret den med flashen :-)

Kan man på nogen måde bestemme width f. eks. med

Cint(len(antal tegn i menuen) * font(bredde) + luft omkring teksten)
og så overføre det til css-scriptet ?
Avatar billede meyer Nybegynder
04. juni 2008 - 17:35 #33
Ja det skal jo så selvfølgelig ændre sig hver gang der kommer et nyt menupunkt...
Avatar billede meyer Nybegynder
04. juni 2008 - 19:57 #34
w13>> Tak for hjælpen så langt - har flyttet den videre over i DHTML - så gider du lige smide et svar?

Og endnu en gang tusind tak for hjælpen :-)
Avatar billede w13 Novice
04. juni 2008 - 22:54 #35
:)
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
Kurser inden for grundlæggende programmering

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