Jak przesunąć <div> do góry

BloBiu · 7 Października 2014

Witam.

Mam problem z przesunięciem diva do góry tak jak jest to pokazane na obrazku.

Dziękuje za pomoc.

Edytowane 8 Października 2014 przez BloBiu

Małpożer · 8 Października 2014

wsadz zolty i zielony maly prostokat w div, a to wszystko w jeszcze jeden do ktorego dorzucisz element ktory chcesz przesunac. Bez kodu trudno cos wiecej doradzic.

Edytowane 8 Października 2014 przez Quave

BloBiu · 8 Października 2014

wsadz zolty i zielony maly prostokat w div, a to wszystko w jeszcze jeden do ktorego dorzucisz element ktory chcesz przesunac. Bez kodu trudno cos wiecej doradzic.

CSS:

body {
min-height: 100%;
background:  linear-gradient(#66FFFF ,#660099);
background-attachment: fixed;
}

.Kaneki{
font-family: "Trebuchet MS", sans-serif;
font-style: italic;
font-variant: small-caps;
text-align: center;
margin: 0 auto;

}

.Risa {
font-family: "Trebuchet MS", sans-serif;
font-style: italic;
font-variant: small-caps;
text-align: center;
margin: 0 auto

}

.Isse{
font-family: "Trebuchet MS", sans-serif;
font-style: italic;
font-variant: small-caps;
text-align: center;
margin: 0 auto

}

#demon{
background: #FFFF00;
float: left;
border-color: #800000;
border-style: solid;
width: 50%;
height: 220px;
margin-right: 10px;


}

#a{
margin-top: 3%;
margin-left: 35%;
margin-bottom: 5%;
background: #99FFFF;
border-color: #006699;
border-style: solid;
width: 230px;

}

#a1 {
margin-left: 20%;    
background: #99FFFF;
border-color: #006699;
border-style: solid;
width: 60%;

}

#a2 {
margin-top: 5%;
margin-left: 38%;
margin-bottom: 1%;
background: #99FFFF;
border-color: #006699;
border-style: solid;
width: 25%;

}
 #demon2 {
float: left;
border-style: solid;
border-color: #0077ff;
width: 40%;
background: #66FF00;
border-color: #800000;
margin-left: 10px
 
 }
 
.b1 {
text-align: justify;
font-family: Georgia, serif;
font-size: medium;
font-style: italic;
font-variant: small-caps;
text-transform: lowercase;
margin-top: 1%;
margin-bottom: 1%;

}

#demon3 {
border-style: solid;
border-color: #FF0000;
background: -moz-linear-gradient(right, #33FF00  ,#FFFF00);
float: left;    

}

#demon4 {
float: left;
margin-left: 42%;
border-color: #0000FF;
border-style: solid;

}

HTML:

<!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" xml:lang="pl" lang="pl">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="CSS06102014.css" />
  </head>
<body>
            <div id="pra">
        <div id="demon">
    <div id="a">
 <h1 class="Kaneki">To moja praca</h1>
     </div>
     <div id="a1">
  <h2 class="Risa">Obok napisane jest "Lorem ipsum"</h2>
    </div>
    <div id="a2">
   <h3 class="Isse">2014-10-06 21:26</h3>
    </div>    
        </div>
        
            <div id="demon3">
<a href="http://google.pl">Google.pl</a><br/>
<a href="https://www.facebook.com/">Facebook.com</a><br/>
<a href="http://www.youtube.com/?gl=PL&hl=pl">Youtube.com</a>
        </div>
        
        
        <div id="demon2">
    <p class="b1">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>
   Suspendisse nunc pede, aliquet at, tincidunt id, sodales in,
   nulla.<br/> Pellentesque viverra ipsum ac quam.<br/> In hac habitasse
   platea dictumst.<br/> In eget tellus.<br/> Nullam placerat, felis in
   scelerisque sollicitudin, magna velit dictum mi, ac molestie
   quam urna nec nibh.<br/> Morbi facilisis.<br/> Suspendisse pulvinar
   nisl at elit.<br/>
   Sed euismod orci sed est.<br/> Donec tempor tellus
   sit amet ante.<br/> Aenean quis leo.<br/> Pellentesque habitant morbi
   tristique senectus et netus et malesuada fames ac turpis
   egestas.<br/> Duis sapien.<br/>
   Nam elementum velit nec mauris.<br/>
   Curabitur non turpis quis felis placerat luctus.<br/>
   Pellentesque id mi sit amet quam fermentum convallis.<br/>Duis nec lacus.
   Donec laoreet.<br/> Suspendisse vel nisl eget nibh
   dapibus ultricies.<br/> Donec ornare.<br/> Vestibulum lorem.<br/> In massa
   neque, dapibus a, tempor ut, ultricies at, neque.<br/> Curabitur
   at risus.<br/> Sed ut magna vel odio molestie tincidunt.<br/> Mauris
   consectetuer, velit a elementum malesuada, pede mauris
   interdum risus, vel commodoarcu risus eget tellus.<br/> Proin
   sagittis, felis non dictum sodales, libero est varius diam,
   eget vehicula lorem metus eu velit.
    </p>
        </div>
        <div id="demon4">
<form action="mailto:blobiu65147@gmail.com" method="post">
Poadj Login:  <input name="Wyślij" /><br/>
Podaj Haslo:  <input type="password" name="" /> <br/>
Czy chcesz zatwierdzic?<input type="checkbox" name="a1" value="Tak" /><br/>
<input type="submit" value="Wyslij" />
</form>    
        </div>
            </div>    
    
    
</body>
</html>

Edytowane 10 Października 2014 przez BloBiu

Małpożer · 9 Października 2014

<div id="pra">
    <div id="kontener">
        <div>
            <div id="demon">
                (...) 
            </div>

            <div id="demon3">
                (...)
            </div>
        </div>
        <div>
            <div id="demon4">
                (...)
            </div>
        </div>
    </div>
        
        
    <div id="demon2">
        <p class="b1">Lorem ipsum ...</p>
    </div>
    
</div>

Powinno dziłać, pobaw się tylko stylami dla div'a kontener (szerokosc inherit + align: right aby formularz poszedl do prawej krawedzi). Na przyszlosc dawaj nazwy id zwiazane z zawartoscia a kod wrzucaj w znaczniku <code>

Edytowane 9 Października 2014 przez Quave

BloBiu · 10 Października 2014

<div id="pra">
    <div id="kontener">
        <div>
            <div id="demon">
                (...) 
            </div>

            <div id="demon3">
                (...)
            </div>
        </div>
        <div>
            <div id="demon4">
                (...)
            </div>
        </div>
    </div>
        
        
    <div id="demon2">
        <p class="b1">Lorem ipsum ...</p>
    </div>
    
</div>
Powinno dziłać, pobaw się tylko stylami dla div'a kontener (szerokosc inherit + align: right aby formularz poszedl do prawej krawedzi). Na przyszlosc dawaj nazwy id zwiazane z zawartoscia a kod wrzucaj w znaczniku <code>

Dziekuje za podpowiedź.

Zaloguj się

Jak przesunąć <div> do góry

Rekomendowane odpowiedzi

BloBiu

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Małpożer

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

BloBiu

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Małpożer

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

BloBiu

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Dołącz do dyskusji

Przeglądaj

Cała aktywność