Разместите мою боковую панель рядом с моим контентом - PullRequest
Новая
       31

Разместите мою боковую панель рядом с моим контентом

0 голосов
/ 07 января 2012

Я веду простой блог на Tumblr, сделанном в XHTML.

Теперь, как вы можете видеть, он имеет один столбец (шириной 800 пикселей), который центрируется в браузере.Таким образом, содержимое блога остается в центре независимо от того, как вы масштабируете окно браузера.Теперь я хотел бы добавить небольшую боковую панель справа от этого основного столбца.

Теперь мне удалось создать боковую панель самостоятельно, но если вы прокрутите до конца моего блога, вы увидите, что боковая панель находится ниже содержимого, а не рядом с ним.Как мне получить его рядом с моим контентом?Должен сказать, что я почти ничего не знаю о кодировании и редактировании CSS, все, что я сделал до сих пор, это настройка существующей темы.Поэтому я надеюсь, что кто-то может мне помочь!

Извините за подробное объяснение, я просто хочу прояснить себя, чтобы кто-то мог помочь.И чтобы быть уверенным, я добавил скриншот с фотошопом, чтобы вы могли увидеть результат, который я ищу.

Пример снимка экрана:

http://img94.imageshack.us/img94/5103/whatiwanto.jpg

Нижеэто код:

ПРИМЕЧАНИЕ: вы можете найти размещение (или CSS) боковой панели под #rightside и фактическое содержимое боковой панели внизу кода под <div id="rightside">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>


<!--
    "Quite Big" theme designed by

                                       |             |    |           
  _` |  _ \  _ \   __| _` |  _ \    _` | |   | __ \  |  / |  _ \ |   |
 (   |  __/ (   | |   (   |  __/   (   | |   | |   |   <  |  __/ |   |
\__, |\___|\___/ _|  \__, |\___|  \__,_|\__,_|_|  _|_|\_\_|\___|\__, |
|___/                |___/                                      ____/ 


    http://www.tumblr.com/theme/3531
  -->


  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <meta name="color:Background" content="#ffffff"/>
  <meta name="color:Title" content="#000000"/>
  <meta name="color:Text" content="#202020"/>
  <meta name="color:Minor Text" content="#999999"/>
  <meta name="color:Line" content="#EEEEEE"/>
  <meta name="color:Link" content="#49D28D"/>
  <meta name="color:Hover Link" content="#3FB67A"/>
  <meta name="color:audio" content="#000000"/>
<meta name="color:TopLine" content="#eeeeee"/>
<meta name="color:BottomLine" content="#eeeeee"/>
<meta name="if:CenterAll" content="0"/>




<meta name="font:Heading" content="Futura"/>

<meta name="image:Header" content="0">

<meta name="if:Show notes on permalink pages" content="1">

<meta name="if:Show Album Art on Audio Posts" content="1" />
<meta name="if:Ask Enabled" content="0" />

  <meta name="font:Description" content="Georgia"/>
  <meta name="font:Body" content="Georgia"/>

<meta name="text:Disqus Shortname" content=""/>

  <title>{Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}

  <link rel="shortcut icon" href="{Favicon}"/>
  <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>

  <style type="text/css">
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,dl,dt,dd,ul,ol,li,th,td,form,fieldset,legend,input,textarea, {margin:0;padding:0;}
html{font-size:14px;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6{font-size:14px;font-weight:normal; padding:5px 0;}
abbr,acronym{border:0;}

body {background:{color:Background}; color:{color:Text}; font:1em/1.5 {font:Body}; margin:0 0 0 0;}

h1, h3 {font-family:{font:Heading};}
pre,code {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}

a:link, a:visited {color:{color:Link}; text-decoration:none;}
a:hover, a:active {color:{color:Hover Link};}



#header {color:{color:Minor Text}; position:relative; margin:-49 auto; padding-top:25px; width:875px;}

#header h1 {color:{color:Title}; font-weight:bold; text-align:center; font-size:80px; line-height:65px; margin-bottom:15px; margin-top:-30px;
            letter-spacing:-.05em;}
#header h1 a:link, #header h1 a:visited {color:{color:Title}; display:block;}
#header h1 a:hover, #header h1 a:active {color:{color:Hover Link};}
#description {font-family:{font:Description}; font-size:12px; text-align:center; line-height:16px; margin-bottom:20px; margin-top:-5px;}
#header form {margin-bottom:20px;}
#header form input {width:630px;}
#header ul {margin:0 -0.25em 1.5em;}
#header li {list-style:none; text-transform:lowercase;}
#header li a {background:{color:Background}; display:block; padding:0 0.25em;
              text-decoration:none;}
#header li a:hover {background:none;}



#container {background-color:{color:Container}; margin:30px auto; padding-top:5px; width:875px}

#rightside {
    margin: 0px auto;
    position: relative;
    left: 750px;
    padding-top:0px;
    width:240px;}







#posts {background-color:{color:Background}; border-top:1px solid {color:TopLine}; 
        border-bottom:1px solid {color:BottomLine}; margin:0px; padding:0px; {block:IfCenterAll}text-align:center;{/block:IfCenterAll}font-size:14px;}


#posts .post {list-style:none; padding-bottom:10px; max-width:800px;
              clear:both;}
#posts .content {color:{color:Text}; padding:0; margin-left:0px;}

#footer {margin:0 auto; max-width:800px; padding-bottom:30px;}
#pagination p {font-size:14px; min-width:150px; line-height:16px; margin:0 0 10px;
               white-space:nowrap;}
#pagination p.back {display:inline; text-align:right; float:right; margin-left:20px;}
#pagination p.forward {display:inline; float:left; margin-right:1.5em;}
#pagination a {font-style:italic;}
#pagination .page {text-align:center; font:12px {font:Body};
                   margin-bottom:20px; text-transform:lowercase;}
#credits {clear:both; display:inline; text-align:center; font-size:12px; color:{color:Minor Text}; margin:0; padding:1.5em 0;}
#footer a:hover, #footer a:active {text-decoration:none;}

p {margin-bottom:25px;}
form .submit {height:0; overflow:hidden; display:block;}

.meta {float:left; clear:left; width:65px; {block:IfCenterAll}width:800px{/block:IfCenterAll}; font-size:14px; text-align:left; line-height:10px;}
.meta h2 {font-size:14px; margin-bottom:5px; border-bottom:1px solid {color:Line};}
.meta h2 a {text-decoration:none; display:block; padding:0px 0px;}
.meta h2 a:hover {background:none;}
.meta p {color:{color:Minor Text}; font-style:italic; margin:0 0 0 1em;
         text-indent:-0.75em; text-transform:lowercase;}
p.meta {color:{color:Minor Text}; font-style:italic; margin:0;
        width:150px; text-indent:-0.75em; text-transform:lowercase;}
.meta a {font-style:normal; white-space:nowrap;}
.meta .plays {font-weight:bold; font-style:normal;}

h3 {font-size:16px; line-height:20px; padding-bottom:10px; font-weight:bold;}

.content a {border-bottom:1px solid {color:Line};}
.content a:hover {border-bottom-width:2px;}
.content .photo a {border:none !important;}
.content ul, .content ol {margin:20px;}
.content ul li {list-style:square;}

blockquote {margin:0 20px 20px; font-style:italic;}
blockquote i, blockquote em, blockquote [lang="ja"] {font-style:normal;}
pre, code {font-size:14px; line-height:12px;}
pre {background:#e1e1e1; margin:15px; padding:10px;
     overflow-x:auto;}
pre code {display:block;}
pre i, code i {font-style:normal; color:{color:Minor Text};}

ins {text-decoration:none; font-style:italic;}
blockquote ins, em ins, ins em {font-style:normal;}

abbr, acronym, .caps {font-size:12px; letter-spacing:0.1em; word-spacing:0.1em;}
abbr, acronym {text-transform:uppercase;}
.caps {text-transform:uppercase;}


.text, .caption {margin-bottom:20px;}
.post img, .post object, .post embed {max-width:100%;}

.link-post h3 {padding:0; margin-bottom:15px;}

.photo-post .photo, .video-post .video {margin-bottom:20px; margin-top:20px; }

.quote-post .quote {font-family:{font:Body};}
.quote-post .source, .cite
  {float:right; margin:0 40px 20px 50px; text-indent:-1.5em;}
.quote-post .source a:first-child, .cite
  {letter-spacing:0;}
.short-quote .quote, .medium-quote .quote
  {font-size:14px; line-height:16px; margin:20px 40px 20px 0;}
.long-quote .quote {margin:20px;}

.audio-post .audio {height:27px; background: {color:audio}; 
    display: block; 
    margin-bottom: 5px; 
    padding: 0px;}


.audio-post .audio_player {width:auto;}

.chat-post ol {list-style:none; margin:15px 0;}
.chat-post li {margin-left:1.5em; text-indent:-1.5em;}
.chat-post .label {font-weight:bold; padding-right:0.125em;}
.chat-post .speaker {font-style:italic;}
.chat-post .speaker2 .label, .chat-post .speaker4 .label,
  .chat-post .speaker6 .label, .chat-post .speaker8 .label
    {color:{color:Minor Text};}
.chat-post .speaker3 .label, .chat-post .speaker4 .label,
  .chat-post .speaker7 .label, .chat-post .speaker8 .label
    {text-transform:uppercase; letter-spacing:0.1em;}
.chat-post .speaker5 .label, .chat-post .speaker6 .label,
  .chat-post .speaker7 .label, .chat-post .speaker8 .label
    {font-family:{font:Heading};}


.day .month {text-transform:uppercase;}
{block:DayPage}.day {font-weight:bold;}{/block:DayPage}

.content.text-post img {
max-width: 100%;
}


.multi {margin-bottom:30px; margin-right:15px; {block:IfCenterAll}margin-right:10px; margin-left:10px;{/block:IfCenterAll};}

.inst {
background-color: #49d28d;
}


.video embed, .video object, .video iframe {width:800px; height:450px;}


#comment {
  font-size: 14px;
  text-align: left;
  line-height: 18px;
  margin: 0px 0px 0px 0px;
}

#comment a {
  text-decoration: none;
  color: {color:Caption};
}

#comment a:hover {
  text-decoration: none;
  color: {color:Link Hover};
}

#dsq-content {
  background: rgba(0, 0, 0, .30);
  background: url('     ');
  padding: 5px 20px 20px 20px;
  margin-top: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;
}





{block:PermalinkPage}



      p.answer_form_container { width: 512px; }

      ol.notes { width: 800px; list-style-type: none; margin:20px auto; padding: 0; }
        ol.notes li.note { background: #F7F7F7; margin: 0 0 0px 0; padding: 0 4px; }
        ol.notes a { color: {color:Links In Notes}; }
        ol.notes img.avatar { display: none; }
        ol.notes blockquote { margin: 0; }
          ol.notes blockquote a { text-decoration: none; }
    {/block:PermalinkPage}






a.install {
        width: 96px;
        height: 20px;
        background: url(http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png);
        display: block;
        position: absolute;
        top: 26px;
        right: 3px;
    }


a {
  outline: none;
}





{CustomCSS}
  </style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/xz44nnc/zNHlmnd4b/jquery.killphotoset.js"></script>
<script>
$(function () {
   $(".html_photoset").killPhotoset({
   photoSize: 1280
  });
});
</script>


<script type="text/javascript">
<!--
function handleThis(formElm)
{
window.location="http://iloveyourvideo.tumblr.com/tagged/"+formElm.number.value+"";
return false;
}
// -->
</script>

</head>
<body>




<div id="container">


<div id="header">
  <a href="/">
        {block:IfHeaderImage}<h1><img src="{image:Header}" class="logo" /></h1>{/block:IfHeaderImage}
        {block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}</a>



  {block:Description}<p id="description">
    {Description}
  </p>{/block:Description}

<p>
{block:IfCenterAll}<center>{/block:IfCenterAll}

{block:Pages} 

<a class="multi" href="{URL}">{Label}</a>

{/block:Pages}


{block:IfAskEnabled}
<a class="multi" href="/ask">{AskLabel}</a>
{block:IfAskEnabled}
{block:IfCenterAll}</center>{/block:IfCenterAll}</p>

</div>



<ol id="posts"><br>
{block:Posts}


<li class="post" id="post{PostID}">

    {block:Text}

 <div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br><br>

    <div class="content text-post">
      {block:Title}<h3><span>{Title}</span></h3>{/block:Title}

      <div class="text">{Body}</div>
    </div>
    {/block:Text}

   {block:Photo}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br>

    <div class="content photo-post">
      <div class="photo">

        {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
        {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
          <img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}">
        {block:IndexPage}</a>{/block:IndexPage}
        {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}

      </div>



      {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
    </div>
    {/block:Photo}


{block:Photoset}

        <div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br>

    <div class="content photo-post">
      <div class="photo">

        {Photoset-500}

      </div>



      {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
    </div>
{/block:Photoset}



    {block:Quote}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br><br>
    <div class="content quote-post {Length}-quote">
      <blockquote class="quote">{Quote}</blockquote>

      {block:Source}<div class="source">&mdash;&#8194;{Source}</div>{/block:Source}
    </div>
    {/block:Quote}

    {block:Link}

<div class="meta">

{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br><br>
    <div class="content link-post">
      <h3 class="link"><a href="{URL}">{Name}</a></h3>

      {block:Description}<div class="caption">{Description}</div>{/block:Description}
    </div>
    {/block:Link}

    {block:Chat}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}


    </div><br><br>

    <div class="content chat-post">
      {block:Title}<h3>{Title}</h3>{/block:Title}

      <ol class="chat">
        {block:Lines}<li class="{Alt} speaker{UserNumber}">
          {block:Label}<span class="label">{Label}</span>{/block:Label}
          <span class="line">{Line}</span>
        </li>{/block:Lines}
      </ol>
    </div>
    {/block:Chat}



{block:Video}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br>
   <div class="content video-post">
      <div class="video">{Video-500}</div>
      {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
    </div>
    {/block:Video}




    {block:Audio}

<div class="meta">


{block:IfCenterAll}<center>{/block:IfCenterAll}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
</h2>{block:IfCenterAll}</center>{/block:IfCenterAll}



    </div><br><br>





{block:IfShowAlbumArtOnAudioPosts}
                            {block:AlbumArt}
                                <div class="album_art">
                                    <img src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}" style="margin-bottom: 5px"/>
                                </div>
                            {/block:AlbumArt}
                        {/block:IfShowAlbumArtOnAudioPosts}






    <div class="content audio-post">
      <div class="audio">
<script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?7"></script>
<span id="audio_player_{PostID}">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 9</a> is required to listen to audio.]</span>
<script type="text/javascript" src="/api/read/json?id={PostID}"></script>
<script type="text/javascript">
    var color = "FFF700";
    var player = tumblr_api_read['posts'][0]['audio-player'].replace("color=FFFFFF", "color=" + color);
    replaceIfFlash(9, "audio_player_{PostID}", player);
</script>
</div>
<p>plays: <span class="plays">{FormattedPlayCount}</span></p>


      {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
    </div>
    {/block:Audio}

<div class="clear">&nbsp;</div>

  </li>

{/block:Posts}


{block:IfDisqusShortname}
    {block:Permalink}
    <div id="disqus">
    <div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script><noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>
    </div>
    {/block:Permalink}
    <script type="text/javascript">
    //<![CDATA[
    (function() {
        var links = document.getElementsByTagName('a');
        var query = '?';
        for(var i = 0; i < links.length; i++) {
        if(links[i].href.indexOf('#disqus_thread') >= 0) {
        query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
        }
        }
        document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
    })();
    //]]>
    </script>
    {/block:IfDisqusShortname}


</div> <!-- .box -->
      {/block:Posts}



    </div> <!-- .posts -->

    <div style="clear: both"></div>

    {block:PermalinkPage}
    {block:IfShowNotesOnPermalinkPages}
      {PostNotes}
    {/block:IfShowNotesOnPermalinkPages}
    {block:PermalinkPage}

    <div style="clear: both;"></div>


<div id="rightside">
<div class="widget">
</div>


<p><a href="http://iloveyourvideo.tumblr.com/">I Love Your Video | 2012</a></p> 

<p> <form onsubmit="return handleThis(this)">
<input type="text" name="number" />
<input type="submit" value="Search" />
</form> </p>

<p>Maybe some links
<a href="http://twitter.com/">twitter</a></br>
<a href="http://facebook.com/">facebook</a></br>
<a href="http://www.flickr.com/">flickr</a></br>
<a href="/">website</a></p>

<p><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpakhuis.dezwijger&amp;width=240&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:258px;" allowTransparency="true"></iframe></p>

<p>Advertisement</p>

<img src="http://i188.photobucket.com/albums/z152/dunkley2007/ad-2.png" border="0"</a>



</div>
</div>


</div><!--/rightside-->


</ol>

<div id="footer">

  <div id="pagination">
  {block:Pagination}
    <p class="back">&nbsp;{block:NextPage}
      <a href="{NextPage}">next</a> >>>
    {/block:NextPage}</p>
    <p class="forward">{block:PreviousPage}
     <<< <a href="{PreviousPage}">prev</a>
    {/block:PreviousPage}&nbsp;</p>

  {/block:Pagination}

  {block:PermalinkPagination}
    {block:PreviousPost}<p class="back">
      <a href="{PreviousPost}">next</a> >>>
    </p>{/block:PreviousPost}
    {block:NextPost}<p class="forward">
     <<< <a href="{NextPost}">prev</a>
    {/block:NextPost}</p>
  {/block:PermalinkPagination}

  {block:DayPagination}
    {block:PreviousDayPage}<p class="back">
      <a href="{PreviousDayPage}">next</a> >>>
    {/block:PreviousDayPage}</p>
    {block:NextDayPage}<p class="forward">
      <<< <a href="{NextDayPage}">prev</a>
    </p>{/block:NextDayPage}
  {/block:DayPagination}
  </div>



<br><br />

<center>
<a href="/archive">archive</a> // 
    <a href="/random">random post</a> //
    <a href="{RSS}">RSS</a> 
<br />
<font size="2"><i>powered by <a href="http://www.tumblr.com/">tumblr</a> - 
    <a href="http://www.tumblr.com/theme/9601">Quite Big theme</a> by <a href="http://georgedunkley.tumblr.com/">George Dunkley</a></i></font></center>



</div>










</div>


</div>




</body>
</html>

Ответы [ 3 ]

1 голос
/ 17 ноября 2012

использовать float: left; для содержания div ... 

#leftside 
{
    float: left;
}
1 голос
/ 26 января 2012

Использование свойства float CSS должно помочь. Например, используя правую сторону. 

#rightside 
{
margin: 0px auto;
position: relative;
left: 750px;
padding-top:0px;
width:240px;
float:right;
}
0 голосов
/ 01 февраля 2012

Я пытался: 

{
margin: 0px auto;  
position: relative;
left: 750px; 
padding-top:0px;
width:240px;
float:right;
}

Тестировал коробку, и она, кажется, просто придерживалась нижней части области содержимого справа. Попытался установить нижнюю границу на 1000 пикселей, что сдвинуло ее вверх, но когда я увеличивал или уменьшал масштаб, она перемещалась по всему месту. Не уверен, что это как-то связано с правилами CSS в моем теле, но если бы вы могли мне помочь, это было бы здорово! Я не могу показать вам, как это выглядит, но вы можете связаться со мной по электронной почте. Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...