Jump to content

Search the Community

Showing results for tags 'css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 697 results

  1. I am trying to find a solution to a problem that I have encountered while trying to get a fixed-top navigation menu to work dynamically in W3.CSS. By dynamically, I mean that the horizontally-orientated navigation bar should remain in its place under the page title and image until the page is scrolled downwards and reaches the top of the viewport. At this point, it should fix itself to the top of the screen. I have been able to achieve this effect using my own html/css and jquery script but this method doesn’t work as intended with W3.CSS. I have been moving my websites over to W3.CSS as I as a means of making them responsive and also because css is not my strong point and I like the W3.CSS structure. The menu bar operates as it should when it is in its static mode but, when it is fixed, which involves position:absolute and a z-index of 1, the dropdown menus no longer appear above the bar but are concealed within it. I have tried altering the z-index values of the dropdown-hover and dropdown-content elements but cannot find a solution to this problem. If there is anyone who can, I would be very grateful. The html code below is based closely on the “Navigation Bar with Dropdown” example taken from the W3.CSS Navigation Bars page. I also include the css used to fix the bar and the jquery function to call the css once the top of the screen is reached. HTML <div id=”container”> <div id=”header”></div> <img id="header_image" src="titleimage.jpg" alt="Header Image" class="header_image"/> <img id="header_image_m" src="title_image_m.jpg" alt="Header Image" class="header_image"/> <div id=”nav_bar_container> <div id=”nav_bar” class="w3-bar w3-light-grey"> <a href="#" class="w3-bar-item w3-button w3-mobile">Home</a> <a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a> <div class="w3-dropdown-hover"> <button class="w3-button">Dropdown</button> <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-mobile"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div> </div> CSS #nav_bar_container, #nav_bar{ margin:0; padding:0; width:100%; max-width:948px; } .nav_bar_fixed { position:fixed; top:0px; z-index:1; } Jquery if ($( window ).width() > 600) { $(window).scroll(function() { var fixedBar = $('#nav_bar'), targetScroll = $('#nav_bar_container').position().top, currentScroll = $('html').scrollTop() || $('body').scrollTop(); fixedBar.toggleClass('nav_bar_fixed', currentScroll >= targetScroll); }); }
  2. BACKGROUND: I have recently created a new page based on code used on another page that appears to be functioning well. As the content is different, however, it was necessary that I make several important modifications. Still, the basic format is the same, and I do not understand why the new content is not responding as it should. As always, I have tried a variety of experiments before coming to you including resetting the values of the width property of both the media rule and the media rule's content, reordering the script order of both the imported CSS files and their content, as well as the placement of the CSS rules that command the flex-box. My CSS selectors appear to be appropriate as I am able to generate change. Unfortunately, the desired change is not the change that I am generating. QUESTION: What is the most likely cause of the dysfunction? ORIGINAL PAGE: Observe the behavior of the pages navigation bar, main section, right sidebar, and footer as the size of your viewport expands and contracts. On my devices (iMac, MacBook, and iPhone) the behavior is the desired behavior. The various section appear to function well no matter the selected browser. http://www.grammarcaptive.com/overview.html NEW PAGE: Although the main content section is empty, the right sidebar does not function as intended under the second media rule -- this, despite its proper functioning under the first and third rules. http://www.grammarcaptive.com/podcast_dev_copy.html NOTE: I'll not place any code as everything is easily viewed online.
  3. Problem with Photo Image Layout

    I am trying to design my own mockup website based on one of the W3 templates; however, I could not get the photo images to lay out on my website the same way as the W3 template. Here is the W3 template that I was talking about: https://www.w3schools.com/w3css/tryw3css_templates_photo2.htm. And here is the following codes that I came up with for my website. Any feedback will help. HTML <!doctype html> <html> <head> <title>Amy Perrales | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- !PAGE CONTENT! --> <div class="photography" style="max-width:1500px"> <!-- Header --> <header class="panel" style="padding:128px; 16px;"> <h1 class="ap-xlarge">PHOTOGRAPHER</h1> <h1>Amy Perrales</h1> </head> <body> <div> <id class="introduction"> <a href="Home" style="text-decoration: none;">Home</a> <a href="Portfolio" style="text-decoration: none;">Portfolio</a> <a href="About Amy" style="text-decoration: none;">About Amy</a> <a href="Contact" style="text-decoration: none;">Contact</a> </div> </header> <!-- Photo Grid --> <div class="half-width"> <img src="img/amusement_park.jpg" alt="amusement park" style="width: 599px; height: 424px;"> <img src="img/dock-1365387_640.jpg" alt="dock" style="width:550px; height:633px;"> <img src="img/kaboompics_Black baby chicks.jpg" alt="baby chicks" style="width: 342px; height:513px;"> <img src="img/sunset-114557_640.jpg" alt="sunset" style="width: 275px; height: 550px;"> <img src="img/wedding_couple.jpg" alt="wedding couple" style="width:550px; height:412px;"> </div> <div class="full-width"> <img src="img/ballet-437990_640.jpg" alt="ballet dancer" style="width:424px; height="640px;"> <img src="img/baseball.jpg" alt="baseball player" style="width:424px; height="640px;"> <img src="img/dancer-2471026_640.jpg" alt="dancer" style="width:424px; height="640px;"> <img src="img/pool.jpg" alt="children and pool" style="width:424px; height="640px;"> </div> <!-- Footer --> <footer> <i class="fa fa-facebook-square" style="font-size:36px;"></i> <i class="fa fa-twitter-square" style="font-size:36px;"></i> <i class="fa fa-instagram" style="font-size:36px;"></i> <i class="fa fa-pinterest" style="font-size:36px;"></i> <i class="fa fa-linkedin" style="font-size:36px;"></i> </footer> </style> </body> </html> CSS /* ========================================================================== Base Styles ========================================================================== */ body,h1 { font-family: 'Slabo 45px', serif; text-align: center; letter-spacing: 6px; color: #9aa6b1; } a { color: #a9b3bc; border: 3px solid #fba69d; padding: 8px; margin-left: 3px; margin-right: 5px; } img { margin-bottom: 128px; width: 100%; height: auto; }
  4. BACKGROUND: I have recently created a new page based on code used on another page that appears to be functioning well. As the content is different, however, it was necessary that I make several important modifications. Still, the basic format is the same, and I do not understand why the new content is not responding as it should. As always, I have tried a variety of experiments before coming to you including resetting the values of the width property of both the media rule and the media rule's content, reordering the script order of both the imported CSS files and their content, as well as the placement of the CSS rules that command the flex-box. My CSS selectors appear to be appropriate as I am able to generate change. Unfortunately, the desired change is not the change that I am generating. QUESTION: What is the most likely cause of the dysfunction? ORIGINAL PAGE: Observe the behavior of the pages navigation bar, main section, right sidebar, and footer as the size of your viewport expands and contracts. On my devices (iMac, MacBook, and iPhone) the behavior is the desired behavior. The various section appear to function well no matter the selected browser. http://www.grammarcaptive.com/overview.html NEW PAGE: Although the main content section is empty, the right sidebar does not function as intended under the second media rule -- this, despite its proper functioning under the first and third rules. http://www.grammarcaptive.com/podcast_dev_copy.html NOTE: I'll not place any code as everything is easily viewed online.
  5. Caption Image CSS Styling

    Hi, I need some help with CSS styling of Image Caption. I need image caption to be on transparent black background, similar as usedon http://hotels.lastminutehotels24.com/Place/United_States.htm
  6. Changing the place of input and label

    The html code is this : <div class="form-group"> <label class="col-sm-4 control-label">Checkbox inputs</label> <div class="col-sm-8"> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt01" checked> <label for="opt01">Option 1</label> </div> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt02"> <label for="opt02">Option 2</label> </div> <div class="checkbox check-transparent"> <input type="checkbox" value="1" id="opt03"> <label for="opt03">Option 3</label> </div> </div> </div> I attached the results photo : I want to change the place of checkbox and label I mean I want first be label and then checkbox. It had bootstrap too I uploaded the bootstrap files too : https://www.dropbox.com/s/kc8ytkkd5dxcmc1/assets.zip?dl=0 Who can say that how can I change the place of checkbox and label I will be thank.
  7. I am creating a web page layout using bootstrap and the backend is PHP Laravel, the web page is partitioned into various divs which work fine on various screen devices but when I upload the project on a live server and view the page on mobile part of the service and contact section is hidden behind a white background, I find it hard to figure out to debug the CSS code to make the two sections visible in mobile,,,please assist? HTML <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0"> <meta name="HandheldFriendly" content="true"> <link rel="icon" type="image/x-icon" href="img/favicon.ico"> > <link href="{{ asset('css/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"><link href="{{ asset('css/bootstrap/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css"> <!-- google font --> <link href='http://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet'> </head> <body> <!-- Service Section --> <div class="content-block" id="service"> <br><br> <header class="block-heading cleafix text-center"> <h1> Services</h1> <!-- <p>Lorem Ipsum Text</p> --> </header> <div class="container-fluid"> <div class="row"> <div class="col-lg-12 text-center"> <h3 class="section-subheading text-muted"> Welcome </h3> </div> </div> <div class="row text-center"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-laptop fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School Of Arts</h4> <p>...............</p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading">School of Business </h4> <p> ........... </p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-code fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School of Engineering </h4> <p> ........ </p> </div> </div> <div class="row text-center"> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-wordpress fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School of Human Resource</h4> <p> ........ </p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-pencil fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School of Medicine </h4> <p> ........ .......</p> </div> <div class="col-md-4"> <span class="fa-stack fa-4x"> <i class="fa fa-circle fa-stack-2x text-primary"></i> <i class="fa fa-thumbs-up fa-stack-1x fa-inverse"></i> </span> <h4 class="service-heading"> School of Biological Sciences </h4> <p> .......... </p> </div> </div> </div> </div> <!-- END SERVICE SECTION--> <!-- Contact Form Section--> <div class="content-block" id="contact"> <div class="overlay-3"> <header class="block-heading cleafix text-center"> <h1>Contact</h1> <!-- <p>Feel Free to Contact</p> --> </header> <div class="block-content text-center"> <div class="container-fluid"> <div class="row"> <!-- Form Section --> <div class="col-sm-4 wow animated fadeInLeft"> {!! Form::open(array('route' => 'index.post', 'method' => 'POST','class' => 'contact-form')) !!} {{ Form::text('name', null, array( 'placeholder' => 'Name...', 'class' => 'input', 'required' => ''))}} {{ Form::email('email', null, array('placeholder' => 'Email Address...','class' => 'input', 'required' => ''))}} {{ Form::textarea('message', null, array('placeholder' => 'Message...', 'class' => '', 'required' => 'input')) }} {{ Form::submit('Submit') }} {!! Form::close() !!} </div> <!-- Adress --> <div class="col-sm-4 wow animated fadeInRight"> <div class="row"> <div class="col-sm-12"> <div class="contact-info"> <div class="clearfix"> <div class="rotated-icon"> <div class="sqaure-nebir"></div> <i class="fa fa-map-marker"></i> </div> <p><strong> 3069 Nkr</strong> </p> </div> <div class="tel clearfix"> <div class="rotated-icon"> <div class="sqaure-nebir"></div> <i class="fa fa-mobile"></i> </div> <p> <strong> <a class="tell" href="tel:+256123456" rel="nofollow"> +256 123456 </a> </strong> <br> <strong> <a class="tell" href="tel:+256547890" rel="nofollow"> +254 756789098</a> </strong> </p> </div> <div class="clearfix"> <div class="rotated-icon"> <div class="sqaure-nebir"></div> <i class="fa fa-envelope-o"></i> </div> <p> <strong> info@tcol.com </strong> </p> </div> </div> </div> </div> <div class="row"> <ul class="social-box"> <li><a class="facebook-icon" href="https://www.facebook.com/pwebkenya" target="_blank"> <i class="fa fa-facebook"></i></a></li> <li><a class="twitter-icon" href="https://twitter.com/pwebkenya" target="_blank"> <i class="fa fa-twitter"></i></a></li> <li><a class="g-plus-icon" href="https://github.com/patwan"><i class="fa fa-github"></i></a></li> <li> <a class="linkedin-icon" href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </div> </div> <!-- photo --> <div class="col-sm-4"> <br> <br> <div class="team-member"> <img src="img/7.jpg" class="img-responsive img-circle" alt=""> <h4> Steve Johns</h4> <p class="text-muted"> Web Developer/Graphics Designer</p> </div> </div> <!-- END PHOTO--> </div> </div> </div> <!-- block-content --> </div> <!-- overlay-3 --> </div> <!-- content-block --> </body> </html> CSS code @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: local('Pacifico Regular'), local('Pacifico-Regular'), url("../fonts/pacifico.woff") format('woff'); } html, body { margin: 0; padding: 0; } img, object, embed, video{ max-width:100%; height:auto; } /*Service section*/ .service-heading{ font-size: 22px; } #service { background: url(../img/bg/number1.gif) repeat center center fixed; color: #ffffff; display: block; } #service h3, p{ color: #ffffff; } #service .block-heading h1 { color: #fff; font-family: 'Milonga', cursive; font-weight: 400; font-size: 55px; word-spacing: 5px; } /*Contact section*/ #contact { background: url(../img/bg/contact-bg.jpg) no-repeat center center fixed; background-size: cover; color: #fff; } #contact .block-heading h1 { color: #fff; font-family: 'Milonga', cursive; font-weight: 400; font-size: 55px; } .overlay-3 { padding: 60px 0; /* background-color: rgba(9, 20, 39, 0.83); */ /* background-color: rgba(24, 77, 77, 0.93); */ background-color: rgba(33, 103, 88, 0.9); } .contact-info { padding: 16px 62px; text-align: left; font-size: 18px; line-height: 36px; margin-top: 25px; } . .contact-info i { width: 40px; height: 40px; color: white; padding-top: 7px; font-size: 25px; border: 1px solid #fff; text-align: center; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); } .contact-info p { padding: 27px 10px; } .contact-info span { padding-left: 20px; } input[type="text"], input[type="email"], textarea { display: block; margin: 0 auto; width: 100%; background: transparent; border: 1px solid #fff; padding: 12px 15px; margin-bottom: 30px; } input[type="submit"] { background: transparent; border: 1px solid #fff; width: 100%; padding: 10px; transition: 0.5s background linear; font-weight: bold; } input[type="submit"]:hover { background: #fff; border-color: #fff; transition: 0.5s background linear; color: #333; } ::-webkit-input-placeholder { color: #fff; } ::-moz-placeholder { /* Firefox 19+ */ color: #fff; } :-ms-input-placeholder { color: #fff; } @media only screen and (min-width: 321px) and (max-width: 480px){ #service{ display: inline-block; height: 100%; width: 100%; padding-bottom: 20px; background: blue; } .overlay-3{ background:none; padding: 0; } #contact{ display: inline-block; height: 100%; width: 100%; } }
  8. So the first picture is my homepage(mt.hebronbaptistchurch.html) and the link box is the size i want it to be. The second picture is my pictures and videos page(picturesandvideos.html and the link size is increased and I have no clue why. I added a slideshow feature using CSS and I think it messed with the link box. Mt.hebronbaptistchurch.html News.html PicturesandVideos.html
  9. Css problem

    Hello guys I have a question about CSS: 1.What is the different between these things: div>p {background-color: yellow;} div p {background-color: yellow;} ---------------------------------------------------------- 2.And what is the different between these things: :root {background-color: yellow;} * {background-color: yellow;} ---------------------------------------------------------- 3.And what is this: ::selection ---------------------------------------------------------- I will be happy if you answer me.
  10. Having a problem in css

    Hello guys I have some questions about CSS: What is the different between these codes: div[class*="value"] div[class$="value"] div[class^="value"] Thanks guys
  11. how to link another page using id

    Hello folks, i want to link the page from to another page ex: In my footer column, i've 5 types of products but when i click those products it links to product.html page.Actually In that product page there 5 no of products are listed. when i click the product from index page.I want exact header location for the product.. Thanks in advance
  12. Hello buddy...! how can someone hide image preview/post snippet on Contempo new blogger theme on homepage for mobile view just like THIS BLOG mobile view.? Need it to show only Post title.. Regards...
  13. Hello! I'm trying to create a responsive thumbnail gallery where all the images in the same row are equal in height. The proportions vary - some images are portrait, some landscape. I want them to scale themselves to equal height. But the rows won't have to be the same height - only the images on the same row. My code for one thumbnail row is basically (within a container with a set max-width): <div class="w3-cell-row w3-mobile"> <div class="w3-cell w3-container w3-mobile w3-padding"> <img src="img1.jpg" style="width:100%"> </div> <div class="w3-cell w3-container w3-mobile w3-padding"> <img src="img2.jpg" style="width:100%"> </div> <div class="w3-cell w3-container w3-mobile w3-padding"> <img src="img3.jpg" style="width:100%"> </div> </div> Img1 is landscape, img2 and img3 are portrait - in the thumbnail gallery img1 appears taller in height than the others, why? The actual image files are all 900 px in height (width is different). Is there a way to force the thumbnails on the same row to be the same height? Can this be done without resizing the actual images? And can the gallery still be responsive? Thank you!
  14. I have a responsive drop-down navigation bar that is responsive to screens of all width. The navigation bar has a hidden menu icon that displays when the screen width is below 480 px. When the button is clicked the drop-down lists appear. The problem is that am not able to make the navigation scale to the full-width of the mobile screen and also the drop-down lists appear as a block in tandem to the navigation bar. index.html <!DOCTYPE html> <html> <head> <link href='style.css' rel='stylesheet' type='text/css'> </head> <body> <!-- Clicking on the label will check the checkbox because for and id of checkbox are the same--> <label for="show-menu" class="show-menu"> Menu </label> <input type="checkbox" id="show-menu"> <div class="navbar"> <div class="menu"> <ul class ="list"> <li class="active"> Home </li> <li> <a href="humanities.html"> Humanities <span class="arrow">&#9660; </span> </a> <ul> <li> <a href="#" rel="nofollow"> Music </a></li> <li> <a href="#" rel="nofollow"> Linguistics </a></li> <li> <a href="#" rel="nofollow"> Penology </a></li> <li> <a href="#" rel="nofollow"> Anthropology </a></li> <li> <a href="#" rel="nofollow"> Sociology <span class="arrow"> &rang;</span></a> <ul> <li><a href="#" rel="nofollow"> Psychology</a></li> <li><a href="#" rel="nofollow"> Counselling </a></li> <li><a href="#" rel="nofollow"> C.M.D </a></li> </ul> </li> </ul> </li> <li> <a href="education.html"> Education <span class="arrow">&#9660; </span> </a> <ul> <li> <a href="#" rel="nofollow"> E.C.D.E </a></li> <li> <a href="#" rel="nofollow"> Science </a></li> <li> <a href="#" rel="nofollow"> Arts with Edu </a> <ul> <li><a href="#" rel="nofollow"> Swahili </a></li> <li><a href="#" rel="nofollow"> Psychology </a></li> <li><a href="#" rel="nofollow"> Sociology of Ed. </a></li> <li><a href="#" rel="nofollow"> Liberal Ed. </a></li> </ul> </li> </ul> </li> <li> <a href="eng.html"> Engineering <span class="arrow">&#9660; </span> </a> <ul> <li> <a href="#" rel="nofollow"> Electrical </a></li> <li> <a href="#" rel="nofollow"> Civil & Structural </a></li> <li> <a href="#" rel="nofollow"> Aeronautical </a></li> <li> <a href="#" rel="nofollow"> Chemical </a></li> <li> <a href="#"rel="nofollow" > Mechanical </a> <ul> <li><a href="#" rel="nofollow"> Industrial </a></li> <li><a href="#" rel="nofollow"> Automotive </a></li> </ul> </li> </ul> </li> <li> <a href="contact.php" rel="nofollow"> Contact Us</a></li> </ul> </div> </div> </body> </html> style.css /*Styles the background-color of an active link*/ .menu ul .active{ color: #ffffff; background: #red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(red 20%, green); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red 20%, green); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red 20%, green); /* For Firefox 3.6 to 15 */ background: linear-gradient(red 20%, green); /* Standard syntax */ background: linear-gradient(red 20%, green); /* Standard syntax */ } .navbar{ width:100%; max-width:1000px; text-align:center; margin-top:-8px; margin-bottom:60px; margin-left:160px; } .menu ul{ /*Removes bullets*/ list-style:none; } /*Styles each list within ul*/ .menu ul li{ background-color:green; border:1px solid #ffffff; width:100%; max-width:173px; height:35px; line-height:35px; margin:auto; text-align:center; /*Makes the list dispaly in a horizontal maneer*/ float:left; position: relative; border-radius:8px; font: 15px; font-weight:regular; } .menu ul li a{ text-decoration:none; color:white; display:block; } .menu ul li a:hover{ background-color:red; border-radius:8px; } .menu ul ul{ position:absolute; margin-left:-40px; display:none; } .menu ul li:hover >ul{ display:block; } .menu ul ul ul{ width:100%; margin-left:134px; top:0px; } /*Display the drop-down on hover*/ /*+ selecctor styles every element that are placed immediately after another element */ .menu ul li a:hover + .menu ul li ul, .menu ul li ul:hover{ display:block; } /*Hide Checkbox*/ input[type=checkbox]{ display:none; } /*Show menu when invisible checkbox is checked*/ /*We select checkbox and then use selector column checked to make sure that the checkbox is checked*/ /*~ selects everything that is beneath element on the left shoul be styled with CSS style within the curly bracket*/ input[type=checkbox]:checked ~ .list{ display:block; } /*Styles the menu-label according to its class*/ .show-menu{ font-family:"Helvetica Neue", Helvetica, Arial,sans-serif; text-decoration:none; color:#fff; background: #19c589; text-align:center; padding:10px 0; display:none; } /*Responsive styles*/ @media screen and (max-width:480px){ /*Make drop-down links appear inline*/ .menu ul{ position:static; display: none; } .navbar{ margin-top:-15px; margin-left:5px; } #show-menu:checked ~ .navbar .menu ul { display: block; } /*Create vertical spacing*/ .menu ul li{ margin-bottom:1px; } /*Make all menu links full width*/ .menu ul li, .menu li a{ width:100%; } .show-menu{ display:block; } body{ background-image:none; } }
  15. bad CSS and HTML

    Hello, My home page has Sticky Notes and they keep affecting my Top Menu, making the Top Menu look like Sticky Notes, but without content, just top menu’s name in it. I believe that there is something wrong with my CSS (I am not a pro at HTML, just copy & paste stuff, though some images and texts have been added). Second, on hover sticky notes are underlined and that is not supposed to happen. I love my sticky notes, they look pretty good, I spent a lot of effort on making them look good but still cannot make them being friendly to my Top Menu, as well as to the Side Modules. Sticky notes turn all my menus into a real mess (see images attached). Images of my problem are in the attachment. Any help ideas are much appreciated Thanks in advance
  16. CSS Coding

    I want to know about CSS Coding that how it works and who it will help me to build website?
  17. Please Provide me Book or Link which Cover the Following Topics: 1. HTML/HTML5 a. HTML Page design using DIV based layout (no tables) b. META Tags c. Viewport d. HTML5 Page design using &lt;header>, <footer>, <article>, <section> and <div> 2. CSS a. Styling of elements using CSS <b>b. CSS properties – float, align, background, margin, padding, position, width, height c. Pseudo classes d. How to override CSS properties</b> e. Inline, embedded and external CSS <b>3. JavaScript a. DOM Manipulation i. Change content of the DIV based on some event ii. Populate data inside a DIV using AJAX iii. Show/Hide Elements b. Event handlers c. Timer functions – setTimeOut, setTimeInterval d. AJAX and JSON e. Cookies management f. Debugging using Browser Console g. JavaScript/CSS magnification </b> Please advise me any link for the topics of above links, or are there any software houses in Dubai who suggest me with the respective resolution. Please reply asap.
  18. Border and Picture problem

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Page</title> <link rel="stylesheet" href="main.css"> </head> <body> <header> <div class="container"> <h1 class="title">My Personal Page</h1> <nav class="links"> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> </nav> </div> </header> <div class="clear"></div> <div class="container"> <div class="picture "> <img src="https://s-media-cache-ak0.pinimg.com/originals/e5/95/14/e59514c89d530660923148bad789ef67.jpg" alt=""> </div> </div> <div class="img2"></div> </body> </html> *{ margin:0; padding:0; } .container{ width:960px; margin:0 auto 0 auto; } .links{ float:right; padding: 20px; background-color: #737373; } a{ color:white; text-decoration: none; margin-right:10px; } .title{ display:inline-block; color: #9d9d9d; font-family: Georgia,"Times New Roman",Times,serif; } header{ background-color: dimgray; padding:20px 0 50px 0 ; margin-bottom:30px; } .clear{ clear: both; } .picture{ border:1px solid black; padding:5px; } i had this problem before where the picture wont stay in the border , but i forgot how i fixed it the first time .can someone help
  19. when to use Position Relative

    it says that position relative and absolute go when you want to adjust some text or a picture without messing with other divs in the container the way i adjusted things before would be to create a div (for example) and then put another div-class(that would be the picture) and another div-class that would hold a paragraph ,and then i would use margins and padding to adjust them along with display and stuff like that. since i found out about position relative and absolute im just wondering if i could use that instead of all of the above that i just wrote .
  20. w3.css: w3-panel breaks CSS Grids

    FYI: The w3-panel class breaks CSS Grid Layouts if added to an element with display: block, by creating an empty, unstyled element at the beginning of the grid. Creating a wrapper element and adding w3-panel to _that_ works, but is a cludge.
  21. is there a better online resource to test responsive design modeling than the Safari browser's RD option?
  22. Footer won't stick to the bottom (URGENT)

    Hello... I have a footer that won't stick to the bottom of the page. On laptops it looks like it is on the bottom but when I check the site on bigger screens it shows higher. I have uploaded a pic with the problem. Thank you in advance.
  23. Hi, I am going through bootstrap 4 alpha version. But when I tried to create a simple modal I found that it doesn't work in my browser. Can anyone find out what is wrong I am doing? The problem is fixed. It was causing problem because of incorrect data-target attribute. <!DOCTYPE html> <html lang= "en-US"> <head> <meta charset= "utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name= "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit= no"/> <title> . Bootstrap</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body> <div class= "container"> <div class= "row"> <div class= "col-12"> <h1 class= "alert-info">Live Demo</h1> <div class= "w-100"></div> <button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#liveModal"> Go Live </button> <div class= "modal fade" tabindex="-1" id= "liveModal" role= "dialog" aria-labelledby= "liveModalLabel"> <div class= "modal-dialog" role="document"> <div class= "modal-content"> <div class= "modal-header"> <h5 class= "modal-title">Modal Title</h5> <button class= "close" type="button" data-dismiss= "modal" aria-label= "Close"> <span aria-hidden= "true">×</span> </button> </div> <div class= "modal-body"> <p> Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. </p> </div> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </body> </html>
  24. CSS SubMenu modification

    Hi, Need some CSS help regarding SubMenu creation. I have this below code for responsive Main Menu which is working fine. I need to create a SubMenu under the main menu. For example :- Menu2 will habe two submenu like Menu2_SubMenu1 & Menu2_SubMenu2. The color, format and hovering effect will be same like Main menu. Can you kindly help me out with the CSS for the same. I am messing up with the Submenu CSS code code. Thanks in advance for your help. Regards, Ari. Here is the WORKING code where I would like to include sub-menu.( for example under **Menu2**). <!DOCTYPE html> <html> <head> <style> body { margin: 0; } ul.topnav { list-style-type: none; margin: 0px; padding: 0; overflow: hidden; background-color: #2D5C88; text-align: center; /* For fixed header */ position: fixed; width: 100%; z-index: 1000; } ul.topnav li { display: inline; } ul.topnav li a { display: inline-block; color: #fff; text-align: center; padding: 8px 30px 8px 30px; text-decoration: none; transition: 0.3s; font-size: 13px; font-family: 'Verdana', Geneva, sans-serif; } ul.topnav li a:hover { background-color: #33699b; } ul.topnav li.icon { display: none; } @media screen and (max-width:680px) { ul.topnav li:not(:first-child) { display: none; } ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive { position: relative; } ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } </style> </head> <body> <ul class="topnav" id="myTopnav"> <li><a class="active" href="google.com">Menu1</a></li> <li><a href="http://www.gogle.com">**Menu2**</a></li> <li><a href="http://www.gogle.com/">Menu3</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> </li> </ul> </body> </html>
  25. Stylng Multiple Lists

    I have 2 lists I am trying to complete in my website. The first list I have is a navigation bar that runs horizontally. I have all of the css and html for that. In addition, under my gallery division I am trying to add another list to replace my table and make it layout similar to the table. When I add my list it is effected by the navigation bar css. To remedy this I added a class to the division that carries nav bar and added that syntax to my list css such as <div class="nav"> and nav, ul {}. This doesn't seem to be helping though. I don't want to give a class for every li or ul and I'm sure it is an easy fix but I need some help. <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .header, .footer { background-color: #333;; color: lightgrey; padding: 50px; clear: both; } a {color:white;} .clearfix::after { content: ""; clear: both; display: table; } nav, ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } .nav, li { float: left; font-family: arial; } .nav, li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } #border1 { border: 3px solid #2990EA; padding: 10px; } .birthday { float: left; margin-right: 100px; margin-left: 400px; width:500px; } .footer a { text-decoration: none; clear: both; } .column { background-color: #ebecf6; overflow: hidden; clear: both; } .container { background-color:#909ca2; } div.gallery img { width: 300px; height: 250px; padding: 5px; float: left; margin-bottom: 50px; } .gallery1 { margin-left: 500px; } .table1 { padding:100px; } th { font-size: 200%; } tr { font-size: 150%; } tr, p { margin-left: 200px; } </style> </head> <body style="font-family: sans-serif;"> <div class="nav"> <ul> <li class="li" style="float:right"><a href="#about school">ABOUT SCHOOL</a></li> <li class="li" style="float:right"><a href="#about family">ABOUT FAMILY</a></li> <li class="li" style="float:right"><a href="#about me">ABOUT ME</a></li> <li id="border" style="float:right"><a href="#home">HOME</a></li> </ul> </div> <div class="header"> <h1 style="color: #e9cf76;text-align:center;font-size:300%">About Me</h1> </div> <div class="container"> <div class="gallery"> <img class="gallery1" src="bun.jpg" alt="Trolltunga Norway" width="100" height="100"> </div> <div class="gallery"> <img src="3eb.jpeg" alt="Trolltunga Norway" width="100" height="100"> <div class="gallery"> <img src="westworld.jpg" alt="Trolltunga Norway" width="100" height="100"> </div> <div class="list1"> <ul> <li>Technology Teacher</li> <li>Previously a Manager</li> </ul> <ul> <li>Lamb Karahi</li> <li>Pho Thai</li> </ul> </div> <div class="table1"> <table style="width:100%"> <tr> <th>Job</th> <th>Food</th> </tr> <tr> <td><p>Technology Teacher</p></td> <td><p>Lamb Karahi</p></td> </tr> <tr> <td><p>Previously a Manager</p></td> <td><p>Pho Thai</p></td> </tr> </table> </div> </div> <div class="column content"> <img class="birthday" src="birthday.jpg"> <h1 style="text-align:center;font-size:300%">Who am I?</h1> <p style="font-size: 150%">I have two children and a third on the way. My oldest child's name is Harper and her brother is called Nolan. The third baby gender is a mystery to all but me, and no I won't tell you! Minus the lack of sleep being a parent is the best thing that ever happened to me.</p> <p style="font-size: 150%"> teach technology at MMSA. I am one of the few teachers who can say that they have taught every single grade level. I graduated from Wayne State University with a Bachelor's Degree in Secondary Education in 2011. I have been teaching since 2013. </p> </div> </div> <div class="footer"> <p STYLE="text-align:center"><SPAN id="border1"><a href="https://www.weebly.com/" target="_blank">CREATE A FREE WEBSITE</SPAN></a></p> </div> </body> </html>
×