Posts by floatingDivs

Hi kukula,

It's time to rewrite the site. You've done it using some very unsupported formats that appear to only be working with Chrome.

Example

img[height=223] { ... }

Either make sure to use pixels like this

img[height="223px"] { ... }

or try to NOT use those types of things.

I used what you said. The other stuff messed it all up and moved things around everywhere. Can you please send the CSS / HTML file as a full with your code included. That'll be easier I think.

Cheers!

Sure. I'll give you my file in two minutes.

EDIT: Your site appears to be working fine...what exactly is the problem? Is it an IE problem?

EDIT2: It's an IE problem only, right? If so, it's because you have to use px when using positioning.

In your style.css file, under #logo2, you've set the following style:

#logo2 { right: 2; }

and here's what it should be:

#logo2 { right: 2px; }

So I just checked your site after applying MY RECOMMENDED CSS CHANGES and the site fully functions. The problem is you haven't applied everything I mentioned above (in my first post in this thread). One of my monitors is 2048x1152 and the site looks perfect in it and if I resize it to take up half my monitor (or a third, or a fourth), it stills works PERFECT.

APPLY ALL THE CHANGES I LISTED ABOVE!

Cheers for that. When I zoom/out it all messes up, any idea's? The whole site comes out of shape. Let me know.

Yea, it's because of all the positioning you used. HTML should come as naturally free-flowing as possible to ensure that DOES NOT happen.

My advice? Re-work the site without constantly setting position everywhere.

Hi zobadof,

I've made the page look very similar to the PNG example you posted. Here's the code I used to do it.

#main { position: relative; }
#marq { width: 752px; }
#logo2 { right: 0; top: 127px; }
#donate { position: absolute; right: -70px; top: -35px; opacity: 0.5; }

May I ask, are you new to HTML/CSS? The practices you are using (position everything, outdated tags, freaking marquees, etc.) is really what stagnated the web for a long time. IF you plan to make a living from web designing you should really try to look up modern HTML practices.

Can you show the entire HTML page? Even better, can you give us a link to a hosted version of the page? The CSS is very limited and we can't help much with it.

OK Violet82,

You wanted to get rid of the negative margin, right? The way to do it was with my suggestion.

Below all your previous CSS, add the following two styles.

.main_picture { clear: both; }
.main_picture img { margin: 0; }

----------

HERE'S A DETAILED EXPLANATION

<div class = "navigation">
			<ul>
							<li><a href = "#">Home</a></li>
							<li><a href = "#">Travels</a></li>
							<li><a href = "#">Portfolio</a></li>
			</ul>

		</div><!--END OF navigation-->
		<div class = "clear">
		</div><!--END OF clear -->

		<div class = "nav_bar">
			<img src = "images/bar.jpg" alt = "">
		</div><!--END OF nav_bar--> <-------------------------***NEEDS TO BE CLEARED AS  ITS FLOATED TO THE RIGHT

		<div class = "main_picture"><------------------------------***DOES THE CLEARING
			<img src = "images/homepage/home_1.jpg" alt = ""><--------------***SINCE THE .main_picture DIV CLEARS THE .nav_bar DIV, NO NEED TO USE NEGATIVE MARGIN
		</div><!--END OF main_picture -->

Hi Violet_82 (again),

I think I've given you the lecture on clearing floats about 100x. :P

Remove the margin from the .main_picture img (or set it to margin: 0; as below)

Then, set a clear on the .main_picture div.

That ought to fix it.

.main_picture { clear: both; }
.main_picture { margin: 0; }

Hi Alan (al2henry),

You should familiarize yourself with CSS floats.

Here's what you should do (the ONLY thing you change).

#navBar {
float: left;
margin: 0;
width: 21%;
}
</div>
<!--end navbar -->

<div style="clear:both;"></div> <--// Add this under the "navbar" div to "clear" the floats (you'll learn about that when you read the post I've linked to above.

What the code above does is remove the margin-right (79%), adds a float on the left navigation, and sets it width to 21%.

I'm kinda shaking my head and laughing my ass off.

PF2G was writing HTML/CSS tutorials just two months ago and when a couple poster made note of his mistakes / things he left off, he couldn't take the criticism and went off on them. However, the guy who writes tutorials can't even fix such a simple issue?

/rant

Is this your page?

http://www.directsellinglive.com/index.html (does work)

I'm guessing you guys use a .htaccess file to allow .php precedence over .html files.

http://www.directsellinglive.com/index.php (doesn't work)

Chances are your index.php page is empty (nothing in there). Go check and report back with the results. How did it happen? No idea, but it did. Check the logs to see if you've been hacked.

Set vertical-align for the class .wt to top.

.wt { vertical-align: top; }

There are two great options.

TinyMCE - http://www.tinymce.com/
CKEditor - http://ckeditor.com/

If you want more support, I'd suggest TinyMCE. If you want accessibility, CKEditor is said to be 100% accessible (or close to) and uses ARIA.

Add the attribute align="center" to the footer table.

Also, the site is 7-8 years old I'm guessing...it uses REALLY old HTML.

The following code appears to fix IE9 issues...

<!DOCTYPE html>
<html><head><style type="text/css">
body {
	background-color: #000;
}
.white {
	color: #FFF;
}
.heading {
	color: #2B5CBB;
}
a:link {
	color: #000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #999;
}
a:hover {
	text-decoration: underline;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
</style>
<title>Aces For Charity | Home</title>
</head><body>
<table width="100%" border="0" cellspacing="0">
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td height="231" align="center" valign="middle" 

background="http://www.acesforcharity.com/images/header_bg.gif"><img 

src="http://www.acesforcharity.com/images/aceslogo.png" width="350" height="159"></td>
    <td width="669" height="235" align="center" valign="bottom" 

background="http://www.acesforcharity.com/images/header_img.jpg">&nbsp;</td>

  </tr>
  <tr>
    <td width="100" height="40" colspan="2" align="center" valign="middle" 

background="http://www.acesforcharity.com/images/menu_bg.jpg"><table width="100%" border="0" cellspacing="0">
      <tr>
        <td width="12%"><div align="center"><strong><a href="index.html">Home</a></strong></div></td>
        <td width="13%"><div align="center"><strong><a href="events.html">Events</a></strong></div></td>
        <td width="16%"><div align="center"><strong><a 

href="registration.html">Registration</a></strong></div></td>

        <td width="25%"><div align="center"><a href="hands.html"><strong>Poker Hand 

Rankings</strong></a></div></td>
        <td width="19%"><div align="center"><a href="rules.html"><strong>Tournament Rules</strong></a></div></td>
        <td width="15%"><div align="center"><a href="contact.html"><strong>Contact Us</strong></a></div></td>
        </tr>
    </table></td>
  </tr>
  <tr>

    <td colspan="2">&nbsp;</td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
    <td><h1 class="heading">Welcome to Aces For Charity!</h1></td>
  </tr>
  <tr>

    <td><img src="http://www.acesforcharity.com/images/try1.png" width="340" height="369"></td>
    <td><strong class="white">Need to host a fundraiser? Aces For Charity will help! We   organize poker 

tournament fundraisers for non-profit organizations,   companies, families, clubs and more. Make your fundraiser 

fun and   successful with our Texas Hold'em Poker Tournaments! Texas Hold'em is   increasingly becoming a very 

popular game and is played by many people   of all ages. Aces For Charity will provide well trained, 

professional,   courteous poker dealers along with poker tables, chips and cards. With   our network of hundreds 

of poker players in the Central Florida area we   make …

It doesn't have to be a div. It can be a break tag (<br />), a span tag, or any other tag. It's just an attribute that resets anything following it to a non-floating position (the default value for float is none).

After something's been floated, it has to be cleared on the SAME level. So, after the div with class paragraph, create yet another div and give it a class clear. NOTHING GOES BETWEEN THE STARTING TAG AND ENDING TAG OF A CLEAR!

The CSS style is a simple clear:both;

<div class="paragraph">...</div>
<div class="clear"></div>

The reason your UL isn't receiving CSS is because you're trying to select TWO ULs.

#n ul should be ul#n

Something like this is what you're probably looking for.

<!DOCTYPE html>
<html lang="en">
	<head>
		<style type="text/css">
			ul {							
				height: 30px;
				line-height: 30px;
				margin: 0;
				padding: 0;
			}
			ul li {
				border: 1px solid #444444;
				display: inline;
				float: left;	
				height: auto;
				line-height: 30px;
				margin-right: 18px;
			}
			ul li:first-child {
				
			}
			ul li a {
				border: none;
				display: block;
			}
			ul li a:first-child {
				
			}
			ul li ul {				
				height: auto;
				line-height: normal;
			}
			ul li ul li {
				border: none;
				display: block;
				float: none;
				margin: 0;
				padding: 0;
			}
			ul li ul li a {
				border-top: 1px solid #444444;
				display: block;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<a href="#">Menu 1</a>
				<ul>
					<li><a href="#">Submenu 1 Link 1</a></li>
					<li><a href="#">Submenu 1 Link 2</a></li>
					<li><a href="#">Submenu 1 Link 3</a></li>
					<li><a href="#">Submenu 1 Link 4</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Menu 2</a>
				<ul>
					<li><a href="#">Submenu 2 Link 1</a></li>
					<li><a href="#">Submenu 2 Link 2</a></li>
					<li><a href="#">Submenu 2 Link 3</a></li>
					<li><a href="#">Submenu 2 Link 4</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Menu 3</a>
				<ul>
					<li><a href="#">Submenu 3 Link 1</a></li>
					<li><a href="#">Submenu 3 Link 2</a></li>
					<li><a href="#">Submenu 3 Link 3</a></li>
					<li><a href="#">Submenu 3 Link 4</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Menu 4</a>
				<ul>
					<li><a href="#">Submenu 4 Link 1</a></li>
					<li><a href="#">Submenu 4 Link 2</a></li>
					<li><a href="#">Submenu 4 Link 3</a></li>
					<li><a href="#">Submenu 4 Link 4</a></li>
				</ul>
			</li>
		</ul>
		<div style="clear: both;"></div>
	</body>
</html>

Well, I'm guessing you see the actual data in all browsers, but you don't see a BORDER in IE, correct? If so, that's fairly obvious. You've set "border" to "none", but used browser-specific CSS to create rounded corners for Safari/Chrome and Firefox browsers.

Set "border" to "1px solid #000" and see if that helps.

In JavaScript, something like this would insert "Hello World" into an element.

var element = document.getElementById('content');
element.innertHTML = "Hello World";

(Something like that...I'm not great at JS)

In PHP, it's made much simpler.

<div id="content">
<?php
$hello_world = "Hello World";
echo $hello_world;
?>
</div>

Would you be up for using jQuery to allow for showing/hiding the content? If so, you could literally create the effect in two lines worth....

Typically, when I'm selecting the classes, I go from all the way out (UL) to all the way in (A). Take a look at the HTML structure below.

<ul class="navigation">
   <li>
      <a href="http://daniweb.com">Daniweb</a>
   </li>
</ul>

So, if I'm wanting to give the <ul> a background, I do this.

ul.navigation {
   background: #111111;
}

If I want to give each <li> a width of 50 px, I do this.

ul.navigation li { 
   width: 50px; 
}

Notice how I include my <ul> class when styling the <li>? That way, I make sure it only styles THAT <ul> structure. For instance, if you're importing ANOTHER external unordered list (UL), it may have just a <ul> structure with no class or id. Well, if my styling is "ul" instead of "ul.navigation", I'm styling both! That's not what I want...thus, always select the outermost tag when styling any single "component" of the page.

Try this. You weren't selecting your classes properly. For instance, your <a> tag has the class "nav" while the <ul> tag has the class "navbar". Yet, you used ".nav li" trying to select your <li> tags. However, all that was doing was selecting the <li> tags inside your <a> tags, which there are none of!

.navbar { margin-top:50px;
         text-decoration:none;}
.navbar li{padding: 5px 10px 5px 10px;
      margin-left:10px; 
      display:block;
      float:left;
      list-style-type:none;   
}
.navbar .navpic{border-style:solid;
        border-color:red;
        
        }

.navbar a.link{ color:#ffffff;
             border-color:green;
       }
.navbar a.visited { color:red;
         border: 3px solid yellow;  }
.navbar a.hover{background-color: blue;
      }

To center your footer, set .inner-footer margin to auto;

.inner-footer {
margin: auto;
}

Also, remove the overflow on your header, because I get a little scroll bar if my window is too small...come on, man! :P

This should give you a pretty good answer.

Constructors

Destructors

Carefully read this and be 100% certain before ruling it out.

http://www.webmasterworld.com/firefox_browser/3035057.htm

---

EDIT: Here's a working version I re-created on my desktop. Copy & paste this into a test page and try it out. If it works, maybe consider using the absolute links I did rather than relative ones? Also, curious as to why your charset isn't UTF-8.

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Latmontu Kontakti | www.latmont.org</title>
<link rel="stylesheet" type="text/css" href="http://latmont.org/style.css" />
</head>

<body>

<div id="container">

<div id="header">
<h1>Latmontu Kontakti</h1>
<h2>www.latmont.org</h2>

</div>

<div id="linkbar">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.htm" id="current">Mājas Lapa</a></li>
<li><a href="laikradis.htm">Laikrādis</a></li>
<li><a href="jaunumi.htm">Jaunumi</a></li>
<li><a href="notikumi.htm">Notikumi</a></li>
<li><a href="saites.htm">Saites</a></li>
<li><a href="kontakti.htm">Kontakti</a></li>

<li><a href="atbalss.htm">Atbalss</a></li>
</ul>
</div>
</div>

<div id="left">

<div id="sub_left">
<h3>Latvijas Republikas Vēstniecība Kanādā</h3>
<p align=middle><img src="http://latmont.org/images/mini-saulite.png" alt="Saulite" width="78" height="80" class="img_left" /></a> </p>
<b>Pasta adrese:</b><br>
350, Sparks Street<br>

Suite 1200<br>
Ottawa, On. K1R 7S8<br>
<b>Tel:</b> 613-238- 6014<br>
<b>Fax:</b> 613-238 7044<br>
<b>Epasts:</b> <a href="mailto:embassy.canada@mfa.gov.lv">embassy.canada@mfa.gov.lv</a><br>
<b>Saite:</b><br>

<a href="http://www.ottawa.am.gov.lv/lv/">http://www.ottawa.am.gov.lv/lv/</a> </p>
<hr>
<br>
<h3>Latvijas Valsts Goda Konsuls Montreālā</h3>
<p><img src="http://latmont.org/images/mini-saulite.png" alt="Saulite" width="78" height="80" class="img_left" /><b>Kontakts:</b><br>
Roberts Klaiše<br><br>
<b>Pasta adrese:</b><br>
3955 Provost, Lachine, Que. <br>
H8T 1M1<br>

<b>Tel:</b> 514-422-0562<br>
<b>Epasts:</b> <a href="mailto:rklaise@sympatico.ca">rklaise@sympatico.ca</a> 
</p>
</div>

<div id="sub_right">
<h3>Montreālas Latviešu Katoļu Kopa</h3>
<p><img src="http://latmont.org/images/mini-saulite.png" alt="Saulite" width="78" height="80" class="img_left" /></a> </p>
<p><b>Kontakts:</b><br> Alberts Caune<br>

<b>Tel:</b> 514-484-0272</p> 
<p><i>Dievkalpojumi notiek Notre Dame Bazilikas Sv. Jēzus Sirds kaplīčā, ieeja no St. Sulpice ielas.</i> …

@shaya4207

Yeah, that didn't actually work. I had edited my post (twice!) but neither of them took effect?

@sasaspurmanis

After digging around a little bit yesterday, I found out that there might exist a possibility that your server isn't setup properly. Do you know what an .htaccess file is? You may need to insert the following snippet of code into it.

AddType text/css .css

After I changed your charset to UTF-8, everything looked better...

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Hey shawtyred74,

Your second code isn't properly wrapped in code tags. The problem is the opening brace to the ending code wrapper.

Instead of [/CODE], you have /CODE]

Hey patuie,

I see you are online and I'm going to send you a private PM.

patuie,

You're almost there! :)

I realise this may be a private site, so if you don't feel comfortable sharing it with the entire forum, feel free to PM me. What I need is an EXACT copy of the site that you screen-printed and posted as an image. Without seeing the rest of the code, I can't really recognise where the problem is located.

Didn't work. I was wondering if it is because I don't have a code for the small images. I have it so when you hover over the image a larger one appears.

Could you post your entire page's code? Like, all the HTML and CSS? I'll take a look at it in 10-12 hours once I come home from work.

Make sure to mark your thread as solved.

Try placing a z-index on the inner UL.

.menu ul li:hover ul li:hover ul { z-index: 2; }

@FloatingDivs thx for sharing...i need more and please elaborate your code...

I'm really unsure about how much code it is you need...do you know any PHP and MySQL? If not, maybe you should pay someone to do it for you? Quite frankly, I'm not sure how much more there is to it than the advice already given to you by the posters in this thread.

You have a database. It has a table called [insert table name containing Thread Status].

For instance, database name is "MyOwnCMS". The table name is "ThreadStatus". It contains two fields: thread ID and thread Status.

For example, the fields are called TS_ID (thread ID) and TS_Status (thread status). The ID pertains to the threads ID obviously and the TS_Status pertains to whether it's locked or opened. As you can see, there are two options: locked and opened. Thus, you only need a 0 (false) or 1 (true) as your data for TS_Status.

The function I posted in my previous post is_locked() would return a 0 if the thread isn't locked and 1 if it is.

Thus, the contents of the function is_locked() would simply query the Thread ID and find its status.

u have an extra code 4 that issue sir?

<?php
    function is_locked()
    {
      // if locked, return 1 (true)
      // else return 0 (false)
    }

    if(is_locked())
      // display "locked thread" image
    else
       // display "open thread" image
?>

ive been looking at the <div> tag, i know how to to align it center left or right but the one thing i would like to know is how to place things side by side like put a content box and then a facebook page like button embedded beside it if you know what i mean?

I think the CSS style you want to use is float.

Tables are NOT the way to go. Learn how to create websites with divs. They'll make your life a lot easier and the troubleshooting (if there is any) will be a breeze compared to tables (in my opinion).

However, if you do decide to stick with a table layout, consider using padding and margin to "align" the bar with the navigation menu.

You can use floats, margins, and padding (along with vertical-align).

Also, post some code and people will give you pointers/hints.

Did you create a static version of whatever it is you're trying to generate with XML/XSL? I've learned my lesson...always make sure a static (HTML) copy works in all browsers before attempting to create it with XML/XSL.

Paste your XML and XSL (separately...obviously) and I'll take a look.

Violet82,

My apologies. I can't believe I forgot to include the suggestion for which I included a warning. *facepalm*

The suggestion would be to restart the page from scratch and add little by little and test it various browsers. Find the EXACT html code that causes the problem. Just because one thing LOOKS like the problem does not mean it is.

Once again, sorry! Hopefully, Daniweb helps you get your answer.

Hi Violet82,

I skimmed over the thread and tested out the HTML/CSS in the first post. It works fine in IE8 and Firefox. I realize the problem is IE7, but without sounding like a wise-ass, it should unless you're doing something wrong. At my job, we recently created a calendar solution using floats throughout the page with NO problems, tested in 100's of department skins.

What I'd suggest is NOT fun, but it will pretty much guarantee you'll figure out your trouble-spot. What you think is the issue may not actually be the issue.

Also, is there any way you could upload the site to a public server?

After viewing the page source, it appears you didn't properly close off your <a> tag. Also, you used <a ref=...> instead of <a href=...>

any notices to True Enterprises shall be given by email to <a ref="mailto:[B][U][I]<script type="text/css">[/I][/U][/B]

Just took a quick peek at your website. You should consider removing the height:80%; style from your "lightbox" class. If you go to your upcoming events page, you'll see you have text continuing further down the line than the white content area.

Good God! Why do you guys waste your precious time with this bullcrap? Don't help them if they can't help themselves. Prop open a book and read about classes. Once you read a chapter on classes, you're good to go assuming you know how to use arrays, what data types are, etc.

Second year CIS with 0 knowledge in programming? Tsk tsk...

I'll take a look at it in the morning...

Change the margin-top value from -36px to -38px for #sidebar-wrapper.

Why not use a customized Google search?

http://www.google.com/cse/

JavaScript. The top-level bars ("Products", "Windows", etc) pass a javascript function from their <a> tag.