fejléc
Gyakori kérdések Belépés Új kérdés Véletlen kérdés
Keresés
Kezdőoldal » Számítástechnika » Weblapkészítés » (html+css) Hogyan tudok 4...

(html+css) Hogyan tudok 4 <div>-et egymás mellé rakni?

Figyelt kérdés

Azt szeretném elérni, hogy középen legyen egy menü, ami négy képből áll. Hogyan tudnám ezt elérni ilyen mintára: http://www.yfci.org/ (szöveges rész nem kell, csak a 4 kép vízszintesen, középen). A másik: hogyan lehet egy pozition:absolute stílusú div-et középre hozni (egyártalán lehet-e)? Eddig így néz ki, de itt elakadtam:

<body>

<center>

<div style="position:absolute">

<div style="top:120; left:0;">

<a href=lap1.html><img src=gif.jpg width="300"></a>

</div>

<div style="top:100; left:300;">

<a href=lap1.html><img src=kep2.jpg width="300"></a>

</div>

<div style="top:80; left:600;">

<a href=lap1.html><img src=kep3.jpg width="300"></a>

</div>

<div style="top:60; left:900;">

<a href=lap1.html><img src=kep4.jpg width="300"></a>

</div>

</div>

</center>

</body>



#HTML #CSS #div
2015. ápr. 2. 11:15
 1/9 anonim ***** válasza:

position:absolute;

oda amit így szeretnél elhyelzni.

Amúgy lehet még float: left; is.


De jobb klikk a minta oldalra, és megnézed hogy ők hogyan oldották meg.

(ezzel mindig sokat tanulhatsz)

2015. ápr. 2. 11:29
Hasznos számodra ez a válasz?
 2/9 A kérdező kommentje:
De ők JS-ben oldották meg :( amúgy nem kérdeztem volna
2015. ápr. 2. 11:56
 3/9 A kérdező kommentje:
És nekem kizárólag html és css kellene
2015. ápr. 2. 11:57
 4/9 SimkoL ***** válasza:
Így gondolod? [link]
2015. ápr. 2. 12:09
Hasznos számodra ez a válasz?
 5/9 A kérdező kommentje:
Nagyjából, csak úgy kellene nekem, hogy amikor méretezzük az ablakot, akkor nem ugrik össze, hanem inkább túlnyúlik az ablakon, mint amit mintának írtam.
2015. ápr. 2. 12:41
 6/9 SimkoL ***** válasza:
Most ?
2015. ápr. 2. 12:52
Hasznos számodra ez a válasz?
 7/9 A kérdező kommentje:
Alakul :D már csak azt kéne megoldani, hogy amíg lehet, középen maradjon a fő<div>
2015. ápr. 2. 13:01
 8/9 A kérdező kommentje:

Sikerült! Köszi SimkoL! Egy kis átalakítással meglett. Így gondoltam:


<center>

<div style=" position:relative; top:50px; width: 800px; float: center; background-color: #ffff00; margin: auto;"> fő

<div style="position: absolute; top:120px; float: left; width: 25%; left:0%; background-color: #ffffaa;"> első

<a href="lap1.html"><img src="kep1.jpg" width="100%"></a>

</div>

<div style="position: absolute; top:100px; float: left; width: 25%; left:25%; background-color: #ffaaaa;"> második

<a href="lap2.html"><img src="kep2.jpg" width="100%"></a>

</div>

<div style="position: absolute; top:80px; float: left; width: 25%; left:50%; background-color: #aaaaaa;"> harmadik

<a href="lap3.html"><img src="kep3.jpg" width="100%"></a>

</div>

<div style="position: absolute; top:60px; float: left; width: 25%; left:75%; background-color: #00aaaa;"> negyedik

<a href="lap4.html"><img src="kep4.jpg" width="100%"></a>

</div>

</div>

</center>

2015. ápr. 2. 13:10
 9/9 SimkoL ***** válasza:
Látod megy ez neked is :) közben én is beleszúrtam a hiányzó dolgokat.
2015. ápr. 2. 13:25
Hasznos számodra ez a válasz?

Kapcsolódó kérdések:

Számítástechnika főkategória kérdései »
Számítástechnika - Weblapkészítés kategória kérdései »



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

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!