Справка по позиционированию HTML / CSS - PullRequest
Новая
       0

Справка по позиционированию HTML / CSS

2 голосов
/ 08 ноября 2010

alt text

Как мне выровнять желтый рядом с красным, оставив текст «Навыки» под серым?

Что я пробовал: используя float: осталось с красным, но это также подталкивает текст навыков. Я пытался использовать относительное и абсолютное, но они сбивают меня с толку.

HTML: Идентификаторы ключей: profiletable (серый), profileleft (красный), profileright (желтый). 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Starbuzz Coffee</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
        <div id="allcontent">
            <div id="header">
            </div>

            <div id="main">
                <h1>Jonny</h1>
                <div id="profiletable">
                    <div id="profileleft"><?php echo $gravatar ?></div>
                    <div id="profileright">
                        <strong>Name:</strong> <?php echo $member->getFirstName() . ' ' . $member->getLastName(); ?><br />
                    <strong>Name:</strong> <?php echo $member->getFirstName() ?><br />
                    </div>
                </div>



                <h1>Skills</h1>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                    when an unknown printer took a galley of type and scrambled it to make a type
                    specimen book. It has survived not only five centuries, but also the leap into
                    electronic typesetting, remaining essentially unchanged. It was popularised in
                    the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                    and more recently with desktop publishing software like Aldus PageMaker including
                    versions of Lorem Ipsum.
                </p>
            </div>

            <div id="sidebar">
                <p class="beanheading">
                    sidebar
                </p>

            </div>

            <div id="footer">
                &copy; 2005, Jonny
            </div>
        </div>
    </body>
</html>

CSS: идентификатор ключа в самом низу 

body { 
    background-color: #eeeeee;
    font-family:      Georgia, "Times New Roman", Times, serif;
    font-size:        small;
    margin:           0px;
}

#header {
    background-color: #675c47;
    margin:           10px;
    height:           108px;
}

#main {
    background:       #ffffff;
    font-size:        105%;
    padding:          15px;
    margin:           0px 10px 10px 0px;
    width:            510px;
    float:            left;
}

#sidebar {
    background:       #7DCFE7;
    font-size:        105%;
    padding:          15px;
    margin:           0px 0px 10px 540px;
}

#footer {
    background-color: #675c47;
    color:            #efe5d0;
    text-align:       center;
    padding:          15px;
    margin:           10px;
    font-size:        90%;
    clear:            left;
}

h1 {
    font-size:        120%;
    color:            #954b4b;
}

.slogan { color: #954b4b; }

.beanheading {
    text-align:       center;
    line-height:      1.8em;
}

a:link {
    color:            #b76666;
    text-decoration:  none;
    border-bottom:    thin dotted #b76666;
}
a:visited {
    color:            #675c47;
    text-decoration:  none;
    border-bottom:    thin dotted #675c47;
}

#allcontent {
    width:            800px;
    padding-top:      5px;
    padding-bottom:   5px;
    background-color: #675c47;
    margin-left:      auto;
    margin-right:     auto;
}

#profiletable{
    width:           510px;
    background:      #eee;
}

#profileleft {
    background:       red;
    font-size:        105%;
    padding:          0px 10px 10px 0px;
    margin:           0px 10px 10px 0px;
    width:            128px;
}

#profileright {
    background:       yellow;
    font-size:        105%;
    padding:          0px 10px 10px 0px;
    margin:           0px 0px 10px 128px;
    width:            200px;
}

Ответы [ 4 ]

3 голосов
/ 08 ноября 2010
  1. Измените поля для #profileright на margin:0px 0px 10px 10px; [вы изменяете последнее значение поля для левой стороны элемента]
  2. Добавьте float:left; в #profileleft и затем#profileright
  3. Добавьте в свой CSS следующее .clear {clear:both};
  4. После #profileright add <div class="clear"></div>

живой пример [исправлено - у меня была позициячистый div в неправильной позиции]: http://jsbin.com/afonu3/2

1 голос
/ 08 ноября 2010

в вашем CSS задайте для вашего красного и желтого div'ов следующее: 

float: left;
display: inline-block;

Создать новый стиль 

.clear {
    clear: both;
}

Поместите в любой элемент блока, я использую div, с class = 'clear' после желтого блока и перед вашим заголовком Skills.

1 голос
/ 08 ноября 2010

Добавить 

float:right;

to # profileright

затем очистите его с помощью <br clear="all"> здесь: 

<strong>Name:</strong> 
<?php echo $member->getFirstName() ?>
<br />
</div>
<br clear="all" />
</div>
1 голос
/ 08 ноября 2010

Прежде всего, если вы работаете с фиксированной шириной, вы всегда можете позиционировать, используя top и left.

Но чтобы иметь более плавный макет, поставьте

  • profileleft как float: left,
  • profileright как float: left; clear: right

, и тогда ваши навыки подпадают под эти (вы даже можете добавить float: left).

Вам может потребоваться небольшой закрывающий элемент в соответствии с правами профиля и навыками (который должен делать <br /> с clear: both)

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

Нет похожих вопросов

...