Forum Moderators: not2easy
also the logo i want at the top sitting just under the logo like it does in the html page i've tried positioning it to the top in the positioning menu but it won't move. i thought i'd put my code to make it a bit easier to understand.
<snp> view the css site <snip> is how it is in just html and tables and how i want the css to look
here is my code
css
#container1 {
background-color: #000000;
visibility: visible;
width: 999px;
float: left;
}#container {
width: 999px;
background-color: #000000;
}
#banner {
height: px;
width: px;
bottom: px;
}
#footer {
background-color: #999999;
bottom: 100%;
}
#header {
top: 100%;
background-color: #999999;
}
#transition {
width: 440px;
}
#logo {
top: 100%;
}
#menu {
}
#content {
}
#title {
}
#image {
}
#quotes {
}
#blank {
}
body {
margin: 0; /* to avoid margins */
center; /* to correct the centering IE bug*/
}
#container {
margin-left: auto;
margin-right: auto;
width: ...;
text-align: left; /* to realign your text */
}
h1,h2,h3
{
font-family: "lucida calligraphy", arial, 'sans serif';
}
h1,h2,h3,hr {color:#ffffff;}
html
<html>
<head>
<link rel="stylesheet" type="text/css"
href="test.css" />
</head><body>
<div align="center"></div>
<div id="container">
<div id="header">this is the header</div>
<div id="container1">
<div id="logo"><h1><img src="file:///F¦/year 2/unit 9 - project/website/logo.jpg" width="200" height="100">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="440" height="165">
<param name="movie" value="file:///F¦/year 2/unit 9 - project/website/homepagetransitionnew.swf">
<param name="quality" value="high">
<embed src="file:///F¦/year 2/unit 9 - project/website/homepagetransitionnew.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="440" height="165"></embed>
</object>
</h1>
</div>
<div id="container">
<div id="menu"><h1>this is the menu</h1></div>
<div id="content"><h1>this is the content</h1></div>
<div id="title"><h1>this is the title</h1></div>
<div id="image"><h1>this is the image</h1></div>
<div id="quotes"><h1>this is the quotes</h1></div>
<div id="blank"><h1>this is the blank</h1></div>
<div id="banner"><h1>this is the banner</h1></div>
<div id="footer">this is the footer</div>
</div>
</div>
</body>
</html>
[edited by: swa66 at 3:06 am (utc) on Oct. 22, 2008]
[edit reason] no personal URLs, please see forum charter [/edit]
I'm not very good in css only templates because I always use some tables in my layouts so I may be wrong but I think your logo issue is because you have your logo image and flash file in the same container (div id="logo"). Your flash file is bigger (in height) then your logo is and that is the reason why the logo is not aligning with your header. You will probably need to give each of those its own style so that you can set the proper height, alignment and position of each.
I think you might want to start with the basics. Maybe take a look at some CSS table-less tutorials or even use one as a starting point to build your page on. Good luck
do you find there is a problem using tables in css? As i was taught tables are getting out dated and not used much anymore? When it comes to SEO you shouldn't use tables? I may well be wrong about all of that but that's what i've been taught so that's why i'm trying to learn it using div tags.
In relation to the logo and flash file that's exactly what's wrong with it but i thought you could move stuff left right up down so i thought i could move the logo to stick at the top. When i put the files in seperate div's you have to float the files left and then the other div's like content and title all go out of proportion.
thanks for the help
Anyhow, this was really bugging me so I basically did a quick version of your site to see the difference between CSS and HTML code-wise. My version is all CSS and seems to work good in firefox and IE so it might help you with your work. You're free to use it if you want... <snip>
As for your logo issue, try this:
<img src="http://www.yoursite/logo.jpg" alt="" width="200" height="100" align="left">
Does that help any?
[edited by: MizzBia at 4:23 am (utc) on Oct. 22, 2008]
[edited by: swa66 at 10:06 am (utc) on Oct. 24, 2008]
[edit reason] private conversation to remain private [/edit]
CSS CODE
body {
margin: 0px;
font-family: Arial, sans-serif;
font-size: 12px;
}
#content {
width: 1000px;
background-color:#000000;
}
#header {
background-color: #999999;
height: 18px;
width: 1000px;
}
#leftcontent {
position: absolute;
left:0px;
top:18px;
width:220px;
background:#000;
}
#logo {
margin-left: 0px;
}
#navbg {
background-color: #333333;
width: 220px;
height: 281px;
float: left;
text-align: center;
}
a.navlinks:link, a.navlinks:active, a.navlinks:visited {
color: #a5a2b5;
font-size: 15px;
padding: 6px;
font-weight: bold;
display: block;
text-decoration: underline;
}
a.navlinks:hover {
color: #ffffff;
font-size: 15px;
font-weight: bold;
display: block;
text-decoration: none;
}
#centercontent {
background:#000000;
margin-left: 220px;
margin-right:340px;
voice-family: "\"}\"";
voice-family: inherit;
}
#centertext {
background-color: #000000;
margin-top: 20px;
margin-bottom: 30px;
padding: 15px;
text-align: center;
display: block;
height: 126px;
color: #a5a2b5;
font-weight: bold;
font-size: 13px;
voice-family: inherit;
}
#bottomcontainer {
width: 1000px;
}
#centerbottom{
background-color: #333333;
height: 85px;
width: 100%;
float: inherit;
}
#navbottom {
background-color: #9C9A9C;
width: 220px;
float: left;
height: 85px;
float: left;
position: absolute;
margin-left: 0px;
}
#flashbottom {
width: 1000px;
bottom: 0px;
background-color:#000000;
}
#rightcontent {
right:0px;
position: absolute;
top:18px;
left: 660px;
margin-right: 0px;
width:340px;
background:#000000;
}
#rightcontentinside {
right:0px;
position: absolute;
top:18px;
left: 220px;
margin-right: 0px;
width:780px;
height: 100%;
background:#000000;
}
#phototxt {
background-color: #000000;
font-size: 28px;
font-weight: bold;
color: #666666;
text-align: center;
margin-top: 45px;
height: 135px;
display: block;
}
#homepagerightarea {
background-color: #000000;
text-align: center;
display: block;
height: 126px;
color: #a5a2b5;
font-weight: bold;
font-size: 13px;
voice-family: inherit;
}
#homepageright {
background-image: url(SITE-URL/homepage.jpg);
background-repeat: none;
padding: none;
height: 160px;
width: 340px;
}
#footer {
background-color: #999999;
height: 18px;
width: 1000px;
}
THE HTML CODE
<html>
<head>
<title>Jason Gold Photography - CSS Version</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<div id="header"></div>
<div id="leftcontent">
<img src="logo.jpg" alt="" width="200" height="100" >
<div id="navbg"><br>
<p><a href="#" class="navlinks">Home</a></p>
<p><a href="#" class="navlinks">Portfolio</a></p>
<p><a href="#" class="navlinks">About</a></p>
<p><a href="#" class="navlinks">Contact</a></p>
<p><a href="#" class="navlinks">Order</a></p>
<br></div>
</div>
<div id="centercontent">
<!-- FLASH CODE HERE REPLACES IMG PLACEHOLDER-->
<img name="" src="" width="440" height="165" alt="FLASH FILE PLACEHOLDER">
<div id="centertext">
Jason Gold is a highly committed and Professional Photographer with more than 25years experience in his field. His Talent as a photjournalist has taken him to many parts of the world. He specializes in Portraits, War, Fashion, Landscapes and Travel. His passion for people,places and photography makes him sensitive to the natural beauty that surrounds him no matter where it may be, capturing that moment of beauty, often in the most unlikely situations.
</div>
</div>
<div id="rightcontent">
<div id="phototxt">
Jason Gold <br>Photography
</div>
<div id="homepagerightarea">
<div id="homepageright"></div>
</div>
</div>
<div id="bottomcontainer">
<div id="navbottom"></div><div id="centerbottom"></div>
</div>
<!-- FLASH CODE HERE REPLACES IMG PLACEHOLDER-->
<div id="flashbottom"><img name="" src="" width="1000" height="100" alt="FLASH PLACEHOLDER 2"></div>
<div id="footer"></div>
</div>
</body>
</html>
I've come across some new problems. I'm now putting in some css drop down menus. When viewing the code in IE goes all over the place while in Firefox it looks fine but it looks like a layer in photoshop where a layer is behind another layer and you can't see it properly. How would i go about putting the drop down menu infront of the other code?
My code for the css problem:
css
#menu {
width: 12em;
background: #eee;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2 {
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
line-height: 16px;
font-weight: bold;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
color: #000;
background: #333333;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #000;
}
#menu li {
position: relative;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%;
}
#menu a, #menu h2 {
font-family: "Times New Roman", Times, serif;
font-size: 16em;
line-height: 1.4em;
font-weight: bold;
}
</style>
<![endif]
#menu {
width: 100%;
background: #eee;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}
#menu a, #menu h2 {
display: block;
border-width: 1px;
border-style: solid;
border-color: #333333;
margin: 0;
padding: 2px 3px;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
line-height: 16px;
font-weight: bold;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
color: #a5a2b5;
background: #333333;
text-decoration: none;
}
#menu a:hover {
color: #999999;
background: #333333;
}
#menu li {position: relative;}
#menu ul ul {
position: absolute;
z-index: 500;
left: 0px;
top: 27px;
}
#menu ul ul ul {
top: 0;
left: 100%;
}
[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
line-height: 1.4em;
font-weight: bold;
}
</style>
<![endif]
html (cut to just the drop down buttons)
<li><a href="#" title="Link to Homepage">Home</a>
<ul>
<p>
<li><a href="#" title="Link to Portfolio Page">Portfolio</a>
<ul>
<li><a href="#" title="Link to Fashion Page">Fashion</a></li>
<li><a href="#" title="Link to Portrait Page">Portrait</a></li>
<li><a href="#" title="Link to Reoportage Page">Reportage</a></li>
<li><a href="#" title="Link to Travel Page">Travel</a></li>
</ul>
<p>
<li><a href="#" title="Link to About Page">About</a>
<p>
<li><a href="#" title="Link to contact page">Contact</a>
</ul>
</li>
</ul>
<ul>
</ul>
