Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.
By wqr786 on
I have an image that I'm calling from my directory, and using some Style codes in the Page content that I have pasted below. This seems to be working perfectly but when I promote the page to front page, the code breaks. On the front page, the style tag runs, and I don't know what happens but the style tag or code is not processed further and suddenly other Drupal based HTML is processed. look below to have a better understanding:
<style type="text/css">
#custom-design {
height: 480px; /* height */
background: url(images/Start-Designing-Page-2.jpg) no-repeat; /* set the background image, no repeating */
}
ul #linkmenu, #linkmenu li {
padding: 0; margin: 0;
list-style: none;
}
ul #linkmenu {
float: left;
height: 0; /* these two lines fix that extra whitespace problem on the layout */
}
#linkmenu li {
font-family: Times New Roman, Times, Georgia, sans-serif;
position: relative;
width: 100px;
}
.n-trophies {
top: 35px;
left: 21px;
font-size: 38pt;
}
.n-plaques {
top: 75px;
left: 21px;
font-size: 38pt;
}
.n-medals {
top: 125px;
left: 21px;
font-size: 40pt;
}
.n-sportinggoods {
top: 170px;
left: 21px;
font-size: 24pt;
}
.n-banners {
top: -160px;
left: 440px;
font-size: 40pt;
}
.n-signs {
top: -135px;
left: 470px;
font-size: 48pt;
}
.n-promotional {
top: -100px;
left: 470px;
font-size: 24pt;
}
.n-tshirts {
top: -60px;
left: 450px;
font-size: 44pt;
}
#linkmenu li a {
text-decoration: none;
background: none;
}
#linkmenu li a span {
visibility: hidden;
}
</style>
<div id="custom-design">
<ul id="linkmenu">
<li class="n-trophies"><a href="/AAA-Trophy"><span>Trophies</span></a></li>
<li class="n-plaques"><a href="/Plaques"><span>Plaques</span></a></li>
<li class="n-medals"><a href="/Medals"><span>Medals</span></a></li>
<li class="n-sportinggoods"><a href="/Sporting-Goods"><span>Sporting Goods</span></a></li>
<li class="n-banners"><a href="/Banners"><span>Banners</span></a></li>
<li class="n-signs"><a href="/Signs"><span>Signs</span></a></li>
<li class="n-promotional"><a href="/Promotional"><span>Promotional Items</span></a></li>
<li class="n-tshirts"><a href="/T-Shirts"><span>TShirts</span></a></li>
</ul>
</div>
THE ABOVE CODE is the one I use in the Content page, but when promoted to front page, below is the code I get in viewing the Source Code...:
<div class="content"><style type="text/css">
#custom-design {
height: 480px; /* height */
background: url(images/Start-Designing-Page-2.jpg) no-repeat; /* set the background image, no repeating */
}
</div>
If someone can help it would be great. The page is at :
http://www.awardstrophies.com/Frontpage-Navigation-Test
Comments
2 things
1) Style blocks are not allowed inside the body of a document only in the head. So you are not supposed to put style in the content of a page the way you did it. You can put the style inline in an element like so:
<li style="font-family: Times New Roman, Times, Georgia, sans-serif; position: relative; width: 100px;">Stuff</li>That being said
2) It's the teaser itself that is killing you. The teaser functionality (which is what you see on the frontpage) counts every character. So if your teasers are set to say 200 characters all you get is the first little bit of your style block and not the rest of the node. Since this basically breaks the style block it also trashes the html code and basically the whole front page as now you have an unclosed illegal element.
Solved
Thanks, it was the teaser which was causing problem, when it came to 200 characters it ended the teaser, so the whole style code and Drupal's own html used to get jumbled up and cause problems.
I set Post Settings to unlimited characters and then re-Submitted the page, it solved the problem.
Thanks
Waqar
Yes it was the teaser
However like I said, style blocks are not valid markup in the body of any (x)html document. Read this --> http://www.w3.org/TR/REC-html40/present/styles.html#edef-STYLE
You should put that css in your style sheet or inline on the elements themselves.
I have a similar problem.
I have a similar problem. But where and how should this user css be "activated" if I use Page content type?
In the style sheet for your
In the style sheet for your theme.