Jump to Page: 1 2 3 4
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5127
Karma: 89 (+103/-14)
|
|
Reply | Quote
|
|
Re: Topic Bar stretches out of line
Other than making the font size smaller, the only way to fix that is to edit the subject line that has this in it:
DOWNTIMES....IMPORTANT....PLEASE
It's that line without spaces that's stretching the page.
If you or Queeny would like, I could look at the code for other things, but I only needed to look at the page itself to see the cause of this problem. 
|
|
4/19/2008, 8:55 pm
|
PM Lesigner Girl
Read Blog
|
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5127
Karma: 89 (+103/-14)
|
|
Reply | Quote
|
|
Re: Topic Bar stretches out of line
You're both very welcome.
You don't need to admin me, Queeny. Being a global admin already gives me that power.
|
|
4/20/2008, 3:34 pm
|
PM Lesigner Girl
Read Blog
|
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5127
Karma: 89 (+103/-14)
|
|
Reply | Quote
|
|
Re: Topic Bar stretches out of line
The current design doesn't account for different screen resolutions, plus it uses tables. I recoded the page offline, then uploaded screen grabs so you can see the difference:
click here
Since my graphics card can't handle a resolution larger than 1024px on my LCD, I used Opera's zoom feature to simulate a larger resolution by zooming out.
I want to wait for your approval after seeing the screen grabs before making the major overhaul, but I did make a few coding tweaks in the meantime. For example, I found this in the CSS:
.sidebox h2; font-size: 20px;
margin: 1px; height: 20px; text-align: center; border: 1px solid #FFFFFF;}
I changed the ; above to a { as it should have been.
I also removed some of the HTML styling and put it in the CSS, such a the marquee font and vertical alignment of the sidebar and main sections. Wizard, you said some of the CSS didn't need to be there, but it's really the HTML styling that needs to go, because styling doesn't belong in the HTML.
Queeny, let me know if you like the screen grabs and I'll transfer the code from my offline copy to your board. Moving the banner to the right was just a suggestion so it doesn't cover up the face in the wallpaper, but I'll be happy to center it if you prefer.
|
|
4/20/2008, 5:37 pm
|
PM Lesigner Girl
Read Blog
|
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5127
Karma: 89 (+103/-14)
|
|
Reply | Quote
|
|
Re: Topic Bar stretches out of line
You're welcome, Wizard. Don't ever hesitate to ask questions!
|
|
4/20/2008, 7:35 pm
|
PM Lesigner Girl
Read Blog
|
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5127
Karma: 89 (+103/-14)
|
|
Reply | Quote
|
|
Re: Topic Bar stretches out of line
Queeny, click on the link again and look at the 2nd screen shot. See how it's light green below the page's background pic? In order to fix that and make it look like the 4th screen grab listed on that page, I had to take the background image out of the layout/colors, create a container div around the whole board with that image as the container's background, then take the banner out of the layout/colors page and put it into the HTML.
With it done this way, centering or right-aligning is easy through the CSS. The code that I used in this case is:
#header { text-align: right; margin: 0 10px; }
To center, just change the text-align to center
The background image would no longer be the background of the page as I said, but instead it would be the background of the div that contains everything. The CSS I have for that is this:
#container {
margin: 0 auto;
position: relative;
width:99%;
min-width: 1000px;
max-width: 1124px;
background: #02040b url(http://img.photobucket.com/albums/v38/overthehillfan/RUNBOARD/LOTRQOsizedEvanstar.jpg) center top no-repeat;
}
The only things you would have to change there are the parts in bold. The hex code should blend in with the bottom of your background image, which is the whole point of creating the container and putting the background image into that instead of into the page itself.
The HTML for the div that contains the banner is this:
<div id="header">
<a href="/bqueenysobsessions"><img alt="Queeny's Obsessions" src="http://img.photobucket.com/albums/v38/overthehillfan/RUNBOARD/Banners/GNBanner1.jpg" /></a>
</div><!-- end header -->
The only part you would have to change there is the url to your image, which is all you really do in the layout/colors screen anyway, and you wouldn't even have to worry about defining the width and height.
If you find this confusing, I'd be happy to walk you through these changes in the future until it sticks. Otherwise we can leave it as is and let people with larger screen resolutions see the drastic change in color below the background image. 
Would you like me to set this code up on a test board and let you play with it before you decide?
|
|
4/21/2008, 8:00 pm
|
PM Lesigner Girl
Read Blog
|
Add to this discussion
Jump to Page: 1 2 3 4
Powered by AkBBS 0.9.5b - Link to us
- Blogs
- Hall of Honour
- Chat
Click here to get your own free message board
|
You are not logged in (login)
Board's time is: 12/1/2008, 6:59 pm EDT
|
|
|
