HTML-ben : Hogyan lehet megadni egy szöveg container-beli kiterjedését? Több lent!
http://kepfeltoltes.hu/120220/img_www.kepfeltoltes.hu_.jpg
fenn akadt egy kis probléma :D
css-ben csináltam egy containert, azon belül van a menu, és akartam keretet a szövegnek, ezért csináltam main1 és main2 nevezetü "dobozt" ha a nagyobba beirok valamit a kisseb (oldalsávnak szántam)lejjeb megy, ha viszont a div-eket lezárom a nagyobb alá rakja a kisebbet.
Igy néz ki a forráskód:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AirPhotos.Hu</title>
<link rel="stylesheet" href="style2.css"/>
<Link rel='shortcut icon' href="favicon.ico">
</head>
<div id="container"><a href="index.html"><img
src="file:///C|/Users/Admin/Desktop/htm,l/banner.jpg" width="1028" height="149"></a>
<br>
<ul id="navigation">
<li>Főoldal</li>
<li>Munkák</li>
<li>Webdesign</li>
<li>Video</li>
<li>Zene</li>
<li>Bemutatkozás</li>
<li>Tutorial</li>
<li>Kategóriák</li>
<li>Közösség</li>
<li>Kapcsolat</li>
</ul>
<div class="clear"><marquee align="middle" direction="left" scrollamount="3"="2"><b><font color="#666666">AirPhoto - Photoshop - Webdesign - Video - Music - Blog</font></b></marquee></div>
<div id="main3"<p>d3ddd3</p> <div id="main4">
</div>
</body>
</html>
És a css:
@charset "utf-8";
/* CSS Document */
body {
background: url('bg_body.png') repeat-x #ddd;
font-family: tahoma;
font-size: 11px;
font-weight: bold;
}
div#container {
width: 1028px;
height: 1500px;
margin: 80px auto;
border: 4px solid #0a8d20;
background: #000;
}
div#main {
margin: 0;
width: 1500px;
height: 1500px;
overflow: none;
border: 2px solid #0a8d20;
}
div#main3 {
margin: 3px 3px 0px;
width: 850px;
height: 1250px;
overflow: none;
border: 2px solid #0a8d20;
}
div#main4 {
margin: 0px 860px 0px;
width: 150px;
height: 1250px;
border: 2px solid #0a8d20;
position: close;
}
div#main div {
width: 600px;
height: 400px;
margin-bottom: -400px;
display: none;
}
/* megjeleníti az első blokk tartalmát */
div#main div:first-child {
display: block;
}
ul#navigation {
margin: 2px 5px;
padding: 0;
list-style: none;
}
ul#navigation li {
float: left;
width: 94px;
height: 10px;
text-align: center;
padding: 12px 0;
background: #000;
color: #ccc;
margin-right: 4px;
margin-bottom: 4px;
cursor: pointer;
border: 2px solid #0a8d20;
}
ul#navigation li:last-child {
margin-right: 0;
width: 95px;
}
ul#navigation li:hover {
background: #0a8d20;
}
div.clear { clear: both; }
a nagyobb keret: main3
a kisseb main4
Arra gondoltam esetleg ha valhogy a nagyobb keretben lévő szöveg kiterjedését jobbra megadnám nem menne a kisseb keret fölé és nem tolná le.
Bocsi a hülyeslglrt de még kezdőő vagyok.
Elöre is köszi :D
ITT: <div id="main3"<p>d3ddd3</p> <div id="main4">
</div>
Nincs lezárva a az első div, sőt, maga a div nyitó tag-jének is hinyázik a záró "kacsacsőre".
Magyarul:
<div id="main3">
<p>d3ddd3</p>
</div>
<div id="main4">
</div>
Kicsit jobban belemélyedve vannak még hiányosságok.
div#main3 {
margin: 3px 3px 0px;
width: 850px;
height: 1250px; <-- Egy olyan oldalnak aminek változik a tartalma, és ezzel a szövegmennyiség is, tök fölösleges, sőt, rossz, ha megadunk fix magasságot!!
overflow: none;
border: 2px solid #0a8d20;
KÉNE IDE EGY float: left;
}
div#main4 {
margin: 0px 860px 0px; <-- jobb lenne float: right-al megoldani a pozíciót
width: 150px;
height: 1250px; <-- Ugyanaz mint fent
border: 2px solid #0a8d20;
position: close;
}
Ezt így első ránézésre, de majd kialakul, gyakorlat teszi a mestert :)
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!