Okienko na informacje ogłoszenia w css

pytanie zadane 7 czerwca 2015 w HTML i CSS przez adamek0123 Obywatel (1,530 p.)

mam taką stronkę

i te okienko co jest w nim napisane "hggghghghghghghghghhghghghghygtyggujguyhgtyhgtuhtgujhyguiyiy" chce aby było doasowane do każdej rozdzielczości ekranu tak jak to jest w pasku menu

Czyli ten kwadrat z tym hghghghghghgh
#info
{
    margin-top: 10px; 
	margin-left:10px;
    float: left; 
    width: ; 
    padding:25px; 
    background-color:#ffffff; 
    text-align: center; 
    font-size: 18px; 
    border-right: 2px; 
    min-height:300px; 

}
.info
{
margin-top: 25px;
padding: 5px;

}

i menu lewe 

#menuL 
{ 
    margin-top: 10px; 
    float: left; 
    width: 142px; 
    padding:25px; 
    background-color:#ffffff; 
    text-align: center; 
    font-size: 18px; 
    border-right: 2px; 
    min-height:300px; 
}

.opcjaL 
{ 
    font-size:18px; 
    padding: 10px; 
    border-bottom: 2px; 
}

.opcjaL:hover 
{ 
background-color: #949494; 
cursor:pointer; 
color:white;  
}

Moja strona

http://zalaptosam.mintsowy.pl/strona/

Możecie napisać co zmienić dodać odjąć (kolorystyka itp.)

2 odpowiedzi

odpowiedź 7 czerwca 2015 przez adamek0123 Obywatel (1,530 p.)
wybrane 7 czerwca 2015 przez adamek0123

Najlepsza

Mugłby ktos pomóc ?

komentarz 7 czerwca 2015 przez ArturB Mądrala (6,060 p.)

chcesz aby to okienko było dopasowywane do rozdzielczości, to możesz opakować to menu lewe (dać szerokość w %) i to okienko (też szerokość w %) w diva o klasie np row i żeby była ona na 100% szerokości. coś takiego robiłeś z górną częścią strony, tylko nie wiem czy dobrze zamykasz tam div'y tak na pierwszy rzut oka.

Pozostałe elementy tej strony nie dopasowują się szerokości okna więc dziwne że chcesz aby to się dopasowywało.

Jakoś tego sposobu na responsywność nie udało mi się zrozumieć, ale chyba nie powinno się mieszać w ten sposób wartości w % z px, jak chcesz zrobić stronę responsywną to łatwiej Ci będzie robić pod konkretne rozdzielczości CSS3 to umożliwia (@media queries)

komentarz 7 czerwca 2015 przez adamek0123 Obywatel (1,530 p.)

Ok zobacze :)

komentarz 7 czerwca 2015 przez adamek0123 Obywatel (1,530 p.)

A mugbym prosic o przykladowy kod ?

komentarz 7 czerwca 2015 przez ArturB Mądrala (6,060 p.)

do tych div z % czy do media queries ?

komentarz 7 czerwca 2015 przez adamek0123 Obywatel (1,530 p.)

Div a te 2 to co to jest ?

komentarz 7 czerwca 2015 przez ArturB Mądrala (6,060 p.)

w html robisz taką konstrukcję:

<div class="row">
	<div id="menuL"> 
       <div class="opcjaL">dewf</div> 
    </div>
	<div id="info">

		<div class="info">
			hggghghghghghghghghhghghghghygtyggujguyhgtyhgtuhtgujhyguiyiy
		</div>
	</div>
</div>

a style:

.row {
  margin-top: 10px;
  width: 100%;
}
#info {
  margin-left: 2%;
  float: left;
  width: 78%;
  background-color: #ffffff;
  text-align: center;
  font-size: 18px;
  min-height: 300px;
}
#menuL {
  float: left;
  width: 20%;
  background-color: #ffffff;
  text-align: center;
  font-size: 18px;
  min-height: 300px;
}

coś tego typu, oczywiscie musisz pobawić się z dokładniej z wyglądem bo jak wartości są w % to padingi usunołem.

a to drugie to w css dajesz

@media all and (min-width:800px)
{
 tutaj piszesz kod wszystkich klas/identyfikatorów i elementów (h1,h2, p itd) tych co używasz na stronie dla ekranu do 800px szerokości
}
@media all and (max-width:800px)
{
 tutaj piszesz kod wszystkich klas/identyfikatorów i elementów (h1,h2, p itd) tych co używasz na stronie dla ekranu powyżej 800px szerokości
}

to też oczywiście jesy bardzo uproszczony przykład