Most kezdtem HTML-t írni valaki segítene?
Egy félkész menüm van amin a menük elcsúsznak Firefox 10-ben és Google Chromeban. Probáltam Internet Explorer 9-ben és Firefox 3.6-ban ott tökéletesen működnek.
A fájlokat elküldöm e-mailben, aki tudja a megoldást.
Drone007 lehet egy kérdésem?
Kivettem az ul-t ahogy tanácsoltad(tegezhetlek?) most nem lógnak le a menüpontok, de csak ha ráviszem az egeret akkor változik teljes méretűvé. A jobb illetve bal hasábot és a lábjegyzetet ti használjátok? Amit elhibáztam kijavítva leírnád?
HTML
--------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>css menü</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="style1.css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu">
<li><a href="">Hírek<a/></li>
<li><a href="">Fegyverek<a/></li>
<li><a href="">Ribbonok<a/></li>
<li><a href="">Kapcsolat<a/></li>
</div>
<div class="clear"></div>
<div class="clear"></div>
</div>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus odio, tempor quis posuere eget, vehicula eu arcu. Morbi at turpis eget mauris eleifend facilisis. Quisque sagittis posuere rutrum. In fringilla gravida libero, eget pharetra ligula elementum in. Suspendisse molestie libero eget mi ultricies suscipit non sodales urna. Mauris ac erat dignissim ligula auctor condimentum sit amet id augue. Sed mattis imperdiet neque ac iaculis. Pellentesque sodales eleifend lacus. Pellentesque luctus diam quis tortor convallis posuere. Proin gravida, mauris ac laoreet molestie, tellus arcu fringilla arcu, in bibendum tortor lectus eget tortor. Cras orci nisi, suscipit ut mattis vitae, consequat in leo.</p>
<img src="pics/ccd.PNG" align="left" width="200" height="80" VSPACE="650" HSPACE="300"/>
</body>
</html>
CSS
--------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>css menü</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="style1.css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu">
<li><a href="">Hírek<a/></li>
<li><a href="">Fegyverek<a/></li>
<li><a href="">Ribbonok<a/></li>
<li><a href="">Kapcsolat<a/></li>
</div>
<div class="clear"></div>
<div class="clear"></div>
</div>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus odio, tempor quis posuere eget, vehicula eu arcu. Morbi at turpis eget mauris eleifend facilisis. Quisque sagittis posuere rutrum. In fringilla gravida libero, eget pharetra ligula elementum in. Suspendisse molestie libero eget mi ultricies suscipit non sodales urna. Mauris ac erat dignissim ligula auctor condimentum sit amet id augue. Sed mattis imperdiet neque ac iaculis. Pellentesque sodales eleifend lacus. Pellentesque luctus diam quis tortor convallis posuere. Proin gravida, mauris ac laoreet molestie, tellus arcu fringilla arcu, in bibendum tortor lectus eget tortor. Cras orci nisi, suscipit ut mattis vitae, consequat in leo.</p>
<img src="pics/ccd.PNG" align="left" width="200" height="80" VSPACE="650" HSPACE="300"/>
</body>
</html>
Ugyanazt írtam véletlen na de itt a CSS
---------------------------------------------------------
body {
margin: 0 auto;
background: #fff;
font-family: arial,verdana,sand-serif;
font-size: 12px;
background: white;
text-align: center;
}
a {
text-decoration: none;
}
div.clear{
clear: both;
}
div#container {
width: 800px;
margin: 0px auto;
}
div#header {
text-align: center;
width: 800px;
height:100px;
background: url('pics/bg_header.png');
}
div#menu {
width: 800px;
height: 40px;
background: url('pics/bg_menu.png')
}
div#menu li{
float: left;
list-style: none;
}
div#menu li a {
color: #FF00;
font-weight: bold;
padding:0;
display: block;
}
div#menu li:hover {
background:red;
display: block;
padding:12px 50px 12px 50px;
}
div#left_column {
width: 200px;
float: left;
}
div#right_column {
width: 600px;
float: left;
}
div#footer {
width: 800px;
válasza:Én úgy értettem, hogy a teljes unordered list tipust hagyd el, és div konténerekbe tedd a menüt. Tehát valahogy így:
<div id="menu">
<div id="menupont"><a href="">Hírek<a/></div>
<div id="menupont"><a href="">Fegyverek<a/></div>
<div id="menupont"><a href="">Ribbonok<a/></div>
<div id="menupont"><a href="">Kapcsolat<a/></div>
</div>
A "menupont" div-ek formázása pedig:
div#menupont {
padding: 0px;
margin: 0px;
overflow: hidden;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
}
div#menupont: hover {
background-color: Red;
color: White;
}
Egyébként igen, megnéztem böngészőben, hogy hogyan néz ki a küldött kód, és kicsit kusza :) Pl.: a tartalmakat bele kellene pakolni a megfelelő div-ekbe, amik most clear class-t kaptak, de valójában a right_column és left_column div-ek.
Fog ez menni, csak ügyködj még rajta.
Úgy tűnik ez működik, de közben én is valahogy a paddingel középre igazítottam, de ahogy ránagyítok elcsúsznak a menüpontok. A hover div-ekre nem érvényes?
Mert a notepad nem szinesíti be narancssárgára a hover-t és nem is jelenik meg a böngészőben. Na mindegy már ezzel is sokat segítettél, köszönöm :)
válasza:A hover event sajnos Internet Explorer alatt (8 vagy az alatti verzió) csak a linkek esetén működik, más elemeken az onmouseover/onmouseout eventeket érdemes javascript segítségével manipulálni.
pl:
<div class="menupont0" onmouseover="this.className='menupont1'" onmouseout="this.className='menupont0'">Tartalom</div>
A két class-t pedig a css-ben megfelelő formázással beállítod.
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!