html/css trouble - Page 4

Mark · 18-05-2008, 19:45

Davey's code as posted with no changes (link will be taken down Monday night or sooner if requested):

http://www.ouroboros.me.uk/tmp/bio.html

Tested on - IE6, IE7, FF2, FF3, Safari - all working.

HollyThirtyFive · 19-05-2008, 08:20

Thank you :-) I have saved the code and will try it when I get back tomorrow night. Sorry for being a pain!

Davey_Pitch · 21-05-2008, 10:57

How did it look in the end Holly?

HollyThirtyFive · 21-05-2008, 13:44

I need to try it tonight, I've been busy the last two nights untill late. I will try some tonight. I hope it works! I can't see any reason why it won't and I can't wait to get it finished.

Will let you know later

HollyThirtyFive · 21-05-2008, 22:41

I've just opened up new documents as now I understand more I can take all the code in better. For now I have just put in a header 1 with the header image and then a navigation list. I've linked up the html and css files ok.

The same problem is happening again. I preview it in Safari and the header jpeg shows, but the list stays vertical. If I open it in Mozilla the Jpg doesn't show but the list does show horizontally in-line.

I'm using Dreamweaver 8 if that makes any difference? I don't get it!

Mark · 21-05-2008, 23:07

Might do. Hardcore types like me just dump the code into a text editor. Dreamweaver is generally pretty well behaved but you never know.

Also, there might be some oddities with opening the files locally vs. uploading them (I didn't try it locally on my Mac).

Davey_Pitch · 22-05-2008, 00:10

Holly, can you post up your edited files so I can see whether I'm getting the same problem now you've edited the files. There may be some little quirk going on with something you've changed.

HollyThirtyFive · 26-05-2008, 00:12

DW seems to be working ok now. I've fiddled about a bit more and found an easier lay out. But there is still a browser problem. I've been told not to trust the DW preview so much. But it all goes to pot in browsers!

This is how it looks in Dw:

This is how it looks in Safari:
None of the CSS for the font has picked up. It is in default Times New Roman. The "album" div to the right side has moved out of place. The orange background no longer shows up.

This is how it looks in Mozilla:
The header image doesn't show. The album Div is misplaced. However the orange background and font style show fine.

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Welcome to Project Lumino</title>
<link href="210508.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

<div id="header">
<h1><img src="headerlarge.jpg" alt="Project Lumino Site" width="834" height="107"/></h1>
</div>

<div id="navigation">

<ul>

<li>Home </li>
<li>Biography </li>
<li>Gallery</li>
<li>Music</li>
<li> Merchandise </li>
<li>Links</li>

</ul>

</div>

<div id="main">
<h1> </h1>
<h1>News</h1>
<p><strong><u>18.03.08</u></strong>
<p>textextextetxtetxtetxtetextextextextextextextexttextextextetxtetxtetxtetextex
extextextextextexttextextextetxtetxtetxtetextextextextextextextexttextextextetxt
txtetxtetextextextextextextextexttextextextetxtetxtetxtetextextextextextextextex
 </p>
<p>textextextetxtetxtetxtetextextextextextextextexttextextextetxtetxtetxtetextex
extextextextextexttextextextetxtetxtetxtetextextextextextextextexttextextextetxt
txtetxtetextextextextextextextexttextextextetxtetxtetxtetextextextextextextextex
textextextetxtetxtetxtetextextextextextextextext</p>



</div>
<p>textextextetxtetxtetxtetextextextextextextextexttextextextetxtetxtetxtetextex
extextextextextexttextextextetxtetxtetxtetextextextextextextextexttextextextetxt
txtetxtetextextextextextextextext.<br />
</p>
<p>Hope all is well and give me any feedback you can on my new song!!!</p>
<hr />
<p><u><strong>06.01.08</strong></u></p>
<p>I am now hand making the "Waking Up" album. Each cd cover will be made personally by myself for each order and they will all be unique. The cd's will be limited and will stop when the limited number is reached.</p>
<p>Two extra bonus tracks are included: <br />
  - Dont React ft Peppi Knott<br />
  - Early Days (re mixed & mastered) </p>
<p>To pay for it all you need is a Paypal account and submit £10 to the email address: buywakingup@hotmail.co.uk. The page should look like this:</p>
<p>Main Page> Send Money></p>
<p>To: buywakingup@hotmail.co.uk<br />
  Amount: 10<br />
  Currency: GBP British Pounds<br />
  Usage: Gift›</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>
<p>

</div>

<div id="album">
<img src="../PL FINAL COVER.jpg" alt="Waking Up" width="176" height="180"/>
<h2>Debut Album - Waking Up</h2>
<p>If you would like to listen to my album it is available to purchase from:</p>
<li>iTunes</li>
<li>Amazon mp3</li>
<p>To order a special hand-made album you will need a Paypal account. </p>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

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

</div>

Here is the CSS

Code:

/* CSS Document */

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

body {
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:12px;
background-color:#FF9933;
margin-left:250px;
margin-right:250px;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}

h1, h2, h3, h4 {color:#000000; font-weight:bold; text-transform:capitalize; font-size:12px;}
h1 {
margin:0px;
font-size:18px;
}
h2 {
margin:0px;
}

#wrapper {
width:750px;
margin:auto;
background-color:#FFFFFF;}

#header {
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
padding-top:0px;
}


#navigation li {
display:inline;
font-size:14px;
}

#main {
background-color:#FFFFFF;
float: left;
margin:0px;
width:657px;
}

#album {
float:right;
margin:0px;
width:175px;
background-color:#FFFFFF;
}

Mark · 26-05-2008, 01:18

OK - three problems I've spotted.

There's an extra </div> in the middle of the news section. I can't find any matching division for that so guess it should be removed.
The </div> right at the end needs to be moved above </body>
The 'main' and 'album' divs don't fit inside 'wrapper'. The 'wrapper' div is defined as 750px, but 'main' (657px) plus 'album' (175px) makes 832px. This is the cause of the album section falling to the bottom. I'm guessing by the width of the header bitmap you need to make the wrapper 834px. It may also be a good idea to reduce the width of main to about 630px.

That only leaves the background colour of 'wrapper'. I can't spot the reason why that isn't working in Firefox (works in IE) but hopefully someone else will.

One final suggestion. In the CSS for 'body', I'd recommend removing the left and right margins. Personal preference but I think it'll work better for more people.

HollyThirtyFive · 26-05-2008, 09:53

Thank you for the help

The random div at the bottom must've been a typo whilst copying as its not on my DW doc.
However changing the margin width makes it a lot tidier and working in the browsers. Mozilla now is almost perfect except it's not showing the header.jpeg but shows the album.jpeg fine. Maybe that's an error with the file?

Safari everything is showing, the layout is perfect but the font style is still default times new roman.

19-05-2008, 08:20	#32
HollyThirtyFive Tinkerbell Join Date: Jul 2006 Location: Burgess Hill, West Sussex Posts: 743	Thank you :-) I have saved the code and will try it when I get back tomorrow night. Sorry for being a pain! __________________ Debut album "Waking Up" Avaliable on all iTunes stores, Amazon Mp3 Special Hand Made Ltd Edition: £10 via Paypal

21-05-2008, 10:57	#33
Davey_Pitch I iz speshul Join Date: Jun 2006 Location: Liverpool Posts: 6,296	How did it look in the end Holly? __________________ Our deepest fear is not that we are inadequate. Our deepest fear is that we are powerful beyond measure. It is our light, not our darkness, that most frightens us. Your playing small does not serve the world. There is nothing enlightened about shrinking so that other people won't feel insecure around you. We are all meant to shine as children do. It's not just in some of us; it is in everyone. And as we let our own lights shine, we unconsciously give other people permission to do the same. As we are liberated from our own fear, our presence automatically liberates others.

21-05-2008, 13:44	#34
HollyThirtyFive Tinkerbell Join Date: Jul 2006 Location: Burgess Hill, West Sussex Posts: 743	I need to try it tonight, I've been busy the last two nights untill late. I will try some tonight. I hope it works! I can't see any reason why it won't and I can't wait to get it finished. Will let you know later __________________ Debut album "Waking Up" Avaliable on all iTunes stores, Amazon Mp3 Special Hand Made Ltd Edition: £10 via Paypal

21-05-2008, 22:41	#35
HollyThirtyFive Tinkerbell Join Date: Jul 2006 Location: Burgess Hill, West Sussex Posts: 743	I've just opened up new documents as now I understand more I can take all the code in better. For now I have just put in a header 1 with the header image and then a navigation list. I've linked up the html and css files ok. The same problem is happening again. I preview it in Safari and the header jpeg shows, but the list stays vertical. If I open it in Mozilla the Jpg doesn't show but the list does show horizontally in-line. I'm using Dreamweaver 8 if that makes any difference? I don't get it! __________________ Debut album "Waking Up" Avaliable on all iTunes stores, Amazon Mp3 Special Hand Made Ltd Edition: £10 via Paypal Last edited by HollyThirtyFive; 21-05-2008 at 22:43.

22-05-2008, 00:10	#37
Davey_Pitch I iz speshul Join Date: Jun 2006 Location: Liverpool Posts: 6,296	Holly, can you post up your edited files so I can see whether I'm getting the same problem now you've edited the files. There may be some little quirk going on with something you've changed. __________________ Our deepest fear is not that we are inadequate. Our deepest fear is that we are powerful beyond measure. It is our light, not our darkness, that most frightens us. Your playing small does not serve the world. There is nothing enlightened about shrinking so that other people won't feel insecure around you. We are all meant to shine as children do. It's not just in some of us; it is in everyone. And as we let our own lights shine, we unconsciously give other people permission to do the same. As we are liberated from our own fear, our presence automatically liberates others.

18-05-2008, 19:45	#31
Mark Screaming Orgasm Join Date: Jul 2006 Location: Newbury Posts: 15,194	Davey's code as posted with no changes (link will be taken down Monday night or sooner if requested): http://www.ouroboros.me.uk/tmp/bio.html Tested on - IE6, IE7, FF2, FF3, Safari - all working.

21-05-2008, 23:07	#36
Mark Screaming Orgasm Join Date: Jul 2006 Location: Newbury Posts: 15,194	Might do. Hardcore types like me just dump the code into a text editor. Dreamweaver is generally pretty well behaved but you never know. Also, there might be some oddities with opening the files locally vs. uploading them (I didn't try it locally on my Mac).

26-05-2008, 01:18	#39
Mark Screaming Orgasm Join Date: Jul 2006 Location: Newbury Posts: 15,194	OK - three problems I've spotted. There's an extra </div> in the middle of the news section. I can't find any matching division for that so guess it should be removed. The </div> right at the end needs to be moved above </body> The 'main' and 'album' divs don't fit inside 'wrapper'. The 'wrapper' div is defined as 750px, but 'main' (657px) plus 'album' (175px) makes 832px. This is the cause of the album section falling to the bottom. I'm guessing by the width of the header bitmap you need to make the wrapper 834px. It may also be a good idea to reduce the width of main to about 630px. That only leaves the background colour of 'wrapper'. I can't spot the reason why that isn't working in Firefox (works in IE) but hopefully someone else will. One final suggestion. In the CSS for 'body', I'd recommend removing the left and right margins. Personal preference but I think it'll work better for more people. Last edited by Mark; 26-05-2008 at 01:29.

26-05-2008, 09:53	#40
HollyThirtyFive Tinkerbell Join Date: Jul 2006 Location: Burgess Hill, West Sussex Posts: 743	Thank you for the help The random div at the bottom must've been a typo whilst copying as its not on my DW doc. However changing the margin width makes it a lot tidier and working in the browsers. Mozilla now is almost perfect except it's not showing the header.jpeg but shows the album.jpeg fine. Maybe that's an error with the file? Safari everything is showing, the layout is perfect but the font style is still default times new roman. __________________ Debut album "Waking Up" Avaliable on all iTunes stores, Amazon Mp3 Special Hand Made Ltd Edition: £10 via Paypal