- Otthoni hálózat és internet megosztás
- Microsoft Excel topic
- YouTube
- Letartóztatták a bitcoin-Jézust
- A franciáknak elege van abból, hogy minden gyerek mobilozik
- Sokat fogyaszt az AI, egyre több az adatközpont, kell az atomenergia
- Mobilinternet
- Crypto Trade
- Telekom otthoni szolgáltatások (TV, internet, telefon)
- Synology NAS
Új hozzászólás Aktív témák
-
martonx
veterán
-
Dreamweaver7
csendes tag
válasz Forza_JUVE #884 üzenetére
Szia!
Nekem is van még mit tanulnom HTML/CSS terén és a kérdésedre nem tudom igazán a választ. Ha ilyesmi két oszlopos elrendezést szeretnél, amilyet írtál, gondolkodj el az alábbi megoldáson, lehet megfelel neked is.
A HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="Dreamweaver7">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<title>Teszt HTML oldal</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page_container">
<div id="header">
<p>Fejléc</p>
</div>
<div id="middle_section">
<div id="content_right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra mi ac massa euismod in imperdiet metus tempor. Phasellus vestibulum varius dolor vel molestie. Duis rutrum metus non purus varius eget porttitor leo ultricies. In sed odio sed nibh interdum ultricies in id dolor. Donec euismod augue vel lacus luctus blandit.</p>
</div>
<div id="content_left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra mi ac massa euismod in imperdiet metus tempor. Phasellus vestibulum varius dolor vel molestie. Duis rutrum metus non purus varius eget porttitor leo ultricies. In sed odio sed nibh interdum ultricies in id dolor. Donec euismod augue vel lacus luctus blandit. Donec vel felis felis, sed vestibulum nibh. Maecenas mattis tortor in sapien tempus ut sagittis est tincidunt. Duis sed dolor leo, eu dictum tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra mi ac massa euismod in imperdiet metus tempor. Phasellus vestibulum varius dolor vel molestie. Duis rutrum metus non purus varius eget porttitor leo ultricies. In sed odio sed nibh interdum ultricies in id dolor. Donec euismod augue vel lacus luctus blandit. Donec vel felis felis, sed vestibulum nibh. Maecenas mattis tortor in sapien tempus ut sagittis est tincidunt. Duis sed dolor leo, eu dictum tortor.</p>
</div>
<div class="clearer">
</div>
</div>
<div id="footer">
<p>Lábléc</p>
</div>
</div>
</body>
</html>A CSS:
body,div,html,p
{
border: none;
padding:0;
margin:0;
}
.clearer
{
clear:both;
}
#page_container
{
}
#header
{
background-color:#333333;
color:#ffffff;
font-size:40px;
height:100px;
text-align:center;
width:auto;
}
#middle_section
{
background-color:#00ff00;
margin:0 0 0 0;
}
#footer
{
background-color:#666666;
color:#ffffff;
font-size:40px;
height:100px;
text-align:center;
width:auto;
}
#content_left
{
background-color:#009900;
float:none;
margin:0 200px 0 0;
}
#content_right
{
background-color:#00bb00;
float:right;
width:200px;
}Képernyőfotók keskeny és széles ablakkal, így ugyanúgy látszik a viselkedése, mintha valamelyik oszlopba több vagy éppen kevesebb szöveget tennénk:
Az oszlopok viselkedése széles ablaknál
Az oszlopok viselkedése keskeny ablaknál
Én ilyen megoldást tudok rá, de én is még tanulom a HTML/CSS-t.
[ Szerkesztve ]
Új hozzászólás Aktív témák
Állásajánlatok
Cég: Promenade Publishing House Kft.
Város: Budapest
Cég: Ozeki Kft.
Város: Debrecen