+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / CSS Width Question

CSS Width Question

6 posts, 0 answered
  1. Oguz
    Oguz avatar
    10 posts
    Registered:
    01 Feb 2011
    04 Feb 2011
    Link to this post
    Hello,

    I'm trying to create a template from scratch.

    What I'm trying to do is that a centered main block with fixed size (943px) including a header, a menu and a content divs.

    I want to make the menu with a left and right border (1px) but its size expands to 945px. I want to make it fixed size like header and content (943px).

    Below is the HTML code for main wrapper:

      <div class="sf_cols Header">
        <div class="sf_colsOut sf_1col_1_100" style="width: 100%;">
          <div class="sf_colsIn sf_1col_1in_100" style="margin: 0%;" id="T4F5C4460000_Col00">
            <div class="sfContentBlock"> header part </div>
          </div>
        </div>
      </div>
      <div class="sf_cols Menu">
        <div class="sf_colsOut sf_1col_1_100" style="width: 100%;">
          <div class="sf_colsIn sf_1col_1in_100" style="" id="T4F5C4460017_Col00"> menu with left and right border </div>
        </div>
      </div>
      <div class="sf_cols Content">
        <div class="sf_colsOut sf_1col_1_100" style="width: 100%;">
          <div class="sf_colsIn sf_1col_1in_100" id="T4F5C4460012_Col00">
          </div>
        </div>
      </div>  
    </div>


    And this is the CSS:
    body
    {
        background-image: url('../Images/bodyBg1.gif');
        background-repeat: repeat-x;
        margin: 0;
        padding: 0;
    }

    .sfPublicWrapper
    {
        width: 943px;
        margin: 0 auto;   
    }
    .Menu
    {
        background-color: #f79c2a;
        height: 50px;      
        border-left: 1px solid #af752c;
        border-right: 1px solid #af752c;   
    }


    Thank you!
  2. Oguz
    Oguz avatar
    10 posts
    Registered:
    01 Feb 2011
    07 Feb 2011
    Link to this post
    I achieved what I was trying to do with 960 grid system and developing a MasterPage within Visual Studio.

    As a suggestion, I think integrating the Sitefinity layout UI with 960 grid system will be nice.

    Thank you
  3. Sonya
    Sonya avatar
    205 posts
    Registered:
    09 Dec 2016
    07 Feb 2011
    Link to this post
    Hi Oguz,

    The width of the menu should be 941px minus left(1px) and right(1px) borders.

    <div class="sf_cols Menu">
        <div class="sf_colsOut sf_1col_1_100" style="width: 941px;">
          <div class="sf_colsIn sf_1col_1in_100" id="T4F5C4460017_Col00"> menu with left and right border </div>

    Greetings,
    Sonya
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  4. Berrabah
    Berrabah avatar
    25 posts
    Registered:
    12 Feb 2012
    05 Mar 2012
    Link to this post
    Hi,
    I want to apply this css on the body
    body 
    {
    background-color:#000000;
    width:1342;
    }
    What should I do ?
  5. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    07 Mar 2012
    Link to this post
    Hi Berrabah,

    You can either add it to the theme of your template, or with a css widget.

    All the best,
    Jen Peleva
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Berrabah
    Berrabah avatar
    25 posts
    Registered:
    12 Feb 2012
    08 Mar 2012
    Link to this post
    Thankx for help :)
6 posts, 0 answered