PDA

View Full Version : Page not behaving as per CSS - HELP

volatile
02-15-2007, 02:23 PM
At my wits end. I had a form working fine. Its a left right split page - one the left some simple text and pics - on the right - an email form.

I wanted to swap everything round (so everything on the left - to the right)

moved the form to the left fine - but now everything else is appearing below that - rather than to the right - any ideas. PASTING THE STYLE SHEET AND CODE BELOW

#site_content { width:760px; padding:0; border:0; margin:0 auto; }
#main_body { background:url(../creo_img/background_main_sides.gif); margin:0 auto 0 auto; padding:0 9px 0 9px; }

#header_index {
margin:50px 0 0 0; background:url(../creo_img/background_main.gif) top center no-repeat; height:15px; line-height:15px;
}
#header {
margin:5px 0 0 0; background:url(../creo_img/background_main.gif) top center no-repeat; height:15px; line-height:15px;
}

#header_content_application {
background:url(../creo_img/application_header_top.jpg) left top no-repeat; height:61px; line-height:61px; margin:0; padding:0;
}


#body_left_and_centre { float:left; width:338px; padding:0px; overflow:hidden; }
#body_left_and_centre_content { padding:1px 10px 0px 10px; margin:0px; background-color:#BFCAFF; color:#000000; }

#body_left_and_centre_application {
background:url(../creo_img/application_header_bottom.jpg) #BFCAFF top left no-repeat;
color:#000000;
float:left;
width:335px;
padding:50px 0 0 0;
margin:0 0 0 5px;
overflow:hidden;
}

#body_right { float:left; width:375px; padding: 0px 0px 0px 24px; margin: 0px; overflow:hidden; }

#body_right_application {
float:left;
width:375px;
padding:30px 0px 0px 24px;
margin:0px;
overflow:hidden;
}
.right_content_bottom { background:url(../creo_img/right_content_bottom.gif) bottom left no-repeat; height:13px; line-height:13px; }

#footer {
background:url(../creo_img/background_main.gif) bottom center no-repeat; height:15px; line-height:15px; margin:0;
}
#creo_info { padding:5px 25px 0 10px; margin-bottom:10px; }

AND NOW THE ASP / HTML PAGE



<%if task="" OR task=NULL then%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<title>Rapid Secured Loans Online UK - Find the best secured loan online.</title>
<meta name="description" content="We search to find the best secured and unsecured loans in the UK on your behalf. Secured Loans for home owners, tenants, self employed." />
<meta name="keywords" content="secured loans online, secured loans uk, online secured loans," />
<meta content="index, follow" name="Robots" />



<link href="includes_css/layout_styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="includes_css/menu_styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="includes_css/html_styles.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="includes_css/custom_styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="includes_css/form.css" rel="stylesheet" type="text/css" media="screen" />

<link href="includes_css/print.css" rel="stylesheet" type="text/css" media="print"/>
<link href="includes_css/print.css" rel="stylesheet" type="text/css" media="handheld"/>
</head>

<body style="font-size:0.7em">
<div id="skipLinks"><a href="#body_centre">Skip to content</a></div>
<div id="site_content">
<div id="header">&nbsp;</div>
<div id="main_body">
<div id="header_content_application">&nbsp;</div>



<div id="body_left_and_centre_application">
<div id="body_left_and_centre_content">
<form action="refuk.asp" method="post">
<input type="hidden" name="task" value="action">
<div class="form_question row0" ><font color="crimson"><b><%=fixERR(errormessage)%></b></font>

<label for="homeowner" class="form_question_label">Are you a homeowner? <span class="form_question_required">
&nbsp;*</span></label>

<select name="homeowner" id="homeowner" class="form_question_input">
<option value="Yes" >Yes</option>
<option value="" >No</option>
</select>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>




<div class="form_plain_text">Loan Details</div>

<div style="clear:both;"></div>



<div class="form_question row1" >

<label for="loan_amount" class="form_question_label">Loan amount (&pound;) <span class="form_question_required">&nbsp;*</span></label>


<input name="loan_amount" id="loan_amount" type="text" value="<%=loan_amount%>" size="50" class="form_question_input" />

<div style="clear:both"></div>

</div>


<div style="clear:both;"></div>




<div class="form_question row0" >

<label for="loan_purpose" class="form_question_label">Purpose of loan? </label>

<select name="loan_purpose" id="loan_purpose" class="form_question_input">





<option value="Debt Consolidation" >Debt Consolidation</option>




<option value="Home Improvements" >Home Improvements</option>




<option value="Other" >Other</option>


</select>

<div style="clear:both;"></div>
</div>


<div style="clear:both;"></div>












<div class="form_plain_text">Personal Details</div>



<div class="form_question row1" >

<label for="title" class="form_question_label">Title </label>

<select name="title" id="title" class="form_question_input">





<option value="Mr" >Mr</option>




<option value="Mrs" >Mrs</option>




<option value="Miss" >Miss</option>



<option value="Ms" >Ms</option>



</select>

<div style="clear:both;"></div>
</div>


<div style="clear:both;"></div>




<div class="form_question row0" >

<label for="name" class="form_question_label">First Name <span class="form_question_required">&nbsp;*</span></label>


<input name="name" id="name" type="text" value="<%=name%>" size="50" class="form_question_input" />

<div style="clear:both"></div>

</div>


<div style="clear:both;"></div>











<div class="form_question row1" >

<label for="surname" class="form_question_label">Surname <span class="form_question_required">&nbsp;*</span></label>


<input name="surname" id="surname" type="text" value="<%=surname%>" size="50" class="form_question_input" />

<div style="clear:both"></div>

</div>


<div style="clear:both;"></div>






<div class="form_question row0" >

<label for="dob" class="form_question_label">Date of Birth (dd/mm/yyyy) <span class="form_question_required">&nbsp;*</span></label>


<input name="dob" id="dob" type="text" value="<%=dob%>" size="50" class="form_question_input" />

<div style="clear:both"></div>

</div>


<div class="form_question row1" >

<label for="house_number" class="form_question_label">House Number <span class="form_question_required">&nbsp;*</span></label>


<input name="house_number" id="house_number" type="text" value="<%=house_number%>" size="50" class="form_question_input" />

<div style="clear:both"></div>

</div>


<div style="clear:both;"></div>





<div class="form_question row0" >

<label for="postcode" class="form_question_label">Postcode <span class="form_question_required">&nbsp;*</span></label>


<input name="postcode" id="postcode" type="text" value="<%=postcode%>" size="50" class="form_question_input" />

<div style="clear:both"></div>

</div>


<div style="clear:both;"></div>


<div class="form_plain_text">Contact Details</div>

<div style="clear:both;"></div>



<fieldset class="crform_fieldset">
<legend>Telephone&nbsp;<span class="form_question_required">#</span></legend>





<div class="form_question row1" >

<label for="tel_home" class="form_question_label">Home Tel </label>


<input name="tel_home" id="tel_home" type="text" value="<%=tel_home%>" size="50" class="form_question_input" />

<div style="clear:both"></div>

</div>





<div class="form_question row0" >

<label for="tel_mobile" class="form_question_label">Mobile Tel </label>


<input name="tel_mobile" id="tel_mobile" type="text" value="<%=tel_mobile%>" size="50" class="form_question_input" />

<div style="clear:both"></div>

</div>


<div style="clear:both;"></div>




<div class="form_question row1" >

<label for="email" class="form_question_label">Email <span class="form_question_required">&nbsp;*</span></label>


<input name="email" id="email" type="text" value="<%=email%>" size="50" class="form_question_input" />

<div style="clear:both"></div>

</div>


<div style="clear:both;"></div>






<div class="form_question_error" style="text-align:left;">Please complete two fields</div>

</fieldset>
<div>
<fieldset>
<legend>Best times to call </legend>


<input type="checkbox" name="contact_time" value="Anytime" id="Anytime" checked="checked" /><label for="Anytime">Anytime</label><br/>
<input type="checkbox" name="contact_time" value="Morning" id="Morning" /><label for="Morning">Morning</label><br/>
<input type="checkbox" name="contact_time" value="Lunchtime" id="Lunchtime" /><label for="Lunchtime">Lunchtime</label><br/>
<input type="checkbox" name="contact_time" value="Afternoon" id="Afternoon" /><label for="Afternoon">Afternoon</label><br/>
<input type="checkbox" name="contact_time" value="Evening" id="Evening" /><label for="Evening">Evening</label><br/>



</fieldset>
</div>

<br style="clear:both;" />

<div style=" text-align:right">

<input name="form_id" type="hidden" value="53"/>
<input name="start_row" type="hidden" value="1"/>




<div style="text-align:left; margin:10px 0 10px 0;">
<span style="color:#FF0000;">*</span> Indicates a required field<br />
<span style="color:#FF0000;">#</span> Please complete at least two of these fields
</div>
<div style="clear:both;"></div>
<div class="float_right">
<input name="submit_data" type="submit" class="button" value="submit " />
</div>


</div>
<div>

<form action="" method="post">
<div><input type="submit" value="Contact Us" class="button" /></div>
</form><br />
</div>
<div style="clear:both;"></div>

</form>

at this point i have no idea why the rest of the page isnt going right.

===========================================================================




<div id="body_right">

<div id="body_right_application">

<img src="client_files/default/family-on-beach.jpg" width="170" height="113" alt="" />

<img src="client_files/default/grils-on-beach-sunset.jpg" width="170" height="114" alt="" />



<h1 class="margin_top_bottom">Live the life you deserve</h1>
<div class="content_1">

<strong><span
style="color: rgb(1, 110, 229 );">theonlinebroker</span></strong> <span
style="">is&nbsp;the smart choice for&nbsp;your&nbsp;finance needs.&nbsp; <strong><span
style="color: rgb(1, 110, 229 );">theonlinebroker</span></strong>&nbsp; removes the confusion and makes the process of obtaining&nbsp;a&nbsp;loan simple, clear and economical.</span>

</div>
<div class="content_2">
<div class="boxed_text_top">&nbsp;</div>
<div class="boxed_text_content">
<span><strong>We are able to offer loans for all purposes including debt consolidation, holidays and home improvements</strong>.</span><br/><br/>
<span>We use a panel of secured loan providers to ensure that you always get the best quote regardless of your outstanding credit or any previous credit problems.</span><br/><br/>
<span>We encourage you to complete our <strong>FREE</strong> no obligation enquiry form and one of our fully trained loan advisers will contact you within hours to arrange your personally tailored finance solution.</span>

<br/><br/><span>Our rates start from just <span
style="color: rgb(1, 110, 229 );"><strong>6.7% APR Variable</strong></span> to <span
style="color: rgb(1, 110, 229 );"><strong>19.9% APR Variable</strong></span>, our highest rate is for customers with severe credit problems. Rates are dependant on circumstances, please apply for your personalised quotation.</span><br/><br/>
<span>You can borrow from <span
style="color: rgb(1, 110, 229 );"><strong>&pound;3,000</strong></span> to <span
style="color: rgb(1, 110, 229 );"><strong>&pound;100,000</strong></span>.</span><br />
<br />
<span>Our typical loan rate is <span><strong>9.9%</strong></span> <strong>APR Variable</strong>.</span></div>
<div class="boxed_text_bottom"></div>
</div>

<img src="creo_img/apply_now.jpg" width="366" height="135" alt="Apply Now" /><br /><br />
<div class="content_3">
THINK CAREFULLY BEFORE SECURING OTHER DEBTS AGAINST YOUR HOME. YOUR HOME MAY BE REPOSSESSED IF YOU DO NOT KEEP UP REPAYMENTS ON A MORTGAGE OR ANY OTHER DEBT SECURED ON IT. LOANS SECURED ON YOUR HOME.
</div>
<p class="small_text">
<br
class="small_text" />
&nbsp;</p>

</div>
</div>
<div style="clear:both;"></div>
</div>
<div class="right_content_bottom"></div>
</div>
<div style="clear:both;"></div>
</div>
<div id="footer">&nbsp;</div>
<div id="creo_info">
<span style="float:left">&nbsp;&nbsp;&nbsp;&copy; 2007 rapid-secured-loans.co.uk </span>
</div>



</div>
</body>

</html>
<%end if%>
jlhaslip
02-15-2007, 03:28 PM
#body_right_application {
float:right; <=== try this change
width:375px;
padding:30px 0px 0px 24px;
margin:0px;
overflow:hidden;
}
volatile
02-15-2007, 03:44 PM
thanks for your reply. I've tried that and loads of versions of that!
jlhaslip
02-15-2007, 03:56 PM
It is easier for us to help you if you simply provide a link to the page somewhere on the 'net. Having to cut and paste these blocks of code is troublesome and almost like work.
Are the files uploaded for testing?
volatile
02-15-2007, 04:23 PM
It is easier for us to help you if you simply provide a link to the page somewhere on the 'net. Having to cut and paste these blocks of code is troublesome and almost like work.
Are the files uploaded for testing?

Apologies.

you can download the whole WORKING PAGE from www.rapid-secured-loans.co.uk/ONLINEFORM.zip

This is the original i am trying to change
Excavator
02-15-2007, 04:26 PM
Hello volatile,
You have #body_right enclosed in the #body_left_and_centre_content (what a mouthful!). If you close the latter then the former can float next to it.
Like this: <div style="clear:both;"></div>

</form>

at this point i have no idea why the rest of the page isnt going right.

===========================================================================

<!--closes body_left_and_centre_content--></div>


<div id="body_right">

<div id="body_right_application">

<img src="client_files/default/family-on-beach.j


Don't forget to remove the redundant closing tag.


To stand any chance at all of validating the DocType must be on the first line.
volatile
02-15-2007, 04:29 PM
that doesn't work unfortunately.
volatile
02-15-2007, 04:32 PM
in fact that messes everything up!
Excavator
02-15-2007, 04:53 PM
You have #body_right enclosed in the #body_left_and_centre_content.
That's not how floats work.

Read up on floats at
http://codepunk.hardwar.org.uk/acss.htm
http://www.glish.com/css/
or
http://www.google.com/search?hl=en&rls=com.microsoft%3A*&q=css+float+layout&btnG=Search
volatile
02-15-2007, 05:07 PM
excavator - that helped thanks, but instead of move to the right hand side of the page - it moves to be alinged right on the left hand column of the page.
Excavator
02-15-2007, 05:17 PM
Typically a 2column layout would be (and this is just an example, your widths will be different)

#wrap {
width: 800px;
}
#left_col {
width: 200px
float: left;
}
#right_col {
margin: 0 0 0 200px;
}

<div id="wrap">
<div id="left_col"></div>
<div id="right_col"></div>
</div>

Sorry if I'm being too basic.

I downloaded your zip file but it's a huge site and doing it that way is just going to cause version problems. If you really want or need help your going to have to put up a test site so we can see changes as you make them.
volatile
02-15-2007, 05:22 PM
ok ive done that - the page is here
http://www.gotbadcredit.co.uk/refuk.asp

the important files are the one above and
http://www.gotbadcredit.co.uk/includes_css/layout_styles.css

as you can see. the bottom half needs to appear on the right
Excavator
02-15-2007, 07:13 PM
You have #body_right enclosed in the #body_left_and_centre_content.

You have to re-order your markup.
I'm not going to dig through all that for you. I think it's a lot easier to debug, test across browsers and generally prove you basic layout before you stuff it with that much content.
You should validate WHILE your developing too. That will find errors for you, like a spellchecker does while your typing.


Do you have a DevelopersToolbar in either IE or FF? Use the DOM inspector to look at it, might provide you a more structured view so you can understand why #body_right needs to be seperated from the left column.

IE Developers Toolbar (http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en)
FF Developers Toolbar (https://addons.mozilla.org/firefox/60)
volatile
02-15-2007, 11:27 PM
You have to re-order your markup.
I'm not going to dig through all that for you. I think it's a lot easier to debug, test across browsers and generally prove you basic layout before you stuff it with that much content.
You should validate WHILE your developing too. That will find errors for you, like a spellchecker does while your typing.


Do you have a DevelopersToolbar in either IE or FF? Use the DOM inspector to look at it, might provide you a more structured view so you can understand why #body_right needs to be seperated from the left column.

IE Developers Toolbar (http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en)
FF Developers Toolbar (https://addons.mozilla.org/firefox/60)

sorry a lot of that means nothing to me, im still only a new coder i would say. a lot of it is taken from bits ive seen online etc, advice, experts like you guys.
_Aerospace_Eng_
02-15-2007, 11:56 PM
sorry a lot of that means nothing to me, im still only a new coder i would say. a lot of it is taken from bits ive seen online etc, advice, experts like you guys.

Then maybe you should start trying to learn things on your rather than just copying and pasting. If you just learned HTML and CSS you wouldn't be at your wits end trying to figure out simple problems. Listen to what we are telling you. Do some tutorials. We aren't going to hand feed you anything. With that said check out this example.

http://bonrouge.com/2c-hf-fluid(r).php

If you can't understand the example then I think its time you actually hire someone to do the work for you.
Excavator
02-16-2007, 12:07 AM
You shouldn't be asking for help if you are trying to be a paid web designer

Hahaha! I love that!
Excavator
02-16-2007, 12:14 AM
Don't get discouraged volatile. _Aerospace_Eng_ is right though, you need to learn some of this for yourself too.

-Check out the link he gave you.
-Check out the links in my sig.
-The top of this forum has a sticky topic that has a TON of links in it.
-Install the FF Web Developers Toolbar - you'll wonder how you ever lived without it.

As for your problem, I've already told you how to fix it.
volatile
02-16-2007, 07:42 AM
jesus guys, no need to be so rude. I have found that I only really learn by seeing finished code, I dont really soak in info from books and tutorials. that obviously makes me a complete idiot.

I have told you i am a new coder so please try not to be so condescending.

And who said I'm trying to be a paid web designer - i am doing this as a favour, and i have worked on it for a whole so was trying to get a little feeback, help and encouragement from "experts".

Weren't you guys ever new to this?
Excavator
02-16-2007, 08:28 AM
And who said I'm trying to be a paid web designer - i am doing this as a favour, and i have worked on it for a whole so was trying to get a little feeback, help and encouragement from "experts".



Sorry about that. I didn't mean for you to think I was referring to you, it was just the first time I saw that link in _Aerospace_Eng_'s sig and I thought it was funny - because we do see so many professionals here looking for help.
As for being condescending, I really don't think I have been at all.
volatile
02-16-2007, 09:21 AM
Excavator, i just think i have the wrong end of the stick with the forum.

I had exhausted my knowledge - and tried everything in my locker - i came here looking for a little guidance and to expand my knowledge.

I get the feeling people think all i want is free code. Indeed, I need the page to work, and quickly, but it doesnt mean i'm not willing to work hard and learn where my knowledge is lacking.
volatile
02-16-2007, 09:26 AM
If you can't understand the example then I think its time you actually hire someone to do the work for you.

Well yes, I will have to go a pay a freelancer $200 to put a div in the right place

good advice aerospace.
Excavator
02-16-2007, 02:56 PM
I will have to go a pay a freelancer $200 to put a div in the right place

But I showed you where the div needs to go. At least where I think it needs to be closed. I could be wrong...
Have you tried closing it yet?
Have you looked at your layout with a DOM inspector like I suggested? I really thought that would help you see how the document should flow...
volatile
02-16-2007, 03:34 PM
excavator you have indeed been a help. but the divs didn't work out, no.

still getting my head round the dom inspector as we speak, but of course i'm thick as sh*t
koyama
02-17-2007, 03:18 AM
yeah, it is the closing </div> that needs to be placed where Excavator said. I tried and your right column went in place.

volatile, what text editor are you using? For lengthy documents like this it is helpful to use an editor that can find the matching closing tag. For free you can e.g. download HTML Kit which can do this.
BWiz
02-17-2007, 04:29 AM
Aero, come one, every one has to start somewhere, but he does have a point, you actually do have to have motivation and teach yourself - or pay someone to do it for you
volatile
02-21-2007, 01:57 PM
koyama, ill try that thanks.

Bwiz - thats exactly what im trying to do. I spent four days solid on this simple problem before coming here. I was hoping to be pointed in the right direction then continue my learning.

Its a bit silly to create the whole thing, misplace a div then pay someone to do the whole thing again cos i didnt succeed.