Help with optimizing css

Dinocanid · #1 11-18-2016, 04:56 PM

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%;

and my template.tpl

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>

What's New?

What's Hot?

What's Popular?