SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    staying nick div

    I have a webPage at http://dot.kr/joon/016/
    Although "menu" and "nick" are static contents on the header at the page, "title" can be very long theoretically because it's dynamic contents.
    I like to make that "nick" is not to drop when the contents of "title" is very long.
    http://dot.kr/joon/017/ is one of my trials.
    But it seems not to work I expected.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    OK, "nick" does not drop.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    body {
    	display: flex;    
    	height: 100vh;
    	flex-direction: column;
    }
    main.content { background:white; }
    header, footer { background:gray;
    text-align:center;
    display:inline-block;
    vertical-align:middle;
     }
    #menu,#nick,#sns,#guide{
    display:inline-block;
    font-size:50px;
    background:white;
    border-radius:20px;
    margin:10px;
    padding:5px;
    vertical-align:middle;
    }
    #title,#submit{
    display:inline-block;
    font-size:50px;
    line-height:80px;
    vertical-align:middle;
    }
    .content {
    	flex: 1;
    	overflow:auto;
    }
    .dpTable{display:table}
    .dpRow{display:table-row}
    .dpCell{display:table-cell}
    .flL{float:left;}
    .flR{float:right;}
    
    </style>
    </head>
    <body>
    <header class="dpTable">
    <div class="dpRow">
        <div id="menu" class="flL dpCell">menu</div>
        <div id="nick" class="flR dpCell">nick</div>
        <div id="title" class="dpCell">title title title title title title title title title title title</div>
    </div>
    </header>
    <main class="content">
    <a href="">index</a><br>
    <a href="menu/">menu</a><br>
    <a href="contents/">contents</a><br>
    		<p>FIRST CONTENTS </p><br>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p><br>
    		<p> LAST CONTENTS </p><br>
    </main>
    <footer>
    <div id="sns" class="flL">sns</div>
    <div id="submit">submit </div>
    <div id="guide" class="flR">guide</div>
    </footer>
    </body>
    </html>

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    put "title" between "menu" and "nick"

    Because title is dynamic, I have 3 pages below.

    Since the text "title" is between the "menu" and "nick", the page http://dot.kr/joon/025 is okay.

    The page http://dot.kr/joon/025/menu/ is still okay.

    However, the page http://dot.kr/joon/025/contents/ is not okay because "title" is below the "menu" and "nick" instead of being located between "menu" and "nick".

    I like to put "title" is always located between "menu" and "nick".
    When the text "title" is very long like http://dot.kr/joon/025/contents/, the last part of the title should be dropped between "menu" and "nick".

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Haven't we been here before ?

    If you want the middle section to stay in the middle then use this:

    Code:
    #title{display:block;overflow:hidden}

  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    dropped part only is left-aligned when "title" is very long

    It's okay because "title" is center-aligned at http://dot.kr/joon/027/.
    Since "title" is dynamic, it could have very long text and some part of title will be dropped.
    When some part of "title" is dropped, the dropped part is still center-aligned at http://dot.kr/joon/027/contents/.
    I like to make the dropped part left-aligned.
    So I added the code "text-align:left" at #title .
    The result is good because the dropped part of "title" is left-aligned at http://dot.kr/joon/028/contents/.
    However I met another problem.
    When "title" is very short, it is unexpectedly left-aligned at http://dot.kr/joon/028/.

    I like to make it like the following.
    When "title" is short, it is center-aligned.
    When "title" is very very long, the last dropped part of title is left-aligned.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Please do not create a new thread for an issue that is already open.

    Make the following changes to your code and add a div inside #title (Add the BLUE, Delete the RED):
    Code:
    #title {
        display:block;
        overflow:hidden;
        word-break:break-all;
        color:white;
        margin:auto;
        text-align:left;
    }
    #title > div {
        display:table;
        margin:0 auto;
    }
    Code:
        <div id="title"><div>long long long long very very very very long long long long very very very very title</div></div>
    You also need to add an <html> tag at the top of your page.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Threads merged.

    Only start a new topic when you move on to a new subject and where previous posts have no relevance.


Bookmarks

Posting Permissions

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