Jump to content

ahile91

Members
  • Posts

    22
  • Joined

  • Last visited

Posts posted by ahile91

  1. i was making container for photos and for all 4 side i want to have 1px with a full photo. me i make the container this size but for some reason i have some photos with difrent dimension and is not fiting centred its remain in one side 1 pixel. this is se size of the container : W: 120px    ; H: 170px can somone fix my error pls

  2. can you writhe it for me please? after i get good knowlage of html and css i'll start studyng java and php..you want to hear something funny ? i not even finish the high school but i'm trying to build my own website and start a busines with it. i think i pasion can beat some mistake that i make them when i was younger

  3. yeah ! not is working for bouth but why when i open bouth is stay opens bout of them why is not closeing one ? btw your the best ! thanks so much !

    and how is posible cuz in my head is not matching "this" with "elem"

    Quote
    
    
    <button onclick="myFunction(this)" class="dropbtn">....</button>
    
    function myFunction(elem) {
                    elem.nextElementSibling.classList.toggle("show");
    
                }
    
    
    and this "e" is same "elem" ? just shortcut ?
    
    window.onclick = function(e) {
                    if (!e.target.matches('.dropbtn')) {
                        var myDropdown = document.getElementsByClassName("dropdown-content");
    
                        for (var i = 0; i < myDropdown.length; i++) {
                            if (myDropdown[i].classList.contains('show')) {
                                myDropdown[i].classList.remove('show');
                            }
                        }
                    }
                };

     

     

  4. <!DOCTYPE html>
    <html lang="en-US">
    <head>
    	<title>title</title>
    <meta name="keywords" content="bla bla">
    <meta name="description" content="about bla bla">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" type="text/css" href="style.css">
    	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Serif Pro">
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    </head>
    <!-- body -->
    <body>
    	<div class="container_16">
    <style>
    body,h1,h2,h3,h4,h5,h6 {font-family: "Source Serif Pro", sans-serif}
    </style>
    <!-- header -->
    <header>
    	<div class="grid_5 alpha brand">webname</div>
    	<div class="grid_11 omega">
    <!-- navigation -->
    		<nav>
    			<ul>
    				<li><a href="#">Contact</a> |</li>
    				<li><a href="#">Home</a> |</li>
    				<li><a href="#">SingUp</a></li>
    			</ul>
    		</nav>
    	</div>
    	<div class="grid_5">
    	<div class="dropdown">
      <button onclick="myFunction(elem)" class="dropbtn">Rental</button>
      <div class="dropdown-content">
    			<a href="#">House</a>
    			<a href="#">Studio</a>
    			<a href="#">Flat</a>
    	</div>
    	</div>
    	</div>
    	<div class="grid_5">
    	<div class="dropdown_2">
      <button onclick="myFunction()" class="dropbtn_2">Cars</button>
      <div class="dropdown-content_2">
    			<a href="#">Electric</a>
    			<a href="#">Petrol</a>
    			<a href="#">Diesel</a>
    	</div>
    	</div>
    	</div>
    </header>
    <!-- footer -->
    <footer>
    	<p>&copy; 2017 All rights reserved.</p>
    </footer>
    <!-- navigation java script -->
    <script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction(elem) {
                    elem.nextElementSibling.classList.toggle("show");
    
                }
    
    // Close the dropdown if the user clicks outside of it
    window.onclick = function(e) {
                    if (!e.target.matches('.dropbtn')) {
                        var myDropdown = document.getElementsByClassName("dropdown-content");
    
                        for (var i = 0; i < myDropdown.length; i++) {
                            if (myDropdown[i].classList.contains('show')) {
                                myDropdown[i].classList.remove('show');
                            }
                        }
                    }
                };
    </script>
    <script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
        document.getElementById("myDropdown_2").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    window.onclick = function(e) {
      if (!e.target.matches('.dropbtn_2')) {
        var myDropdown_2 = document.getElementById("myDropdown_2");
          if (myDropdown_2.classList.contains('show')) {
            myDropdown_2.classList.remove('show');
          }
      }
    }
    </script>
    </body>
    </html>

     

  5. ok i'm confuse now idk how to make it...so this is the code..let me explain better. first i want to make "rental" and "cars" to dropdown and the dropdown content (submenu) style it to put it in a box container. all this in the header than under to put some slideshow and 6/8 col photo gallery. i'm using 16grid from 960

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    	<title>title</title>
    <meta name="keywords" content="bla bla">
    <meta name="description" content="about bla bla">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" type="text/css" href="style.css">
    	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Serif Pro">
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    </head>
    <!-- body -->
    <body>
    	<div class="container_16">
    <style>
    body,h1,h2,h3,h4,h5,h6 {font-family: "Source Serif Pro", sans-serif}
    </style>
    <!-- header -->
    <header>
    	<div class="grid_5 alpha brand">webname</div>
    	<div class="grid_11 omega">
    <!-- navigation -->
    		<nav>
    			<ul>
    				<li><a href="#">Contact</a> |</li>
    				<li><a href="#">Home</a> |</li>
    				<li><a href="#">SingUp</a></li>
    			</ul>
    		</nav>
    	</div>
    	<div class="grid_5">
    	<div class="dropdown_1">
      <button onclick="myFunction()" class="dropbtn_1">Rental</button>
      <div id="myDropdown_1" class="dropdown-content_1">
    			<a href="#">House</a>
    			<a href="#">Studio</a>
    			<a href="#">Flat</a>
    	</div>
    	</div>
    	</div>
    	<div class="grid_5">
    	<div class="dropdown_2">
      <button onclick="myFunction()" class="dropbtn_2">Cars</button>
      <div id="myDropdown_2" class="dropdown-content_2">
    			<a href="#">Electric</a>
    			<a href="#">Petrol</a>
    			<a href="#">Diesel</a>
    	</div>
    	</div>
    	</div>
    </header>
    <!-- footer -->
    <footer>
    	<p>&copy; 2017 All rights reserved.</p>
    </footer>
    <!-- navigation java script -->
    <script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
        document.getElementById("myDropdown_1").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    window.onclick = function(e) {
      if (!e.target.matches('.dropbtn_1')) {
        var myDropdown_1 = document.getElementById("myDropdown_1");
          if (myDropdown_1.classList.contains('show')) {
            myDropdown_1.classList.remove('show');
          }
      }
    }
    </script>
    <script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
        document.getElementById("myDropdown_2").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    window.onclick = function(e) {
      if (!e.target.matches('.dropbtn_2')) {
        var myDropdown_2 = document.getElementById("myDropdown_2");
          if (myDropdown_2.classList.contains('show')) {
            myDropdown_2.classList.remove('show');
          }
      }
    }
    </script>
    </body>
    </html>

     

  6. Just now, ahile91 said:

    i tryed before posting..is work for one only<script>

    
    <script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
        document.getElementById("myDropdown_2").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    window.onclick = function(e) {
      if (!e.target.matches('.dropbtn_2')) {
        var myDropdown_2 = document.getElementById("myDropdown_2");
          if (myDropdown_2.classList.contains('show')) {
            myDropdown_2.classList.remove('show');
          }
      }
    }
    </script>

     

     

  7. i tryed before posting..is work for one only<script>

    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
        document.getElementById("myDropdown_2").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    window.onclick = function(e) {
      if (!e.target.matches('.dropbtn_2')) {
        var myDropdown_2 = document.getElementById("myDropdown_2");
          if (myDropdown_2.classList.contains('show')) {
            myDropdown_2.classList.remove('show');
          }
      }
    }
    </script>

     

  8. <!DOCTYPE html>
    <html>
    <head>
    <style>
    .container {
        overflow: hidden;
        background-color: #333;
        font-family: Arial;
    }
    
    .container a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    .dropdown {
        float: left;
        overflow: hidden;
    }
    
    .dropdown .dropbtn {
        cursor: pointer;
        font-size: 16px;    
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
    }
    
    .container a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    
    .dropdown-content a:hover {
        background-color: #ddd;
    }
    
    .show {
        display: block;
    }
    </style>
    </head>
    <body>
    
    <div class="container">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <div class="dropdown">
        <button class="dropbtn" onclick="myFunction()">Dropdown</button>
        <div class="dropdown-content" id="myDropdown">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div> 
    </div>
    
    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p>Click on the "Dropdown" link to see the dropdown menu.</p>
    
    <script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    window.onclick = function(e) {
      if (!e.target.matches('.dropbtn')) {
        var myDropdown = document.getElementById("myDropdown");
          if (myDropdown.classList.contains('show')) {
            myDropdown.classList.remove('show');
          }
      }
    }
    </script>
    </body>
    </html>

     

     

    i just tryit by myself to change from "myDropdown" to "myDropdown_2" but it wasan't work...i just want to add this to my categories so i want to multiplay this content like 2-3 times how do i make this ? please help

  9. hi everyone i'm trying to learn the code to build my own website. i want to make a website using 960grid system 16 colum. but i coulden't find anywhere how to make category? i want to be the navigator on top right and under to be 2 category and multiple subcategory.

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    	<title>title</title>
    <meta name="keywords" content="bla bla">
    <meta name="description" content="about bla bla">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" type="text/css" href="style.css">
    	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Serif Pro">
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    </head>
    <!-- body -->
    <body>
    	<div class="container_16">
    <style>
    body,h1,h2,h3,h4,h5,h6 {font-family: "Source Serif Pro", sans-serif}
    </style>
    <!-- header -->
    <header>
    	<div class="grid_5 alpha brand">webname</div>
    	<div class="grid_11 omega">
    <!-- navigation -->
    		<nav>
    			<ul>
    				<li><a href="#">Contact</a> |</li>
    				<li><a href="#">Home</a> |</li>
    				<li><a href="#">SingUp</a></li>
    			</ul>
    		</nav>
    	</div>
    </header>
    <!-- footer -->
    <!--footer>
    	<p>&copy; 2017 All rights reserved.</p>
    </footer>
    </body>
    </html>

    for the style i use grid 960_16_col.css and i add this.

    under this on the same header i want to make another container with 2 category like i said up.

    body {
      min-width: 960px;
      background-image: url(headerbackground.png);
      background-repeat:repeat-x;
    }
    
    .brand {
    	font-size: 55px;
    	font-weight: 600;
    }
    
    /* text color */
    header {
    	color: #ff1e00;
    }
    
    /* navigator position */
    nav {
    	text-align: right;
    	margin-top: 20px;
    }
    
    /* navigator text */
    nav a {
    	color: #ff1e00;
    	text-decoration: none;
    	padding: 5px;
    }
    
    /* navigator hover */
    nav a:hover {
    	background: #6b7d6f;
    	border-radius: 12px;
    }
    
    /* An Unordered List */
    header ul {
    	margin: 0;
    	padding: 0;
    }
    
    /* navigator alignment */
    header li {
    	list-style: none;
    	display: inline;
    	margin-left: 5px;
    	padding: 0;
    	font-size: 16px;
    }

     

  10. i try to make but i cant pfff.....i found one site and he generate my css style button but i put in validation link and he give me error and how can i connect this on my html omg !

    i try like this in many ways

    <button type="button">Click Me!</button>

    <a herf="http://site" target="blank" class="" > </a>

     

    have this code that i want to use:

    <a href="http://www" onclick="window.open('http://www')">Click</a>

    .btn {  background: #2adeeb;  background-image: -webkit-linear-gradient(top, #2adeeb, #fff154);  background-image: -moz-linear-gradient(top, #2adeeb, #fff154);  background-image: -ms-linear-gradient(top, #2adeeb, #fff154);  background-image: -o-linear-gradient(top, #2adeeb, #fff154);  background-image: linear-gradient(to bottom, #2adeeb, #fff154);  -webkit-border-radius: 60;  -moz-border-radius: 60;  border-radius: 60px;  text-shadow: 0px 0px 12px #000000;  -webkit-box-shadow: 2px 3px 8px #544e54;  -moz-box-shadow: 2px 3px 8px #544e54;  box-shadow: 2px 3px 8px #544e54;  font-family: Georgia;  color: #ff33a7;  font-size: 60px;  padding: 19px;  border: solid #ff8c00 2px;  text-decoration: none;}.btn:hover {  background: #e617af;  background-image: -webkit-linear-gradient(top, #e617af, #e62020);  background-image: -moz-linear-gradient(top, #e617af, #e62020);  background-image: -ms-linear-gradient(top, #e617af, #e62020);  background-image: -o-linear-gradient(top, #e617af, #e62020);  background-image: linear-gradient(to bottom, #e617af, #e62020);  text-decoration: none;}

    please help me with this so i can start make the index page i dont find a tutorial to explain how to combine all language i want to work in separate file all .CSS code in few file like enter.css ; text.html

  11. i dont have a domain or a host for moment

    i was tinking if i well make an acount here i well get help and someone to explaine to me where i make the mistake...i know i need to study mor but i can not do alon if i have questions

  12. please can anyone tell me wath is wrong here ! :(

    i want to make auto-resize background so can i use olso in mobile version.

    i want to add style on my ENTER button but i don`t know how

    and why he dont load my background image ? please help please

    <!DOCTYPE html><html><body><head><style>{    background-image: url("integra.jpg");    background-size: 80px 60px;    background-repeat: no-repeat;}h1 {    color: red;    margin-left: 20px;}<img src="integra.jpg" alt="integra" width="224" height="162" /></style></head></body></html>
    <!DOCTYPE html><html><head><head><link rel="stylesheet" type="text/css" href="mystyle.css"></head><style>#navlist {    position: center;}#navlist li {    margin: 0;    padding: 0;    list-style: none;    position: center;    top: 0;}#navlist li, #navlist a {    height: 100px;    display: block;}#enter {    left: 100px;    width: 100px;    background: url('integra.jpg') 0 0;}</style></head><body><h1>Welcome</h1><p>This your place</p><p>text text text text text text text</p><ul id="navlist">  <li id="enter"><a href="http://"></a></li></ul></body></html>
  13. he don`t want to load my background i try like this and i try it again know

    i heave all my file on my desktop

    <head>body {    background-image: url("http://s11.postimg.org/5e5aeh3ar/socerbackground.jpg");}h1 {    color: red;    margin-left: 20px;}</head>

    even if i put only the name of the photo he don`t show..

    and the html

    how can i style this ?

    <!DOCTYPE html><html><head><head><link rel="stylesheet" type="text/css" href="mystyle.css"></head><style></style></head><body><h1>Welcome</h1><p>This your place</p><p>text text text text text text text</p></body><img src="integra.jpg" width="30%" height="30%"><button type="button"><a href="http://website" target="blank">enter site</button</html>
  14. Hello evryone i just started to study and work at website sorry for my bad english...i did not understand how can i make a ENTER page..

    I want to put a wallpaper background, another small boarder and inside the boarder to put my adds and a enter button with link to my page. so evryone who want to join on my page to make clik on my ads. i try to make by myself but i cant :( i have problem wih connect html with external file like CSS or Bootstrap..pease somone help me thx

×
×
  • Create New...