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 696 results

  1. 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.
  2. 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; }
  3. 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.
  4. 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
  5. 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.
  6. 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%; } }
  7. 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
  8. 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.
  9. 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
  10. 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
  11. 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...
  12. 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!
  13. 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; } }
  14. 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
  15. I want to know about CSS Coding that how it works and who it will help me to build website?
  16. 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.
  17. <!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
  18. 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 .
  19. 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.
  20. is there a better online resource to test responsive design modeling than the Safari browser's RD option?
  21. 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.
  22. 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>
  23. 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>
  24. 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>
  25. Hi. I am familiar with some HTML but my knowledge in Javascript, JQuery and CSS is very limited. I have been learning from examples on the web and making my own changes. Please see the fiddle I am working on below; sorry if the full code is messy! https://jsfiddle.net/djj2c84t/ There are a number of features I wish to implement but I am totally stumped! I have gotten as far as I think I can with the fiddle above and it would be more than appreciated if anyone can provide any help, possibly with any example code and where the code needs to go. When I make a multiple selection from the list, how do I get the results (divs) to show in order of most recent selection at the top? For example, if I multi-selected in the order Nuts, Meats, Vegetables, Fruits, how do I get the results (divs) to appear in the order Fruits, Vegetables, Meats, Nuts? At the moment they appear in the order that they are listed in the box. I would also like to ask if it is possible to keep the results (divs) showing for all the items selected even after a new search is performed and a new selection made. For example, if I search for 'F' and select 'Fruits' and then search for 'V' and select 'Vegetables', can I have both the 'Vegetables' and 'Fruits' divs showing in the results? At the moment, 'Vegetables' replaces 'Fruits'. If this is possible, would it also be possible to have the selected items in the list remain highlighted even after a new search is performed? For example, after making the above searches/selections, if I then search for 'ts', the list would show 'Fruits', 'Nuts' and 'Meats', but I would like 'Fruits' to still be highlighted and to be able to close the 'Fruits' div by de-selecting 'Fruits' from the list or clicking the Close (X) button on the 'Fruits' div itself. There are a few other things I have not been able to solve but I will refrain from posting too many questions at once. Any help would be greatly appreciated! Thank you.