html - Oddly placed CSS -


i want news content centered (including image , text), instead, it's oddly placed right this: http://prntscr.com/3o7tjc

i tried ways fix , can't find it... um... here html part:

<div id="maincontentcontainer">     <div id="maincontent">          <div class="posttitle">             test         </div>         <div class="posterinfo">             <img width="40%" class="profilepic" src="/site/uploads/avatars/f3780c97491dd9f62f0dd7b1b8bb090a0b9e87d0.png">             <p>posted by: <a class="postedby" href="#">test</a></p>         </div>         <div class="postcontent">             <div class="postimagecontainer" align="center">                 <img class="postimage" src="../uploads/img/test">             </div>              <div class="post">                 <p>test</p>             </div>             comments have been disabled post.</div>         </div>         <div id="sidebar">             welcome, admin<br><a href="logout.php">logout</a><br>         </div>     </div> </div>

annnd, here css.

body {     margin: 0px;     background-color: #6c9ddf;     background-image:url("/assets/img/background.png");     background-repeat: no-repeat; }   .hq {     position:relative;     top:40px;     width:1300px;     height:100%;     left:1%; } #logo {     position:absolute;     width:40%;     height:30%;     right:30%;     z-index: 100; } #homebtn, #playbtn, #newsbtn, #helpbtn {     background: url(/assets/img/menubtns.png) no-repeat; } #homebtn {     background-image: url("/assets/img/home.png");     background-repeat:no-repeat;     background-size: 75%;     width: 204px;     height: 184px;     position: absolute;     top: 318px;     left: 353px; } #homebtn:hover {     background-image: url("/assets/img/home-rollover.png"); } #playbtn {     background-image: url("/assets/img/play.png");     background-repeat:no-repeat;     background-size: 100%;     width: 200px;     height: 230px;     position: absolute;     top: 240px;     left: 480px; } #playbtn:hover {     background-image: url("/assets/img/play-rollover.png"); } #newsbtn {     background-image: url("/assets/img/news.png");     background-repeat:no-repeat;     background-size: 100%;     width: 290px;     height: 290px;     position: absolute;     top: 210px;     left: 650px; } #newsbtn:hover {     background-image: url("/assets/img/news-rollover.png"); } #helpbtn {     background-image: url("/assets/img/help.png");     background-repeat:no-repeat;     background-size: 100%;     width: 330px;     height: 380px;     position: absolute;     top: 180px;     left: 930px; } #helpbtn:hover {     background-image: url("/assets/img/help-rollover.png"); }  #maincontentcontainer {     border-radius: 30px 30px 30px 30px;     -moz-border-radius: 30px 30px 30px 30px;     -webkit-border-radius: 30px 30px 30px 30px;     border: 8px solid #000000;     background-color: #ffe12f;     position: relative;     width: 1200px;     top: 60px;     left: 8%;     padding: 50px;     overflow: hidden;   height: 100%;    position: relative } #maincontent {     position: relative;     border-radius: 30px 30px 30px 30px;     -moz-border-radius: 30px 30px 30px 30px;     -webkit-border-radius: 30px 30px 30px 30px;     border: 0px solid #000000;     background-color: #ffffff;     height: 100%;     padding: 20px;     float: left;     width: 900px; } #sidebar {     position: relative;     border-radius: 30px 30px 30px 30px;     -moz-border-radius: 30px 30px 30px 30px;     -webkit-border-radius: 30px 30px 30px 30px;     border: 0px solid #000000;     background-color: #ffffff;     height: 100%;     padding: 20px;     float: right;     width: 200px; } .posttitle {     font-size: 40px;     font-weight: bold;     color: #515151;     text-align: center; }  .text {     text-align: center; } .title {     text-decoration: none;     color: #515151; } .title:visited {     text-decoration: none;     color: #515151; } .title:hover {     text-decoration: underline; } .postedby {     text-decoration: none; } .posterinfo {     float: left;     padding: 5px; } .postcontent {     overflow: hidden; } .postimagecontainer {     padding: 5px; } .postimage {     width: 100%;     position:relative; } .profilepic {     border-radius: 30px 30px 30px 30px;     -moz-border-radius: 30px 30px 30px 30px;     -webkit-border-radius: 30px 30px 30px 30px;     border: 0px solid #000000; } .registerformwrapper {     float: left;     width: 50%; } .commentformcontainer {     margin-top: 45px; } .commentcontent {     border-radius: 30px;     overflow: auto;     resize: none;     padding: 10px;     outline: none; } .commentbtn {     background: url("../img/comment.png");     width: 269px;     height: 260px;     border: none;     position: relative;     top: -50px;     cursor: pointer;     text-indent: -999px; } .commentbtn:hover {     background: url("../img/commenthover.png"); } .toonname {     font-weight: bold;     font-size: 20px; } .toonnameinput {     border-radius: 30px;     padding: 5px;     outline: none; } .commentbtns {     outline: none; } .commentforminputcontainer {     width: 60%;     float: left; } .registerinput {     border-radius: 30px;     padding: 5px;     outline: none; } .logininput {     border-radius: 30px;     padding: 5px;     outline: none; } .inputlabel {     display: inline-block;     float: left;     width: 200px;     font-size: 20px;     font-weight: bold; }

i tried changing possible combinations, , didnt work exactly...

here fiddle - http://jsfiddle.net/2eyyc/

:edit: alright, did use thing got told , did work appears i'm stuck kind of bar blocking view.

based on understand of op, here solution. added width in pixels css class profilepic

.profilepic {     border-radius: 30px 30px 30px 30px;     -moz-border-radius: 30px 30px 30px 30px;     -webkit-border-radius: 30px 30px 30px 30px;     border: 0px solid #000000;     width: 120px; /* width added here */ }

reason added - since mentioned width 40% , there no defined width parent not able take width properly. changing width pixels trick.

fiddle


Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more