Supplement

Some help and or direction would be great! Thanks in advance.

Ok, well we can mark this thread as resolved, but just in case anyone else runs into this particular problem, it's a server issue. You need to add the tags into an .htaccess file like so: AddType image/svg+xml svg AddType image/svg+xml svgz

Anybody got an idea how this svg file is configured? It looks to me as if it has a backend to the graphic made up of javascript and css.

Question about svg file, hopefully someone can help me. http://images.apple.com/global/nav/images/globalnav_text.svg If i add this link to the css the nav titles show up as this vector graphic. Look at it here: /* TEXT */ #globalheader #globalnav li a span { display:block; width:100%; height:30px; margin:3px auto; background:url() no-repeat 50% 0; _background-image:url(); } #globalheader.svg #globalnav li a span { background-image:url(http://images.apple.com/global/nav/images/globalnav_text.svg); } #globalheader.decelerate #globalnav li a span, #globalheader.ios3 #globalnav li a span { background-image:url(); } #globalheader #globalnav li#gn-apple a span { background-position:50% 0; } #globalheader #globalnav li#gn-store a span { background-position:50% -30px; } #globalheader #globalnav li#gn-mac a span { background-position:50% -60px; } #globalheader #globalnav li#gn-ipod a span { background-position:50% -90px; } #globalheader #globalnav li#gn-iphone a span { background-position:50% -120px; } #globalheader #globalnav li#gn-ipad a span { background-position:50% -150px; } #globalheader #globalnav li#gn-itunes a span { background-position:50% -180px; } #globalheader #globalnav li#gn-support a span { background-position:50% -210px; } If i take that svg file out and add my own nothing shows up. What's the process with saving svg files or have i completely lost the plot. It works if i paste the apple link in but doesn't not work when i use my own file. =/ Here's my file: http://www.greenfitco.com/tm/Navvv1.svg It's obviously not rendering right. any help would be appreciated. thanks

It's what the client wants. I'm not an apple fan at all. I just do what I'm told. =) Thanks robbydesigns, I'll give it a go. ; ]

Additionally, is there a good way to add a logo on top of the first menu position? The only way i can muster this up is inside the menu bar... but i want our icon to extend outside the first menu option... just a little bit..

http://greenfitco.com/tm/apple.html How come i can get it to look correctly in every browser except IE? In IE the titles disappear, it's driving me nuts. Any help would be greatly appreciated. Thank you.

It's not to shabby, I like the second one down. =]

The second link doesn't work and yes I'll have a look and leave my opinion.

I'm looking to just add some drop shadows to the left side border and right side border of my content area. is this possible?

Thanks guys, I'm going to have a look at some other options right now, primarily the media queries. I've dabbled with them a bit but I'm thinking that's the right way to go as well. cheers!

Are you fellas seeing the same thing?

help please Here's the code: <head> <link rel="stylesheet" type="text/css" href="css.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="css/ie7.css"> <![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(window).bind("resize", resizeWindow); function resizeWindow(e){ var newWindowWidth = $(window).width(); // If width width is below 600px, switch to the mobile stylesheet if(newWindowWidth < 600){ $("link[rel=stylesheet]").attr({href : "mobile.css"}); } // Else if width is above 600px, switch to the large stylesheet else if(newWindowWidth > 600){ $("link[rel=stylesheet]").attr({href : "style.css"}); } } }); </script> </head> <body> <div class="container"> <div id="header"> <div id="Layer-14" class="Home Service Menu Special" > <a href="index.html">Home</a> | <a href="service_menu.html">Service Menu</a> | <a href="index.html">Specials</a> | <a href="index.html">Appointments</a> | <a href="our_staff.html">Our Staff</a> | <a href="index.html">Gift Cards</a> | <a href="index.html">Products</a> </div> </div><!--header--> <div id="main_content"> <div class="con_top"> <img src="http://nssthespa.com/Layer-6.png" style="left:1100px; top:450px; position:relative;"> <img src="http://nssthespa.com/Layer-7.png" style="left:910px; top:410px; position:relative;"> <img src="http://nssthespa.com/Layer-15.png"style="right: 685px; top:36px; position:relative;"> </div> <div class="con_bot"><div id="Layer-5" class="Layer 3 copy" ><div></div> </div> </div> <div id="Layer-15" class="Group 4 copy 5" > </div> <div id="Layer-6" class="Shape 4" > </div> </body> </html> CSS html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body { color: #000; font-family: Arial, Helvetica, sans-serif; margin: 0px; padding: 0px; background: url(burlap2.gif) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; line-height:18px; } body, td, th, input, textarea, select, a { font-size: 12px; } .container { width:1126px; margin:0 auto; text-align: left; } /*header*/ #header { width: 100%; text-align: left; height:120px; background:none; position:relative; margin:0px 0 0 0; font-size: x-large; } .logo{ width:331px; height:126px; display:block; float:left; margin: 8px 0 0 0; padding:0; } .con_top{ width: 1024px; text-align: left; margin:-100px 0 0 0; padding:0; background:url(/images/cont_top.png) no-repeat 0 0; height:174px; position:absolute; z-index:-1; } .con_bot{ width: 1024px; text-align: left; margin: 0px 0 0 0; padding:0; background:url(/images/cont_bot.png) no-repeat ; height:174px; position:absolute; } .con_left{ float:left; width:230px; margin:-40px 0 0 30px; padding:15px; height:600px; border-right:5px solid #1d3d41; } .con_left h2{ color:#000; font-weight:700; font-size:18px; margin:0 0 15px 0; } .pic { margin:0 24px 0 0; } .pic2 { margin:-40px 24px 0 0; float:left; width:213px; height:280px; } .con_right{ width:665px; background:none; padding:5px; float:left; margin:0 0 0 0px; } .rght_top{ height:279px; padding:5px; float:left; margin:0px; border-bottom:5px solid #254649; } .img5{ float:right; margin:-60px 100px 15px 0; padding:0; } .rght_bot{ height:288px; float:left; margin:0px 0 0 0px; } .one_third{ width:202px; float:right; margin:0 0px 0 0; padding:7px; height:320px; border-right:5px solid #254649; z-index: 4; } ul.pak{ width:180px; margin:0 0 0 15px; } ul.pak li{ list-style:circle; line-height:20px; } ul.pak li.hd{ list-style:none; margin:0 0 5px 0; font-weight:700; } a.more{ background: url("images/more.png") center left no-repeat; float:right; width:70px; height:33px; display:block; } .inner{ margin:5px 18px 15px 8px; padding:0; height:410px; } /* You named this layer Layer 3 copy */ /* You named this layer Shape 4 */ #Layer-6 { position: absolute; left: 652px; top: 210px; width: 234px; height: 244px; z-index: -2; } /* You named this layer Hours Monday 9am - 7pm Tuesd */ #Layer-7 { position: absolute; right: 220px; top: 630px; width: 164px; height: 170px; } #Layer-14 { position: absolute; left: 245px; top: 47px; width: 861px; height: 25px; font-size:x-large; } a.noborder, ul.foo_links li a.noborder{ border-style:none; margin:0; padding:0 0 0 4px; } ul.foo_links li a.noborder{ border-style:none; margin:0; padding:0 4px 0 25px; } ul.foo_links li { background: url(images/li_img.png) no-repeat 0px 11px; } ul.foo_links li a,ul.foo_links li a:visited{ color:#fff; } ul.foo_links li a:hover{ color:#f3686d; background: url(images/a_bg.gif) repeat-x 0px 0px; padding:5px 35px 5px 0; } .center{ text-align:center; color:#fff; margin:0; padding:0; } #main_content{ width: 1126px; text-align: left; margin:0px 0 300px -10px ; padding:0px; background:url(cont_mid.png) repeat-y 0 0; height:600px; } .con_top{ width: 1126px; text-align: left; margin:-100px 300px 0 0; padding:0; background:url(cont_top.png) no-repeat 0 0; height:174px; z-index:-1; } .con_bot{ width: 1126px; text-align: left; margin: 550px 0 0 0; padding:0; background:url(/6/cont_botxxx.png) no-repeat ; height:250px; } .Layer-5 { width: 1300px; margin: 0; z-index: -6; }

ok, moving along... the layout appears to fine on my desktop but my laptop is pushing the menu on the left a little bit to far to the right as well as the image. any suggestions? http://naturalskinscience.com/dev/index.htm

http://naturalskinscience.com/dev/index.htm How come there is that default rollover on services when a link is added to the image? I want to have a cool rollover but I can't seem to find anything that works with my images. help please.

I'm working on this page layout and I'm wondering how to get it to fit all screens vertically without any scroll bars. Here's the website in question: http://naturalskinscience.com/dev/index.htm Here's the css: body { margin:0; padding:0; border:0; /* This removes the border around the viewport in old versions of IE */ width:100%; background:#fff; min-width:600px; /* Minimum width of layout - remove line if not required */ /* The min-width property does not work in old versions of Internet Explorer */ font-size:90%; } a { color:#369; } a:hover { color:#fff; background:#369; text-decoration:none; } h1, h2, h3 { margin:.8em 0 .2em 0; padding:0; } p { margin:.4em 0 .8em 0; padding:0; } img { margin:10px 0 5px; } #ads img { display:block; padding-top:10px; } /* Header styles */ #header { clear:both; float:left; width:100%; } #header { border-bottom:1px solid #000; } #header p, #header h1, #header h2 { padding:.4em 15px 0 15px; margin:0; } #header ul { clear:left; float:left; width:100%; list-style:none; margin:10px 0 0 0; padding:0; } #header ul li { display:inline; list-style:none; margin:0; padding:0; } #header ul li a { display:block; float:left; margin:0 0 0 1px; padding:3px 10px; text-align:center; background:#eee; color:#000; text-decoration:none; position:relative; left:15px; line-height:1.3em; } #header ul li a:hover { background:#369; color:#fff; } #header ul li a.active, #header ul li a.active:hover { color:#fff; background:#000; font-weight:bold; } #header ul li a span { display:block; } /* 'widths' sub menu */ #layoutdims { clear:both; background:#eee; border-top:4px solid #000; margin:0; padding:6px 15px !important; text-align:right; } /* column container */ .colmask { position:relative; /* This fixes the IE7 overflow hidden bug */ clear:both; float:left; width:100%; /* width of whole page */ overflow:hidden; /* This chops off any overhanging divs */ } /* common column settings */ .colright, .colmid, .colleft { float:left; width:100%; /* width of page */ position:relative; } .col1, .col2, .col3 { float:left; position:relative; padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */ overflow:hidden; } /* 3 Column settings */ .threecol { background-image:url('bgbg.gif'); /* right column background colour */ } .threecol .colmid { right:17.3%; /* width of the right column */ background:#fff; /* center column background colour */ } .threecol .colleft { right:65%; /* width of the middle column */ background-image:url('bgbg.gif'); } .threecol .col1 { width:66%; /* width of center column content (column width minus padding on either side) */ left:99%; /* 100% plus left padding of center column */ /*box-shadow: 0px 5px 10px 10px #;*/ } .threecol .col2 { width:16%; /* Width of left column content (column width minus padding on either side) */ left:18%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */ } .threecol .col3 { width:21%; /* Width of right column content (column width minus padding on either side) */ left:85%; /* Please make note of the brackets here: (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */ } /* Footer styles */ #footer { clear:both; float:left; width:100%; border-top:1px solid #000; } #footer p { padding:10px; margin:0; } Thanks in advance guys.

Thank you very much for your patience and help. How are you this evening? I'm surprised you're not out since it's Friday. Although, I can't say much for myself either. I'm just sitting at home working on some php stuff. =]

That's what I was thinking as well, but I wasn't one hundred percent sure about designing the backgrounds bigger; so bigger is always better. Great to confirm this from a pro. I did several different mock ups of the psd file and one of them was at the largest screen size that I have which is the 22in screen set at 1920 x 1080. What other code was edited? Perhaps the /*Structure*/ .container { width:1524px; margin:0 auto; text-align: left; /*Structure*/ ???

.

.

Thanks sash_oo7, I see where I went wrong and it looks like everything is pretty much wrong. I forgot about using containers and columns and to float things. This helps a lot and gives me a great bit to go off again when it comes to the world of CSS. With that being said, there is still a few things design techniques I don't understand. You used the (webkit-user-select: none; cursor: -webkit-zoom-out;_bg.jpg" width="1024" height="616") on the background image and you decided to set the width & height as above, why that particular size? That size is overlapping and doesn't exactly full screen the graphic. I'm on my laptop atm and I don't have access to my desktop which is a larger 22in screen set at 1920 x 1080. Would the graphic be full on a larger screen. My laptop is set at 1366 x 768 where I'm viewing a couple problems. I have a couple other questions but the background style always kills me. Best, Tim

I just woke up, I'll give this a look over. Thank you.

doh! I thought about that while i was doing it too. sorry m8. maybe this works. http://www.cinematicsounds.com/dev/EW_index.rar it said i didn't have permissions to attach here in the post. ugghh.. "You can make 16 more posts until 14 October 2011 - 02:36 PM. This restriction is in place until you have 17 more approved posts"

Also, what do you suggest instead of so much absolute calls? I need help for sure. Recommend a better way for me to go about a simple design like this one next time around. Cheers! Tim