Auto Resize Header and Content Within?
I want a header that is always 20% the height of the webpage, so that when I resize, the porportions always stay this same. This isn't so hard to figure out. However, I also want the content within the header (buttons, etc.) to resize. Can anybody help? Here's my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #191919;
background-image: url(../Images/repeat.jpg);
background-repeat: repeat;
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
.oneColElsCtrHdr #container {
width: 100%; /* the auto margins (in conjunction with a width) center the page */
border: 0px none #000000;
text-align: center; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #FFFFFF;
background-image: url(../Images/repeat.jpg);
background-repeat: repeat;
color: #FFC;
.oneColElsCtrHdr #header {
width: 100%;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color: #DDDDDD;
background-image: url(../Images/headerwlogo2.jpg);
.oneColElsCtrHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
background-attachment: scroll;
background-image: url(../Images/headerwlogo2.jpg);
background-repeat: no-repeat;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
height: 140px;
width: 100%;
.oneColElsCtrHdr #mainimage {
background-color: #FFFFFF;
width: 100%;
margin: 0px;
padding: 0px;
.oneColElsCtrHdr #yellowbar {
background-color: #FFFFFF;
width: 100%;
background-image: url(../Images/seperatebar.jpg);
background-repeat: repeat-x;
height: 15px;
.oneColElsCtrHdr # {
background-color: #FFFFFF;
width: 100%;
.oneColElsCtrHdr #mainContent {
background-color: #FFFFFF;
background-image: url(../Images/repeat.jpg);
background-repeat: repeat;
padding-top: 0;
padding-right: 22px;
padding-bottom: 0;
padding-left: 22px;
.oneColElsCtrHdr #footer {
padding: 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
.oneColElsCtrHdr #footer p {
margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
background-image: url(../Images/footer.jpg);
background-repeat: repeat-x;
height: 140px;
width: 100%;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">About the Project</a>
<ul>
<li><a href="#">Project Overview</a></li>
<li><a href="#">The Collaborators</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Earthwork Sites</a>
<ul>
<li><a href="#">About the Sites</a></li>
<li><a href="#">Media Gallery</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Interactive Badges</a>
<ul>
<li><a href="#">Badge Overview</a> </li>
<li><a href="#">Lifelong Learning</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Get Involved</a>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
</div>
<div id="mainimaget">
<img src="../Images/mainillustrationbig.jpg" width="100%" height="auto" />
<!-- end #mainContent --></div>
<div id="yellowbar">
</h1>
<!-- end #mainContent --></div>
<div id="mainContent">
<h1> WELCOME TO EARTHWORKS</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<p> </p>
<!-- end #mainContent --></div>
<div id="footer">
<p> </p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
I want a header that is always 20% the height of the webpage,
Web Page height is ALWAYS determined by content; not explicit values. If I increase/decrease text size in my browser, it will change the height of your page. So page is height is an unknown variable.
I also want the content within the header (buttons, etc.) to resize.
Why do you think you need this? Your browser's Zoom feature is fully capable of re-scaling images and text on screen.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/
Similar Messages
-
AjaxControlToolkit AccordianPane - Header and Content
I am using the AjaxControlToolkit and during a postback I need to view the inner HTML of the header and content properties within each accordian pane. So far, all attempts to do this have failed. Is this doable?
thanks
Scott BlandHi Scott,
In my opinion, this thread is related to ASP.NET forum. So please post thread on that forum for more effective response. Thank you for understanding. Please refer to the following link.
http://forums.asp.net/.
Regards,
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey. -
Gap between header and content in IE
Hello All
I subscribed to a post with this basic same question but I
never got a notification if it got answered or not
I all of a sudden have a gap between the header and content
on this site
http://www.michaelsondesign.com/guestVision/
- I am not sure why , it started when I added to the menu on the
left
Any ideas?
Thanks
RobAdd this to your CSS
img {vertical-align:top;}
You cannot lose until you give up !!!
"BOC_RUSH" <[email protected]> wrote in
message
news:fsn546$nrm$[email protected]..
> Hello All
>
> I subscribed to a post with this basic same question but
I never got a
> notification if it got answered or not
>
> I all of a sudden have a gap between the header and
content on this site
>
http://www.michaelsondesign.com/guestVision/
- I am not sure why , it
> started
> when I added to the menu on the left
>
> Any ideas?
>
> Thanks
>
> Rob
>
> -
Dynamic flv player with auto resize based on content
Hi,
I would like to build a .flv player which can accommodate 7
different video sizes.
This will probably be made using php and xml to dynamically
control content.
What I would like to know is if and how it is possible to
have a holder.swf (just looks for variables to display the flv)
that can automatically resize based on the flv dimensions. I dont
want any kind of browserscreen resolution resizing of content, just
an swf that will change its size from say 320x240 to 450x253
depending on the dynamically loaded flv.The same thing has been reported for the T410. You can see how to fix it here:
http://forums.lenovo.com/t5/T400-T500-and-newer-T-series/T410-unstable-screen-brightness/m-p/212492#...
It appears to occur anytime you are on battery and the intel graphics power plan is set to anything other than 'maximum performance.' It's pretty subtle, but really annoying when it happens. -
Resize frame and contents at the same time
Is there a keyboard shortcut that can be used to resize the frame and the contents of the frame at the same time? Command + Option + < > works but only resizes the frame or the contents, not both at once.
Ah yes: google a bit.
This has been discussed a few dozen times and there are scripts around (eg. by Sandee Cohen) to fill the gap. -
JTable resize header (and change mouse in between headings)
Hi,
I notice that i have the ability to resize my headings in the JTable but is there a way to get the mouse pointer to indicate something similar to what Excel does when you put your mouse over the divide (between two heading cells)?Here's my simple test program:
import java.awt.*;
import javax.swing.*;
import javax.swing.table.*;
public class TableTest2 extends JFrame
public TableTest2()
JTable table = new JTable(3, 3);
table.setPreferredScrollableViewportSize(table.getPreferredSize());
JScrollPane scrollPane = new JScrollPane( table );
getContentPane().add( scrollPane );
public static void main(String[] args)
TableTest2 frame = new TableTest2();
frame.setDefaultCloseOperation( EXIT_ON_CLOSE );
frame.pack();
frame.setLocationRelativeTo( null );
frame.setVisible(true);
} -
Resize frame and content proportionately
Hello
When i try to use Selection tool+Shift+Command–drag in mac or Selection tool+Shift+Ctrl–drag in PC
to resize an image or some text proportionately it doesn't seem to work like in illustrator, indesign... it does resize but not proportionately.
Is it possible to have the same shortcuts like this one in Adobe Muse? it will make it easier to place images and change size after.
Thank you.Hi Maria
It works just the opposite of what you are familiar with. Proportional scaling is built in, just drag a corner without holding any keyboard buttons down. To scale disproportionately you use the keyboard keys
hope that helps,
Michael Riordan
Owner/Adobe Certified Instructor
Digital DesignLab
www.learnadobesoftware.com -
Hi All
I am having a small requirement where my normal java program has to invoke a SOAP client and that will communicate the SOAP server by sending two xml files.
first xml contains the attributes/properties of the content and
second xml contains the the actaul content.
here i have to send the attributes in the SOAP header and content as the SOAP body.
How can i achive this. I am very new to SOAP protocal.
please suggest me some links/documents and some guide lines to make this a success.Hi All
I am having a small requirement where my normal java program has to invoke a SOAP client and that will communicate the SOAP server by sending two xml files.
first xml contains the attributes/properties of the content and
second xml contains the the actaul content.
here i have to send the attributes in the SOAP header and content as the SOAP body.
How can i achive this. I am very new to SOAP protocal.
please suggest me some links/documents and some guide lines to make this a success. -
TableView auto resize columns based on header text width or cell content
Is there a method on the tableview or tablecolumn to automatically resize based on the content of the hearder or data?
If not what approach can used used with JavaFX to calculate the string width based on the current font?The table column size is inconsistent, I set the columns in the table view and the items in the initialize method. I execute a service and task from a button action that loads data into the list, if I don't reset the columns in the table view in the succeed method then each column is the same width regardless of the content in the cells. If I do reset the table columns in the succeed method then the columns are resized based on content.
I don't think it should be a requirement to reset the columns just to get the column widths to set based on the content in the cells. Is there a method on the table column or view that will resize the cells based on the cell content? I would prefer the largest value; column header content or the longest cell content for a column. -
Header and Footer Resize Issues
When I create a Header and Footer look in adobe edge I go to resize the width of the page and the header images and texts resize fine but the images and text in the Footer area do not resize and they end up moving all around the screen.
Hi Siclaria,
Can you let us know if negative margins are in effect for the footer elements? (Do you -ve value in the margin field?)
If something has a negative margin, as you resize your canvas, the element will move to the right instead of the left. In your case, it looks like some elements have negative margin values and some are fine.
An easy solution is to "Edit -> Add Parent" around those elements. For example: Select "Industries", "Education", "Healthcare", etc. and do an Edit -> Add Parent.
This makes the "set of elements" move to the left (because they are contained within a parent) and will be closer to the behavior you expect.
Cheers,
Anirudh -
White space between header and main content
Hello all! I have a 25-27px white space between my header and
main content. I read through fixes in the forum and took out any
height that would effect this gap. I still can't get rid of this
white space. Your help is greatly appreciated! Here's the Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and
padding of the body element to account for differing browser
defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5*
browsers. The text is then set to the left aligned default in the
#container selector */
color: #000000;
.oneColElsCtrHdr #container {
width: 46em; /* this width will create a container that will
fit in an 800px browser window if text is left at browser default
font sizes */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a
width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center
on the body element. */
.oneColElsCtrHdr #header {
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: #FFFFFF;
.oneColElsCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the
#header div will avoid margin collapse - an unexplainable space
between divs. If the div has a border around it, this is not
necessary as that also avoids the margin collapse */
padding: 0px 0; /* using padding instead of margin will
allow you to keep the element away from the edges of the div */
.oneColElsCtrHdr #mainContent {
background: #FFFFFF;
padding-top: 0;
padding-right: 0px;
padding-left: 0px;
.oneColElsCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment
of the elements in the divs that appear above it. */
background:#DDDDDD;
.oneColElsCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in
the footer will avoid the possibility of margin collapse - a space
between divs */
padding: 0px 0; /* padding on this element will create
space, just as the the margin would have, without the margin
collapse issue */
.style4 { font-family: "Fiolex Girls", "Arial Narrow";
color: #FF0000;
font-size: xx-large;
font-style: italic;
.style6 {color: #FF0000}
.style7 { color: #000000;
font-size: x-small;
.style9 {color: #FF0000; font-family: Arial, Helvetica,
sans-serif; }
-->
</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
position:static;
width:525px;
height:250px;
z-index:1;
float: left;
border-bottom-color: #000000;
border-bottom-style: solid;
border-top-width: thin;
border-bottom-width: thin;
border-color: #000000;
#apDiv3 {
position:static;
width:500px;
height:0px;
z-index:1;
left: 465px;
top: 410px;
float: right;
.style14 {
font-size: medium;
font-style: italic;
font-weight: normal;
.style15 {font-size: small}
-->
</style>
<link href="p7hscroller/s7/p7HSM07.css" rel="stylesheet"
type="text/css" media="all" />
<script type="text/javascript"
src="p7hscroller/p7hsmscripts.js"></script>
<style type="text/css">
<!--
#apDiv7 {
position:static;
width:737px;
height:0px;
z-index:2;
bottom: 0px;
border-bottom-style: solid;
border-bottom-width: thin;
.style16 {font-size: x-small}
-->
</style>
<!-- Do not remove the line below!!! It is required for
the XML Flash Slideshow v3. -->
<script type="text/javascript"
src="slideshow.js"></script>
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<pre><span
class="style4">US-AsianMates</span><span
class="style6">.com</span> <strong><span
class="style9">JOIN FOR FREE <span
class="style7">OR</span> MEMBER LOG
IN</span></strong>
</pre>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="#"
class="style16">HOME</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">ABOUT US</a></div>
</li>
<li>
<div align="center"><a href="#"
class="style16">WHY JOIN US?</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">VISA SUPPORT</a></div>
</li>
<li>
<div align="center" class="style16"><a
href="#">EVENTS</a></div>
</li>
</ul>
<pre><!-- end #header -->
</pre>
</div>
<div id="mainContent">
<div id="apDiv1"><img
src="Images/Outdoor_Bride1.jpg" alt="Bride" name="Bride"
width="525" id="Bride" /></div>
<p> </p>
<p><br>
</p>
<pre>
</pre>
<table width="200" border="1" align="left">
<tr>
<td><img src="Romantic_Kiss.jpg" alt="VISA"
name="VISASUPPORT" width="200" id="VISASUPPORT" /></td>
</tr>
<tr>
<td><img src="Surfing_At_Home.jpg" alt="JOIN"
name="WHYJOIN" width="200" id="WHYJOIN" /></td>
</tr>
</table>
<pre></pre>
<div id="apDiv3">
<div align="center">
<div align="left">
<pre class="style14"> <strong>LIVING
PROOF</strong>
<span class="style15">"12 YEARS AGO I WENT TO
THE PHILIPPINES IN HOPES
OF FINDING MY FUTURE WIFE. 11 YEARS LATER,
I AM HAPPILY MARRIED! WE ALSO HAVE AN ENERGETIC
5 YEAR OLD SON! DREAM IT, LIVE IT! IT CAN
HAPPEN TO YOU ON US-ASIANMATES.COM
CHRIS"</span></pre>
</div>
</div>
</div>
<pre> </span>
</pre></pre>
<p><!-- end #mainContent -->
<br>
<pre>
</pre>
<div id="apDiv7"></div>
<div align="center">
<pre><!-- Begin XML Flash Slideshow v3 -->
<script type="text/javascript">
// <![CDATA[
XMLFlashSlideshow_v3({swf:'slideshow.swf',w:'580',h:'140',redirect:'',usePreloader:'true', xml:'slideshow_data0.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml% 20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%3Cstyles%3 E%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=% 2270%22%20iconWidth=%2250%22%3E%3C/Preloader%3E%3CPreloaderLabel%20font=%22Verdana%22%20si ze=%2210%22%20color=%22#666666%22%20bold=%22false%22%3E%3C/PreloaderLabel%3E%3CBackground% 20backgroundColor=%22#FFFFFF%22%20backgroundAlpha=%22100%22%20bevelColor=%22#FFFFFF%22%20b evelStrength=%2270%22%20borderWidth=%222%22%20borderColor=%22#000000%22%3E%3C/Background%3 E%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%2 0alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22%3E%3C/LoaderA nimation%3E%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22true%22%20labelPlacement= %22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22%3E%3C/DataLoader%3 E%3C/styles%3E%3Clocalization%3E%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading% 20Data...%22%3E%3C/text%3E%3C/localization%3E%3Cfonts%3E%3Cfont%20id=%22loader_text%22%20n ame=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22fals e%22%20selectable=%22false%22%20align=%22left%22%3E%3C/font%3E%3C/fonts%3E%3C/slideshow%3E '});
// ]]>
</script>
<!-- End XML Flash Slideshow v3 -->
</pre>
</div>
<pre>
</pre>
<pre> </pre><!-- -->
<pre> </pre>
</div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>"phillychris" <[email protected]> wrote in
message
news:[email protected]...
> Yep, it was the 1 pre tag creating the gap. So why is
this page a
> disaster, Tim?
Just because something is created in DW CS3 doesn't mean it's
not a
disaster, any more than using DeWalt power tools guarantees
that my
carpentry won't be a complete mess. The software is not a
replacement for
skills. It is a tool; your workflow and understanding of HTML
and CSS is
what allows you to use DW effectively.
So why did I call this page a disaster? When I see all that
extra markup,
spans, and inline tags, I shudder. It's way too hard to
troubleshoot. You're
not doing nearly enough with descendant selectors; instead,
most of your
code is inline, despite a huge CSS file.
Just one example: individual li tags with div align="center"
inside of them.
Way overkill. If you're centering all the li text in a given
list, control
it with CSS and kill all that extra markup.
E.g.
.MenuBarHorizontal li { text-align:center; }
In fact, if all there is in that .MenuBarHorizontal is the
list, you don't
even need to specify the list in the CSS. Just do:
.MenuBarHorizontal { text-align:center; }
Now you don't need div tags inside your li at all.
And if all of those a tags in that menu are going to be
.style16 class,
don't specify it on each link. In fact, don't even have a
.style 16 class.
Heck, since it's just specifying font size, you don't need to
target the a
tag at all. Just add font-size:x-small; to the
.MenuBarHorizontal ruleset I
gave you above.
The above are just examples from a quick glance at your code.
On the whole,
your markup and approach to styles are largely wasting the
power and point
of CSS.
In addition, several styles spanned onto one line of text...
a sure sign
that either you are using far too many styles to make design
sense, or else
you've got styles that overlap each other.
Here's my advice: Until you get a better handle on CSS, don't
style things
as you go. Forget styles altogether at the start. Create a
very clean HTML
markup and put ID and class selectors on things you know will
need them.
Preferably, place the HTML elements in the order you would
want your page
read if styling did not even exist, nesting elements where
necessary.
After you have created all the HTML structure, then go back
and style the
elements via CSS only. You will end up with less page weight
and far cleaner
code to decipher, not simply in terms of length but in terms
of conflicts
and redundancies.
If you're really insistent on styling things as you go, at
least do this:
don't create a new style every time you want to accomplish
something. Create
CSS rules for IDed containers and container classes. Then as
you go along
and are about to create a style, ask yourself where you are
and what all
this new rule needs to apply to. Specify the rule there,
under the selector
you've already created. Then you won't have .style1 -
.style16 like you do
now, and you won't have all that inline mess of code to sort
through.
Finally - as you create your CSS, discipline yourself to
avoid style spans.
They are necessary on the odd occasion, but very rarely.
Think semantically
(i.e. purpose of the style point you're making at a given
time).
For example, if you're tempted to create a span in order to
put something in
bold red, ask yourself: "Why?" Generally, it means you want
to place special
emphasis or strength on that. Well, in that case you don't
need a span. You
need to be using the proper tag, such as <em>
(emphasis) or <strong>. Then
you can style that tag in CSS. That way, what you have in
your page actually
makes sense apart from the style, and as a bonus you can
apply or edit your
style easily.
Tim G.
http://www.pactumweb.com
http://www.shortordersite.com
Be smart:
http://www.pactumweb.com/client/tips.php -
Auto-Creation of chapter links within the content directory
Hello,
I have a Microsoft Word document with various chapters and a content directory at the beginning. After creating an Adobe PDF file with the Acriobat 9.0 Pro Office PlugIn I want to link the various chapters within the content directory with their chapters below in the document.
Is this only possible manually with the link tool or is there an automated way to do this?
Thanks for your help,
DevidIn fact it was originally a StarOffice Text document with a content directory, which was saved as word file.
What do you mean with "heading and related styles" within Word? Do I have to recreate the content directory in Word?
In the Acrobat help there is an option, which is "Convert cross-references and table of contents to links": But this option is only available in Wird 2002 and 2003, but not in 2007. Maybe in WOrd 2007 it will be converted automatically. -
How to place content between header and tabs?????
i have header part which has to be constant through out the portal but below that i have 3 links
like I AM employee,employer,broker..
which has to be shown only in home page above tabs..
how can i achieve this..
how to place content between header and tabs..:(kindly help..Hi Samiran
Try these approaches and see if that works.
1. In the Header Section, you header footer shell and add a Header Portlet. This Header Portlet associated JSP file will have all static content in the top section. In the bottom section, add these 3 links say to right hand corner. Show these links only based on some request property like isHome. Now for the main book having Home and other page associate a BackingFile. Within this backing file in the lifecycle methods like preRender or handlePostBack, get instance of BookManager and all the pages and see which page is Active. For that active page check its page definition label which will be always unique. IF the page def label is like home_page_def (this is page def label you give for home page), then set the key value in the request property like isHome=true. By only doubt is after Book backingfile is triggered, the header has to be reloaded, because only then it can pick up the request attributes.
2. Create a brand new portlet like HomePageLinks portlet. Make its Title Property Not Visible, and other user interface properties like NoBorder, NoTheme etc. The associated JSP will have the 3 links you mentioned right aligned. You can use css styles to make it right etc. Now drop this portlet in the Header Shell area. You already have HeaderPortlet in the top, below that you will have this HomePageLinks portlet. Now associate a backing file for this Portlet to show, only if the Books current active page is Home page by comparing the def label etc as mentioned above.
In both scenarios, only concern is when we click on different Pages, the entire portal has to be rendered right from the Top Header. Only then the backing file will set the key, and the HomePageLinks portlet can show or hide accordingly.
Try firing an Event when the Home page is clicked. This listener for this Event can be the HomePageLinks Portlet. I guess Event mechanism should work irrespective of where the portlet is placed. In the event listner, see if you can show/hide this portlet.
The only challenge is Header section needs to reloaded everytime you click on a Tab.
Start putting some backing files and System.out.printlns to see if the Header section gets reloaded on click on any Tabs.
These are just my thoughts over the top of my head. Other forum users can have better alternatives or a different version of above approaches.
Thanks
Ravi Jegga -
JTabbedPane, switch of auto resizing of the tab header possible?
Hi,
Is it possible to prevent the tab header from auto resizing?
In this code the tab "Page 1" fills the whole row at start up, but I would like to prevent it from taking more space than needed.
import java.awt.*;
import javax.swing.*;
class TabbedPaneExample
extends JFrame
private JTabbedPane tabbedPane;
private JPanel panel1;
private JPanel panel2;
private JPanel panel3;
public TabbedPaneExample()
// NOTE: to reduce the amount of code in this example, it uses
// panels with a NULL layout. This is NOT suitable for
// production code since it may not display correctly for
// a look-and-feel.
setTitle( "Tabbed Pane Application" );
setSize( 140, 200 );
setBackground( Color.gray );
JPanel topPanel = new JPanel();
topPanel.setLayout( new BorderLayout() );
getContentPane().add( topPanel );
// Create the tab pages
createPage1();
createPage2();
createPage3();
// Create a tabbed pane
tabbedPane = new JTabbedPane();
tabbedPane.addTab( "Page 1", panel1 );
tabbedPane.addTab( "Page 2", panel2 );
tabbedPane.addTab( "Page 3", panel3 );
topPanel.add( tabbedPane, BorderLayout.CENTER );
public void createPage1()
panel1 = new JPanel();
panel1.setLayout( null );
public void createPage2()
panel2 = new JPanel();
panel2.setLayout( new BorderLayout() );
public void createPage3()
panel3 = new JPanel();
panel3.setLayout( new GridLayout( 3, 2 ) );
// Main method to get things started
public static void main( String[] args )
// Create an instance of the test application
TabbedPaneExample mainFrame = new TabbedPaneExample();
mainFrame.setVisible( true );
}Edited by: user6102378 on 2010-okt-07 06:51Unfortunately, the answer seems to be "no" - looks like the exact behaviour is even different across different LAFs. Nothing short of re-writing the layout code in the xxTabbedPaneUI will help.
Just curious: how comes that we have so many tabbedPane related questions recently?
Cheers
Jeanette -
Dear all,
I have a input that looks like this:
HeaderKeySomeHeaderInformationItemKeySomeItemInformationItemKeySomeItemInformation...
Here's the actual input
TEHGMESS0026000000288S0001TEI2____026200006112410400000000 18010000000000 00126000000000126000120600000000002000000000 000WESTMONOBERTBE2014052309422408120003 000000000000000000000000000000JTEI2____026200006112410400000000 19010000000000 00126000000000126000120600000000002000000000 000WESTMONOBERTBE2014052309422408120003 000000000000000000000000000000J
HeaderKey = TEHGMESS
ItemKey = TEI2____
Is it possible to process this via MessageTransformBean (my actual scenario is JMS to IDoc)? I already tried but I only succeeded when having new lines in my input to separate between Header and (multiple) Items.
So when the input and my configuration looks like below it works, but when I only have a single row input it doesn't work, even when specifying xml.recordHeader.endSeparator = '0' / xml.recordItem.endSeparator = '0'. I even tried xml.endSeparator = '0' but no luck.
Input that works
TEHGMESS0026000000288S0001
TEI2____026200006112410400000000 18010000000000 00126000000000126000120600000000002000000000 000WESTMONOBERTBE2014052309422408120003 000000000000000000000000000000J
TEI2____026200006112410400000000 19010000000000 00126000000000126000120600000000002000000000 000WESTMONOBERTBE2014052309422408120003 000000000000000000000000000000J
Matching configuration that works for input which structures are delimited by new line.
Paramentername
Parametervalue
Transform.Class
com.sap.aii.messaging.adapter.Conversion
Transform.ContentType
text/xml;charset=utf-8
xml.conversionType
StructPlain2XML
xml.documentName
MT_TEI2Split
xml.documentNamespace
http://hansgrohe.com/pi/MQ/TEI2/10
xml.keyFieldName
SATZARTKey
xml.keyFieldType
CaseSensitiveString
xml.processFieldNames
fromConfiguration
xml.recordHeader.fieldFixedLengths
8,4,9,1,4
xml.recordHeader.fieldNames
SATZARTKey,SATZLENHG,NUTZLEN,MESSAE,MESSNR
xml.recordHeader.keyFieldValue
TEHGMESS
xml.recordItem.fieldFixedLengths
8,4,2,10,8,19,3,3,2,10,6,2,10,6,2,10,6,6,6,6,6,11,9,2,10,6,2,10,6,3,4,3,7,14,8,1,31
xml.recordItem.fieldNames
SATZARTKey,SATZLEN,BUCHART,TRNR,ANDGNR,MITEM,TEIVARI,BSTSTATU,REFTYP,ORNO,POS,REFTYP1,ORNO1,POS1,CHATYP,CHARGE,CHAPOS,ABBVONL,ABBNACH,ZUBVONL,ZUBNACH,I2MENG,I2BUNR,REFTYPN,ORNON,POSN,REFTYP1N,ORNO1N,POS1N,BSTSTATN,ABUSERAB,ABUSERFN,ABUSERNA,I2TIME,I2LIDNR,I2FMCODE,FILLER
xml.recordItem.keyFieldValue
TEI2____
xml.recordsetName
records
xml.recordsetStructure
recordHeader,1,recordItem,*
Any clues on this? Is it even possible to have multiple structures in one row? Many thanks in advance
JensSAP came back to me with this answer:
First, I would like to point the documentation for Message Transform
Bean (MTB) in 7.4:
http://help.sap.com/saphelp_nw74/helpdata/en/57/0b2c4142aef623e10000000a155106/content.htm?frameset=/en/57/0b2c4142aef623e10000000a155106/frameset.htm¤t_toc=/en/45/0ea2de423c2d6be10000000a11466f/plain.htm&node_id=18
As it is written at the beginning of this document, MTB is used to
call classes written for the Plain Adapter Engine. So you may find
additional documentation about the parameters for convertion in the
documentation of the Plain Adapter Engine
(http://help.sap.com/saphelp_nw74/helpdata/en/0d/00453c91f37151e10000000a11402f/content.htm?frameset=/en/1b/d5ef3b1ad56d4fe10000000a114084/frameset.htm¤t_toc=/en/75/246b3de666930fe10000000a114084/plain.htm&node_id=11).There it is written that the structures by default are
arranged line-by-line. The endSeparator just adds additional character
string as a separator after the last column in a row.
I hope that this answers your question. MTB expects the data to be
structured line by line.
You may add a custom module, which transforms the message in the
expected format.
If you have a look at the second link there's even a more precise wording that multiple structures within one line are not supported:
xml.NameA.endSeparator
Even if no specification is made here, a line break must follow since substructures are always expected as a line of the document.
Bottom line is that it's not supported by now and verfied by me with PI 7.4 SP5
Many thanks to Ambrish, Amit and Hareesh for the valuable input. Will probably try to work things out for now following Ambrish's / Hareesh's suggestion as this seems easier to implement. Amit's proposal with a dedicated module however would probably be the more polished solution.
Cheers
Jens
Maybe you are looking for
-
Want to search a word in a column multiple times ????
Hello All, Want to search a word in column and after that word want to read the values till i encounter blank cell, uptill this i could get the code but then in same column again i have to search for same word and again start reading. In short if i
-
Count the number of lines in each file in a directory
Hello, I would like to count the number of lines for each file in my directory and subdirectories. I wonder how can I count the lines of the specified files? Here is the program which is listed the files in the specified directory:
-
Min-Max Planning Generating Purchase Requisitions
We have been using min-max planning for a while and scheduling the min-max planning report (planning level: organization) to run every evening to generate a purchase requisition. Of late we have some items that are showing a reorder quantity but not
-
How to create new user for OBIEE presentation service
Hello Guys I now only have 2 users on my OBIEE, demo1, demo2.. Now I'd like to create a new user call A and make this new user able to log on to OBIEE presenation service.. So I went to the RPD admin tool and created new user there and gave password.
-
How has access.log file configured in WebLogic server 10.0?
1.) I am using BEA Weblogic 10.0 and my access.log is not getting updated. 2.) I also need any information as to how this Webblogic server forms chunks (ex....access00011.log,access00012.log) because i have a software called AWStats which merges all