confused and dazed Posted September 26, 2013 Author Share Posted September 26, 2013 I truly appreciate the responses on this one. As far as the font squirly issue I would not be able to give exact code on this one. I will have to see how hosting could help me get out of it or really take a look at how the order of my code may be effecting it. I have used iframe before and I have not had these issues. I will take this one on my own. I would still like to know suggestions on how to eliminate using so many classes (as well as using position:absolute) to give very specific <div> locations on a page. Right now I have not been able to figure out how to postion images and <div> exactly where I want them to go without using classes and position:absolute. Link to comment Share on other sites More sharing options...
davej Posted September 26, 2013 Share Posted September 26, 2013 (edited) The only time you normally would need to use position-absolute is when you need to position an item on top of another item that cannot be a background image. Otherwise margin, padding, and alignment provide the positioning. All the nav buttons are the same size so you don't even need a class. You can simply say: .nav_bannerx button{width: 120px;height: 36px;margin: 0 0 2px 0px;/* include other defaults such as colors and font settings */} Then you can assign one unique class to each button if you really want each button to be unique. You shouldn't need three or four classes for each button. And these classes only list what is DIFFERENT from the default settings. Also you put each button in its own div and style that div with a unique class. Why? Does this really accomplish something that you need and want? Edited September 26, 2013 by davej Link to comment Share on other sites More sharing options...
confused and dazed Posted September 27, 2013 Author Share Posted September 27, 2013 (edited) OK so I did some "downsizing" on my code and here is what I have for the html and css <div class="nav_bannerx"><button type="button" class="a1" onclick="changesel1()"><strong>1</strong></button><button type="button" class="a2" onclick="changesel2()"><strong>2</strong></button><button type="button" class="a2" onclick="changesel3()"><strong>3</strong></button><button type="button" class="a2" onclick="changesel4()"><strong>4</strong></button><button type="button" class="a2" onclick="changesel5()"><strong>5</strong></button><button type="button" class="a2" onclick="changesel6()"><strong>6</strong></button><button type="button" class="a3" onclick="changesel7()"><strong>7</strong></button></div>.nav_bannerx{width:847px; height:37px; margin-top: 20px; background:transparent; border: 0px solid Black;}.a1{width:120px; height:36px; background: url(menu1.jpg); margin-left:0px; border: 0px solid Black; color:#ffffff; font-size:9pt; font-family:arial;}.a1:hover{background: url(hmenu1_1.jpg); color:#000000; }.a2{width:120px; height:36px; background: url(menu2.jpg); ; border: 0px solid Black; color:#ffffff; font-size:9pt; font-family:arial;}.a2:hover{background: url(hmenu2.jpg); color:#000000; }.a3{width:120px; height:36px; background: url(menu3.jpg); ; border: 0px solid Black; color:#ffffff; font-size:9pt; font-family:arial;}.a3:hover{background: url(hmenu3.jpg); color:#000000; } Classes a1,a2,a3 are needed because there are three different images I am using for the buttons - but i eliminated the rest. Its looks great and there are no so many classes. On a side note the squirly is still there... Still looking into it. Edited September 27, 2013 by confused and dazed Link to comment Share on other sites More sharing options...
confused and dazed Posted September 27, 2013 Author Share Posted September 27, 2013 I have it!!!!!! The root cause to the squirly font issue is the google font type Marcellus SC. For whatever reason this particular font is not robust coming from Google. Any thoughts on why? I called it up right after declaring a doc type. <!DOCTYPE html><html><head> <link href='http://fonts.googleapis.com/css?family=Vidaloka|Permanent+Marker|Marcellus+SC' rel='stylesheet' type='text/css'> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 27, 2013 Share Posted September 27, 2013 with .nav_bannerx{width:847px; height:37px; margin-top: 20px; background:transparent; border: 0 solid black;}.nav_bannerx button{width:120px; height:36px; border: 0px solid black; color:#fff; font-size:9pt; font-family:arial;}.a1{ background: url(menu1.jpg); margin-left:0; }.a1:hover{background: url(hmenu1_1.jpg); color:#000; }.a2{ background: url(menu2.jpg); }.a2:hover{background: url(hmenu2.jpg); color:#000; }.a3{background: url(menu3.jpg); }.a3:hover{background: url(hmenu3.jpg); color:#000; } or you could even .nav_bannerx{width:847px; height:37px; margin-top: 20px; background:transparent; border: 0 solid black;}.nav_bannerx button{width:120px; height:36px; border: 0 solid black; color:#fff; font-size:9pt; font-family:arial;}.a1:hover, .a2:hover, .a3:hover {color:#000;}.a1{ background: url(menu1.jpg); margin-left:0; }.a1:hover{background: url(hmenu1_1.jpg); }.a2{ background: url(menu2.jpg); }.a2:hover{background: url(hmenu2.jpg); }.a3{background: url(menu3.jpg); }.a3:hover{background: url(hmenu3.jpg); } Link to comment Share on other sites More sharing options...
davej Posted September 27, 2013 Share Posted September 27, 2013 Google fonts are free. Perhaps some of them have bugs. You can probably give them feedback. Rather than using... <strong>1</strong> ...inside each button, why not just add font-weight:bold to a default button style? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 28, 2013 Share Posted September 28, 2013 Google fonts are free. Perhaps some of them have bugs. You can probably give them feedback. Rather than using... <strong>1</strong> ...inside each button, why not just add font-weight:bold to a default button style? Yes, i was concentrating on css didn't even look at html .nav_bannerx{width:847px; height:37px; margin-top: 20px; background:transparent; border: 0 solid black;}.nav_bannerx button{width:120px; height:36px; border: 0 solid black; color:#fff; font-size:9pt; font-family:Arial; font-weight: bold;}.nav_bannerx button:hover {color:#000;}.a1{ background: url(menu1.jpg); margin-left:0; }.a1:hover{background: url(hmenu1_1.jpg); }.a2{ background: url(menu2.jpg); }.a2:hover{background: url(hmenu2.jpg); }.a3{background: url(menu3.jpg); }.a3:hover{background: url(hmenu3.jpg); } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now