Upvoted Posts by Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Problem With Setting Text Vertical Align to Top in Div ot Table Tag

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

h3 { display: inline;}  /* removes space before and after the heading elements */

.column {
	width: 278px;
	float: left;  /* places divisions on the same line */
}

.space { margin-left: 66px;}

</style>
</head>

<body>
<div>

<h3>Welcome</h3><br>
<div class="column">Ensure you are not spamming, plugging or linking to your product, service or website anywhere within your post.</div>
<div class="column space">Ensure you are not spamming, plugging or linking to your product, service or website anywhere within your post.</div>

</div>
</body>
</html>

Paragraphs and heading elements insert a new line both before, and after, the element. To remove this, use the display property the way I did above.

Regards
Arkinder

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Button Placement

The footer isn't being pushed anywhere, it's just not big enough to be seen. Give it a set height in px or em.

#footer {
    background: none repeat scroll 0 0 #4D3821;
    clear: both;
   height: 100px;
    margin: 0;
    padding: 0;
}

I'm not sure that I understand you. You want the check box next to the name, image, ?

Regards
Arkinder

UI / UX Design html-css web-design

iamthwee commented: Liking your replies...Keep it up. +15

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: A four function calculator (HTML)

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

Regards
Arkinder

UI / UX Design html-css web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Nesting div selector

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

UI / UX Design html-css web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: css menu with percentages

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

UI / UX Design html-css web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: [Guide] How to make a static webpage [Beginner]

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 …

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: [Guide] How to make a static webpage [Beginner]

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

Regards
Arkinder

UI / UX Design web-design

G&G Designing commented: I would have added that when i start to actually code the webpage, im just telling people what the tags stand for and how to use them -1

Ezzaral commented: Seems like a good point to me. No reason this should have negative rep. +15

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: CSS image horizontal align problem

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: Highlight button

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

UI / UX Design web-design

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

UI / UX Design web-design

jie3 commented: Excellent agvice, solved my problem :-) +1

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Navigation Bar and Content problem

He means use em or % for everything. Keep in mind that the actual value outputted by the em unit is based on font size.

An example for the % unit.

div#container {
    border-color: white white -moz-use-text-color;
    border-style: solid solid none;
    border-width: 10px 10px 0;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    width: 69%; /* Instead of the 800px you were using */
}

Regards
Arkinder

UI / UX Design web-design

AngelicOne commented: very helpful +3

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: rounder corners in IE with css

Have fun.

Regards
Arkinder

UI / UX Design html-css web-design

jjustin3 commented: +rep for humor +0

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: html 5 video tag

JavaScript. Save yourself the trouble and just use this.

Regards
Arkinder

UI / UX Design html-css video web-design

TheNNS commented: thanks, worked pefectly +9

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Table Position Way Off In FF

You should never use tables for layout. It is an outdated technique from 1996. The problem is from margin: 0; in this CSS rule.

ul#menu {
    background: url("../img/menu-bg.gif") repeat-x scroll left top #FFFFFF;
    font-family: "Lucida Grande",Verdana,sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    height: 43px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

This is because the form isn't being pushed far enough down. You can either remove the margin: 0; and allow FF to set it automatically. Or you can use margin-bottom: 8px; Regards
Arkinder

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

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Hidden links showing on screen

Never, ever, use any version of Internet Explorer as a test browser. It is 8+ years behind web standards, and this is exactly what happens when you do. You're also using tables for layout, which is an outdated technique from 1996. Firefox, Safari, and Chrome are only displaying what you told them too.

The first thing you need to do is put a real doctype in your page.

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

You have a lot of deprecated markup and attributes. After adding it validate your HTML and CSS. Once those are fixed, view the page in Firefox and post back here.

Regards
Arkinder

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: <br> and <br />

we must practise to do it in correct format. Better you use <br /> <img />. Though it will not change layout, if you do not add space and slash.

This is incorrect. XHTML is NOT HTML. If it was, then XHTML would be called HTML5. If your page is not parsing XML data then the XHTML doctype should not be used. <br> is valid HTML, <br /> is valid XHTML, while <br> and <br /> are valid HTML5.

Regards
Arkinder

UI / UX Design web-design

Hani1991 commented: Impolite way of correcting other people -1

Ezzaral commented: Doesn't sound impolite to me. +15

Pro2000 commented: Arkinder is apparently trying to help not more!! +3

jingda commented: Arkinder is trying to help, there is nothing impolite about this post +10

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Joomla Accounts Not Activating Automatically

Alright, so here are few things you can try. In the Global Config > Server > Mail Settings . Make sure that the "Mail From" address is not the default "you@yourdomain.com"

If that doesn't work, try changing Global Configuration < Server < Mail Settings < Mailer to Sendmail .

And another possible solution. Global Configuration < Server < Mail Settings < Mailer to SMTP using SSL , and remove any non a-z characters out of the From Name box.

These are just things that I've been able to find that other users used to fix that problem. As I said before, I've never used Joomla!. I hope that it helps regardless.

Regards
Arkinder

Web Development php

vectro commented: Thanks again +2

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: CSS alignment problems for nav rollovers

This is easy enough to fix, but before going straight to the problem there are several things that can be done to make things a little easier. I'm going to try to change your markup as little as possible, and making the changes red.

Let's begin with the header section. The two images have a combined height of 180px. However, you've set the height of their container to only 115px.

#header {
    background: none repeat scroll 0 0 #4D3821;
    height: 180px;
    margin: 0;
    padding: 0;
    position: relative;
}

This will push your navigation down a bit. Don't worry, we'll fix that soon. Next we're going to move where your images are in the markup. They're displayed before your navigation, and that's the way it should be in your markup.

<div id="header">
<img width="960" height="115" src="http://i1200.photobucket.com/albums/bb328/tobeeornot/header_bg.jpg" alt="header">
<img width="960" height="65" src="http://i1200.photobucket.com/albums/bb328/tobeeornot/indentifier.jpg">
                <div id="shoppingCart"><a href=".htm" title="shop">shop</a></div>
                <div id="joinButton"><a href="mailto:contact@bliss.com" title="join">join</a></div>
                <div id="mainNav">
                    <ul>
                        <li><a href="index.htm">about us</a></li>
                        <li><a href="products.htm">products</a></li>
                        <li><a href="order.htm">custom order</a></li>
                        <li><a href="contact.htm">contact us</a></li>
                        <li><a href="recipe.htm">recipe</a></li>
                    </ul>
                </div><!-- end #mainNav -->
 </div><!-- end #header -->

Now it will look exactly like it did before you moved the images. It just makes a little more sense to anyone reading the markup. Now let's move your navigation back up with the top property.

#mainNav {
    background-color: #8DADAF;
    bottom: -30px;
    height: 30px;
    top: 115px;
    left: 230px;
    position: absolute;
    text-align: center;
    width: 590px;
}

Now we can remove <h3> </h3> from your mainContent section, and decrease its height to …

UI / UX Design html-css web-design

jingda commented: Welcome back, Arkinder!! +9

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: full css/html/javascript code for animation

This forum isn't for free markup, scripts, or code.

You will need a server-side language such as PHP to retrieve the images from a file on your server. Unless of course it is hosted somewhere else. jQuery is a JavaScript library, and it is capable of doing what you want. Google is an incredibly quaint, but still effective tool.

Here is an example of what you are trying to achieve. Click on the button in the top-right corner for the source code.

Regards
Arkinder

UI / UX Design html-css java javascript web-design

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: php file upload

The script w3schools offers is limited to image file types only. Add the flash file type and it should work.

if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "application/x-shockwave-flash"))
&& ($_FILES["file"]["size"] < 20000))

Regards
Arkinder

Web Development php

karthik_ppts commented: yes +6

Arkinder 93 Posting Pro in Training

13 Years Ago

Re: Does anyone know how to add a read more tag to the Fluid Tumblr Theme?

I'm at school right now, so I don't have access to Tumblr. However, you could make your own theme or try inserting the tags you need with JavaScript.

Regards
Arkinder

UI / UX Design web-design

Azmah commented: thanks :D +1

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: equivalent position - is it so?

For example: if you positioned an element absolutely, you can either use top or margin-top . They do not stack.

Regards, Arkinder

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: equivalent position - is it so?

Visually yes, but no. Margin is part of the box model, while the top and left properties interact with elements a little differently, and typically require the element to be removed from the normal flow of the page.

relative-placed blocks? Do you mean relatively positioned block level elements?

Regards, Arkinder

UI / UX Design web-design

vedro-compota commented: +++++++++ +1

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: Css "a", what is it?

If you remove the a then the styles listed will no longer effect that element. 

<div id="nav-menu"> <!-- just #nav-menu will affect this -->
    <ul>
        <li><a href="#">Link</a></li><!-- what you currently have will affect this -->
        <li><a href="#">Link</a></li><!-- it's an anchor tag (a) in side of a list tag (li) -->
    </ul>
</div>

So removing the a from your code will cause the styles to affect the list tag, because you will only have #nav-menu li . If you just had #nav-menu it would only affect the div with the id nav-menu.

So if you have,

#nav-menu {
    background-color: blue;
}

It will make the background color of the div with the id nav-menu blue.

If you have,

#nav-menu li {
    background-color: red;
}

Any list tag inside of the div with the id nav-menu will have a red background color.

Regards, Arkinder

UI / UX Design html-css web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: Need Help With Centering Form

There are two options. You can center the entire form or just the elements inside of it.

Option 1~

<div id="wrapper">
<h2 class="extra">Submit <span>Application</span></h2>
 
<form action="upload.php" method="post" enctype="multipart/form-data">
 
<input type="file"  name="ufile" />
<input type="submit" value="Upload" />
 
</form>
</div>

#wrapper {
    text-align: center;
}

This will center all of the elements inside of the form.

Option 2~

<div id="wrapper">
<h2 class="extra">Submit <span>Application</span></h2>

<form action="upload.php" method="post" enctype="multipart/form-data">

<input type="file"  name="ufile" />
<input type="submit" value="Upload" />

</form>
</div>

#wrapper {
    margin: 0 auto;
    width: 350px;
    border: 1px solid #000;
}

This will center the div. The width is required for margin: 0 auto; to work.

Regards, Arkinder

UI / UX Design web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: hide html code on my website

Why don't we all start bringing up three year old threads that have already been answered, and post inadequate replies that don't work.

UI / UX Design html-css web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: Reference absolute path

Almost, your sidebar.php file would need to look like this.

<div id="sidebar">
<p/>
<a href="http://www.ewh.ieee.org/r1/schenectady/">
<?php
   $ROOT = "http://ewh.ieee.org/r1/schenectady/";
 
    echo "<img src=\"" . $ROOT . "images/image.jpg\">";
?>
</a>
<p/>

Regards, Arkinder

UI / UX Design web-design

daviddoria commented: Thanks! +4

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: Down, dino! Footer just won't stay put

Basically the bottom line is, to be able to have your pages without content display the same as your pages with content, you're going to have to do something like this.

Regards, Arkinder

UI / UX Design html-css web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: Down, dino! Footer just won't stay put

How classy of you.

This isn't production code, and there are compression programs available to remove whitespace. Readability is important for debugging, scanning, and reading in general. This is a forum, and considering that we read 30% slower on a computer, I'd rather not waste my time reading tag/selector soup for a disregarded end tag or forgotten semicolon. Whitespace does not belong in the final produced code, but it has its place in web design.

You've only been on this forum for a year, but just in case you forgot, here's a little reminder.

Regards, Arkinder

UI / UX Design html-css web-design

Arkinder 93 Posting Pro in Training

14 Years Ago

Re: Down, dino! Footer just won't stay put

It's moving around because you have no content to push it down. Give your container division a set height (px, em, etc.)

Or you can give your footer division a margin-top.

Regards, Arkinder

UI / UX Design html-css web-design