ugrás a tartalomhoz

Archívum - Okt 15, 2011

Vertikális és horizontális pozícionálás gombokra

Jazoja · 2011. Okt. 15. (Szo), 17.27
Egy változó magasságú elemen belül (td), 4 gombot szeretnék elhelyezni a következő módon:
- egy alul középen
- egy fent középen
- egy jobb szélen középen
- egy bal szélen középen

Táblázattal már sikerült összehozni a kívánt eredményt, FF alatt működik, Chrome és Opera alatt viszont nem.
CSS vertical-align és társairól elolvastam amit találtam, de sokkal előrébb nem jutottam.

Gondoltam megkérdezem tud-e valaki rá egyszerű megoldást (vagy akármilyent), mielőtt feladom...
 

Középre igazítás CSS-sel (megoldva)

morocztamas · 2011. Okt. 15. (Szo), 15.53
Hogyan tudnám az oldalamon függőlegesen is középre igazítani a tartalmat?

/**********/

A megoldás Semmunak köszönhetően:
   1.
      div#valami
   2.
      {
   3.
          position: abolsute;
   4.
          top: 50%;
   5.
          height: 150px;
   6.
          margin-top: -75px; // a magasság fele
   7.
      }
Annyit még hozzáteszek, hogy a vízszintesen való függőleges igazítást is így kell megoldani, mert ebben az esetben a margin:auto; nem fog a vártnak megfelelően működni.
 

Ask MDN (AskMDN) on Twitter

Endyl · 2011. Okt. 15. (Szo), 15.23
Változatos témákban péntekenkénti kérdezz-felelek szakemberekkel a Twitteren a Mozilla szervezésében
 

Törvénytelen adatgyűjtés miatt perelik a Facebookot

Hidvégi Gábor · 2011. Okt. 15. (Szo), 15.22
Már a második csoportos per indul a közösségi oldal ellen az Egyesült Államokban illegális követés miatt
 

A schema.org csatlakozik a W3C-hez

Hidvégi Gábor · 2011. Okt. 15. (Szo), 15.21
A webes szabványszervezet felkarolta a kezdeményezést
 

A Google szerint szánalmas koppintás és totális bukás a Google+

Hidvégi Gábor · 2011. Okt. 15. (Szo), 15.21
Saját alkalmazottja kritizálja a cég legfrissebb szolgáltatását
 

WebGL-re vált a Google Maps

Hidvégi Gábor · 2011. Okt. 15. (Szo), 15.20
Komplexebb grafikai megoldásokat tesz lehetővé az új technológia
 

Gyorsabb és biztonságosabb futást ígér a PHP nyelv "rebootja"

Hidvégi Gábor · 2011. Okt. 15. (Szo), 15.19
A PHP-Reboot egy Java virtuális gépre forduló, illetve azon futó elképzelés
 

Dart : Structured web programming

Greg · 2011. Okt. 15. (Szo), 15.18
Új programnyelv a Google-től
 

CSS dropdown menu hover elemének pozicionálása

idahoo · 2011. Okt. 15. (Szo), 14.54
Sziasztok!

Szeretnék tanácsot kérni a következő problémámmal kapcsolatban;
Szeretnék lekódolni egy horizontális legördülő menüt, aminek a hover része a weblap beállított szélességéhez igazodna. A weblap 960px széles lenne, így a navigáció legördülő divíziójának is ezt a méretet szeretném megadni, ami sikerült; Viszont a pozicionálással gondban vagyok.

Mikor ráviszem az egeret a kívánt felületre, akkor legördül a felület, viszont a második elem ("second") már nem az oldal bal szélétől indul, így, ha be lesz rakva az oldalba, valószínűnek tartom, hogy az kimozdul, vagy eltolja az arculatot. El szeretném érni, hogy ha bármelyik elemre is viszem rá az egeret, akkor a legördülő divíziónak a kezdő pozíciója az oldal bal széle legyen, mint az első elemnél ("Explorer"). Így a weblap 960px széles layoutjának szélességéhez igazodna a legördülő elem, aminek ott is kellene maradnia -mármint az oldal keretén belül-, míg az elem használatban van.

A beillesztett példa jól szemlélteti, hogy mi is igazából a problémám. A design nem véletlenül nincs még berakva, hiszen ez még csak a GUI terve.

Tudom, hogy én hagytam ki, vagy írtam félre valamit, csak azt nem tudom, hogy mit.
Kérhetek ez ügyben valami kézenfekvő tanácsot?

Előre is köszönöm a segítséget!
Üdv!

html:
[code]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="explorer.css" rel="stylesheet" type="text/css" />
</head>
<body>


<!-- Az eplorer tesztelése és fejlesztése -->
<nav><!-- mainnav -->
<div id="explorer"><!-- upnavigation -->
<!-- S: Explorer DIR -->
<ul class="dir">


<li><a href="#"><div class="dirtitle">Explorer</div><div class="diralt">Ez a DIR class ALT szövege</div></a>
<ul>
<li>
<div class="navdrop"><!-- S: navdrop -->
<p>Ebben egy szöveg van.</p>