26. november 2009 - 01:30Der er
45 kommentarer og 1 løsning
Line-break
Hej!
Jeg har en menu i et Content Management System der ser sådan her ud:
Menu1 / Menu2 / Menu3 / Menu4 / Menu5
Jeg vil gerne have at den breakes i to linier efter Menu3, så menu står således:
Menu1 / Menu2 / Menu3 / Menu4 / Menu5
Det ville være nemt hvis jeg bare kunne indsætte et <br/> eller, men den eneste måde jeg kan ramme menuen på (mulighederne i systemet) er med CSS sådan her, hvor jeg så har forsøgt mig med Display: Block
a[href="/Menu4.100.aspx"] { display: block; }
det resultere desværre i at menuen kommer til at stå sådan her:
Menu1 / Menu2 / Menu3 / Menu4 / Menu5
da display: block; jo gør dette: "The element will generate a block box (a line break before and after the element)"
Så hvad gør man så? Er der ikke en property der kun laver line break efter element? Eller en anden smart CSS måde at breake en linie på?
Tror også problemet består i at din table kun er 590px, og derfor ikke er bred nok til linksne på linie to. Hvis du kan lave table og td's width attributer lidt større, så kan du i værste fald sætte en padding-right på linket.
(ser ud til at virke med 650 som bredden, og padding-right:315px;)
@mclemens... men .navigation gælder for alle menupunkter og jeg kan ikke sætte et ID på et specifikt menupunkt. Systemet tillader det ikke. Jeg kan kunne ramme et givent menupunkt med:
Så slet span lagt omkring a elementerne og sig: .navigation{display:block;float:left} a[href="/Kunstnere.152.aspx"] { clear:right; }
(du kan ikke ramme span'en omkring kunstnere's a element, og det er det du p.t. har behovet for, derfor sletningen af span elementer omkring a elementerne).
... Er ovenstående ikke muligt, så skal der bruges javascript. (Eller padding - som du valgte.)
.navigation{display:block;float:left} - Laver alle de menu span og a elementer til block elementer, men floater dem også til venstre
a[href="/Nyheder.190.aspx"] { clear:left; }
- Da a elementet er et block element og span elementet udentil også er det slår clear:left; fint igennem ... men sagde man clear:right; som jeg legede med før virkede det ikke. Om det er en fejl at clear:right; ikke vil virke når det sker fra et indvendigt nested block element eller om det er en fejl at clear:left; virker, kan jeg ikke lige hitte ud af ?-/
Jeg tror grunden til at den virker på den ene og ikke den anden side ligger i at den opfatter span og a elementet som værende meget tæt knyttede, og ændringen af class'en på den aktive knap derfor gør at denne fejl jeg fandt før - ikke virker på den side. (Der er jo ingen forskel ellers, og kører man clear:left på kunstnere på samme side virker det, den eneste forskel er class forskellen).
- Men da man ikke kan cleare fra nestede elementer og ud (som det ses, hvis du prøver at cleare mod right; - på de sider den vil cleare mod left) er det ikke muligt at clear'e så længe a elementet som vi fanger her:
a[href="/Nyheder.190.aspx"] { clear:left;}
er omsluttet af span elementet.
(Medmindre de havde samme class name, da fejlen som jeg snublede over før så åbenbart gjorde det muligt ... men det er ikke altid fedt at basere en side på fejl - da fejl kan blive rettet).
Du er derfor nødt til at hacke lidt i kildekoden for content management systemet og fjerne span om links - benytte padding som foreslået af jagdos eller benytte et javascript til at rette problemet.
Jeg kan godt ændre .navigation og .navigation_active til at have samme klasse, men så kan jeg jo ikke highlighte menupunktet. Hvad er det for en "fejl" du nævner, det fangede jeg ikke helt?
Og jeg må indrømme at jeg ikke forstår hvorfor det virker, indtil man klikker på menupunktet man rammer.
Fejlen jeg nævner er det at clear:left virker, når blot det omkransende element har samme class som det indvendige - det er en fejl og den opstår åbenbart kun når det er samme class.
- At fejlen, så gjorde at det hjalp på problemet på de andre sider, er så en anden sag ...
Det er ikke en fejl at den ikke virker på siden med de forskellige classes, det er en fejl at den virkede på de andre sider med samme classes.
Kan du rette class="navigation_active" til class="navigation navigation_active" ? Det er muligt at det vil gøre så fejlen stadig virke. (Hvis det gør, så husk at det stadig kun fungerer baseret på en fejl i browserens css box model håndteringen)
- Gør det ikke, ja så er valget nok mellem det i #25 eller at undvære aktiv side markering (som næsten er det værste efter min mening).
Nej, det er vi så to der ikke gør, men det kan ikke passe at den ikke virker blot fordi man skifter class til noget andet, når man så samtidig indsætter
.navigation_active {display:block;float:left;}
og ligeledes kan det heller ikke passe at et nested element kan cleare left for sig selv og det omkransende element, men ikke right når man skifter left til right.
... Derudaf må jeg benytte udelukkelses metoden og konkludere at det er en fejl.
At det så fejler generelt ved de nævnte browsere, tjah aner det ikke, men det kan ikke stemme, at den vil cleare når det er samme class og kun til venstre - ikke højre, og når class'en så er forskellig, så vil den ikke længere, selvom css'en tilrettes.
Så virker øverste script, indtil man klikker på Nyheder, så sammenstilles menuen. Bruger jeg script nr. så virker det hele vejen igennem og med Lightbox, men den laver en scriptfejl der lyder:
"Et objekt er obligatorisk"
Hvis man for alt i verden kan undgå Jquery sammenblanding med Lightbox, så er det mest optimalt.
Nu virker det perfekt og sammen med Lightbox, men bare ikke i IE7.
satte min IE8 i IE7 mode ved at trykke F12 og vælge "Browser mode"
Dette skal øjensynligt stadig bevares i CSS: .navigation, .navigation_active {display:block;float:left;} a[href="/Nyheder.190.aspx"] { clear:left;}
I det oprindelig script blev IE7 problemet løst med denne linie: $("[href=/Nyheder.190.aspx].:not(.navigation_active)").before("<br style='clear:both'>");
Prøv med dette script og så slet de to css styles ( .navigation, .navigation_active {display:block;float:left;} a[href="/Nyheder.190.aspx"] { clear:left;} )
<script type="text/javascript"> if(window.addEventListener)window.addEventListener("load", tester, false); else if(window.attachEvent)window.attachEvent("onload", tester); function tester(){ var as=document.getElementsByTagName("a"); for(i=0;i<as.length;i++)if(as[i].href.indexOf("Nyheder.190.aspx")+1){ var tmp=document.createElement("div");tmp.style.clear="both"; var x=as[i].parentNode.childNodes.length==1?as[i].parentNode:as[i]; x.parentNode.insertBefore(tmp,x); } } </script>
Hej! Det virker desværre ikke helt. Når man klikker på Nyheder, så sker der noget underligt med hele designet på sitet. Prøv selv at se.
Tror også der blir nødt til at være noget CSS der skiller menuen for Nyheder, og et script der holder menuen delt i to, også når man klikker på Nyheder. Som det er nu, er scriptløsningen alene for "langsom", til at man kan undgå at menu "blinker" (man ser menuen deler sig/hopper ned på næste linie), når man klikker rundt.
<script type="text/javascript"> if(window.addEventListener)window.addEventListener("load", tester, false); else if(window.attachEvent)window.attachEvent("onload", tester); function tester(){ var as=document.getElementsByTagName("a"); for(i=0;i<as.length;i++)if(as[i].href.indexOf("Nyheder.190.aspx")+1){ var tmp=document.createElement("div");tmp.style.clear="both"; var x=as[i].parentNode.childNodes.length==1?as[i].parentNode:as[i]; x.parentNode.insertBefore(tmp,x);break; } } </script>
(break tilføjet - den ramte andre links længere nede med lignende href uden break'en)
...
Ved css kan vi ikke ramme elementet optimalt, det er inline span elementer, som skal ændres til block ("ok"), vi skal ramme et specifikt element med en bestemt href (ok) - og så skal vi sætte clear på elementet der omkranser det element vi har fået fat i (ikke ok via. css - da det ikke muligt) - det eneste tilfælde det "virkede" var i de tilfælde hvor class på a elementet var ens med det omkransende span element.
(jeg kan ikke se en grund til at benytte css delen, da det ikke ville hjælpe på alle sider, men det ville jo virke på alle sider undtagen nyheder, så hvis det er, så kan du jo kaste de to css regler ind igen ... men der vil stadig være risiko for et hop under nyheder)
- Havde du blot kunnet lægge en id havde det været meget lettere. ... Der er dog en mulighed for måske at minimere det synlige hop Hvis du kan tage script blokken og lægge den længere nede i kildekoden (efter nyheds a elementet), så burde det virke. Benyt i det tilfælde denne script block istedet:
<script type="text/javascript"> var as=document.getElementsByTagName("a"); for(i=0;i<as.length;i++)if(as[i].href.indexOf("Nyheder.190.aspx")+1){ var tmp=document.createElement("div");tmp.style.clear="both"; var x=as[i].parentNode.childNodes.length==1?as[i].parentNode:as[i]; x.parentNode.insertBefore(tmp,x);break; } </script>
(den kører med det samme - d.v.s. man burde ikke kunne se den hoppe, men den skal lægges efter a elementet er vist i kilden).
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.