Web Design Forums

pat · 27-12-2004, 21:03

http://www.focussecuritysolutions.co.uk/29/

Ok, i've come up with this layout and tried to knock up a quick css layout. There'll be rollover effects on the 3 link buttons, and more images. Text is nicked from elsewhere.

Whats getting me is the css. Basically, ive used a 3 column layout from glish.com, with a floating centre column, but i'm having trouble getting everything in there. I think i've resorted to some unconventional coding, and i supopose wrongly used iframes in each column because i couldn't get the text in that position using css. Also, i couldn't get the banner images looking right so i've shoved them in as background pics in a banner1 and banner 2 div. Result is that it looks fine in IE, but in firefox is broken and i'm sure is broken and messed in other browsers.

I really don't know how to solve it, and if you wouldn't mind looking at the source and offering some suggestions, i'd be really grateful.

If you have the time and/or patience, i'd appreciate it loads

Cheers,
Pat

p.s i want to put singl line dividers between each content section...how?

Narate · 28-12-2004, 04:00

Looks nasty in Safari.

The title font is reallly badly aliased.

needs re-thinking.

3jorn · 28-12-2004, 21:38

I pretty much check everything with Firefox and it really doesn't work there either.
Or it's a VERY artistic site :P

emil · 29-12-2004, 04:28

Hi

The layout problem isn't caused by the use of iframes, but its due to position:absolute;

Try floating the columns to left and it should work.

Take a look here:
http://www.randomcolors.com/fwm/
I cleaned up your code a little but it won't validate yet (there are some unclosed img tags and so on), but what I tried to do was to try to fix your layout problem.

As a suggestion, do not use iframes at all, they are no good for SEO. Try using divs with: overflow:auto; instead. (of course I guess that would mean waiting longer for the page to load. You decide that)

I hope I could help.

pat · 29-12-2004, 11:46

Wow! cheers mate, i really appreciate that. It doesn't load though

I'm sure it'll be good, your server might be down?

emil · 29-12-2004, 11:59

[edited] the html code

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>
<title>5ways</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
@import "style.css";
@import "all.css";
</style>
<style type="text/css">
#banner2 {
background-image:
 url("banner.gif");
 }
#leftcontent {
background-image:
 url("contbg.gif");
 }
#centercontent {
background-image:
 url("contbg.gif");
 }
#rightcontent {
background-image:
 url("contbg.gif");
 }
</style>
</head>
<body>

<div id="banner">
  <img area="5565" src="images/logo.gif">

</div>

<div id="banner2"> 
  <img area="18070" src="images/links.gif" usemap="#Map" border="0" height="65" width="278"> 
  <map name="Map" id="Map">
  	<area shape="rect" coords="0,0,92,79" href="#">
	<area shape="rect" coords="93,0,186,70" href="#">
	<area shape="rect" coords="185,-18,278,71" href="#">
	</map>
</div>

<div id="container"> <!-- this is the container /-->

<div id="leftcontent">
<h1>*CONTACT</h1>
<p>
<font color="#990000">
<strong>&nbsp;&nbsp;&nbsp;
<font size="3">in the media
</font>
</strong>
</font> 
</p>
<iframe src="iframes/media.htm" height="10300" scrolling="no" width="240">If you can see this, your browser doesn't understand IFRAME.  However, we'll still &lt;a&gt;link&lt;/a&gt; you to the file.</iframe>

</div>

<div id="centercontent">
<h1>*NEWSLETTER ::</h1>
<p><font color="#990000"><strong>&nbsp;&nbsp;&nbsp;<font size="3">reviews etc.</font></strong></font></p>
<iframe src="iframes/reviews.htm" height="7750" scrolling="no" width="310">If you can see this, your browser doesn't understand IFRAME.  However, we'll still &lt;a&gt;link&lt;/a&gt; you to the file.</iframe>
</div>

<div id="rightcontent">

<h1>* SITE MAP</h1>
<p><font color="#990000"><strong>&nbsp;&nbsp;&nbsp;<font size="3">news</font></strong></font></p>
<iframe src="iframes/news.htm" height="200" scrolling="yes" width="170">If you can see this, your browser doesn't understand IFRAME.  However, we'll still &lt;a&gt;link&lt;/a&gt; you to the file.</iframe>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><font color="#990000"><strong>&nbsp;&nbsp;&nbsp;<font size="3">links</font></strong></font></p>
<iframe src="iframes/links.htm" height="200" scrolling="no" width="170">If you can see this, your browser doesn't understand IFRAME.  However, we'll still &lt;a&gt;link&lt;/a&gt; you to the file.</iframe>

</div>

</div> <!-- end of the container /-->

</body>
</html>

this is the css (the one i called style.css)

Code:

/* CSS Document */
/* general */
body {margin:0px; padding:0px;font-family: Verdana, Arial, Helvetica, sans-serif;}
p,h1,pre {margin:0px;}
h1 {font-size:14px; padding-top:10px;}


/* layout */
#banner {
float:left;
height:32px;
width:100%;
border-top:1px solid #fff;
border-right:0px solid #000;
border-left:0px solid #000;
}
#banner2 {
float:left;
height:65px;
width:100%;
background:#AAA;
border-top:1px solid #fff;
border-right:0px solid #000;
border-left:0px solid #000;
}

#container {width:100%} /* this is the container of the columns */

#leftcontent {
float:left;
width:250px;
border-right:1px solid #666;
}
#centercontent {
float:left;
width: 345px;
border:0px solid #000;
}
#rightcontent {
float:left;
width:401px;
background:#fff;
border:0px solid #000;
}

/* formatting */
#banner h1 {
font-size:14px;
padding:10px 10px 0px 10px;
margin:0px;
}
#rightcontent p {
font-size:10px
}

iamtq · 29-12-2004, 13:04

damn you got too much time on your hands

jamiep · 29-12-2004, 15:04

iamtq, how many of your 9 posts have made a positive contribution to this forum? (Hope my moaning at other members helps me fit snugly into this place)

pat · 29-12-2004, 18:53

Thankyou very much emilpaun, much appreciated. I would buy you a pint. but you live in Romania.

emil · 30-12-2004, 03:12

Narate · 30-12-2004, 07:28

Pet hate of mine;

1) Calling a cascading style sheets 'style'

emil · 30-12-2004, 07:32

offtopic: then don't!

27-12-2004, 21:03	#1 (permalink)
pat jorge regula Join Date: Aug 2004 Location: B'ham/Leeds Posts: 4,820	Media Studies Website http://www.focussecuritysolutions.co.uk/29/ Ok, i've come up with this layout and tried to knock up a quick css layout. There'll be rollover effects on the 3 link buttons, and more images. Text is nicked from elsewhere. Whats getting me is the css. Basically, ive used a 3 column layout from glish.com, with a floating centre column, but i'm having trouble getting everything in there. I think i've resorted to some unconventional coding, and i supopose wrongly used iframes in each column because i couldn't get the text in that position using css. Also, i couldn't get the banner images looking right so i've shoved them in as background pics in a banner1 and banner 2 div. Result is that it looks fine in IE, but in firefox is broken and i'm sure is broken and messed in other browsers. I really don't know how to solve it, and if you wouldn't mind looking at the source and offering some suggestions, i'd be really grateful. If you have the time and/or patience, i'd appreciate it loads Cheers, Pat p.s i want to put singl line dividers between each content section...how? __________________ Last edited by pat : 27-12-2004 at 21:06. Reason: more things wrong to sort out

29-12-2004, 04:28	#4 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 6,830	Hi The layout problem isn't caused by the use of iframes, but its due to position:absolute; Try floating the columns to left and it should work. Take a look here: http://www.randomcolors.com/fwm/ I cleaned up your code a little but it won't validate yet (there are some unclosed img tags and so on), but what I tried to do was to try to fix your layout problem. As a suggestion, do not use iframes at all, they are no good for SEO. Try using divs with: overflow:auto; instead. (of course I guess that would mean waiting longer for the page to load. You decide that) I hope I could help. Last edited by emil : 18-03-2005 at 04:45.

29-12-2004, 11:46	#5 (permalink)
pat jorge regula Join Date: Aug 2004 Location: B'ham/Leeds Posts: 4,820	Wow! cheers mate, i really appreciate that. It doesn't load though I'm sure it'll be good, your server might be down? __________________

29-12-2004, 18:53	#9 (permalink)
pat jorge regula Join Date: Aug 2004 Location: B'ham/Leeds Posts: 4,820	Thankyou very much emilpaun, much appreciated. I would buy you a pint. but you live in Romania. __________________

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

28-12-2004, 04:00	#2 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,239	Looks nasty in Safari. The title font is reallly badly aliased. needs re-thinking.

28-12-2004, 21:38	#3 (permalink)
3jorn Registered User Join Date: Oct 2004 Posts: 23	I pretty much check everything with Firefox and it really doesn't work there either. Or it's a VERY artistic site :P

29-12-2004, 13:04	#7 (permalink)
iamtq Registered User Join Date: Oct 2004 Posts: 17	damn you got too much time on your hands

29-12-2004, 15:04	#8 (permalink)
jamiep Ledge Join Date: Dec 2004 Location: Birmingham Posts: 22	iamtq, how many of your 9 posts have made a positive contribution to this forum? (Hope my moaning at other members helps me fit snugly into this place)

30-12-2004, 03:12	#10 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 6,830

30-12-2004, 07:28	#11 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,239	Pet hate of mine; 1) Calling a cascading style sheets 'style'

30-12-2004, 07:32	#12 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 6,830	offtopic: then don't!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)