Két div-et egy sorba CSS-el

Címkék
Két div-et egy sorba CSS-el
2021-03-25T15:12:47+01:00
2021-05-23T20:55:41+02:00
2022-07-19T05:48:25+02:00
*deleted_23419333
Sziasztok!

Laptop-on Chrome és Firefox alatt minden rendben:

desktop.png

Mobilon, Chrome alatt akármit csinálok, elcsúszik:

mobile.jpg

HTML:

<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto"> </head> <body style="font-family: 'Roboto', sans-serif; font-size: 16px;"> <div id="site"> <div id="header"> <!-- A --><div id="left"><a>kk</a></div> <!-- B <div id="left">kk</div> --> <!-- C <div id="left"><h1>kk</h1></div> --> <div id="right"><a>&#8801;</a></div> </div> </div> </body>

A CSS-t inkább nem osztom meg mert az már romokban hever. Mi lehet a probléma?

Előre is köszönöm.
Mutasd a teljes hozzászólást!
vallási okból betiltották

Ezen jót nevettem.

Megoldás: A Roboto helyett áttértem a Roboto Slab használatára. Előbbi Sans Serif, utóbbi csak Serif és ez utóbbi jól fekszik neki.
Mutasd a teljes hozzászólást!
  • Valami ilyesmi?

    HTML:

    <div id="main"> <div id="left">L</div> <div id="right">R</div> </div>
    CSS:

    #main { background: blue; } #left, #right { background: red; width: 100px; display: inline-block; padding: 15px; text-align: center; } #right { float: right; }
    Mutasd a teljes hozzászólást!
  • Változtattam a kódon, de most (mobilon):

    mobile2.jpg

    Asztalin persze továbbra is tökéletes minden.

    HTML:

    <link rel="stylesheet" href="desktop.css"> <link rel="stylesheet" href="mobile.css">

    CSS (desktop.css):

    * { margin: 0; padding: 0; } body {} #site { margin: 32px; } #header { font-weight: bold; } #left { display: inline-block; } #left a, #title, h1 { background-color: red; display: block; font-size: 4em; padding: 64px; text-decoration: none; } #right { float: right; display: inline-block; } #right a { background-color: red; display: block; font-size: 4em; padding: 64px; text-decoration: none; }

    CSS (mobile.css):

    @media screen and (max-width: 640px) { * {} body {} #site { margin: 8px; } #header {} #left {} #left a, #title, h1 { font-size: 2em; padding: 32px; } #right {} #right a { font-size: 2em; padding: 32px; } }

    Mit csinálok rosszul?

    Itt 3 féle variáció lehet, ez fontos:

    <!-- A --><div id="left"><a>kk</a></div> <!-- B <div id="left"><div id="title">kk</div></div> --> <!-- C <div id="left"><h1>kk</h1></div> -->
    Mutasd a teljes hozzászólást!
  • Az enyémet kipróbáltad?
    Mutasd a teljes hozzászólást!
  • Persze, az tökéletes. A tiéd alapján írtam újra az enyémet, de nálam mégse működik. A Roboto miatt lehet vagy a viewport meta miatt vagy azért mert te nem használtál <a> hivatkozásokat vagy azért mert te nem használtad a triple bar karaktert? Mi a baj a kódommal?
    Mutasd a teljes hozzászólást!
  • A hamburger-menü/triple bar karakterrel lesz a gond.

    Rossz:

    <div id="left"><a>kk</a></div> <div id="right"><a>≡</a></div>

    Jó:

    <div id="left"><a>kk</a></div> <div id="right"><a>kk</a></div>

    Jó:

    <div id="left"><a>≡</a></div> <div id="right"><a>≡</a></div>

    Jó:

    <div id="left"><a>kk≡</a></div> <div id="right"><a>≡</a></div>

    Ezek alapján tudnátok segíteni? A Roboto betűtípus nem kavar be mert például Arial esetén is ugyanez a helyzet.
    Mutasd a teljes hozzászólást!
  • Szerintem 10 évet öregedtem.

    Jó:

    font-family: serif;

    Rossz:

    font-family: sans-serif; /* 'Roboto' és Arial */

    Ha sans-serif betűtípust szeretnék használni, akkor mi a megoldás? Most már nagyon érdekel!
    Mutasd a teljes hozzászólást!
  • Szerintem neked fogalmad sincs semmiről amit csinálsz. Az, hogy két div egymás mellé kerüljön, teljesen független attól, hogy milyen fontot használsz, hogy van-e hamburgermenüd, hogy hogy nevezel el dolgokat. 

    Ne használj id-t formázásra, pláne ne három elementen ugyanazt! 

    Ha nem teszel be csst akkor fogalmunk sem lesz, hogy mi a baj, mert bármily meglepő a markup nem tartalmaz - hála a jó égnek - formázást
    Mutasd a teljes hozzászólást!
  • Mielőtt megírtad a hozzászólásodat, elolvastad a többit? Az összes CSS-t megtaláltad volna a HTML-el együtt, de a kedvedért itt lesz minden egy hozzászólásban.

    Szerintem neked fogalmad sincs semmiről amit csinálsz. Az, hogy két div egymás mellé kerüljön, teljesen független attól, hogy milyen fontot használsz, hogy van-e hamburgermenüd, hogy hogy nevezel el dolgokat.

    Rendben, mester! Így már működik... Na, de most komolyan. Ha ennyire vágod a témát, akkor mi a megoldás?

    index.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="desktop.css"> <link rel="stylesheet" href="mobile.css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto"> </head> <body style="font-family: 'Roboto', sans-serif; font-size: 16px;"> <div id="site"> <div id="header"> <!-- A --><div id="left"><a>kk</a></div> <!-- B <div id="left">kk</div> --> <!-- C <div id="left"><h1>kk</h1></div> --> <div id="right"><a>&#8801;</a></div> </div> </div> </body> </html>

    desktop.css

    * { margin: 0; padding: 0; } body {} #site { margin: 32px; } #header { font-weight: bold; } #left { display: inline-block; } #left a, #title, h1 { background-color: red; display: block; font-size: 4em; padding: 64px; text-decoration: none; } #right { float: right; display: inline-block; } #right a { background-color: red; display: block; font-size: 4em; padding: 64px; text-decoration: none; }

    mobile.css

    @media screen and (max-width: 640px) { * {} body {} #site { margin: 8px; } #header {} #left {} #left a, #title, h1 { font-size: 2em; padding: 32px; } #right {} #right a { font-size: 2em; padding: 32px; } }

    A probléma, de csak okostelefonon mert asztalin minden rendben van: mobile2.jpg
    Mutasd a teljes hozzászólást!
  • Nem tudtam reprodukálni a hibádat, de ha tényleg így van, akkor lehet, hogy az eszközön ez a speciális karakter nincs meg valamelyik fontban, ezért helyettesíti valami mással, aminek esetleg mások a méretei. Adj a left/right div-nek a css részben fix magasságot pl. "px"-ben, vagy "rem"-ben és szerintem menni fog.
    Mutasd a teljes hozzászólást!
  • ha egymás melletti elemeket akarsz html-ben akkor minden CSS nélkül használj <span> -t. De grid-el vagy flex-el lehet a legjobban pozícionálni az elemeket.
    Mutasd a teljes hozzászólást!
  • Hát itt lenne rögtön a <table> de sajnos azt vallási okból betiltották.
    Mutasd a teljes hozzászólást!
  • vallási okból betiltották

    Ezen jót nevettem.

    Megoldás: A Roboto helyett áttértem a Roboto Slab használatára. Előbbi Sans Serif, utóbbi csak Serif és ez utóbbi jól fekszik neki.
    Mutasd a teljes hozzászólást!
  • De ugye az te is érzed, hogy egy rendesen összerakott design bármilyen google fonttal el kéne működgessen korrekt módon? Szóval én ezt a "megoldást" nem fogadom el...
    Mutasd a teljes hozzászólást!
Címkék
abcd