Jump to content

dbrimlow

Members
 View Profile  See their activity

  • Posts

    712

  • Joined

  • Last visited

    Never

 Content Type 

Posts posted by dbrimlow

    Rollovers

    in CSS Help

    Posted

    Basically, the simple rollover solution (where the width and heights are the same) uses a different image for the specific a:hover, a:visited of an class or ID.

     

    Example. Here http://www.regisresidential.com, I made 2 small images (2px wide by 20px high) - one red, one blue - to use for the links hover.

     

    #navcontainer a, #navcontainer a:visited {

    display: block;

    padding: 0px 5px 4px 4px;

    width:150px;

    background: #800000 url(../images/roundlinks2.jpg) repeat-x;

    border-bottom: 1px solid #FFF;

    text-decoration:none;

    color:#FFFFFF

    }

     

    #navcontainer a:hover, #navcontainer a:active {

    background: #336699 url(../images/roundlinks.jpg) repeat-x;

    }

     

    Upon hover, the link background image changes from red to blue. Simple.

     

    You use the same technique for text based links. Changing the text color, background color and border color on hover.

     

    But be very careful. Whenever designating a:link elements in a style sheet, the proper order is absolutely required. You MUST list  a:link and a:visited BEFORE a:hover and a:active.

     

    If you have initially designated all four link TAGS, then you MUST do the same for any modifications of links for a class or ID later.

     

    example - if you designate the actual link TAG:

     

    a {color:#0000FF} (or a:link)

    a:visited {color:#000099}

    a:hover {color:#FF0000}

    a:active {color:#FFFFFF}

     

    Then whenever you modify the link tags for a class or ID you must also re-designate the visited, hover and active:

     

    example - class/id links:

     

    .item a:link {color:#9999CC}

    .item a:visited {color:#9900FF}

    .item a:hover {color:#CC66CC}

    .item a:active {color:#CCCCCC}

     

    If you leave out the visited, or put them in the wrong order ... you will pull your hair out debugging because it will default to the initial TAG designation.

    Convert "&" to "&"

    in Regex Help

    Posted

    Neel, it didn't work.

     

    As Azu pointed out, a majority of the errors made in that field are written by some 9 to 5 underpaid data entry person more concerned with punching them out fast, than proper content, so the &s tend to get either tagged onto a word or after a word.

     

    Besides, I had to create a function to do this because I only want to make the & conversion for one dynamic variable (pulled from the DB).

     

    the color #eeeeee

    in CSS Help

    Posted

    LOL! Yeah, good advice. Always make sure it isn't something you've done, first!

     

    I can't tell  you the number of frustrating hours I've spent debugging only to find that I had 5 instead of six characters or forgot a semi-colon.

     

    But, in this case, I'm sure your code is right; #EEEEEE simply doesn't show on hig-res LCDs.

    [SOLVED] Why mozilla SUCKS

    in CSS Help

    Posted

    While at maxdesign, read and learn the tutorials on "Selectorials" as well as the floatorial.

     

    Selectorials put it all in perspective and is what CSS is all about - simple rules that if you remember them will avoid major troubleshooting issues in the future.

     

    And the listomatics are must views, as well.

     

    Many of us here still go back to them every so often for a booster.

    [SOLVED] Why mozilla SUCKS

    in CSS Help

    Posted

    ToonMariner is right ... there is no better thing to remember than always use a DOCTYPE.

     

    Otherwise, you will always be coding website for IE only. So, unless you just LOVE Microsoft and the wonderful things they do, always use your doctype.

     

    So, remember, Mozilla doesn't suck ... coding for IE only sucks. If you feed dog food to a cat, don't say it is bad Dog food when the cat hurls.

     

    HOWEVER! That said. That wasn't why your page was blowing up in FF anyway.

     

    Your CSS was also a little messed up, as well. You needed to clear your floats and reduce your table width slightly.

     

    Here is a revision of the page complete - it works in IE and FF and validates as HTML 4,01 loose. It works for a small thing like this, but it is very heavy and over div designed. The same thing could have been done with less css coding.

     

    ... but it works:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="--------">
<meta name="keywords" content="--------">
<title>GuildQuarters -> Home</title>
<style type="text/css">
<!--
body
{
text-align: center; /*For IE users*/
margin: 0;
}

div.container
{
width: 800px;
border-right: 1px solid #afafaf;
border-left: 1px solid #afafaf;
margin-left: auto; margin-right: auto; /*For mozilla users*/
text-align: left;
background-color: #ffffff;
}

div.logo
{
width: 800px;
height: 70px;
clear:both
}
div.logo img
{

}

/*=======MAIN MENU=========*/
div.menucontainer
{
width: 800px;
height: auto;
clear:left
}
#modernbricksmenu{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
clear:both
}

#modernbricksmenu ul{
font: 11px Georgia;
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu a{
float: left;
display: block;
color: #6a0000;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: #eeeedd; /*Default menu color*/
border-bottom: 1px solid white;

}

#modernbricksmenu a:hover{
background-color: #e4e4c3; /*Menu hover bgcolor*/
}

#modernbricksmenu #current a{ /*currently selected tab*/
color: #6a0000;
background-color: #e4e4c3; /*Brown color theme*/
border-color: #e4e4c3; /*Brown color theme e4e4c3 -> 009cff*/
}

/*=======MEMBER BAR=======*/
div.memberbarborder
{
width: 800px;
height: auto;
background: #e4e4c3;
padding: 5px 0;
}
div.memberbar
{
width: 800px;
height: auto;
color: #000000;
background-color: #eeeedd;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
div.memberbar p
{
font: 10px Verdana;
margin-left: 5px;
}
div.memberbar a
{
color: #000000;
text-decoration: none;

}
div.memberbar form
{
color: #000000;
font: 12px "Trebuchet MS";
margin: 0 5px 0 0;
}
div.memberbar input
{
font-size: 10px;
background-color: #cccccc;
border: 1px solid #666666;
}
-->
</style>
</head>
<body>
<div class="container">

<div class="logo"></div>
<div id="modernbricksmenu">
<ul>
<li id="current"><a href="index.php">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
<div class="menucontainer">

<div class="memberbarborder">
<div class="memberbar">
<table style="border:0; width:98%; clear:both">
<tr>
<td align="left">
<p>Welcome, Guest. Would you like to <a href="join.php">join</a> and become a free member?</p>
</td>
<td align="right">
<form action="login.php" method="post">
Email: <input type="text" name="email" tabindex="1" maxlength="50" size="15"> 
Pass: <input type="password" name="password" tabindex="2" maxlength="15" size="15"> 
<input type="hidden" name="redirect" value="/gq/">
<input type="submit" tabindex="3" value="JackIn"> 
</form>
</table>
</div>
</div>
</div>hi</div>
</body>
</html>

     

     

    Problem with IE and Firefox Display

    in CSS Help

    Posted

    I code first and foremost using correct, valid web standard code - checking it in FF initially.

     

    Then I check it in IE. If it blows up in IE, I create an IE only css to fix ONLY those issues IE is having a problem with - usually paddings, margins, floats and transparent PNGs.

     

    I then set an "IE conditional expression" before the close </head> tag to tell IE to use that css, like this:

     

    <!--[if lt ie 7]><link rel="stylesheet" type="text/css" media="screen" href="ie-win.css" /><![endif]-->

     

    So, I first code PROPERLY - checking in FF. THEN, I apply fixes for the junk browser IE.

     

    There is no ignoring IE. While FF and Safari have gotten a significant increase in market share (since FF 1.0 came out), 70% of your potential audience use a form of IE.

     

    I personally have to include hacks for IE 5.01 and 5.5 (@ 50 or so pcs that agents in our office use are non-upgraded WinNT!)

    Convert "&" to "&"

    in Regex Help

    Posted

    I don't know, seems like it should work. I'll give it a test run.

     

    Meanwhile, I would still like to know if I deciphered the 

    preg_replace("/&(?![A-Za-z]{0,4}\w{2,3};|#[0-9]{2,5};)/m"

    correctly.

    Convert "&" to "&"

    in Regex Help

    Posted

    Thanks,

     

    I wanted to try something simple and elegant like that, but that doesn't take into account any potential pre-existing instances of "&" or "&"

     

    Therefore, your solution would recode "&" as "I like pizza &amp; pasta " or  "&" as "I like pizza &#38 pasta".

     

    This is why the check for characters after the & was necessary.

     

    (Nice websites, BTW. Clean css and markup).

     

    Dave

    Convert "&" to "&"

    in Regex Help

    Posted

    As a self-acknowledged idiot when it comes to regex, I spent a good half hour or so yesterday searching here and Google for a simple way to convert "&" to "&" so I could make my firm's dynamically generated web pages database results text adhere to web standards for XHTML.

     

    I couldn't find it.

     

    But, then I realized that I already use a great email filter function that I found on the manual site, and it has a section that does this conversion (included within it), so I tried it:

     

    // Convert ampersands to named or numbered entities.

// Use regex to skip any that might be part of existing entities.

function makeAmpersandEntities($str, $useNamedEntities = 1) {

  return preg_replace("/&(?![A-Za-z]{0,4}\w{2,3};|#[0-9]{2,5};)/m", $useNamedEntities ? "&" : "&#38;", $str);

  }

     

    It worked like a charm when I called the function during my select command's variables initializing 

    ($description = makeAmpersandEntities($description)

    complete variable below:

     

    $description = $result_row[comment1].$result_row[comment2].$result_row[comment3].$result_row[comment4].$result_row[comment5].$result_row[comment6].$result_row[comment7].$result_row[comment8];
$description = makeAmpersandEntities($description);
$description = strtolower($description);
$description = ucfirst($description);

     

    Now, since I am an idiot, I would like to try to actually UNDERSTAND the preg-replace command it uses. I THINK I understand what it does. Do I have the following right?

     

    &(?![A-Za-z]{0,4}\w{2,3}; - find the ampersand and ignore any alpha characters that might be immediately after it that occur at least 0 times but not more than 4 times, AND any word characters that occur at least 2 times but not more than 3 times?

     

    the pipe - | - says to check (before and after) both the sub-patterns within the parentheses.

     

    Is this - #[0-9]{2,5};) - find the hash mark and at least 2 but no more than 5 numbers?

     

    Lastly, I simply can't "get it" why the multiline is necessary - /m - unless it is there initially because this was part of an email filter so it WOULD need to apply any instance of a new line - /n - within the email message .

     

    Thanks to anyone who answers.

     

    Idiot Dave

     

    clear only 1 float;

    in CSS Help

    Posted

    Yesterday I JUST "re-discovered" a great solution to this problem. It is a "div" float clear.

     

    For the css:

    .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

     

    For the HTML, add a class of .clearfix to any element containing a float needing to be cleared, plus any Guillotine-Bug-fixing block elements within the container. That's it!

     

    Here is the sample code with css:

     

    /*XXXXXXXXXXXXXXXXXXXX First Demo rules start here XXXXXXXXXXXXXXXXXXXXXXX*/

.guillotine-box {
float: left; 
width: 200px; 
border: 4px solid #5a5; 
background: #ddd; 
margin: 0 40px 10px 0;
color: #fff;
font-size: .8em;
}

.guillotine-float {
float: right; 
width: 130px; 
border: 3px solid #ff8; 
background: #766;
color: #ffd;
}

.guillotine-box a:hover {
background: #aaa; /*** Any hovered BG will trigger bug ***/
}


/*XXXXXXXXXXXXXXXXXXXX Second Demo rules start here XXXXXXXXXXXXXXXXXXXXXXX*/

.floatholder {
border: 4px solid #000;
margin: 10px 0 0;
background: #dc8;
font-size: 1.2em;
}

.floatbox {
float: left;
width: 35%;
background: #773;
border: 3px solid #f55;
color: #ffd;
}

.floatbox p {margin: 0;}

.floatholder p {margin: 0;}

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
  
.clearfix {
display: inline-block;
}  

    /* Holly Hack Targets IE Win only \*/
    * html .clearfix {height: 1%;}
.clearfix {display: block;}
    /* End Holly Hack */

<!-- now the the html -->

<div style="margin: 0pt 20%; height: 1%;">
<!-- NOTE: This div wrapper prevents IE/Win in quirks mode from using BODY as the base for measuring the % width 
on .floatholder. This wrapper must be dimensionally defined before IE<6 will use it as the percentage base. -->

<div class="floatholder">
<div class="floatbox">
<p>This float is not enclosed by the surrounding div container. </p>
</div>
<p>This container lacks the fix.</p>
</div>

<div style="height: 20px; clear: both;"></div> <!-- Just a spacer div between the demos -->

<div style="border: 4px solid rgb(0, 0, 0); margin: 10px 0pt 0pt; background: rgb(221, 204, 136) none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-size: 1.2em;" class="clearfix floatholder"> 

<!-- the "clearfix" classname MUST be the first class in the attribute for the JS to work! -->
<div class="floatbox">
<p>See how this float no longer protrudes out of the containing box, with no extra clearing element used in the container!</p>
</div>
<p>This float container has a class attribute of "clearfix", which applies the :after fix, or the Holly hack, depending on the browser.</p>
</div>

</div>

     

    Here is the link to the position is everything article:

     

    http://www.positioniseverything.net/easyclearing.html

     

     

    [SOLVED] Table Floats

    in CSS Help

    Posted

    There's absolutely NOTHING wrong with your markup coding approach (in general).

     

    You do have a few errant <divs> (two or three) mostly due to the ads, and you are using an xhtml doctype, but using html 4.01 code.

     

    But that isn't affecting your layout. You just needed to know the right way to do it.

     

    You just had 2 major errors in your style sheet and some faulty logic for your table headers and widths.

     

    First.  In your style sheet, you have:

     

    #pageright .title
{
color:#006699;
font-size:200%;
font-family:Arial;
font-weight:normal;
padding:none;
}

     

    there is no padding "none" - change it to padding:0;

     

    Next, you had a parse error (forgot the closing semi-colon after -"background-repeat:no-repeat")

     

    #pageright
{
font-size:90%;
width:540px;
float:right;
padding:20px;
background-color:#FFFFFF;
background-repeat:no-repeat
height:100%;

     

    always separate elements with a semi-colon.

     

    *******************************

     

    Now for the tables. EASY FIX!

     

    Remove the <div> for title_box (unless it is in a table row or an absolute positioned element ... it is just hanging out there).

     

    Now, create a table header cell for each table and apply the class="title_box". Type your title in the <th>.

     

    Change the 2nd table's float:right to float:left. (2 left floating items are cleaner than a left and right with no containing box holding them in place).

     

    Change the table widths to 40% - change the cell widths to %.

     

    Remove "heights" from the table cells, they don't belong there and are unnecessary anyway.

     

    Here is the new code for the two tables:

     

    <table width="40%" cellspacing="0" class="about" style="margin-left:20px; float:left;">

<tr>
  <th colspan="2" class="title_box">Club Penguin Info</th>
  </tr>
<tr>
	<td width="49%" class="text"><strong>Penguin Name</strong></td>
	<td class="text" width="51%">
		Lt Giovanni		</td>
</tr>

<tr>
	<td width="49%"  class="text"><strong>Member</strong></td>
	<td class="text" width="51%">
		No		</td>
</tr>
<tr>
	<td width="49%"  class="text"><strong>Fav. Server</strong></td>
	<td class="text" width="51%">None</td>

</tr>
<tr>
	<td width="49%"  class="text"><strong>Active</strong></td>
	<td class="text" width="51%">
		Yes		</td>
</tr>
</table>

<table width="40%"  cellspacing="0" class="about" style="float:left; margin-left:20px;">

<tr>
  <th colspan="2" class="title_box">Penguin Island Info</th>
  </tr>
<tr>
	<td width="50%"  class="text"><strong>Forum Posts</strong></td>
	<td class="text" width="50%">
		3815		</td>
</tr>
<tr>
	<td width="50%" class="text"><strong>Tutorials</strong></td>
	<td class="text" width="50%">
		1		</td>
</tr>
<tr>
	<td width="50%" class="text"><strong>Comments</strong></td>

	<td class="text" width="50%">
		0		</td>
</tr>
<tr>
	<td width="50%" class="text"><strong>Media</strong></td>
	<td class="text" width="50%">N/A</td>
</tr>
</table>

     

    Good luck

    Help with align with in DIV

    in CSS Help

    Posted

    First, "VERTICAL-ALIGN: top;" is not a valid css command.

     

    Second, where are you trying to center the image?

     

    In "#member" or in "#member_content?

     

    If within #member_content

     

    try this:

     

    #member_content{

    background-color:#000000;

    width: 362px;

    float:right;

     

    #member_content img {

    width: 160px;

    height: 150px;

    margin-right: auto;

    margin-left: auto;

     

    }

     

    (or use the short-hand for the above 2 margin commands - margin: 0 auto;)

     

    Remember, the cascading order for padding, margin, is always "top, right, bottom, left".

     

    And your borders in #member, can simply be ... border: 1px solid #0273AD;

    Front Page/Web Expressions PHP WSYWIG

    in Editor Help (PhpStorm, VS Code, etc)

    Posted

    PHP is a server side only language. There is nothing to display in "design" view.

     

    In other words, it takes a web server with php installed to a: interpret the instructions, b. process the html to display the instructions it had received.

     

    It is not a "browser" side language like html.

     

    Using any hand coding friendly editor is fine for php. But using editors like notepad and Frontpage are not recommended for php because they don't color code.

     

     

     

     

    [SOLVED] Any Ideas?

    in CSS Help

    Posted

    Did you try "clear:both"

     

    That's usually how I get my footers to behave when they follow left:float divs.

     

     

    #footer {
border:1px solid #000000;
width:780px;
height:53px;
margin-left:auto;
margin-right:auto;
margin:auto;
padding:0px;
clear:both
}

     

    you can also "clear:right" your last left floated element (as well as clearing both for the footer)

    How can i control the location of html select option.

    in CSS Help

    Posted

    Yes. Create a class for your select and put it in an "ie-only.css" file.

     

    .select {
margin-right:50px;
}

     

    Then use a conditional expression in your <head> after any other css links or commands to call the css file if the browser is IE (this way it doesn't change how it looks in FF).

     

    <!--[if lt ie 6]>
<link rel="stylesheet" type="text/css" media="screen" href="ie-only.css" />
<![endif]-->

     

    For the actual select tag, simply add the class,

     

    <select  name="select" class="select">

    Why does this CSS code work?

    in CSS Help

    Posted

    You can also remove the "position:relative" elements and that first "clear:left".

     

    If you are placing these divs in order, then they are already "relative".

     

    The clear:left is then negated by the next command of float:left.

     

    That's as if I used,

     

    .widths {

    width:300px;

    width:500px

    }

     

    The last command always replaces the previous.

    [SOLVED] Making a thin border around stuff

    in CSS Help

    Posted

    Until you use a proper DOCTYPE your page will always be unstable.

     

    Add this before the <HTML> tag of your page before you even START trying to debug your CSS:

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

    "http://www.w3.org/TR/html4/loose.dtd">

     

    It looks like what you want is a block level item. For you can try a definition list <dl>

     

    Then set the border for the definition data in your css. Example from a page of mine (you can play with your margins for the effect you want):

     

    dl{margin-top:8px;}

     

    dd{background: #fff; display:block; width:60%;border:1px solid #000; padding:4px 0px 5px 20px}

     

    Then, in your html, use them for each text box you have as you would for a list item <dl><dd></dd></dl> eg:

     

    <dl>

        <dd>In some regions, this one-room apartment is called an efficiency. It is

        basically a one-room apartment with separate bath and sometimes (but not

        always) a separate kitchen. These can range from very small (big enough

        for a sofabed and a desk) to very large (can accommodate a king-size bed

        and have a separate sitting area and dining area).

        </dd>

        <dd><em><strong>An alcove studio</strong></em> has an alcove, or distinct

        separate area or nook for dining or sleeping. Generally, alcove studio implies

        a larger apartment than a straight-line studio Often they are configured in a L shape, or they may have an area separated by an archway that can be sectioned off as a separate

        room.

        </dd>

        <dd><em><strong>A convertible studio</strong></em> is a studio large enough to section off a separates leeping area or bedroom. It can be either a straight-line studio or an

        alcove studio.

    </dd> 

    </dl>

     

    Use your margins and paddings to separate them how you like.

    Page gets all smushed on lower resolution?

    in CSS Help

    Posted

    Until you use a proper DOCTYPE your page will always be unstable.

     

    Add this before the <HTML> tag of your page before you even START trying to debug your CSS:

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

    "http://www.w3.org/TR/html4/loose.dtd">

     

    You are using tables instead of letting the CSS layout your page.

     

    There is no point in having a layout divs (container, left, right, etc) if you do not designate widths. Period.

     

    Use either % or px.

     

    Ex:

     

    #container {

    width: 100%

    }

     

    #left {

    width:20%

    }

     

     

    #right {

    width:79%

    }

     

    You need to get a good book on CSS and learn the basics before you start using them.

     

    You have a good eye for design, proper css and you will shine.

    php designer 2007 problems

    in Editor Help (PhpStorm, VS Code, etc)

    Posted

    I don't know PHP Designer, but it seems to me like you should assign an extensions for viewing.

     

    As for WAMP, since php is Server side code, it will display online easily enough.

     

    What you can try is to go your Windows "Tools" tab, click "Folder options"/"file types" and click "new", type ".php" and designate "Opens with" php designer .

    can't preview view PHP files in dreamweaver

    in Editor Help (PhpStorm, VS Code, etc)

    Posted

    This comes up a lot with Dreamweaver users.

     

    Anyone who works with dynamic websites and uses a Windows based PC should download and instal WAMP (Windows ,Apache, MySQL, PHP). http://www.wampserver.com

     

    It is a packaged binary suite that turns a windows PC into a web server.

     

    You would designate c:wamp/apache/www as your server in DW site editor. Then synchronize your local site to the www folder.

     

    This will automatically make your site viewable in FF and IE as http://localhost. It comes with phpmyadmin so you can create your MySQL databases as easy as you do on a remote server.

     

    All serverside code will work with WAMP (except, of course ASP and Windows based SSC).

     

    You can also tweak the apache conf file and turn on/off/download php modules.

     

    You would even then be able to use a CMS like Joomla, Drupal, PHPNuke, etc. locally.

     

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.