Pozycjonowanie divów niezależnie od siebie.

pytanie zadane 21 lipca 2018 w HTML i CSS przez kubusop Początkujący (420 p.)
edycja 21 lipca 2018 przez kubusop

Mam wyśrodkowany jeden z elementów za pomocą flexboxa i chcę umieścić obok niego kolejny lecz wtedy przesuwa się ten wypozycjonowany. Co zrobić by układały się one niezależnie od siebie.

HTML:

<body>
	<header>
		
		<div class="login">
			Login:
			<input type="text" name="login">
			Hasło:
			<input type="password" name="haslo">
			<input type="Submit" value="Zaloguj się!">
		</div>
		
		
		<div class="logo">
			<div class="logo_img"><img src="img/logo.png"></div>
			<div class="logo_name">Nazwa</div>
			<div style="clear:both;"></div>
		</div>
		
		
	</header>
</body>

CSS:

body {
    background-color: #efefef;
    margin: 0;
    padding: 0;
    font-family: 'Oswald', sans-serif;
}


.logo 
{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top: 40px;
}

.logo_img
{
    
}

.logo_name 
{
    font-family: 'Black Han Sans', sans-serif;
    text-transform: uppercase;
    font-size: 30px;
    background-color:#ffffff;
    border: 5px solid #000000;
    line-height:50px;
    padding:10px;
}

.logo_img img 
{
    width:150px;
    height:80px;
}

.login
{
}

Chodzi o to by div login był na wysokości diva logo.

3 odpowiedzi

odpowiedź 21 lipca 2018 przez Jason_Nr_1 Bywalec (2,980 p.)

Możesz mi wysłać rar z tą stroną? nie widać obrazków, itd na codepen czy jsfiddle.

komentarz 21 lipca 2018 przez kubusop Początkujący (420 p.)

Edytowałem, i dodałem screena. Może być? :/

komentarz 24 lipca 2018 przez Jason_Nr_1 Bywalec (2,980 p.)

Powino byc:

body
{
    background-color: #efefef;
    margin: 0;
    padding: 0;
    font-family: 'Oswald', sans-serif;
}


.logo
{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top: 40px;
}

.login
{
  position: absolute;
  border: 1px solid red;
  top: 10px
  left: 50px;
}

.logo_img
{

}

.logo_name
{
    font-family: 'Black Han Sans', sans-serif;
    text-transform: uppercase;
    font-size: 30px;
    background-color:#ffffff;
    border: 5px solid #000000;
    line-height:50px;
    padding:10px;
}

.logo_img img
{
    width:150px;
    height:80px;
}

mozesz rowniesz wpisac bez border czy top

position: absolute;
right: 30px;

odpowiedź 21 lipca 2018 przez BillieQ Użytkownik (980 p.)

spróbuj dla diva .login dodać "position:absolute;" i możesz to poprzesuwać za pomocą właściwości top, right, left, bottom które działają jak marginesy gdy "position" jest inne niż "static"