one of the span isn't working. can't figure it out

Radscientist

07-03-2010, 03:01 PM

For some odd reason, my first span is just not working like it should be. I can't set any style for it or any positioning. I'm wanting to use float or absolute positioning on the to take it out of the flow so the content can move up to beween the nav and side bar.

The goal for this site is essientally a three column layout with the right column being the chronological list of the last 20 articles or updates posted and the nav bar being the main bar with links. there will be several sections within the content area as you can see in the attached image.

this layout depends on being able to set the columns to the very right and very left of the site.

it have been a long long time since i've seriously worked on my site so for once and for all, I want to get my site up and running before the semester start this fall at Gallaudet University since I'm taking a web design class this fall too. I want to get my site ready before then so I can really tweak and improve the site over the fall with the instructor.

thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lost Ear Studio</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img class="center" src="pic/testingbanner.png" alt="Lost Ear Studio />


<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 




The content of the document......
<img src="pic/index.jpg" alt="Lost Ear Studio is coming!!!">



<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 
<img src="pic/sideblock.png"> 


</body>

</html>

body {
background-color:black;
color:white;
}
span.nav {
position:absolute;
top:275px;
border:3px solid white;
border-left-style: hidden;
margin:0px 0px 0px 100px;
}
span.content {
margin-right:200px;
margin-left:200px;
}
span.side {
float:right;
width:200px;
border:3px solid white;
border-right-style: hidden;
padding:10px;
}
IMG.center {
display: block;
margin-left: auto;
margin-right: auto;
}

effpeetee

07-03-2010, 03:06 PM

_Aerospace_Eng_

07-03-2010, 03:18 PM

effpeetee

07-03-2010, 04:34 PM

Frank linking to your site could be considered spamming. If you are going to link to your site try providing something relevant to their problem.

@OP Your code looks okay but I would use a div instead of a spam for the navigation or better yet an unordered list. Can you post a link to your page?
Aero.

This is the only help that I can give. I would point out that I get no reward for it. There are no adverts or offers to take up. I have just collected together a number of useful sites and offer them as a source of help.

Ought I to withdraw it?

Frank

Radscientist

07-03-2010, 04:52 PM

i had the exact same result changing out span for div. the link to the page is in the sig but I haven't updated the html and css i'm working on for the site. I want to finish the code before putting it up. i'll put it up in a alternative page soon though. going out of the house for a bit.

good to see you again,aerospace eng. you once helped me out a load for some of my old site. thanks.

Apostropartheid

07-03-2010, 07:19 PM

Given that Frank does not make any money from his website, and it as a result costs him to provide the link, I'll allow it, especially as he specifies the resources on the page he wished the poster to look at with a direct link. At current I do not consider it any different from you or I linking to our private sites in our signatures.

Radscientist

07-03-2010, 08:27 PM

Lots of help here. (http://www.exitfegs.co.uk/Sources.html)

This in particular may help you. (http://bonrouge.com/3c-hf-fluid-lc.php)

Also layouts here. (http://bonrouge.com/3c-hf-fluid-lc.php)

Use the search facility. Single words often work best.

Frank

I must admit, the fliud 3 column that effpeetee linked to on his site is almost exactly the kind of layout I want. I can create what I need within each columns for the extra division of contents but otherwise, it's exactly like I needed. So I will be analyzing the link quite a bit, thanks!

One difference though is that I want the footer to remain within the middle column. not as a space below all three column. the reason for this is that I have a design concept using white border all over the place to visualize containment and the like.

I will upload an test page to my site soon.

:EDIT:

here's the link to the test page,
http://lost-ear-studio.com/test/index.html

will edit it to reflect the fluid three column layout that effpeetee linked to. thanks!

:EDIT2:

got a lot of it working thanks to copying and editing up the effpeetee's site version of the 3 column layout, just need to figure out how to center the header and keep the footer below the content. see link to understand why i need that fixed.

:EDIT3:

I removed the header and footer. I decided to include the header and footer into the main content area and it seemed to work rather well for me :-) esp since I can just add a margin-top:200px; for both side column to allow me to absolutely position the corner images up there.

Again, thank you all for your helps! :-)