You are viewing our Forum Archives. To view or take place in current topics click here.
Short HTML & CSS help
Posted:

Short HTML & CSS helpPosted:

Silianat
  • Junior Member
Status: Offline
Joined: Dec 16, 201311Year Member
Posts: 78
Reputation Power: 2
Status: Offline
Joined: Dec 16, 201311Year Member
Posts: 78
Reputation Power: 2
Hey there,

Quick few questions, I am creating a website in order to get experience towards web development, currently I want 6 blocks in a 6-pack formation with a blurred background image, text overlay & hyperlinked to a different page in the website.


<!doctype html>
   <head>
      <title>CSS Layouts</title>
      <style type="text/css">
         header {
            background:#999;
            color:white;
            padding:15px 15px 0 15px;
         }

         body {
            margin:0;
         }

         header h1 {
            margin:0;
            display:inline
         }

         nav ul {
            margin:0;
            display:inline;
            padding:0 0 0 15px;
         }

         nav ul li {
            list-style-type:none;
            display:inline-block;
            background:black;
            color:white;
            padding:5px 15px;
         }

         nav ul li a {
            color:white;
         }

            .row:after {
               clear: both;
               content: " ";
               display: table;
         }      

         .col {
            float:left;
            background:#333;
            margin:1%;
            width:47%;
            height:150px;
            border-radius:5px;
            padding:0.5%;
            background:url(lol.png)
         }
      </style>
   </head>
   <body>
      <header>
         <nav>
            <h1>My Page</h1>
            <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Blog</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Contact</a></li>
               <li><a href="#">Links</a></li>
            </ul>
         </nav>
      </header>
      <div class="row">
         <div class="col">col1</div>
         <div class="col">col2</div>
         <div class="col">col3</div>
         <div class="col">col4</div>
         <div class="col">col5</div>
         <div class="col">col6</div>
      </div>

      <footer>2014 My page</footer>
   </body>
</html>


I'm adjust the div tags to specify the 6 pack formation I'm looking for so there's no help needed there, just how am I going to blur the background image with text overlay on it?
#2. Posted:
Dovashin
  • Prospect
Status: Offline
Joined: Jul 10, 201410Year Member
Posts: 624
Reputation Power: 33
Status: Offline
Joined: Jul 10, 201410Year Member
Posts: 624
Reputation Power: 33
I believe this should do the blur

webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);


Or for up and down (Note-pad organization) here


  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  -filter: blur(5px);


For the text overlay you will need to do an individual Div id for that text and make it static. Than pick how far you want it from the top and sides of the screen. (Been about 1 month since I made this

[ Register or Signin to view external links. ]
#3. Posted:
Silianat
  • Junior Member
Status: Offline
Joined: Dec 16, 201311Year Member
Posts: 78
Reputation Power: 2
Status: Offline
Joined: Dec 16, 201311Year Member
Posts: 78
Reputation Power: 2
Thanks you for your help!!!
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.