Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help centering header image for css blog layout

    I started over my layout so I have new code. My problem is that for my blog layout, I am trying to center my image to fit over the span of the solid pink and white middle area of my background, and when I assign the background url to center, it moves, but it doesn't move far enough to where it's in the center. My blog is here: http://ameblo.jp/airin-raito/

    Code:
    /*
    --------------------------------------------------
    ameblo CSS Skin Settings
    
    Skin for:  peach_ad
    FileName:  /p_skin/peach_ad/css/common.css
    Version:   $Revision: 1.3 $
    --------------------------------------------------
    */
    /* ---------- common : 全体に対するスタイル --- */
    body#mainIndex{
    margin:0;
    padding:0;
    text-align:center;
    }
    #frame{
    text-align:left;
    }
    #sub_a,#sub_b,#main{
    overflow:hidden;
    padding-top:15px;
    }
    
    a:link{text-decoration:none;}
    a:visited{text-decoration:none;}
    a:hover{text-decoration:underline;}
    input,textarea{font-size:12px;}
    img{
    border:0;
    }
    p{
    margin:0;
    padding:0;
    }
    .menu_frame ul,
    .menu_frame li,
    .menu_frame dl,
    .menu_frame dt,
    .menu_frame dd,
    #comment_module ul,
    #comment_module li,
    #trackback ul,
    #trackback li,
    #reader_list ul,
    #reader_list li,
    #favorite_list ul,
    #favorite_list li,
    #bookmark_list ul,
    #bookmark_list li,
    #recent_entries_list ul,
    #recent_entries_list li{
    list-style-type:none;
    margin:0;
    padding:0;
    }
    /* ---------- header : ブログタイトル部分 ----- */
    #header{
    width: 797px;
    height: 480px;
    margin: 0 auto;
    background: url(http://stat.blogskin.ameba.jp/blogskin_images/20100513/05/6f/ef/j/o06400480airin-raito1273696483293.jpg) center top repeat-x;
    }
    
    #header h1,
    #header h2 {
    margin: 0;
    padding: 0;
    }
    
    #header h1 {
    text-indent: -9999px;
    }
    
    #header h1 a {
    display: block;
    width: 797px;
    height: 480px;
    /*\*/
       overflow: hidden;
    /**/
    
    }
    
    #header h2 {
    display: none;
    }
    
    
    
    
    /* ---------- font : 文字サイズ・装飾---------- */
    body{ 
    color:#666666;
    font-size:12px;
    font-family: "verdana", "MS Gothic", Osaka, "square rubber Hiragino Pro W3", "Arial"; 
    }
    
    #ameblo,
    #comment_module p.list,
    .entry .theme,
    .entry .foot,
    .list{
    font-size:10px;
    }
    #header h1,
    #header h1 a{
    color:#FFFFFF;
    font-size:25px;
    font-weight:bold;
    line-height:1.15;
    }
    #header h2{
    color:#FFFFFF;
    font-size:11px;
    font-weight:normal;
    line-height:1.15;
    }
    .menu_title{
    color:#FF6766;
    font-size:12px;
    font-weight:bold;
    }
    .mainMenu{
    font-size:11px;
    line-height:1.3;
    }
    #profile,
    #reader{
    color:#666666;
    }
    #calendar table{
    font-size:11px;
    line-height:1.3;
    color:#666666;
    }
    #ranking *{
    font-size:12px;
    line-height:1.4;
    }
    #ranking .rank_ttl{
    font-weight:bold;
    color:#666666;
    }
    #ameblo,
    #ranking .rank{
    color:#000000;
    }
    #ameblo p{
    line-height:1.25;
    }
    #rss{
    font-size:12px;
    }
    #joinbookList h3,
    h3.title{
    font-size:12px;
    font-weight:bold;
    color:#FF6766;
    }
    .label{
    font-weight:bold;
    color: #666666;
    }
    .entry .contents,
    #message .contents{
    font-size:12px;
    line-height:1.5;
    }
    .entry .theme{
    color:#666666;
    }
    .entry .title{
    font-size:15px;
    font-weight:bold;
    color:#FF6766;
    border-bottom:1px dotted #FD7DDC;
    padding-bottom:3px;
    }
    #comment_module,
    #trackback{
    line-height:1.5;
    }
    #comment_module .error{
    color:#FF0000;
    margin-top:20px;
    padding-bottom:10px;
    }
    /* ---------- background-color : 背景色 ------- */
    body{
    background: url(http://stat.blogskin.ameba.jp/blogskin_images/20100513/05/77/16/p/o20600126airin-raito1273697821619.png) repeat-y center top  #FFD7FC;
    padding-top:10;
    } 
    
    
    }
    #frame{
    }
    #sub_a{
    }
    #sub_b{
    }
    #wrap{
    }
    
    /* ---------- menu_element : 各サイドバー共通 - */
    .mainMenu{
    padding-top: 10px;
    padding-bottom: 10px;
    
    }
    .menu_title{
    height: 30px;
    text-indent: 3px; /* ---------- make this number -9999px; when i make an image to replace the words for titles cause it'll make the titles disappear =] - */
    padding: 0px
    margin-bottom: 10px;
    border-bottom:1px solid #FF6766;
    }
    
    /* ------------------ each menu background ------------------ */
    #profile {
    background: none; /* --- when i make the images, put here --- */
    }
    #reader {
    background: none; /* --- when i make the images, put here --- */
    }
    #calendar {
    background: none; /* --- when i make the images, put here --- */
    }
    #theme_list {
    background: none; /* --- when i make the images, put here --- */
    }
    #recent_entries {
    background: none; /* --- when i make the images, put here --- */
    }
    #archives {
    background: none; /* --- when i make the images, put here --- */
    }
    #search {
    background: none; /* --- when i make the images, put here --- */
    }
    #favorite {
    background: none; /* --- when i make the images, put here --- */
    }
    #bookmark {
    background: none; /* --- when i make the images, put here --- */
    }
    
    #recent_comment {
    background: none; /* --- when i make the images, put here --- */
    }
    #ranking {
    background: none; /* --- when i make the images, put here --- */
    }
    
    .menu_title,
    .mainMenu ul,
    .mainMenu dl,
    .mainMenu p,
    .list,
    .link_blog,
    #archives select,
    #theme_list select,
    #search form{
    margin-left:6px;
    margin-right:6px;
    }
    p.list,
    p.link_blog{
    padding-top:5px;
    }
    
    /* ----- profile : サイドバー プロフィール ---- */
    #profile p{
    display:block;
    }
    /* ----- readers : サイドバー 読者 ------------ */
    #reader dl{
    margin-bottom:7px;
    }
    #reader ul{
    margin-top:5px;
    }
    #reader p{
    display:inline;
    }
    /* ----- calendar : サイドバー カレンダー ----- */
    #calendar{}
    #calendar .menu_title{}
    #calendar table{
    width:168px;
    text-align:center;
    }
    #calendar caption{
    padding:5px 0;
    }
    #calendar caption a{
    padding:0 5px;
    }
    #calendar .sun{
    color:#FF0000;
    }
    #calendar .sat{
    color:#0000CC;
    }
    #calendar td,
    #calendar th{
    text-align:center;
    padding:0;
    }
    #calendar td a{
    color:#CC0000;
    text-decoration:underline;
    }
    /* ----- search : サイドバー 検索 ------------- */
    #search form{
    margin-top:7px;
    margin-bottom:7px;
    }
    #search .searchbox{
    width:100px;
    }
    #search .searchbtn{
    width:40px;
    }
    /* ----- rss : サイドバー RSS ----------------- */
    #ranking .rank_ttl{
    display:block;
    }
    #ranking .rank{
    display:block;
    padding-top:3px;
    padding-bottom:3px;
    }
    #ranking a{
    background-image:url(http://stat100.ameba.jp/p_skin/peach_ad/img/icon.gif);
    background-repeat:no-repeat;
    background-position:left center;
    padding-left:9px;
    }
    #ranking img{
    margin-left:5px;
    }
    #ranking .rank_all,
    #ranking .rank_genre{
    margin-bottom:8px;
    }
    /* ----- rss : サイドバー RSS ----------------- */
    #rss{
    margin-top:-3px;
    margin-right:auto;
    margin-left:auto;
    border:none;
    background-image:none;
    text-align:center;
    }
    /* ----- plugin : サイドバー プラグイン枠 ----- */
    .plugin{
    margin-bottom:15px;
    text-align:center;
    }
    /* ----- ameblo : サイドバー アメーバ広告 ----- */
    #ameblo{
    text-align:center;
    padding-top:7px;
    padding-bottom:7px;
    margin:0 0px 15px 0px;
    }
    #ameblo p{
    text-align:left;
    padding-right:7px;
    padding-bottom:7px;
    padding-left:7px;
    }
    #ameblo li{
    display:block;
    margin-bottom:5px;
    }
    /* ----- advertising : サイドバー 広告枠 ------ */
    #advertising{}
    #adJavaScript .HBgColor{background-color:#FFFFFF;}
    #adJavaScript .HTitleColor{color:#0000ff;}
    #adJavaScript .HTextColor{color:#000000;}
    #adJavaScript .HUrlColor{color:#0000ff;}
    
    /* ----- advertising2 : 記事内 広告枠 --------- */
    #advertising2 .menu_frame{}
    #advertising2{
    text-align:center;
    background-image:none;
    padding-top:20px;
    }
    #advertising2 .menu_title{
    background-image:none;
    height:12px;
    text-indent:0px;
    color:#FFFFFF;
    }
    #adJavaScript2 .HBgColor{background-color:#FFFFFF;}
    #adJavaScript2 .HTitleColor{color:#0000ff;}
    #adJavaScript2 .HTextColor{color:#000000;}
    #adJavaScript2 .HUrlColor{color:#0000ff;}
    
    
    /* ---------- main : メイン部分 --------------- */
    #main{
    padding-bottom:10px;
    }
    #joinbookList h3,
    h3.title{
    margin-bottom:10px;
    margin-top:5px;
    border:none;
    }
    /* ---------- message : メッセージ枠 ---------- */
    #message{
    background:none; /* --- Put image here when I have made it with attributes no-repeat, scroll left, top, and transparent --- */
    border-bottom: 1px solid #FF6766;
    margin-bottom: 15px;
    padding-top: 35px;
    }
    #message .contents{
    margin-top: 10px; /* --- Reina's blog doesn't have a top margin, but her message image may be taller in height anyway -- */
    margin-bottom:10px;
    }
    /* ---------- entry : 各記事枠 ---------------- */
    .entry{
    width:99%;
    margin-bottom:20px;
    }
    .entry .date{
    width:99%;
    background-color:#FF6766;
    padding:5px 0 3px 5px;
    display:block;
    color:#FFFFFF;
    border-bottom:1px solid #9934aa;
    }
    .entry .name{
    margin-top:5px;
    display:block;
    }
    .entry .theme{
    margin-bottom:10px;
    display:block;
    }
    .entry .title{
    margin-top:10px;
    margin-bottom:10px;
    }
    .entry .contents{
    margin-top:15px;
    margin-bottom:15px;
    }
    .entry .foot{
    text-align:right;
    padding:5px 20px 5px 0;
    border-top:1px dashed #666666;
    }
    /* ---------- page : ページリンク ------------- */
    .page{
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    margin-top:7px;
    margin-bottom:10px;
    }
    
    /* ---------- footer_ad : フッター広告 -------- */
    #footer_ad{
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    margin-top:20px;
    margin-bottom:10px;
    }
    /* Footer */
    #footerArea {
     position:absolute;
     top:482px;
     left:928px;
     background: none;
     font-size: 0.8em;
     z-index: 999;
    }
    
    /* ---------- trackback : „˜‹TB„ ---------- */
    #trackback{
    border-top:1px dotted #55555;
    margin-top:25px;
    margin-bottom:10px;
    padding-top:5px;
    }
    #trackback p.tr_URL{
    margin-bottom:10px;
    }
    #trackback ul{
    margin-bottom:10px;
    }
    /* ---------- comment_module : 各記事コメント欄 - */
    #comment_module h3.title{
    margin-bottom:0;
    }
    #comment_module p.list{
    margin:0 0 10px 0;
    padding:0;
    }
    #comment_module{
    border-top:1px solid #FF6766;
    padding-top:5px;
    }
    #comment_module .each_comment{
    margin-bottom:10px;
    }
    #comment_module .comment_footer{
    margin-top:5px;
    padding-top:5px;
    border-top:1px dotted  #000000;
    }
    #comment_module .error{
    margin-top:20px;
    padding-bottom:10px;
    }
    #comment_module label{
    display:block;
    float:left;
    width:70px;
    text-align:right;
    }
    #f_name,#f_url,#f_title,#f_com{
    display:inline;
    width:250px;
    margin-bottom:3px;
    margin-left:6px;
    }
    #comment_module form ul{
    width:340px;
    margin-left:auto;
    margin-right:auto;
    }
    #comment_module form li{
    display:block;
    width:340px;
    margin-bottom:5px;
    }
    #comment_module li.lastItem{
    display:block;
    width:330px;
    margin-bottom:5px;
    text-align:right;
    }
    #comment_module .button{
    margin-left:5px;
    font-size:11px;
    width:80px;
    }
    /* ---- reader_list : 読者一覧 ---------------- */
    /* ---- bookmark_list : ブックマーク一覧 ------ */
    /* ---- favorite_list : お気に入りブログ一覧 -- */
    /* ---- recent_entries_list : 最新記事一覧 ---- */
    /* ---- joinbookList : みんなのテーマ一覧 ----- */
    #reader_list ul,
    #favorite_list ul,
    #bookmark_list ul,
    #recent_entries_list ul{
    width:100%;
    }
    #joinbookList li,
    #bookmark_list li,
    #reader_list li,
    #favorite_list li,
    #recent_entries_list li{
    padding-bottom:2px;
    margin-bottom:8px;
    border-bottom:1px dotted #dddddd;
    }
    #reader_list .reader_blog{
    display:block;
    margin-top:2px;
    }
    #favorite_list .favorite_blog{
    display:block;
    margin-top:2px;
    }
    #recent_entries_list ul{
    margin-top:12px;
    }
    #userNaviArea a#userNickName{
    padding:0pt 10px;
    }
    
    #userNaviArea{
    display: none;
    }
    
    /*
    --------------------------------------------------
    ameblo CSS Skin Layout Settings
    3コラム記事中:横幅可変
    
    FileName: /p_skin/cmn/css/type_c_ex.css
    Date:     $Date: 2007/03/23 01:25:35 $
    Version:  $Revision: 1.1 $
    --------------------------------------------------
    */
    #frame:after,
    #wrap:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    #frame,
    #wrap{display:inline-table;}
    /* Hides from IE-mac \*/
    * html #frame,
    * html #wrap{height:1%;}
    #frame,
    #wrap{display:block;}
    /* End hide from IE-mac */
    body#mainIndex{}
    #frame{
    width:798px;
    margin-left:auto;
    margin-right:auto;
    }
    #wrap{
    width:100%;
    }
    #main{
    float:left;
    padding-left:7px;
    width:420px;
    }
    #sub_main{
    width:100%;
    overflow:hidden;
    }
    
    #sub_a{
    width:174px; /* In her coding, it's 180, but with new background, 180 should be fine cause it will be 2 inches larger -- */
    float:left;
    z-index:1;
    padding-left:0px; /* -- It's 5 in her coding, but fell off of my layout, so next time, I have to make a layout where the middle and two columns span 802, not 800 so I can fit an image of size 800 within the borders -- */
    }
    #sub_b{
    width:173px; /* -- In her coding, it's 175, but with new background, 175 should be fine cause it will be 2 inches larger -- */
    float:right;
    z-index:2;
    }
    /* -- // ameblo CSS Skin Layout Settings END --*/
    I know my outer columns are not aligned, but I haven't started working on those yet, because my current priority is getting my header image centered in a way that it would work on all screen sizes and browsers.

    If anyone could help me with this, I'd really appreciate it
    Last edited by Airin; 05-13-2010 at 07:08 PM. Reason: Altered code

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    For header try this:
    #header{
    width: 800px;
    height: 480px;
    margin: 0 auto;
    background: url(http://stat.blogskin.ameba.jp/blogsk...3696483293.jpg) center top repeat-x;
    }

    Added "margin: 0 auto;".
    ☠ ☠RON☠ ☠

  • Users who have thanked Major Payne for this post:

    Airin (05-13-2010)

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I managed to figure out that the problem was lower in the code, where the outer columns get positioned, and that ended up working, but thanks for the help anyway! I added it into my code anyway because I did have that before, and somehow took it off anyway.

    Now, my problem is that I'm not sure which is the best way to position an item like the ameba logo so that it stays in the same position on all screens. I have it absolutely positioned, under the #footerArea, but it shifts in position when I zoom in and out.

    Should I make a new post or just rename this one because I know this is off topic?

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Absolutely positioning something is not a good idea if you want to try to make it work for all browser window sizes. Even then, each browser is going to parse the pages differently and viewing them will vary from browser to browser even with the same size browser window. Can check the pages at http://browsershots.org/ .

    Maybe this information will help you:

    Choosing Dimensions for Your Web Page Layout:

    http://www.elated.com/articles/choos...b-page-layout/
    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •