Skocz do zawartości

Dwa obrazki obok siebie w jednej linii


Madern

Recommended Posts

Witam, jako, że zaczynam swoją przygodę z CSS i znam w miarę podstawy html to stanąłem przed niemałym problemem.

Otóż staram się zakodować szablon do HTML+CSS. Udało mi się zrobić już poziome menu, jednak problem zaczyna się dalej.

Pod menu ma być logo, zwykły obrazek, lecz obok logo chciałbym mieć panel logowania, tj jako tło i żeby można było wstawić na niego skrypt logowania. I tutaj zaczynają się schody bo zupełnie nie wiem jak to zrobić, załączam obrazek i kod. Z góry dziękuję za wskazówki i pozdrawiam :)/> Przy okazji będę również wdzięczny za pokazanie ewentualnych błędów :)/>

f609.jpg

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
body {
	background-color:#0b0b0b;
	width:1200px;
	margin:0 auto;
	}
#menu-g {
	height:60px;
	}

#logo {
	height:212px;
	white-space:nowrap;
	}
#panel-l {
	height:212px;
	background-image:url(images/image__20.jpg);
	background-repeat:no-repeat;
	}


</style>

</head>
<body>
<div id="menu-g"><a href="#"><img src="images/image__01.jpg" /></a><img src="images/image__02.jpg" /><a href="#"><img src="images/image__03.jpg" /></a><img src="images/image__04.jpg" /><a href="#"><img src="images/image__05.jpg" /></a><img src="images/image__06.jpg" /><a href="#"><img src="images/image__07.jpg" /></a><img src="images/image__08.jpg" /><a href="#"><img src="images/image__09.jpg" /></a><img src="images/image__10.jpg" /><a href="#"><img src="images/image__11.jpg" /></a><img src="images/image__12.jpg" /><a href="#"><img src="images/image__13.jpg" /></a><a href="#"><img src="images/image__14.jpg" /></a><a href="#"><img src="images/image__15.jpg" /></a><a href="#"><img src="images/image__16.jpg" /></a><a href="#"><img src="images/image__17.jpg" /></a><img src="images/image__18.jpg" /></div>
<div id="logo"><img src="images/image__19.jpg" /><div id="panel-l"></div></div>
</body>
</html>

  • Upvote 10
Link do komentarza
Udostępnij na innych stronach

  • 4 weeks later...

Witaj. Wystarczy użyć float.

Dla pojemnika "logo" ustaw

float:left;

natomiast dla pojemnika "panel-l" ustaw

float:right; 
lub
float:left;

Zależnie co użyjesz, od innej strony będziesz ustawiał położenie obiektu.'

Jeżeli pojawią się problemy, zmniejsz wymiary kontenerów używając height i width

Link do komentarza
Udostępnij na innych stronach

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Gość
Odpowiedz...

×   Wkleiłeś treść z formatowaniem.   Usuń formatowanie

  Only 75 emoji are allowed.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Wczytywanie...
×
×
  • Utwórz nowe...