|
CSS - Css Not Formatting After Page Change.
I have 2 pages that use style.css which has all the classes in it.
I used to simply drop one page into my web server root dir, open the page and everything worked fine. Now, when I chage pages in the wwroot, it wont format using the css. The first half of the page does format, but the second part does not. I *think* it is something to do with the webserver or PHP. Once I have fixed it (via a reboot) it works fine untill I drop the other page in there and then it breaks again. Below are 2 pics, 2.jpg of what it is supposed to look like and 1.jpg of what it looks like when I get this prob. Similar TutorialsHello everyone, I've been working on my school website for some time now - but I recently started over where the markup and style sheets are concerned. Both my html and css validate. This is my html source: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Secondary School</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
function view_event(url)
{
window.open(url, 'event', 'top=100, left=100, width=200, height=350');
return false;
}
//-->
</script>
</head>
<body>
<div id="container">
<h1> Secondary.School. </h1>
<div id="nav">
<ul>
<li> <a href="index.php"> Homepage </a> </li>
<li> <a href="#"> School Information </a> </li>
<li> <a href="departments.html"> Departments </a> </li>
<li> <a href="#"> Clubs </a> </li>
<li> <a href="#"> SCC </a> </li>
<li> <a href="#"> Resources </a> </li>
</ul>
</div>
<div id="primaryRail" class="rail">
<h2> Contact information </h2>
<p> <b> 127 Maple Street Testo, Orbuk, H58 435 </b> <br />
<b> Telephone: </b> (456) 245-5677 <br />
<b> Fax: </b> (456) 456-4567 </p>
</div>
<div id="secondaryRail" class="rail">
<h2> Our administration </h2>
<p> <b> Principal: </b> <i> Alan N </i> <br />
<b> Vice-Principal: </b> <i> Lucy S </i> <br />
<b> Vice-Principal: </b> <i> Candice H </i> </p>
</div>
<div id="primaryContent" class="content">
<h3> Welcome to the Secondary School website! </h3>
<p><b>XHTML TESTING</b><br />
April 11, 2007<br />
Posted by : <b>admin</b><br />
Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus.
Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum
interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae
massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse
consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum
non purus. <a href="#"> link testing </a><br />
<a href="#top">Top</a></p><p><b>admin</b><br />
April 11, 2007<br />
Posted by : <b>admin</b><br />
Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus.
Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum
interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae
massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse
consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum
non purus. <br />
<a href="#top">Top</a></p><p><b>test</b><br />
April 10, 2007<br />
Posted by : <b>mr.southern</b><br />
test<br />
<a href="#top">Top</a></p><p><b>test</b><br />
April 10, 2007<br />
Posted by : <b>mr.s</b><br />
test<br />
<a href="#top">Top</a></p><p><b>Testing</b><br />
April 09, 2007<br />
Posted by : <b>Jonathan</b><br />
This is just a test message.<br />
<a href="#top">Top</a></p><p><b>test</b><br />
April 05, 2007<br />
Posted by : <b>test</b><br />
test<br />
<a href="#top">Top</a></p><p><b>Test</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
Test.<br />
<a href="#top">Top</a></p><p><b>Another test post.</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
Just another test.<br />
<a href="#top">Top</a></p><p><b>Lorem ipsum dolar et sit</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
This is just a test post.<br />
<a href="#top">Top</a></p><p><b>Lorem ipsum dolar et sit</b><br />
April 05, 2007<br />
Posted by : <b>Jonathan</b><br />
This is just a test post.<br />
<a href="#top">Top</a></p> </div>
<div id="secondaryContent" class="content">
<h2>Calendar for April 2007</h2>
<table>
<tr class="days"><td>Su</td>
<td>Mo</td>
<td>Tu</td>
<td>We</td>
<td>Th</td>
<td>Fr</td>
<td>Sa</td>
</tr>
<tr><td class="week" title="Sun, 01st April 2007">1</td>
<td class="week" title="Mon, 02nd April 2007">2</td>
<td class="week" title="Tue, 03rd April 2007">3</td>
<td class="week" title="Wed, 04th April 2007">4</td>
<td class="week" title="Thu, 05th April 2007">5</td>
<td class="week" title="Fri, 06th April 2007">6</td>
<td class="week" title="Sat, 07th April 2007">7</td>
</tr><tr>
<td class="week" title="Sun, 08th April 2007">8</td>
<td class="week" title="Mon, 09th April 2007">9</td>
<td class="week" title="Tue, 10th April 2007">10</td>
<td class="week" title="Wed, 11th April 2007">11</td>
<td class="week" title="Thu, 12th April 2007">12</td>
<td class="week" title="Fri, 13th April 2007">13</td>
<td class="week" title="Sat, 14th April 2007">14</td>
</tr><tr>
<td class="week" title="Sun, 15th April 2007">15</td>
<td class="week" title="Mon, 16th April 2007"><a href="calendar.php?dateline=1176699600" style="padding: 0px;" onclick="return view_event(this.href);"><span style="color: red; font-weight: bold;">16</span></a></td>
<td class="week" title="Tue, 17th April 2007">17</td>
<td class="week" title="Wed, 18th April 2007">18</td>
<td class="week" title="Thu, 19th April 2007">19</td>
<td class="week" title="Fri, 20th April 2007">20</td>
<td class="week" title="Sat, 21st April 2007">21</td>
</tr><tr>
<td class="week" title="Sun, 22nd April 2007">22</td>
<td class="week" title="Mon, 23rd April 2007">23</td>
<td class="week" title="Tue, 24th April 2007">24</td>
<td class="week" title="Wed, 25th April 2007">25</td>
<td class="week" title="Thu, 26th April 2007">26</td>
<td class="week" title="Fri, 27th April 2007">27</td>
<td class="week" title="Sat, 28th April 2007">28</td>
</tr><tr>
<td class="week" title="Sun, 29th April 2007">29</td>
<td class="week" title="Mon, 30th April 2007">30</td>
<td class="week"> </td>
<td class="week"> </td>
<td class="week"> </td>
<td class="week"> </td>
<td class="week"> </td>
</tr>
</table>
<a href="index.php?m=3">Previous month</a>
<a href="index.php?m=5">Next month</a>
<p style="font-weight: bold;">XHTML TESTING</p>
<p style="font-weight: bold;">admin</p>
<p style="font-weight: bold;">test</p>
<p style="font-weight: bold;">test</p>
<p style="font-weight: bold;">Testing</p>
<p style="font-weight: bold;">test</p>
<p style="font-weight: bold;">Test</p>
<p style="font-weight: bold;">Another test post.</p>
<p style="font-weight: bold;">Lorem ipsum dolar et sit</p>
<p style="font-weight: bold;">Lorem ipsum dolar et sit</p>
<p>Pellentesque sit amet mauris. Nullam non lacus. Etiam auctor. In purus.
Nulla dolor lectus, posuere et, cursus a, tincidunt non, mi. Vestibulum
interdum turpis in erat vehicula consequat. Vivamus sit amet turpis vitae
massa tristique auctor. Mauris quis turpis. Quisque at mi. Suspendisse
consequat faucibus elit. Morbi scelerisque porttitor ligula. Vestibulum
non purus. </p>
</div>
</div>
<div id="footer">
<p> <img src="images/tiger.jpg" alt="tiger logo" style="float: left;" /> | <a href="#"> homepage </a> | <a href="#"> school
information </a> | <a href="#"> departments </a> | <a href="#"> clubs </a> | <a href="#"> scc </a> | <a href="#"> resources </a> | <br />
Copyright <span style="font-size: x-small;"> 2007 </span> Secondary
School. </p>
</div>
</body>
</html>
And this is my style sheet: Code:
/* Secondary School CSS Document
/* Page and Link Formatting
---------------------------- */
a
{
text-decoration: underline;
font-family: Georgia;
padding-bottom: 3px;
color: #FF42B1;
}
#nav a
{
text-decoration: none;
font-family: Georgia;
font-size: 12px;
padding: 12px 10px 8px 10px;
color: #F9F9F9;
}
#nav a:hover
{
background: #454545;
}
#nav li
{
display: inline;
}
body
{
background: url('images/header.png') repeat-x;
margin: 0px;
padding: 0px;
text-align:center;
}
/* Divs etc...
---------------------------- */
#container
{
margin:0px auto;
width: 700px;
text-align: left;
}
#container h1
{
margin-top: 60px;
}
#primaryRail
{
width: 350px;
float: left;
}
#secondaryRail
{
width: 350px;
float: left;
}
#primaryContent
{
margin: 55px 0px 0px 0px;
width: 500px;
float: left;
}
#secondaryContent
{
margin: 55px 0px 0px 25px;
width: 175px;
float: left;
}
#footer
{
clear: both;
text-align: center;
background: #EDEDED;
border: #E2E2E2 2px solid;
}
/* Standard Elements
---------------------------- */
h1
{
font-family: Georgia;
font-weight: normal;
font-size: 2em;
color: #F9F9F9;
}
h2
{
font-family: Georgia;
font-weight: normal;
font-size: 1.5em;
color: #454545;
}
h3
{
font-family: Georgia;
font-weight: normal;
font-size: 1.5em;
color: #812F2F;
}
.rail h2
{
color: #FFD11B;
}
p
{
font-family: Georgia;
font-size: .85em;
color: #454545;
}
.rail p
{
color: #F9F9F9;
}
.content p
{
line-height: 1.5em;
}
ul
{
padding: 0px;
}
li
{
list-style: none;
}
table
{
color: #AFAFAF;
}
td
{
padding: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
.days
{
background: #DCDCDC;
font-weight: bold;
font-size: .75em;
}
.week
{
background: #FFFFFF;
font-size: .75em;
}
.nomonth
{
background: #FAFAFA;
}
#swd_info
{
display: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
position: absolute;
width: 180px;
background-color: #FFFF99;
color: #000000;
border: 1px solid #000000;
padding: 3px;
font-size: 10px;
text-align: justify;
}
This is how it looks in FF, and that is how I would like to to be in FF, and any common browser that the user may be operating: img133.imageshack.us/my.php?image=ffexampletx6.jpg Thank you! First off, thanks for reading. I've finally been hit with a document that requires I create some smart page breaking. What I need to do is get the document to have a page break only after certain things and not within those certain things. What I've done is surrounded these things with <div> tags and put this in my stylesheet: DIV {page-break-inside:avoid;} However, this fails miserably. I also looked at this site, but in Mozilla 1.6 and IE 6, the elements were all broken by page breaks. Anyone had any successful experience with this? Thanks in advance, colin Hi all, very new at this so please pardon. I am attempting to format a series of 3 columns (using the CSS holy grail) into the main body of a .asp page. Everything goes smoothly, I have the columns looking exactly as I want them, however the style sheet appears to be causing problems with the header and footer of my asp page. Namely, it has caused the previously smoothed corner images (.gifs) in the header and footer to have a 90 degree thick white border around them. I assume that my style sheet for the body of the page is affecting elements in the header and footer as well, causing them to look odd. Is there a way to have a style sheet only affect part of my code locally and not all of it globally? Or make certain parts of my code immune to the style sheet via some sort of markup? Thanks! FYI for those interested: the style sheet I am trying to use to format my divs (frame(content left, content right, content center and content header)) is body { text-align:center; border:0px solid #000; } #frame { width:830px; margin-right:auto; margin-left:auto; margin-top:auto; padding:0px; text-align:left; } #contentleft { width:175px; padding:0px; left:auto; top:auto; float:left; background:#fff; border:0px solid #000; } #contentcenter { width:480px; padding:10px; float:left; text-align:left; background:#B7C8EE; } #contentright { width:175px; padding:0px; right:auto; top: auto; float:right; background:#fff; border:0px solid #000; } #contentheader { background:#345EA2; width:auto; } p,h1,pre { margin:0px 10px 10px 10px; } h1 { font-size:14px; padding-top:10px; } #contentheader h1 { font-size:14px; padding:10px; margin:0px; } #contentright p { font-size:10px} The .asp page I want to use this style sheet on is <!--#include file="headerauth.asp"--> <meta http-equiv="Content-Language" content="en-us"> <body topmargin="0" leftmargin="0"> <link rel="stylesheet" type="text/css" href="sddm.css" /> <link rel="stylesheet" type="text/css" href="box2.css" /> <STYLE> A:link {font-weight:bold} A:hover {background:white;} A:hover {background-color:white;} A:visited {color:green} A:active {color:red} </STYLE> <!--#include file="footer.asp"--> The sheet appears to be affecting both my headerauth.asp and footer.asp which I do not want it to do. Is there a way to stop it from propogating to both of these other files? Or perhaps wrap the code for each of these in some sort of a tag that tells it not to use the css? How to change current page to other location after few seconds by using css script. Succeed by using meta refresh & onload in HTML but how to do in css. Thanks & Regards Hello, and thanks in advance for anyone who helps me with this. I want to know if it's possible to choose one color on a page and change it to another. This is the page I want to change: http://www.neopets.com/randomfriend.phtml?user=bubbapyque The menu on the left is uneditable by me because it's on Neopet's server. But I'd like to change the yellow color of the menu to something else. Possible? Thanks. Crystal Hi all, I need to link to a stylesheet and have it apply to the page instead of just opening the css. if thats a bit difficult to understand, lets say for example, for site accessibility, you would have links to 3 types of stylesheets to make the text bigger or smaller... how do you link to the css files without them actually opening the css file? thanks in advance Matty Hello, I am using a template, and i was wondering if i can have a css code on the top of the template code so it says that any words, or text will be in a font?? i do not know css and right now i don't have the time too, i will learn it later on, over the summer, but as of now i am busy Thanks i have a page that must printed as lanscape. as default users printer is configured as portrait. how can i change it (portrait to landscape) programatically. is this possible using css or other techniques? I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help! I am running amuck! know this should be basic, but Firefox and IE both handle the <h1> tags differently: 1) IE seems to put equal whitespace above and below the element 2) Firefox seems to put less whitespace AFTER the <h1> tag. Anyway to smooth this out so it displays close to similiar? My gratitude ahead of time... hi all, need one help from you.. i have to format a div tag which is generated dynamically.. if there are only 4-5 lines consists in that div it works fine, but the lines go out of bound it takes scroll bar overflow:auto; overflow-x:hidden; height:200px; in mozzila it works fine as the scroll bar comes inside the div tag... but in internet explorer .. the scroll bar goes out of the div tag.. can anybody help me... Hello all, I'm trying to add digg stories to my site & want to format it with css. Digg says you can use CSS with the class names to customize the display. Havent use css before so I'm lost...if someone could hook me up with this I would sure appeciate it. I would like to be able to format the links and text differently. The code I want to use to add digg is: Code: <script language="JavaScript" src="(URL address blocked: See forum rules)/diggjs/front/tech_news/0" type="text/javascript"></script> I'm going to put it in a frame so just on a blank page. Thanx! Is there a way to use CSS to format printer output specifically for a sheet of paper such that page breaks can be formatted in at specific points? Hi, I need help with formatting a calendar using CSS. Here's a list of the goals I'm trying to achieve: The day numbers are positioned in the top right corner of the cell. The event text is centered both vertically and horizontally within each cell. The day number doesn't affect the centering of the event text (i.e., it's as if it has zero width). I need to be able specify a minimum width and height for the cells. I have a png of the effect I am trying to achieve, but unfortunately I can't post it being a brand-new member. If seeing it would help, let me know and I guess I can PM the url to you. Update: Here's the link to the png: Code: http://tapestryfolkdance.org/images/calendar.png Below is what I've tried. However, the event text is not centered vertically within each cell, and the first couple of events are not centered horizontally in the cell. It is fine if the event text overlaps with the day number. Code:
<html><head><style>
table { text-align: center; border-style: solid; border-width: medium; border-spacing: 0px }
td { border-style: solid; border-width: thin; border-color: black; }
.day {
margin: 0px; text-align: center; font-style: bold;
border-style: solid; border-width: thin; border-spacing: 1px;
font-size: large; color: black;
float: right;
}
td {
text-align: center; color: black; font-size: small; min-width: 60px; min-height: 120px;
vertical-align: top;
}
</style>
</head><body>
<table>
<tr>
<td>
<div class=day>2</div>event 1<br></td>
<td>
<div class=day>3</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>4</div>event 1<br></td>
<td>
<div class=day>5</div>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>6</span>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>7</span>event 1<br>event 2<br></td>
<td>
<div class=day>8</div>event 1<br></td>
</tr>
<tr>
<td>
<div class=day>9</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>10</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>11</div>event 1<br></td>
<td>
<div class=day>12</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>13</div>event 1<br></td>
<td>
<div class=day>14</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>15</div>event 1<br>event 2<br></td>
</tr>
</table>
</body>
</html>
Ok, so I'm having some problems getting my site to look how I want. The formatting appears correctly in all browsers (I think) but in IE it's horribly messed up. This is my first site that I'm making just to learn some things and I don't know much CSS at all. I've tried reading up but am not sure how to properly use CSS to make this work cross browser capable. Basically, I want my text box search bar properly centered along with my logo and the "advanced search" and "preferences" links. I painted over some stuff for privacy heh. In FireFox, it looks like this ( http://img261.imageshack.us/img261/9625/ex1hu0.jpg ) but in IE, it looks like this ( http://img523.imageshack.us/img523/4631/ex2sm7.jpg ). So basically in IE the search bar and what not is aligned too high! How can I use CSS to make it looks like it does in FireFox, in all browsers!? I learn best by example so thanks much for any help!!! My probably terrible code is as follows: Code: <table>
<tr>
<td valign="middle">
<a href="/home"><img src="logo.jpg"></a>
</td>
<td valign="middle">
<form id="SearchBarForm" action="search.php" method="get">
<input type="text" name="q" size="30" maxlength="150" value="'.($q).'" title="Search">
<select name="FTS"> <!-- FTS = File Type Selections -->
<option value ="File_Type">File Type</option>
</select>
<font size=-1><input type="submit" name="Submit" value="Search"></form></font>
</td>
<td nowrap> <a href=/advanced_search.phpf>Advanced Search</a><br> <a href=/preferences.php>Preferences</a>
</td>
</tr>
</table>
Hey guys, hit a problem with my div formatting in css. usig external style sheet with the two styles "header" and "regular". If i make the div class="regular" and then make the first line class="header" using the <a> tag without defining href (as it is not a link, and dont want it to be a paragraph). Then the content below the 1st line ends up superimposed over the 1st line. You understand what i mean? Hopefully this might be a common bug? Anyone know what is causing this? im using IE6.0 to check it for bugs. It is offline atm, as i am making it. but it can be made available if anyone needs to see it. Code: <div id="content" class="regular" style="top: 280px; background-color: F5DEB3; padding: 10px; padding-bottom: 0px;"> <a class="header">About New Zealand</a> <p>New Zealand is one of the most unique places in the world to dive. Its rich, nutrient-dense waters provide a home to a <a href="constructionpage.html" class="interlink">multitude</a> of exotic and amazing <a href="constructionpage.html" class="intralink">creatures.</a> Whilst many of the tropical wonders are summer visistors to our shores, there is an abundance of life all year round.</p> </div> Monkeewrench p.s sorry the code window is stuffed, first time using it, lol This appears to be strictly a formatting/style problem. I built a page using validated XHTML Strict and of course, it displays at it should in IE6: http://computerslayer1.spymac.com/formpics/IE---1.gif http://computerslayer1.spymac.com/formpics/IE---2.gif In Opera 8, it displays for the most part, but the table containing the AV/Periphrial radio buttons is shrunk and aligned to the left. Then, when one of the radio buttons are selected, it expands, and the right side of the table appears to be missing. http://computerslayer1.spymac.com/f...s/opera---1.gif http://computerslayer1.spymac.com/f...s/opera---2.gif Firefox 1.0.4 displays the tables in much the same was as opera, however, the right side is not missing, like in Opera 8. http://computerslayer1.spymac.com/f.../firefox--1.gif http://computerslayer1.spymac.com/f.../firefox--2.gif Any ideas, guys? I'm stuck. Yes, this is actually a CSS question, despite me providing HTML code... I'm at my wit's end with IE. In the code below, "outer" is losing all formatting--background color, border, you name it, it's gone. html4strict Code: Original - html4strict Code <div id="outer" style="width: 410px;"> <div id="left" style="float: left; width: 200px;"><p>stuff</p></div> <div id="right" style="float: right; width: 200px;"><p>stuff</p></div> <div style="clear:both; font-size: 0; height: 0; width: 0;">&nbps;</div> </div> <div id="outer" style="width: 410px;"> My stylesheet is set up just fine (works fine in Firefox), so I assume this is one of those weird float bugs in IE. The thing is, it was rendering fine until I added another <div> in an entirely different location. Yes, it's all formatted correctly and validates XHTML 1.0 strict. Am I missing something, or is a known bug that I can't find documented, or does anyone have a suggestion for an alternate approach? Thanks all! Hey All, I'm trying to make text float to the right, the challenge part of it all is that i need to try and do this using a class that get asigned to the text so i can't really use a DIV or anything to do this. Really what i want is a bunch of text in a text box aligned to the right with a grey background. Anythoughts or ideas? Really in a binde here. Hi, Can anyone please help with formatting a list? In the simple list below, I would like; 1) The main list items should always be positioned at top 0px, left 90px of it's container (done) 2) Nested list items should be hidden (done) 3) The nested item that belongs to the "selected" list item, should be visible (done) 4) The nested item that belongs to the "selected" list item, should always be positioned at top 0, left 0 (I can't do this) 5) The main list items should be on top of the visible sub item (I can't do this, the sub item is always on top) Many thanks for any pointers, Cheers, Mark 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>
<title>Untitled</title>
</head>
<body>
<style type="text/css">
#container{position:relative;height:100px;border:1px solid #000}
#container ul{list-style: none;padding: 0;margin: 0;position:absolute;top:0px;left:90px;width:100px;z-index:20;}
#container ul ul{display:none;}/* hide nested lists */
#container ul li{display:block;width:100px;background:red}
#container li.selected ul{display:block;} /* show nested list for item with selected class */
#container li.selected ul li{width:100px;position:absolute;top:0px;left:0px;background:yellow;z-index:10;}/* style nested item */
</style>
<div id="container"><div style="clear:both"></div>
<ul>
<li class="selected">item 1
<ul>
<li>Nested item 1</li>
</ul>
</li>
<li>item 2
<ul>
<li>Nested item 2</li>
</ul>
</li>
<li>item 3
<ul>
<li>Nested item 3</li>
</ul>
</li>
<div style="clear:both"></div>
</div>
</body>
</html>
|
|||||||