Topic: float/css problem $Pages that link to <a href="https://ozoneasylum.com/backlink?for=21383" title="Pages that link to Topic: float/css problem" rel="nofollow" >Topic: float/css problem\$

Author	Thread
Relain Paranoid (IV) Inmate From: westernesse Insane since: Jul 2000	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 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 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 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 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 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:::

css problem\$

Author

Thread

Relain
Paranoid (IV) Inmate

From: westernesse
Insane since: Jul 2000

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 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 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 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 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 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:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: float/css problem

Insert Slimies »

Insert UBB Code »

Topic: float/css problem $Pages that link to <a href="https://ozoneasylum.com/backlink?for=21383" title="Pages that link to Topic: float/css problem" rel="nofollow" >Topic: float/css problem\$