Posts by Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Sorry, I completely misunderstood you. I've been working on editing several hundred photos the past few days and I'm finally finished but exhausted.

You want the images to be inline with the text underneath each image? Yes, I'm looking at it now.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Place it at the bottom of the CSS like I did and it should work.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Okay, then you and I doing something differently.

<!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 {
			display: inline;
			width: 100px;
			height: 60px;
			padding-right: 50px; 
			padding-left: 50px;
		}

		#productsMenu {
			display: inline;
			width: 100px;
			height: 60px;
			padding-right: 50px; 
		}
		
		#productsMenuLast {
			display: inline;
			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>
   		<div><a href="#">Faáruk</a></div>
    </div>   
   	
 	<div id="productsMenu">
   		<div><a href="#"><img src="Images/prodictsImg.gif"></a></div>
   		<div><a href="#">Csavarok</a></div>
   	</div>

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

Regards
Arkinder

Re: Conditional comments are not working

Arkinder 93 Posting Pro in Training

13 Years Ago

Are you using the correct relative path for each CSS file - Are they inside the same folder as the HTML document?

Regards
Arkinder

Re: Conditional comments are not working

Arkinder 93 Posting Pro in Training

13 Years Ago

Remove the lte .

<!--[if IE x]>

<![endif]-->

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: css menu with percentages

Which browser is this happening in? It displays fine in my Firefox 5.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

My previous response was on my iPod, so I'm sorry for not being clear. Don't use display: inline-block; at all. Take what you originally posted, and add this to your CSS.

div>div { display: inline;}

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Remove the inline-block and ignore my edit. Just use the CSS rule I provided.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Yeah, if it were bigger then it wouldn't have to stretch on larger screen resolutions. The solution I provided causes it to be 100% on 1341x768 and down, but the image just isn't large enough to compensate for anything larger without stretching.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Each division's child elements needs to be inline too.

div>div { display: inline;}

EDIT: Should you choose to use inline-block. It isn't supported by IE7 because of a few properties that only exist in the IE7 browser. To fix it, add zoom: 1; and *display: inline; along with display: inline-block; .

Regards
Arkinder

Re: CSS image horizontal align problem

Arkinder 93 Posting Pro in Training

13 Years Ago

Oh, lol. For the margin: auto; to work just give the absolutely positioned element a left and right value.

#Images img {
	display: block;
	position: absolute;
	max-width: 100%;
	height: 100%;
	margin: auto;
	left: 0;
	right: 0;
}

top, bottom, left, and right are the margin equivalent for absolutely positioned elements. Basically, the default values are nothing, where the default for margin is 0. If that makes sense.

Regards
Arkinder

UI / UX Design html-css image web-design

ptemedia commented: Will succeed and find a working solution!!! +2

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: CSS image horizontal align problem

I don't really understand what it is you're trying to do. You're using position: absolute; which removes the images from the normal flow of the page, which will cause them to stack on top of each other. You're also using margin: 0 auto; with display: block; So I can only assume that you're trying to center the images within their containing element. To do this, make these changes. Removed properties in red. Changed/New properties in green.

#Images {
    position:relative;
    text-align: center;
    height: 100%;
    max-width: 100%; <!-- 100px -->
    margin: auto;
}
#Images img {
    display: block;
    position: absolute;
    max-width: 100%;
    height: 100%;
    margin: auto;
}

If this is not what you're going for, then please be more specific.

Regards
Arkinder

UI / UX Design html-css image web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: lightbox for videos

<object width="200" height="100" /> shouldn't have a / .

<a href="/movies/movie.ogv" title="movie">
<object width="200" height="100">
<param name="movie" value="/movies/movie.ogv">
</object>
</a>

Regards
Arkinder

Re: CSS image horizontal align problem

Arkinder 93 Posting Pro in Training

13 Years Ago

You have to have a set height with a px or em unit. Otherwise you're saying height: 70%; should be 70% of nothing, which equals nothing.

Just throw it in a body selector.

body { width: 100%; height: /* xem/xpx */;}

Regards
Arkinder

UI / UX Design html-css image web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

its stretching the background image when you resize your browser.

Well yeah. What else is it supposed to do when the original image is only 1341x768?

Regards
Arkinder

Re: shopping cart grid/table using CSS

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: div hyperlink problem

.three a {
width:100%;
height:100%;
position:absolute;
 
}

The question to ask here is: 100% of what? The answer: The browser window. Give .three a set width.

Regards
Arkinder

UI / UX Design perl web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Good! Well, that's pretty simple, and you don't have to change much.

<div id="wrapper">
	
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>

		<div class="alternate_color box">
		</div>
		<div class="box">
		</div>
		<div class="alternate_color box">
		</div>
		<div class="box">
		</div>

		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>

		<div class="alternate_color box">
		</div>
		<div class="box">
		</div>
		<div class="alternate_color box">
		</div>
		<div class="box">
		</div>
	
	</div>

This only works while the .alternate_color selector comes after the .box selector in your CSS.

Regards
Arkinder

Re: shopping cart grid/table using CSS

Arkinder 93 Posting Pro in Training

13 Years Ago

Hi Toby,

A class is more appropriate because it saves you time, and makes your CSS a lot easier to read. You're using the same CSS for each box, and the entire idea of an ID is that the element is unique. How you should have done this:

<!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;}
		
		#wrapper {
			width: 520px;
			height: 520px;
			background: #ffffff;
			border: 1px solid #600;
		}
		
		.box {
			width: 130px;
			height: 130px;
			background-color: #46311C;
			float:left;
		}
		
		.alternate_color {
			background-color: #968E88;
		}
		
		</style>
	</head>
	
	<body>
	<div id="wrapper">
	
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
	
	</div>
	</body>
	
</html>

So now instead of having to change every CSS rule, you will only have to change two. As for making the layout fluid, it was to show you that height doesn't always play well with percentages. Just don't worry about it for now.

Regards
Arinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Sorry, I really should look at it before saying anything. Try this:

img.bg {
    display: block;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    position: fixed;
    top: 0;
    width: 100%;
}

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Hmm, interesting. I don't know a lot about PHP other than basic syntax.

Regards
Arinder

Arkinder 93 Posting Pro in Training

13 Years Ago

I'm still not following you. It's definitely not Mozilla Internet Explorer... the earth would implode.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Yes, it was sometime ago - year or two. No, I don't sorry. Uh, I'm not sure I understand your question. Mozilla is the non-profit creator of Firefox, while Microsoft is... well, those adjectives aren't appropriate here. Yes it should be, and is now. I don't know the extent of Mozilla's work, just that they did help.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Internet Explorer has always been incredibly behind. IE9 is still roughly 8 years behind web standards and the only reason IE8 supported anything was the generosity of Mozilla. It's really pathetic when a company like Microsoft has to have a non-profit company fix their browser for them. While Mozilla did help - some. IE will always be behind every other browser because the only way to fix it, is to re-code the entire thing - not happening.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Use this to make sure that your icon is 16x16 pixels and using a 16 color palette. After, try doing a direct link to your favicon, i.e. http://site.com/favicon.ico As long as that works, continue using the markup you have been. It can take a few days for a favicon to show up, and there's a bug in IE that can cause it disappear from time to time.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: lightbox for videos

No, they do. You just use an object tag instead of image tag.

Regards
Arkinder

Re: shopping cart grid/table using CSS

Arkinder 93 Posting Pro in Training

13 Years Ago

Alright, so if you really want to learn the language. You have to use it. So by just giving you the markup and CSS you wouldn't actually gain much. So instead, I'm going to walk you step by step through the thought process, and then help you with markup and CSS.

Doing this with a table is pretty easy, and it's not really tabular data, so let's avoid that. This leaves you with the option of lists or divisions. It really doesn't matter, but for the sake of simplicity, use divisions.

I am looking to create a grid/table for a shopping cart page

Okay, so make this page. You currently don't have content so you would think that it's supposed to be blank. However, you should always start with a basic exoskeleton - so to speak. This is important because your starting with a valid page, and you won't have to worry about adding any of it later.

<!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">
	</head>
	
	<body>
	</body>
	
</html>

inside the main content container

So in the page simply add a division and give it an ID. Call it container, content, wrapper, or whatever. Just make sure that its purpose is clear.

I want the overall grid to be a width of 520px and have a height of 520px

The basis of the grid will be the container division, so your CSS would look something like this:

…

Re: Firefox CSS Padding / Margin / Float Issue

Arkinder 93 Posting Pro in Training

13 Years Ago

That's a good question, but it definitely shows why Firefox is the official browser of the W3C.

Regards
Arkinder

UI / UX Design html-css web-browser web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Navigation Menu Bar - Centered

Yes, try this.

.sf_navigation {
    clear:both;
    margin: 0 auto;
    padding:0;
    width: 95%;
}

Regards
Arkinder

UI / UX Design first-post web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Navigation Menu Bar - Centered

Hi mundee,

Welcome to Daniweb! To start, you need a good foundation in HTML and CSS. I recommend the following tutorials: HTML Dog, Mozilla, Google, and of course anything that the W3C has to say.

Unfortunately without seeing the markup from the template I can't give you an exact answer. However, a widely used technique for centering elements is by giving the margin property a value of 0 auto . For example:

<!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">
		
		#whatever { 
			width: 70%;
			margin: 0 auto;
		}
		
		</style>
	</head>
	
	<body>
	
	<div id="whatever">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	
	</body>
	
</html>

If you need a better explanation or help with something, feel free to ask.

Regards
Arkinder

UI / UX Design first-post web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Firefox CSS Padding / Margin / Float Issue

I realized this while taking a shower this morning. What Firefox is doing makes sense. div.floatleftbox is being parsed outside of the normal flow of the page, on its own layer so to speak. But this doesn't create a problem, it wouldn't make sense to. However, you have a clear: both; that forces the element below any floated element. After a quick check with the W3C, I was right. ^_^

Values other than 'none' potentially introduce clearance. Clearance inhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float.
Computing the clearance of an element on which 'clear' is set is done by first determining the hypothetical position of the element's top border edge. This position is where the actual top border edge would have been if the element's 'clear' property had been 'none'.
If this hypothetical position of the element's top border edge is not past the relevant floats, then clearance is introduced, and margins collapse according to the rules in 8.3.1.

The full documentation

Regards
Arkinder

UI / UX Design html-css web-browser web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Since you're able to use position: fixed; with this page you could probably just remove the min-height .

Regards
Arkinder

Re: Wordpress theme looking terrible in IE

Arkinder 93 Posting Pro in Training

13 Years Ago

First, validate your HTML and CSS.

You have listed this CSS rule twice with two values. Use only one - the second one.

.clearfloat { display: inline-block;}

.clearfloat { display: block;}

The featured side bar doesn't have enough width in IE, which is what's pushing the text down.

#featured .info {
    float: right;
    margin-top: 5px;
    padding-top: 5px;
    width: 180px; /* Increase this, and use dynamic unit (%/em) */
}

Mess with those a little bit and see where that gets you.

Regards
Arkinder

UI / UX Design web-design wordpress

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Picture not being Displayed

It should be. Align is a deprecated attribute - don't use it. Just try displaying it as a normal image first

<img alt="" src="Images/header.gif">

Are you locally hosting this or is it on a site?

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Sorry, I'm doing about 8 billion things and I wasn't actually thinking. The width of each list element is creating the gap. Setting a width would usually fix this problem except you are using display: inline; Create a new rule just for the list elements in the navigation bar, and float them left.

#primarynavigationbar ul li { float:left;}

Now this will remove the list elements from the normal flow of the page, which is going to create a slight height issue. To fix this simply give the navigation bar a set height.

#primarynavigationbar {
    background-color: #171717;
    border-top: 0.04em solid #DDDDDD;
    font-size: small;
    height: 1.4em;
    padding: 0.8em 0;
}

This, along with the padding: 0.8em 0; should fix the problem. Once again, sorry.

Regards
Arkinder

Re: Picture not being Displayed

Arkinder 93 Posting Pro in Training

13 Years Ago

The correct syntax for the background property is: background: url('Images/header.gif') no-repeat; Also, file paths are case-sensitive.

So you have a folder named Images in the same folder as the HTML/CSS document with this CSS rule?

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

The gap is from the padding left here:

#primarynavigationbar {
    background-color: #171717;
    border-top: 0.04em solid #DDDDDD;
    font-size: small;
    padding: 0.8em;
}

Try using padding: 0.8em 0; instead.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: validate problem

No worries, but you should use the label tag and CSS. For example:

<form action="register.php" method="post">
	<fieldset>
	<legend>Registeration</legend>
		<label for="fullname">Your full name:</label>
			<input type="text" name="fullname" class="resetfont"><br>
		<label for="username">Username:</label>
			<input type="text" name="username" class="resetfont"><br>
		<label for="password">Choose a password:</label>
			<input type="password" name="password" class="resetfont"><br>
		<label for="fullname">Repeat password:</label>
			<input type="password" name="repeatpassword" class="resetfont"><br>
		<label for="email">Email:</label>
			<input type="text" name="email" class="resetfont"><br>
		<input type="submit" name="submit" class="resetfont" value="Register">
	</fieldset>
	</form>

* {
			margin: 0;
			padding: 0;
			font-size: 100%;
		}
		form {
			margin: 0.625em;
		}
		fieldset {
			padding: 0.625em;
			background-color: #F2EFE9;
			border: 1px solid #FFF;
			border-top: 1px solid #000;
			border-bottom: 1px solid #000;
		}
		legend {
			font-weight: bold;
		}
		label, input {
			display: block;
		}
		label {
			float: left;
			width: 10em;
		}
		.resetfont {
			font-size: small;
		}

JavaScript is just not my thing. So just re-post your question in the JavaScript section and someone should be able to help you.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: validate problem

15 years later, tables for layout with an HTML5 doctype... *sigh*

If your form is not functioning correctly, it is probably because of your JavaScript, not because of your outdated HTML markup. Please be more specific when asking questions, and post in the correct forum.

Regards
Arkinder

Re: Firefox CSS Padding / Margin / Float Issue

Arkinder 93 Posting Pro in Training

13 Years Ago

.floatleftbox is being floated left, which removes it from the normal flow of the page. Also, it's pointless to have display: inline; and float: left; . The float will be the only one taken into account.

The reason this is happening is because of margin: 100px auto; The browser is just compensating. If you remove the float: left; and display: inline; it should display correctly.

Regards
Arkinder

UI / UX Design html-css web-browser web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Required Website Design

Do you have any previous experience? Some tutorials: htmldog, Mozilla, Google.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

There is not anything in the CSS that you have provided that 'highlights' anything. Please post a link to a test page or the complete markup and CSS.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: CSS Layout Problem

The padding is causing the two elements to exceed the 980px width. Increase the width and it should stay.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

The browser adds its own margin and padding by default. To remove this use a universal rule to reset the margin and padding for every element.

* {
    margin: 0;
    padding: 0;
}

Your problem was a little vague, so if this didn't answer it then please be a little more specific.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: How to virtualize OSX?

No, it's not possible. It has something to do with the licenses. It shouldn't be too difficult to find a replacement for it though. OS X can still run PowerPC applications. If you have an install disk for the OS, you could always try making a new partition in the drive and installing it there.

Regards
Arkinder

macOS apple os-x virtualization

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: lightbox for videos

Yes, using jQuery there are tons of options. A lot of these use photo, but they are easily replaced with videos.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: html 5 video tag

No problem. Just read the information on skins here.

Regards
Arkinder

UI / UX Design html-css video web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Website not working in IE

Not really without changing a few things in your HTML/CSS. You could just use a different variation of #content for each page - #contentHome, #contentAbout, #contactWhatever.

Regards
Arkinder

Re: Extracting Data from a .txt file into a .html file using html

Arkinder 93 Posting Pro in Training

13 Years Ago

This is not possible with HTML or CSS. You would need a server-side language like PHP.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Website not working in IE

The content rule does not. Use about 23em.

#content {
    background: none repeat scroll 0 0 #121212;
    height: 23em;
    padding: 47px 0 450px;
}

Regards
Arkinder