Miért csinálja ezt? Hol a hiba? (HTML+CSS statikus weblap)
A lapon van egy oldal osztályú div, amibe van az egész oldal, azon belül egy oldalsav menünek meg egy tartalom.
A problémám ezzel az, hogy miért húzza be a tartalom szövegét akkor, ha van oldalsav és rendesen működik, ha már nincs mellette. (Ez így megfogalmazva nem biztos, hogy érthető, itt van a kód:
HTML Bodyja
<body>
<div class="oldal">
<div class="fejlec">
<marquee id="fejlecszoveg">
<blink> <h1> Kerülhet bele tartalom! </h1> </blink>
</marquee>
</div>
<div class="oldalsav">
Menü 1 <br />
Menü 2 <br />
Menü 3 <br />
Menu 4 <br />
adsf <br />
</div>
<div class="tartalom">
<h1 >Ide fog kerülni a tartalom </h1>
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
Ide yíadskfjéasjdfélasdfélyksjdélfjdasélfkjydséklf
dséflkasjdféljasdféljasdé jf
</div>
</div>
</body>
/*stilus.css*/
body {
font-family: Arial CE;
font-size: 12pt;
color: blue;
background-color: green;
}
h1 {
font-size: 1.5em;
text-align: center;
}
.oldal {
width: 800px;
height: 100%;
border-style: double;
border-color: black;
border-width: 5px;
background-color: red;
margin: 0 auto 0 auto;
}
.fejlec {
width: 100%;
height: 100px;
background-color: yellow;
border-style: solid;
border-color: green;
text-align: center;
}
#fejlecszoveg{
position: relative;
top: 50%;
}
.oldalsav {
width: 150px;
border-style: solid;
border-width: 5px;
border-color: white;
margin: 10px;
float: left;
overflow: hidden;
}
.tartalom {
width: 600px;
border-style: solid;
border-width: 5px;
border-color: white;
margin: 10px;
position: relative;
left: 165px;
top: 0px;
}
válasza:Ha jól értem a hiba akkor merül fel, ha hiányzik a weboldal egy szerkezeti eleme az oldalsáv (div.oldalsav). Ez a hiba: hiányzik az oldalsav div.
Jótanács: A marque és blink - elavult és szabványtalan - html elemek használatát kerüljük el.
válasza:Nem tudom a pontos okát, de úgy tűnik, hogy az oldalsáv doboz tolja el a szöveget. Ha a tartalom div stílusát megváltoztatod, akkor jól működik:
.tartalom {
width: 600px;
border-style: solid;
border-width: 5px;
border-color: white;
margin: 10px;
float: left;
}
Mondjuk ebben a formában szét fog esni az oldal, mert csökkenteni kell a tartalom div szélességét, hogy elférjen, plusz, az oldalsav, és a tartalom div alá, be kell szúrnod egy ilyet:
<div style="clear: both;"></div>
így menni fog.
Nagyon szépen köszönöm a válaszokat mindkettőtöknek!
Igen, sikerült úgy, ahogy mondtad 2. válaszoló.
1. válaszoló: rendben, tudom, hogy nem szabvány a blink meg a marquee, csak úgy beletettem mégis :D (Tudtam, hogy valakinek szemet fog szúrni :) )
De neked is köszönöm a tanácsot, igyekszem majd nem használni a jövőben!
válasza: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!