Viewing Dynamic Width

  1. Portal Home
  2. Forum
  3. EverWeb
  4. General Discussion

Dynamic Width



User: twsees 12 years ago
I'm stuck and really need some help. I need to use Dynamic Width on Page Details, but then when I load the page in the browser all my objects are skewed to the left and won't center. I need for all the objects to stay in the center. How do I do this?
User: Roddy 12 years ago
Quote:
I need to use Dynamic Width on Page Details


Can you elaborate on this? What are you trying to do?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: twsees 12 years ago
Sorry. What I'm looking to do is use Page Background with a Gradient Fill from a darker blue at the top to a white at the bottom. If I used fixed width, I get these awful white boarders on left and right sides. I know I can change the browser background color but that isn't gradient and this is not the effect I was looking for. My site is going to be viewed by an audience that I know has a whole spectrum of monitor sizes and I want the gradient fill background to fill the entire width of the browser window. This appears to only be done by using Dynamic Width. This is great, but when I add my content it looks centered on my screen, but when it load on another computer with a larger monitor, the content is still aligned vertically properly, but is no longer aligned centered horizontally. They are shifted to the left side of the screen. I hope this makes more sense. I don't know if I can upload a screen shot if that would make it easier to understand. But I can try and do that. I did notice that there is another post called Dynamic Width (Page Layout) and you mention something about DIV containers. I can try to look at that later when I have more time. But your help is very appreciated. Thank you very much.
User: Roddy 12 years ago
The easiest way to do this is to insert the background gradient into the page or the site by using the appropriate Head Code box.

Use an online generator like this to get the code...

http://www.colorzilla.com/gradient-editor/

Paste it into the code shown below between the comments...

<style type="text/css">
body {
<!--start paste-->
background: #1e5799; /* Old browsers */

background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */

background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
<!--/finish paste-->
}
</style>

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: twsees 12 years ago
Ok, I did that. I went to the site in your post and generated the colors I wanted. I copied from the first background statement to the end of /* IE6-9*/ just like your example. I pasted into the Head Code for the page and now when I load the page it shows all that code at the top of the page. The text is all white thats why it doesn't show. Any idea what I did wrong? Thanks for your help.

Screen shot 2013-10-09 at 8.39.44 PM.png
User: Christopher 12 years ago
You need to copy and paste ALL of the code, from <style type="text/css"> to </style>

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: twsees 12 years ago
YES! Awesome! That was it. Thank you so much. I'm sorry for being dumb. I thought that by the comment of <!--start paste--> meant that I didn't copy <style type="text/css"> body { and that I start the copy from the first Background statement. And vise versa at the end. But this worked and is exactly the effect I was looking for. Again thank you very much.


Post Reply
You must login or signup to post.