Topic: float/css problem (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=21383" title="Pages that link to Topic: float/css problem (Page 1 of 1)" rel="nofollow" >Topic: float/css problem <span class="small">(Page 1 of 1)</span>\
 
Relain
Paranoid (IV) Inmate

From: westernesse
Insane since: Jul 2000

 posted posted 04-16-2004 14:04

/* am i in the right forum here? */


I'm just getting back into the whole website thing, been playing with some simple CSS and i've been trying to make a sort of menu hanging on the left of a div look. I used the float command to put the little links div on the left of the page within a big div.
See it pretty much does the dirty in I.E 6.1 but in FireFox or Netscape[isn't that just firefox anyway?] i don't get the little hanging links thing...

Well the page is here

http://www.relain.co.uk/SiteTest/default.html

and the css source code is:

http://www.relain.co.uk/SiteTest/style.css

It's all a little convoluted, specially the divs i was trying to make a scrolling div within the outer -> Iframes i guess.

Also thats a picture of me! from my modellign days, hehe i'm either very narcissistic or just lazy in sourcing test images.

Thanks guys

Chris
Moon Shadow
Paranoid (IV) Inmate

From: Rouen, France
Insane since: Jan 2003

 posted posted 04-16-2004 14:47

I suppose a madsci will move this to the CSS forum ?

Relain :

You seem to use an HTML editor called EditPlus. My advise is to drop it, since it generates a lot of messy things in your code. I won't go into details, but things like <acronym title="connectons to things you might like">links</acronym> remind me the fancy things Frontpage generates...

Basically, your code isn't that bad, but very messy and old-fashionned. For example, you can save size by writing your font detail in a p class instead of writing in every div you use.

I corrected a few things, tested it and it seems to work. I didn't want to change too much your code though, but if there's something you don't understand post your question.

code:
<body>

	

<div class="links">

		

		<p>some <span class="acronym">links</span> that i want toshare </p>

		<p><a href = "http://www.relain.co.uk">my site</a></p>



</div>

	

<div class="mainbox"> 



	<h1>Hello everyone! </h1>

	

	<p>This is a little page that i'm hosting on our little network in our little 

	house.</p>

         <p>ain't that grand! <a href = "http://www.photosoc.man.ac.uk">photosoc</a></p>

	<img src = "me2.jpg"> 

	<p>I wish i was a small houseplant like dom is </p>

	

</div>



</body>
code:
body { 

font-family: Tahoma, Verdanna, Arial, sans-serif;

background-color: #A6B69A;

padding-bottom: 2%;

padding-top: 2%;

}

	 

p {

font: 10pt "Tahoma";

color: #736A80;

}



.acronym {

font-style: bold;

text-decoration : underline;

}



.links {

border: 1px solid #6E6E6E;

padding-left: 1%;

padding-right: 1%;

border-right-width: 0;

border-bottom: 3px;

border-bottom-color: #5D5D5D;

background-color: #DCDADC;

float: left;

margin-top: 2%;

}



.links p {

font: 10pt "Arial";

color: black;

}



.links a:link{

display: block;

background-color: #D3CFD3;

letter-spacing: 5px;

font-style: bold;

padding-left: 4%;

}



.links a:hover{

background-color:#A6B69A;

}



a:link {

text-decoration: none;

color: teal;

}



a:hover {

background-color: white;

text-decoration: none;

}



.mainbox {

background-color : DCDADC;

font-weight: light;

border: 1px solid #6E6E6E;

border-right-width: 3px;

border-right-color: #5D5D5D;

border-bottom-width: 3px;

border-bottom-color: #5D5D5D;

width: 70%;

padding-left: 5%;

padding-right: 5%;

padding-top: 2%;

padding-bottom: 2%;

float: left;

}



h1 {

font: 24pt Tahoma bold; 

letter-spacing: 5px; 

text-align: center;

display: block;

background: white;

border: 1px solid black;

border-right-width: 3px;

border-left-width: 10px;

}



----
If wishes were fishes, we'd all cast nets.



(Edited by Moon Shadow on 04-16-2004 06:08)
InI
Paranoid (IV) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

 posted posted 04-16-2004 14:52

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

krets
Paranoid (IV) Mad Scientist

From: Right-dead center
Insane since: Nov 2002

 posted posted 04-16-2004 15:13

Moonshadow: EditPlus is a text editor, not a WSYIWYG editor. If someone has bad code because of EditPlus it's because they wrote it.

Relain: What is that </MAP> tag before your doctype? That needs to be stripped out of there. ALso, you don't need a class for your body tag, just put the bgcolor in your CSS for the body tag.

You also have both your .links div and your .mainbox div floated left which is probably the bad mojo.

Personally, I wouldn't use float in this situation. I would use this technique. Actually, I do use that technique on my site and it's worked great for me.

:::11oh1:::

(Edited by krets on 04-16-2004 06:18)
Relain
Paranoid (IV) Inmate

From: westernesse
Insane since: Jul 2000

 posted posted 04-16-2004 18:17

cheers guys, yeah it was certainly not elegant coding. Just trying out the old CSS again, hence all that mess. Don't know where that </map> came from though :s

Krets, i was looking at the code in that link, yeah the old absolute positioning looks like a good plan. But what's all that stuff about the I.E hack:

voice-family: "\\"}\\"";

what's voice-family all about?

Thanks guys

Chris
krets
Paranoid (IV) Mad Scientist

From: Right-dead center
Insane since: Nov 2002

 posted posted 04-16-2004 18:20

It's a box-model hack for IE. IE renders padding differently than other browsers. There's some info in the faq about it....

Can you explain the box model hack?

:::11oh1:::


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu