• 0

CSS layout issues


Question

I am having all kinds of issues with my CSS layout for the church website I am building. Everytime I get something displayed properly, something else goes out of alignment or conflicts with it. I will post my entire project if it is needed, but for the time being, here are my FaithCMSMaster page and my css code for reference. I am not all that good with CSS at all, so my code is pretty much a mess in terms of organization. I tried to comment what each part was for though. I hope that it helps. I appreciate any help that you can provide. The code is below:

CSS:

http://pastebin.com/jtjTjGEG

ASP .NET Master Page

http://pastebin.com/tvggNYGv

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Can you edit your pastebin for "Master Page" to just include the outputted HTML (view source for the page and just copy/paste that) rather than the inclusion of ASP usage itself? It'll be easier to find your issue that way.

Link to comment
Share on other sites

  • 0

Alright awesome, got it! Can you just list exactly what issues you have with it? That way I can tackle those first and then run through cleaning up your code. That way you can get a general idea of how things should be when you're coding 'em up :).

Link to comment
Share on other sites

  • 0

Alright awesome, got it! Can you just list exactly what issues you have with it? That way I can tackle those first and then run through cleaning up your code. That way you can get a general idea of how things should be when you're coding 'em up :).

Ok, great. Thank you. As far as the issues. It has a lot to do with the fact that I want things to be fluid so that they are visible even on a smaller screen, but I obviously don't want the content boxes to wrap beneath the other content boxes. I also want it to be a two column layout with a header though.

Link to comment
Share on other sites

  • 0

Ah, gotcha, well.. I'd go through and code it up for you myself with your current code but I'm working on a client project right now. If anything, you should go look through this CSS Tricks post on creating a fluid width layout with CSS or his other post on Fluid Width Equal Height Columns. That'll get you headed in the correct direction.

The other thing I want to mention: Your HTML needs to be in lowercase. Just do a search and replace to fix it quickly. I also included an HTML 4.01 Strict doctype in the example that you should use for yourself.

So it would be:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title></title>
 <link rel="" >
 </head>
 <body>
 <div id="name"><p><span></span> <br /> </p></div>
 <form><input type="text" />
 </body>
 </html>

You can also get rid of all of your linebreaks and replace them with CSS instead. So if you want larger spaces between paragraphs you can do:

 p {
    margin: 0 0 10px 0; /* top right bottom left */
  }
 input {
    margin: 0 0 10px 0;
 }

A margin can also be applied to inputs, textareas and anything else really. That way you're not adding bloat to your HTML with those linebreaks.

Link to comment
Share on other sites

  • 0

Ah, gotcha, well.. I'd go through and code it up for you myself with your current code but I'm working on a client project right now. If anything, you should go look through this CSS Tricks post on creating a fluid width layout with CSS or his other post on Fluid Width Equal Height Columns. That'll get you headed in the correct direction.

The other thing I want to mention: Your HTML needs to be in lowercase. Just do a search and replace to fix it quickly. I also included an HTML 4.01 Strict doctype in the example that you should use for yourself.

So it would be:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title></title>
 <link rel="" >
 </head>
 <body>
 <div id="name"><p><span></span> <br /> </p></div>
 <form><input type="text" />
 </body>
 </html>

You can also get rid of all of your linebreaks and replace them with CSS instead. So if you want larger spaces between paragraphs you can do:

 p {
    margin: 0 0 10px 0; /* top right bottom left */
  }
 input {
    margin: 0 0 10px 0;
 }

A margin can also be applied to inputs, textareas and anything else really. That way you're not adding bloat to your HTML with those linebreaks.

Alright. I appreciate your help a lot. I will see where that leads me and I will let you know. Thank you for taking the time to help me out. It will be far easier to get other things working when the layout is functioning well. :) It is so difficult to implement features when you can't even see portions of textboxes and other things. :) Good luck on your client project as well.

Link to comment
Share on other sites

  • 0

Awesome! It works! I have to make some tweaks to it and I honestly don't quite understand why it works (which isn't good), but I am very pleased. Thank you so much for those links. I appreciate it a lot. Below is a screenshot of the results so far:

newwebsitelayout.png

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.