?
Solved

CSS in actual page not right, I think floats aren't clearing?

Posted on 2011-05-08
13
Medium Priority
?
294 Views
Last Modified: 2012-05-11
jonahzona really helped the first time...

http://www.websitemystic.com/pages/proto.php

http://www.websitemystic.com/templates/dragon_mist/css/mysticcss_admin.css

The relevant css is between "/* nav_left" comments.

I've put the css and menu into place and the page is breaking. I would like it to look similar to this page only using the text links:

http://www.websitemystic.com/pages/index.php

I'm pretty sure I need to clear some floats, but not sure how.

Thank you.
0
Comment
Question by:SlickCatSeven
  • 5
  • 4
  • 4
13 Comments
 
LVL 13

Expert Comment

by:jonahzona
ID: 35717123
It is your background positions.

change them to this.
.nav_left .active a {
    background-position: 0px -64px;
    text-decoration: none;
}
.nav_left li.active a:hover {
    background-position: 0px -64px;
    color: #555555;
    text-decoration: none;
}
.nav_left a:hover {
    background-position: 0px -32px;
    color: #FFFFFF;
    text-decoration: none;
}

Open in new window

0
 

Author Comment

by:SlickCatSeven
ID: 35717131
I forgot that I changed the image to simplify, thank you. I've edited the css, but still getting some movement. Use original links to see.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:SlickCatSeven
ID: 35717226
...had a missing div called content_bucket and fixed a missing "<" from another. The page is almost there, just overall position on menu, and bullets above showing.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35717583
Alright, have a fix that annuls our fix from before.

Remove the 8px padding from the .nav_left a and the 8px margin from the .nav_left li.

Then add

line-height: 30px;

Open in new window


to .nav_left a. This made it work normal in mine.

Sorry about the bad advice from before.
0
 

Author Comment

by:SlickCatSeven
ID: 35717733
Rats, still not working.

I at first tried removing the whole padding and margin lines, and the menu was out of alignment. When I leave them in with just the 8s removed, the menu moves closer to where it should be.
0
 
LVL 18

Accepted Solution

by:
Eternal_Student earned 1000 total points
ID: 35718124
This should fix it:


ul {
    list-style: square outside none;
    margin: 0;
    padding: 0;
}

Open in new window

0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 35718132
Normally you reset the margin and padding on everything in the CSS to zero:

http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

Which you haven't done so the UL was picking up padding and margin.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35720950
If you are referring to the fact it is off to the right, it is the padding on the UL element.

Change your .nav_left ul class to this:

.nav_left {
    clear: left;
    float: left;
    font: 14px Gill Sans,Gill Sans MT,Helvetica,Arial,sans-serif;
    padding-left: 0 !important;
}

Open in new window

0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 35721528
I already established this jonahzona ... and it is better practice to set the global UL to padding:0 & margin:0. That way everything has an equal starting point and you can then add padding/margin as you need it.

0
 
LVL 13

Assisted Solution

by:jonahzona
jonahzona earned 1000 total points
ID: 35721584
@Eternal Student

Yes, you are correct. However I had this post opened last night and forgot to hit submit before I went to bed. Your posts hadn't been posted at that point, and I didn't see them when I got up this morning because the page hadn't refreshed.

Please don't think I was trying to trump you.

@SlickCatSeven - I agree with Eternal Student.
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 35721966
@jonahzona ... Not at all ... your answer is correct too, I was just pointing out about the reset thing.
0
 

Author Closing Comment

by:SlickCatSeven
ID: 35722071
The fix works and the page looks right looks great.

Mahalo again.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month14 days, 21 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question