Jump to content

krimmi83

Members
  • Content count

    3
  • Joined

  • Last visited

Community Reputation

1 Neutral

About krimmi83

  • Rank
    Newbie
  1. krimmi83

    CSS layout problem with div

    Thanks Dsonesuk, I tested my html file on your website and there was 2 errors. first one, I had the header above the body (clap clap clap) and second, my img had no alt. Those are the only errors I get. So far, the website is not hosted since I want to tests things and get better before hosting it. Planning on installing IIS on my old computer at home so I can host it myself. I checked my code again and again and I don't understand why the layout get all messed up like that. Should I make class and subclass so I could deal with the width of each block? I found it! Found a page on w3schools... Must have skipped it... My mistake : https://www.w3schools.com/css/css_website_layout.asp Thanks!
  2. krimmi83

    CSS layout problem with div

    Hi, I'm getting lost with css layout and I'd like it if someone could explain just this. I'm trying to have a webpage (for now, just one page where I can practice my html/css). My plan is to have a menu on the top, lots of image under it and then just copyright. So far, my HTML code looks like this : <!DOCTYPE html> <html lang="en-US"> <!--GOTTA DO THE LAYOUT IN FLEX!!!--> <head> <title>Wallpaper paradise</title> <!--Call the stylesheet called "ui.css"--> <link rel="stylesheet" type="text/css" href="css/ui.css"> <meta charset="UTF-8"> <!--Add a description for the website. Then add keywords for search engine. Finaly tells people I'm the author of the website--> <meta name="description" content="The wallpaper paradise. Trying to get as many quality wallpapers I can get!"> <meta name="keywords" content="wallpaper, dimension, women, abstract, videogames, photography, fanarts"> <meta name="author" content="Krimmi83"> <!--Take control of the viewport! (responsive web design introduction). The viewport element gives the browser instructions on how to control the page's dimensions and scaling.--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <header> <h1><!--<img src="images/logo.png" width="100%">-->Wallpaper Paradise</h1> <div class="topnav"> <a class="active" href="#home">Home</a> <a href="news.html">News</a> <a href="latest.html">Latest</a> <a href="random.html">Random</a> <a href="faq.html">FAQs</a> </div> </header> <body> <p>tesst</p> <div><p>test</p></div> <div class="flex-photo" > <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> <img src="images/logo.png"> </body> </html> Then, we got my CSS code : * { box-sizing: border-box; } html, body { height: 25%; } html { display: table; margin: auto; font-family: 'Open Sans', sans-serif; } body { background-image: url("../images/blue-gradients.jpg"); background-color: #00ccff; background-repeat: no-repeat; background-attachment: fixed; display: table-cell; vertical-align: middle; text-align:center; } p { text-align: center; color: white; } h1 { color: white; margin-left: 20px; text-align: center; font-size: 200%; } img { max-width:100%; height:auto; } /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; float: left; text-align: center; padding: 5px; margin-bottom: 5px; } /* Style the links inside the navigation bar */ .topnav a { float: left; color: #f2f2f2; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Change the color of links on hover */ .topnav a:hover { background-color: #e2e2e2; color: black; } /* Add a color to the active/current link */ .topnav a.active { background-color: #4CAF50; color: white; } .flex-photo { display: flex; flex-wrap: wrap; background-color: DodgerBlue; clear: both; border: 1px solid black; width: 100%; } .flex-photo div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; border: 1px solid black; } @media only screen and (max-width: 700px) { .topnav { display: none !important; } } The problem is that I want to menu to appear at the top of the page and everything else under it. The thing that I don't understand (pretty sure there's more than one things, but let's start with this) is that if I remove my flex-photo class (in the css, put it as a comment), everything lines-up verticaly, but as soon as I add the flex-photo class, my layout get all messed up. Ps: Image 1 is with the flex-photo as a comment in the CSS file and image 2 is without the comment. (image 1 : I'm using the class and image 2 I'm not) Thanks!
  3. krimmi83

    Css and font-size

    Hi, We're making a little browser game, using only html and css, and we wanted to know if there's a way that when you zoom the page, the text stays the same font size. We succeeded with pictures and some div, but with the text, it automaticly resize it.Thanks a lotMax
×