Quick question on

Ok, quick question I manged to resize the circle from the link below in this jqeury cicrle. But i just have 1 last thing cant figure out and i tried playing with few different thing sand no matter what the arrows still shift.

Here is the link I downloaded jqeury templete as you see from demo the arrows Im trying to stay with the cicle no matter what size screen you use ( mostly desktop & tablets ) I want to focus on not so much mobile devices.
When I see it in my ipad the arrows one shifts to the far right and other shifts fae left so it doe not stay with the circle.

Also below is some of the code that revolves around the arrows.
Im using Dreamweaver CS6

The link:
http://tympanus.net/codrops/2011/04/11/circular-discography-template/


The code: CSS:

@import url('reset.css');
body{
    background:#ffc000;
    color:#fff;
    font-family: 'Terminal Dosis Light', Arial, sans-serif;
    text-transform:uppercase;
  
}
a{
    color:#fff;
    text-decoration:none;
}
img.cd_bgimage{
    position:fixed;
    left:0px;
    bottom:0px;
    width:100%;
    opacity:100;
}
.cd_overlay{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    background:transparent url(../images/pattern.png) repeat top left;
}
.cd_loading{
    width:350px;
    height:350px;
    position:centered;
    top:200%;
    left:300%;
    margin:-270px 0px 0px -270px;
    border:20px solid #fff;
    background:#fff url(../images/loader.gif) no-repeat center center;
    z-index:99999;
    opacity:0.7;
    border-radius:270px 270px 270px 270px;
}
h1.cd_title{
    font-size:170px;
    position:fixed;
    top:0px;
    left:10px;
    text-shadow:0px 0px 1px #fff;
}
h1.cd_title span{
    display:block;
    font-size:22px;
    margin: -35px 0px 0px 13px;
}
.jp-audio{
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    z-index:1000;
    margin: -200px 0 0 -107px;
    height:200px;
}
.cd_playlist{
    display:none;
}
.cd_album{
    width:350px;
    height:350px;
    border-radius:270px 270px 270px 270px;
    background-color:transparent;
    background-repeat: no-repeat;
    background-position:center center;
    position:fixed;
    top:53%;
    left:80%;
    margin:-270px 0px 0px -270px;
    border:20px solid #fff;
    display:none;
  
  
    }
.cd_album_1{
    background-image:url(../thumbs/1.jpg);
}
.cd_album_2{
    background-image:url(../thumbs/2.jpg);
}
.cd_album_3{
    background-image:url(../thumbs/3.jpg);
}
.cd_album_4{
    background-image:url(../thumbs/4.jpg);
}
.cd_album_5{
    background-image:url(../thumbs/5.jpg);
}
.cd_album_6{
    background-image:url(../thumbs/6.jpg);
    }
.cd_album_7{
    background-image:url(../thumbs/7.jpg);
    }
  
.cd_album h1{
    position:absolute;
    top: 250px;
    left: 10px; /* left:-327px; */
    background:#fff;
    color:#000;
    font-size:18px;
    text-shadow:2px 2px 0px #ddd;
    padding:2px 30px;
    z-index:100;
    cursor:pointer;
}
.cd_navigation a{
    width:85px;
    height:85px;
    position:fixed;
    left:40%;  
    text-indent:-9000px;
    outline:none;
    opacity:0.6;
    z-index:999999;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -transition: all 0.5s ease-in-out;
}
.cd_navigation a:hover{
    opacity:1.0;
}
.cd_navigation a.cd_prev{
  
    background:transparent url(../images/nav_prev_rotated.png) no-repeat center center;
    bottom:255px;
    margin-left:260px;
}
.cd_navigation a.cd_next{
    background:transparent url(../images/nav_next_rotated.png) no-repeat center center;
    top:160px;
    margin-left:300px;
}
.cd_content{
    width:350px;
    height:350px;
    border-radius:270px 270px 270px 270px;
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    background:transparent url(../images/bg_content.png) repeat top left;
}
.cd_content_inner{
    position: absolute;
    top: 130px;
    left: 28px;
    width: 300px;
    height: 120px;
    outline: none;
    overflow: hidden;
    background: transparent url(../images/bg_content_inner.png) repeat top left;
}
.cd_content_inner p{
    color: #000;
    font-size: 12px;
    padding: 10px;
    text-align: center;
}
a.cd_back{
    position:absolute;
    top: 53px;
    right:-55px;
    background:#fff;
    color:#000;
    font-size:16px;
    text-shadow:2px 2px 0px #ddd;
    padding:2px 30px;
    z-index:100;
    display:none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -transition: all 0.5s ease;
}
a.cd_back:hover{
    color:#ffc000;
}
.cd_footer{
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    font-size:13px;
    height:20px;
    padding-bottom:14px;
}
.cd_footer a{
    padding:5px 10px;
    letter-spacing:1px;
    text-shadow:0px 0px 1px #fff;
    color:#fff;
    float:right;
}
.cd_footer a:hover{
    color: #FF0;
}
.cd_footer a span{
    font-weight:bold;
}
.cd_footer a.cd_left{
    float:left;
}

Code (markup):

thanks,

 

Well, don't take this the wrong way, but this REEKS of dicking around in Photoshop without giving a flying purple fish about semantics or accessibility, and is the kind of 'gee ain't it neat' BS layout concept that has no malfing business on a website in the first place. That you're trying to make it work regardless of screen size just further emphasizes why this nonsense of drawing pretty pictures in photoshop and calling it a layout, then sleazing pointless scripting bloat on top of it is the antithesis of sane and rational site design.

Particularly when the end result seems to be websites with nothing remotely resembling actual content. It might be artsy and visually impressive, but when it fails to convey anything meaningful to users what good is it? There's a reason you don't see this type of goofy trickery nonsense on REAL websites like eBay, Amazon, Craigslist, Google, etc, etc...

 

You're assuming that the whole purpose of a website IS to be accessible and purvey information in a simple, straight-forward way. That's not necessarily the intent. As for the design in question, it works very well for what it's meant for (look at the original link) - and it does look neat. Is it an accessible design? Mostly, it's not. Is it a straight-forward, no frills design? Not at all. Does it work, to do what's intended? Definitely.

Your idea of what is needed is a bit shallow and bare-bones. Not everyone want to see websites they just as well could have read in Lynx. Sometimes, fancy is exactly what one wants, especially on pages where the content is not too elaborate (say, like a promo-site for a band, or a CD) - and where the whole purpose of the site may be to entice interest in buying the actual product.

Of course, most of the websites containing lots of information, like eBay, Amazon, Twitter, Facebook for that matter, go for a more sober, standard design, with vertical columns and easy to navigate content. But, hey, have a look at the iPad eBay-app - it's nothing like the website at all, and uses the touch-interface of the iPad for all that it's worth.

Plain, "boring" websites doesn't really sell to clients nowadays (of course, depending on the clients), and some artistry and elegance and "outside the box" thinking can be the one thing that gets you the contract. Simple as that.

 

You mean like in a website... the whole reason we have websites, why they came into being, why HTML exists...

Looking neat means nothing if the layout is broken at anything less than 1920x1080, which here it is in no less than four browser engines... and that's the original before the poor OP gets suckered into trying to use it just because it's "flashy".

Mostly it is... useless at anything less than 1920 wide, broken layout in anything other than chrome and FF (even Safari chokes on it), illegible undersized fonts with illegible color contrasts, gibberish use of H1 mated to no logical document structure (so kiss off keyboard/heading nav), and that's before talking the hundreds of K of javascript in dozens of files for NOTHING of value to visitors.

Thing looks more like a splash page than content delivery -- leaving visitors to wildly mouse about and click blindly hoping to find that the page actually does anything; which anyone with experience in building WEBSITES would know treads you immediately into bounce city.

If by 'intended' you mean be a broken buggy layout that's useless on anything other than the 'designers' resolution display, confuse users with counterintuitive "take a wild guess" controls that you might not even be able to SEE (I didn't even NOTICE the arrows first visit thanks to the white on yellow with white stripes -- WAY to hide the second most important controls on the page!)

Well to be brutally frank, those are the types of clients who then shouldn't be having websites or making decisions about them in the first place -- as they start to tread into the same type of "sophisticated investor will give cash for vague promises" who got us into that first dotcom burst.

You mean the annoying pile of **** (assuming it's anything like the Android one) that makes me go "**** this!", install Opera Mini or open up the default browser and just use the regular site?

I'm not saying you can't have artisty and creativity, but the limitations of the medium and needs of visitors should come FIRST, and this type of inaccessible fat bloated slow garbage is nothing more than nube-predation of the ignorant! As I've often said it's the type of things the folks who think they can get sound technical advice from the pages of Forbes would fall for; which is akin to trying to get sound financial advices from the pages of Popular Electronics.

 

I'm not really sure what kind of equipment you're running on - but I just tested the template in the different browsers on my computer - Chrome, Firefox, IE10, Safari and Opera - and it works perfectly in all of them, no bugs. It also works exactly the same whether or not I'm running full screen (1920x1080) or resize the windows to 1024x768 (which, to be honest, is the minimal size I even care about accomodating). So, I don't really understand your need to say it's broken, and in need of a full-HD window.

I'm all for semantic web, and I do understand that there are people with special needs (vision-impaired, blind etc.) who would also like to be able to use the web - that does NOT mean we have to make EVERYTHING available to them - a webpage serving videos, for instance - why would you need that to be available in a screen-reader?

 

So you're not seeing these types of problems in REAL Opera (as opposed to the steaming pile of shit cripplerware known as Chrome with a Opera logo slapped on it)?
http://www.cutcodedown.com/for_others/brokenStuff/circularDiscographyOpera12.jpg

Or this in Firefox?
http://www.cutcodedown.com/for_others/brokenStuff/circularDiscographyFF.jpg

Of course, it being a uselessly tiny little illegible circle on my 2560x1440 27" display doesn't help either -- so it's lose/lose at both ends of the spectrum; typical of the dicking around in Photoshop before you even have semantic markup approach to 'design'.

So you don't care about netbooks, tablets, handhelds, etc? There's a REASON we have media queries -- and before you say it, don't give me this same BS I've been hearing for a decade now of "but small devices resolutions are improving" since they LIE about their resolutions (apple retina even when you tell it not to)... there will ALWAYS be smaller leaner devices (like phones) with 'special needs'.... 1024 wide layout wouldn't even work on my nettop, or my Icoo Tablet, or even my quad core freaking Android phone in portrait. (and to be frank, landscape SUCKS)

Perhaps not, but if you are practicing sane and rational design it should at least give them some clue what's going on -- but MORE important is fast loading easy to use pages across ALL devices, which is the entire reason TBL created HTML in the first blasted place! This halfwit idiotic BS of "Well it's ok on my screen" and "everyone has broadband" just treads into the same type of lame excuses asshattery that's making the web less useful today than it was BEFORE we had all the tools to make it useful.

See "Lame Excuses"
http://www.456bereastreet.com/archive/200704/lame_excuses_for_not_being_a_web_professional/

That's the real laugh of it, the more they give us tools to make the web accessible and tell us HOW to make it accessible, the more people sleaze pages out any old way to the point the crap sleazed out in HTML 3.2 a decade and a half ago was better... Wow, wonder if that's the real reason HTML 5 dials back the clock on coding practices to the worst 1997. They tried giving use the tools, nobody bothered so "oh well, go ahead and crap out non-semantic bloated psd jockey script-tard bullshit that's useless to users."

 

Uhm... I'm using the latest version of Opera for testing, same as Firefox. Opera 12 is... ancient.
Opera: http://www.nutshell.no/images/opera.png Firefox: http://www.nutshell.no/images/firefox.png

And I tested on a high-resolution screen now - yes, the circle gets smaller, but is in no way illegible - if it is, you need better vision, or better glasses

The point is that there should be room for innovation, outside-the-box thinking when it comes to design and looks. Sometimes, since we're bound (mostly) by using HTML in some form, it will mess with semantics - if the developer knows what s/he's doing, it doesn't have to.

And, again - depending on what market you're after, what you want to achieve with your page, etc. you might not care as much about whether or not you're keeping within 50k load for a pageview. If I create a page that's mostly catering for Norwegian customers (I live in Norway), where most have broadband access, and 3G and 4G mobile service is widespread, and hardly anyone have limited data plans, I don't really care if the user needs to download 50k or 400k, as long as the speed is acceptable (less than 1sec page loads, preferably). It's all about the market you're trying to match.

Yes, by all means, DO use semantic web - code properly, use standards, provide fallbacks for those not using "your kind" of browser, javascript, images etc.

 

Opera 12.16 is actually recent (July 2013) and what Opera recommends ACTUAL Opera users still use, because Opera 15/newer is crippled for the people who actually use Opera. The new versions are missing 99%+ of what made opera unique and worth using over other browsers -- things like portrait tabs, favicon launchers, rocker navigation, gestures, in-built mail client, user.css, user.js, accessibility stylings, content blocking/adblock, custom user buttons, per page script and plugin blocking, notes, cache viewer -- they're just gone! It's just as pathetically useless a crippleware as Chrome and Safari; in terms of the actual user interface all three now feel like a trip with Mr. Peabody and his boy Sherman to revisit IE 3 on the Mac.

The only reason the 'new' Opera is up to version 17 is they skipped over 13 and 14 and they've switched to that same idiotic 'full version number even for a minor patch' BS that chrome and FF use... You know, the reason we'll be up to Firefox version 40 by the end of next year? In the past ten months FF going from version 18 to version 25 -- basically a full version number every 5 weeks? (which given the 'changes' I wonder why the hell it's even changed major-version). I swear it's the same idiotic nonsense as the 'living document' asshattery the W3C is doing to HTML.

ACTUAL Opera users wanted Opera with the blink engine -- I was looking forward to that. Instead we got a slower version of Chrome with the Opera logo slapped on it any old way... Which is why people are STILL bitching about what a pile of shit Opera 15 through 17 is on the Opera forums... and why 12.16 came out the same time as Opera 16, and why they are STILL releasing monthly script patches for it. (javascript updates to make some sites work or work better, downloaded transparently in the background)

"testing the latest Opera" is the same as testing Chrome, since it's just Chrome with the Opera logo on it; a pathetically useless crippled shell of its former self.

 

Okay, fine - I've never used Opera, since I think it used to be a bloated piece of sh*t I've never wanted an email-client built in, torrents, gestures, etc. The user-styling and content blocking is easily achievable in FF / Chrome and so on.
I'm also guessing that most users using Opera is using the latest version (Chrome, as you say), since finding the 12.16 version is a hunting game on the Opera website. Hence - I don't really care Minimal user groups I can afford to lose, 99% of the time.
But thanks for the info, I'll have to install that one as well, for testing purposes.