CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede leftism Praktikant
25. marts 2004 - 21:29 Der er 18 kommentarer og
1 løsning

CSS - gå helt ud til kanten!

http://dusted.homepage.dk/index.htm
(stylesheet kan ses på http://dusted.homepage.dk/css.css)

Hvis ovenstående link åbnes i et browservindue som ikke er maksimeret, "trukket" mindre, opstår der et hvidt område yderst til højre. Det er meningen at den gule top og grå navigationsmenu skal gå helt ud til kanten til højre.

Lidt svært at forklare problemet, men prøv at træk vinduet mindre end menu-teksten og du kan se hvad jeg mener.

Det er lidt svært at forklare problemet, men tag evt. et kig på
http://dusted.homepage.dk/css_eksempel.jpg - her er problemet illustreret! =)
Avatar billede voirsous Nybegynder
25. marts 2004 - 21:35 #1
Jeg ser problemmet. Mit umilbare gæt vil være det kan løses hvis top-div-boksene smides ind med position: absolute; Prøv at rod med det og skriv, hvis det stadigvæk ikke virker.
Avatar billede bearhugx Nybegynder
25. marts 2004 - 21:35 #2
prøv at drop
  width: 100%;

fra din #navigation
Avatar billede bearhugx Nybegynder
25. marts 2004 - 21:37 #3
et div-element er pr. natur altid hele dokumentets brede (eller den omkredsene boks (containing box)) -- men hvis du specificerer width:100% så bliver bredden sat til browservinduets nuværende bredde - hvorefter den ikke "går hele vejen", når man bruger scroll-barerne...
Avatar billede voirsous Nybegynder
25. marts 2004 - 21:41 #4
derfor kan du 'hacke' det ved at smide det oven på body elementet, som derfor ikke tager 'skade' når selve sammes width bliver ændret.

<body style="margin: 0px;">
<div style="width: 1005; height: 100px; background-color: blue; position: absolute; left: 0px; top: 0px;">
hack
</div>
<div style="width: 500px;">
bug
</div>

illustrer det vidst
Avatar billede voirsous Nybegynder
25. marts 2004 - 21:45 #5
1005; = 100%;
Avatar billede bearhugx Nybegynder
25. marts 2004 - 21:51 #6
voirsous >> man behøver skam ikke at hacke det... man skal bare lade vær med at sætte noget div til
  width: xx %
med mindre man rent faktisk har brug for det...

et gammelt ordsprog siger "if it ain't broke, don't fix it..."
Avatar billede bearhugx Nybegynder
25. marts 2004 - 21:52 #7
derfor vil jeg også opfordre leftism til at droppe det width: 100% som er indsat i #navigation
Avatar billede leftism Praktikant
25. marts 2004 - 21:55 #8
Voirsous: Hvis jeg tiføjer "position:absolute" til top-div'en, forsvinder denne blot helt og aldeles. Dit hack med at smide det oven på body elementet, bliver udsat for nøjagtig det samme hvide "tomrum" som det oprindelige design...
Avatar billede leftism Praktikant
25. marts 2004 - 21:56 #9
Bearhuqx: Jeg har prøvet at fjerne width og har også prøvet at sætte den til "auto". Ingen af delene fikser desværre problemet... ='(
Avatar billede leftism Praktikant
25. marts 2004 - 21:57 #10
Jeg kan godt prøve at smide siderne op med de ændringer I foreslår, hvis det kan hjælpe...!
Avatar billede voirsous Nybegynder
25. marts 2004 - 22:36 #11
leftis, har du taget højde for min tastefejl?
<div style="width: 1005; <---
skal være
<div style="width: 100%; <---

bearhugx desværre, i de browser klienter jeg ser, er div ikke pr. defination sat til 100%. Jeg vil give dig ret i det burde de egentlig være.
Avatar billede leftism Praktikant
25. marts 2004 - 22:41 #12
Ja, jeg har taget højde for din tastefejl!
Avatar billede swuppe Nybegynder
26. marts 2004 - 00:19 #13
Det er din white-space: nowrap; der giver problemet, den hurtige løsning (som jeg lige kan komme på uden at tænke over det :o) er at lægge endnu en div ind i #navigation med en fast bredde og uden baggrund, heri lægger du så menupunkterne. Hvis ikke du kan give den en fast bredde må vi prøve at sætte de små grå i svingninger, men det bliver ikke før i morgen....

Forresten så er vertical-align ikke brugbar på blok elementer, idet den vertikalt justerer inline elementer i forhold til elementerne lige før og efter det element det sættes på, og altså ikke refererer mellem parent og child elementer.
Avatar billede leftism Praktikant
26. marts 2004 - 17:36 #14
Swuppe: Har prøvet dit forslag, men det løser deværre ikke problemet. Har lagt den op på http://dusted.homepage.dk/index_swuppe.htm, div'en med menupunkterne har en bredde på 1000px og en rød baggrund.
Avatar billede swuppe Nybegynder
26. marts 2004 - 23:17 #15
jeg kan godt se at der er lidt problemer der, det har jeg faktisk ikke tænkt over før. Nå men her er en mulig løsning (bær venligst over med mig det er fredag aften :oD)

Hvis vi går ud fra dit sidste oplæg.

Sæt #navigation med indhold ind i #top div'en tilføj position:relative; top:101px;    left:0; til #navigation og sæt width til 100%; sæt en fast bredde på f.eks. 700px på div'en inde i #navigation.

Det skulle klare det i IE, det virker dog stadigvæk ikke i firefox ved ikke lige med andre browsere, håber du kan bruge det.
Avatar billede leftism Praktikant
29. marts 2004 - 20:56 #16
Ja, det løser problemet i IE. Jeg fatter bare ikke hvorfor problemet opstår overhovedet. Hvis du laver et indlæg som svar får du de 30 point. Jeg roder selv videre med det for at se om jeg kan finde en løsning så det også virker i bl.a. Firefox. Men tak for IE hjælpen.
Avatar billede swuppe Nybegynder
30. marts 2004 - 10:27 #17
S'gerne :o)

Problemet opstår fordi width=100% relaterer sig til den omgivende boks i dette tilfælde browservinduet, i IE fungerer width som min-width derfor kan vi løse problemet ved at sætte menuen ind i top boksen.

Måske vil det fungere i netscape/mozilla (hvis ikke det allerede gør har ikke testet) ved at tilføje en "spacer" div <div style="clear:both"></div> efter #navigation i css2 kan du også benytte dig af ren css til at opnå samme effekt #navigation:after{ content: ""; display: block; height: 0; clear: both; }, det er måske værd at prøve.
Avatar billede leftism Praktikant
30. marts 2004 - 18:54 #18
Dit første forslag virker i Firefox, men har endnu ikke prøvet forslag 2 - men vil selvfølgelig afprøve det.

Er sgu lidt skuffet over at css (eller hvad det nu er) laver sådan et rod... ;-)
Avatar billede leftism Praktikant
30. marts 2004 - 18:54 #19
Iøvrigt; tak for hjælpen alle sammen!
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
Variabler som ikke virker Af Frits Jensen i HTML 2 30/10/202409:37 30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 2 29/09/202410:58 30/09/202412:04
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
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
36 min siden Outlook henter ikke mails Af TTA i Office & Kontorpakker
49 min siden vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling
I dag 13:35 Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling
I går 20:49 pop up black friday Af Malm i Virus
I går 18:31 Hvor finder jeg en netværksdriver? Af jcr18 i Wifi
White papers
Flere white papers »


Premium
Teaser billede
Vil købe tele-løsninger til det offentlige for 370 millioner kroner
Læs mere »
Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"
Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen
Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet
Se alle »
Computerworld
Teaser billede
Microsofts nye pc er ekstrem billig – men kan blive ekstrem sikker og fleksibel
Læs mere »
Test: Prøv kun disse B&O-hovedtelefoner, hvis du har råd
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Test: Audi Q6 er en super fed SUV - men gør dig selv en tjeneste og kast flere penge efter den
Se alle »
CIO
Teaser billede
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Læs mere »
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Microsofts store årlige event: De tre vigtigste nøglebudskaber fra Satya Nadella om Microsofts fremtid
Stor sag mod Microsoft kan være på vej: Beskyldes for at låse Azure-kunder fast med ulovlige metoder
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
De ansatte elsker det, tech-cheferne hader det – og HP kaster milliarder efter det
Se alle »
White paper
Teaser billede
Sikkerhed uden grænser: Cisco Hypershield
Læs mere »
Sådan gør du: Elektronisk dokumentudveksling i praksis
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
SAP: Skab værdi og minimér omkostninger med effektiv dokumenthåndtering
Se alle »

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