html - Divs arrangement in the page -
i getting started css , html. have been trying quite long arange divs in page. creating recipes page , want this: each recipe has title, in left side image , in right ingredients , preparation steps.i used xml document , xsl sheet display these elements. having troubles displaying right side. share css code , xsl.
css :
p { color: green; } .ingredients-header { color:#fff; font-weight:bold; font-size:120%; background-color:#339933; position:relative; left: 350px; } .ingredients { position:absolute; left: 400px; } .preparation-header { color:#fff; font-weight:bold; font-size:120%; background-color:#339933; position:relative; top: 150px; left: 350px; } .preparation { position: relative; left: 400px; } xsl:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns="http://www.w3.org/tr/xhtml1/strict"> <xsl:template match="/"> <html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> <title>recipe</title> </head> <body> <xsl:apply-templates select="/recipes/recipe"/> </body> </html> </xsl:template> <xsl:template match="recipe"> <h2><xsl:value-of select="./name"/></h2> <div class="ingredients-header"> <h3>ingredients:</h3> </div> <div class="ingredients"> <p><xsl:apply-templates select="./ingredients"/></p> </div> <div class="preparation-header"> <h3>preparation steps:</h3> </div> <div class="preparation"> <ol><xsl:apply-templates select="./instructions"/></ol> </div> </xsl:template> <xsl:template match="ingredients/ingredient"> <xsl:value-of select="./qty"/><xsl:text> </xsl:text> <xsl:value-of select="./unit"/><xsl:text> </xsl:text> <xsl:value-of select="./food"/> <br /> </xsl:template> <xsl:template match="instructions/instruction"> <li><xsl:value-of select="."/></li> </xsl:template> </xsl:stylesheet> i output this:
can help me arrange these divs in order have preparation steps under section?
try changing .ingredients position:relative
.ingredients { position:absolute; left: 400px; } try removing top: 150px; .preparation-header too
.preparation-header { color:#fff; font-weight:bold; font-size:120%; background-color:#339933; position:relative; left: 350px; } html css xml xslt
No comments:
Post a Comment