Zymic Webmaster Forums > Need Help On This Design

Help - Search - Members - Calendar

Full Version: Need Help On This Design

Zymic Webmaster Forums > Web Design & Development > General Web Design Discussion

Red-Spiral

Jul 2 2008, 04:27 PM

Ok here is a brower screenshot of my design:

The things circleed in red is my problem, how do i get ris of them

here is my css code:

CODE

/* By Matthew Caddoo - 2006 */


* {margin: 0; padding: 0;}
html, body { height: 100%; }
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
background: url(/*need to inster background here*/);
}


/* Start of clearfix */
.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {
display: inline-block;
}  

    /* Holly Hack Targets IE Win only \*/
    * html .clearfix {height: 1%;}
	.clearfix {display: block;}
    /* End Holly Hack */
	
/* end of clearfix */	


/*
_________________________________________________________

Start of upper section
_________________________________________________________	
*/	
.mainarea { 
width: 800px;
margin: 0 auto;
background: #CCC;
border-right: #666 1px solid;
border-left: #666 1px solid;
background-image: url(images/bg.jpg);
background-repeat: repeat-y;
min-height: 100%;
}
.line {
height: 15px;
border: 1px solid #FFF;
background-color: #8FA1B3;
}
.location {
padding: 7px 10px 3px 10px;
font-size: 12px;
color: #FFF;
height: 18px;
border: 1px #FFF solid;
border-bottom: 0;
background-color: #333;
border-top: 0;
}
.head {
height: 100px;
background: #FFF;
}

/*
_________________________________________________________

End of upper section
_________________________________________________________	
*/



/*
_________________________________________________________

Start of navigation section
_________________________________________________________	
*/

.nav {
border: 1px solid #FFF;
border-top: 0;
width: 250px;
background: #6d87a1;
float: left;
}	
.nav h3 {
font-size: 13px;
font-weight: bold;
color: #b5c5d5;
padding: 3px 3px 3px 5px;
background: #273b4f;
border-top: 1px solid #FFF;
}
.nav p {

}
.nav ul{
list-style-type: none;
}
	
	.nav li {
		font-size: 11px;
		list-style-type: none;
		}
.nav a {
background: #56718d;
font-size: 12px;
color: #FFF;
text-decoration: none;
font-weight: bold;
padding-left: 20px;
display: block;
}
.nav a:hover {
border-left: 5px solid #294159;
padding-left: 15px;
color: #000;
background: #98aabc;
}
.nav a:visted {
background: #56718d;
font-size: 12px;
color: #FFF;
text-decoration: none;
font-weight: bold;
padding-left: 20px;
display: block;
}

/*
_________________________________________________________

End of navigation section
_________________________________________________________	
*/




/*
_________________________________________________________

Start of main content
_________________________________________________________	

*/

.center {
float: right;
border: 1px solid #FFF;
border-left: 0;
border-bottom: 0;
width: 547px;
margin-bottom: 60px;
}
.contenthead {
background: #5C6773;
height: 70px;
padding: 15px;
}
.contenthead h1 {
color: #FFF;
font-size: 25px;
}
.contenthead i {
color: #FFF;
font-size: 16px;
margin-left: 50px;
}
.maincontent {
background: #F0F0DF;
border-top: 1px solid #FFF;
padding: 10px;
}
.maincontent h2 {
color: #003366;
font-size: 16px;
font-weight: bold;
border-bottom: 2px dotted #CCC;
}
.maincontent p {
color: #000;
font-size: 12px;
margin-left: 10px;
margin-bottom: 25px;
}
/*
_________________________________________________________

End of main content
_________________________________________________________	
*/


/*
_________________________________________________________

Start of footer section
_________________________________________________________	
*/

.footer {
clear: both;
margin: 0 auto;
background: #5C6773;
width: 800px;
height: 50px;
margin-top: -51px;
border-top: 1px solid #FFF;
position: relative;
text-align: center;
}
.footer p {
font-size: 12px;
font-weight: 500;
color: #FFF;
margin: 3px;
text-decoration: none;
}
.footer a {
color: #CCC;
}

/*
_________________________________________________________

End of footer section
_________________________________________________________	
*/

and here my HTML code for the design:

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Your Website</title>
<style type="text/css">@import"stylesheet.css";</style>
<!--[if IE]><style type="text/css">@import"ie.css";</style><![endif]-->
</head>
<!--
 Template made by Matthew Caddoo for zymic.com
 Copyright © 2006 Matthew Caddoo
 matthew.caddoo[at]gmail.com
 
 Pixel background from: http://squidfingers.com/
 
 My site (should be up soon): http://www.caddoo.net
-->
<body>
<div class="clearfix mainarea">

	<div class="head">
	<img src="images/header_blank.jpg" alt="Welcome to my site" width="800" height="100" />  </div>
	<div class="line">
	  <table width="801" border="0">
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
	</div>
	<div class="location">Home > </div>
  <div class="nav">
	<h3>Menu</h3>
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
		  <table width="100%" height="10%" border="0">
            <tr>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td height="344">&nbsp;</td>
            </tr>
          </table>
  </div>
	
	<div class="center"><div class="contenthead"></div>
	  <div class="maincontent">
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	  </div>
  </div>
		

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

Someone please help me get rid of my design problem

Thanks,
Red-Spiral

MrTouz

Jul 4 2008, 01:59 PM

You are using to many <tr> </tr> and <td></td> that are empty and could be removed.

First your menu has <tr><td></td></tr> Which degines a new line of a table each time your insert this code. Really not needed since there is no content and inside a menu, i really do NOT know what you can do with that many <td> and <tr>, also if you look at your menu you can see :

CODE

Which is not really needed On top of your menu y
ou have 2 <p>'s with   (space) in it, which again are useless.

The class LINE, on your html is also something i did not get, and the class HEAD has an image inside, if you switched the code and removed the <img src="... and replaced your .CSS at .head with a background-image:url(... it would look better :

So :

CODE

becomes :

CODE

and your css becomes :

CODE

.head {
background-image:url(images/header_blank.jpg);
width:800px;
height: 100px;
background: #FFF;
}

The class CENTER on the very bottom is also not made correctly, and has many <p>'s..

_____________

I thnk you should start by that, removed things that are NOT needed, make the css a little bit better. And than look for errors, because if all your content is coded correctly than it is not that hard to find the error, if you have lots of content that is messed up and not coded the right way... the error can be from anything :/

IamShipon1988

Jul 4 2008, 03:07 PM

Thanks MrTouz for answering his question, I was going to but didn't get the time. Anyways Red-Spiral, you try to go completely CSS with that layout. It is pretty simple to code that layout in CSS.

Red-Spiral

Jul 4 2008, 05:09 PM

Thanks both of you.

I will try this out later.

Thanks,
Red-Spiral

Red-Spiral

Jul 4 2008, 06:15 PM

I redone the CSS and I started a new html doc and it worked out fine

Thanks

But the problem I have now is that I can only write text in the middle, I wnat to write text from the top how do i go about doing this.

Thanks,
Red-Spiral

Here are the screenshots of my problem now

Dreamweaver CS3

brower preview

IamShipon1988

Jul 4 2008, 07:24 PM

That problem is occurring because of the vertical align. You can resolve that issue by adding valign="top" to your td tag. So a sample code will be:

CODE

Red-Spiral

Jul 4 2008, 07:32 PM

now on broswer it comes up on the right on the side still

IamShipon1988

Jul 4 2008, 10:01 PM

Why don't you upload a demo. It will help us out a lot more to understand how to solve it exactly.

MrTouz

Jul 4 2008, 10:18 PM

also i would suggest coding it via WordPad or some easy text editors and not dreamweaver. It actually does not do what you ask it to do.

See what you need to do is set BOTH valign="top", what it does is if one table gets higher than the other it actually let the text on the smaller table follow to the middle, so what you want is your text stuck on top. To do that BOTH tables need the valign="top" (not only the menu)

Also if you have text-align:center; for some reasons, you should put inside your css :

td {

text-align:left;

}

Tha will align all the text inside a table to the left, i do NOT know if setting valign:top; will work with CSS (i never tried) but you can try combining to two, probably save you some coding inside your index.html

But i will try this :

QUOTE

Anyways Red-Spiral, you try to go completely CSS with that layout. It is pretty simple to code that layout in CSS.

Red-Spiral

Jul 5 2008, 08:30 AM

Here is a demo

http://cyberfusion.vndv.com/

ill try that MrTouz

Thanks,
Red-Spiral

MrTouz

Jul 5 2008, 01:41 PM

Well i looked into your index.html source and :

CODE

<table width="1236"

No good, you need to set it at a max of 1024 which is what most people have as a size of their screens. now its just to big and not good for most of the people.

Also, STOP coding with dreamweaver because its killing your layout. (or any other program that builds websites)

for example :

CODE

      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td><div align="center"><span class="style1">Menu</span></div></td>
        </tr>
        <tr>
          <td>Button 1</td>
        </tr>

        <tr>
          <td>Button 2</td>
        </tr>
        <tr>
          <td>Button 3</td>
        </tr>
        <tr>
          <td>Botton 4</td>

        </tr>
        <tr>
          <td>Botton 5</td>
        </tr>
      </table>

Should be :

CODE

      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td><div align="center"><span class="style1">Menu</span></div></td>
        </tr>
        <tr>
          <td>
Button 1<br>
Button 2<br>
Button 3<br>
Button 4<br>
Button 5<br>
          </td>
        </tr>
      </table>

This is just an example saying that you so not need a new <tr><td> for each of your buttons... but just a new line,
and if it was made with CSS it would of been a lot easier, and you would have 3 lines of code.

And again you should try float:left; for your conent.

Really, redo your whole site oer CSS and don't use these stupid programs but a text editor !

Sickness

Jul 5 2008, 05:20 PM

you should use <div> and not <table>, it will be easier.

your code is

CODE

<td valign="top" width="" colspan="3" rowspan="3">test test</td>

and it's should be

CODE

<td valign="top" width="" colspan="3" rowspan="3" style="valign: top; align: left; padding-left: 10px;">test test</td>

you should also set the header width as 100% the vertical width menu as 15%or20% and the content width as 85%or80%

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.