CSS oldalszerkezet

Speeder_ · 2005. Aug. 1. (H), 13.44

Hello,

Már egy ideje próbálkozok vele, de sehogy sem sikerül összehozni. Leírom, hogy pontosan mit szeretnék megcsinálni.

<div class="contain">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>

A .contain-nek 90% széles és 100% magasnak, a .header-nek 100% széles (a .contain 100%, vagyis az egész oldal 90%) és 100px magasnak, a .menu-nek 20% szélesnek és automatikusan növekvő magasságának, a .content-nek 80% szélesnek és automatikusan növekvő magasságának, a .footer-nek 100% szélesnek és 75px magasnak kell lennie.
Ez így még nagyjából menne is, de vannak még itt gondok. Úgy szeretném megcsinálni, hogy FireFox-ban, IE-ben is működjön. Mindegyik elemnek (kiv. contain) mindenhol 2px padding kell. A .menu-nek és a .content-nek egy sorban kell lennie. Ha a .menu magasabb, mint a .content, akkor se legyen fehér rész a .content alatt, hanem automatikusan nőjjön az is, ugyanez fordítva is igaz legyen, tehát ha több oldal a tartalom, akkor a menü menjen keresztül több oldalon még akkor is, ha csak egy sor van benne.

Nem tudom, hogy mennyi fogalmaztam érthetően. Remélem mindenki érti :)

■

HTML, CSS, JavaScript, Ajax

csirip

Re

attlad · 2005. Aug. 1. (H), 14.33

2px padding-gal IE 6 előtti verzióknál lehet eltérés erre CSS hacket kéne alkalmaznod, IE 6 már jól kezeli ha strict DOCTYPE-ot adsz meg, pl. HTML 4.01 Strict. A többi szerintem mind a két böngészőben kb. ugyanúgy működik.

Az egyenlő hosszú dobozokra itt a megoldás:
http://weblabor.hu/forumok/temak/8459

Update:
Százalékos megadás miatt lehet, hogy egyszerűbb, ha nem adsz meg padding-ot, hanem a contentben lévő elemek kapnak majd margin-t vagy padding-ot:

<style type="text/css">
#content h1, #content p {
margin: 0 2px;
}
</style>
<div id="content">
<h1>Cím</h1>
<p>Ez itt egy szöveg</p>
</div>


<style type="text/css">
#content h1, #content p {
    margin: 0 2px;
}
</style>

<div id="content">
    <h1>Cím</h1>
    <p>Ez itt egy szöveg</p>
</div>

Attila

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Hát nekem nem sikerült.

Speeder_ · 2005. Aug. 1. (H), 17.08

Hát nekem nem sikerült. Amit adtál linket, ott megnéztem. Itt a kód. És továbbra se jó. Se ie-be, se ff-be.
<html>
<head>
<style>
.tartalmazo {
background: red url(mindketto.png) repeat-y left top;
width: 400px;
}
.baldoboz {
background-color: yellow;
width: 200px;
float: left;
}
.jobbdoboz {
background-color: blue;
width: 200px;
float: right;
}
.lezaro {
height: 0;
clear: both;
}
</style>
</head>
<body>
<div class="tartalmazo">
<p class="baldoboz">Azt szeretném elérni,
hogy a jobb oldalon látható kék boboz,
ugyanezt a méretet vegye fel,
(mint ez a sárga doboz).</p>
<p class="jobbdoboz">Jobb oldali kék doboz.</p>
<p class="lezaro"></p>
</div>
</body>
</html>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Milyen képet használsz?

kgyt · 2005. Aug. 1. (H), 17.21

A háttérkép legyen félig sárga, félig kék!

--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Csak statikus szélességnél

Speeder_ · 2005. Aug. 1. (H), 17.28

Ez a megoldás csak akkor jó, ha a .tartalmazo div szélessége állandó lenne. De én azt úgy akarom beállítani, hogy mindig az oldal 90%-a legyen.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Link

attlad · 2005. Aug. 1. (H), 18.12

http://wellstyled.com/files/css-2col-fluid-layout/example3.html ez esetleg?

Attila

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Udv! Ajanlom neked is

noocx · 2005. Aug. 1. (H), 19.13

Üdv!

Itt is érdemes lehet körülnézned:
http://webhost.bridgew.edu/etribou/layouts/skidoo/

</noocx>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Felül azt írtad

kgyt · 2005. Aug. 1. (H), 21.21

Fent 400px széles tartalmazó cuccot mutattál.
Akkor dolgozzuk át, hogy menjen...

<...>
<body>
<div class="container">
<div class="container2">
<p class="leftbox">Azt szeretném elérni,
hogy a jobb oldalon látható kék boboz,
ugyanezt a méretet vegye fel,
(mint ez a sárga doboz).</p>
<p class="rightbox">Jobb oldali kék doboz.</p>
<p class="closer"></p>
</div>
</div>
</body>
</html>


<...>
<body>
  <div class="container">
    <div class="container2">
      <p class="leftbox">Azt szeretném elérni,
         hogy a jobb oldalon látható kék boboz,
         ugyanezt a méretet vegye fel,
         (mint ez a sárga doboz).</p>
      <p class="rightbox">Jobb oldali kék doboz.</p>
      <p class="closer"></p>
    </div>
  </div>
</body>
</html>

.container {
/* Ennek a háttere egy 200px széles sárga csík */
/* lehet 1px magas is... */
background: transparent url(yellow.png) repeat-y left top;
width: 90%;
}
.container2 {
/* Ennek a háttere egy 200px széles kék csík */
/* lehet 1px magas is... */
background: transparent url(blue.png) repeat-y right top;
width: 100%;
}
.leftbox {
background-color: yellow;
color: black;
width: 200px;
float: left;
}
.rightbox {
background-color: blue;
color: black;
width: 200px;
float: right;
}
.closer {
height: 0;
clear: both;
}


.container {
  /* Ennek a háttere egy 200px széles sárga csík */
  /* lehet 1px magas is...                       */
  background: transparent url(yellow.png) repeat-y left top;
  width: 90%;
}
.container2 {
  /* Ennek a háttere egy 200px széles kék csík   */
  /* lehet 1px magas is...                       */
  background: transparent url(blue.png) repeat-y right top;
  width: 100%;
}
.leftbox {
  background-color: yellow;
  color: black;
  width: 200px;
  float: left;
}
.rightbox {
  background-color: blue;
  color: black;
  width: 200px;
  float: right;
}
.closer {
  height: 0;
  clear: both;
}

--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Sikerült

Speeder_ · 2005. Aug. 1. (H), 19.54

Köszi a segítséget.
Amit attlad adott linket, ott megnéztem és az alapján sikerült megcsinálni.
noocx: Azt a linket is megnéztem, amit te adtál, egyenlőre még csak belepillantottam, de tetszik, úgyhogy el van mentve :) majd valamikor megnézem a napokban

A hozzászóláshoz regisztráció és belépés szükséges
új téma

PHP-vel együtt már nem jó

Speeder_ · 2005. Aug. 2. (K), 15.48

Az oldal itt van http://another.atw.hu/new/.
A teljes php itt van:

<?php
include "define.php"; // A MAILADDRESS van benne
/* Start XHTML */
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN" "DTD/xhtml1-strict.dtd">';
echo '<html><head><title>Demó belépőrendszer</title>';
echo '<link href="style.css" type="text/css" rel="stylesheet" />';
echo '</head>';
/* Start Body */
echo '<body>';
echo '<div class="header">Demó belépőrendszer</div>';
echo '<div class="contain">';
echo '<div class="menu">';
echo '<div class="menu-contain">';
echo 'Ez itt egy akkora szöveg, ami már nem fér el egy sorban.';
echo '</div></div>';
echo '<div class="content">';
echo '<div class="content-contain">';
echo 'Content';
echo '</div></div>';
echo '<div class="cleaner"></div>';
echo '</div><div class="footer">'.MAILADDRESS.'</div>';
/* End Body, XHTML */
echo '</body></html>';
?>


<?php
	include "define.php"; // A MAILADDRESS van benne

	/* Start XHTML */
	echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN" "DTD/xhtml1-strict.dtd">';
	echo '<html><head><title>Demó belépőrendszer</title>';
	echo '<link href="style.css" type="text/css" rel="stylesheet" />';
	echo '</head>';
	
	/* Start Body */
	echo '<body>';
		echo '<div class="header">Demó belépőrendszer</div>';
			echo '<div class="contain">';
				echo '<div class="menu">';
					echo '<div class="menu-contain">';
						echo 'Ez itt egy akkora szöveg, ami már nem fér el egy sorban.';
					echo '</div></div>';
				echo '<div class="content">';
					echo '<div class="content-contain">';
						echo 'Content';
					echo '</div></div>';
				echo '<div class="cleaner"></div>';
		echo '</div><div class="footer">'.MAILADDRESS.'</div>';
	
	/* End Body, XHTML */ 
	echo '</body></html>';
?>

Egyébként ha a hosszabb szöveg helyére azt írom be, hogy Menu, akkor rendesen működik. Sőt akkor is működik, ha nem PHP-vel generálom az oldalt, hanem csak simán a html-t írom be.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

HR != DIV

attlad · 2005. Aug. 2. (K), 16.07

Nincs HR elemed, hanem DIV elemed van és ilyen kiválasztót használsz a CSS-ben: hr.cleaner, div.cleaner kéne.

Attila

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Megint sikerült :)

Speeder_ · 2005. Aug. 2. (K), 17.59

Köszi így jó lett.
Azért cseréltem ki a hr elemet div-re, mert amikor hr volt, akkor az ie-ben alul nagyobb hely volt mint a firefox-ban.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés