Thread: Site appearence

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    3
    Rep Power
    0

    Site appearence


    Hallo to everyone
    Thiw is my first thread about css.I am new to css coding
    My question:How can i make my site appear normally to all monitors .
    I made3 it at my 19 inch 4:3 monitor but when i see my site to an other monitor example 17 inch or 22 wide everything is in a mess.
    I have been told to add this :
    .all wrapper { width:900px;margin:0 auto; }

    but i dont know exactly where..I made some tries but nothing changed

    This is my css code;
    Code:
    /* General Style */
    body {background:#FFFFFF; margin:0px; padding:0px;}
    #contanier {background: url('/.s/t/812/2.gif') repeat-x;}
    .header {height: 280px; background: url('/.s/t/812/3.jpg') top center no-repeat; width: 900px;}
    .data-block {width: 50%; height: 30px; padding-left: 140px;}
    .logo-block {padding-left: 145px; height: 120px; text-align: center; padding-right: 80px;}
    .logo-block h1 {margin: 0; padding: 0; font-weight: normal; color:#000000;}
    .login-block {padding-left: 155px; height: 120px; text-align: center; padding-right: 70px; padding-bottom: 50px;}
    
    .boxTable {width:200px;padding:1px;margin:5px 0px; border: 1px solid #cacae6;}
    .boxTable th {font-size:9pt; color:#FF9115; padding-left:35px; text-align: left; background: url('/.s/t/812/1.gif') no-repeat #f5fcff; border: 1px solid #5bd1fc; height: 34px;}
    .boxContent {margin-left:auto;margin-right:auto;}
    .center {text-align:center;}
    
    a:link {text-decoration:underline; color:#0069A9;}
    a:active {text-decoration:underline; color:#0069A9;}
    a:visited {text-decoration:underline; color:#0069A9;}
    a:hover {text-decoration:none; color:#000000;}
    
    td, body {font-family:verdana,arial,helvetica; font-size:8pt;}
    form {padding:0px;margin:0px;}
    input,textarea,select {vertical-align:middle; font-size:8pt; font-family:verdana,arial,helvetica;}
    .copy {font-size:7pt;}
    h1 {color: #12a4d8; font-size: 14pt; font-weight: normal;}
    
    a.noun:link {text-decoration:none; color:#7D7D7D}
    a.noun:active {text-decoration:none; color:#7D7D7D}
    a.noun:visited {text-decoration:none; color:#7D7D7D}
    a.noun:hover {text-decoration:none; color:#016CAC}
    
    hr {color:#CCCCCC;height:1px;}
    label {cursor:pointer;cursor:hand}
    
    .blocktitle {font-family:Verdana,Sans-Serif;color:#787878;font-size:12px;}
    
    a.menu1:link {text-decoration:underline; color:#FAFAFA}
    a.menu1:active {text-decoration:underline; color:#FAFAFA}
    a.menu1:visited {text-decoration:underline; color:#FAFAFA}
    a.menu1:hover {text-decoration:underline; color:#CCCCCC}
    .menuTd {padding-left:12px;padding-right:10px; background: url('/.s/t/812/4.gif') no-repeat 0px 3px;}
    
    .mframe {border-left:1px solid #E5E7EA; border-right:1px solid #E5E7EA;}
    .colgray {border-right:1px solid #E5E7EA;}
    .colwhite {border-right:1px solid #FAFAFA;}
    .msep {border-top:1px solid #FAFAFA;}
    /* ------------- */
    
    /* Menus */
    ul.uz, ul.uMenuRoot {list-style: none; margin: 0 0 0 0; padding-left: 0px;}
    li.menus {margin: 0; padding: 0 0 0 15px; background: url('/.s/t/812/5.gif') no-repeat; margin-bottom: .6em;}
    /* ----- */
    
    /* Site Menus */
    .uMenuH li {float:left;padding:0 5px;}
    
    
    .uMenuV .uMenuItem {font-weight:bold;}
    .uMenuV li a:link {text-decoration:none; color:#4F98BC;}
    .uMenuV li a:active {text-decoration:none; color:#4F98BC;}
    .uMenuV li a:visited {text-decoration:none; color:#4F98BC;}
    .uMenuV li a:hover {text-decoration:none; color:#000000;}
    
    .uMenuV a.uMenuItemA:link {text-decoration:none; color:#79BD11}
    .uMenuV a.uMenuItemA:visited {text-decoration:none; color:#79BD11}
    .uMenuV a.uMenuItemA:hover {text-decoration:none; color:#000000}
    .uMenuV .uMenuArrow {position:absolute;width:10px;height:10px;right:0;top:3px;background:url('/.s/img/wd/1/ar1.gif') no-repeat 0 0;}
    .uMenuV li {margin: 0; padding: 5px 5px 5px 15px;border-bottom:1px solid #97C821;font-size:11px;font-weight:bold; background: url('/.s/t/812/6.gif') left center no-repeat;}
    /* --------- */
    
    /* Module Part Menu */
    .catsTd {padding: 0 0 6px 15px; background: url('/.s/t/812/5.gif') no-repeat;}
    .catName {font-family:Verdana,Tahoma,Arial,Sans-Serif;font-size:11px;}
    .catNameActive {font-family:Verdana,Tahoma,Arial,Sans-Serif;font-size:11px;}
    .catNumData {font-size:7pt;color:#6E6E6E;}
    .catDescr {font-size:7pt; padding-left:10px;}
    a.catName:link {text-decoration:none; color:#7D7D7D;}
    a.catName:visited {text-decoration:none; color:#7D7D7D;}
    a.catName:hover {text-decoration:none; color:#016CAC;}
    a.catName:active {text-decoration:none; color:#7D7D7D;}
    a.catNameActive:link {text-decoration:none; color:#016CAC;}
    a.catNameActive:visited {text-decoration:none; color:#016CAC;}
    a.catNameActive:hover {text-decoration:none; color:#000000;}
    a.catNameActive:active {text-decoration:none; color:#016CAC;}
    /* ----------------- */
    
    /* Entries Style */
    .eBlock {}
    .eTitle {font-family:Verdana,Arial,Sans-Serif;font-size:10pt;font-weight:bold;color:#000000; padding: 10px; border-bottom: 1px dashed #cbcbe6; background:#f1f8fb;}
    .eTitle a:link {text-decoration:none; color:#000000;}
    .eTitle a:visited {text-decoration:none; color:#000000;}
    .eTitle a:hover {text-decoration:underline; color:#000000;}
    .eTitle a:active {text-decoration:none; color:#000000;}
    
    .eMessage {text-align:justify;padding:10px !important; font-size: 9pt;}
    .eText {text-align:justify;padding-bottom:5px;padding-top:5px;border-top:1px solid #CCCCCC}
    .eDetails {border-top:1px dashed #DDDDDD;border-bottom:1px dashed #DDDDDD;font-family:Verdana,Tahoma,Arial,Sans-Serif;color:#00cc00;padding-bottom:5px;padding-top:3px; text-align:left;font-size:7pt;}
    .eDetails1 {border-top:1px dashed #DDDDDD;border-bottom:1px dashed #DDDDDD;font-familyVerdana,:Tahoma,Arial,Sans-Serif;color:#1A1A1A;padding-bottom:5px;padding-top:3px; text-align:left;font-size:8pt;}
    .eDetails2 {border-bottom:1px dashed #DDDDDD;font-family:Verdana,Tahoma,Arial,Sans-Serif;color:#1A1A1A;padding-bottom:5px;padding-top:3px; text-align:left;font-size:8pt;}
    
    .eRating {font-size:7pt;}
    
    .eAttach {margin: 16px 0 0 0; padding: 0 0 0 15px; background: url('/.s/t/812/7.gif') no-repeat 0px 0px;}
    /* ------------- */
    
    /* Entry Manage Table */
    .manTable {}
    .manTdError {color:#FF0000;}
    .manTd1 {}
    .manTd2 {}
    .manTd3 {}
    .manTdSep {}
    .manHr {}
    .manTdBrief {}
    .manTdText {}
    .manTdFiles {}
    .manFlFile {}
    .manTdBut {}
    .manFlSbm {}
    .manFlRst {}
    .manFlCnt {}
    /* ------------------ */
    
    /* Comments Style */
    .cAnswer {padding-left:15px;padding-top:4px;font-style:italic;}
    
    .cBlock1 {background:#FFFFFF; border:1px solid #CCCCCC;}
    .cBlock2 {background:#FFFFFF; border:1px solid #CCCCCC;}
    /* -------------- */
    
    /* Comments Form Style */
    .commTable {border:1px solid #CCCCCC;background:#FFFFFF;}
    .commTd1 {color:#000000;}
    .commTd2 {}
    .commFl {color:#6E6E6E;width:100%;background:#FCFCFC;border:1px solid #CCCCCC;}
    .smiles {border:1px inset;background:#FFFFFF;}
    .commReg {padding: 10 0 10 0px; text-align:center;}
    .commError {color:#FF0000;}
    .securityCode {color:#6E6E6E;background:#FCFCFC;border:1px solid #CCCCCC;}
    /* ------------------- */
    
    /* Archive Menu */
    .archUl {list-style: none; margin:0; padding-left:0;}
    .archLi {padding: 0 0 3px 10px; background: url('/.s/t/812/8.gif') no-repeat 0px 4px; font-family:Tahoma,Arial,Sans-Serif;}
    a.archLink:link {text-decoration:underline; color:#6E6E6E;}
    a.archLink:visited {text-decoration:underline; color:#6E6E6E;}
    a.archLink:hover {text-decoration:none; color:#000000;}
    a.archLink:active {text-decoration:none; color:#000000;}
    /* ------------ */
    
    /* Archive Style */
    .archiveCalendars {text-align:center;color:#0000FF;}
    .archiveDateTitle {font-weight:bold;color:#6E6E6E;padding-top:15px;}
    .archEntryHr {width:250px;color:#DDDDDD;}
    .archiveeTitle li {margin-left: 15px; padding: 0 0 0 15px; background: url('/.s/t/812/9.gif') no-repeat 0px 4px; margin-bottom: .6em;}
    .archiveEntryTime {width:65px;font-style:italic;}
    .archiveEntryComms {font-size:9px;color:#C3C3C3;}
    a.archiveDateTitleLink:link {text-decoration:none; color:#6E6E6E}
    a.archiveDateTitleLink:visited {text-decoration:none; color:#6E6E6E}
    a.archiveDateTitleLink:hover {text-decoration:underline; color:#6E6E6E}
    a.archiveDateTitleLink:active {text-decoration:underline; color:#6E6E6E}
    .archiveNoEntry {text-align:center;color:#0000FF;}
    /* ------------- */
    
    /* Calendar Style */
    .calTable {margin-left: auto; margin-right: auto;}
    .calMonth {}
    .calWday {color:#000000; background:#b7e36e; width:18px;}
    .calWdaySe {color:#000000; background:#acdeee; width:18px;}
    .calWdaySu {color:#000000; background:#acdeee; width:18px; font-weight:bold;}
    .calMday {background:FFFFFF;color:#000000;}
    .calMdayA {background:#CCCCCC;font-weight:bold;}
    .calMdayIs {background:#FFFFFF;color:#000000;font-weight:bold;border:1px solid #CCCCCC;}
    .calMdayIsA {border:1px solid #016EAD; background:#FFFFFF;font-weight:bold;}
    a.calMonthLink:link,a.calMdayLink:link {text-decoration:none; color:#000000;}
    a.calMonthLink:visited,a.calMdayLink:visited {text-decoration:none; color:#000000;}
    a.calMonthLink:hover,a.calMdayLink:hover {text-decoration:underline; color:#016CAC;}
    a.calMonthLink:active,a.calMdayLink:active {text-decoration:underline; color:#000000;}
    /* -------------- */
    
    /* Poll styles */
    .pollBut {width:110px;}
    
    .pollBody {padding:7px; margin:0px; background:#FFFFFF}
    .textResults {background:#E5E5E5}
    .textResultsTd {background:#FFFFFF}
    
    .pollNow {border-bottom:1px solid #E5E5E5; border-left:1px solid #E5E5E5; border-right:1px solid #E5E5E5;}
    .pollNowTd {}
    
    .totalVotesTable {border-bottom:1px solid #E5E5E5; border-left:1px solid #E5E5E5; border-right:1px solid #E5E5E5;}
    .totalVotesTd {background:#FFFFFF;}
    /* ---------- */
    
    /* User Group Marks */
    a.groupModer:link,a.groupModer:visited,a.groupModer:hover {color:blue;}
    a.groupAdmin:link,a.groupAdmin:visited,a.groupAdmin:hover {color:red;}
    a.groupVerify:link,a.groupVerify:visited,a.groupVerify:hover {color:green;}
    /* ---------------- */
    
    /* Other Styles */
    .replaceTable {background:#FFFFFF;height:100px;width:300px;border:1px solid #9E9E9E;}
    .replaceBody {background:#FFFFFF;}
    
    .legendTd {font-size:7pt;}
    /* ------------ */
    
    /* ===== forum Start ===== */
    
    /* General forum Table View */
    .gTable {background:#cacae6; width: 100%;}
    .gTableTop {padding:2px;background:url('/.s/t/812/10.gif') #ace1f1;text-align:center;color:#1E73AF;font-weight:bold;height:30px;font-size:10pt; border: 1px solid #FFFFFF;}
    .gTableSubTop {padding:2px;background:#b0e15e;color:#000000;height:20px;font-size:10px; border: 1px solid #FFFFFF;}
    .gTableBody {padding:2px;background:#FAFAFA;}
    .gTableBody1 {padding:2px;background:#FFFFFF;}
    .gTableBottom {padding:2px;background:#FAFAFA;}
    .gTableLeft {padding:2px;background:#F2F2F2;font-weight:bold;color:#6E6E6E}
    .gTableRight {padding:2px;background:#F8F9FA}
    .gTableError {padding:2px;background:#FAFAFA;color:#FF0000;}
    /* ------------------------ */
    
    /* Forums Styles */
    .forumNameTd,.forumLastPostTd {padding:2px;background:#FFFFFF}
    .forumIcoTd,.forumThreadTd,.forumPostTd {padding:2px;background:#F2F2F2}
    .forumLastPostTd,.forumArchive {padding:2px;font-size:7pt;}
    
    a.catLink:link {text-decoration:none; color:#1E73AF;}
    a.catLink:visited {text-decoration:none; color:#1E73AF;}
    a.catLink:hover {text-decoration:underline; color:#000000;}
    a.catLink:active {text-decoration:underline; color:#1E73AF;}
    
    .lastPostGuest,.lastPostUser,.threadAuthor {font-weight:bold}
    .archivedForum{font-size:7pt;color:#FF0000;font-weight:bold;}
    /* ------------- */
    
    /* forum Titles & other */
    .forum {font-weight:bold;font-size:9pt;}
    .forumDescr,.forumModer {color:#858585;font-size:7pt;}
    .forumViewed {font-size:9px;}
    a.forum:link, a.lastPostUserLink:link, a.forumLastPostLink:link, a.threadAuthorLink:link {text-decoration:none; color:#6E6E6E;}
    a.forum:visited, a.lastPostUserLink:visited, a.forumLastPostLink:visited, a.threadAuthorLink:visited {text-decoration:none; color:#6E6E6E;}
    a.forum:hover, a.lastPostUserLink:hover, a.forumLastPostLink:hover, a.threadAuthorLink:hover {text-decoration:underline; color:#909090;}
    a.forum:active, a.lastPostUserLink:active, a.forumLastPostLink:active, a.threadAuthorLink:active {text-decoration:underline; color:#6E6E6E;}
    /* -------------------- */
    
    /* forum Navigation Bar */
    .forumNamesBar {font-weight:bold;font-size:7pt;}
    .forumBarKw {font-weight:normal;}
    a.forumBarA:link {text-decoration:none; color:#000000;}
    a.forumBarA:visited {text-decoration:none; color:#000000;}
    a.forumBarA:hover {text-decoration:none; color:#6E6E6E;}
    a.forumBarA:active {text-decoration:underline; color:#6E6E6E;}
    /* -------------------- */
    
    /* forum Fast Navigation Blocks */
    .fastNav,.fastSearch,.fastLoginForm {font-size:7pt;}
    /* ---------------------------- */
    
    /* forum Fast Navigation Menu */
    .fastNavMain {background:#DADADA;}
    .fastNavCat {background:#EFEFEF;}
    .fastNavCatA {background:#EFEFEF;color:#0000FF}
    .fastNavForumA {color:#0000FF}
    /* -------------------------- */
    
    /* forum Page switches */
    .switches {background:#CCCCCC;}
    .pagesInfo {background:#FFFFFF;padding-right:10px;font-size:7pt;}
    .switch {background:#FFFFFF;width:15px;font-size:7pt;}
    .switchActive {background:#E0E0E0;font-weight:bold;color:#6E6E6E;width:15px}
    a.switchDigit:link,a.switchBack:link,a.switchNext:link {text-decoration:none; color:#000000;}
    a.switchDigit:visited,a.switchBack:visited,a.switchNext:visited {text-decoration:none; color:#000000;}
    a.switchDigit:hover,a.switchBack:hover,a.switchNext:hover {text-decoration:underline; color:#FF0000;}
    a.switchDigit:active,a.switchBack:active,a.switchNext:active {text-decoration:underline; color:#FF0000;}
    /* ------------------- */
    
    /* forum Threads Style */
    .threadNametd,.threadAuthTd,.threadLastPostTd {padding:2px;padding:2px;background:#FFFFFF}
    .threadIcoTd,.threadPostTd,.threadViewTd {padding:2px;background:#F2F2F2}
    .threadLastPostTd {padding:2px;font-size:7pt;}
    .threadDescr {color:#858585;font-size:7pt;}
    .threadNoticeLink {font-weight:bold;}
    .threadsType {padding:2px;background:#AAAAAA;height:20px;font-weight:bold;font-size:7pt;color:#FFFFFF;padding-left:40px; }
    .threadsDetails {padding:2px;background:#CCCCCC;height:20px;color:#6E6E6E;}
    .forumOnlineBar {padding:2px;background:#CCCCCC;height:20px;color:#6E6E6E;}
    
    a.threadPinnedLink:link {text-decoration:none; color:#0000FF;}
    a.threadPinnedLink:visited {text-decoration:none; color:#0000FF;}
    a.threadPinnedLink:hover {text-decoration:none; color:#FF0000;}
    a.threadPinnedLink:active {text-decoration:underline; color:#FF0000;}
    
    a.threadLink:link {text-decoration:none; color:#6E6E6E;}
    a.threadLink:visited {text-decoration:none; color:#6E6E6E;}
    a.threadLink:hover {text-decoration:underline; color:#000000;}
    a.threadLink:active {text-decoration:underline; color:#000000;}
    
    .postpSwithces {font-size:7pt;}
    .thDescr {font-weight:normal;}
    .threadFrmBlock {font-size:7pt;text-align:right;}
    /* ------------------- */
    
    /* forum Posts View */
    .postTable {}
    .postPoll {background:#F1F2F3;text-align:center;}
    .postFirst {background:#F8F9FA;border-bottom:3px solid #FFFFFF;}
    .postRest1 {background:#F1F2F3;}
    .postRest2 {background:#F8F9FA;}
    .postSeparator {height:3px;background:#FFD500;}
    
    .postTdTop {background:#b0e15e;color:#000000;height:20px;font-size:10px; border: 1px solid #FFFFFF;}
    .postBottom {background:#E0E0E0;height:20px}
    .postUser {font-weight:bold;}
    .postTdInfo {text-align:center;padding:5px;background:#F2F2F2;}
    .postRankName {margin-top:5px;}
    .postRankIco {margin-bottom:5px;margin-bottom:5px;}
    .reputation {margin-top:5px;}
    .signatureHr {margin-top:20px;color:#787878;}
    .posttdMessage {padding:5px;background:#FFFFFF;}
    
    .pollQuestion {text-align:center;font-weight:bold;} 
    .pollButtons,.pollTotal {text-align:center;}
    .pollSubmitBut,.pollreSultsBut {width:140px;font-size:7pt;}
    .pollSubmit {font-weight:bold;}
    .pollEnd {text-align:center;height:30px;}
    
    .codeMessage {background:#FFFFFF;font-size:9px;}
    .quoteMessage {background:#FFFFFF;font-size:9px;}
    
    .signatureView {font-size:7pt;} 
    .edited {padding-top:30px;font-size:7pt;text-align:right;color:gray;}
    .editedBy {font-weight:bold;font-size:8pt;}
    
    .statusBlock {padding-top:3px;}
    .statusOnline {color:#0000FF;}
    .statusOffline {color:#FF0000;}
    /* ------------------ */
    
    /* forum AllInOne Fast Add */
    .newThreadBlock {background: #F9F9F9;border: 1px solid #B2B2B2;}
    .newPollBlock {background: #F9F9F9;border: 1px solid #B2B2B2;}
    .newThreadItem {padding: 0 0 0 8px; background: url('/.s/t/812/11.gif') no-repeat 0px 4px;}
    .newPollItem {padding: 0 0 0 8px; background: url('/.s/t/812/11.gif') no-repeat 0px 4px;}
    /* ----------------------- */
    
    /* forum Post Form */
    .codeButtons {font-size:7pt;background:#FCFCFC;border:1px solid #6E6E6E;}
    .codeCloseAll {font-size:7pt; color:#6E6E6E;font-weight:bold;background:#FCFCFC;border:1px solid #6E6E6E;}
    .postNameFl,.postDescrFl {background:#FCFCFC;border:1px solid #6E6E6E;width:400px}
    .postPollFl,.postQuestionFl {background:#FCFCFC;border:1px solid #6E6E6E;width:400px}
    .postResultFl {background:#FCFCFC;border:1px solid #6E6E6E;width:50px}
    .postAnswerFl {background:#FCFCFC;border:1px solid #6E6E6E;width:300px}
    .postTextFl {background:#FCFCFC;border:1px solid #6E6E6E;width:550px;height:150px}
    .postUserFl {background:#FCFCFC;border:1px solid #6E6E6E;width:300px}
    
    .pollHelp {font-weight:normal;font-size:7pt;padding-top:3px;}
    .smilesPart {padding-top:5px;text-align:center}
    /* ----------------- */
    
    /* ====== forum End ====== */
    Thank you in advance
    Last edited by Kravvitz; April 5th, 2013 at 03:03 PM. Reason: fixed the code tags
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    11
    Rep Power
    0
    Hey, and welcome could you post your HTML too?
    I'd gladly try to help you when I have time next, I just need to see how you set everything up an image of the problem could be helpful too (get around the block by adding spaces to the address bar and leaving out http://)
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    11
    Rep Power
    0
    I just re-read your post.
    Try adding this anywhere in your CSS sheet:
    #wrapper {
    width: 900px;
    }
    and then add <div id="wrapper"></div> around your entire site
    your site is 900 wide, right? If more or less, just adjust the width in the string I wrote
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    3
    Rep Power
    0

    One more chance


    Dear Anarasha thanks for your response but i have just started to learn css ..i am at the VERY beggining...so PLEASE tell me-if you are so kind -when you write"around your entire site"where exactly you mean..Sorry for being so annoying but i have to solve this problem and i just can not..Please reply..
    Thanks
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    276
    Anarasha means that you would place the <div id="wrapper"> right after the <BODY> tag and you would place its closing </div> tag right before the closing </BODY> tag. And the CSS styling would be placed with your other CSS styling code.


    From your CSS code, it looks to me like you already are using a "container" div [ #container{} ]. If this is the case, you can just add the "width:900px;" to that to do the same thing. And if you would like that whole container to be centered, add "margin:0 auto;" to that same rule.
    Last edited by DonR; April 5th, 2013 at 12:35 PM.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    3
    Rep Power
    0
    thank you very mutch

IMN logo majestic logo threadwatch logo seochat tools logo