CSS Forum

**esbenmsjensen** · 02-09-2009, 12:55 PM

Hi,

I'm quite new at website designing. I study architecture, has a passion for photography and at the moment I'm trying my best at learning css & (x)html, so I can design a portfolio and cv in a personal site. However I've stumbled into some problems along the way. I've tried using the wc3 validator, but it only seemed to help at the biggest ones. I also read some of the stickys here, but it didn't really help me. I should probably note, that I'm designing the page in Dreamweaver CS4 (part of my arch. school license) and I'm looking at the page through Firefox.

At my site, (http://www.emsj.dk) I'm primarily working on the page called Photos.html, a I wan't it to be as clean and done as possible, before I move on to the other sites (I have however made standard sites for the menu already).

1. The first question is a bit complicated. When I'm in Photos.html, the sub-menu of CV is showing up a bit to the right of where it's supposed to - once again I'm not able to see where I'm missing something. It's exactly the same, when I'm in CV.html, Job.html or School.html, while viewing sub-menus of Photos.

2. The second question is about the positions of the elements. I've been looking at css-positioning pages all day long, but I still can't get all my elements to be placed right. I'm placing the elements through Id's and stuff, but the content (at Photos.html a html code for an external flash application showing my flickr photos) won't show up, without breaking out of the background that it should fit inside.

3. The last error is the movement of the lower menu; Friends, About & Contact. In Photos.html they show up correct, but in Blog.html, Projects.html, CV.html, School.html and Jobs.html they go left. Help anyone?

Thanks,

Best regards,
Esben S. Jensen

I've posted the html-code for Photos.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EMSJ.DK - All photos</title>
<link href="3.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--

-->
</style>
<body>

<div class="wrappermenu">
<span id="Logo"><a href="index.html"><img src="WEBHomeLogo.png" alt="" width="205" height="103" /></a></span>
  <ul id="dropline">
    <li><div id="fillbox"></div></li>
    <li class="current"><a href="Photos.html"><b>Photos</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="right">
            <li><a href="Manipulation.html">Manipulation</a></li>
            <li><a href="Nature.html">Nature</a></li>
            <li><a href="Portrait.html">Portrait</a></li>
            <li><a href="Architecture.html">Architecture</a></li>
            <li class="current_sub"><a class="last" href="Photos.html">All</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="Projects.html"><b>Projects</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="blank">
            <li></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="Blog.html"><b>Blog</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="blank">
            <li></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="CV.html"><b>CV</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="right">
            <li><a href="School.html">School</a></li>
            <li><a class="last" href="Jobs.html">Jobs</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    
</ul>
</div>  


<div class="wrapperbg">
<img class="back" src="SecondaryBG.png" alt="" width="906" height="850"/>
</div>  


<div class="wrappercontent">
  <object name="AllPhotos" id="Photos" width="718" height="560">
        <param name="FlashVars" value="ids=emsj&names=emsj&userName=esben.from.denmark&userId=53022270@N00&source=keyword&titles=on&displayNotes=on&thumbAutoHide=off&imageSize=medium&vAlign=top&displayZoom=on&vertOffset=0&initialScale=off&bgAlpha=70" />
        <param name="PictoBrowser" value="http://www.db798.com/pictobrowser.swf" />
        <param name="scale" value="noscale" />
        <param name="bgcolor" value="#ffffff" />
        <embed src="http://www.db798.com/pictobrowser.swf" width="718" height="560" vspace="130" loop="false" flashvars="sortBy=date-posted-desc&ids=emsj&names=emsj&userName=esben.from.denmark&userId=53022270@N00&source=keyword&titles=on&displayNotes=on&thumbAutoHide=off&imageSize=medium&vAlign=top&displayZoom=off&vertOffset=0&initialScale=off&bgAlpha=70" scale="noscale" bgcolor="#ffffff"></embed>
      </object> 
      
  <div id="c"><h6><a href="Contact.html">Contact</a><a href="About.html">About</a><a href="Friends.html">Friends</a></h6></div>      
       
</div> 

</body>
</html>

And the css-code:

Code:

@charset "utf-8";
/* CSS Document */



/* BASIC PAGE PROPERTIES */
body {background-image: url(PrimaryBg.gif);}

body,td,th {font-family: Verdana, Segoe UI, Arial;}

ul { list-style-type: none; }

/* CLASSES */
div.wrappermenu {
    width : 906px;
    text-align : center;
    margin-left : auto;
    margin-right : auto;
    position : relative;
    z-index:20;
    margin-top: 75px;
    margin-bottom: auto;
}

div.wrapperbg {
    width : 906px;
    text-align : center;
    margin-left : auto;
    margin-right : auto;
    position : relative;
    z-index:5;
    margin-top: auto;
    margin-bottom: auto;
}

div.wrappercontent {
    width : 906px;
    text-align : center;
    margin-left : auto;
    margin-right : auto;
    position : relative;
    z-index:10;
    margin-top: 60px;
    margin-bottom: auto;
}

/* NEW MENU */
#dropline {padding:0 0 0 30px; margin:0 0 0 395px; height:29px; position:relative;}
#dropline table {border-collapse:collapse; width:0; height:0; margin:-3px -10px;}

#fillbox {
    display:block;
    height:20px;
    float:left;
    cursor:pointer;
    width: 80px;
}

#dropline li {float:left;}
#dropline li a {
    display:block;
    height:40px;
    line-height:40px;
    padding:0 8px 0 0;
    float:left;
    color:#FFF;
    text-decoration:none;
    font-family: Verdana, Segoe UI, Arial;
    font-size:16px;
}
#dropline li a b {display:block; height:40px; float:left; padding:0 0 0 20px; cursor:pointer;}
#dropline li a:hover {
    background:url(tab_a.gif) no-repeat right top;
    line-height:36px;
    height:44px;
    color: #09F;
}
#dropline li a:hover b {background:url(tab_b.gif) no-repeat left top; line-height:36px;}

#dropline li:hover > a {background:url(tab_a.gif) no-repeat right top; line-height:40px; height:40px}
#dropline li:hover > a b {background:url(tab_b.gif) no-repeat left top; line-height:40px;}

#dropline ul {
    padding:0;
    margin:0;
    list-style:none;
    position:absolute;
    height:25px;
    width:450px; /* Bestemmer placering indenfor wrapperen ifht. venstre side*/
    background:#f8f8f8;
    left:-9999px;
    top:38px; /* Bestemmer afstand mellem topmenu og undermenu */
    z-index:10;
    border-bottom:1px solid #fff;
    background-color: #FFFFFF;
}
#dropline ul li {height:25px; line-height:25px; list-style-type: none;}
#dropline ul.right li {float:right; list-style-type: none;}
#dropline ul li a {color:#999; padding:0 8px 0 8px; height:25px; line-height:25px; border-right:1px solid #09F; font-weight:bold; font-size:11px; list-style-type: none;}
#dropline ul li a:hover {height:25px; line-height:25px; background:transparent; color:#09F; list-style-type: none;}
#dropline ul.right li a {border-left:1px solid #FFF; border-right:0; font-size:10px; list-style-type: none;}
#dropline ul li a.last {border:0; list-style-type: none;}


#dropline :hover ul {left:0; list-style-type: none;}

#dropline li.current ul {
    left:-33px;
    z-index:1;
    list-style-type: none;
}
#dropline li.current a {background:url(tab_a.gif) no-repeat right top; line-height:36px; height:44px}
#dropline li.current a b {color:#09F; background:url(tab_b.gif) no-repeat left top; line-height:40px;} /* Bestemmer bl.a farve på markeret top-menu-pkt */
#dropline li.current ul li a {
    color:#999;
    padding:0 8px 0 8px;
    height:25px;
    line-height:25px;
    background:transparent;
    list-style-type: none;
}
#dropline li.current ul li.current_sub a {color:#09F; list-style-type: none;} /* Bestemmer farve på markeret under-menu-pkt */
#dropline li.current ul li a:hover {color:#09F; list-style-type: none;}


/* HEADINGS */
h1 {font-size: 24px;    font-style: normal;    text-decoration: none;    line-height: normal;    font-weight: normal;    font-variant: normal;    text-transform: none;}
h2 {font-size: 18px;    font-style: normal;    text-decoration: none;    line-height: normal;    font-weight: normal;    font-variant: normal;    text-transform: none;}
h3 {font-size: 16px;    font-style: normal;    text-decoration: none;    line-height: normal;    font-weight: normal;    font-variant: normal;    text-transform: none;}
h4 {font-size: 14px;    font-style: normal;    text-decoration: none;    line-height: normal;    font-weight: normal;    font-variant: normal;    text-transform: none;}
h5 {font-size: 12px;    font-style: normal;    text-decoration: none;    line-height: normal;    font-weight: normal;    font-variant: normal;    text-transform: none;}
h6 {font-size: 10px;    font-style: normal; text-decoration: none;  line-height: normal;    font-weight: normal;     font-variant: normal;    text-transform: none;}


a {white-space:nowrap; float:right; text-decoration:none; color:white; margin-right:0; padding-left:25px;}
a:hover {color:#09F; padding-left:25px;}

/* LOWER MENU */
#c {
    float:left;
    text-align:left;
    text-indent: -6px;
    width : 906px;
    margin-left : -1465px;
    position:absolute;
    z-index:10;
    margin-top: 575px;
    margin-bottom: auto;
}


/* ID'er */
#Photos {
    position:fixed;
    margin-top:500px;
}


#Logo {
    position:fixed;
    z-index:15;
    width : 906px;
    left: -375px;
    top: 30px;
}


/* BACKGROUND IMG */
.back {position:absolute; left:0px; top:-85px; z-index:1; height: 799px;}

**LadynRed** · 02-09-2009, 02:27 PM

First of all, you have some structure problems:

Quote:

<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EMSJ.DK - All photos</title>
<link href="3.css" rel="stylesheet" type="text/css" />

<style type="text/css">

</style>
<body>

Everything in red belongs INSIDE the <head></head> section.
With it in the wrong place, your stylesheet isn't going to be properly accessed.

Your positioning problem is just that - - TOO MUCH positioning when it is just not necessary. The position:relative on the #wrapper is fine, but you don't need positioning on everything else. Learn to use the normal document flow and floats and you'll get better results.

http://www.vision.to/the-difference-...ositioning.php

**esbenmsjensen** · 02:41 PM

Quote:

Originally Posted by LadynRed

First of all, you have some structure problems:

Everything in red belongs INSIDE the <head></head> section.
With it in the wrong place, your stylesheet isn't going to be properly accessed.

Your positioning problem is just that - - TOO MUCH positioning when it is just not necessary. The position:relative on the #wrapper is fine, but you don't need positioning on everything else. Learn to use the normal document flow and floats and you'll get better results.

http://www.vision.to/the-difference-...ositioning.php

Wow, thanks. I guess thats why the validator kept saying there was an error about the <head> - I'm not that good at english, so I didn't get that.

Thank you for the tutorial - I'll start reading right away.

**LadynRed** · 02-09-2009, 02:54 PM

You're welcome