Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
X X
90 PointsGrid
Hi, I am new in HTML&CSS. I started writting my own training-website similar to SmellsLikeBakin and I am stuck. I copied normalize and grid files from SmellsLikeBakin's project into folder with my own project just to try them and they don't work. I linked them in my index.html file in head tag but it looks like it doesn't read them. Its strange because my style.css file works fine.
I paste my code that you can check it what's wrong.
<!DOCTYPE html> <html> <head> <meta http-equiv="Document-Type" content="text/html" charset="utf-8"/> <link rel="stylesheet" href="/ssh/css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="/ssh/css/grid.css" type="text/css" media="screen"> <link rel="stylesheet" type="text/css" href="/ssh/css/style.css"> <title>Veritimus - strona oficjalna</title> </head> <body> <div class="container clearfix"> <div class="grid_12"> <img id="logo" src="img/logo.jpg" href="https://www.veritimus.jcom.pl" alt="Veritimus - strona główna"> </div> <div class="menu grid_12"> <ol id="menu"> <li><a href="#">O autorze</a></li> <li><a href="https://www.veritimus.jcom.pl/kategorie.aspx">Twórczość</a> <ul> <li><a href="https://www.veritimus.jcom.pl/kategorie/erotyki.aspx">Erotyki</a> <ol> <li><a href="https://www.veritimus.jcom.pl/kategorie/erotyki/katharsis.aspx">Katharsis</a></li> <li><a href="https://www.veritimus.jcom.pl/kategorie/erotyki/krysztal.aspx">Kryształ</a></li> <li><a href="https://www.veritimus.jcom.pl/kategorie/erotyki/roza.aspx">Róża</a></li> </ol></li> <li><a href="https://www.veritimus.jcom.pl/kategorie/refleksyjne.aspx">Refleksyjne</a> <ol> <li><a href="https://www.veritimus.jcom.pl/kategorie/refleksyjne/bogaty-chlopiec.aspx">Bogaty chłopiec</a></li> <li><a href="https://www.veritimus.jcom.pl/kategorie/refleksyjne/ludzie-z-obrazow.aspx">Ludzie z obrazów</a></li> <li><a href="https://www.veritimus.jcom.pl/kategorie/refleksyjne/przebudzenie.aspx">Przebudzenie</a></li> </ol></li> <li><a href="https://www.veritimus.jcom.pl/kategorie/wojenne.aspx">Wojenne</a> <ol> <li><a href="https://www.veritimus.jcom.pl/kategorie/wojenne/smak-wojny.aspx">Smak wojny</a></li> <li><a href="https://www.veritimus.jcom.pl/kategorie/wojenne/wojenna-nuta.aspx">Wojenna nuta</a></li> <li><a href="https://www.veritimus.jcom.pl/kategorie/wojenne/zew-pokolenia-zmian.aspx">Zew pokolenia zmian</a></li> </ol></li> </ul></li> <li><a href="#">Wydania</a> <ul> <li><a href="https://www.veritimus.jcom.pl/wydania/uniesc-reke.aspx">Unieść rękę (2015)</a></li> </ul></li> <li><a href="#">Kontakt</a></li> </ol> </div> <div class="intro"> <div class="grid_9"> <h1>Witaj na stronie, Przybyszu!</h1> <p>Znajdujesz się na stronie Pawła Spierewki, młodego pisarza, który uważa, iż w słowie tkwi zaklęta niezwykła moc - moc kreacji.</p> </div> <div class="grid_4"> <p id="cytat">"Na początku było Słowo,<br> a Słowo było u Boga,<br> i Bogiem było Słowo.<br> Ono było na początku u Boga.<br> Wszystko przez Nie się stało,<br> a bez Niego nic się nie stało,<br> co się stało.<br> W Nim było życie,<br> a życie było światłością ludzi,<br> a światłość w ciemności świeci<br> i ciemność jej nie ogarnęła."</p> </div> <div class="grid_5 omega"> <img id="pisarz" src="img/intro.jpg" alt="Powitanie"> </div> <div class="grid_9"> <p>Tak swą ewangelię rozpoczyna św. Jan. w przytoczonym fragmencie jegoż dzieła Słowo stanowi siłę, z której wszystko co nas otacza wzięło swój początek; to ono stało się źródłem wszelkiego bytu żywego i martwego. Wierzę, że tak jak atomy tworzą materię, tak słowa stanowią budulec - każdy element otaczającej nas rzeczywistości posiada swoją nazwę, która oddaje jego strukturę, charakter oraz przeznaczenie. Pisarz kreuje słowem własną rzeczywistość, zatrzymuje w słowie ulotną chwilę, daje wyraz targającym nim emocjom. Zapraszam zatem do odczytywania rzeczywistości, którą przygotowałem dla Państwa.</p> </div> </div> <div class="copyright grid_12"> <h5>Wszelkie prawa zastrzeżone © 2015 Paweł 'Veritimus' Spierewka</h5> </div> </div> </body> </html>
Thanks for help!
5 Answers
David Tonge
Courses Plus Student 45,640 PointsIf your stylesheet is loading fine, the only problem I see different is where you declare your "type" attribute. If that isn't the problem, do mind setting up a workspace and taking a snapshot or explaining your how your files are set up in your directory.
X X
90 PointsWhen I take out first slash from my stylesheet hrefs then my style.css doesn't work completely. So I don't think that it is solution. It looks like grid classes doesn't work, because if I think right, my content should be sized to 1000px width and had same margins at both sides but it doesn't.
You can check it on web, because I uploaded it on free server. Link: www.veritimus.jcom.pl
David Tonge
Courses Plus Student 45,640 PointsYour CSS links are fine. I check it's out in I notice you're missing your viewport meta data that would make your grid system work. You also don't have any media queries sent to make your grid responsive.
// goes above in your HEAD
<meta name="viewport" content="initial-scale=1">
secondly
X X
90 PointsI added this meta name to code, but honestly I didn't notice any changes in grid. Still no margins and grid structure of page. :(
David Tonge
Courses Plus Student 45,640 Pointsyeah but when I load the site your grids are filling the necessary columns.
Adrian Buzdug
4,182 PointsAdrian Buzdug
4,182 PointsHi, try taking out the first slash from: href="/ssh/css/normalize.css", href="/ssh/css/grid.css" and href="/ssh/css/style.css".