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) Elrendezés?

(HTML+CSS) Elrendezés?

Figyelt kérdés

A

[link]

linken látható oldalt szeretnék gyakorlásnak megcsinálni. Mint látható flexboxos megoldással gondoltam kialakítani a középső szürke részt, ami így összeesik látható módon, miután a p és/vagy h1 tagek stílusát kezdem formázni. Hogy tudnám megőrizni a korábbi a felépítést?


HTML:


<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="SELF_ALAPHTML5.css">


</head>

<body>

<h1>Monday Times</h1>



<ul>

<li>News</li>

<li>Sports</li>

<li>Weather</li>

</ul>


<div class="flex-container">


<h2>News Section</h2>


<div class="flex-item">


<h2>News Article</h2>


<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.


Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.


Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p></div>



<div class="flex-item">


<h2>News Article</h2>


<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.


Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.


Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum.</p></div>


</div>



<p>© 2014 Monday Times. All rights reserved.</p>


</body>

</html>



CSS:


h1 { width: 1320px;

height: 150px;

background-color: black;

color:white;

}


li {display:inline;}


.flex-container {

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

width: 1320px;

height: 500px;

background-color: lightgrey;

border:1px solid grey;

}


.flex-item {

background-color: white;

width: 1290px;

height: 200px;

margin: 10px;

border:1px solid grey;

}


p { width: 1320px;

height: 150px;

background-color: darkgrey;

color:white;

}


2016. máj. 15. 12:27
 1/8 anonim ***** válasza:

[link]

Ha nem muszáj ne erőltesd a flexboxot szerintem.

2016. máj. 15. 12:38
Hasznos számodra ez a válasz?
 2/8 anonim ***** válasza:
Szerintem a flexbox jó, jobb mint a floatolás, és a nagyobb frameworkok is átállnak rá. A CSS-ben pontosan tudod mi a baj, a p és h1 formázása, szövegtárolónak vannak kitalálva nem pedig fix méretű elemnek, egyszerű a megoldás, ne kényszerítsd a méretet, helyette tedd egy konténerbe (akár divbe, de van article meg minden), és annak a méretét állítgasd. Nem elfogadott dolog a szövegtárolók méreteit erőltetni.
2016. máj. 15. 12:51
Hasznos számodra ez a válasz?
 3/8 A kérdező kommentje:
Igen tudom, hogy úgy is megleehett volna csinálni, de én még mindig kíváncsi lennék a tapasztaltabbak, hogy oldanák meg a dolgot.
2016. máj. 15. 13:00
 4/8 A kérdező kommentje:
Nos a megoldás már megvan, viszont a lista elemeit vmiért eltolja az oldal szélétől egynéhány 10px-re. Ezt, hogy tudnám megszüntetni?
2016. máj. 15. 13:20
 5/8 anonim ***** válasza:
Úgy, hogy helyes méreteket adunk meg. 150pixeles paragrafus meg 150px h1 az nem 200px, mint ami a flexitem (hanem 300), flexitemből 2 van és van margin is, tehát a flex-container akkor 640px lesz.
2016. máj. 15. 13:22
Hasznos számodra ez a válasz?
 6/8 anonim ***** válasza:
Jobbkatt ulre, elem vizsgálata. Láthatod, hogy alapból van padding-leftje, nullázni kell.
2016. máj. 15. 13:25
Hasznos számodra ez a válasz?
 7/8 A kérdező kommentje:
vmiért továbbra is ugyanaz a gond nullázás után is, de mind1 inkább már használtam a forrásban levő kódot a listára, de így már azt hiszem jó lesz köszi ViperM :)
2016. máj. 15. 13:43
 8/8 A kérdező kommentje:
*v
2016. máj. 15. 13:44

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!