PDA

View Full Version : Debugging CSS to realign content


Daniel Braun
03-04-2011, 10:28 AM
Good Morning! Thank you for the excellent forum here. I have a question debugging my css to make sure the content floats correctly.

The 3 main controls are Navbar, Content, and Headlines - also I wanted the pages to be more centered with spacing (very much like this site) and I have that in the Body section.

So if you need a specific question/issue - I need to adjust my 3 main controls to make the content sit correctly and I have gotten lost in what changes I've made to cause the flow problems. I hope I've simplified my issue and would appreciate any feedback.


body{
font-family: Verdana,Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px 100px;
padding: 0;
width: auto;
}

a{
color: #006699;
text-decoration: none;
}

a:link{
color: #006699;
text-decoration: none;
}

a:visited{
color: #006699;
text-decoration: none;
}

a:hover{
color: #006699;
text-decoration: underline;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
margin: 0px;
padding: 2px;
}

h2{
font-family: Verdana,Arial,sans-serif;
font-size: 114%;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}


/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}


#navBar{
float: left;
width: 18%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

#headlines{
float:right;
width: 20%;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 100px;
}

#content{
float: left;
width: inherit;
padding-left: 5px;
padding-right: 10px;
}

/***********************************************/
/* Components */
/***********************************************/

#siteName{
margin: 0;
padding: 0 0 0 10px;
}


/************* #globalNav styles **************/

#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #CCC;
color: #cccccc;
}

#globalNav img{
display: block;
}

#globalNav a {
font-size: 90%;
padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

#pageName{
margin: 0px;
padding: 0px 0px 0px 10px;
}

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}


/************** .feature styles ***************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}


/************** .story styles *****************/

.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story p{
padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
}

#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}


/************* #search styles ***************/

#search{
padding: 5px 0px 5px 25px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
background-color: #dddddd;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

/************** #advert styles **************/

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
}


/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

domedia
03-04-2011, 02:12 PM
You need to post a link to your webpage. The CSS alone means nothing unless the HTML is known.

For a general tutorial on how to center content, look here:
http://www.dreamweaverclub.com/css-center-content.php

Daniel Braun
03-05-2011, 12:25 AM
The website is not live yet- but try this link (http://www.cigfinity.com/www/policy_warranty_return_policy.html)
Thank you again!

DWcourse
03-05-2011, 04:56 AM
are you trying to make the page be a static width rather than resizing depending upon the width of the browser window?

Daniel Braun
03-05-2011, 11:39 AM
Whichever is better for the multiple browser and screen size platform. I would assume that it would resize. I've tried a few options and my problem is getting lost in the changes.

Thank you again!

Daniel Braun
03-05-2011, 01:07 PM
Also I should add that the content sits just fine in Dreamweaver, it's just when you view it in the browser that it has alignment issues.

Daniel Braun
03-05-2011, 05:11 PM
I would really appreciate some help - I am working on a deadline and getting the content to flow correctly is pretty vital right now.

I have considered that this needs a word wrap of some sort, but DW8 does not have this as one of the css options.

DWcourse
03-06-2011, 03:07 AM
It's not exactly clear what you are trying to accomplish. You'll need to explain it better or maybe provide a diagram. (or you could look at the code in the 3 column built-in layouts that DW provides.

Daniel Braun
03-06-2011, 12:10 PM
This is frustrating, especially when I've provided a link and the code. I thought there would be a simple answer. Let's just close this thread and I'll have to start over.

Daniel Braun
03-06-2011, 01:33 PM
One problem I see happening that might be at the root of the issue is about text wrapping. Text wraps on the first line within #content, but on the second line flows right past it's border, pushing it into the 3rd column, and this is the section that has editable regions and it seems to be the editable region is not being controlled



Apparently I'm not ready to give up on this..... :/

DWcourse
03-06-2011, 03:02 PM
On a liquid layout (the columns resize) the text wraps will change depending upon the width of the browser window.

Secondly, there is a tutorial on the proper way to center a web site on this site and here http://www.dwcourse.com/dreamweaver/centering-a-web-layout.php and here http://www.dwcourse.com/dreamweaver/centering-page-layout.php

If you are going to position your content area with a float, you also need to provide a width that is small enough to allow it to fit between the navbar and headlines (about 60%).

That said my preference would be a fixed width layout (about 960 pixels wide) but the same issue will apply.

And I would recommend that you begin with one of the CSS-based 3 column layout that Dreamweaver offers and read the comments in the html and css files.

Daniel Braun
03-06-2011, 03:26 PM
Thank you DW, but I am going to just start over. I've made so many changes, including changing the body settings and content setting that I've frankly am getting nowhere.

The real issue here is to either build the site via html or via css and I'm willing to be I have some overlap going on.

Please close this thread with my thanks.

Corrosive
03-06-2011, 08:36 PM
The real issue here is to either build the site via html or via css?

Or using both maybe?

DWcourse
03-06-2011, 08:55 PM
Or using both maybe?
........ :-D

johnMoss
03-07-2011, 05:41 AM
........ :-D
Icon for Huckleberry Finn toting a bag of frames...

Daniel Braun
03-08-2011, 12:00 PM
These pages were originally based on DW's 3colNav and their starter pages. My goal was to have the pages centered and the problems started when I was aiming for that style. This was what I mentioned at the beginning of my post.

I've always kept the content (center) section about 55%, and the text does not seem to want to wrap at all. This is what I think the problem is, but that's why I posted this. I have changed these values to varying degrees and the center column is consistently being forced out.

It is frustrating as I thought someone would see right into the issue of containment and offer a solution. Not everyone is web or css savvy and those who are struggling are really looking for help here.

Please don't use this thread to post general comments - if there is no more advice to be given to my post just lock it down.

Corrosive
03-08-2011, 12:26 PM
Please don't use this thread to post general comments - if there is no more advice to be given to my post just lock it down.

Why? It is a forum so opinions/comments count as much as any help you are given and we may be a bit flippant at times but c'est la vie my friend.

Anyhoo, If you read the comments that have been made I think DWCourse has actually hit the nail on the head. If you are a beginner then tackling a liquid layout (with % widths) is probably not a good idea. They are hard to get right and I'd think twice about it with 5 years of web experience behind me! You'd be better (and more in control) if you went for a 960px width layout with a centring 'wrapper' div. This link has been posted before but, again; http://www.dwcourse.com/dreamweaver/centering-a-web-layout.php DWCourse's stuff is well done and easy to follow.

You have probably hacked that layout about so much you have got confused and lost. If it also might help, here is something I wrote about using floats for constructing web pages with columns; http://www.corrosiveonline.co.uk/tutorials_css_floats_for_layout.php

That should help you get to first base anyway.

Sorry there isn't a quick fix or easy answer but, hey, the web is just like that sometimes. One thing you do knocks on to the next thing and finding the root cause can be like a needle in a haystack.

failing that, hire a pro.