2 divy obok siebie

First place · 21 Maja 2013

Witam

Ucze się tworzyć szablony do katalogów (staram się napisać go od podstaw) i mam pytanie za nic nie mogę ustawić 2 div-ów obok siebie, próbuje ustawić za pomocą float: left; ale wtedy dosłownie 3 divy znikają, może ktoś odnalazł by błąd,

szerokość div-ów pozmieniałem i pokolorowałem aby dokładnie było widać jak są ułożone:

https://www.test.first-place.pl/

Plik Css


#kontener {
position: relative;
background: red;
position: relative;
width: 850px;

}
#left{
background: #fff6e5;
width: 400px;
position: relative;

}
#right{
background: grey;
width: 100px;
position: relative;

}

Plik index


<div id="kontener">

<div id="left">
<?php include $przelacz; ?>
</div>


<div id="right">
(KATEGORIE)
<?php include 'strony/kategorie.php'; ?>
(NAJNOWSZE)
<?php include 'strony/najnowsze.php'; ?>
(LOSOWE)
<?php include 'strony/losowe.php'; ?>
</div>

Chodzi mi aby <div id="left"> oraz <div id="right"> były obok siebie dodaje w pliku css do obu float: left;

I wszystko się rozwala

Cordor · 21 Maja 2013

Po pierwsze, po co dajesz position: relative na prawie wszystko?

Po drugie nie widze w kodzie #left ani #right float:left. Dodaj a będzie pływać. A po <div id="right"> a konkretnie po zamknięciu go - </div> wstaw sobie element, który usunie pływanie - w necie masz dużo przykładów na to.

Edit: ok tego syfu jest więcej niż myślałem. Proponuję zapoznać się chociażby z tym kursem: https://www.kurshtml.edu.pl/

Edit 2:

Wywal z divów position: relative.

Dodaj dla #left i #right - float: left

Dodaj do #tagi clear:both

Edit 3: Nie wklejaj następnym razem całego kodu do posta, dałes link do strony i każdy kto ma firebuga poradzi sobie z podejrzeniem htmla i cssa.

First place · 21 Maja 2013

Teraz jest bez float:left, jak chcesz mogę dodać i byś zerknął.

Ten kod na pływanie powinien załatwić sprawę?

Ale chodzi że bez tego powinno wszystko ładnie pasować, mam szablon w html stworzony wieki temu i tam wszystko śmiga bez żadnego usuwania pływania

Cordor · 21 Maja 2013

Kod na pływanie powinien załatwić sprawę. Chyba, że czegoś nie ogarniam. Poza tym, nie pisałem o usuwaniu pływania, tylko o jego dodaniu a usuwaniu position: relative, które nic w tym wypadku nie daje.

First place · 21 Maja 2013

Edit 3: Nie wklejaj następnym razem całego kodu do posta, dałes link do strony i każdy kto ma firebuga poradzi sobie z podejrzeniem htmla i cssa.

Link tylko do testów, niebawem subdomena zniknie

Dzięki będe próbował

jak by nie wyszło będzie można na priv się odezwać?

Cordor · 21 Maja 2013

Można, tylko nie wiem co chcesz próbować. Napisałem Ci wszystko co trzeba zrobić. Możesz pominąć usuwanie position: relative jak nie chcesz zmieniać. A po dodaniu floatów i clear float wszystko musi działać.

pyzdera · 21 Maja 2013

#kontener - wywal position i dodaj dla bezpieczeństwa (świętego spokoju) overflow: hidden

#left - wywal position float: left

#right - wywal position float: left(right)

#tagi- clear: both;

Jak będziesz rozszerzał kolumny, to pamiętaj ze przeglądarki rożnie interpretują szerokość ramek (border)

Overflov: hidden redukuje rożne dziwne zachowania div-ów

First place · 21 Maja 2013

Działa:)

O to mi chodziło:)

Naprawde samemu zajeło by mi to wieki a chodziło o jeden element, wielkie dzięki

Za radą usunąłem kod zostawiłem tylko to o co chodziło....

Cordor · 21 Maja 2013

Mówiłem, że będzie działać

First place · 23 Maja 2013

Miałbym jeszcze jedno pytanie

Postanowiłem zaokrąglić divy działa ale nie na wszystkich stronach

Na stronie głównej, podstronie dodaj, stronach tagów, kategorii wszystko ładnie działa

Ale już na podstronie wpisu, oraz po wybraniu wpisu losowego, najnowszego już nie.

Mam pytanie czy jest możliwość aby była to wina skryptu, bo teoretycznie powinno działać na wszystkich podstronach?

A z tego co zauważyłem to zabardzo ten skrypt to dopracowany to nie jest.

index

<div id="left">
		 <img src="images/gora_l.png" class="gora_l">
		 <img src="images/gora_p.png" class="gora_p">
		 <img src="images/dol_l.png" class="dol_l">
		 <img src="images/dol_p.png" class="dol_p">
<?php include $przelacz; ?>
</div>

Css

.gora_l {
		 position: absolute;
		 top: 0;
		 left: 0
}
.gora_p {
		 position: absolute;
		 top: 0;
		 right: 0
}
.dol_l {
		 position: absolute;
		 bottom: 0;
		 left: 0
}
.dol_p {
		 position: absolute;
		 bottom: 0;
		 right: 0
}

Cordor · 23 Maja 2013

Ścieżka dostępu jest nieprawidłowa i nie wyświetlają się te zaokrąglenia.

A poza tym, nie myślałeś o użyciu:

#left {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

Jak nie ogarniasz co i jak to polecam: https://border-radius.com/

First place · 23 Maja 2013

Witam ponownie, spróbuje podanym sposobem.

Ale za bardzo nie rozumie jak na stronie głównej ściężka jest ok a na podstronie wpisu już nie (przecież te same pliki szablonu)

Cordor · 23 Maja 2013

/../images/gora_l.png - to oczywiście ścieżka dla podstrony.

To jest właściwa ścieżka. Ale ja bym to zrobił w CSS tak jak podałem na górze.

A jak koniecznie chcesz z obrazka, to możesz to zrobić nie jako img, tylko jako background-image. Ale tak jak napisałem, przy pomocy CSS jest najłatwiej, tylko IE może mieć z tym problem ale mnie to zwykle mało interesuje

First place · 23 Maja 2013

Już przetestowałem działa na wszystkich podstronach, i dużo wygodniejsze żadnych obrazków i mniej kodu:)

Jeszcze raz dzięki

First place · 25 Maja 2013

Witam powoli do przodu z szablonem ale napotkałem problem i potrzebował bym podpowiedzi.

Katalog jest już aktywny i można dodawać wpisy Don Mini v2 Szablon może nie arcydzieło ale mnie sie podoba no i mój pierwszy

Chodzi o ułożenie wpisów na stronie głównej nadanie obramowania, zmiany ich wielkości itd...

Pytanie pewnie dla niektórych banalne, ale na php praktycznie się nie znam

Czy darady to wszystko zrobić w indeksie czy trzeba grzebać w pliku odpowiedzialnym za wyświetlanie wpisów?

W indeksie mam tylko tyle

 <div id="left">
 <?php include $przelacz; ?>
 </div>

Na Php to za bardzo się nie znam, ale ta komenda na pewno odsyła do pliku

Z tym kodem

<?php
echo "<h3>Strony w naszym katalogu:</h3>";
if (!isset($_GET[$konfig[19]])) {
$tabs = cache::factory() -> load('start');
}

if( ! $tabs && !isset($_GET[$konfig[19]]) )
{
$tabs = '';
// by default we show first page
$pageNum = 1;
// if $_GET[$konfig[19]] defined, use it as page number
if(isset($_GET[$konfig[19]]))
{
$pageNum = $_GET[$konfig[19]];
}
// counting the offset
$offset = ($pageNum - 1) * $rowsPerPage;
$kiki = $offset+$rowsPerPage;
$title = '';
$query = "select * from Strony order by Id desc limit $offset, $rowsPerPage";
$result = sqlite_query($dbhandle, $query);
if (!$result) die("Cannot execute query 1.");
// print the random numbers
while ($row = sqlite_fetch_array($result, SQLITE_ASSOC)) {
$urlimg = str_replace('https://','' ,$row['url']);
$tit = zntitle($row['title']);
//echo "<a href=?mode=page&t=".$tit."&id=".$row['Id'].">".$row['title']."</a>";
$tabs .= linkdowpisu($konfig[11],$konfig[0],$konfig[13],$konfig[16],$konfig[14],$tit,$konfig[15],$row['Id'],$row['title']);
$tabs .= "<br>";
$tabs .= "<div style=\"min-height:90px;\">";
if ($konfig[23] == '1') {
$tabs .= "<img width=80 style=\"float:left;\" src=https://open.thumbshots.org/image.pxf?url=$urlimg/>";
}
if ($konfig[23] == '2') {
$tabs .= "<img width=80 style=\"float:left;\" src=https://pagepeeker.com/t/s/$urlimg>";
}
$tabs .= substr($row['desc'],0,$konfig[21])."(...)";
$tabs .= "<br>";
$tabs .= "Tagi: <small>".tagi($row['tags'],$konfig[11],$konfig[0],$konfig[17],$konfig[13])."</small>";
$tabs .= "<br>";
$tabs .= "Adres: <b>".$row['url']."</b>";
$tabs .= "</div>";
}
// how many rows we have in database
$query = "SELECT COUNT(Id) AS numrows FROM Strony";
$result = sqlite_query($dbhandle, $query);
$row = sqlite_fetch_array($result, SQLITE_ASSOC);
$numrows = $row['numrows'];
// how many pages we have when using paging?
$maxPage = ceil($numrows/$rowsPerPage);
// print the link to access each page
$self = $_SERVER['PHP_SELF'];
$nav = '';
for($page = 1; $page <= $maxPage; $page++)
{
if ($page == $pageNum)
{
 $nav .= " $page "; // no need to create a link to current page
}
else
{ //
 $nav .= startpagin($konfig[11],$konfig[0],$konfig[19],$page);
}
}

if ($pageNum > 1)
{
$page = $pageNum - 1;
$prev = startpaginprev($konfig[11],$konfig[0],$konfig[19],$page,'[Wstecz]');
$first = " <a href=".$konfig[0].">[Pierwsza]</a> ";
}
else
{
$prev = ' '; // we're on page one, don't print previous link
$first = ' '; // nor the first page link
}
if ($pageNum < $maxPage)
{
$page = $pageNum + 1;
$next = startpaginprev($konfig[11],$konfig[0],$konfig[19],$page,'[Dalej]');
$last = startpaginprev($konfig[11],$konfig[0],$konfig[19],$maxPage,'[Ostatnia]');
}
else
{
$next = ' '; // we're on the last page, don't print next link
$last = ' '; // nor the last page link
}
// print the navigation link
$tabs .= $first . $prev . $nav . $next . $last;

cache::factory() -> save( 'start', $tabs, 3600);
}
if( !$tabs )
{
////BEZ CACHE
$tabs = '';
// by default we show first page
$pageNum = 1;
// if $_GET[$konfig[19]] defined, use it as page number
if(isset($_GET[$konfig[19]]))
{
$pageNum = $_GET[$konfig[19]];
}
// counting the offset
$offset = ($pageNum - 1) * $rowsPerPage;
$kiki = $offset+$rowsPerPage;
$title = '';
$query = "select * from Strony order by Id desc limit $offset, $rowsPerPage";
$result = sqlite_query($dbhandle, $query);
if (!$result) die("Cannot execute query.");
// print the random numbers
while ($row = sqlite_fetch_array($result, SQLITE_ASSOC)) {
$urlimg = str_replace('https://','' ,$row['url']);
$tit = zntitle($row['title']);
//echo "<a href=?mode=page&t=".$tit."&id=".$row['Id'].">".$row['title']."</a>";
$tabs .= linkdowpisu($konfig[11],$konfig[0],$konfig[13],$konfig[16],$konfig[14],$tit,$konfig[15],$row['Id'],$row['title']);
$tabs .= "<br>";
$tabs .= "<div style=\"min-height:90px;\">";
if ($konfig[23] == '1') {
$tabs .= "<img width=80 style=\"float:left;\" src=https://open.thumbshots.org/image.pxf?url=$urlimg/>";
}
if ($konfig[23] == '2') {
$tabs .= "<img width=80 style=\"float:left;\" src=https://pagepeeker.com/t/s/$urlimg>";
}
$tabs .= substr($row['desc'],0,$konfig[21])."(...)";
$tabs .= "<br>";
$tabs .= "Tagi: <small>".tagi($row['tags'],$konfig[11],$konfig[0],$konfig[17],$konfig[13])."</small>";
$tabs .= "<br>";
$tabs .= "Adres: <b>".$row['url']."</b>";
$tabs .= "</div>";
}
// how many rows we have in database
$query = "SELECT COUNT(Id) AS numrows FROM Strony";
$result = sqlite_query($dbhandle, $query);
$row = sqlite_fetch_array($result, SQLITE_ASSOC);
$numrows = $row['numrows'];
// how many pages we have when using paging?
$maxPage = ceil($numrows/$rowsPerPage);
// print the link to access each page
$self = $_SERVER['PHP_SELF'];
$nav = '';
for($page = 1; $page <= $maxPage; $page++)
{
if ($page == $pageNum)
{
 $nav .= " $page "; // no need to create a link to current page
}
else
{
 $nav .= startpagin($konfig[11],$konfig[0],$konfig[19],$page);
}
}

if ($pageNum > 1)
{
$page = $pageNum - 1;
 $prev = startpaginprev($konfig[11],$konfig[0],$konfig[19],$page,'[Wstecz]');
$first = " <a href=".$konfig[0].">[Pierwsza]</a> ";
}
else
{
$prev = ' '; // we're on page one, don't print previous link
$first = ' '; // nor the first page link
}
if ($pageNum < $maxPage)
{
$page = $pageNum + 1;
$next = startpaginprev($konfig[11],$konfig[0],$konfig[19],$page,'[Dalej]');
$last = startpaginprev($konfig[11],$konfig[0],$konfig[19],$maxPage,'[Ostatnia]');
}
else
{
$next = ' '; // we're on the last page, don't print next link
$last = ' '; // nor the last page link
}
// print the navigation link
$tabs .= $first . $prev . $nav . $next . $last;
/////K BEZ CACHE


}

echo $tabs;
$tabs = '';

?>

Zaloguj się

2 divy obok siebie

Rekomendowane odpowiedzi

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Zarchiwizowany

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

Polecamy

Współpracują z nami

Powiadomienie o plikach cookie