Problem z css i html początkujący!

pytanie zadane 29 grudnia 2015 w HTML i CSS przez shido Użytkownik (640 p.)

Witam mam otóż następujący problem :

1. http://zapodaj.net/c54e45a3ca1ff.bmp.html

2.http://zapodaj.net/c24b6bd69da1e.bmp.html

2.obok postaci a właściwie na jej występuje stopka która powinna być na dole i nie wiem właściwie dlaczego ona tam jest ??? Postać miała występować w zielonej ramce ale ten efekt mi akurat pasuje i chciałbym go pozostawić.

1. Ten biały napis powinien znajdować się w zielonej ramce nie wiem właściwie dlaczego tam mnie ma, czy mógłby mi ktoś to wytłumaczyć, bądź poprawić ?

A te napis menu powinny być po lewej ale nie jarzę dlaczego tam nie są?

artykuły powinny już występować obok menu lewego do końca strony nie wyjeżdżając poza ją i nie niszcząc obrazka.

Możecie mi pomóc?

sorki za link ale tu macie moje pliki html i css

http://www.webmasterzy.org/topic/73577-problem-poczatkujacego-brak-spojnosci-z-html/#entry402084

5 odpowiedzi

odpowiedź 29 grudnia 2015 przez xSvilen Mądrala (5,740 p.)

odpowiedź 29 grudnia 2015 przez Eimens Maniak (69,240 p.)

odpowiedź 29 grudnia 2015 przez shido Użytkownik (640 p.)

body 
{
   background-color: #404040;
   font-family: 'Ubuntu', sans-serif;
   
}

#conteiner
{
      width: 1000px;
	  margin-left: auto;
	  margin-right: auto;
}

#logo
{
      color: white;
	  margin-top: 20px;
	  font-size: 20px;
	  letter-spacing: 3px;
	  font-weight: 700;
}

#menu
{
     background-color: #303030;
	 margin-top: 20px;
	 color: white;
	 padding: 10px;
	 text-algin: center;

}

#topbar
{
     background-color: #128870;
	 color: white;
	 padding: 10px;
	 margin-top: 20px;
	 margin-bottom: 25px;
	 height: 170px;
}

#topbarL
{
     float: left;
	 padding: 20px;
	 width: 138px;
	 text-algin: center;
	 border-right: 2px  #cccccc;
}

#topbarR
{
     float: left;
	 padding: 20px;
	 width: 760px;
	 font-size: 16px;
	 text-algin: justify;
	
}



#sidebar
{
   float: left;
}

#content
{
       float:left
}

#footer
{


}

.option
{
     float: left;
	 min-width: 50px;
	 height: 25px;
	 font-size: 18px;
	 padding: 10 px;
	 border-right: 2px dotted #444444;
	 opacity: 0.8;	 
}

.option:hover
{
   background-color: #000000;
   cursor: pointer;
}

odpowiedź 29 grudnia 2015 przez shido Użytkownik (640 p.)

<! DOCTYPE HTML>
<html lang="pl" >
<head>
	 <meta charset="utf-8" />
	 <title> Genesis project </title>
	 <meta name="description" content="Zespół tworzący gry via www " />
	 <meta name="keywords" content="tagi" />
	 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link  rel="stylesheet" href="style.css" type="text/css" />
	<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

</head>



<body>

    <div id="container">
	
	    <div id="logo">
		      <h1>Genesis project</h1>
		</div>	
		
		<div id="menu">
		     <div class="option">Strona główna</div>
			 <div class="option">projekty</div>
			 <div class="option">kontakt</div> 
			 <div class="option">O nas </div>
			 <div style="clear:both;"></div>
		</div>
		
		<div id="topbar">
		      <div id="topbarL">
			     <img src="Model.png" />
			  </div>
			  <div id="topbarR">
		     O projekcie:<br />
			 Projekt ma na celu stworzyć grę przeglądarkową  tematyki strategicznej opartej o losy Śródziemia jednakże nie w całości ze względu na prawa autorskie do tej książki. Nadanie życia w tak nie doceniane uiversum fantastyczne w grach.
			  </div>
			  <div style="clear:both;"></div>
		 </div>
		 
		 <div id="sidebar">
		     Strona główna <br />
		     Projektrojekt<br />
		     Kontakt<br />
		     O nas 
		 </div>
		 
		 <div id="content">
		      Artykuły:<br />
			  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac facilisis sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo nibh velit, sit amet vehicula sem aliquet eu. Morbi fringilla nulla mauris, sed interdum augue facilisis at. Vestibulum pellentesque, dui ut hendrerit porttitor, leo diam sollicitudin mi, ac accumsan quam lectus in massa. Etiam rutrum nibh a magna aliquam malesuada. Praesent eget suscipit erat, at mattis tellus.<br /><br />
               Suspendisse a pharetra dui. Vivamus quis aliquam nisl. Curabitur vestibulum augue in nibh porta maximus. Donec sollicitudin velit sed nibh aliquet interdum vitae eu tortor. Quisque faucibus id libero id sagittis. Donec in tincidunt velit. Integer pretium rutrum ex nec accumsan. Donec hendrerit erat et eros pulvinar lacinia. Vestibulum eu efficitur nulla, nec porta nulla.<br /><br />
               Duis at vehicula ex, consequat condimentum odio. Aenean at quam quis lorem consequat ornare pulvinar eu orci. Morbi et ullamcorper mauris. Donec id arcu at orci tempor sollicitudin quis vel diam. Integer nec ipsum faucibus, fringilla ipsum non, interdum enim. Phasellus eu finibus felis, et efficitur ligula. Maecenas vel justo velit. Mauris ut enim quis purus finibus interdum. Pellentesque ultrices, nibh et consectetur mattis, lacus ex aliquet massa, sit amet auctor mauris libero non dui. Aliquam hendrerit porttitor posuere. 
		</div>
		<div id="footer">
		     Genesis Team - 2015/16 &copy Wszelkie prawa zastrzeżone
		</div>
			   
			   
	 </div>



</body>
</html>