Css - nie mogę przesunąć prawej kolumny !?

Bash, C, C++, Java, PHP, Ruby, GTK, Qt i wiele innych - wszystko tutaj.
Awatar użytkownika
jerry1984
Piegowaty Guziec
Piegowaty Guziec
Posty: 28
Rejestracja: 06 cze 2006, 19:48
Płeć: Mężczyzna
Wersja Ubuntu: 18.10
Środowisko graficzne: KDE Plasma
Architektura: x86_64

Css - nie mogę przesunąć prawej kolumny !?

Post autor: jerry1984 »

Witam

Borykam się z problemem którego nie mogę rozwiązać, nie mogę przesunąć prawej kolumny aby była równa jak lewa, próbowałem różnych sposobów:
Obecnie mam tak:

Obrazek

Mój Html:

Kod: Zaznacz cały

<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="pl" />
<meta name="Description" content="Project strony internetowej - księgarnia językowa" />
<meta name="Keywords" content="Ksiązki, szkoła" />
<meta name="Author" content="" />
<link rel="Shortcut icon" href="./img/book-icon.gif" />
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="styl.css" />
<link rel="stylesheet" type="text/css" href="menu0.css" />
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript" src="menu.js"></script>
<title>Księgarnia Internetowa</title>

</head>

<body>

   <div id="wrapper">
   
         <!-- Nagłówek -->
         <div id="header">
		 
		       This is the Header		 
			   
		 </div>
		 <!-- Koniec Nagłówka -->
		 
		 <!-- Początek Nawigacji -->
	<div style="bo" id="navigation" >

<ul>
<li><a href="obramowanie.html">Strona główna</a></li>
<li><a href="czcionki.html">Warunki</a></li>
<li><a href="tekst.html">Instrukcje</a></li>
<li><a href="tlo.html">Dodatkowe rabaty</a></li>
<li><a href="marginesy.html">Kontakt</a></li>
</ul>	 
			   

	</div>	 
		<!-- Koniec Nawigacji -->
		 
         <!-- Faux kolumna -->
		 <div id="faux">
		 
		       <!-- Lewa kolumna -->
		       <div id="leftcolumn">

<dl id="menu0">
<dt>Podręczniki</dt>
<dd><a href="../html/zielony.html">- klasy 0-3</a></dd>
<dd><a href="../html/body.html">- klasy 4-6</a></dd>
<dd><a href="../html/tekst.html">- gimnazjum</a></dd>
<dd><a href="../html/odsylacze.html">- szkoły ponadgimnazjalne/dorośli</a></dd>
<dd><a href="../html/tabele.html">- bisness english</a></dd>
<dd><a href="../html/multimedia.html">- gramatyka</a></dd>

<dt>Sprawności językowe</dt>
<dd><a href="../css/index.html">- gramatyka</a></dd>
<dd><a href="../css/definicje.html">- słownictwo</a></dd>
<dd><a href="../css/wstawianie.html">- wymowa</a></dd>
<dd><a href="........................">- pozostałe</a><dd>

<dt>Literatura - wersje uproszczone</dt>
<dd><a href="../skrypty/ulubione_i_startowa.html">- dla dzieci</a></dd>
<dd><a href="../skrypty/przyciski.html">- beginner</a></dd>
<dd><a href="../skrypty/aktualizacja.html">- elementary</a></dd>
<dd><a href="../skrypty/aktualizacja.html">- pre-intermediate</a></dd>
<dd><a href="../skrypty/aktualizacja.html">- intermediate</a></dd>

<dt>Literatura</dt>
<dd><a href="../skrypty/ulubione_i_startowa.html">- literatura współczesna</a></dd>
<dd><a href="../skrypty/ulubione_i_startowa.html">- literatura klasyczna</a></dd>


<dt>Słowniki</dt>
<dd><a href="../skrypty/ulubione_i_startowa.html">- angielsko-angielksie</a></dd>
<dd><a href="../skrypty/ulubione_i_startowa.html">- angielsko-polskie</a></dd>
<dd><a href="../skrypty/ulubione_i_startowa.html">- obrazkowe</a></dd>
<dd><a href="../skrypty/ulubione_i_startowa.html">- tematyczne</a></dd>

</dl>

<script type="text/javascript">
// <![CDATA[
new Menu('menu0');
// ]]>
</script>

<div>

<form action="http://www.google.pl/search" method="get">
<input type="text" name="q" />
<input type="hidden" name="ie" value="iso-8859-2" />
<input type="radio" name="sitesearch" value="http://onet.pl" id="sitesearch0" checked="checked" /> <label for="sitesearch0">W serwisie</label>
<input type="radio" name="sitesearch" value="" id="sitesearch1" /> <label for="sitesearch1">W Internecie</label>
<input type="submit" value="Szukaj" />
</form>

</div>



		             
		 
		       </div>
		       <!-- Koniec lewej kolumny -->
		 
		       <!-- Treść dokumenu -->
		       <div id="content">
	    <div align="center">
    <div class="box">
      <div class="box-header">
        <div class="box-arrow"></div>
        <div class="box-title">
          <p>Polska wygrywa ENC 2007!</p>
          <span>Dodano 16 marca 2006 o godzinie 18:23 przez użytkownika $Morgen</span>
        </div>
      </div>
      <div class="box-content">
         Tak! Stało się! Polska reprezentacja w Counter Strike'a została <b>Mistrzem Europy</b>! Nasi rodacy przemknęli przez turniej jak burza, nie dając żadnym rywalowi szans. Dziś o godzinie 15.30 w wielkim finale pokonali w fenomenalnym stylu zawodników z Niemiec i zainkasowali na swoje konto <b>ok. 50 tys. zł</b>! <br />
    Drogę naszych  mistrzów do wielkiego finału przedstawiam
      </div>
    </div>	   
   </div>    
	                 
						   
					
		       </div>
		       <!-- Koniec dokument -->
			   
			   
			   
			   <!-- Prawa kolumna -->
		       <div id="rightcolumn">
		 
		             
							
							
		       </div>
		       <!-- Koniec prawej kolumny -->

         </div>	   
         <!-- Koniec Faux kolumny --> 

         <!-- Stopka -->
         <div style="text-align: center" id="footer">


</div>		       	

         </div>
		 <!-- Koniec stopki -->
		 
   </div>
  <!-- koniec wrapper -->
</body>
</html>
A mój kod css (main.css) to:

Kod: Zaznacz cały

* {border: thin sold black; }


body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 1122px;
}
#faux {
 background: url(faux-1-3-col.gif);
 margin-bottom: 5px;
 overflow: auto; 
 width: 100%
}
#header {
 color: #333;
 width: 1102px;
 padding: 10px;
 height: 100px;
 margin: 10px 0px 5px 0px;
 background: #D1DBDB;
}
#navigation {
 color: #333;
 padding: inline;
 margin: 0px 0px 5px 0px;
 background: #ABBEBE;
}
#leftcolumn { 
 display: inline;
 color: #333;
 margin: 10px;
 padding: 0px;
 width: 190px;
 float: left;

#content { 
 float: left;
 color: #333;
 margin: 10px 13px;
 padding: 0px;
 width: 460px;
 display: inline;
 position: relative;
}
#rightcolumn { 
 display: inline;
 position: relative;
 color: #333;
 margin: 10px 10px 10px 0px;
 padding: 0px;
 width: 195px;
 float: right;
}
#footer { 
 width: 1102px;
 clear: both;
 color: #333;
 background: #ABBEBE;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}
.clear { clear: both; background: none; }
Jestem początkującym więc można wyłapać jakieś błędy w kodzie które mogłem popełnić.
Z góry dziękuje pozdrawiam
Awatar użytkownika
mario_7
Administrator
Administrator
Posty: 8606
Rejestracja: 30 sie 2006, 13:11
Płeć: Mężczyzna
Wersja Ubuntu: 20.04
Środowisko graficzne: GNOME
Architektura: x86_64

Re: Css - nie mogę przesunąć prawej kolumny !?

Post autor: mario_7 »

Po co "position: relative" i "display: inline"? Zanim zaczniesz czegoś używać poczytaj co to robi i do czego się to stosuje.
Awatar użytkownika
jerry1984
Piegowaty Guziec
Piegowaty Guziec
Posty: 28
Rejestracja: 06 cze 2006, 19:48
Płeć: Mężczyzna
Wersja Ubuntu: 18.10
Środowisko graficzne: KDE Plasma
Architektura: x86_64

Re: Css - nie mogę przesunąć prawej kolumny !?

Post autor: jerry1984 »

Po co "position: relative" i "display: inline"? Zanim zaczniesz czegoś używać poczytaj co to robi i do czego się to stosuje.
O to chodzi, że czytam wszytko i studiuję książki które zakupiłem do html'a i css'a ale praktyka zawsze była najlepszą nauczycielką.
Robię błędy i wiem o tym, dlatego potrzebowałem podpowiedzi bo pewnym momencie zagubiłem się aby naprawić ten błąd.
#mario_7, a do wskazanych przez Ciebie lini kodowej zaraz zerknę.

Pozdrawiam
Awatar użytkownika
Echinos
Serdeczny Borsuk
Serdeczny Borsuk
Posty: 237
Rejestracja: 15 maja 2005, 09:48
Płeć: Mężczyzna
Wersja Ubuntu: inny OS
Środowisko graficzne: GNOME
Architektura: x86_64
Kontakt:

Re: Css - nie mogę przesunąć prawej kolumny !?

Post autor: Echinos »

Ja bym jeszcze dodał pytanie po co piszesz w XHTML skoro ślesz stronę jako text/html?
Poczytaj http://pornel.net/xhtml

Zmień kod na zwykły HTML4 Strict, umieść stronę na jakimś serwerze i podaj odnośnik.
Łatwiej wtedy się zorientować w kodzie i można szybciej wypróbować zmiany.
kobylecki
Piegowaty Guziec
Piegowaty Guziec
Posty: 19
Rejestracja: 05 gru 2005, 18:11
Płeć: Mężczyzna
Wersja Ubuntu: 11.10
Środowisko graficzne: Unity
Architektura: x86

Re: Css - nie mogę przesunąć prawej kolumny !?

Post autor: kobylecki »

Kod: Zaznacz cały

#faux { overflow: hidden; }  // wyrzuć wysokość

#leftcolumnt { float: left; width: ___; }

#content { float: left; width: ___; }

#rightcolumn { float: right; width: ___; }

z reguł dla kolumn wyrzuć też wszelkie wystąpienia position i display (no chyba, że potrzebne jest position: relative dla potomków kolumny --- jak nie wiesz o co chodzi to wyrzuć)
ODPOWIEDZ

Wróć do „Programowanie”

Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 62 gości