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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 751 results

  1. iwato

    Improperly Displayed Submit Button

    BACKGROUND: Now that I have finally got my responsive design to function properly. I did a little exploration of my site from my new iPhone 5 that a colleague gave me.to replace my broken "obsolete" iPhone 4. What I discovered was the unusual appearance of one of my form input controls. Although the submit button appears correctly on my still functioning "obsolete" MacBook, it does not appear correct on my new, not yet "obsolete" iPhone. When I investigate the matter with Firebug I am told that there is event bubbling. Now, I am not at all sure that this is the source of the problem. Neither, am I clear about how the bubbling is being created. This is the first time that I have encountered such an issue. TROUBLED DOCUMENT: 1) Open the Grammar Captive mainpage in your smartphone. 2) Find the text Weekly Podcasts under the Products subtitle in the navigation bar on your left and click on it. 3) Scroll to the bottom of the form located toward the bottom of the page and discover that the value of the button -- namely, Discover! -- is partially hidden. The width of the button is clearly not wide enough to display the entire value of the value attribute. QUESTION ONE: Why does the value attribute display correctly in my browser window on my "obsolete" MacBook, but not on my not yet "obsolete" iPhone? QUESTION TWO: If bubbling is the source of the problem, what must I do to fix it? Roddy
  2. iwato

    Responsive Design Dysfunction

    BACKGROUND: Within two weeks of my iMac hard disk failure I also lost my iPhone due to a failed power socket. People simply do not service what Apple calls "obsolete" equipment. Although I have yet to replace my iMac, one of my colleagues had an iPhone 5 that he was no longer using and gave it to me. With his new phone in hand I went straight to the Grammar Captive website only to discover that what worked well in a device simulator does not work well at all in the real-life device. Now, my website is divided into five parts: a banner, a navigation bar, the main content section, a side bar with RSS feeds, and a footer. When the viewport is small, the aforementioned divisions are supposed to build a five tier column: banner, navigation bar, main content, side-bar, and footer. If you own an iPhone 5 compare the results for podcast_hostpage.php and with those of overview.html and see the difference. The former displays correctly, the latter does not. QUESTION: What must I do to restore the five-tier nature of overview.html? Roddy
  3. iwato

    Text Misalignment in a Flexbox Item

    BACKGROUND: Recently I designed a filler page that is called with AJAX. When the AJAX call is made a css style sheet is called in addition to the filler. For the most part the style-sheet appears to work. Even the styling for the flex-box that is included in the filler works in part. Simply, it appears to be breaking on inheritance, and I do not know how to override it. The HTML <div id='yp_container'> <div class='yp_item'> <div class='yp_param'>Visitor ID:</div> <div id='current_visitorId' class='yp_value'></div> </div><!-- end div.line_item --> <div class='yp_item'> <div class='yp_param'>IP Address:</div> <div id='current_visitIp' class='yp_value'></div> </div><!-- end div.line_item --> <div class='yp_item'> <div class='yp_param'>Total Visits:</div> <div id='current_totalVisits' class='yp_value'></div> </div><!-- end div.line_item --> <div class='yp_item'> <div class='yp_param'>City:</div> <div id='current_cities' class='yp_value'></div> </div><!-- end div.line_item --> <div class='yp_item'> <div class='yp_param'>Referral URL:</div> <div id='current_referral_url' class='yp_value'></div> </div><!-- end div.line_item --> </div><!-- end div#yp_container --> CSS Style-Sheet (Relevant Code Only) /*************************************************** Visitor Info (Flexbox) ***************************************************/ #yp_container { display: -webkit-flex; display: flex; flex-direction: column; width:100%; } .yp_item { display: -webkit-flex; display: flex; flex-direction: row; justiy-content: space-between; } .yp_param { text-align: -webkit-right; text-align: -moz-right; padding-right: 2em; } .yp_value { text-align: -webkit-left; text-align: -moz-left; } You may observe the result by clicking on the words Your Profile under the sub-heading User Profile in the Grammar Captive navigation bar. Roddy
  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. Iven

    CSS NOT CHANGING DYNAMICALLY

    Hello I have a problem. I have been playing around with element width/heights and positioning to make sure everything look cool and neat regardless of how the window(or web browser window) is resized. One thing that constantly comes up is elements within a div that gets forced out of the div For example If I have a div and I set the width/height to percentages and I place elements within the div lets say a form with two inputs for username and password. If I resize my window very small there comes a point where the input boxes are totally pushed out of the div? Why is that and how can I fix it so that the element(inside div) also resizes as the div gets resizes(because of the window being resized). I am confused because I am thinking that if my div's width/height are percentages they resize dynamically as my window gets resizes why isn't this happening to the inputs or other elements(I tried with an image element and a few p elements nested inside the div) PLEASE NOTE(I already tried relative positioning didn't work, I also gave my form width/height percentages but that also doesn't work) Here is my example code for a better understanding If you look at the image called WRONG.png you will see my inputs from my form inside the div is pushing OUTSIDE the div?
  6. sgt_spike

    list-style-image

    Can you change the size of the images you choose?
  7. Hello I have a HTML page with a background image My image looks fine at full screen(normal screen) However when I change the width of my browser to half the background image gets this random white space at the bottom of the page,I want it to still cover the entire browser window but the white space makes it look really bad.
  8. IvanConway

    Responsive Form Design

    I have designed a form using Dreamweaver CS3. The form was designed using tables. I am having an issue with a section of the form that contains 4 columns. Column 1 is used as the description or label for the input field in column 2. The same applies for column 3 & 4. I am trying to design a media query that will make the form more responsive on smaller mobile devices and tablets. I have attached a section of my form containing the 4 columns and included the media query I am currently using. The overall design has been working successfully for over two years apart from the responsiveness issue on smaller mobile devices and tablets. Apart from a total re-design of the entire layout, is it possible to make the 4 column table more responsive using the table method I have attached. table.html
  9. I am building a site for a friends business and it will be relatively basic but will have a blog. My plan was to use wordpress and the generatepress theme as it is so lightweight. I want to avoid using a pagebuilder because I want to be comfortable building with the actual code. Also my understanding is pagebuilders can add bulky unused code that slows the site down. So I was thinking of using a CSS based framework. I figure the site won’t have much interactivity so I can always add that individually with javascript/jquery or a wordpress plug in, avoiding the use of a bulkier framework that already has javascript in it like bootstrap. I was thinking I would attach the w3.css style sheet to the wordpress theme because w3.css is so lightweight and simple and I have been really enjoying it. Then I started to think that the aspect that I utilize the most is the media queries for responsive design. Having css classes that resize or hide the content to display on desktop vs tablet vs mobile. So at that point I was wondering maybe the best bet is just to make my own framework? Because it will only include the classes needed for the site? For example I never use the colors that come packaged with the w3.css style sheet. Does that make sense or what is normal practice in my situation? Any advice would be great. I don’t really know if this is the best approach to what I want to do, but the end goal is a lightweight website that I hand build as much as possible to keep it fast and so I can understand the HTML/CSS better. Thank you.
  10. Hi, new to the forum so apologies if this subject has been touched before I need to change the menu on mobile. When I go from desktop view to mobile view my menu headlines shrink into a hamburger menu in the top right corner. This menu, on mobile, is added 'Sign up' and 'Login', which I do not have on desktop. Can I not change that using css? the webpage is at b2ctest.aposave.com
  11. I tried including the 'tab.html' and ‘content.html’ into my 'index.html' (using w3school code: how to include HTML, found at: https://www.w3schools.com/howto/howto_html_include.asp), but the javascript and css elements do not work. The buttons don't work as intended. Look at: https://rads-198409.appspot.com If you minimize the browser window, the tab is supposed to change to a drop-down menu, but the button does not work at all. I have checked the individual pages and they seem to work just fine, just not when they are combined. Am I doing something wrong? Could someone help? All the code I used is from w3school and I have only modified the file names (tab.html and content .html to point to the right files). Below are links to the code: Code for ‘tab.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav Code for ‘content.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol Code for ‘index.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_2
  12. REQUEST: Please compare the results in the middle panel of the following two actions: ACTION ONE: Click on the phrase Weekly Podcasts under the heading Products in the navigation bar of the Grammar Captive mainpage. Scroll to the bottom of the page and view how the middle panel exceeds the height of the navigation bar and side panel. ACTION TWO: While on the same page with the same panel open click on the phrase Click and Listen. This will bring you to a different document in the same window. Notice that the middle panel does not exceed the height of the navigation bar and side panel. Also, note that the panel's scroll functionality is well in place. Now return to the Grammar Captive mainpage and perform the following: Find the phrase Q&A under the heading Search Grammar Captive in the navigation bar and click on it. Notice the absence of a border around the middle panel. Enter the word Frage in the search box and click on the Search button. (Do not hit the ENTER/RETURN key, else you will be blown away) Notice that middle content is now enclosed in a border and that the height of the content is nearly that of the navigation bar and side panel. (I acknowledge that there are some problems with the CSS, and I believe that I know how to fix them.) Click on the phrase The Answer ... wherever you would like and notice that the content of the middle panel fill below either of the two side panels. Click on the phrase Click and Read below the answer on watch the role of digital toilet paper unravel. It is this phenomenon that I am seeking to prevent with the introduction of scroll functionality. The Javascript that works for ACTION TWO on the Podcast hostpage refuses to work on the Grammar Captive mainpage. if (status === 'success') { var aside_height = $('aside').height(); $('#main').css('min-height', aside_height); $('#pagn').show(); } This, no matter the placement or alteration. Adding the property-value pair 'overflow-y' : 'scroll' achieves nothing. $('#main').css({'min-height':aside_height,'overflow-y':'scroll'}); Any ideas? Roddy
  13. I want to have any text that is bold, italic etc. to be a specific color. And yes, this if for ALL of my website. I've been using p.italic, p.bold etc. Is there a shortcut to do everything but normal text?
  14. Hello, I may post this in the wrong forum and if I do then I'm sorry. I recently looked at the ToDoList tutorial on w3schools, and it is fine and works amazing but its one thing that I wanna add. When I add a item to the list I want that item to stay there forever, so even if I for example refresh the page it will still be there. And even if I go out of chrome it will still be there. I don't know if this is possible but if it is then please answer this. Thanks in advance!
  15. iwato

    Dysfunctional W3Schools Code?

    WONDERMENT: In anticipation of my next question while I continue my struggle with the implementation of optional key and button functionality on my own website, I thought that it might be helpful to bring the following to your attention. https://www.w3schools.com/CSSref/playit.asp?filename=playcss_overflow-y&preval=scroll QUESTION: Is there a good reason why the scroll bar does not appear when the [scroll] option has been selected? Roddy 🙃
  16. BACKGROUND: The same HTML/CSS set-up produces different results in different browsers. In this case Firefox and Safari agree, but Chrome does not. I have no idea how the following looks in Internet Explorer. The problem is one of horizontal alignment. For some reason Chrome forces the second input form control (type='submit') to the following line. Surely I could resolve the problem with Flexbox, but I would like to know what is going on instead. The HTML <div id="search_podcast_div"> <div id='podcast_header'> <h1 style='padding-top:1em;'>The Onsite<br />Grammar Captive<br /><span style='font-family:Bradley Hand, cursive;font-size:1.8em;color:#5a4149'>Weekly Podcasts</span><br />Search Engine</h1> <form id='podcast_searchform'> <fieldset id='podcast_field'> <legend>Search and Find</legend> <input id='podcast_input' type="text" class='SearchInput' placeholder='Enter keywords and phrases here ...' name='search_podcast_input' required> <input id='podcast_submit' type="button" class='SearchButton' value="Search"> </fieldset><!-- end fieldset#podcast_field --> <label id="podcast_input_error" class="error" for="podcast_input">Please enter what interests you. Else, there is nothing to search.</label> <p class='Hint'><span class='InlineHeading'>search guide</span>: A phrase surrounded by <em>double</em>-quotation marks<br />returns only those podcasts that contain the exact phrase.</p> </form> </div><!-- end div#podcast_header --> <div id='podcast_matches'>Your matches will display here ...</div><!-- end div#podcast_matches --> </div><!-- end #search_podcast_div --> The CSS #letter_header h1, #podcast_header h1, #qa_header h1 { text-align: left; } #letter_searchform, #podcast_searchform, #qa_searchform { background: linear-gradient(60deg, #5a4149, #f0efef); /* Standard syntax */ text-align: center; width:auto; margin: 2.5em auto 1.5em auto; padding-top: 1.5em; padding-bottom: 1.5em; } #letter_field, #podcast_field, #qa_field { margin-left: 0.5em; margin-right: 0.5em; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } #letter_field legend, #podcast_field legend, #qa_field legend { color: #ffffff; } .SearchInput { margin: 0em 0.5em 0em 1em; width: 80%; border-radius: 15%; } .SearchInput:focus { background: #5a4149; color: #ffffff; border: 1px solid #ffffff; } .SearchButton { margin-right: 1em; border-radius: 5px; color:#5a4149; } .SearchButton:hover { background-color:#5a4149; color:#ffffff; } label.error { display:block; /* clear:both; float:right; */ color:#fadb9d; font-size:0.8em; font-weight:bold; margin-top:0.5em; margin-bottom:0.5em; } .Hint { font-size: 0.6em; color: #ffffff; font-weight: bold; } .InlineHeading { font-variant: small-caps; } jsRoddy You can view the resulting phenomenon by clicking on either Newsletters or Podcasts under the subheading Search Grammar Captive in the navigation bar of the Grammar Captive mainpage.
  17. Hello all and anyone who can help. I'm wondering if there is a way to float an image left or right of some text (so that the text wraps around) to display on large/medium screens while having that image display BELOW the text on small screens. Currently I have it working by hiding sections with different layouts (responsive columns for small screen, no columns for large/medium), but that would require me (or my client) to have to update the same text twice whenever there are changes. On large/medium screens the image would occupy 40 percent of the width, but on small screens (phones) I would want that image to slide under the text at 100 percent width. Make sense? New at responsive, but picking it up. Thanks! Dave
  18. We need to display machine statuses based on time according to the attached screenshot using HTML5, CSS and SVG ?I thought of using Stack Bar chart but in the current context, a status can be repeated multiple times in a given timespan.For ex, In a given timespan, 11PM - 11:30Pm, what are the different statuses a machine is transitioned into ?Each state is represnted by a color.Can any one suggest how to generate this chart ?
  19. BACKGROUND: Please compare the Select Language <select> element option menu under the headings Free Webinar and Newsletter/Subscribe found in the navigation bar on the Grammar Captive main page. Therein lies the heart of the following question. QUESTION: How does one set the background and text colors of the <optgroup> element so that they appear properly in Firefox? Neither optgroup { background: black; color: white; } nor optgroup { background-color: black; color: white; } appear to work. Roddy
  20. I am running a test for my students, and I asked them to calculate the width of a box using the standard box model and box-model:border-box. I've gone over this in class, but not enough. They were Googling it and they can't understand how to do it from reading the instructions on W3 Schools. Reading it myself, I can understand why. (Some of it is a semantic question about whether the margin is part of the size of the box.) Is it possible to write your definition more clearly? Could I offer some help?
  21. ConnieM

    CSS Attribute Selectors Tutorial

    i have been going through the CSS attribute selector tutorial and have encountered problem i cannot resolve. I wrote my code as per the "try it yourself". As far as i can tell my code is written identical to the CSS tutorial. Below is an example of what I wrote: [target~="red"] {border: 1px solid red;} or [title^="tulip"] {background-color: red;} I set up a style sheet in notepad ++ and in my style sheet, the code in bold type remains black - which tells me my app isn't recognizing that bit of code as code. I have attached the style sheet so you can see what my code is doing. I cannot figure out where I went wrong. has anyone else encountered this? were you able to resolve it and how? thanks! attributeselectors-styles.css
  22. EXPERIMENT ONE: Open to the Grammar Captive Podcast Hostpage without a Query. Observe the vertical alignment of the sidebar in relationship to the page's banner. If you experience the same as I, the sidebar will be top aligned with both the navigation and middle content panels. EXPERIMENT TWO: Open to the Grammar Captive Podcast Hostpage with a Query String Attached to the HTTPRequest Open to the Proxy Request Page. Click where it says Proxy Link. Observe the middle panel that opens. It should be a reference to Podcast No. 21. Observe the vertical alignment of the sidebar in relationship to the page's banner and other aforementioned elements. If you experience the same as I, the sidebar is no longer top-aligned with the page's navigation bar and middle content panel. EXPERIMENT THREE: Repeat Experiment One, but Open to the Podcast No. 21 Panel from the Already Opened Page. Click where it says ALL in the navigation bar. Click on the phrase Podcast Index ... Find Podcast No. 21 Click where it says Discover more ... Click on the command Click and Listen. Observe the alignment of the sidebar. It remains top aligned with the navigation bar and middle panel. QUESTION ONE: How might one explain this phenomenon? QUESTION TWO: And, what corrective action can be taken to prevent it? Roddy
  23. stewofkc

    Stacking Posts Showing Up Overlapped

    I'm having a problem with the CSS on my blog website. Sometimes when I load it, the posts will be stacked on top of each other, so that the image and text are all smashed together. Then if I refresh the page, the issue goes away. Any suggestions? The image is an example of the posts loaded correctly, as I can't get the problem to replicate right now.
  24. Please consider the following code and see if you can find anything wrong. The appended <link> does not appear to register the information contained in the stylesheet. You can observe the failure by clicking on the menu item Weekly Podcasts under Products in the page's navigation bar (left column) and then passing your cursor across the blank area between the subtitle "Weekly Podcast Host Page" at https://www.grammarcaptive.com/overview.html $("#podcasts").mouseover(function() { $(this).css({"cursor": "pointer", "font-weight":"800"}); }) .click(function() { $("#main").load("podcast_filler.html #podcasts_div"); $("<link/>", { rel: "stylesheet", type: "text/css", href: "_utilities/css/podcast_filler.css" }).appendTo("head"); $.ajax({ url: './_utilities/php/most_recent_podcast.php', // context: '#main', dataType: 'JSON', success: function(jsonData) { $.each(jsonData, function(key, object) { var podcast_number = jsonData.podcast_no_item; var podcast_title = jsonData.item_title; var podcast_desc = jsonData.item_description; var podcast_guid = jsonData.item_guid; var podcast_pubdate = jsonData.item_pubdate; $('#main span#pc_title').html(podcast_title); $('#main span#pc_desc').html(podcast_desc); $('#main span#pc_num').html(podcast_number); $('#main span#pc_pubdate').html(podcast_pubdate); var click_listen = 'podcast_hostpage.php?hash=' + podcast_guid + '&podcast_no=' + podcast_number; $('#pc_click_listen').attr('href', click_listen); }); } }); }) .mouseup(function() { $(this).css({"color": "#fadb9d","font-weight": "normal"}); $('body, html').animate({scrollTop: $('#main').offset().top},800); }); Roddy
  25. Left

    Links inside :after CSS

    I have been struggling to figure out how to and a link on a rotating block menu. Nothing I seem to do creates the desired effect.... HELP! I'm pulling my hair out on this one. I want to make the content Labels links. CSS: *,*:before,*:after { box-sizing: border-box; } :after { content: ""; link: ""; } nav { float: left; position: relative; top: 13px; left: -13px; background: transparent; } nav ul { text-align: center; } nav ul li { position: relative; width: 69px; cursor: pointer; background: crimson; color: white; text-transform: uppercase; transition:all .5s ease-out; } nav ul li:after { position: absolute; background: black; color: crimson; top:0; left: 70px; width: 70px; height: 100%; opacity:.5; transform: perspective(400px) rotateY(90deg); transform-origin: 0 100%; transition:all .5s ease-out; } nav ul li:nth-child(1):after { content: "BIO"; line-height: 69px; } nav ul li:nth-child(2):after { content: "DISC"; line-height: 69px; } nav ul li:nth-child(3):after { content: "VIDEO"; line-height: 69px; } nav ul li:nth-child(4):after { content: "SHOWS"; line-height: 69px; } nav ul li:hover { transform: translateX(-69px); } nav ul li:hover:after { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1) ; } nav ul li > div { display: inline-block; padding: 24px 0; background: transparent; } nav ul li div { position: relative; } MENU HTML: <section id="menu"> <nav class="navbar-fixed-top"> <ul> <li> <div style="font-size: 1.25rem;" class="icon-notebook"></div> </li> <li> <div style="font-size: 1rem;" class="socicon socicon-play"></div> </li> <li> <div style="font-size: 1.25rem;" class="etl-icon icon-video"></div> </li> <li> <div style="font-size: 1.25rem;" class="icon-global"><div class="nav ul li"></div> </li> </ul> </nav> </section>
×