Jump to content

Search the Community

Showing results for tags 'position'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








  1. Hi guys, If you click on "AC-brytare" there will be som content on the right. I want this content (.tabcontent) to automatically scroll down using position: sticky; How come it does not work? Best, Anders <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css">* {box-sizing: border-box} body {font-family: "Lato", sans-serif;} /* Style the tab */ .tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 40%; height: 100%; } /*
  2. Hey, I want to bulid a container that has text in it, is partially positioned outside of the parent element and pushes text away (see image below). In order to push text away, this container has to be floated, right? To position the container, I know of 2 ways: 1. absolute positioning (inside a container with relative positioning) 2. relative positioning (and translating the container to the side). The problem: Absolute positioning will make float completely redundant – the container does no longer push text away. And with relative positioning, the area that pushes text away won't
  3. I am trying to switch two divs on an onclick command to a search button. One div should replace the other entirely. I have tried to do this two ways: 1) make Div 1 width = 0 when Div 2 width = 100%, and vice versa 2) make Div 1 display = none when Div 2 display = block, and vice versa. My problem is that while both make Div 1 disappear when Div 2 is visible, and Div 2 disappear when Div 1 is visible, in both cases Div 2 remains stacked below the area designated for Div 1, and it should replace its position entirely. Any suggestions why this might be doing this and/or, is the
  4. I want to put a small shop image into my div box which is top of the side bar. The problem is after I set margin, height etc. it is not responsive like the rest of my site and its dissapear after i change windows size. I've created two divs one inside another to fit my 1300px container div width.
  5. BACKGROUND: What I thought would be an easy task through the use of a <div> wrapper has proven very difficult, if not impossible. Whoever built this nifty GUI either knows a lot more than I about positioning and placement, or they built this widget totally oblivious to potential user implementation. Please understand that I have gone through a lot of trouble to get it to work, am loathe to abandon it at such a late stage, but definitely will abandon it, if I cannot learn to place it at my will. DILEMMA and QUESTION: I would very much like to center the audio player displayed on
  6. Hello This is my site: http://cvkj.agencialosnavegantes.cl/ I have a contact form at the bottom of the page and i'm trying to put the submit button next to the text box, but i'm struggling a lot. This is my initial css: #enviarbajo { background:url(http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/paper-plane-2.png) no-repeat; background-color: #564585; width:40px; height:40px; padding:0px 0 4px 0; border:none; text-indent: -1000em; cursor:pointer; border-radius: 0; margin: 5%; position: relative; left: 35%; }
  7. This is my site: http://hojalateriaelguante.agencialosnavegantes.cl/ In the footer section i have 4 social network icons with a hover effect. For that effect, i borrowed code from an overlay example in w3schools: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade It looks fine on my desktop screen, but, if i shrink the browser window, all the icons float to the right of the dog's picture, and i can't understand why this does happen. How can i fix them? i want them to stay down, below the dog picture.
  8. Hello, I try to place meshs on sphere depending on their rank in a json file. I am looking for a way to define the position of my meshs in my loop in order to prevent them to be created on each other. function onMouseGauche(event) { event = event || window.event; if (event.button == 0) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // update the picking ray with the camera and mouse position raycaster.setFromCamera(mouse, camera); // calc
  9. Hey there, So I am toying around with a slideshow sort of display and discovered a strange result when I use position absolute in conjunction with overflow hidden on its parent. If any of you know why this is happening Id love to know, and possibly either a way around it or a better overall solution, that be great! To explain the issue I left it as overflow visible so you can see how it should function in theory, then you can see how it breaks when I attempt to hide it. HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="des
  10. For whatever reason, anytime I use "position: sticky" in whatever form whether it's browser supported or through the Stickyfill.js it breaks the w3-bar navigation menu. w3schools.com obviously has a way to make it work. But I can't. Sticky off - dropdown menu works perfect. Stick ON and the menu button clicks but the dropdown content is not displayed. Or at the very least it's not visible if it is. http://dev.daellusknights.com/index.html <-- Sticky ON (broken) http://dev.daellusknights.com/index2.html <-- Sticky OFF (works) Is this a known issue o
  11. Hi, here is a code. I want to make the .characteristics-quote to stay fixed when scrolling to the .characteristics-wrapper. But When the characteristics-wrapper class scrolling is finished the .characteristics-quote should be vanished. Can you please tell me how I can fix this ? Thank you in advance. <!DOCTYPE html> <html lang= "en-us"> <head> <meta charset= "utf-8"/> <title>About</title> <link rel= "stylesheet" type= "text/css" href= "font-awesome-4.7.0/css/font-awesome.min.css"/> <style type= "text/css"> body { margin: 0;
  12. Hi, here is a code. I want to make the .characteristics-quote to stay fixed when scrolling to the .characteristics-wrapper. But When the characteristics-wrapper class scrolling is finished the .characteristics-quote should be vanished. Can you please tell me how I can fix this ? Thank you in advance. <!DOCTYPE html> <html lang= "en-us"> <head> <meta charset= "utf-8"/> <title>About</title> <link rel= "stylesheet" type= "text/css" href= "font-awesome-4.7.0/css/font-awesome.min.css"/> <style type= "text/css"> body { margin: 0;
  13. Hi all I have a html code: <a href="link" > <img style="position:absolute; top:400px; left:150px; width:200px; height:100px" src="images/funk.jpg" /> </a> I want to write a text below this image. How can i do this? Regards
  14. I know there are a lot of topics out there about the CSS position: fixed not working, but those solutions do not work for me. Here is the CSS code: #slideshow{ height: 200px; width: 1308px; background-color: #dbdbdb; top: 800px; left: -100px; border-style: solid; border-color: #b0adb0; border-width: 03px; position: fixed; } In the screenshot (slideshowDIVhidden), the div is supposed to show up between the very top box and the two bottom boxes, while still being still relative to the viewport. When it is hidden, this is because the position: fixed; code is on. The slideshowDIVshown is what it
  15. Hey, so this is my code: <!DOCTYPE html><html><head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src='script.js'></script><style>.character{ height: 10px; width: 10px; background-color: red; margin-top: 50px; border: 3px solid black; border-radius: 100%; position: relative; margin-left: 10px;}.character2{ heigh
  16. I would appreciate your help with layering a widget title with a background over a slider. The demo site appears here: http://acceleratedpowermarketing.com/reicher/ I want it to look like this: http://www.standrewsch.org/ Where the bar with the title doesn't move when the screen is zoomed. Using this code, I'm able to get it to look like I want if it's zoomed at the correct place. Otherwise the bar, is out of place. I want to learn how to do this with blocking if that is possible and will solve the problem. Thanks #it_widget_content-5 .widget-title {
  17. Hi all, I want to know, where should i use css position property instead of using float left and right, inline block etc. Is there any benefits to use css absolute value property?
  18. I have a piece of CSS as following (in order to align a div vertically center) #center { position:relative; height:200px; width:500px; top:50%; margin:-100px auto 0px auto; border-radius:10px; border:1px solid white;} In Chrome, it works well, as in the first illustration: but in Firefox, it's displayed as following: Please, explain to me the reason of the issue. You can check this issue in your browser by link: http://thichtomo.com/example/
  19. Hi guys. I'm having the strangest problem right now, and I really need you help to figure it out. The footer stays nicely at the bottom of the page, but the content is not maxing out all the way down to the footer. The content of the left floater decides the height. If there is little content, it stays high on the page, and if I fill it up, it causes the whole page to overflow (scroll), not just the left floater. Here's what I wish to achieve: 1. Navbar on top. 2. Content with no margin to the navbar. 3. Footer just below the content, no margin. 4. Show the whole page on the screen
  20. I have a problem When I put a background image and after I put a padding value The position of the pictures changes. I do this: .actual { height: 255px; width: 805px; margin-left: 329px; margin-top: -255px; background-color: #555555; position: absolute; background-image: url(imagens/menu_actual_02.jpg); padding: 20px; } how I can fix this?
  21. Hi there!!Is there any way to find the absolute position of an element? (Element.offsetTop, Element.style.top etc, are all give the relative position of the element related to its parent element).Thanks in advance!!Atar.
  22. PaulV

    positioning problem

    I want to make a site, with a wrapper centered on the screen, with contnet in the wrapper.This works with plain text in the wrapperhttp://www.captain-africa.com/CSSProblem...This works well. Now i want to positionthe content in a specific place: the wrapper does not reacht the bottom of the pageThis happens if want want to position content in a div-containerhttp://www.captain-africa.com/CSSProblem...As you can see, if you scroll down, things go wrong.What did i do wrong?
  23. Hi!I am working at a wordpress theme and I have a problem that I can't figure out.This is the the HTML code I have: <!-- this is in the header.php file --> <div class="logo"> <div class="logo-inner"> <a href="<?php echo get_option('home'); ?>"><img src="LOGO_HERE" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>"/></a> <span><a href="AD_URL" target="_blank"><img src="AD_IMG"/></a></span> </div> </div><div id="page-wrap"> <div class="content"><!-- this is in in
  24. Hello, a complete beginner here - I have just built my first website, but to my horror I realized that if I view it with another screen resolution, or on someone else's computer, it changes the whole appearance of the site, esp. the flow of the paragraphs, often to a very ugly result. Images start to overlap paragraph, and paragraphs suddenly look extremely narrow. I am happy to restructure the website, (built in html without Dreamweaver's help) but have no idea how - especially how to make the main structure adjust to different views (larger/smaller screens, i-pads etc) Thank you! You ca
  25. I have been struggling on this for a while now, I cant get my images to position correctly. My header image need to be centred and my buttons need to sit underneath next to each other neatly. Please help :-) its on my booking form. http://www.sunseavip.co.uk or direct link http://www.sunseavip.co.uk/booking/index.php
  • Create New...