Verticale streep in css

Status
Niet open voor verdere reacties.

KREEFTMEIJER

Gebruiker
Lid geworden
14 sep 2010
Berichten
188
Ik ben wat aan het veranderen in een template CSS.
Daar staat ergens een verticale streep, kan niet vinden waar die zit.
Het staat op www.toppages.nl/9999.html.
Onderaan staat een link CSS, daar vindt je de volledige CSS.
Groet,
Henk
 
Om te beginnen:
in dit soort situaties is het handig als je hulpmiddelen ter beschikking hebt.
De meest praktische zijn:
Webdeveloper add-on voor Firefox en Chrome
http://chrispederick.com/work/web-developer/
en
de Firebug add-on
https://addons.mozilla.org/nl/firefox/addon/firebug/


Als ik met de Webdeveloper in je CSS ga kijken,
dan vind ik (onder andere) de volgende regels:

Code:
Embedded Styles from http://www.toppages.nl/9999.html
/* See license.txt for terms of usage */
/** reset styling **/

.firebugLayoutBoxParent {
    border-top: 0 none !important;
    border-right: 1px [B]dashed [/B]#E00 !important;
    border-bottom: 1px dashed #E00 !important;
    border-left: 0 none !important;
    position: fixed !important;
    width: auto !important;
}


.firebugRulerH {
    border-right: 1px [B]dashed [/B]#BBBBBB !important;
}

Aangezien de lijn waar het over gaat "dashed" is (onderbroken streepjes)
zou het best eens een van de genoemde borders kunnen zijn.
 
Hoi-hoi,
De .firebugLayoutBoxParent en dergelijke die tecsman gevonden heeft, is geen style uit het stylesheet van de pagina, maar een tijdelijke style die er door Firebug is ingezet... *)
  • Howcome? Er is éérst met Firebug gekeken, toen werd Firebug uitgezet, en toen is met de Webdeveloper gekeken naar de styles.
  • Op zo'n manier krijg je de tijdelijke styles van Firebug erbij kado! ;)
  • Na gebruik van Firebug moet je altijd even de pagina refreshen, dan ben je daar van af.
Nu de streepjes.

Sherlock Holmes fase 1
Als eerste kan je inderdaad even in het gewone stylesheet kijken.
  • Online gaat dat het makkelijkst met de Webdeveloper Toolbar: je klikt op de knop "CSS" en in het uitrolvakje op "View CSS". Dan komen alle stylesheets (als er meer zijn), plus een eventueel gebruikt styleblok in de <head> van de pagina, keurig onder elkaar te staan.

  • Het begint met een rijtje "Embedded Styles" in de pagina zelf. Hm, ik had ook Firebug niet gerefreshed :eek: , want dit is alleen maar een rijtje Firebug-styles. Even refreshen en dan opnieuw!
  • Er is het gewone stylesheet www.toppages.nl/9999.css, een serie styles van facebook, en een stylesheet "Kh8H4M0Xcap.css".
  • De laatste wordt niet opgevraagd door de pagina zelf.
  • De facebook-styles ook niet, die zitten in een <iframe>, en daar zal het veel-letterige css ook vandaan komen. Vanwege het <iframe> is dit gescheiden van de normale css, dus daar hoeven we ons niet druk om te maken.
Blijft over de www.toppages.nl/9999.css.
Als je die even in de browser opent, en met "zoeken op deze pagina" kijkt of er ergens het woord "dashed" in staat, kom je van een koude kermis thuis: in het hele stylesheet is geen gestreept bordertje te vinden!
Dit is het dus in elk geval niet. - Einde fase 1.

Sherlock Holmes fase 2
Nu kan Firebug van pas komen (tabblad HTML).
Vanaf de <body> kan je achtereenvolgens alle elementen openklikken. Erboven zie je waar je zit.
  • Het is wat opvalt is dat er twee keer een <div id="footer"> in zit. Twee keer dezelfde id op één pagina is verboden! - De eerste zal "header" moeten heten.
Aan de rechterkant in het Firebug-venster zie je steeds welke styles zijn gebruikt voor het element dat je aan de linkerkant hebt geselecteerd.
  • Zo kan je het hele trappetje afdalen, tot je iets in een element tegenkomt dat de boosdoener kan zijn.
Aan het oplichten van de elementen kan je zien, dat het kwaad ofwel in de <div class="bg"> moet zitten, ofwel in de <div class="column1"> die daarbinnen zit.
  • We beginnen met de inspectie van de <div class="bg">.
  • Hé, daar zit een background-image in dat heet: dash.gif !
  • Als je er met de muis in het rechter FB-venster overheen gaat zie je dat dit gif'je het formaat 741*7px heeft. Dat kan kloppen, want het streeplijntje staat een flink stuk vanaf de linkerkant.
Boosdoener in de kraag gevat!
  • Nog een geluk dat hij "dash" in de naam had, want met bv "bg1507.gif" had je 'm niet zo gauw gevonden. :d
  • Dat pleit er nog maar weer eens voor, om herkenbare namen als bestandsnamen te gebruiken.
Met vriendelijke groet,
CSShunter
__________
PS
Diagnose: 1,5 minuut. :)

*) Het kleurtje #E00 (= #EE000) is ook geen grijstint, weet m'n tekenprogramma te vertellen.

roodkleurtje.png

#BBBBBB is wel een grijstint, maar niet het grijs van de streepjeslijn.
 
Laatst bewerkt:
Hoi-hoi,
De .firebugLayoutBoxParent en dergelijke die tecsman gevonden heeft, is geen style uit het stylesheet van de pagina, maar een tijdelijke style die er door Firebug is ingezet... *)
  • Howcome? Er is éérst met Firebug gekeken, toen werd Firebug uitgezet, en toen is met de Webdeveloper gekeken naar de styles.
  • Op zo'n manier krijg je de tijdelijke styles van Firebug erbij kado! ;)
  • Na gebruik van Firebug moet je altijd even de pagina refreshen, dan ben je daar van af.

Zo leer je elke dag wat bij. Dank je.
Ik vond het al zo apart....
 
Ja, ik denk dat ze het in Firebug ook wel zo hadden kunnen regelen dat de speciale Firebug-styles meteen werden uitgezet zodra je Firebug afsluit.

Maar ik kwam er achter dat het heel handig is dat dat niet zo is: nu kan je Firebug op een pagina uitzetten, terwijl de online gemaakte wijzigingen intact blijven. Dan heb je weer de volle schermhoogte tot je beschikking met de wijzigingen en al.

Tot je een refresh geeft, dan is alles weer bij het oude.
 
Laatst bewerkt:
Ik had nog nooit van Firebug gehoord, heb het inmiddels geinstalleerd en ga er verder op studeren.
Zal het resultaat laten horen.
•Het is wat opvalt is dat er twee keer een <div id="footer"> in zit. Twee keer dezelfde id op één pagina is verboden! - De eerste zal "header" moeten heten. ( hoe zet je dit in zo'n mooi licht blauw kader ?)
Ik heb de footer gekopieerd naar de header, het werkt prima maar begrijp dat het niet mag, ga proberen het om te bouwe.
 
Ik heb de footer gekopieerd naar de header, het werkt prima maar begrijp dat het niet mag, ga proberen het om te bouwen.
(een selectie zet je in zo'n blauw kadertje met het knopje
quote.png
)

Als je de id="footer" tot class="footer" maakt (voor de topbalk en de footer onderaan), en in de css van #footer maakt: .footer, ben je meteen klaar met het ombouwen.

Toelichting: een class mag je zoveel keer per pagina gebruiken als je wilt, een id is een persoonlijke identificatie voor één element, en mag dus maar één keer per pagina gebruikt worden.
 
Het ombouwen van #footer naar .footer werkt niet helemaal , moet ik alle #footer , ook li veranderen ??
Met Firebug gaat het prima, heb dan ook de dash gevonden.
Het lukt wel deze te verwijderen, maar verplaatsen lukt niet.
 
Inmiddels alle # footer veranderd in .footer veranderd , alles werkt en staat netjes op zijn plaats.
Nu de dash nog.
 
De streep

De streep is inmiddels wel gelokaliseerd, kan hem verwijderen maar nog steeds niet verplaatsen.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan