Подскажите нубу

IgnatVoronov · March 17, 2012

Начал изучать сайто-строение, для примера решил сделать сайт о группе SOAD...

вот код:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset="utf-8">
  <title>SOAD</title>
  <style>
   .center {
    width: 800px; /* Ширина элемента в пикселах */
	height: 1000px;
    padding: 10px; /* Поля вокруг текста */
    margin: auto; /* Выравниваем по центру */
    background: #000000; /* Цвет фона */
	   }
	 body {
     background: #333333; /* Цвет фона */
     color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <div class="center">
  <img src="shapka.png" width="800" height="65" alt="">
  <img src="hand.png" width="338" height="316">
  </div>
 </body>
</html>

тело сайта, наверху шапка - картинка, еще одну вставил хочу ее в правый нижний угол сайта, какие параметры нужно задать и как правильно это сделать для этой строчке - <img src="hand.png" width="338" height="316">

спасибО сильно не судите за нубство)

Krote · March 18, 2012


.center {
    width: 800px; /* Ширина элемента в пикселах */
    height: 1000px;
    padding: 10px; /* Поля вокруг текста */
    margin: auto; /* Выравниваем по центру */
    background: #000000; /* Цвет фона */
position:relative;
           }
img{position:absolute;right:0px; bottom:0px;}

Edited March 18, 2012 by Krote

IgnatVoronov · March 18, 2012



position:relative;
           }
img{position:absolute;right:0px; bottom:0px;}

он переносит сразу две картинки вниз-вправо, а мне нужно только одну, а чтоб картинка-шапка осталась наверху...

т.е. нужно чтоб только hand.png была внизу-справа

Edited March 18, 2012 by IgnatVoronov

alexandr_v-vich · March 18, 2012

<img class="right" src="hand.png" width="338" height="316">

.right {position:absolute;right:0px; bottom:0px;}

IgnatVoronov · March 18, 2012

<img class="right" src="hand.png" width="338" height="316">

.right {position:absolute;right:0px; bottom:0px;}

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset="utf-8">
  <title>SOAD</title>
  <style>
   .right {position:absolute;right:265px; bottom:-366px;}
   .center {
    width: 800px; /* Ширина элемента в пикселах */
	height: 1000px;
    padding: 10px; /* Поля вокруг текста */
    margin: auto; /* Выравниваем по центру */
    background: #000000; /* Цвет фона */	
	   }
	 body {
     background: #333333; /* Цвет фона */
     color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <div class="center">
  <img src="shapka.png" width="800" height="65" alt="">
  </div>
  <div class="right">
  <img src="hand.png" width="224" height="273">
  </div>
 </body>
</html>

сделал так, когда браузер сворачиваешь меняет положение картинка в правом нижнем углу, т.е. она не фиксируется...

Krote · March 18, 2012

он переносит сразу две картинки вниз-вправо, а мне нужно только одну, а чтоб картинка-шапка осталась наверху...
т.е. нужно чтоб только hand.png была внизу-справа

а ты картинке класс задай и вместо img напиши класс картинки

.center {
    width: 800px; /* Ширина элемента в пикселах */
    height: 1000px;
    padding: 10px; /* Поля вокруг текста */
    margin: auto; /* Выравниваем по центру */
    background: #000000; /* Цвет фона */
position:relative;
           }
.img{position:absolute;right:0px; bottom:0px;}

IgnatVoronov · March 18, 2012

ага, получилось, спасиб)

 <style>

   .center {
    width: 800px; /* Ширина элемента в пикселах */
	height: 1000px;
    padding: 10px; /* Поля вокруг текста */
    margin: auto; /* Выравниваем по центру */
    background: #000000; /* Цвет фона */
	position:relative;
	}

    .img{
	position:absolute;
	right:0px; 
	bottom:0px;
	}	

	 body {
     background: #333333; /* Цвет фона */
     color: #fff; /* Цвет текста */
    }
  </style>
 </head>
 <body>
  <div class="center">
  <img src="shapka.png" width="800" height="65" alt="">
  <img class="img" src="hand.png" width="224" height="273">
  </div>

как то так)

IgnatVoronov · March 24, 2012

подскажите как сделать вот так:

вот код этого элемента что мне нужно поместить вправо-вниз

 <div id="centered_div">
        <p>Time left:</p>
        <div id="counter">
            <div id="counter_item1" class="counter_item">
                <div class="front"></div>
                <div class="digit digit0"></div>
            </div>
            <div id="counter_item2" class="counter_item">
                <div class="front"></div>
                <div class="digit digit0"></div>
            </div>
            <div id="counter_item3" class="counter_item">
                <div class="front"></div>
                <div class="digit digit_colon"></div>
            </div>
            <div id="counter_item4" class="counter_item">
                <div class="front"></div>
                <div class="digit digit0"></div>
            </div>
            <div id="counter_item5" class="counter_item">
                <div class="front"></div>
                <div class="digit digit0"></div>
            </div>
        </div>
        <p style="margin-top: 20px">
            <a href="javascript:;" onclick="CounterInit(600); return false;">10 min</a>
        </p>
        <p>
            <a href="javascript:;" onclick="CounterInit(10); return false;">10 sec</a>
        </p>
    </div>

br3t · March 25, 2012

По аналогии же

#centered_div {
    position:absolute;
    left:0px; 
    bottom:0px;
}

Всё-таки переход к практике нужно подкрепить хоть какой-то теорией

Sign In

Подскажите нубу

Question

IgnatVoronov

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Krote

Link to comment

Share on other sites

IgnatVoronov

Link to comment

Share on other sites

alexandr_v-vich

Link to comment

Share on other sites

IgnatVoronov

Link to comment

Share on other sites

Krote

Link to comment

Share on other sites

IgnatVoronov

Link to comment

Share on other sites

IgnatVoronov

Link to comment

Share on other sites

br3t

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information