Wrapping Words
Hi,
I am about to write a routine to output several paragraphs of text to a file. The file can have up to 80 characters on each line and I need to parser the text so that the file does not cut any words apart. JTextArea has setWrapStyleWord and setLineWrap to wrap lines at word boundaries rather than at character boundaries. To save me writing a routine that likely has already been written and is faster than what I work out can anyone point me in the right direction? I cannot find anything appropriate in the JDK.
Thanks in advance, Richard.
The word wrap in JTextArea does not wrap based on number of characters, it takes into account the size of words when rendered in the current font.
Word wrapping by number of characters is pretty easy. Just go to position 80, then back up until you hit a space. If you don't find any spaces on the line, then just wrap at the end of the line.
Similar Messages
-
Tried composing an email today and words simply break at the end of the line and begin again on the next line. Unable to see what might cause words to break randomly rather than at natural breaks. Does anyone have any suggestions?
I'm getting this problem, too. It seems sporadic - I only notice it on longer emails, and it's always something that affects later paragraphs. So, the first 4 paragraphs of an email-in-progress wrap and break normally, but then paragraphs 5 and on break at the width of the window, splitting words down the middle at whatever point is at the edge.
Very weird and very annoying. Hopefully, someone knows something about it... -
Centering text & wrapping words on lines
Hi all,
I need to have a JLabel that centers the text in it, and allows for multiple lines, where if a line is too long, it wraps onto the next line.
I started off with a JTextArea, setting "setLineWrap" and "setWrapStyleWord", and this works fine for long lines of text. But, I need to have the text centered as well. Is there any way of doing this? I know JTextPane can do it, but I can't see how to do it in JTextArea.
any help much appreciated,
JustinUse a JLabel, with HTML text content and set the preferred size of the label as well. This will do auto line wrap;
ie. ew JLabel("<html><center>The long text</center></html>");ICE -
I have a JScrollPane which has been created with this code:
JTextArea textArea = new JTextArea(htmlRepairSupport);
JScrollPane scrollPane = new JScrollPane(textArea);
htmlRepairSupport is a very long String. When this scroll pane is displayed in a dialog box, I want there to only be a vertical scroll, and for the text to wrap when it hits the right edge of the scroll pane. Does anyone know how to do this?
Thanks!javax.swing.JTextArea.setLineWrap(boolean);
javax.swing.JTextArea.setWrapStyleWord(boolean); -
Word wrapping at JTextPane boundaries
Hi ! I have two problems related to JTextPane -
1. I want to wrap words which are larger than the width of JTextPane so that it may remain visible inside the fixed boundaries.
2. if there is an image and it can not be displayed in the same line in continuation of text then it should be displayed in the next line.
All images that i have used have less width than that of JTextPane.
Both these problems may be related or different, I dont know how to solve these problems.
Please suggest any solution.Till now I am able to find the height of JTextPane after inserting some text by creating a dummy JTextPane
and calling the method getPrefferedSize().height
this wraps text correctly at word boundaries but i want it to be wrapped according to word boundaries and
textpane boundaries both
actually I am developing a chat application in which I have to show message from other person
and if there is some text like ": )", ": D" etc then i want to show smileys :), :D in the place of these substrings
I can insert text and replace the text with images by using StyledDocument's insert function
but if i simply replace the text with images then the images are shown in the same line and wrapping doesn't work
hence some part of images are not visible in the JTextPane
as shown in the links http://www.facebook.com/photo.php?fbid=193222607456431&set=a.193222600789765.36992.100003060781951&type=1&ref=nf
and http://www.facebook.com/photo.php?fbid=193225164122842&set=a.193222600789765.36992.100003060781951&type=1&ref=nf
here link 1 shows the problem of partial display of image
and link 2 shows the problem of inserting text that is larger than the width of the JTextPane
And i want that whatever is inside the JTextPane should be shown inside the boundaries of it, I don't want to add a
horizontal scrollbar !!!!!
hope you got the problem, please provide some help ! -
Can anyone tell me how to word-wrap in the values in a particular field of a table in htmldb? The values of a certain field are very long and hence the table is unnecesarily occupying lot of space..........thus, it would be helpful if word-wrapping was possible.
Thanks in advance.how about using the following function to wrap the data in a column?
I tested it in HTML DB and it worked fine.
-- convert P_DATA into wrapped words. Words are delimited by <br> so that
-- it can be displayed in HTML format
-- P_N is number of characters
FUNCTION HTML_WRAP( P_DATA IN VARCHAR2, P_N NUMBER DEFAULT 2) RETURN VARCHAR2
IS
TYPE T_DATA_CHARS IS TABLE OF VARCHAR2(1) INDEX BY BINARY_INTEGER;
V_DATA_CHARS T_DATA_CHARS ;
N NUMBER :=1;
V_OUTPUT VARCHAR2(4000);
BEGIN
IF LENGTH(P_DATA) > P_N THEN
-- populate Data in the array
FOR I IN 1..LENGTH(P_DATA) LOOP
V_DATA_CHARS(I) := SUBSTR(P_DATA,I,1);
END LOOP;
-- process the string
FOR I IN 1..LENGTH(P_DATA) LOOP
IF N <= P_N THEN
N := N + 1;
V_OUTPUT := V_OUTPUT || V_DATA_CHARS(I);
ELSE
IF V_DATA_CHARS(I) = ' ' THEN
V_OUTPUT := V_OUTPUT || '<br>';
N := 1;
ELSE
N := N + 1;
V_OUTPUT := V_OUTPUT || V_DATA_CHARS(I);
END IF;
END IF; -- N <= P_N THEN
END LOOP;
RETURN V_OUTPUT;
ELSE
RETURN P_DATA;
END IF;
SQL> SELECT BARAKAU.HTML_WRAP('WELCOME TO MY WORLD MY DEAR',5)
2 FROM DUAL ;
BARAKAU.HTML_WRAP('WELCOMETOMYWORLDMYDEAR',5)
WELCOME<br>TO MY<br>WORLD<br>MY DEAR -
Hi,
Is there a way to wrap words the way gnome-terminal does in urxvt ?
If so I would really like to know how.
Thankspyarch wrote:
jasonwryan wrote:Zsh uses setopt, and there is no equivalent. Your term or your prompt is likely broken.
I am using rxvt-unicode with zsh but when I go into bash the shopt works
So it is probably your prompt... -
In Pages for iPad, I couldn't wrap text(Chinese characters) around the image
Hi, a question about Pages for iPad. I wrote some words with Chinese characters and then inserted a image from the Camera Roll. The problem is that I couldn't wrap words around the photo. I tried again wrote some words in English and it's ok for wrapping. Why did this happen?
From the help section in the Pages app ....
Anchor or free an object to or from its surrounding text:
Select the object, tap in the toolbar, and then tap Arrange.
In the Arrange window, tap Wrap.
To make an object move with the flow of text, slide “Move with Text” to ON.To make an object remain stationary, unaffected by changes in the surrounding text flow, slide “Move with Text” to OFF.
Drag the Extra Space slider to indicate how much space you want to leave between the object and the surrounding text.
Wrap text around an object:
Select the object and tap in the toolbar, and then tap Arrange.
In the Arrange window, tap Wrap.
Tap a wrap option to select it.Automatic optimizes text wrap for you, depending on the size and position of the object, and the width of the text column. Text wraps around an object, unless there’s very little space around the sides, in which case the text flows only above and below the object. Around lets you customize the text wrap around the sides, without automatic optimization. Above and Below allows text lines only above and below the object.
Drag the Extra Space slider to indicate how much space you want to leave between the object and the surrounding text.
This works for me. Restart your iPad if this does not work for you. -
Discoverer Plus not wrapping column headers on print
OracleBI Discoverer 10g (10.1.2.3)
Oracle Business Intelligence Discoverer Plus 10g (10.1.2.55.26)
I'm having issues with a new workbok I created and can't quite figure out how to fix it. I have columns with the Format Heading\Wrap words in cell set on. The columns wrap fine and display as expected in the Discoverer Plus workbook window, but they don't wrap on printing to pdf or a physical printer. They display in the upper left of the column and run to the right until they get cut-off by the next column on the right.
For instance:
Preprocessing
Lead Time
shows as
Preprocessing Lea|<next column>
-TracyWell, I hate to say it, but you may have run across a bug in your version of Discoverer Plus. I am on 10.1.2.54.25 and the word wrap works just fine when printing a worksheet out of Discoverer Plus in that version. I even retested it just now just to verify, and it printed just fine, and the way you would want it to print. So my suggestion is that you log a service request for this issue with support and see what they say. Good luck.
John Dickey -
Swing Problem : Wrap Multiple line in a Cell (JTable)
Hello...
I'm doing a swing app. The functions included are to print the Jtable...
in Colum 3 i've applied wrapping word in a cell.. the problem is when i print the table, the border in column 3 which wrap the word will not be visible...y?how can i solve this problem...can see my code like below
MyCellRenderer cellRenderer = new MyCellRenderer();
TableColumn column = null;
column = tblProgram.getColumn(ResourceBundle.getBundle("Program").getString("TBL_DESC"));
//get data in column 3
column.setCellRenderer(cellRenderer);
public class MyCellRenderer extends JTextArea implements TableCellRenderer {
public MyCellRenderer() {
setLineWrap(true);
setWrapStyleWord(true);
setMargin(new Insets(0, 5, 0, 5));
public Component getTableCellRendererComponent(JTable table, Object
value, boolean isSelected, boolean hasFocus, int row, int column) {
setText((String)value);
setSize(table.getColumnModel().getColumn(column).getWidth(),
getPreferredSize().height);
if (table.getRowHeight(row) != getPreferredSize().height) {
table.setRowHeight(row, getPreferredSize().height);
return this;
} ty in advance :DMulti-Post:
http://forum.java.sun.com/thread.jspa?threadID=741629&tstart=20
Thanks for fixing the code format tags, next time just edit the post instead of reposting. -
Displaying Messages in a Log type Format with wrapping
Hello developers,
I am trying to develop a message log display that is similar to the windows event viewer. Using a multi-column listbox I can map a symbol to a bitmap to get the warning, error, and informational ICONs to show up. My issue is that some of the messages can be long and there appears to be no way to word wrap a listbox or table cell. Has anyone been able to do this? I wonder if it could be done with an Xcontrol.
JohnIf you are talking about manually entering data into the listbox, then yes, hitting enter will change to the next cell.
If you programmatically write to the property node ItemNames with carriages returns in whatever element of the 2-D string array, then you will see that the lines break apart within the cell.
Actually, if you want to wrap words when manually entering data in the listbox, you can hold the Alt key and enter 0013 on the numeric keypad to enter a carriage return. -
Could not connector to Orchestrator web service
I am trying to create an Orchestrator connector in Service Manager 2012. I type
http://mortonor12r2:81/orchestrator1012/orchestrator.svcin the wizard and specify the Orchestrator service account and I get the error: "Could not connector to Orchestrator web service".
Here is the additional information on the error:
Date: 2/3/2014 12:42:35 PM
Application: System Center Service Manager
Application Version: 7.5.3079.0
Severity: Error
Message: Could not connect to the Orchestrator web service.
System.Data.Services.Client.DataServiceQueryException: An error occurred while processing this request. ---> System.Data.Services.Client.DataServiceClientException: <!DOCTYPE html>
<html>
<head>
<title>The resource cannot be found.</title>
<meta name="viewport" content="width=device-width" />
<style>
body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;}
p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px}
b {font-family:"Verdana";font-weight:bold;color:black;margin-top: -5px}
H1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red }
H2 { font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon }
pre {font-family:"Consolas","Lucida Console",Monospace;font-size:11pt;margin:0;padding:0.5em;line-height:14pt}
.marker {font-weight: bold; color: black;text-decoration: none;}
.version {color: gray;}
.error {margin-bottom: 10px;}
.expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; }
@media screen and (max-width: 639px) {
pre { width: 440px; overflow: auto; white-space: pre-wrap; word-wrap: break-word; }
@media screen and (max-width: 479px) {
pre { width: 280px; }
</style>
</head>
<body bgcolor="white">
<span><H1>Server Error in '/' Application.<hr width=100% size=1 color=silver></H1>
<h2> <i>The resource cannot be found.</i> </h2></span>
<font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif ">
<b> Description: </b>HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please
review the following URL and make sure that it is spelled correctly.
<br><br>
<b> Requested URL: </b>/Orchestrator1012/Orchestrator.svc/Folders(guid'00000000-0000-0000-0000-000000000000')<br><br>
</body>
</html>
at System.Data.Services.Client.QueryResult.Execute()
at System.Data.Services.Client.DataServiceRequest.Execute[TElement](DataServiceContext context, QueryComponents queryComponents)
--- End of inner exception stack trace ---
at System.Data.Services.Client.DataServiceRequest.Execute[TElement](DataServiceContext context, QueryComponents queryComponents)
at System.Data.Services.Client.DataServiceQuery`1.Execute()
at System.Data.Services.Client.DataServiceQuery`1.GetEnumerator()
at Microsoft.EnterpriseManagement.ServiceManager.Sdk.Connectors.OrchestratorRunbookConnector.GetRunbookFolders(OrchestratorContext scoContext, Folder parentFolder)
at Microsoft.EnterpriseManagement.ServiceManager.UI.Administration.Connectors.Orchestrator.OrchestratorConnectorHelper.ValidateServerConnection(Boolean found)
System.Data.Services.Client.DataServiceClientException: <!DOCTYPE html>
<html>
<head>
<title>The resource cannot be found.</title>
<meta name="viewport" content="width=device-width" />
<style>
body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;}
p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px}
b {font-family:"Verdana";font-weight:bold;color:black;margin-top: -5px}
H1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red }
H2 { font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon }
pre {font-family:"Consolas","Lucida Console",Monospace;font-size:11pt;margin:0;padding:0.5em;line-height:14pt}
.marker {font-weight: bold; color: black;text-decoration: none;}
.version {color: gray;}
.error {margin-bottom: 10px;}
.expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; }
@media screen and (max-width: 639px) {
pre { width: 440px; overflow: auto; white-space: pre-wrap; word-wrap: break-word; }
@media screen and (max-width: 479px) {
pre { width: 280px; }
</style>
</head>
<body bgcolor="white">
<span><H1>Server Error in '/' Application.<hr width=100% size=1 color=silver></H1>
<h2> <i>The resource cannot be found.</i> </h2></span>
<font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif ">
<b> Description: </b>HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please
review the following URL and make sure that it is spelled correctly.
<br><br>
<b> Requested URL: </b>/Orchestrator1012/Orchestrator.svc/Folders(guid'00000000-0000-0000-0000-000000000000')<br><br>
</body>
</html>
at System.Data.Services.Client.QueryResult.Execute()
at System.Data.Services.Client.DataServiceRequest.Execute[TElement](DataServiceContext context, QueryComponents queryComponents)
In the event log on the Orchestrator server, I get the following error (event ID 3, System.ServiceModel 4.0.0.0):
WebHost failed to process a request.
Sender Information: System.ServiceModel.Activation.HostedHttpRequestAsyncResult/11404313
Exception: System.Web.HttpException (0x80004005): The service '/Orchestrator1012/Orchestrator.svc' does not exist. ---> System.ServiceModel.EndpointNotFoundException: The service '/Orchestrator1012/Orchestrator.svc' does not exist.
at System.ServiceModel.ServiceHostingEnvironment.HostingManager.EnsureServiceAvailable(String normalizedVirtualPath, EventTraceActivity eventTraceActivity)
at System.ServiceModel.ServiceHostingEnvironment.EnsureServiceAvailableFast(String relativeVirtualPath, EventTraceActivity eventTraceActivity)
at System.ServiceModel.Activation.HostedHttpRequestAsyncResult.HandleRequest()
at System.ServiceModel.Activation.HostedHttpRequestAsyncResult.BeginRequest()
at System.Runtime.AsyncResult.End[TAsyncResult](IAsyncResult result)
at System.ServiceModel.Activation.HostedHttpRequestAsyncResult.End(IAsyncResult result)
Process Name: w3wp
Process ID: 2732
I have checked permissions and they seem OK. Any help is appreciated.Hi,
http://mortonor12r2:81/orchestrator2012/orchestrator.svc should be the correct address. Do you have the typo "1012" only in the question or in the connector as well?
Can you open http://mortonor12r2:81/orchestrator2012/orchestrator.svc
in IE ?
Regards,
Stefan
www.sc-orchestrator.eu ,
Blog sc-orchestrator.eu -
Can't delete Preferences in CS 4 (Design Standard)
Haven't used Ilustrator in over a year (ill) and I can't add lettering to an historical photo design. Layers are locked, new layer started for lots of lettering to be added but I'm prevented from drawing the curved base lines I need to wrap the words around the images. Thinking it might be preferences, I followed the Security Bulletin APSB10-01 and got as far as 2nd step: <Install Location>( I assumed that was C drive/Adobe) > Adobe Illustrator CS4/Adobe Illustrator.app.which is not there. I have a folder called en_ US instead.
Now what? I hope there is a simpler method? Removing preferences used to be a lot easier. Forgot to add OS is Vista Home Premium. I appreciate the help very much.....thank you.....mmHello Jacob! Yes! Long Time! Just opening up Illy after almost 2 years was just mind boggling! I kept trying to do things I can do in PS that just don’t happen there-likePaint Bucket, smudging, dodge and burn, and I thought I had lost my mind. Anyhoo, I did manage a work-a-round by placing each photo design on a new page, and worked several wrapped words with levels of transparency for differences in letters and words as I liked. I love doing composites and actually, separating a part from the whole made concentration much easier. I have 1 section done and 3 more to go.
So, thanks so much for the new info you offered! I'll make that a Vista preference and try to follow your goodies. Most likely, I'll be b-a-c-k!!...............happy snowing--if you like what we're getting.....mm -
I would like to know if there is a way to insert a clearbox 2.0 gallery into a <div> so that the white space behind the photo gallery is filled with the desired background (either image or color). I have played around with this for many hours and it is just beginning to become more time consuming than it is worth. I see no code in the accompanying CSS that seems to address this issue and the gallery seems to defy all <div> tags. I am relatively new to this programming world and would sure love someone with some experience and wisdom to either answer my question explicitly or show me where I can find a step-by-step example of how to acheive this,
You can see the site home page at: http://tinamarie.sk-america.com/index.html and you can see the gallery at http://tinamarie.sk-america.com/gallery.html
If you look at the home page, I would like to essentially construct the gallery page to fit within a <div> that is under the navigation and above the footer divs and bounded on either side by the wrapper div. I thought I set it so that Clearbox was within the container div but to no avail. Instead the first thumbnail image is positioned immediately to the right of last navigation choice. Furthermore it does not appear like I can even get my navigation div to maintain a width of 960px.
It is completely frustrating and I am really hoping one you takes pity on me and appreciates my effort enough to give me a little (a great deal of) help on solving this issue.
Thanks in advance,
Steve
the code for the gallery.html page:
<!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>Tina Marie Portfolio</title>
<script src="js/clearbox.js" type="text/javascript"></script>
<style type="text/css">
#wrapper {
min-width: 1000;
background-color: #8f8fbd;
.header {
img.c1 {
background-color: #dddddd;
display: block;
margin-right: auto;
margin-left: auto;
width: auto;
/* nav begin */
#navigation ul li {
float: left;
list-style-type: none;
font-family: HUNTSON, cursive;
font-size: large;
color: #805b97;
#navigation ul li a {
color: #FFF;
text-decoration: none;
padding-top: 8px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 15px;
display: block;
font-family: HUNTSON, cursive;
font-size: large;
color: #805b97;
-webkit-transition: background-color 400ms ease-in-out 0s, color 500ms ease-in-out 100ms, font-weight 500ms ease-in-out 100ms;
-moz-transition: background-color 400ms ease-in-out 0s, color 500ms ease-in-out 100ms, font-weight 500ms ease-in-out 100ms;
-ms-transition: background-color 400ms ease-in-out 0s, color 500ms ease-in-out 100ms, font-weight 500ms ease-in-out 100ms;
-o-transition: background-color 400ms ease-in-out 0s, color 500ms ease-in-out 100ms, font-weight 500ms ease-in-out 100ms;
transition: background-color 400ms ease-in-out 0s, color 500ms ease-in-out 100ms, font-weight 500ms ease-in-out 100ms;
#navigation ul {
padding: 0px;
margin: 0px;
font-family: HUNTSON, cursive;
font-size: large;
color: #805b97;
#navigation a:hover {
background-color: #E6EBEC;
font-family: HUNTSON, cursive;
font-size: large;
color: #805b97;
/*nav end*/
#container {
width: 960px;
margin: 0 auto;
background-image: url(images/background.png);
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.item a img {
float:left;
padding:3px;
background-color: #dddddd;
margin: 5px;
border:1px solid #cccccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
filter:alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
.item a:hover img, .item a:active img {
padding: 3px;
border: 1px solid #cccccc;
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
.clearfix:after{
clear:both;
#inline{
visibility: hidden;
color:#444;
/* EndOAWidget_Instance_2648024 */
</style>
<link href="tinamarie.css" rel="stylesheet" type="text/css" />
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2648024" binding="#OAWidget" />
</oa:widgets>
-->
</script>
</head>
<body>
<script type="text/javascript">
// BeginOAWidget_Instance_2648024: #OAWidget
// ClearBox Config File (JavaScript)
var
// CB layout:
CB_MinWidth=300, // minimum (only at images) or initial width of CB window
CB_MinHeight=300, // initial heigth of CB window
CB_WinPadd=15, // padding of the CB window from sides of the browser
CB_ImgBorder=3, // border size around the picture in CB window
CB_ImgBorderColor='#dddddd', // border color around the picture in CB window
CB_Padd=4, // padding around inside the CB window
CB_BodyMarginLeft=10, //
CB_BodyMarginRight=10, // if you set margin to <body>,
CB_BodyMarginTop=10, // please change these settings!
CB_BodyMarginBottom=10, //
CB_ShowThumbnails='auto', // it tells CB how to show the thumbnails ('auto', 'always' or 'off') thumbnails are only in picture-mode!
CB_ThumbsBGColor='#dddddd', // color of the thumbnail layer
CB_ThumbsBGOpacity=.35, // opacity of the thumbnail layer
CB_ActThumbOpacity=.65, // thumbnail opacity of the current viewed image
CB_SlideShowBarColor='#FFF', // color of the slideshow bar
CB_SlideShowBarOpacity=.60, // opacity of the slideshow bar
CB_SlideShowBarPadd=17, // padding of the slideshow bar (left and right)
CB_SlideShowBarTop=2, // position of the slideshow bar from the top of the picture
CB_SimpleDesign='off', // if it's 'on', CB doesn't show the frame but only the content - really nice
CB_CloseBtnTop=-10, // vertical position of the close button in picture mode
CB_CloseBtnRight=-14, // horizontal position of the close button in picture mode
CB_CloseBtn2Top=-20, // vertical position of the close button in content mode
CB_CloseBtn2Right=-30, // horizontal position of the close button in content mode
CB_OSD='off', // turns on OSD
CB_OSDShowReady='off', // when clearbox is loaded and ready, it shows an OSD message
// CB font, text and navigation (at the bottom of CB window) settings:
CB_FontT='Verdana', //
CB_FontSizeT=13, // these variables are referring to the title or caption line
CB_FontColorT='#777', //
CB_FontWeightT='normal', //
CB_FontC='arial', //
CB_FontSizeC=11, // these variables are referring to
CB_FontColorC='#999', // comment lines under the title
CB_FontWeightC='normal', //
CB_TextAlignC='justify', //
CB_txtHCMax=120, // maximum height of the comment box in pixels
CB_FontG='arial', //
CB_FontSizeG=11, // these variables are referring to the gallery name
CB_FontColorG='normal', //
CB_FontWeightG='@@CB_FontWeightG@@', //
CB_PadT=10, // space in pixels between the content and the title or caption line
CB_OuterNavigation='off', // turns outer navigation panel on
CB_ShowURL='off', // it shows the url of the content if no title or caption is given
CB_ItemNum='on', // it shows the ordinal number of the content in galleries
CB_ItemNumBracket='()', // whatever you want
CB_ShowGalName='', // it shows gallery name
CB_TextNav='on', // it shows previous and next navigation
CB_NavTextImgPrvNxt='on', // it shows previous and next buttons instead of text
CB_ShowDL='on', // it shows download controls
CB_NavTextImgDL='on', // it shows download buttons instead of text
CB_ImgRotation='on', // it shows the image rotation controls
CB_NavTextImgRot='on', // it shows the image rotation buttons instead of text
// Settings of the document-hiding layer:
CB_HideColor='#000', // color of the layer
CB_HideOpacity=.8, // opacity (0 is invisible, 1 is 100% color) of the layer
CB_HideOpacitySpeed=400, // speed of fading
CB_CloseOnH='on', // CB will close, if you click on background
// CB animation settings:
CB_Animation='double', // 'double', 'normal', 'off', 'grow', 'growinout' or 'warp' (high cpu usage)
CB_ImgOpacitySpeed=300, // speed of content fading (in ms)
CB_TextOpacitySpeed=300, // speed of text fading under the picture (in ms)
CB_AnimSpeed=300, // speed of the resizing animation of CB window (in ms)
CB_ImgTextFade='on', // turns on or off the fading of content and text
CB_FlashHide='on', // it hides flash animations on the page before CB starts
CB_SelectsHide='on', // it hides select boxes on the page before CB starts
CB_SlShowTime=3000, // default speed of the slideshow (in sec)
CB_Preload='on', // preload neighbour pictures in galleries
CB_ShowLoading='on' //
// EndOAWidget_Instance_2648024
</script>
<div id="wrapper">
<div id="container">
<div id="header"><a href="index.html"><img src="images/header.png" alt="Tina Marie, Model, Biker Babe, Spokeswoman and Event Promotions" name="header" width="960" id="header" class="c1" /></a>
</div>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="gallery.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!--<div id="content">-->
<!--ALL OF THIS IS WITHIN THE #CONTAINER DIV-->
<div class="item">
<a rel="clearbox[gallery=Gallery,,comment=Biker Angel]" href="images/Tina Marie Winged Angel.jpg" title="Tina Marie"><img class="border" img src="images/preview_images/JPEG/Tina_Marie_Wings_Logo.jpg" alt="Biker Angel" /></a>
</div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Collage Black n White]" href="images/Tina_Marie_Collage_Bra_Face_BlackandWhite.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_Bra_Face_BlackandWhite.jpg" alt="Black and White Collage" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Bra and Panty Collage]" href="images/Tina_Marie_Collage_Bra_Panty.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_Bra_Panty.jpg" alt="Bra and Panty Collage" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 01]" href="images/Tina_Marie01.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie01.jpg" alt="Image 01" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 02]" href="images/Tina_Marie02.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie02.jpg" alt="Image 02" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 03]" href="images/Tina_Marie03.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie03.jpg" alt="Image 03" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 04]" href="images/Tina_Marie04.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie04.jpg" alt="Image 04" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 05]" href="images/Tina_Marie05.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie05.jpg" alt="Image 05" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 07]" href="images/Tina_Marie07.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie07.jpg" alt="Image 07" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 08]" href="images/Tina_Marie08.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie08.jpg" alt="Image 08" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 13]" href="images/Tina_Marie13.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie13.jpg" alt="Image 13" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 14]" href="images/Tina_Marie14.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie14.jpg" alt="Image 14" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 23]" href="images/Tina_Marie23.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie23.jpg" alt="Image 23" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 24]" href="images/Tina_Marie24.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie24.jpg" alt="Image 21" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 25]" href="images/Tina_Marie25.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie25.jpg" alt="Image 25" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 31]" href="images/Tina_Marie31.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie31.jpg" alt="Image 31" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 35]" href="images/Tina_Marie35.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie35.jpg" alt="Image 35" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 36]" href="images/Tina_Marie36.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie36.jpg" alt="Image 36" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 37]" href="images/Tina_Marie37.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie37.jpg" alt="Image 37" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 39]" href="images/Tina_Marie39.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie39.jpg" alt="Image 39" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 46]" href="images/Tina_Marie46.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie46.jpg" alt="Image 46" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 47]" href="images/Tina_Marie47.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie47.jpg" alt="Image 47" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 48]" href="images/Tina_Marie48.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie48.jpg" alt="Image 48" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 49]" href="images/Tina_Marie49.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie49.jpg" alt="Image 49" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 50]" href="images/Tina_Marie50.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie50.jpg" alt="Image 50" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 56]" href="images/Tina_Marie56.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie56.jpg" alt="Image 56" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 43]" href="images/Tina_Marie43.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie43.jpg" alt="Image 43" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 52]" href="images/Tina_Marie52.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie52.jpg" alt="Image 52" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 53]" href="images/Tina_Marie53.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie53.jpg" alt="Image 53" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 54]" href="images/Tina_Marie54.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie54.jpg" alt="Image 54" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 55]" href="images/Tina_Marie55.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie55.jpg" alt="Image 55" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 58]" href="images/Tina_Marie59.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie59.jpg" alt="Image 59" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 60]" href="images/Tina_Marie60.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie60.jpg" alt="Image 60" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 61]" href="images/Tina_Marie61.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie61.jpg" alt="Image 61" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 27]" href="images/Tina_Marie27.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie27.jpg" alt="Image 27" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 67]" href="images/Tina_Marie67.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie67.jpg" alt="Image 67" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 68]" href="images/Tina_Marie68.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie68.jpg" alt="Image 68" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 42]" href="images/Tina_Marie42.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie42.jpg" alt="Image 42" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 33]" href="images/Tina_Marie33.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie33.jpg" alt="Image 33" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 69]" href="images/Tina_Marie69.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie69.jpg" alt="Image 69" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 06]" href="images/Tina_Marie06.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie06.jpg" alt="Image 06" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 09]" href="images/Tina_Marie09.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie09.jpg" alt="Image 09" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 10]" href="images/Tina_Marie10.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie10.jpg" alt="Image 10" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 32]" href="images/Tina_Marie32.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie32.jpg" alt="Image 32" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 34]" href="images/Tina_Marie34.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie34.jpg" alt="Image 34" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 41]" href="images/Tina_Marie41.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie41.jpg" alt="Image 41" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 45]" href="images/Tina_Marie45.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie45.jpg" alt="Image 45" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 62]" href="images/Tina_Marie62.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie62.jpg" alt="Image 62" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 63]" href="images/Tina_Marie63.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie63.jpg" alt="Image 63" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 64]" href="images/Tina_Marie64.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie64.jpg" alt="Image 64" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 65]" href="images/Tina_Marie65.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie65.jpg" alt="Image 65" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 11]" href="images/Tina_Marie11.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie11.jpg" alt="Image 11" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 17]" href="images/Tina_Marie17.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie17.jpg" alt="Image 17" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 66]" href="images/Tina_Marie66.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie66.jpg" alt="Image 66" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 28]" href="images/Tina_Marie28.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie28.jpg" alt="Image 28" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 12]" href="images/Tina_Marie12.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie12.jpg" alt="Image 12" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 15]" href="images/Tina_Marie15.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie15.jpg" alt="Image 15" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 18]" href="images/Tina_Marie18.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie18.jpg" alt="Image 18" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 30]" href="images/Tina_Marie30.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie30.jpg" alt="Image 30" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 51]" href="images/Tina_Marie51.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie51.jpg" alt="Image 51" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Sexy Tina Marie and Orange Chopper Collage]" href="images/Tina_Marie_Collage_Painted_Skirt_OrangeBike_BeltBra_Sexy.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_Painted_Skirt_OrangeBike_BeltBra_Sexy. jpg" alt="Sexy Tina Marie and Orange Chopper Collage" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Military Sexy Collage]" href="images/Tina_Marie_Collage_Military_Sexy.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_Military_Sexy.jpg" alt="Military Sexy Collage" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Totally Sexy Mix Collage]" href="images/Tina_Marie_Collage_TotalMix_Sexy.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_TotalMix_Sexy.jpg" alt="Totally Sexy Content" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Sexy Mix Outside Collage]" href="images/Tina_Marie_Collage_Sexy_Mix_Outside.jpg" title="Tina Marie" ><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_Sexy_Mix_Outside.jpg" alt="Sexy Mix Outside Collage" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,commnent=Sexy Top Collage]" href="images/Tina_Marie_Collage_Sexy_Top.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie_Collage_Sexy_Top.jpg" alt="Sexy Top Collage" /></a></div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment=Image 21]" href="images/Tina_Marie21.jpg" title="Tina Marie"><img class="border" src="images/preview_images/JPEG/Tina_Marie21.jpg" alt="Image 21" /></a></div>
</div>
<div id="footer">
<h6><span class="fltlft">© 2012 Tina Marie</span> <span class="fltrt">Designed / Maintained by <a href="http://www.sk-america.com" target="_blank">SK-America</a></span></h6><strong></strong></div>
</div>
</div>
</html>
Here is the boilerplate.css code:
@charset "utf-8";
* HTML5 ✰ Boilerplate
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
* Detailed information about this CSS: h5bp.com/css
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
* ==|== normalize ==========================================================
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body {
margin: 0;
font-size: larger;
line-height: 1.231;
body, button, input, select, textarea {
font-family: Arial, Helvetica, sans-serif;
color: #666;
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
* Correct overflow not hidden in IE9
svg:not(:root) { overflow: hidden; }You aren't clearing your float which is why the images seem to be continuing with the header item.
Page 235 of your HTML file, add this:
<div style="clear:both;">
This should fix the issue of the image starting next to menu items.
For footer and other background color issue,
tinamarie.css, line 108, replace #footer with this code:
#footer {
padding: 10px 0;
background-color: #E6EBEC;
clear: both; -
CSS height property use in Fluid grid layout
Hi, I'm totally new to fluid grid layout and just got started in it. I have a div tag that has 5px height and I sucessfully applied that and seem fine only on Tablet landscape (1024x768) and Small tablet landscape (800x600), nevertheless it isn't even displaying on Mobile portrait (320x480), Mobile landscape (480x320), Small tablet portrait (600x800) and Tablet portrait (768x1024).
My coding is below
index.html
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="fluid.grid.layout/boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.grid.layout/style.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="fluid.grid.layout/respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"></div>
</div>
</body>
</html>
boilerplate.css
@charset "utf-8";
* HTML5 ✰ Boilerplate
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
* Detailed information about this CSS: h5bp.com/css
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
* ==|== normalize ==========================================================
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
* Correct overflow not hidden in IE9
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
legend { border: 0; *margin-left: -7px; padding: 0; }
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
button, input { line-height: normal; *overflow: visible; }
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
table button, table input { *overflow: auto; }
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
* Consistent box sizing and appearance
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
* Remove inner padding and border in FF3/4: h5bp.com/l
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== primary styles =====================================================
Author:
========================================================================== */
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
style.css
@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 4;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 85.5%;
padding-left: 2.25%;
padding-right: 2.25%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
height:5px;
display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 97.5%;
padding-left: 1.25%;
padding-right: 1.25%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
height:5px;
display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 98%;
max-width: 1232px;
padding-left: 1%;
padding-right: 1%;
margin: auto;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
height:5px;
background-color:#FBB829;
respond.min.js
/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/\(min\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1),maxw:D.match(/\(max\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
I really do appreciate your efforts to help me solve this problem... Thank you in advanceHeight is determined by content. I can't think of a single reason to have a div height of 5px because almost nothing will fit inside that small a space without problems.
As to why it doesn't show up in other devices, you must have put that style into the Tablet CSS code instead of the default Mobile CSS code.
Fluid Grids build up from Mobile (applied to everything) with specific rules for Tablets, then Desktops.
Best advice, use Fluid Grids for layout only. Use a separate CSS file for content styles.
Hope this helps,
Nancy O.
Maybe you are looking for
-
Annoying dust in a VERY weird place. Help?
I got my black iPod nano 4G 8GB at Radioshack on October 18th. Now it's Thanksgiving (Nov. 27), and I noticed some dust in a very strange place. It's in between the glass and the screen itself. I haven't ben able to get it out, and don't know how to
-
How to config in this architecture to achive load balance?
We have a XI which has a dialog instance.now we use the XI to connect to R3 system using abap proxy and to a no-sap system using JDBC. no-sap sys(DB2)->JDBC adapter<-xi(CI+Di)->r3 The question is how to achive load balance,using web-dispatcher or oth
-
Error in retrieving tables / object already exists (UNV0035)
In XiR2 Designer we are usually able to invoke the table browser without issue, however after working in the app for some time... when invoking the table browser the error msg "Error in retrieving tables / This object already exists. (UNV0035)" pops
-
Business Package download from SDN
Hello, I am trying to download business package from sdn it is giving following error with page cannot be displayed and displaying my userid and password on the browser. Can you please suggest me how to proceed further to download BP from SDN Regards
-
cant install my trial im trying but nothing works "terms and agreement" does not pop out so cant install it any help?