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>

Abronsyth · #2 11-19-2016, 07:54 AM

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 have the content at a massive width, the whole thing doesn't even show for me because of my laptop's resolution. Image

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>

Dinocanid · #3 11-19-2016, 09:33 AM

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.

Abronsyth · #4 11-19-2016, 11:17 AM

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 :)

Abronsyth · #5 11-20-2016, 08:25 PM

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.

Dinocanid · #6 11-20-2016, 09:34 PM

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?