Using css

i am developing a website in asp.net using css

as this is the first time i am develpoing the whole page based on css i am finding it very difficult for placing the elements
and have few queries at present reg the css

  1. in design mode with css applied the elements / objects appears misplaced or not in proper place , but during runtime , i mean when views in browser it appears perfect as i need

is there any way that using css the design time page is made to appear as same as runtime

  1. i have 2 divs , i needs the divs to appear adjacent to each other
    currently i have it below each other

Hi svibuk. I’ve moved this thread to the CSS forum.

People here may not be familiar with ‘runtime’ concepts. Basically, CSS styles an HTML page. So the important thing is what appears in the browser. You can just make changes and view them in the browser, rather than relying on any other display for checking the results.

i have 2 divs , i needs the divs to appear adjacent to each other
currently i have it below each other

Show us your HTML and CSS (no ASP code, though!) so we can suggest what to do. Essentially, you would normally float one or both of those divs.

is it advisable to use css for the whole web site development
i have used it basically fr cross browser compatibility
though i find it difficult as i said the elements are not placed properly at design time,
so i find it difficult designing it

<div class=“content2”>
<h4>
<asp:Label ID=“lblEMPCAT” runat=“server” Text=“Category”></asp:Label>
<asp:TextBox ID=“txtEMPCAT” runat=“server”></asp:TextBox><br />
<br />
<br />
<asp:Label ID=“Label2” runat=“server” Text="Income "></asp:Label><br />
<asp:Label ID=“lblBASICSAL” runat=“server” Text=“BASICSALARY”></asp:Label>
<asp:TextBox ID=“txtBASICSAL” runat=“server”></asp:TextBox><br />
<asp:Label ID=“lblDA” runat=“server” Text="DA "></asp:Label>
<asp:TextBox ID=“txtDA” runat=“server”></asp:TextBox><br />
<asp:Label ID=“lblHRA” runat=“server” Text="HRA "></asp:Label>
<asp:TextBox ID=“txtHRA” runat=“server”></asp:TextBox><br />
<asp:Label ID=“lblTA” runat=“server” Text="TA "></asp:Label>
<asp:TextBox ID=“txtTA” runat=“server”></asp:TextBox><br />
<asp:Label ID=“lblCCA” runat=“server” Text="CCA "></asp:Label>
<asp:TextBox ID=“txtCCA” runat=“server”></asp:TextBox><br />
<asp:Label ID=“lblLTA” CssClass=“lblwidth” runat=“server” Text=“LTA”>
</asp:Label>
<asp:TextBox ID=“txtLTA” runat=“server”></asp:TextBox><br />
</h4>
</div>
<div id=“rightcont”>
<h4> <asp:Label ID=“Label1” CssClass=“lblwidth” runat=“server” Text="Deductions "></asp:Label><br />
<asp:Label ID=“lblPF” runat=“server” Text="PF "
></asp:Label>
<asp:TextBox ID=“txtPF” runat=“server”></asp:TextBox><br />
<asp:Label ID=“lblPPF” runat=“server” Text="PPF " ></asp:Label>
<asp:TextBox ID=“txtPPF” runat=“server”></asp:TextBox><br />
<asp:Label ID=“lblEPF” runat=“server” Text="EPF "></asp:Label>
<asp:TextBox ID=“txtEPF” runat=“server”></asp:TextBox><br />
<asp:Label ID=“lblITAX” runat=“server” Text="ITAX "></asp:Label>
<asp:TextBox ID=“txtITAX” runat=“server”></asp:TextBox><br />
<asp:Label ID=“lblLOAN” runat=“server” Text="LOAN "></asp:Label>
<asp:TextBox ID=“txtLOAN” runat=“server”></asp:TextBox><br /></h4>
</div>

#rightcont
{
float:right;
width: 300px;
background-color:Silver;
}

.content2 {
padding: 10px;
}

.lblwidth
{

Width:80px;
}

even though i am using this CssClass=“lblwidth” the width of the lable doesnot change

As I mentioned, you need to remove all that ASP stuff for us to know what we are really working with. So, view the page in a browser, click View > Source (or similar), and send us that code. CSS is not applied to all those “aspy” bits, just the HTML that’s sent to the browser after that code is processed. :slight_smile:

EDIT:

Yes, that’s what CSS is for. It’s not hard once you understand the basics, and it’s really powerful. So hang in there. Just post your actual HTML and we’ll show you how it works. :wink:

they r just the controls so i though its a part of HTML

<div class=“content2”>
<h4>
<span id=“lblEMPCAT”>Category</span>
<input name=“txtEMPCAT” type=“text” id=“txtEMPCAT” /><br />
<br />
<br />
<span id=“Label2”>Income </span><br />
<span id=“lblBASICSAL”>BASICSALARY</span>
<input name=“txtBASICSAL” type=“text” id=“txtBASICSAL” /><br />
<span id=“lblDA”>DA </span>
<input name=“txtDA” type=“text” id=“txtDA” /><br />
<span id=“lblHRA”>HRA </span>
<input name=“txtHRA” type=“text” id=“txtHRA” /><br />
<span id=“lblTA”>TA </span>
<input name=“txtTA” type=“text” id=“txtTA” /><br />
<span id=“lblCCA”>CCA </span>
<input name=“txtCCA” type=“text” id=“txtCCA” /><br />
<span id=“lblLTA” class=“lblwidth”>LTA</span>
<input name=“txtLTA” type=“text” id=“txtLTA” /><br />
</h4>
</div>
<div id=“rightcont”>
<h4> <span id=“Label1” class=“lblwidth”>Deductions </span><br />
<span id=“lblPF”>PF </span>
<input name=“txtPF” type=“text” id=“txtPF” /><br />
<span id=“lblPPF”>PPF </span>
<input name=“txtPPF” type=“text” id=“txtPPF” /><br />
<span id=“lblEPF”>EPF </span>
<input name=“txtEPF” type=“text” id=“txtEPF” /><br />
<span id=“lblITAX”>ITAX </span>
<input name=“txtITAX” type=“text” id=“txtITAX” /><br />
<span id=“lblLOAN”>LOAN </span>
<input name=“txtLOAN” type=“text” id=“txtLOAN” /><br /></h4>
</div>

also plz suggest me a way for designing part as i find it very difficult wit the element scattered here and there

Hi,

I think we already discussed this in this thread and it is bad ettiquette to start another thread on the same topic. You never replied to[URL=“http://www.sitepoint.com/forums/css-53/css-not-working-properly-761101.html#post4888575”] my last post either which is saying much the same as Ralph anyway.

It makes no difference what serverside code you use as its effectively only html and css that reach the clients browser and that is the only code that wee need to see to determine how the page looks.

  1. in design mode with css applied the elements / objects appears misplaced or not in proper place , but during runtime , i mean when views in browser it appears perfect as i need

There is no “design mode” in html and css and that would seem to be some software (such as dreamweaver) that you are using to help you build the site. If this is true then you should be aware that there is no true wysiwyg tool for css that currently works properly.

To code css and html you should do it by hand in a suitable code editor and then preview your work in a browser. It’s the only way to learn and the only way to get reliable results.

sry but i had replied in the last post that i increased the image size & the matter was solved

its true that only html & css is displayed atthe browser

i am using vs2008 not dreamviewer

i knw the browser appearance makes a difference not when we design
but as i am doing this for first time i am finding it dhard to design & place th elements by just guessing , i need to everytime run the application in the browser to see the effect
so asked abt the same

how can i palce 2 divs adjacent to eac h other with some gap in between 2

eg

<div id=“1”>
<div id=“2”>matter</div> <div id=“3”>mmmmatter</div>
</div>

div 2 & 3 shld be inside div1 with some space in between them & the left & right space of div2 * 3 shld be equal from div1

sry if the ealier post was not replied

You can’t apply dimensions to inline elements so your lblwidth class has no effect.

You could turn it into an inline-block element and then dimensions would apply.


.lblwidth {
    width:80px;
    display:inlne-block;
}

(Keep everything lower case as you are making typos everywhere.)

It’s not correct to place all those form elements inside an h4 as an h4 is a heading not a list of form controls.

Don’t use multiple breaks as some browsers will ignore all but the first. Use css and apply margins in a proper structure.

Those spans should be label elements associated with the form control.

Here’s a small example of a properly laid out form using labels and associating them with the form control.


<form  class="formtest" id="form1" method="post" action="">
    <fieldset>
    <legend>Address Details</legend>
    <label for="firstname">First Name:</label>
    <input type="text" name="firstname" id="firstname" />
    <br />
    <label for="lastname">Last Name:</label>
    <input type="text" name="lastname" id="lastname" />
    <br />
    <label for="address1">Address 1:</label>
    <input type="text" name="address1" id="address1" />
    <br />
    <label for="address2">Address 2:</label>
    <input type="text" name="address2" id="address2" />
    <br />
    <label for="address3">Address  3:</label>
    <input type="text" name="address3" id="address3" />
    <br />
    <label for="address4">Address 4:</label>
    <input type="text" name="address4" id="address4" />
    <br />
    <label for="city">City:</label>
    <input type="text" name="City" id="city" />
    <br />
    <label for="state">State:</label>
    <input type="text" name="state" id="state" />
    <br />
    <label class="zip" for="zip">Zip:</label>
    <input type="text" name="zip" id="zip" />
    <br />
    <label for="tel">Telephone:</label>
    <input type="text" name="tel" id="tel" />
    <br />
    </fieldset>
    <fieldset class="gender">
    <legend>Enter Gender</legend>
    <input type="radio" name="radio" id="rad1" value="rad1" />
    <label for="rad1">Male</label>
    <br />
    <input type="radio" name="radio" id="rad2" value="rad2" />
    <label for="rad2">Female</label>
    <br />
    <input type="radio" name="radio" id="rad3" value="rad3" />
    <label for="rad3">Not sure</label>
    <br />
    </fieldset>
</form>



Sorry, but there are no short-cuts. You write the code and then you view it in the browser. That’s the way it works.:slight_smile:

That also means viewing it in multiple browsers at regular intervals to make sure that it is displaying as expected. There are no short cuts in this process unfortunately.

You should really create an html and css page first and then once you have it working then convert it into serverside code and not the other way around. In that way you can load the page in a browser and just click refresh to see the changes you have made.

Once the page is running perfectly and debugged then add your serverside stuff to the mark up safe in the knowledge that it will work.

It’s hard if you are a beginner but you must do things properly and in the proper order. It’s a steep and long learning curve and until you become proficient you shouldn’t expect to knock out reliable code quickly.

Take it one step at a a time. Semantic html, Clean CSS, Serverside logic.

how can i palce 2 divs adjacent to eac h other with some gap in between 2

eg

<div id=“1”>
<div id=“2”>matter</div> <div id=“3”>mmmmatter</div>
</div>

div 2 & 3 shld be inside div1 with some space in between them & the left & right space of div2 * 3 shld be equal from div1

sry if the ealier post was not replied

Ids are not allowed to begin with digits but I guess you just did that for example.
Just float the divs and apply a margin-left.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrap {
    width:510px;
    margin:auto;
    background:red;
}
.block {
    border:1px solid #000;
    width:230px;
    padding:5px;
    float:left;
    margin:0 0 0 10px;
    display:inline;/* ie6 double margin fix*/
}
</style>
</head>
<body>
<div id="wrap">
    <div class="block">
        <p>matter</p>
        <p>matter</p>
        <p>matter</p>
        <p>matter</p>
    </div>
    <div class="block">
        <p>anti-matter</p>
        <p>anti-matter</p>
        <p>anti-matter</p>
        <p>anti-matter</p>
    </div>
</div>
</body>
</html>


ok thnks for the instant reply

i am not able to leave space between to controls verticalwise in the div
is there any css to leave one space so that the control dont appaear attached

till now i was doing most of the desiging & placing controls using <tables> , using css on a large scale fr enite site without tables doing for fisrt time for cross browsr compatbility

secondlay i am not able to align the div properly

as in the above post i a have the nested divs
i need the top, botton , left , right padding , though i have applied padding the bottom padding doe snot have efect
as in the nested ivs one of the div is large & othe ris small

Hi,

I think the best thing is if you supply a rough drawing of what you want and then we will tell you how to achieve it.

Describing in text how something should look and behave is not very rewarding for either of us. :slight_smile:

I can’t possibly teach you all the intricacies of CSS in a single thread so you will need to do some research and practice on how to apply padding, margins, floats etc. There are rules and basics that need to be learned first in order for you to carry out this task properly.

I have given you an example of how to align 2 elements horizontally so it should be a simple matter for you to adjust the dimensions, padding etc as required. Just play with the example until you understand how it all fits together.

If you have a design or can make a rough sketch of what you need then it may be easier for us to follow what you need. (I am out for the rest of the day now so Ralph can reply if he’s still around :))

am not able to leave space between to controls verticalwise in the div
is there any css to leave one space so that the control dont appaear attached

In the longer form example I gave you you can see that I used breaks to separate the form controls. If you need more space than one nreak supplies then you would need to wrap the label and input in a div (or a span set to display:block in my example as it is more semantically appropriate) and then add a class to the it and apply a bottom margin to make the space that you want.

just some changes i was making but not able to get it with the div

<div id=“a1”>
<div id=“a2”>headmatter</div>

<div id=“a3”>matter1</div><div id=“a4”>mmmmatter</div>

<div id=“a5”>control</div>
</div>

i hope this is clear

i am not able to get <div id=“a5”>control</div> as needed position

If #a3 and #a4 are floated then you would need to clear #5.

e.g. #a5{clear:both}

(It is unlikely though that you will need ids on every div like that. If this code is where you are placing form controls and labels side by side then refer to my form example above. If you copy and test in a browser and see how it looks and then you can work from there.)

As I said above if you can tell us what elements you are styling and what you want it to look like we can give better help here.

i have just started prepaaring , the contents of inner pages vary from page to page & hence the controls

currently i can send the screenshot of the page that i am currently having

Ok I can see what you are doing now and it seems like you are making some progress.

When you use floats for horizontal alignment of block elements then you need to clear them as mentioned above when you want content to start underneath.

You will also need to know about containing floats and that means that a parent that holds only floats appears to collapse to zero height because floats are removed from the flow. You then need a clearing mechanism such as overflow:hidden on the parent or the clearfix :after technique and you can read up on those in the CSS faq about floats.

thnks

i knw i need to read css but unfortunately due to time limit i am not able to go thr’ whole of the things as i need to do the coding part

so it wuld be great ful if i can get help for same

and this is first time i m a experemneting with css

i wuld love to learn new things

i will do the code which u have give

i assume that as i need to add few controls below the 2 adjacent divs in a div
which i am not able to do it

i have added the div & applied css but it comes to the top

but from wht u have said i will do it with

#a5{clear:a3 a4}

Yes give the div a class and set it to clear:both and that will allow it to start underneath the two floats. Use a margin-bottom on the floated divs themselves to move the new div into position (as margin-top on a static div slides under floated content and would have no effect (because they are removed from the flow)).

hi

i do get it at the bottom but not as i need

attached a design . hope we can gte it as needed