#1
|
||||
|
||||
Help with optimizing css
Currently, my site doesn't scale well when the browser isn't at full size. Here's an example:
(full size) (scaled window) The sidebar pushes into the rest of the site, and I don't know how to prevent it. This is the css code: Code:
@import url('https://fonts.googleapis.com/css?family=Short+Stack'); body { font-family: Short Stack; background-color: #59F; } br {display: block;margin: 3px 0;} #decor { width: 100px; height: 500px; position: fixed; top: 0px; left: 500px; z-index: 1; } #v1 {width: 20%;background-color: #3DF;position: fixed;bottom: 0;top: 0;right: 0;z-index: -1} #v2 {width: 40%;background-color: #4BF;position: fixed;bottom: 0;top: 0;right: 0;z-index: -2} #v3 {width: 60%;background-color: #59F;position: fixed;bottom: 0;top: 0;right: 0;z-index: -3} #v4 {width: 40%;background-color: #67F;position: fixed;bottom: 0;top: 0;left: 0;z-index: -2} #v5 {width: 20%;background-color: #75F;position: fixed;bottom: 0;top: 0;left: 0;z-index: -1} #h1 {height: 20%;background-color: #fff;position: fixed;right: 0;left: 0;top: 0;z-index: -1; opacity: 0.15} #h2 {height: 40%;background-color: #fff;position: fixed;right: 0;left: 0;top: 0;z-index: -1; opacity: 0.15} #h3 {height: 60%;background-color: #fff;position: fixed;right: 0;left: 0;top: 0;z-index: -1; opacity: 0.15} #h4 {height: 80%;background-color: #fff;position: fixed;right: 0;left: 0;top: 0;z-index: -1; opacity: 0.15} #content { width: 1450px; margin: auto; padding: 4px; background-color: rgba(255, 255, 255, 0.5); -webkit-border-radius: 7px; margin-top: 30px; min-height: 200px; font-size: 14px; clear: auto; position: absolute; right: 20px;} h1 { color: #55D; font-family: Verdana; text-align: center; margin: 0; padding: 10px; border-bottom: 2px solid white; font-size: 40px; } #toplist { list-style-type: none; padding: 5px 10px; margin: 0; height: 30px; font-size: 18px; border-bottom: 2px solid white; text-align: center; } #toplist li { line-height: 30px; padding-left: 9px; padding-right: 9px; display: inline; } #container { padding-top: 10px; } h2 { margin: 0; padding-left: 5px; color: #11D; } #left { width: 330px; margin: 0; padding: 10px; float: left; position: fixed; left: 9px; background-color: rgba(255, 255, 255, 0.5);} #right { width: 1400px; padding: 5px; float: right; } #container { clear: both; } a { color: #11A; text-decoration: none; } #speechbubble { position: relative; padding: 5px; text-align: center; background: #FFFFFF; -webkit-border-radius: 53px; -moz-border-radius: 53px; border-radius: 13px; border: #7F7F7F solid 2px; } #speechbubble:after { content: ''; position: absolute; border-style: solid; border-width:0 15px 15px; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; margin-left: -15px; top: -15px; left: 50%; } #speechbubble:before { content: ''; position: absolute; border-style: solid; border-width:0 16px 16px; border-color: #7F7F7F transparent; display: block; width: 0; z-index: 0; margin-left: -16px; top: -18px; left: 50%; HTML Code:
{include file="{$root}{$temp}{$theme}/header.tpl"} <body> <div id='content'><ul id='toplist'>{$menu}</ul>{$avatar}<a href="{$home}profile/view/{$username}">{$username}</a> | ${$cash} {$mysidia->settings->cost} | <a href="{$home}messages">({$messages}) Messages</a> | {$smarty.now|date_format} | {$smarty.now|date_format:"%I:%M %p"} FBT | {$karma} karma<h1>{$site_name}</h1> <div id='container'> <div id='right'><h2>{$document_title}</h2><p id='text'>{$document_content}</p></div> <div id='left'>{$sidebar}</div> <div style='clear: both'> </div> </div> <center>{$footer}Theme by <a href="http://www.pixelpuppy.net" target="_blank">Arianna</a>.</center> <div id='decor'> </div> </div><div id='v1'> </div><div id='v2'></div><div id='v3'></div><div id='v4'></div><div id='v5'></div> <div id='h1'></div><div id='h2'></div><div id='h3'></div><div id='h4'></div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </body> </html>
__________________
|
#2
|
||||
|
||||
The reason it's not scaling well is because you are using pixels, which are set in stone, as opposed to percentages:
HTML Code:
#left { width: 330px; margin: 0; padding: 10px; float: left; position: fixed; left: 9px; background-color: rgba(255, 255, 255, 0.5);} #right { width: 1400px; padding: 5px; float: right; } You'd be better off doing something like changing #right width to 75% and #left width to 25% or such. Also, out of curiosity, what is this? HTML Code:
<div id='v1'> </div><div id='v2'></div><div id='v3'></div><div id='v4'></div><div id='v5'></div> <div id='h1'></div><div id='h2'></div><div id='h3'></div><div id='h4'></div>
__________________
My Mods Site (1.3.4, 2020 Mods) |
#3
|
||||
|
||||
Ah, ok. I'll try to use percentages instead.
I'm not entirely sure what it is since I didn't make it. The layout is the "green" theme, which is one of the default themes to choose from; though I am trying to build off of it since I don't know how to make a layout from scratch. EDIT: Apparently removing it turns the background into a simple gradient instead of the checkered one it has now.
__________________
Last edited by Dinocanid; 11-19-2016 at 09:38 AM. |
#4
|
||||
|
||||
Oh, huh, that's interesting. I do not use any of the older mysidia themes since I'm not sure if they still actually work with the current code. The most up-to-date functional theme, I believe, is "Main."
I, personally, recommend building off of that one instead. Let me know how the percentages work, and let me know if you need help with anything else :)
__________________
My Mods Site (1.3.4, 2020 Mods) |
#5
|
||||
|
||||
I want to add; You've helped me out so much here lately that I would have no problem repaying the favor (sort of) and would gladly put together a theme for you, if you like, that is.
__________________
My Mods Site (1.3.4, 2020 Mods) |
#6
|
||||
|
||||
Thank you! It would be a big help since I'm pretty basic with css and the end product comes out pretty rough; as you probably saw from everything being too big, lol. I have a pretty large monitor so I didn't really know how it looked on other screens.
__________________
|
|
|
What's New? |
What's Hot? |
What's Popular? |