Log in

View Full Version : optimizing help, im a noob


Raztat
06-23-2007, 01:01 AM
Hey this is my first post. Ive recently started to build my first site. I was using tables inside tables but a friend of mine told me it would be better to use CSS. I didn't know much about it but I looked into it and The site I have up now is what I came up with from my research.

My site is www.bkconway.com

My question is how would I get it to look good in all browsers? It works in Firefox. But in IE or Opera some of it is off. Also when you don't have the browser on maximized the picture will disappear. any help would be appreciated.

my code for my CSS is below

/* CSS Document */
/* Coded by Brandon Conway */

/*Links*/

a:link{
text-decoration:none;
color:#FF00FF;
font-family:times;
font-size:10px;
}

a:visited {
text-decoration:none;
color:red;
}

a:hover, a:active {
text-decoration:none;
color:red;
}

/*Paragraphs*/

p{

text-align: left;
color: black;
font-family: times;
font-size:11px;
}

p.bottomlinks{

text-align: center;
color: black;
font-family: times;
font-size:13px;
}

/*Heading 1*/

h1{
font-size:18px;
font-weight:600;
}

/* Body */

body {
font:"Times New Roman", Times, serif;
color:#000000;
background-color:#FFFFFF;
margin:auto;
font-size:13px;
}

/*Menu*/

.container {
width: 500px;
padding: 15px;
margin: 3px 100px 20px 0;
border: 1px solid #ccc;
background: #FFCCFF;
}

/* circle */

#navCircle {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}

#navCircle li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navCircle a:link, #navCircle a:visited {
float: left;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}

#navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover {
padding-bottom: 6px;
color: #000;
background: url(.../images/circle.gif) no-repeat bottom center;
}

.container2 {
width: 850px;
padding: 15px;
margin: 3px 100px 20px 0;
border: 1px solid #ccc;
background: #FFCCFF;
}

img.treetop
{
position:absolute;
right:573px;
top: 71px;
z-index:1;
}

img.treebottom
{
position:absolute;
right:425px;
top: 308px;
}

img.starsname
{
position:absolute;
right:762px;
top: 65px;
}


my html for the index is below


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>
<head><link rel="stylesheet" type="text/css" href="css/main.css">
<title>Brandon Conway | Ninja Master</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
</head>

<body>

<div class="container">
<ul id="navCircle">

<li></li>
<li><a href="index.html">Home</a></li>
<li><a href="http://bkconway.blogspot.com/">Blog</a></li>
<li><a href="aboutme.html">About me</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contactme.html">Contact me</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
</ul>
</div>
<p><br />
<br />
<br />
<img src="images/Treetop.jpg" class="treetop" /><br />
</p>
<br /><br /><br /><br /><br /><br /><br />
<img src="images/treebottom.jpg" width="549" height="154" class="treebottom" /><img src="images/starsname.jpg" width="521" height="278" class="starsname"/><br />
<br /><br />
<div class="container2">
<br /><br /><br /><br /><br />
<h1>Welcome</h1>
<p>Welcome to my online portfoilo. This site is to showcase<br />
my talents as an upcoming web designer. My strong point is HTML.<br />
I also have knowledge in Javascript, C++, Java, and CSS. Im<br />
currently teaching myself CSS and so fun its been a fun journey.<br />
I actully think I love it more than HTML it self. I work in<br />
Dreamweaver, Fireworks, and Flash. Im going to soon venture<br />
into the wonderful world of digital photography. <br /><br />

This site was made to be viewed in <a href="http://www.firefox.com">FireFox</a>. IE will not display it properly. This will be fixed soon! <br />
<br />
<br />
<br />
<br />
<p class="bottomlinks"><a href="index.html">Home</a> | <a href="http://bkconway.blogspot.com/">Blog</a> | <a href="aboutme.html">About me</a> | <a href="portfolio.html">Portfolio</a> | <a href="contactme.html">Contact me</a> | <a href="tutorials.html">Tutorials</a><br /></p>
<div align="center">Copyright © 2007 bkconway.com All Rights Reserved.
</div>
</div>
</body>
</html>

Thanks!
dog
06-23-2007, 02:23 AM
Raztat,

I've revised your code.

Check it out:

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

<html>
<head><link rel="stylesheet" type="text/css" href="css/main.css">
<title>Brandon Conway | Ninja Master</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
</head>

<body>

<div class="container">
<ul id="navCircle">
<li><a href="index.html">Home</a></li>
<li><a href="http://bkconway.blogspot.com/">Blog</a></li>
<li><a href="aboutme.html">About me</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contactme.html">Contact me</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
</ul>
</div>

<img src="images/Treetop.jpg" class="treetop" />
<img src="images/treebottom.jpg" width="549" height="154" class="treebottom" />
<img src="images/starsname.jpg" width="521" height="278" class="starsname"/>

<div class="container2">
<h1>Welcome</h1>
<p>Welcome to my online portfoilo. This site is to showcase<br />
my talents as an upcoming web designer. My strong point is HTML.<br />
I also have knowledge in Javascript, C++, Java, and CSS. Im<br />
currently teaching myself CSS and so fun its been a fun journey.<br />
I actully think I love it more than HTML it self. I work in<br />
Dreamweaver, Fireworks, and Flash. Im going to soon venture<br />
into the wonderful world of digital photography.</p>
<p>This site was made to be viewed in <a href="http://www.firefox.com">FireFox</a>. IE will not display it properly. This will be fixed soon!</p>

<p class="bottomlinks">
<a href="index.html">Home</a> |
<a href="http://bkconway.blogspot.com/">Blog</a> |
<a href="aboutme.html">About me</a> |
<a href="portfolio.html">Portfolio</a> |
<a href="contactme.html">Contact me</a> |
<a href="tutorials.html">Tutorials</a>
</p>

<p class="center">Copyright &copy; 2007 bkconway.com All Rights Reserved.</p>
</div>

</body>
</html>



main.css


body {
font:"Times New Roman", Times, serif;
color: black;
background-color: white;
font-size:13px;
}

* { margin: 0; padding: 0; }

a:link {
text-decoration: none;
color: #FF00FF;
font-size:10px;
}

a:visited, a:hover, a:active {
text-decoration:none;
color: red;
}

.center {
text-align: center;
}

p {

text-align: left;
font-size:11px;
}

h1{
font-size:18px;
font-weight:600;
margin-bottom: 10px;
}


/* container */

.container {
height: 21px;
width: 500px;
padding: 15px;
margin-top: 3px;
border: 1px solid #ccc;
background: #FFCCFF;
}


/* circle */

#navCircle {
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}

#navCircle li {
display: inline;
list-style-type: none;
}

#navCircle a:link, #navCircle a:visited {
float: left;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
color: #708491;
}

#navCircle a:active, #navCircle a:hover {
color: #000;
}


/* images */

img.treetop {
position: absolute;
left: 480px;
top: 71px;
z-index:1;
}

img.treebottom {
position:absolute;
left: 332px;
top: 306px;
}

img.starsname {
position:absolute;
left: 0;
top: 65px;
}


/* container 2 */

.container2 {
width: 850px;
padding: 109px 15px 15px 15px;
margin-top: 250px;
border: 1px solid #ccc;
border-width: 0 1px 1px 1px;
background: #FFCCFF;
}


/* bottom links */


p.bottomlinks {
margin: 70px auto 14px auto;
text-align: center;
font-size:13px;
}


Take a look and let me know what you think.


My question is how would I get it to look good in all browsers? It works in Firefox. But in IE or Opera some of it is off. Also when you don't have the browser on maximized the picture will disappear. any help would be appreciated.

I haven't checked this in Opera because I don't have it. But now it's behaving in a very similar way in IE and Firefox .

Let me tell you about the changes I've made:


You didn't have a doctype... so I've put one in. I beleive this allows helps the browsers to understand how you expect them to treat your code.
I've taken out paragraph and line-break tags that you were using to position your code. This isn't their purpose and the effect this creates will differ greatly depending on the browser. You will find CSS properties (like margins) give you greater control anyway.



Also when you don't have the browser on maximized the picture will disappear.


You gave the images absolute positions based on their distance from the right margin. I've changed 'right' to 'left' to solve this one.


Personally, I think your page lacks flexibility. It's a good idea to consider how people using larger or smaller screens will view your page.

Also, I think you should think about other ways to use your images. Perhaps as images defined by the CSS rather than placing them as elements on the page.

I hope this helps.

Good luck.
dog (http://dog.dc5b.com)
Raztat
06-23-2007, 04:54 AM
O thanks very much, this works in all browsers. I still need to learn CSS I got some ebooks on it. Thanks for the help! :)