Getting into a mess!

This is a discussion on "Getting into a mess!" within the Web Page Design section. This forum, and the thread "Getting into a mess! are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page Getting into a mess!

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Feb 23rd, 2006, 10:27
csa csa is offline
Up'n'Coming Member
Join Date: Nov 2005
Posts: 67
Thanks: 0
Thanked 0 Times in 0 Posts
Getting into a mess!
I've started a new layout but there are slight anomalies in FF. I would appreciate any advice on how to rectify these problems. Thank you.

- bottom footer div moves just under the top header.


- pushing the form down the page.

Code: Select all
/* CSS Document */
body{
background-color: #ffffff;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-top: 0px;
}
#container{
width: 760px;
border: solid black 0px; 
position: relative;
left: 50%;
margin-left: -380px;
background-image:url(images/backstrip.gif);
background-repeat:repeat-y;
}
#topheader{
width: 760px;
height: 88px;
}
#rightcolumnright{
width: 34px;
height: 480px;
background-color:#FFFFFF;
float:right;
}
#middlecolumn{
width: 252px;
height: 480px;
background-color:#FFFF66;
background-image:url(images/yellowstrip.jpg);
background-repeat:repeat-y;
float:right;
}
#firstcolumn{
width: 467px;
height: 480px;
background-color:#FFFFFF;
float:left;
}
#bottomlinks{
font-size:10px;
width: 760px;
height: 20px;
background-color:#405B76;
color:#FFFFFF;
text-align:center;
}
#imagerowright1{
width: 180px;
height: 200px;
float:right;
background-color:#FFFFFF;
padding-top: 20px;
padding-right:30px;
text-align:center;
}
#imagerowleft1{
width: 200px;
height: 200px;
float:left;
background-color:#FFFFFF;
padding-top: 20px;
padding-left:30px;
text-align:center;
}
#imagerow2right1{
width: 180px;
height: 200px;
float:right;
background-color:#FFFFFF;
padding-top: 30px;
padding-right:30px;
text-align:center;
}
#imagerow2left1{
width: 200px;
height: 200px;
float:left;
background-color:#FFFFFF;
padding-top: 30px;
padding-left:30px;
text-align:center;
}
#striptext{
width: 210px;
font-size:12px;
padding-left: 20px;
text-align:justify;
}
h1{
font-size:12px;
font-weight:bold;
color:#405B76;
}
li{
list-style-type:square;
}
/*form*/
div.row {
  clear: both;
  padding-top: 2px;
  }
div.row span.label {
  float: left;
  width: 150px;
  text-align: left;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight: bold;
  color:#000000;
  }
div.row span.formw {
  float: left;
  width: 210px;
  text-align: left;
  margin-left: 15px;
  }
submit{
margin-left: 50px;
}
#form{
width: 400px;
padding-top: 5px;
padding-left: 50px;
}
Last edited by csa; Feb 24th, 2006 at 10:47.
Reply With Quote

  #2 (permalink)  
Old Feb 23rd, 2006, 12:20
Rob's Avatar
Rob Rob is offline
Head Admin & CEO

SuperMember
Join Date: Jul 2003
Location: at my desk
Age: 34
Posts: 2,953
Blog Entries: 7
Thanks: 7
Thanked 4 Times in 4 Posts
Re: Getting into a mess!
add 'clear:both;' to bottomlinks css, and float your form left.

Updated CSS:-
Code: Select all
/* CSS Document */
body{
background-color: #ffffff;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin-top: 0px;
}
#container{
width: 760px;
border: solid black 0px; 
position: relative;
left: 50%;
margin-left: -380px;
background-image:url(images/backstrip.gif);
background-repeat:repeat-y;
}
#topheader{
width: 760px;
height: 88px;

}
#rightcolumnright{
width: 34px;
height: 480px;
background-color:#FFFFFF;
float:right;
}
#middlecolumn{
width: 252px;
height: 480px;
background-color:#FFFF66;
background-image:url(images/yellowstrip.jpg);
background-repeat:repeat-y;
float:right;
}
#firstcolumn{
width: 467px;
height: 480px;
background-color:#FFFFFF;
float:left;
}
#bottomlinks{
font-size:10px;
width: 760px;
height: 20px;
background-color:#405B76;
color:#FFFFFF;
text-align:center; clear:both;
}
#imagerowright1{
width: 180px;
height: 200px;
float:right;
background-color:#FFFFFF;
padding-top: 20px;
padding-right:30px;
text-align:center;
}
#imagerowleft1{
width: 200px;
height: 200px;
float:left;
background-color:#FFFFFF;
padding-top: 20px;
padding-left:30px;
text-align:center;
}
#imagerow2right1{
width: 180px;
height: 200px;
float:right;
background-color:#FFFFFF;
padding-top: 30px;
padding-right:30px;
text-align:center;
}
#imagerow2left1{
width: 200px;
height: 200px;
float:left;
background-color:#FFFFFF;
padding-top: 30px;
padding-left:30px;
text-align:center;
}
#striptext{
width: 210px;
font-size:12px;
padding-left: 20px;
text-align:justify;
}
h1{
font-size:12px;
font-weight:bold;
color:#405B76;
}
li{
list-style-type:square;
}
/*form*/
div.row {
  clear: both;
  padding-top: 2px;
  }

div.row span.label {
  float: left;
  width: 150px;
  text-align: left;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight: bold;
  color:#000000;
  }

div.row span.formw {
  float: left;
  width: 210px;
  text-align: left;
  margin-left: 15px;

  }
submit{
margin-left: 50px;
}
#form{
width: 400px;
padding-top: 5px;
padding-left: 50px; float:left;
}
__________________
Rob - SEO Specialist
Owner & Founder of Webforumz.com

 I am currently unavailable for private work
Last Blog Entry: Creative Labs threaten developer over home made drivers.... (Apr 1st, 2008)
Reply With Quote
  #3 (permalink)  
Old Feb 23rd, 2006, 13:18
csa csa is offline
Up'n'Coming Member
Join Date: Nov 2005
Posts: 67
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Getting into a mess!
Thank you. I'm going to go and search google to find out what clear float does and how I can detect when to use it in future.
Reply With Quote
  #4 (permalink)  
Old Feb 23rd, 2006, 14:16
herkalees's Avatar
Highly Reputable Member
Join Date: Jul 2005
Location: Massachusetts, USA
Age: 87
Posts: 576
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Getting into a mess!
You use it anytime you have a element floated and you desire another element to appear below it, instead of next to it.

This is because when you float an element (<div id="sidebar">content</div>), everything that comes below it in the html will appear beside it. Sometimes, this is not what you want. You might prefer all elements below the above div to appear below it.

On the first element to appear below the floated element, you give it a 'clear' property in CSS. Whether it's 'left' 'right' 'both' depends on which way you floated the above element.

This was probably confusing... I tend to ramble.
Reply With Quote
Reply

Tags
getting, mess

« ANGELFIRE -- here's a tough one | .htaccess help - moved directory »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
ie6 utter mess&ie7 mess. safari&opera&firefox alright thosecars82 Web Page Design 2 May 21st, 2008 11:02
OK in IE6 - a mess in the rest... N7AS Web Page Design 13 Dec 27th, 2006 15:40
css mess! onlinegamesplayer Web Page Design 9 Jun 8th, 2006 15:37
My mess. Your problem. Sorry! timmytots Web Page Design 2 Nov 26th, 2005 22:53


All times are GMT. The time now is 13:34.

Contact Us - Web Design & Development Forums - Archive - Top

Sleep Study Scoring :: Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Internet Recruitment Software :: Microsoft CRM Experts :: Online Casino :: Decorated Christmas Trees :: Web Hosting :: Football Betting :: Web Development India :: Ecommerce Software :: Football Stats :: Dry Cleaning Collection :: Free Bets :: xtreme wales - extreme clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Sharepoint Consultants :: Search Engine Optimisation :: Office Clearance London :: Sharepoint Experts :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43