Skocz do zawartości

Rozjeżdzające się DIV

Gość

Przez Gość
w HTML i CSS

Rekomendowane odpowiedzi

Gość

Gość

Opublikowano
Opublikowano

Witam was, proszę rzućcie okiem na zamieszczony poniżej kod, chodzi o to że gdy zmniejszam stronę, to DIV zmieniają swoje położenie, nie miałem tego problemu dopóki nie ustawiłem elementom: border: 1px, a gdy to już zrobiłem no to wtedy się zaczęło...

<style>
html, body {
background-color: black;
color: #000;
margin: 0;
padding: 0;
font-size: 92%;
color: white;
}
#hipercontainer {
 width: 912px;
margin: 0 auto;
}
#supercontainer {
 width: 912px;
}
#container {
width: 790px; 
float: left;	
border: 1px white solid;
display:inline;
}
#leftDiv{
width: 54px;
float: left;
background-color: #4682B4;
 height: 100px;
border: 1px white solid;
 border-right: 0;
}
#rightDiv {
width: 54px;
float: left;
background-color: #4682B4;
height: 100px;
border: 1px white solid;
border-left: 0; 
}
#panelTop
{
 width: 850px;
 height: 14px;
}
#header {
background-color: #4682B4;
height: 122px;
border-bottom: 1px solid white;
}
#menu {
width: 152px;
float: left;
overflow: hidden;
background-color: #B0C4DE;
height: auto;
border-right: 1px solid white;
}
#content {
float: right;
width: 637px;
background-color: orange;
height: auto;
}
#footer {
clear: both;
width: 100%;
background-color: #4682B4;
height: 58px;
border-top: 1px solid white;
}
#toLeft{
float: left;
}
#toRight{
float: right;
}
h6 {
margin: 0;
}
</style>
<html>
<body>
<div id="hipercontainer">

 <div id="panelTop">

  <div id="toLeft">
		  <h6>Tekst/tekst</h6>
	  </div>

  <div id="toRight">
			<h6>Tekst/tekst</h6>
		</div>

</div>

 <div id="supercontainer">

<div id="leftDiv"></div>

		<div id="container">

	<div id="header">
					<h6>Tekst/Tekst</h6>
			</div>

			<div id="menu">	
				<h5>Tekst 1</h5>
				<h5>Tekst 2</h5>
				<h5>Tekst 3</h5>
				<h5>Tekst 4</h5>
			</div>

			<div id="content">
				<h6>Tresc Tresc Tresc Tresc</h6>
	</div>

	  <div id="footer">			
					<div id="toLeft">
						<h6>Tresc Tresc</h6>
					</div>

					<div id="toRight">
						<h6>Tresc Tresc</h6>
					</div>
		</div>

	</div>	
<div id="rightDiv"></div>

</div>
</div>		
</body>
</html>

Odnośnik do komentarza
Udostępnij na innych stronach
Hubert Newbie

Hubert

Opublikowano
Opublikowano

nie analizowałem wszystkiego ale jeśli miałeś wszystko "wymierzone" i dodałeś bordery to od szerokości musisz odjąc bordery, czyli jak na początku miałeś

#container {
width: 790px;
float: left;	
display:inline;
}

to po dodaniu borderów 

#container {
width: 788px; /* -2px na bordery żeb y szerkośc była w sumie 790px */
float: left;	
border: 1px white solid;
display:inline;
}

A dla leniwych: sprzątanie białystok ;]

A dla relaksu możesz zapalić kadzidełka

faceplus_banner_234x60_black.png Punkty FanCop od 3pln / 1k

SPRZEDAM: Volvo S40 1.9D, 2002; 220k przebiegu. Lokalizacja: Białystok; Tel 724-148-596

Odnośnik do komentarza
Udostępnij na innych stronach
Hubert Newbie

Hubert

Opublikowano
Opublikowano

hym, odpaliłem to w przeglądarce i działa jak mi się wydaje ok. z jakiego browsera korzystasz ?? to pełny kod tego co się rozwala ??

A dla leniwych: sprzątanie białystok ;]

A dla relaksu możesz zapalić kadzidełka

faceplus_banner_234x60_black.png Punkty FanCop od 3pln / 1k

SPRZEDAM: Volvo S40 1.9D, 2002; 220k przebiegu. Lokalizacja: Białystok; Tel 724-148-596

Odnośnik do komentarza
Udostępnij na innych stronach
Gość

Gość

Opublikowano
Opublikowano

Jedynie Opera poprawnie to wyświetla.

W Firefox div#content podczas zmniejszania przestawia się na dół, dopiero jak dostanie atrybut width: 634 to się nie rozjeżdża, ale wtedy Tworzy się przestrzeń pomiędzy blokami.

W Safari natomiast div#leftDiv zmienia swoje położenie i tutaj to już w ogóle nie mam pomysłu dlaczego.

Przy okazji nasunęło mi się jeszcze jedno pytanie, co zrobić żeby div#leftDiv i div#rightDiv miały zawsze taką samą długość zależną od div#container ?

Odnośnik do komentarza
Udostępnij na innych stronach
Hubert Newbie

Hubert

Opublikowano
Opublikowano

dobra, mam

więc tak - u mnie pod ff 3.0.10 działa, pod IE6 jest tak jak mówisz div#content leci na dół. ten div ma 637px a powinien miec 636px - ponieważ div obejmujący 790px minus div#menu 154px (152px width + 2px borderów) = 636px;

poza tym jeśli ładujesz do jakiegoś pojemnika divy z floatem to nadrzędny musi miec position albo relative albo absolute

odnośnie rozciągania to musisz to pokombinowac z zagnieżdzeniem

A dla leniwych: sprzątanie białystok ;]

A dla relaksu możesz zapalić kadzidełka

faceplus_banner_234x60_black.png Punkty FanCop od 3pln / 1k

SPRZEDAM: Volvo S40 1.9D, 2002; 220k przebiegu. Lokalizacja: Białystok; Tel 724-148-596

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności