Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Float i border
Fafu
post
Post #1





Grupa: Zarejestrowani
Postów: 243
Pomógł: 33
Dołączył: 30.01.2008
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

Witam, mam taki kod:
[HTML] pobierz, plaintext 
  1. <div id="wrap">
  2.  
  3. 	<div id="menu">
  4. 		<h2>Menu</h2>
  5. 		<ul>
  6. <li><a href="index.html">Strona główna</a></li>
  7. <li><a href="omnie.html">O mnie</a></li>
  8. <li><a href="kontakt.html">Kontakt</a></li>
  9. </ul>
  10. 	</div>
  11.  
  12. 	<div id="content">strona glowna</div>
  13.  
  14. 	<div class="clear"></div>
  15. </div>
[HTML] pobierz, plaintext


i css:
Kod
#wrap {
    width: 800px;
    margin: 0 auto;
    border: 1px dashed black;
    text-align: left;
}

#menu {
    width: 120px;
    float: left;
    padding: 10px;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#content {
    width: 630px;
    float: right;
    padding: 10px;
    border-left: 1px dashed black;
}

.clear {
    clear: both;
}


I teraz o co chodzi: mam problem z border-right dla #content. Jeśli tekst jest dłuższy niż menu to wszystko ładnie wygląda:
(IMG:http://i30.tinypic.com/4gkeaf.jpg)
ale jeśli jest krótszy to obramowanie się ucina:
(IMG:http://i27.tinypic.com/2cej5ee.jpg)

Da się coś z tym zrobić?
Go to the top of the page
+Quote Post
Crozin
post
Post #2





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

Ostrzeżenie: (0%)
-----

Normalnie byś to zrobił przez display: table[-row|-cell], ale że jest IE to... faux columns.
Go to the top of the page
+Quote Post
muniekw
post
Post #3





Grupa: Zarejestrowani
Postów: 243
Pomógł: 22
Dołączył: 1.06.2009
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

A wstaw takie style:
Kod
#wrap {
    width: 800px;
    margin: 0 auto;
    border: 1px dashed black;
    text-align: left;
}

#menu {
    width: 120px;
    float: left;
    padding: 10px;
     border-right: 1px dashed black;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#content {
    width: 630px;
    float: right;
    padding: 10px;
  
}

.clear {
    clear: both;
}
Go to the top of the page
+Quote Post
Fafu
post
Post #4





Grupa: Zarejestrowani
Postów: 243
Pomógł: 33
Dołączył: 30.01.2008
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

Przecież danie border right na #menu nic nie da...

A Faux columns to niebardzo bo tu jest border a nie tlo obrazkowe.
Go to the top of the page
+Quote Post
muniekw
post
Post #5





Grupa: Zarejestrowani
Postów: 243
Pomógł: 22
Dołączył: 1.06.2009
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

A sprawdzałeś... (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) Ja testowałem na IE i mi działało (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

EDIT: Pod Operą i FF też działa

Ten post edytował muniekw 27.07.2009, 20:48:11
Go to the top of the page
+Quote Post
Fafu
post
Post #6





Grupa: Zarejestrowani
Postów: 243
Pomógł: 33
Dołączył: 30.01.2008
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

Działa dla przykładu powyżej, ale jak #content jest dłuższy od #menu to nie.

EDIT: Dobra znalazłem rozwiązanie (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
http://www.ejeliot.com/blog/61
czyli:
Kod
margin-bottom: -2000px; padding-bottom: 2000px;


A co do @down to jak dla mnie za dużo kodu na taką drobnostkę (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Ten post edytował Fafu 27.07.2009, 22:27:11
Go to the top of the page
+Quote Post
wookieb
post
Post #7





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.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" />

<title>Galeria</title>
<style type="text/css">
#wrap {
width: 800px;
margin: 0 auto;
border: 1px dashed black;
text-align: left;
display: table;
}

#menu {
width: 120px;
display: table-cell;
padding: 10px;
vertical-align: top;
border-right: 1px dashed black;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#content {
width: 630px;
display: table-cell;
vertical-align: top;
padding: 10px;

}

.clear {
clear: both;
}
</style>

<!--[if lte IE 7]>
<style type="text/css">
#content, #menu {
float: left;
display: block;
}
</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">
#menu {
-iexp: expression(
this.parse ? 0 : (
this.style.height = this.offsetHeight + 'px',
this.parse = 1
),
helper = (this.style.height < this.parentNode.offsetHeight) ? 0 : (
this.style.height = this.nextSibling.offsetHeight
)
);
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#menu {
-iexp: expression(
this.parse ? 0 : (
this.style.minHeight = this.offsetHeight + 'px',
this.parse = 1
),
helper = (this.offsetHeight < this.nextSibling.offsetHeight) ? (
this.style.minHeight = this.parentNode.offsetHeight
) : (
this.style.minHeight = this.nextSibling.offsetHeight
)
);
}
</style>
<![endif]-->

</head>
<body>
<div id="wrap">

<div id="menu">
<h2>Menu</h2>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="omnie.html">O mnie</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>

<div id="content">strona glowna<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>

<div class="clear"></div>
</div>
</body>
</html>


http://perfectionorvanity.com/2007/03/07/r...ny-layoutu-css/
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 17.09.2025 - 17:55
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn