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

  1. I have noticed that using the @media screen tag behaves differently with the direction in which the window or viewport is resized. Intuitively, one would expect that widening the window or viewport would undo whatever occurred when the window was narrowed. This is not, how it works, however. Is there a general rule of thumb to implement directionally symmetric changes? Roddy
  2. Multiple Slideshows on one page

    Hi everyone. I need help. I am using this slideshow https://www.w3schools.com/howto/howto_js_slideshow.asp for a new site I'm building. I want to to put multiple slideshows on the same page. I can't seem to find out how to target each java script to each slideshow. What happens is that each "dot" will change the pictures on the same slideshow. Let me know if you need any other details. Thanks so much in advance!
  3. W3.css Tabs

    Hi, I am using the w3.css tabs and have a customised cursor. However the cursor will not work over the tabs. What do I need to set to get it to work over the tabs also?
  4. While refreshing my knowledge about CSS I noticed the CSS box model is explained in the following order: Borders Margins Padding Height/width Box model Outline First all components of the box model are explained in depth and afterwards a general overview is given (5: box-model). For me as a reader this was confusing, since I didn't get the main concept until reading the "box-model" page and actually had to go back and reread the margins/padding section to thoroughly understand the system. I therefore suggest changing the explanation order to: Box model Height/width Padding Borders Margins Outline For me personally this would make more sense, since first the general concept of the box model is given, and afterwards all individual concepts are explained in depth (going from the inside to the outside of the css box). Any opinions about this?
  5. @media queries not working

    Hello! I am new to html and css, and am having an issue with media queries! I am just trying to get my site to be responsive for these three different px sizes and cant get it to action. I reverted from the second css media query shown below because it was not working at all, not even showing any attempt to change when inspected in the browser. Am I missing something? Thanks! My @media is as shown: @media screen and (max-width: 980px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 640px) { } I had but reverted to the above when nothing was taking effect.. @media screen @media screen (max-width: 640px) { #cwm { width: 550px; margin: 10px; } } My html : <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="../Basic-Portfolio/assets/css/style.css"> <!--script type="text/javascript" src="../Basic-Portfolio/assets/Java/slideshow1.js"></script--> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>The Nerdadian</title> </head> <body> <header> <div class="navBar"> <nav> <ul class="header"> <li><a class="home" href="default.asp"><h2>Tanner Martin</h2></a></li> <li><a class="nav" href="../Basic-Portfolio/index.html">About</a></li> <li><a class="nav" href="../Basic-Portfolio/portfolio.html">Portfolio</a></li> <li><a class="nav" href="../Basic-Portfolio/contact.html">Contact</a></li> </ul> </nav> </div> </header> <br> <br> <br> <div class="standard"> <div class="block"> </div> <br> <div id="aboutme" class="standard"> <h1 id="H2">About Me</h1> <br> <img id="img1" src="../Basic-Portfolio/assets/images/ME!.jpg"> <br> <p id="P1"> Hello! My name is Tanner Martin. I was born in Texas, but lived in Canada for my Junior High and High School life, so I consider my self Canadian :). None of you know this, but I have an amazing little girl named Olivia!She will turn one on October 5th. I am going to teach her to be a gamer, programmer, and just generally awesome, though she already has the awesome part covered.</p> <p id="P2"> I am a nerd of sorts, I collect video game memorabilia, figures of various genres, i computer game, and build my own PCs. My most played game at the moment would either be Diablo 3, or PuBG (Player Unknown Battlegrounds). I just started playing a new game called Depth, if I were to describe it, you would probably think it is lame; So i suggest you try it out for yourself. Recently I have had to startselling my figures, so my collection isn't what it used to be, but here is an old picutre for reference.. (Still not complete collection) <br> <img src=""> <br> </p> <div class="slideshow-container"> <div class="Slideshow1"> <div class="numbertext">1 / 3</div> <img src="../Basic-Portfolio/assets/images/domo-will-eat-you.jpg" style="width: 100%"> <div id="text1">Domo Will Eat You!</div> </div> <div class="Slideshow1"> <div class="numbertext">2 / 3</div> <img src="../Basic-Portfolio/assets/images/dunnykings-orders.jpg" style="width: 100%"> <div id="text2">Dunny King's Orders..</div> </div> <div class="Slideshow1"> <div class="numbertext"> 3 / 3</div> <img src="../Basic-Portfolio/assets/images/old-collection.jpg" style="width: 100%"> <div id="text3">Old Collection</div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("Slideshow1"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display="block"; dots[slideIndex-1].className+="active"; } </script> <p id="P3"> I love to travel! My goal is to live on every continent for at least 2 years by the time I pass away. I lived in Greece for three months, so Europe has been partailly completed! Even though I was born in the US, I lived in Canada for my JuniorHigh and High School careers. If you would like to contact me, drop me a message <a href="contact.html">Here!</a> </p> </div> <div id="cwm"> <h3>Connect With Me</h3> <a href="https://github.com/Twmartin1147"><img class="img2" src="../Basic-Portfolio/assets/images/github-sq-bl.png"></a> <a href="https://www.linkedin.com/in/tanner-martin-1147/"><img class="img2" src="../Basic-Portfolio/assets/images/linkedin-sq-blu.png"></a> <a href="https://stackoverflow.com/users/8673657/tanner-martin"><img class="img2" src="../Basic-Portfolio/assets/images/stackoverflow-sq-yel.png"></a> <br> </div> </div> <footer> </footer> </body> </html>
  6. Hey all, When I ran my project today, I noticed everything was all jumbled, and I hadn't changed anything. Loaded backups and still the same problem. It seems my CSS link to https://www.w3schools.com/w3css/4/w3.css has stopped working. Obviously I visit that link and loads in my browser. When I download the CSS locally and run it, it doesn't behave like it did before, and it looks like w3.css hasn't been updated since April. The new behavior with the downloaded/local CSS: Different font throughout the page Nav bar dropdown ) w3-dropdown-hover larger font/placement the regular navbar w3-button menu items Some text-decoration issues Navbar now animates in a different manner This is all with a local copy of the CSS. The web link to <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> doesn't work at all anymore. Anyone experiencing anything like this? What changed? UPDATE: I am using PHP and running a mock server via XAMPP (Apache). When I change a backup file to .HTML is runs just like it did before. Any ideas? Thanks. It shows up red under network with no status code, this is all the info it give me. Request URL: https://www.w3schools.com/w3css/4/w3.css Referrer Policy: no-referrer-when-downgrade Provisional headers are shown Referer: http://pathtomyfile User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36 SOLVED: It was a Chrome extension: Privacy Badger. Why it suddenly started denying requests to W3 I have no idea. It also seems to be the cause of the change of formatting, text-decoration and other weird things. Gr...
  7. Loading time of my website( interpool ) is comparatively high. results are showing that around 29% of viewers will lose. loading time increase because of javascript and CSS rendering. If i block some of the javascript and css does it affect in search. what is the simple remedy.
  8. We're a small manufacturer. We need to create a form that allows a visitor to pick a few machine options and the form would generate the specs based on those choices. The customer wouldn't be ordering online -- it's just for reference purposes. I know it's embarrassingly simple but I've spent two hours digging around and I don't even know what you would call that type of form let alone find any examples. We, of course, need it to look good on a mobile device. Does anyone know of a site that I might find an example or what you would call a form like that so I can find one myself? Any help would be greatly appreciated. For example: 1. Choose series: Medium Duty Heavy Duty 2. Choose Equipment: Modular Complete T-14 R-10 T-24 R-15 T-34 R-25 Output based on the above choices: Capacity = Stroke = Thrust=
  9. This property doesn't work in latest Firefox and Chrome. The information is contradictional: w3.org, msdn.microsoft.com and developer.mozilla.org have the information on this property, although I can't find it on w3schools, it also doesn't seem to be working on TryIt Editor Sandbox. Anyone has this feature working in any browser?
  10. Dropdown menu

    Hey , I have a problem with the positioning of my dropdown menu .. All is working fine but when I hover with my mouse the dropdown doesn't paste the initial menu . If someone could help me <html> <head> <style> #nav ul{ display: table; margin: 100px auto; width:700px; padding: 0px; font-size:25px; font-weight:bold; background: Gray; background: -webkit-linear-gradient(Gray, DarkGray); background: -moz-linear-gradient(Gray, DarkGray); background: -ms-linear-gradient(Gray, DarkGray); background: -o-linear-gradient(Gray, DarkGray); background: linear-gradient(Gray, DarkGray); border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15); } #nav ul li{ display:table-cell; } #nav ul li a{ display: block; text-align: center; color: rgba(0, 0, 0, .7); padding: 8px 8px 17px 8px; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); box-shadow: 0 1px 0 rgb #A9A9A9 inset, 0 -1px 0 hsl(210, 100%, 32%) inset, 0 -2px 0 hsl(210, 100%, 38%) inset, 0 -3px 0 hsl(210, 100%, 44%) inset, 0 -4px 0 hsl(210, 100%, 50%) inset, 0 -5px 0 hsl(210, 100%, 60%) inset; } #nav .divider-vertical{ border-right: 1px solid grey; } #nav .elem { display:none; position:absolute; width:inherit; } #nav .elem li{ background:#262626; display:block; text-align:center; } #nav .elem a{ color: white; font-size:25; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); } #nav li:hover > .elem{ display:block; } </style> </head> <body> <div id="nav"> <ul> <li><a href="#">a</a></li> <li class="divider-vertical"></li> <li><a href="#">b</a></li> <li class="divider-vertical"></li> <li><a href="#">c</a></li> <li class="divider-vertical"></li> <li><a href="#">d</a> <ul class="elem"> <li><a href="#">d1</a></li> <li><a href="#">d2</a></li> <li><a href="#">d3</a></li> </ul> </li> </ul> </div> </body></html>
  11. Responsive Table Help

    Hello On this page, i want the table to be responsive. Can you please help me what should be the code? https://4thdownmagazine.com/harrisburg-2017-schedule.html
  12. 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); }); }
  13. 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.
  14. 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; }
  15. 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.
  16. 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
  17. 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.
  18. 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%; } }
  19. 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
  20. 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.
  21. 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
  22. 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
  23. 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...
  24. 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!
  25. 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; } }
×