Posts by Arkinder

Okay, you're positioning A LOT of elements here. Right now I don't have time to go through the parsing order of them all, but make sure to check the specificity of each rule. I'll take a look at it this again some time after lunch.

Regards
Arkinder

No problem, could you post a screen shot? The one I attached shows what it's displaying in all major browsers for me. If that's not what you want, then I just misunderstood you.

Regards
Arkinder

<a href="javascript:fg_popup_form("fg_formContainer","fg_form_InnerContainer","fg_backgroundpopup");">

Is what is used in a-page.php.

<a href="#">Contact Us</a>

Is what is used in index.php.

Regards
Arkinder

The default value is none, and you cane set it to the others.

<div id="floating_division">
</div>

<div id="cleared_division">
</div>

#floating_division { width: 100px; float: left;}
#cleared_division { clear: left;}

Let's say that we wanted #cleared_division to start on a new line, or appear below #floating_division instead of beside it. We use clear: left; because #floating_division is being floated left. If #floating_division were floating right, you would use clear: right; If there were several divisions before #cleared_division, some floating left, and some floating right. Then you would use clear: both; which clears the left and right.

Let me know if you still don't understand.

Regards
Arkinder

No, the clear property makes the element be below the bottom outer edge of any floating element. Basically you could say that it makes it start on a new line.

Regards
Arkinder

Lorel simply meant that using this technique on multiple images could cause a problem because it does not change the file size (kb, mb) of the image.

Give a height to your body element. That way you're telling the browser 90% of that height.

body { width: 100%; height: #em;}

Just use whatever height you like.

Regards
Arkinder

Could you be a little more specific please. It's the height that isn't resizing, right? The annoying thing about the height property is that you need to have it set somewhere with a non-percent unit before it will work with percentages ideally.

Regards
Arkinder

Please don't bring up old threads. Ask in the PHP section.

Regards
Arkinder

While site builders are convenient, they lack a truly versatile functionality. They tend to output a lot of markup and code that isn't necessary, and lack page optimization to compensate for it. However, if you're just making a personal web site then learning HTML and CSS could be more trouble than it's worth.

Regards
Arkinder

If I understand correctly, does the above mean that if any div on the page is hovered over, the div(s) with class "dropdown" will then be displayed as blocks?

That's it exactly it, and one of the reasons it's a bad technique. :)

Also, is it possible to have the following:

/* Same CSS as yours except: */

#foo div:hover div[class="dropdown"] {
    display: block;
}

with the same markup and have it produce the effect I originally described?

In theory it should, you'll just have to test it and see.

Regards
Arkinder

Arkinder, the code you provided was for images. It doesn't work with videos. When I embed videos and click on them it loads forever, but never plays.
also this is taken from lightbox2's website

What I provided was in response to the other posters link. Regardless, if it uses jQuery there are simply modifications that will allow the image galleries to work. It doesn't work currently because you're doing something wrong. Just use this instead.

Regards
Arkinder

Include the controls parameter.

<div id="video"><embed src="video/hari_ini_sakit.mp4" width="200" height="175" controls="0"></embed></div>

Regards
Arkinder

Alright, there are several ways to do this. The most practical one is positioning the form absolutely, and using the top property to push it down. Changes will be green.

#frmCartButtons {
	margin-top: 20px;
	height: 30px;
	width: 300px;
	margin-bottom: 20px;
	position: absolute;
	top: 100%;
}

This will cause the form to always be 100% from the top of the browser. However, this causes a problem when the browser is re-sized (and yes it's not far enough down). So we need to change where the top value is starting from. So instead of being 100% from the top of the browser, how about 100% from the top of #grid? To do this simply add position: relative; to #grid's CSS rule.

#grid{
	background: #ffffff;
	border: 1px solid #600;
	float: right;
	height: 520px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: 20px;
	width: 520px;
	position: relative;
}

This works while the form is a child element of #grid; or you could say while #grid is the container/containing element of the form.

Regards
Arkinder

The buttons are displaying at the top of the grid. Just to clarify; you're wanting them to be at the bottom and still inside of the grid, or on the bottom and below the grid? On all of my browsers the footer is displaying below the grid and not interacting with the form at all. So include what browsers you have tested in too.

Regards
Arkinder

I can't look at it right now, but try the z-index property.

z-index: -1;

Regards
Arkinder

Hi blaaam,

Welcome to Daniweb! Yes, this should probably be posted in the PHP section.

Regards
Arkinder

Straight from the horse's mouth.

Regards
Arkinder

No worries, will you post the rest of your CSS for this document?

Regards
Arkinder

sohail_ali, this is probably similar for TheNNS.

<div class="section">


	<h2>Example</h2>

	<h3>Single Images</h3>
	<div class="thumbnail">
		<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

	</div>
	<div class="thumbnail">
		<a href="images/image-2.jpg" rel="lightbox" title="Optional caption."><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>
	</div>

	<h3 style="clear: both;">Image Set</h3>

	<div class="thumbnail">
		<a href="images/image-3.jpg" rel="lightbox[plants]" title="Roll over and click right side of image to move forward."><img src="images/thumb-3.jpg" width="100" height="40" alt="Plants: image 1 0f 4 thumb" /></a>

	</div>
	<div class="thumbnail">
		<a href="images/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key." ><img src="images/thumb-4.jpg" width="100" height="40" alt="Plants: image 2 0f 4 thumb" /></a>
	</div>
	<div class="thumbnail">
		<a href="images/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/thumb-5.jpg" width="100" height="40" alt="Plants: image 3 0f 4 thumb" /></a>
	</div>
	<div class="thumbnail">
		<a href="images/image-6.jpg" rel="lightbox[plants]" title="Press Esc to close"><img src="images/thumb-6.jpg" width="100" height="40" alt="Plants: image 4 0f 4 thumb" /></a>

	</div>
	
</div><!-- end .section -->

Note the class and rel attributes. You will need those to be the same in your HTML. And then you also have to have all of the IDs match up.

<div id="overlay" style="width: 1261px; height: 3112px; opacity: 0.8;"></div>
<div id="lightbox" style="top: 67.3px; left: 0px;">
<div id="outerImageContainer" style="width: 470px; height: 358px; font-size: 37.0621px;">
<div id="imageContainer">
<img id="lightboxImage" width="450" height="338" style="" src="http://www.lokeshdhakar.com/projects/lightbox2/images/image-1.jpg">
<div id="hoverNav" style="">
<a id="prevLink" href="#" style="display: none; height: 338px;"></a>
<a id="nextLink" href="#" style="display: none; height: 338px;"></a>
</div>
<div id="loading" style="display: none;">
<a id="loadingLink" href="#">
</div>
</div>
</div>
<div id="imageDataContainer" style="width: 470px;">
<div id="imageData" style="">
<div id="imageDetails">
<span id="caption"></span>
<span id="numberDisplay" style="display: …

I'll let the W3C explain it. :)

If you would like for me to paraphrase it, just let me know.

Regards
Arkinder

You're floating the right column to the left. Instead, use clear: left; to make it start on the next line.

#rightcolumn {
    clear: left;
    width: 380px;
}

Regards
Arkinder

Awesome, if you run into any more issues just post a new thread.

Regards
Arkinder

hey why dont you use auto margin!
it can bring image at the center of the screen

Because that problem was already solved by the second post in this thread, and was followed by two more questions. Please read threads before posting in them.

Regards
Arkinder

Updated again, I should have just made a new message lol.

Regards
Arkinder

Edit 2: Okay, it's possible, but is very limiting. Not to mention just a bad way to do something. So I stand by my original statement - JavaScript is very flexible in these cases.

<div id="foo">
<ul>
<li><div class="menu"><a href="#">Item 1</a></div></li>
<li><div class="menu"><a href="#">Item 2</a></div></li>
<li><div class="menu"><a href="#">Item 3</a></div></li>
<li><div class="menu"><a href="#">Item 4</a></div></li>
<li><div class="menu"><a href="#">Item 5</a></div></li>
</ul>
<div class="dropdown">Hi</div>
</div>

#foo {
    width: 32%;
    margin: 0 auto;
}

div:hover div[class="dropdown"] {
    display: block;
}

Once again, I don't recommend this.

Regards
Arkinder

Remove the width from this rule in your CSS.

p {
    margin: 0 auto;
    padding: 1em 0;
    width: 680px;
}

Regards
Arkinder

Sure :)

div.menu:hover div.dropdown{
    display:block;
}

In this CSS rule you're stating that div.dropdown is a descendant of div.menu . But in your original markup, it wasn't. Let me know if you'd like more explanation.

Edit:

Is it possible to affect the behaviour of certain elements when other elements are interacted with?

Yes and no. Yes, when the element is a descendant of the element with the pseudo-class hover. No, the rest of the time. This may change with CSS3. But you can use JavaScript to have one element manipulate any element you want.

Regards
Arkinder

No problem

Oh, okay. You had an HTML 4.01 transitional doctype. It may be possible a different way with CSS3 - not sure.

Place the drop down inside of any of the divisions with a class of menu. This will also allow you to have a different drop down for each menu item.

<ul>
<li><div class="menu"><a href="#">Item 1</a><div class="dropdown">Hi</div></div></li>
<li><div class="menu"><a href="#">Item 2</a></div></li>
<li><div class="menu"><a href="#">Item 3</a></div></li>
<li><div class="menu"><a href="#">Item 4</a></div></li>
<li><div class="menu"><a href="#">Item 5</a></div></li>
</ul>

Regards
Arkinder

The column isn't moving, the container for the rest of your content is. More specifically, the margins from this CSS rule.

.container_12, .container_16 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

Try giving the main division a set width.

#main {
    background: url("../images/idea_1.png") no-repeat scroll 10% 0 #FFFFFF !important;
    width: 126.1em;
}

Regards
Arkinder

<footer>

Is not an HTML tag. Try using a division instead.

<div id="footer">
</div>

Then, in your CSS.

#footer {
/* CSS properties */
}

<header> doesn't exist either. Fix those and then we'll work on the drop down menu.

Regards
Arkinder

Yep, I already talked about it. See the edit in this post.

Regards
Arkinder

You're making the navigation 100% of 90% of 90% of the document. Try this.

li > ul li {
    clear: left;
    width: 22.4%;
}

Regards
Arkinder

Now lets get started on coding!

HTML is a markup language, not code. It's also important to mention that it is the structure of a web page, and CSS is the presentation - what styles the HTML. You also failed to mention what the html tag does, and the document extension - .html

The head tag is where you link your css style sheet, link your javascripts, and any other documents. You can even setup your websites title in here.

Or where you can write your CSS and JavaScript. And where you include meta data, favicons, conditional statements, etc.

The

<title>

tag is used to display the title of your webpage at the top of your browser. Any content within the

<head>

tags of your html document will not render on the actual webpage.

It would be a good idea to mention that the title must be within the head tags, and that most elements have beginning and ending tag.

Div tags are used to make special sections. If you give them an id="" then you can style them. This includes changing the width and height, and even changing that background color/image.

id (identifier/identity) is known as an attribute. They are like parameters for each tag. id 's are unique and allows us to make changes just to that element. The style attribute is used to add CSS to an element. This includes changing the width, height, background color, and much more. Using the style attribute for this is …

Hey Toby,

You'll need to use a clear: both; either as its own element before the form, or on the footer. Floating an element removes it from the normal flow of the page, so that's what's causing it to overlap. If you need help figuring it out just let me know.

Regards
Arkinder

You're mistaken. What actually centers the element is a combination of:

margin-left: auto;
margin-right: auto;

As long as you have the left and right margins set to auto, the top and bottom value doesn't matter. margin: auto; is perfectly valid.

Regards
Arkinder

It's definitely being caused by another CSS rule. Do you have a test site that I could view? If not, post your HTML please.

Make sure to ask yourself the question, "Percentage of what?" It can get a little confusing if you don't keep track of them.

Regards
Arkinder

Toby is doing something similar to your shopping cart idea. Read through it and should help you get a better idea about where to start.

Some more tutorials: HTML Dog, Mozilla Developer Network, Google Code University.

Regards
Arkinder

Make sure that you include a doctype. Unless you are parsing XML data you should be using HTML 4.01 Strict.

Regards
Arkinder

No, sorry I thought it was obvious.

Regards
Arkinder

Or, you could actually help the OP by not repeating what iamthwee has already said.

Regards
Arkinder

Okay, something else is affecting it. Post the CSS for the entire page. Also, see if these changes make a difference.

#navMenu ul ul {
	width: 100%;
	visibility: hidden;
	position: absolute;
}
		
#navMenu ul li>ul li {
	width: 25%;
	clear: left;
}

Regards
Arkinder

If you are still using left: 0; remove it, and then you shouldn't need the margin-right. Attached is a screen shot of what I just posted. What is it not doing that you want it to?

EDIT: If you're talking about the small white space on the right of the links, that's just the default background color. Add this to fix it.

#navMenu ul li a {
    width: 100%;
    height: 30px;
    text-align: center; 
    display: block;
    font-family:"Arial", cursive;
    text-decoration: none;
    color: white;
    border: 1px solid black;
    background-color: gray;
}

Regards
Arkinder

Oops, it's percent. There's a little confusion from changing the CSS so much. This is what you should have now that does everything you have asked for so far.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">

		* { margin: 0; padding: 0;}
		
		#navMenu {
			width: 100%;
		}

		#navMenu ul {
			list-style-type: none;
		}
		
		#navMenu ul li {
			width: 25%;
			background-color: gray;
			float: left;
		}
		
		#navMenu ul ul {
			width: 156%;  /* 16% of 156% is roughly 25% of 100% of the browser window */
			visibility: hidden;
			position: absolute;
		}
		
		#navMenu ul li>ul li {
			width: 16%;  /* 16% is about the highest width the browser will allow before putting elements on the next line - this overwrites the value inherited from the #navMeny ul li rule */
			clear: left;
		}
		
		#navMenu ul li a {
			width: 100%;
			height: 30px;
			text-align: center; 
    		        display: block;
    		        font-family:"Arial", cursive;
    		        text-decoration: none;
    		        color: white;
    		        border: 1px solid black;
		}
		
		#navMenu ul li:hover ul {
			visibility: visible;
		}
		
		/*Change color on hover*/
		#navMenu a:hover {
			background: purple;
		}

		#navMenu li:hover {
			color: white;
			background-color: blue;
		}


		/* hover for link items */
		#navMenu ul li:hover ul li a:hover {
			color: white;
			background-color: red;
		}
		
		.clearFloat {
    		clear:both; 
 		}
		
		</style>
	</head>
	
	<body>
	
	<div id="navMenu">
             <ul> <!-- main ul -->
             	<li><a href="index.html">Főoldal</a></li>
             	<li><a href="products.html">Termékek</a>
             		<ul> 
             			<li><a href="">Faáruk</a></li>	
             			<li><a href="">Csavarok</a></li>	
             			<li><a href="">Ragasztók</a></li>	
             			<li><a href="">Szerszámok</a></li>	
             			<li><a href="">Electromos Alkatrész</a></li>	
             			<li><a href="">Egyéb</a></li>
             		</ul>
             		
             	</li> <!-- end of products -->
             	<li><a …

Which word is Products? :P

#navMenu ul ul {
	width: 156;
	visibility: hidden;
	position: absolute;
}

Regards
Arkinder

Okay, it's not me this time. Your post doesn't make sense at all. So you're wanting them to go straight down?

If so:

#navMenu ul li>ul li {
    width: 16%;
    clear: left;
}

Regards
Arkinders

ROFLMFAO. That's not what you wanted? Geez, I misread your post... again! Wow, just one epic fail after the other. Anyways, use the markup and CSS I just posted with this one addition in green.

#navMenu ul ul {
    position: absolute;
    left: 0;
    visibility: hidden;
    width: 156.4%;
}

Regards
Arkinder

Okay, this isn't possible with position: relative; in there. However, you don't need it. The comments in the CSS explains how this works.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">

		* { margin: 0; padding: 0;}
		
		#navMenu {
			width: 100%;
		}

		#navMenu ul {
			list-style-type: none;
		}
		
		#navMenu ul li {
			width: 25%;
			background-color: gray;
			float: left;
		}
		
		#navMenu ul ul {
			width: 156.4%;  /* 16% of 156.4% is roughly 25% of 100% of the browser window */
			visibility: hidden;
			position: absolute;
		}
		
		#navMenu ul li>ul li {
			width: 16%;  /* 16% is about the highest width the browser will allow before putting elements on the next line - this overwrites the value inherited from the #navMeny ul li rule */
		}
		
		#navMenu ul li a {
			width: 100%;
			height: 30px;
			text-align: center; 
    		        display: block;
    		        font-family:"Arial", cursive;
    		        text-decoration: none;
    		        color: white;
    		        border: 1px solid black;
		}
		
		#navMenu ul li:hover ul {
			visibility: visible;
		}
		
		/*Change color on hover*/
		#navMenu a:hover {
			background: purple;
		}

		#navMenu li:hover {
			color: white;
			background-color: blue;
		}


		/* hover for link items */
		#navMenu ul li:hover ul li a:hover {
			color: white;
			background-color: red;
		}
		
		.clearFloat {
    		clear:both; 
 		}
		
		</style>
	</head>
	
	<body>
	
	<div id="navMenu">
             <ul> <!-- main ul -->
             	<li><a href="index.html">Főoldal</a></li>
             	<li><a href="products.html">Termékek</a>
             		<ul> 
             			<li><a href="">Faáruk</a></li>	
             			<li><a href="">Csavarok</a></li>	
             			<li><a href="">Ragasztók</a></li>	
             			<li><a href="">Szerszámok</a></li>	
             			<li><a href="">Electromos Alkatrész</a></li>	
             			<li><a href="">Egyéb</a></li>
             		</ul>
             		
             	</li> <!-- end of products -->
             	<li><a href="about.html">Rólunk</a></li> <!-- end of about -->
             	<li><a href="about.html">Elérhetőség</a></li> …

Exactly, it's called a fluid layout. But as you can it has it's fair share of issues. I just made an incredibly strong cup of French Roast. ^_^ So, I'll take another look and get back to you in a few minutes.

Regards
Arkinder

Use the <br> tag to move the text to the next line. And replace display: inline; with float: left; on the parent divisions.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
		
		#productsMenuFirst {
			float: left;
			width: 100px;
			height: 60px;
			padding-right: 50px; 
			padding-left: 50px;
		}

		#productsMenu {
			float: left;
			width: 100px;
			height: 60px;
			padding-right: 50px; 
		}
		
		#productsMenuLast {
			float: left;
			width: 100px;
			height: 60px;
			padding-left: 50px;
		}
		
		div>div { display: inline;}
		
		</style>
	</head>
	
	<body>
	
	<div id="productsMenuFirst">
   		<div><a href="#"><img src="Images/prodictsImg.gif"></a></div><br>
   		<div><a href="#">Faáruk</a></div>
    </div>   
   	
 	<div id="productsMenu">
   		<div><a href="#"><img src="Images/prodictsImg.gif"></a></div><br>
   		<div><a href="#">Csavarok</a></div>
   	</div>

  	<div id="productsMenuLast">
   		<div><a href="#"><img src="Images/prodictsImg.gif"></a></div><br>
   		<div><a href="#">TestText</a></div>
   	</div>
	
	</body>
	
</html>

Regards
Arkinder