Правый тег тега перемещается при изменении размера окна - PullRequest
Новая
       1

Правый тег тега перемещается при изменении размера окна

0 голосов
/ 14 марта 2011

Это веб-сайт, о котором идет речь: http://co -project.lboro.ac.uk / users / cokl / Computifieds / index.php

Я пытаюсь сделать так, чтобы div в Topright сдвигался влево, когда вы уменьшаете размер окна. Но по какой-то причине это не так.

Это работает, когда я отключаю стиль ширины .wrapper3, но тогда страница больше не переносится.

Я знаю, что это, вероятно, простой ответ, но я не могу понять это. Благодаря.

это код, относящийся к нему: 

    <div id="Toppage">
    <div id="Header" class="wrapper3">

            <a href="index.php"><img style="float:left;" width="200" height="80"src="Images/logo.png"></a>

    <div id="Topright"><div class="nav" style=" margin-left: 17px; margin-top: 3px; font-size:16px;">Buy | Sell | My Account | Community | <a href="messages.php">Messages</a></div></div>



    <font style="float: right; display:block; clear:right; overflow:hidden; margin-top: 28px; font-size:12px;">

    <?php
    if(!isset($user_check))
    {echo 'Welcome, please <a href="login.php">login/register</a> to continue!';

    } else {
    echo 'Welcome '.$_SESSION['login_user'].'. To log out, please click <a href="logout.php">here</a>.';}
    ?>

    </font>
    <?php echo $getpmalert;?>
    </div>

</div>

И CSS это: 

    #Toppage{
background: url("Images/topback.png") repeat-x scroll left bottom #FFFFFF;

}

#Topmiddlepage{
background: url("Images/topmiddle.png") repeat-x scroll left bottom #FFFFFF;
}

#Header{
    height: 80px;

}

#Middleheader{
    height: 40px;
}

#Topright {
  background: url("Images/topright.png") repeat-x scroll left bottom #FFFFFF;
  color: #FFFFFF;
  float: right;
 width: 400px;
 height: 31px;
  overflow: hidden;
}

#Topright2 {
  float: right;
 width: 400px;
 height: 31px;
  overflow: hidden;
}

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -170px; /* the bottom margin is the negative value of the footer's height */
    position: relative;

    font-size: 0.9em;
    margin: 0 auto -170px;
    text-align: left;
}

.wrapper3{
width: 980px;
  margin: 0 auto;
  overflow: hidden;
}

.page {
  overflow: hidden;
  width: 100%;
}

Ответы [ 2 ]

0 голосов
/ 14 марта 2011

Вы захотите добавить следующий CSS: 

#Topright {
    position:fixed;
    top:0px;
    right:0px;
}

и затем выясните, что вы хотите сделать с сообщением "pleas login".

0 голосов
/ 14 марта 2011

Для .wrapper3 установка минимальной ширины и максимальной ширины может работать, чтобы сделать его переменным размером.Я знаю, что IE имеет некоторые проблемы с этим, но есть обходные пути.

http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml

Надеюсь, это поможет.

...