Member Avatar for 100%

Hey everyone,

Okay, i've got a pretty okay understanding of HTML and CSS. Parts of HTML I havnt learnt yet are Forms/Tables and Frames, After I have a basic understanding of that I want to move on to javascript, but I want to do it quickly, so if someone can give me quick awnsers that would be great.

First of all, I just want to ask if this layout looks ok in other browsers:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>::||Cool Layout||::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
margin:50px;
padding:10px;
background:#E0EEEE;
text-align:center;
font-family: sans-serif, serif, courier;
}


#container {
margin:auto;
background:#B2DFEE;
width:720px;
border:1px solid #000;
padding: 5px; }


/* #small {
width:auto;
height:20px;
text-align:right;
padding:3px;
}*/


#feature {
width:500px;
height:120px;
text-align:right;
padding:3px;
background: #67C8FF;
border: 1px solid #000;
margin-left: 35px; 

}

#rightnav
{
float: right;
width: 20%;
padding: 1em;
background: #cdcdcd;
border: 1px solid #000;
z-index:1;

}

#leftnav
{
float: left;
width: 10%;
padding: 2em;
background: #cdcdcd;
border: 1px solid #000;
}

#header {
background:#38B0DE; #67C8FF
width:auto;
height:70px;
border:1px solid #000;
position:relative;
text-align: left;
padding: 5px;

}

#main {
position:relative;
background: #67C8FF;
padding:5px;
width:auto;
border-top:1px solid #000;
border-bottom:1px solid #000;
text-align:left;
border: 1px solid #000;
margin-left: 120px;
z-index:2;
}

h1 {text-align:center;}

#footer {
background: #cdcdcd;
text-align:center;
height: 70px; 
border: 1px solid #000;

}

img {
padding: 5px;
}

</style>
</head>

<body>
<p> 


</p>
<div id="container">
<!-- <div id="small">
<small><a href src="">Home</a> | <a href src="">About</a> | <a href src="">Contact</a></small>
</div> --> 

<div id="header"><IMG SRC="testicon.gif" ALT="[Test image]" ALIGN=right>
<h1 style="text-align: left"> HEADER </h1> 

 </div>
<br>



<div ID="rightnav"><br>
<IMG SRC="testicon.gif" ALT="[Test image]"> <br>
<IMG SRC="testicon.gif" ALT="[Test image]"> <br>
<IMG SRC="testicon.gif" ALT="[Test image]"> <br>
</div>
<div ID="feature">
<b> I am An AMAZING feature </b>
</div>



<br> 
<div ID="leftnav">Excelent <br>
Excelent <br>
Excelent <br>
Excelent <br>
</div>
<div id="main"> 
<small>
<a href src="">Home</a> | <a href src="">About</a> | <a href src="">Contact</a> | <a href src="">About</a> | <a href src="">Contact</a> | <a href src="">About</a> | <a href src="">Contact</a> | <a href src="">About</a> | <a href src="">Contact</a></small>
<h1>Main</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>... sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit </p>

</div>

<br>
<div id="footer"> &copy; Copyright Me!! Mohahaha! </div>

</div>
</body>

</html>

Edit: I've Solved my second question about the form thing, it was quite simple! Then Again it alway is when you have figured it out. :o

PS: I named this topic My Questions, incase I have any more, instead of making another topic. Hope that okay. :)

  • 3 Contributors
  • 5 Replies
  • 209 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by iamthwee

Recommended Answers

All 5 Replies

Member Avatar for tgreer

If you're serious about web development, you'll install the main browsers, so you can test your layouts yourself.

Also, we prefer you start a thread for each new question, with a descriptive subject. This way, others who are searching for answers can find the threads. They won't know that "My Questions" might answer a question about table-based layouts, for example.

Member Avatar for 100%

If you're serious about web development, you'll install the main browsers, so you can test your layouts yourself.

Also, we prefer you start a thread for each new question, with a descriptive subject. This way, others who are searching for answers can find the threads. They won't know that "My Questions" might answer a question about table-based layouts, for example.

I have firefox and opera. IE always goes weird on me, and what others shall I get, netscape? can I use safari? what others? Your right, I should test them my self.

=)

Member Avatar for iamthwee

>IE always goes weird on me

Sorry to burst your bubble, but if iyou intend to be a serious web developer then IE is the first browser you should aim to get perfect.

Member Avatar for tgreer

Sorry to burst your bubble, but if iyou intend to be a serious web developer then IE is the first browser you should aim to get perfect.

I strongly disagree with this advice. It's more important to get the underlying code right, and then address any browser discrepancies. As a web developer, I prefer FireFox, as the most standards-compliant browser.

Once I have the code right, with the page displaying correctly in FireFox, and validated against the w3c.org validators, then and only then will I test/fix IE.

Starting by getting things to "look right" in IE will lead to buggy code and extreme maintenance issues down the road.

Member Avatar for iamthwee

>I strongly disagree with this advice

No that's not what I meant.

IE is used by more people than firefox, fact. Don't they have 90% of the market share ? Anyway you need to make sure it's displaying ok in IE at the very least. Seems the OP is neglecting this fact. In the code he posted the mouseovers don't work for IE. Well, at least that's what I found when I tested it.

I'm not saying write your code in a piss poor way such that it only works in IE. No far from it.

Like you said writing good standard code to display correctly across the most popular browsers is paramount.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.