J.N.Medlem sedan apr. 20031 660 inlägg HEJ!
Behöver hjälp med några problem för en layout jag håller på med.
Webben ska centreras och kodas strict.
1. Det fungerar perfekt i IE, men i O/FF kommer högra kolumnen under. Hur löser man detta? Måste man minska bredden tills det går ihop, och sedan göra en fix för IE?
Jo, jag jobbar i FF egentligen, men eftersom det fungerade i FF, bytte jag för stunden.
2. Det ska vara linjer mellan olika lager, det lodräta har jag problem med. Måste jag lägga lagren 'search' och 'margin' i ett wrapper-lager?
Hoppas det jag gjort går att justera till utan allt för mycket problem!
http://member.webforum.nu/5316/defaultab.htm
Lagerfärgerna finns endast för att lagerna ska synas, skissen visar hur det ska se ut.
Kan trösta dig med att det är skit att utgå från IE 6. Jag fick mindre problem när jag la alla divar inuti en som var hela sidan. Du kan ju prova det iaf, det är ju minsta mängd arbete.....
tydalMedlem sedan juni 20034 013 inlägg http://tydal.nu/htmltest/defaultab.htm
Jag la till "clear: left;" på #bottom samt "float: right;" på #margin.
J.N.Medlem sedan apr. 20031 660 inlägg Tack tydal!
Glömde få med en sak i inlägget kom jag på; den vita bakgrunden ska sträcka sig hela vägen ned som skissen visar. Just nu gör det så i IE. Jag hade det korrekt i början av kodningen, men sedan försvann det när jag trixade med högerlagren.
Och hur får jag med den grå lodräta linjen?
http://member.webforum.nu/5316/defaultab.htm (uppdaterad)
Dev Null skrev:
Kan trösta dig med att det är skit att utgå från IE 6. Jag fick mindre problem när jag la alla divar inuti en som var hela sidan. Du kan ju prova det iaf, det är ju minsta mängd arbete.....
Jodå, det vet jag, men eftersom jag fick ihop denna kod, är det bättre att visa försöken än inget.
Jag testade lägga allt i samma div (för utfyllnad av hela sidan, 'max-height'), men eftersom det inte fungerade, tog jag bort det.
tantenMedlem sedan nov. 20051 596 inlägg Om du i stället för att lägga padding på div och i stället på innehållet som t.ex så här
#lmenu{ width:145px; padding:25px 0px 0px 0px; float:left; background-color:#caa; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
#lmenu ul{ padding-left: 10px;}
#lmenu h6{text-transform:uppercase; font-size:1em; padding-left: 10px;}
Så kommer högern att åka upp, dessutom får du mer plats att få in de andra divarna på.
Har du provat med border right på content?
J.N.Medlem sedan apr. 20031 660 inlägg tanten, ska din kod användas med tydals?
I vilket fall har jag det så, och nu passar det ihop perfekt, förutom bakgrundsfärgen. Ideér?
tanten skrev:
Om du i stället för att lägga padding på div och i stället på innehållet som t.ex så här
Det borde vara bäst och enklast att lägga padding så nära innehållet som möjligt. Kan man få ihop det ändå, eller det är endast att lära sig?
tanten skrev:
Har du provat med border right på content?
Japp, nu har jag. Misstänkte man borde göra så, och visst! Genom att justera bredder på #content resp #search/#margin (de högraste alltså) fick jag ihop det.
#lmenu li li a{margin-left:15px; list-style-type:none; color:#7c7cb8;}
#lmenu .indicate{background:url(image/indicatemenu.gif) no-repeat 10px;}
Kan man få ihop detta på annat sätt, eller är det korrekt? Om jag tar bort margin och lägger den på .indicate, får jag inte med bakgrundsbilden.
Provade med -2px, och då ser jag precis bildens sista pixlar. Den kan helt enkelt inte finnas med minusmarginal till vänster om; försvinner i marginalen på taggen helt enkelt.
Känns det igen/har jag gjort det korrekt?
http://member.webforum.nu/5316/defaultab.htm
paddanMedlem sedan dec. 2002299 inlägg Jag har skrivit en artikel om precis ditt problem...jätte enkelt trick, läs om det här:
http://www.mskold.com/?p=25
tantenMedlem sedan nov. 20051 596 inlägg Jag använde den css-kod som du hade :-)
IE och FF tycker lite olika när man ska ha med en bakgrundsfärg och jag tycker det ser ut som att det är wrappern du ska sätta float:left i för att bakgrunden ska bli vit även i FF och ha kvar den som den är för IE. Hinner inte testa själv nu, men du kan ju prova...
Man får ofta se till att det är två divar som sätter bakgrundsfärgen...
tantenMedlem sedan nov. 20051 596 inlägg Kom att tänka på att det jag skrev förut kanske får allt att flyga till vanster. Behåll det så i alla fall, men lägg in alltihop med ännu en div
#sida{ width: 900px;
margin-left: auto;
margin-right: auto; }
Och skriv <div id="sida"> överst i html och sist en </div>
Om det flög menar jag. Är tillbaka om några timmar om det inte funkade kanske jag hinner titta mer på din kod:-)
J.N.Medlem sedan apr. 20031 660 inlägg Okej, då har du använt tydals förslag också. Jag var ute efter om det du föreslog innebar att hans skulle bort, helt eller delvis. Tack till er båda alltså!
Jodå, det blir vitt med float:en, men då blir det vänsterjusterat, och det var inte meningen. En div till runt allt, enklaste sättet att få rätt på det?
Har letat diverse lösningar på nätet, men ofta är de väldigt komplicerade med min-height och justeringar, vilket jag inte borde behöva i detta fall?
Tex positioniseverything.net.
Enkelt är paddans tips, men det får jag inte ihop med mitt, av någon anledning.
Titta också gärna på fottexten i Opera; där hamnar den till höger, alltså inte alls under.
http://member.webforum.nu/5316/defaultab.htm
Hmm, där kom din reservation sekunderna innan mitt inlägg!
tantenMedlem sedan nov. 20051 596 inlägg Nej men prova med mitt förslag då. Den extra diven kommer inte göra annat än centrera.
mer komplicerat än så ska inte behövas.
J.N.Medlem sedan apr. 20031 660 inlägg Jodå! :birp
Löste också problemet i Opera.
Som ni kanske sett av kod-indragningen, hade jag testat med ett yttre lager runt allt för lång tid sedan.
Men, har jag inte lite mycket div:ar nu? Testade ta bort #wrapper, men då försvinner ju bakgrundsfärgen. Går alltså inte förenkla? (Nöjd ändå!)
Vad tyckte ni om mina funderingar om bakgrundsbilder i #lmenu?
http://www.webforum.nu/showthread.php?p=1203831#post1203831
Särskilt intresserad om mina funderingar om fösvinnande bg-bild är korrekt. Negativ positionering flyttar alltså bilden utom synfält/taggens område.
Läget just nu, ska göra övermenyn imorgon.
http://member.webforum.nu/5316/defaultab.htm
tantenMedlem sedan nov. 20051 596 inlägg
Kan man få ihop detta på annat sätt, eller är det korrekt? Om jag tar bort margin och lägger den på .indicate, får jag inte med bakgrundsbilden.
Egentligen vet jag inte vad den egentliga frågan är, så svar på den första frågan är, jo det går att få ihop på annat sätt. Eftersom din bild ju är som en list-bild så kan man använda den som en sådan så här:
#lmenu ul{
padding-left:2em;
padding-top: 0.5em;
}
#lmenu ul li{
list-style-type:none;
font-size:1em;
}
#lmenu ul li ul li.indicate{
list-style-image: url(indicatemenu.gif);
}
#lmenu ul li ul li a{
display: inline;
color:#7C7CB8;
line-height: 2em; /*här sätter du avståndet mellan rader istf padding någon annanstans.*/
margin-left: 0em; /*här kan du sätta minusmarginal, så texten kommer närmare bilden*/
}
och då blev det ett svar på hur man kan flytta innehåll inne i li...
Det enda är väl att du inte gjort en bild som kommer hamna rätt i höjdled. ( i IE,förstås)Tips! Öka på canvas-höjden i ditt bildprogram till c.a 10-12px och placera din figur på lämplig höjd i den. Nära botten brukar bli bäst. Du får prova dig fram... Men så är den såååå liten. Mina ögon ser den knappt...kan du inte göra den åtminstone ett par px större :P
Det var ett sätt att göra, finns säkert andra med fler förslag. :)
tantenMedlem sedan nov. 20051 596 inlägg J.N
#lmenu li li a{margin-left:15px; list-style-type:none; color:#7c7cb8;}
#lmenu .indicate{background:url(image/indicatemenu.gif) no-repeat 10px;}
Om jag tar bort margin och lägger den på .indicate, får jag inte med bakgrundsbilden.
Försöker läsa mig till vad det är du vill åstadkomma... Vad är det för margin du vill flytta från det första till det andra? Vad är det som ska få mellanrum.
Gissar att det är bildens avstånd till texten eller...?
Så då blir mitt förslag detta
#lmenu .indicate{background:url(indicatemenu.gif) no-repeat 2px 8px;}
Den första siffran flyttar bilden sidledes, den andra höjdledes. Det är bara synligt tills bilden lägger sig under texten eller utanför li. Var det svar, eller cyklar jag igen? Min cykel är för övrigt rostig :moose
tantenMedlem sedan nov. 20051 596 inlägg Din fråga om du har för många #divar...
Jag är ju en sådan som föredrar divar i det mesta, så mitt svar är nej, du kan ha hur många som hellst. Titta bara på Zengarden, där det nästan bara finns divar. Men så kikade jag lite närmare på din.
Det finns en svaghet i din design och det märks först när innehållet i mitten blir kortare än någon av dina sidodivvar. Prova med att ta bort en massa text så problemet syns.
Om du tror att det aldrig kommer att bli så, på någon av undersidorna, så är det ingen fara, men om det kan hända, att någon av sidorna blir längre än mitten, så bör du kanske göra något åt det redan nu. Testa och se om du vill ha tips om hur du ska göra...
J.N.Medlem sedan apr. 20031 660 inlägg Har justerat min lista nu, och du svarar ungeför på frågan med svaret "Det är bara synligt tills bilden lägger sig under texten eller utanför li". Man kan inte få en bild att synas i margin etc, eftersom det helt enkelt inte existerar!
List-style-image, det var det jag var ute efter.
Men, den kan man alltså inte placera med positioner, utan genom att göra bilden med korrekt höjd?
Om så, är det dumt, för då är layouten låst efter bildstorleken. När man utvecklar css/html-kod, vill man ju slippa grafikprogrammen för att justera bildhöjder.
Har gjort pilen med två pixlar till i bilden! Tycker också den är lite fadd, får se hur det blir när ad:n tittar på det.
Vilken av följande ska man använda då? list-style-image låter mer rätt än att lägga en bakgrundsbild som man å andra sidan kan man flytta bilden som man vill? Vad brukar ni göra?
#lmenu ul li ul li.indicate{list-style-image:url(indicatemenu.gif);}
#lmenu .indicate{background:url(indicatemenu.gif) no-repeat 10px;}
http://member.webforum.nu/5316/defaultab.htm
Ska fixa till listan i #margin också.
J.N.Medlem sedan apr. 20031 660 inlägg
tanten skrev:
Din fråga om du har för många #divar...
...
Det finns en svaghet i din design och det märks först när innehållet i mitten blir kortare än någon av dina sidodivvar. Prova med att ta bort en massa text så problemet syns.
...
Tänkte mest på om någon har blivit överflödig, men då är det okej.
Det finns ju även något som kallas 'div-mania', att allt läggs i div:ar till överdrift.
Såg att jag gjort fel med #spacebeforebottom, clear:both; kördes ej, vilket innebar att det inte lämnades padding mot adress-fältet längst ned. Högermarginalen #margin har ingen egen padding i botten, därför kunde det se konstigt ut, endast i IE dock. Eftersom den inte avslutas med <p> får den ingen padding. Stoppar dit lite i #margin; tanken är att det kan hamna lite allt möjligt i den div:en.
Var det det du menade, eller vill du ha hela skärmen fylld på höjden?
tantenMedlem sedan nov. 20051 596 inlägg Funderade nog mest över om du behövde den diven alls längre.
Det jag ser är att dina sidodivar kommer gömma sig under bottom eftersom du har -30px margin-top på den. Visst man kan rädda det genom att sätta margin neråt på bägge sidodivarna... men jag skulle ha tagit bort minus i bottom och floatat den left och tagit bort #spacebeforebottom helt också... Den har väl egentligen ingen funktion längre eftersom du har en omslutande div runt alltihop...
J.N.Medlem sedan apr. 20031 660 inlägg Återkommer med div:arna, har fastnat i menyproblem.
Hittade en förnämlig på easymenu.co.uk, men jag får inte ihop den med webben, eftersom jag har satt margins etc för att få lagret menu på rätt plats. I FF är det perfekt, men IE och Opera gör olika stora marginaler. :(
Hur ska jag få rätt på det?
Funderat, och letat, efter en annan meny, men troligen måste jag lösa positioneringen korrekt först.
http://member.webforum.nu/5316/defaultab.htm
tantenMedlem sedan nov. 20051 596 inlägg
J.N. skrev:
Får inte ihop den med webben, eftersom jag har satt margins etc för att få lagret menu på rätt plats. I FF är det perfekt, men IE och Opera gör olika stora marginaler. :(
Hur ska jag få rätt på det?
Funderat, och letat, efter en annan meny, men troligen måste jag lösa positioneringen korrekt först.
http://member.webforum.nu/5316/defaultab.htm
Tittade lite snabbt på din csskod för "dropet" och kunde bara konstatera att det mesta var okänt för mig.
När jag råkar ut för liknande saker att FF ser rätt ut, men inte IE och ibland Opera, så antar jag att koden är rätt i 95% av fallen och att jag i stället får försöka hitta en lösning via hack eller eget styleshet för IE.
Men nu har du en meny med .js och jag tror att du kanske ska vända frågan vidare till det forumet i stället. Om man använder dropdownmeny utan javascript så är det definitivt så att man måste koda eget css för IE6. Då kommenterar man in en dold tabell "lurar valideringen", men som jag då personligen upplevt bättre än med javascript. Men något av det måste du använda dig av om du vill dropdowna. Men som sagt jag tror inte du ska söka felet i din andra kod, men jag är inte säker, då till de resterande 5% :)
