Avatar billede theselfimages Nybegynder
26. november 2009 - 01:30 Der 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å?
Avatar billede Slettet bruger
26. november 2009 - 07:22 #1
Prøv at bruge  "clear:left;"
I stedet for  "display: block;"

Hvis ikke det virker, skal vi nok se et link...
Avatar billede theselfimages Nybegynder
26. november 2009 - 09:33 #2
Det hjælper desværre ikke.
Avatar billede theselfimages Nybegynder
26. november 2009 - 10:00 #3
http://www.egelundedition.dk

Jeg vil gerne breake linien efter "Kunstnere"
Avatar billede jagdos Nybegynder
26. november 2009 - 19:11 #4
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;)
Avatar billede mclemens Nybegynder
26. november 2009 - 19:44 #5
.navigation{display:block;float:left}

Drop denne:
a[href="/Kunstnere.152.aspx"] {
padding-right:325px;
}

- Kast en id på kunstnere's span element og sig clear:right;
(eller gør det på nyheder og sig clear:left;) - ikke på a'elementet.

... Eller drop evt. span elementerne og sæt id og clear'en på a elementet.

- Det anbefales dog at du skifter span elementerne med class navigation til div elementer.
Avatar billede mclemens Nybegynder
26. november 2009 - 19:45 #6
(Grunden til du ikke kunne clear'e var at det kun virker på block elementer og derfor ikke dit span element - eller dit a element inde i span'en)
Avatar billede theselfimages Nybegynder
26. november 2009 - 19:59 #7
@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:

a[href="/Kunstnere.152.aspx"]
Avatar billede mclemens Nybegynder
26. november 2009 - 20:06 #8
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.)
Avatar billede mclemens Nybegynder
26. november 2009 - 20:11 #9
Glem hvad jeg skrev før, det virkede vist alligevel...


.navigation{display:block;float:left}
a[href="/Kunstnere.152.aspx"] {
clear:left;
}

... men span elementer som block er ikke godt, men nåh :P ...
Avatar billede mclemens Nybegynder
26. november 2009 - 20:13 #10
Sludder
.navigation{display:block;float:left}
a[href="/Nyheder.190.aspx"] {
clear:left;
}
Avatar billede theselfimages Nybegynder
26. november 2009 - 20:17 #11
nu jeg har forsøgt som du skriver, men det resultere ikke rigtig noget.
Prøv selv at se.
Avatar billede theselfimages Nybegynder
26. november 2009 - 20:19 #12
Joh! nu skete der noget...
Avatar billede theselfimages Nybegynder
26. november 2009 - 20:23 #13
@mclemens: Genialt! du knækkede nøden! Tusind tak for hjælpen!
Post et svar.

Tak til jer andre også :-)
Avatar billede theselfimages Nybegynder
26. november 2009 - 20:25 #14
Ahh! Damn... når man klikker på: http://www.egelundedition.dk/Nyheder.190.aspx så returneres der til standard visning af menuen
Avatar billede mclemens Nybegynder
26. november 2009 - 20:27 #15
Forklaringen på det er at

.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 ?-/

(clear:left virker dog i både min IE8 og FF)
Avatar billede theselfimages Nybegynder
26. november 2009 - 20:34 #16
Nu har jeg sat den sådan her:

.navigation{display:block;float:left}
a[href="/Nyheder.190.aspx"] {
clear:right;
}

men så sker der ingenting.

.navigation{display:block;float:left}
a[href="/Nyheder.190.aspx"] {
clear:left;
}

virker fint, indtil man klikker på selve menupunktet "Nyheder" ... hmm!
Hvordan kommer man omkring det?
Avatar billede mclemens Nybegynder
26. november 2009 - 20:34 #17
Jeg synes at der skal dele i dette tilfælde...
(sidder lige og pusler lidt over linket...)
Avatar billede mclemens Nybegynder
26. november 2009 - 20:44 #18
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).
Avatar billede theselfimages Nybegynder
26. november 2009 - 20:49 #19
Tror jeg har fundet en løsning... tester lige...
Avatar billede mclemens Nybegynder
26. november 2009 - 20:50 #20
Nitte, det kan ikke laves på den side (medmindre det er
javascript eller padding på elementet som anvendt før).
Avatar billede mclemens Nybegynder
26. november 2009 - 20:50 #21
Update, nåh ok.
Avatar billede theselfimages Nybegynder
26. november 2009 - 20:56 #22
Hmm! Næh... men grunden til at menuen formattere sig anderledes når man klikker på menupunkter "Nyheder", er vel fordi at denne:

.navigation {display:block;float:left;}
a[href="/Nyheder.190.aspx"] {
clear:left;}

her skal se anderledes ud:

.navigation_active {
?
}
Avatar billede theselfimages Nybegynder
26. november 2009 - 20:59 #23
Hvis det ikke gav mening så:

Grunden til at menuen formattere sig anderledes når man klikker på menupunktet "Nyheder", er vel fordi at denne:

.navigation {display:block;float:left;}
a[href="/Nyheder.190.aspx"] {
clear:left;}

når den er aktiv:

.navigation_active {
?
}

skal se anderledes ud?
Avatar billede mclemens Nybegynder
26. november 2009 - 21:03 #24
Nej og ja.
- Den skulle se sådan her ud:

.navigation,.navigation_active{display:block;float:left;}
a[href="/Nyheder.190.aspx"] {
clear:left;}

- 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).
Avatar billede mclemens Nybegynder
26. november 2009 - 21:05 #25
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.
Avatar billede theselfimages Nybegynder
26. november 2009 - 21:13 #26
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.
Avatar billede mclemens Nybegynder
26. november 2009 - 21:32 #27
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.
Avatar billede mclemens Nybegynder
26. november 2009 - 21:38 #28
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).
Avatar billede theselfimages Nybegynder
26. november 2009 - 21:39 #29
Jeg forstår bare ikke hvordan det kan være en fejl, at det virker som det ser ud nu:
http://www.egelundedition.dk

i både IE8, Safari på Mac og FF

det virker jo perfekt, indtil man klikker det menupunkt der kaldes.
Avatar billede mclemens Nybegynder
26. november 2009 - 21:47 #30
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.
Avatar billede theselfimages Nybegynder
03. december 2009 - 19:37 #31
Hej! Nu lykkedes det faktisk med dette script:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$("[href=/Nyheder.190.aspx]").parents("span.navigation").before("<br style=clear:both>");
$("[href=/Nyheder.190.aspx].:not(.navigation_active)").before("<br style='clear:both'>");
});
</script>

og med dette CSS

.navigation, .navigation_active
{
display:block;float:left;
}

Nu er det nye problem så bare at Jquery konflikter med Lightbox som også er lagt på løsningen:
http://www.huddletogether.com/projects/lightbox2

Åbenbart kan Jquery ikke være i samme stue med:

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<link rel="stylesheet" href="/lightbox/css/lightbox.css" type="text/css" media="screen" />

Nogen gode bud?
Avatar billede mclemens Nybegynder
03. december 2009 - 20:09 #32
Tjah, et godt bud var at du meldte ud at en javascript løsning kunne accepteres (foreslået i #8, #20, #25)...

Istedet for det jquery halløjsa, hvad så med:


<script type="text/javascript">
window.onload=function(){
var as=document.getElementsByTagName("a");
for(i=0;i<as.length;i++)if(as[i].firstChild.nodeValue=="Nyheder")as[i].parentNode.style.clear="left";
}
</script>

...  hvis det giver problemer, hvad så med:

<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].firstChild.nodeValue=="Nyheder")as[i].parentNode.style.clear="left";
}
</script>
Avatar billede mclemens Nybegynder
03. december 2009 - 20:11 #33
og så burde linjen
a[href="/Nyheder.190.aspx"] {
clear:left;} kunne spares
Avatar billede mclemens Nybegynder
03. december 2009 - 20:40 #34
Hvis jquery skal benytttes, så kig evt. på
http://codingforums.com/showthread.php?t=120309
- ved ikke om #4 derinde måske vil hjælpe på dit problem.
Avatar billede theselfimages Nybegynder
03. december 2009 - 21:57 #35
Fedt du er på banen igen, beklager det med Java brug. Det var min fejl.

De 2 scripts du viser har igen effekt (sammenstiller menuen) med mindre dette står i CSS:

.navigation, .navigation_active {display:block;float:left;}
a[href="/Nyheder.190.aspx"] {
clear:left;}

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.
Avatar billede mclemens Nybegynder
03. december 2009 - 22:30 #36
Prøv

<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].firstChild)if(as[i].firstChild.nodeValue=="Nyheder")as[i].parentNode.style.clear="left";
}
</script>

(as[i].firstChild.nodeValue=="Nyheder")
rettet til
(as[i].firstChild)if(as[i].firstChild.nodeValue=="Nyheder")

... virker det ikke så lige til, så tester jeg lige hvad der skal rettes iløbet af inat / imorgen.
Avatar billede theselfimages Nybegynder
03. december 2009 - 22:48 #37
VI nærmere os...

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'>");

(hvis du kan bruge den oplysning til noget?)
Avatar billede mclemens Nybegynder
03. december 2009 - 23:14 #38
Tænker lige på den iløbet af imorgen,
men hvis du finder løsningen så kast
lige en kommentar herind ;o)
Avatar billede theselfimages Nybegynder
03. december 2009 - 23:22 #39
Right on!
Avatar billede mclemens Nybegynder
04. december 2009 - 21:46 #40
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>
Avatar billede mclemens Nybegynder
04. december 2009 - 21:46 #41
(kønt er scriptet dog ikke...)
Avatar billede theselfimages Nybegynder
05. december 2009 - 14:13 #42
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.
Avatar billede mclemens Nybegynder
05. december 2009 - 16:02 #43
<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).
Avatar billede theselfimages Nybegynder
06. december 2009 - 00:56 #44
Fandeme så! Nu virker det perfekt! Også i IE7 :-)

Jeg brugte det nederste script og fik det indsat lige efter sidste menupunkt:
<a href="/Kontakt.128.aspx" class="navigation">Kontakt</a>

og det bevirker (som du skrev) også at menu ikke hopper overhovedet. Super!

Tusind tak for din kæmpe indsats. Den var lidt en udfordring.
Post et velfortjent svar.

Takker,
Hilsen Lars
Avatar billede mclemens Nybegynder
06. december 2009 - 01:38 #45
Velbekom, svar kommer her
- og tak for point :)
Avatar billede theselfimages Nybegynder
06. december 2009 - 01:45 #46
Ja, selv tak! :-)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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