The problem is caused by setting the grid_4 and grid_4_last div to float. If I set them not to float, the "nav" div is inside the "wrap" div. But in this case the navigation is one over each other on the left side of the "wrap" div.I want it to be from left to right, next to each other.
Macro destroys my CSS style
Hi,
If I make only the HTML structure with CSS, everything is ok. When I insert umbraco field, everything is ok.But when I insert macros, it gets weird.
Here' the template:
div id="noJS">
<div class="backgroundTop">
<div class="wrap">
<div class="header">
<img src='<umbraco:Item field="SlikaLogo" runat="server"></umbraco:Item>'>
<h4><umbraco:Item field="HeaderText" runat="server"></umbraco:Item></h4>
</div>
<div class="nav">
<umbraco:Macro Alias="EblNav" runat="server"></umbraco:Macro>
</div>
</div>
</div>
<div class="background">
<div class="content">
<div class="leftCol">
</div>
<div class="line">
</div>
<div class="rightCol">
</div>
<div class="space10">
</div>
</div>
</div>
</div>
The "nav" div in not anymore part of the "wrap" div. It's under it.Here's the macro "EblNav":
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp " ">
<!ENTITY nbsp " ">
<!ENTITY middot "·">
<!ENTITY laquo "«">
<!ENTITY raquo "»">
<!ENTITY bull "•">
]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library"
exclude-result-prefixes="msxml umbraco.library">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template match="/">
<xsl:for-each select="$currentPage/ancestor-or-self::node/node [@level = 2]">
<div>
<xsl:attribute name="class">
<xsl:choose>
<xsl:when test="position() mod 4 = 1">
<xsl:text>grid_4 hoverable</xsl:text>
</xsl:when>
<xsl:when test="position() mod 4 = 2">
<xsl:text>grid_4 hoverable</xsl:text>
</xsl:when>
<xsl:when test="position() mod 4 = 3">
<xsl:text>grid_4 hoverable</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:text>grid_4_last hoverable</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<a class="scroll">
<xsl:attribute name="href">
<xsl:choose>
<xsl:when test="position() mod 4 = 1">
<xsl:text>#EBL</xsl:text>
</xsl:when>
<xsl:when test="position() mod 4 = 2">
<xsl:text>#Storitve</xsl:text>
</xsl:when>
<xsl:when test="position() mod 4 = 3">
<xsl:text>#ask</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:text>#contact</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<h3><xsl:value-of select="data [@alias = 'NaslovNavigacija']" /> <span class="lucida"> »</span></h3>
<xsl:value-of select="data [@alias = 'OpisNavigacija']" disable-output-escaping="yes"/> </a>
</div>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
Here's the CSS:
/* GENERAL */
/* ================================================================================= */
body {font-family:Georgia, "Times New Roman", Times, serif; margin:0; color:#000; font-size:16px;}
h1 {font-size:80px;}
h2 {font-size:48px;}
h3 {font-size:28px;color:#hhh;}
h4 {font-size:20px; margin-top:20px;}
p {font-size:16px; line-height:24px;}
ul {font-size:16px; line-height:24px;}
small {font-size:14px;}
a {color:#111;}
.clear {clear:both;}
.backgroundTop {width:100%; background-color:#fff;text-align: center; margin:0px;height:auto;}
.wrap {height:100%; text-align: left; margin-left: auto; margin-right: auto;top:0px;min-width:950px; max-width:1000px; padding:20px 40px 0 40px;background-color:#ddd;:}
.background {background-color:#eee; width:100%; text-align: center;height:400px;}
.wrapContent {margin:0 auto;min-width:950px; max-width:1200px; padding:20px 40px 0 40px;}
.content {margin:16px auto 0 auto; min-width:920px; max-width:1000px; padding:20px 40px; background-color:#EEE; height:300px; background-color:#287654;}
/*.space {height:120px;}*/
.space10 {height:10px;}
.line {width:12%; background-color:#456767; float:left;height:100%;}
/* GRIDS */
.grid_2 {width:48%; float:left; margin-right:4%;}
.grid_2_last {width:48%; float:left; margin-right:0;}
.grid_4 {width:22%; margin-right:4%; float:left; background-color:#285690;height:20px;}
.grid_4_last {width:22%;float:right;margin-right:0%;}
/* HEADER */
.header {text-align:center; margin-top:10px; height:auto; background-color:#786789;}
.header h1 {letter-spacing:-2px; word-spacing:10px; margin:10px 0 30px 0; line-height:1;}
.header h1 span {letter-spacing:-0.13em; padding-right:0.06em;}
.header h4 {padding:18px 0; border-top:4px double #CCC; border-bottom:4px double #CCC;}
.header h4 span {letter-spacing:-0.06em; padding-right:0.03em;}
/* NAVIGATION */
.nav {margin:45px 0 0 0;text-align: left;height:auto; background-color:#345456;}
.nav h3 {margin:0 0 13px 0;}
.nav a:hover h3 {color:#F00;}
.nav a:hover p {color:#111;}
.nav a:hover .lucida {color:#FFBFBE;}
.nav a:hover {cursor:pointer;}
.nav a:inactive {color:#CCC;}
/* FOOTER */
.footer small {font:12px/24px "Lucida Grande", Verdana, Tahoma;}
.footer {margin:60px 0 10px 0; text-align:center; color:#CCC;}
.footer {background-color:#CCC; margin:0; height:100px;}
/* ABOUT */
.leftCol {width:44%;float:left; background-color:#987987;height:100px;}
.rightCol {width:44%;background-color:#ffffff; float:left; height:100px;}
.contentBox {float:left;height:auto; background-color:#eee; width:100%;}
The problem is caused by setting the grid_4 and grid_4_last div to float. If I set them not to float, the "nav" div is inside the "wrap" div. But in this case the navigation is one over each other on the left side of the "wrap" div.I want it to be from left to right, next to each other.
Does it make any sense?THX for the help!
Uros
Hi Uros,
a common issue with Xsl scripts is that empty tags won't be closed properly by the browser when you use xml as output method. E.g. this
will throw your whole design off. This happens if the code in-between results in an empty string, like
What I tend to do therefore is to just add <xsl:comment /> at the bottom of the inner code so I get at least something in there, like
Might not be your issue, yet always good to check that it isn't.
Sascha
is working on a reply...