Search the Community
Showing results for tags 'header'.
-
Hello, I appreciate nice html5 layout examples, e.g. https://www.w3schools.com/html/html_layout.asp (source code with new html tags like header, section, nav and others: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float ), but in many examples in css section are still old div tags with classes like .header and so on, e.g. here: https://www.w3schools.com/css/css_website_layout.asp or here https://www.w3schools.com/howto/howto_css_style_header.asp . I think this could be change to newer html5 code, for example this code with divs: https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_grid to code in attachment, which is easier (I hope :-) css-layout.html
-
Hi W3schools. Im a new user and I dont know where I should write this so I write it in general. I have two things I need help with. The first one is that I created an account on your website w3schools, not here on the forum (maybe they're the same I dont know?). But I havent received any verification e-mail from your side. So when I try to login with the email and password I registered with it just says; "Your account has not been verified yet". I dont know what to do? The second thing I wonder about is how you managed to hide your header on scroll down and at the same time have the navigation bar stick at the top afterwards? Ive attached a picture to illustrate which header above the navigation bar I mean. Does it require Javascript to do this or just HTML and CSS? Would be super nice if you guys could illustrate with the code needed. Because I think this feature is very nice and I would like to use it myself. Thanks in advance. /Webmike
-
Hi *** MY CONFIGURATION *** PHP 7.2.24 WBCE CMS 1.4.23 TEMPLATE : Acourdesz (horizontal accordion header) The “Acourdesz“ template comes with a horizontal accordion header that panes are opening on following mouse cursor movement detection : left to right and reversely ; up to down and reversely. I think that one may better reply to my question hereafter, knowing the accordion code structure from this demo page : http://www.dynamicdrive.com/dynamicindex17/haccordion.htm My wish is to prevent the panes opening when the mouse cursor is moved from up to down and reversely, so that panes only opens when mouse cursor is moved from left to right (and inversely). To achieve this, I may use one of my CMS add-on module that allows to include PHP, JS, or HTML code to a template or page (screenshot) : https://addons.wbce.org/pages/addons.php?do=item&item=37 Can someone help me to know what coding string to include using this module, so that it constrains the accordion to behave as I wish it to ? Regards -
Hi, I'm an absolute beginner 🙂 I have this header that I would like to have on all my pages, iframe not, the link starts in a new iframe. Include I can't make it work, I've tried this, https://www.w3schools.com/howto/howto_html_include.asp but can't make it work. Header: <!DOCTYPE html> <html lang="dk"> <head> <title>Header</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="w3.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <meta charset="utf-8"> <style> </style> </head> <body> <!-- Top menu --> <header class="w3-top"> <div class="w3-white w3-xlarge" style="margin:auto"> <div class="w3-padding-16 w3-left" style="margin-left: 10px;"> <a href="index.html" class="logo"> <img src="Billeder/Logo/logo_ny.png" alt="logo" height="80" width="220" > </a> </div> <div class="w3-right w3-padding-16"> <a href="index.html"> <ul class="w3-ul"> <li class="w3-xxlarge"><i class="fa fa-home"></i></li> </ul> </a> </div> <div class="w3-center w3-padding-16"> <h2 style="font-size: 25px; font-weight: bold;">Hvad vi kan bidrage med.</h2> <p style="font-size: 10px;">Siden er under opbygning, vi koder alt selv i "rå" Html,css. <br /> Ikke optimeret for Mobil og tablet endnu. </p> </div> </div> </header> </body> </html> Page: <!DOCTYPE html> <html lang="dk"> <head> <title>Elowsson</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="w3.css"> <meta charset="utf-8"> <style> </style> </head> <body> <!-- Top menu --> <!-- <header class="w3-top"> --> <!-- <iframe src="Header.html" style= "border:none;" width="100%"> <p>Your browser does not support iframes.</p> </iframe> --> <!-- </header> --> <div class="w3-main w3-container"> <div class="w3-bar w3-black"> <a href="lasersk.html" target="_parent" class="w3-bar-item w3-hover-green">Laserskære</a> <a href="3DPrinter.html" target="_parent" class="w3-bar-item w3-hover-green">3D Printer</a> <a href="LeicaBLK360.html" target="_parent" class="w3-bar-item w3-hover-green">Leica BLK360</a> <a href="Drone.html" target="_parent" class="w3-bar-item w3-hover-green">Drone</a> <a href="Fusion360.html" target="_parent" class="w3-bar-item w3-hover-green">Fusion 360</a> <a href="Autocad.html" target="_parent" class="w3-bar-item w3-hover-green">Autocad</a> <a href="SolidW.html" target="_parent" class="w3-bar-item w3-hover-green">Solid Work</a> <a href="Marstercam.html" target="_parent" class="w3-bar-item w3-hover-green">MasterCam</a> <a href="VRBriller.html" target="_parent" class="w3-bar-item w3-hover-green">VR Briller</a> <a href="TDyr.html" target="_parent" class="w3-bar-item w3-hover-green">Trædyr/Træting</a> </div> </div> <br> <footer class="w3-container w3-teal"> <h5>Footer</h5> <p>Footer information goes here</p> </footer> </body> </html> Edwin
-
Hi The guide on making a scrolling header is great, but it relies on javascript running every time you scroll. That is really expensive (resource-wise) and contributes to a laggy an unresponsive website. I think the guide should be updated to use sticky css-elements instead of js. This method does not have the same performance issues, and I'd argue it's an easier and more elegant solution. The new guide is pretty much already written here. The support for sticky elements is not perfect, so there is a discussion to be had about whether to prioritize browser support or performance, but i think at the very least the page should have a yellow box, mentioning that the sticky element is a better solution.
-
Hey there, I am having a bit of an argument with myself on how best to organize a general page, in this specific instance for a blog. Reading online you get many different perspectives on how to organize the page, however generally you get something like this: <header> <nav> </nav> </header> <main> <article> <h2>Heading</h2> <p>Date: YY/MM/DD</p> <p>Author: Name</p> <p>Article Content</p> </article> </main> <aside> </aside> <footer> </footer> The article block would typically repeat for how many number of articles are on the page. Looking further online, reading the spec and understanding a big more how article, sections, and the like work I have come across other layouts like such: <header> <nav> </nav> </header> <main> <section> <article> <header> <h2>Heading</h2> <p>Date: YY/MM/DD</p> <p>Author: Name</p> </header> <p>Article Content</p> <footer> <p>Copyright Info</p> </footer> </article> </section> </main> <aside> </aside> <footer> </footer> This can even get further complicated with the introduction of comments, article navigation, etc. I am curious to hear from you all what is your preferred way to handle this sort of organization? Cant wait to hear back! Thanks! -
BACKGROUND: I have a confirmation page to which I would like to pass the values of two PHP variables via PHP's header( ) function. QUESTION: Can this be done with normal query statement say something on the following order: header('Location: ../../gate_confirmation.html?name=w3schools&msg=msg_success'); Roddy -
I am developing a single page website that scrolls to each section when selected, live example: http://sandbox.digitango.com/ The issue I am having is with the sticky header, when you click the first link "Why AMAC" it will send you to the first section BUT when the header changes to fixed position it covers the content. I searched google reading a ton of articles but nothing seemed to address this issue, maybe I am missing the correct term for what my issue is. Is there any solution you know of that can fill the gap for when the header changes to fixed? - Image one - what the problem looks like - Image two - how I would like it to look
-
DISCLAIMER: After seeing what has been written on the internet on this subject I am loathe to start here, but have I any other choice? QUESTION: The PHP header(location: './sample.html'); is telling me that my headers have already been sent and is referring me back to the beginning of my PHP script. Can I buffer my way out of this mess? If so, Where to I start and stop the buffer? Where do I place the header( ) function? BACKGROUND: I have just spent several weeks setting up an email verification system and am putting on the decorative touches. Truly, I thought that I had almost reached the end; truly I fear now that I am far from finished. I hope that I am wrong.
-
Hello When i use a facebook share url on my site on Wordpress, it picks the title of my site, the sub-title and then it picks the first image of the site. How can i choose the pic to be displayed, what if i want to show a special picture like a logo or something whenever i want to share my site on Facebook? How can i do it?
-
Hi all, I just finished a webdesign course for home study. Now I am working on my first assigment but it's going quite the way I want... I want to use a background image in my header div. Here is my code, what am I doing wrong? Can anybody help me please? Thank you! my CSS: #header { background-image: url(header.jpg); background-size: cover; background-position: fixed; text-align: center; width: 100%; height: 200px; top: 100px; } HTML <div id="header"> <header> <div class="nav"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Classes</a></li> <li><a href="">Contact</a></li> </ul> </div> </header> </div>
-
Dear all: I have a header with 60% width occupied by a video, to the right of which is an aside section taking the remaining 40%. The aside section has three items fixed horizontally on top of each other. So the header has four elements in total. To account for possible overlaps between the four elements, I declared a z-index of -1 to the top right element, with the rest elements getting z-index 1 to 3. Then the element with z-index -1 disappeared. I then gave it z-index 1 and gave the others 2-4. Why has z-index -1 caused the element to disappear?
-
Dear all, I have a code that is almost complete, but I am still struggling with header elements, and I am in desperate need for help. The site is using the box model and is responsive; Header area is 980px in width, 275px in height. A YouTube video is linked, occupies 60% of the left width and takes the full height (275px) I am struggling with the remaining 40%, in which I want: At its bottom, a horizontal link box: height 75px, width 40% of the window, with 'Try the Offer' text. Above the horizontal link two h1 lines on top of each other. Top h1 reads: Experience a Unique Offer. Below h1 reads: Try it First. At the top right corner, vertical flags for language links (e.g. US, France, Germany, etc.), all floating to the right. I tried many attempts, but all failed. I would appreciate your help. Below html and css code. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content = "text/html; charset=UTF-8" /> <meta name = "viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" /> <title><?php // Use a default page title if one wasn't provided... if (isset($page_title)) { echo $page_title; } else { echo 'Select From Our Amazing Producs!'; } ?></title> <link rel = "stylesheet" type="text/css" href="css/screen_layout_large.css" /> </head> <body> <!--Start of main page container--> <div class = "page"> <!--Start of main header--> <div class = "home_page_header"> <!--header of other pages is different --> <header> <iframe class = "mnvid" src="https://www.youtube-nocookie.com/embed/KSdk6poA4Ig?rel=0" frameborder="0" allowfullscreen></iframe> </header> <div> </div> </div> </body> </html> @charset "UTF-8"; * { margin: 0px; padding: 0px; } body { color: #575c7a; line-height: 1.5em; font-family: Arial; font-size: 14px; /* base font*/ background: #515673 repeat-x 0px 0px; } .page { max-width: 980px; margin: 0px auto 0px auto; position: relative; background-color: #fff; } .home_page_header { margin: 0px auto; height: 275px; } header { height: 275px; background-size: 980px 275px; background-color: #a6430a; } .mnvid { /*main video*/ width: 60%; height: 275px; margin: 0px; display: inline; vertical-align: middle; }
-
Hello everyone! I've got 6 details I wish to improve through my WP theme, Evolve. And I guess I need some CSS for them but I'm not good enough right now to do it all alone... So, I'm asking for your help today! I hope I'm not asking to much... Here is my (french) website : le-chemin-du-butterfly.fr 1. You can see I've got a widget on the right of my page. I'd like to resize it to give more space to my text (right now, it's 66% and 33% and I would like 75%-25%). I tried some things but I have to made it so that it still responsive. But I don't know how... I guess I have to add some If or And but.. how? 2. Again with this menu, I would like my text to be around it. Right now, the text is only in its column and doesn't go under the widget when it's after it. Menu and text are truly separated in two columns 3. Talking about menu, you can see I've got 2 links in my header ("Une Histoire de Bouquins" and "The Voyage"). What I'm looking after is to duplicate it on the right to add other links... But I guess it's HTML rather than CSS and I need to configure the theme itself for this right? But then, have you tips for me to do so? 4. I've got a search bar in the header but on small screens this search bar doesn't show very well: the text that's shown when you click on the button is shown... all time on small screens. So, it's not very... Professional. 5. I ran the plugin Livefyre for the comments but since, the "Leave a comment" (Laisser un commentaire) doesn't scroll down to the comments menu, because the anchor is #respond and not "#comments" or "#livefyre-comments" as the Livefyre's Support told me. So, how I can I manage that? Here is a link to an article for an example I know I'm asking a lot (especially for a first message!) but I've to say I'm kind of lost in all of this. I'm learning HTML/CSS from not so long and I can't figure out how to do this... Thank you a lot in advance!And see you
-
I used to know how to do this, but I'm having problems getting the nav bar for a website I'm making working. I can't get the nav bar to sit inside the header, even though it is inside the header tag. Example: I'm also having trouble with that white space at the top, but the big problem right now is the nav bar. Here is my HTML and CSS code for the above:
-
I've created a php file that gathers data from my SQL tables and creates a multi-sheet Excel workbook file in XML. I started this process by creating the file as I wanted it to appear using MS Excel 2010 and saved it as a XML file. I then wrote my PHP code to dynamically create the MS Excel XML file. In internet Explorer 11, when this is done, the file opens as a MS Excel file. My problem is that it doesn't work in Firefox (Version 31.0). In Firefox, it prints out on the screen as an unformatted XML file with the following message above the screen - "This XML file does not appear to have any style information associated with it. The document tree is shown below." I think the problem is in my header. This is the way the opening of my PHP file appears now: <?phpheader("Content-type: text/xml");echo "<?xml version="1.0" encoding="UTF-8"?><?mso-application progid="Excel.Sheet"?>";?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:html="http://www.w3.org/TR/REC-html40"><-- More code follows --> Any help you can offer will be welcome!
-
Hey Guys... I really dont undertand th use of <div> tag in and meaning of "container" in:- <div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;"> If there is a link to w3schools then plz post..Please HELP!!!!!!
-
hi guys, here i'm again! soo this time i have a more complex question (i think). I made a simple form site who works fine on the local server (except the part of the email who never came!). I was trying to put the files on a server and use the email account that the server provide me to receive the emails from my form site, then i found a strange error, my headers functions don't work on the server (with 1 exception), after a few minutes on google i found some answers with .php but any of them work, soo here i'm asking for some light here is one of the headers who doesn't work $resultado = mysqli_query($conexao,$sql);if($resultado){ $_SESSION['usuario_logado'] = $linha['IDUSER']; header('Location: test.php?info=User created and loged KEEP SAFE YOUR USERNAME');} and here is the only one who works <?php session_start(); if (!isset($_SESSION['usuario_logado'])) { header('Location: home.html'); exit; }?>//this verify if a user is loged i tried to use ob_start(); but then i just have a blank page if anyone can help me will be awesome!
-
Hey guys, this is probably a newbie topic, but I can't seem to get the header to work for a website I'm making. I want to have it the where the div tag (or any other tag if it's better suited) be flush with the sides of the screen, much like it is on this site, and many others, such as the face punch forums. I have have tinkered, fiddled, and even copied directly from templates, in an attempt to make it do this. Butt every time, theres ALWAYS a 10px gap to the left side of the box. I have done and researched all I can, and I still cannot figure out why this is happening. What do I have to do to make it work? Also, sorry if I sound annoyed. I have been fighting this for almost 2 full days now with no results.
-
Hi, I'm new programming with PHP and I am having this problem : Here are the codes : <?php if (isset($_GET['success']) && empty($_GET['success'])) { echo "<br>"; echo "<h4>You have been registered successfully.</h4>"; } else { if (empty($_POST) === false && empty($errors) === true) { // $register_data = array ( 'username' => $_POST['username'], 'password' => $_POST['password'], 'first_name' => $_POST['first_name'], 'last_name' => $_POST['last_name'], 'email' => $_POST['email'] ); register_user($register_data); header("Location: admissions.php?success"); exit(); } else if (empty($errors) === false) { // Print error echo output_errors($errors); } ?> // End of the codes... Everything is working fine at my PC as localhost, but I put it's not working fine with my hosting. I mean, the header("Location: admissions.php?success"); works fine at my localhost, like reloading the page with SUCCESS, but with the hosting, then the admissions.php?success is not executed, is showing me a blank page. If I type the admissions.php?success at the browser, then it shows me the page... How can I fix that problem ? Thanks
-
I am trying to copy and paste code from our footer and place it into our header. We wanted to move the social media icons from the bottom to the top of the page, among other things. There are a lot of div tags and a few CSS class tags as well, in the footer. However, I copied only the link and imagde code into the header so that it doesn't try to link to class and css for the footer. My problem is that when I put the code into my header, it ends up bliowing up the first icon and discplacing everything else on the page (in fact, everything else is now missing completely. See the image I've uploaded.) I've tried resizing manuaaly using style="width:;height:;" and I've tried using the width and height within the img tag itself, but nothing is working. The website is www.cleantelligent.com. I can't find any styling within the header that would be affecting this either. We want the social media icons right under the "get started" button. Any thoughts would be very helpful. Thanks!
-
Hi folks, Is it possible to place the entire header on page www.uworlds.net into a CSS? In other words, include (1) the image banner (2) the AddThis share code at the very top which contains javascript and (3) the text at top right? Or can javascript simply not be included in CSS and maybe this could be achieved through an include somehow? Any advice will be greatly appreciated. Kind regards,uworlds
-
Can someone help me figure out how to create the navigation displayed in the header on top of this page? http://themes.iki-bir.com/ikaros/ If someone could give me some direction to learning how to make these types of navigations, I'd really much appreciate it.
-
Hello, I'm new to html but have been put in charge of updating my companies website. I need to change the header and page marker on the site from blue to orange. After discovering the stylesheet I was able to see that these were actually .jpg and .gif files which is why I wasn't able to just insert the colour name (#FF7519) I wanted. I am not sure how to go about making these and do not seem to be using the correct terminology to find the answer through google. Can anybody assist? I'm using a Mac but do not have photoshop. Header file name: top_bg.jpg Page marker file name: button_on.gif I would like them exactly the same, just with a colour change. Thank you in advance. I apologise if this is posted in completely the wrong area.
-
Hi everyone, I'll keep this short. And I appologise in advance because I'm sure this problem has been solved before (I just can't seem to figure it out). I am not great with HTML but I would say I'm decent. The first picture you can see my header goes the full 100% width. The second picture shows that if you minimize the browser so that you have to horizontally scroll that the header disappears behind the navigation. If you want you can go to my site now and test it out (It's still being created so bare with me). www.bbeckwithdesign.com I want the header to always be at the top with the navigation (not fixed where it stays at the top of the window, but instead at the top of the page) I want the header to always be 100% width of the page no matter what size. I guess I should also mention I want my navigation and title along with my main body to be relative where they stay centered on the screen (960px) One last thing, my favorite icon work on all browsers except for IE. Any code snippits that would take care of that??? Thanks for the help guys. Brad B.
