Jump to content

Search the Community

Showing results for tags 'position'.

  • 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

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

  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%; } /* Style the buttons inside the tab */ .tab button { display: block; background-color: inherit; color: black; padding: 5px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; font-size: 80%; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current "tab button" class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { float: left; padding: 0px 12px; border: 1px solid #ccc; width: 60%; border-left: none; height: 100%; overflow: hidden; position: sticky; top: 0; } </style> <h2>Solcellslexikon</h2> <div class="tab"><button class="tablinks" id="defaultOpen" onclick="openCity(event, 'AC-brytare')">AC-brytare</button> <button class="tablinks" onclick="openCity(event, 'Ampere')">Ampere (A)</button> <button class="tablinks" onclick="openCity(event, 'Anlaggningsid')">Anl&auml;ggnings-ID</button> <button class="tablinks" onclick="openCity(event, 'anslutningspunkt')">Anslutningspunkt</button> <button class="tablinks" onclick="openCity(event, 'azimutvinkel')">Azimutvinkel</button> <button class="tablinks" onclick="openCity(event, 'behorigelektriker')">Behörig elektriker</button> <button class="tablinks" onclick="openCity(event, 'belastning')">Belastning</button> <button class="tablinks" onclick="openCity(event, 'cemarkning')">CE-märkning</button> <button class="tablinks" onclick="openCity(event, 'dc')">DC</button> <button class="tablinks" onclick="openCity(event, 'effekt')">Effekt</button> <button class="tablinks" onclick="openCity(event, 'effektbegransning')">Effektbegränsning</button> <button class="tablinks" onclick="openCity(event, 'effektgaranti')">Effektgaranti</button> <button class="tablinks" onclick="openCity(event, 'egenanvandel')">Egenanvänd el</button> <button class="tablinks" onclick="openCity(event, 'elhandelsforetag')">Elhandelsföretag</button> <button class="tablinks" onclick="openCity(event, 'elproducent')">Elproducent</button> <button class="tablinks" onclick="openCity(event, 'elsakerhetsintyg')">Elsäkerhetsintyg</button> <button class="tablinks" onclick="openCity(event, 'falsatplattak')">Falsat plåttak</button> <button class="tablinks" onclick="openCity(event, 'huvudsakring')">Huvudsäkring</button> <button class="tablinks" onclick="openCity(event, 'inverter')">Inverter (växelriktare)</button> <button class="tablinks" onclick="openCity(event, 'jordfelsbrytare')">Jordfelsbrytare</button> <button class="tablinks" onclick="openCity(event, 'kilowatt')">Kilowatt (kW)</button> <button class="tablinks" onclick="openCity(event, 'kilowattimme')">Kilowattimme (kWh)</button> <button class="tablinks" onclick="openCity(event, 'likstrom')">Likström</button> <button class="tablinks" onclick="openCity(event, 'lutningpatak')">Lutning på tak</button> <button class="tablinks" onclick="openCity(event, 'monokristallin')">Monokristallin</button> <button class="tablinks" onclick="openCity(event, 'mppt')">MPPT</button> <button class="tablinks" onclick="openCity(event, 'markeffekt')">Märkeffekt</button> <button class="tablinks" onclick="openCity(event, 'noct')">NOCT</button> <button class="tablinks" onclick="openCity(event, 'natbolag')">Nätbolag</button> <button class="tablinks" onclick="openCity(event, 'optimerare')">Optimerare</button> <button class="tablinks" onclick="openCity(event, 'paneltyp')">Paneltyp</button> <button class="tablinks" onclick="openCity(event, 'pascal')">Pascal (PA)</button> <button class="tablinks" onclick="openCity(event, 'plattaktrapets')">Plåttak trapets</button> <button class="tablinks" onclick="openCity(event, 'plattakfalsat')">Plåttak falsat</button> <button class="tablinks" onclick="openCity(event, 'rails')">Rails</button> <button class="tablinks" onclick="openCity(event, 'rotavdrag')">Rotavdrag</button> <button class="tablinks" onclick="openCity(event, 'servissakring')">Servissäkring</button> <button class="tablinks" onclick="openCity(event, 'snolastberakning')">Snölastberäkning</button> <button class="tablinks" onclick="openCity(event, 'solcell')">Solcell</button> <button class="tablinks" onclick="openCity(event, 'solpanel')">Solpanel</button> <button class="tablinks" onclick="openCity(event, 'spanning')">Spänning (V)</button> <button class="tablinks" onclick="openCity(event, 'stc')">STC</button> <button class="tablinks" onclick="openCity(event, 'strang')">Sträng</button> <button class="tablinks" onclick="openCity(event, 'strom')">Ström</button> <button class="tablinks" onclick="openCity(event, 'tegeltak')">Tegeltak</button> <button class="tablinks" onclick="openCity(event, 'toppeffekt')">Toppeffekt</button> <button class="tablinks" onclick="openCity(event, 'verkningsgrad')">Verkningsgrad</button> <button class="tablinks" onclick="openCity(event, 'vindlastberakning')">Vindlastberäkning</button> <button class="tablinks" onclick="openCity(event, 'volt')">Volt (V)</button> <button class="tablinks" onclick="openCity(event, 'vaxelriktare')">Växelriktare</button> <button class="tablinks" onclick="openCity(event, 'vaxelstrom')">Växelström</button> <button class="tablinks" onclick="openCity(event, 'watt')">Watt (W)</button> <button class="tablinks" onclick="openCity(event, 'overskottsel')">Överskottsel</button> <button class="tablinks" onclick="openCity(event, 'overspannigsskydd')">Överspänningsskydd</button> </div> <div class="tabcontent" id="AC-brytare"> <h3>Vad &auml;r en AC-brytare?</h3> <p>AC-brytare krävs för att koppla bort växelriktaren från elnätet vid service och underhåll. Nätbolaget skall alltid ha möjlighet att slå ifrån anläggningen. Brytaren placeras bredvid eller i närheten av växelriktaren för att göra det enklare att frånskilja växelriktaren. </p> <script>function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click();</script> </body> </html>
  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 be affected by the transform: translate and will stay in the top left corner of the parent element. The closest I have come to is this: <div class="wrapperSingleProject"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p> <div class="relativeposition"> <div class="quote-div"> <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> </div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div> .wrapperSingleProject { padding: 80px 0 80px 0; width: 750px; position: relative; } p { text-decoration: none; text-align: left; font-size: 17px; font-family: 'Roboto', sans-serif; font-weight: 400; letter-spacing: 0.08em; line-height: 1.45; color: black; } .quote-div p { /* relative positioning */ position: relative; text-align: center; width: 200px; color: blue; background-color: #ccc; float: left; top: 300px; left: 0%; transform: translate(-50%, -50%); /* absolute positioning: you need to activate .relativeposition */ /* position: absolute; text-align: center; width: 200px; color: green; background-color: #ccc; float: left; top: 300px; left: 0%; transform: translate(-50%, -50%); */ } .relativeposition { /* position: relative; */ } Do you guys have any ideas how to make this happen? Thanks a lot!
  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 there a better way to accomplish this than just changing the CSS? I am including the JS, HTML, and CSS attending this problem. Thanks ahead of time: JS (from Option 2) function getSearch() { document.getElementById("searchcontainer").style.display = "block"; document.getElementById("blogcontainer").style.display = "none"; } HTML <div id="rightcontainer"> <div id="searchbox"> <form> <input type="text" placeholder="Search..." required> <input id="cardib" type="button" value="Search" onclick="getSearch()"> </form> </div> <button id="down" onclick="scrollDown()" onmouseenter="Highlight1()">&#9660</button> <button id="up" onclick="scrollUp()" onmouseenter="Highlight2()">&#9650</button> <div id="blogcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()"> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">Valentines and Rats</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div id="searchcontainer" onmouseover="RollOff1()" onmouseout="RollOff2()"> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> <div class="postcontainer"> <div class="thumb"></div> <div class="topblock"><div class="titleblock">OMG</div> <div class="moreblock">MORE ></div> </div> <div class="block"> <div class="date"><p>February 14, 2016</p></div> We celebrate Valentine's Day while I battle rats in the coop. </div> </div> </div> </div> CSS #blogcontainer{ width: 100%; height: 90%; float: left; overflow-y: hidden; padding: 0; position: static; float: left; margin-left: 0; margin-right: 0; margin-bottom: 0; } #searchcontainer{ width: 100%; height: 90%; float: left; overflow-y: hidden; padding: 0; position: static; float: left; margin-left: 0; margin-right: 0; margin-bottom: 0; } #rightcontainer { height: 100vh; width: calc( 100% - 20vh - (.678*(100%-20vh))); position: fixed; overflow: hidden; background-color: gray; margin-left: calc((.678*(100%-20vh)) + 20vh); float: left; margin-right: 0; }
  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 the following page, but cannot seem to accomplish the task. Have you any suggestions short of rebuilding the entire graphical interface pixel by pixel? VIEWING STEPS: Step One: Open to Sender Proxy and click on the link entitled Proxy Link in the bottom-left corner. Step Two: When the page open click on the words Click and Listen. The image that appears is what I would like to center beneath the words Click and Listen. The pages necessary to understand the structural and formatting aspects are provided below: SOURCE PAGES: The Template: http://www.grammarcaptive.com/podcasting/template/template.html You must open the page in source code to make any sense of it. The portion of this page that forms the template begin and ends with the following two <div> tags: Start Tag: <div id='podcast_insert'> End Tag: </section><!-- end section_summary --> The CSS: http://www.grammarcaptive.com/_utilities/lbrary/jPlayer-2.9.2/lib/circle-player/skin/circle.player.css The Javascript: http://www.grammarcaptive.com/_utilities/lbrary/jPlayer-2.9.2/lib/circle-player/js/circle.player.js I offer this Javascript only for the sake of completeness. As a well-formatted jQuery product, the CSS is truly a separate issue. HOST PAGE JAVASCRIPT USED to INITIALIZE the PLAYER <script> $("#click_listen").mouseenter(function() { $(this).css({'cursor':'pointer','color':'#5a4149'}); $(this).click(function(){ $("#cp_container_1").show(); var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1", { m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a", oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg" }, { cssSelectorAncestor: "#cp_container_1", swfPath: "_utilities/library/jPlayer-2.9.2/dist/jplayer/", wmode: "window", keyEnabled: true }); }); }) .mouseout(function() { $(this).css({'cursor':'none','color':'#fff'}); }); </script> Roddy
  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%; } Then i tried to position the button using media-queries, but i'm not able to put the button where i want @media (max-width: 768px){ #enviarbajo { position: relative; right: 100px; } } Other media-query below: @media only screen and (max-width: 500px) { #enviarbajo { position: relative; right: 50px; } Is there a more efficient way of doing this?
  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); // calculate objects intersecting the picking ray var intersects = 0; intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { if (intersects[0].object.userData.bool != true) { // Scalar = Scalar + 400; Scalar = Scalar / 1; Scale = Scale / 1; console.log(intersects[0].object.userData) if (intersects[0].object.userData.children) { var loop = 0; intersects[0].object.userData.children.forEach(function(element) { var sphereMaterial2 = new THREE.MeshBasicMaterial({ color: element.group }); var mesh = new THREE.Mesh(sphereGeometry, sphereMaterial2); var phi = ( 2 * Math.PI) var theta = (2 * Math.PI) var x = Math.random() * 2 - 1; var y = Math.random() * 2 - 1; var z = Math.random() * 2 - 1; // if (loop == 0) { // var x = Math.random() * 2 - 1; // var y = Math.cos(theta) * Math.random(); // var z = Math.cos(phi) * Math.random() // } // if (loop == 1) { // var x = Math.cos(phi) * Math.random(); // var y = Math.random() * 2 - 1; // var z = Math.cos(theta) * Math.random() // } // if (loop == 2) { // var x = Math.tan(phi) * Math.random(); // var y = Math.tan(theta) * Math.random(); // var z = Math.random() * 2 - 1 // } mesh.position.x = x; mesh.position.y = y; mesh.position.z = z; mesh.userData.children = element.children; mesh.userData.name = element.label; mesh.userData.rang = element.rang; mesh.position.normalize(); mesh.position.multiplyScalar(Scalar / element.rang); mesh.scale.set(Scale / element.rang, Scale / element.rang, Scale / element.rang) mesh.position.x = mesh.position.x + intersects[0].object.position.x; mesh.position.y = mesh.position.y + intersects[0].object.position.y; mesh.position.z = mesh.position.z + intersects[0].object.position.z; console.log(element) scene.add(mesh); // lines var material = new THREE.LineBasicMaterial({ color: 0xffffff }); var geometry = new THREE.Geometry(); geometry.vertices.push( intersects[0].object.position, mesh.position ); var line = new THREE.Line(geometry, material); scene.add(line); intersects[0].object.userData.bool = true; loop = loop + 1 }); } } } } // ajouter position de caméra actuelle camera.userData.push([Math.round(camera.position.x), Math.round(camera.position.y), Math.round(camera.position.z)]) } Here is the function that draw the sphere meshs. How can i define my coordinates more efficiently? Thank you
  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="description" content="Slideshow Test"> <base href=""> <title>Slideshow Test</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/slidertest.css" type="text/css" media="screen" charset="utf-8"/> </head> <body> <header></header> <section> <ul> <li> <a class="imageAnchor" href="#test-image-one">&#8226;</a> <a class="imageAnchor" href="#test-image-two">&#8226;</a> <a class="imageAnchor" href="#test-image-three">&#8226;</a> <a class="imageAnchor" href="#test-image-four">&#8226;</a> </li> </ul> <div class="gallary"> <div class="container"> <div id="test-image-one" class="image"></div> <div id="test-image-two" class="image"></div> <div id="test-image-three" class="image"></div> <div id="test-image-four" class="image"></div> </div> </div> </section> <footer></footer> </body> </html> CSS: html,body { background-color: #363434; } a { color: red; text-decoration: none; } ul,li,.imageAnchor { list-style: none; display: inline-block; vertical-align: middle; } .gallary { width: 120px; height: 120px; position: relative; background-color: maroon; overflow: visible; } .gallary .container { width: 1000px; position: relative: } .image { width: 50px; height: 50px; margin: 35px; background-color: grey; display: inline-block; position: absolute; left: 120px; transition: left .1s linear; } #test-image-one { background-color: pink; } #test-image-two { background-color: green; } #test-image-three { background-color: purple; } #test-image-four { background-color: blue; } .image:target { left: 0; } Thanks for any help!
  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 or am I just missing something. Currently working with MS Edge and latest Chrome on Win 10 Pro (dev)
  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; padding: 0; color: white; background-color: black; overflow: auto; } .about { max-width: 100%; height: 200px; background-color: black; color: white; text-align: center; padding-left: 10%; padding-right: 10%; padding-top: 5px; margin: 0; } .characteristics-wrapper { max-width: 100%; padding: 10px; margin-bottom: 200px; border: 1px solid white; overflow: hidden; } .characteristics-quote { max-width: 40%; float: left; transform: translateX(-5%); position: fixed; color: white; } .characteristics-quote h1 { max-width: 70%; text-align: center; margin: auto; padding-top: 100px; } .characteristics-container { max-width: 60%; float: right; text-align: center; position: relative; } .characteristics-item-row1, .characteristics-item-row2 { max-width: 50%; } .characteristics-item-row1 { padding-top: 50px; } .characteristics-item-row2 { position: absolute; top:50px; right: 0; } .characteristics-item { max-width: 80%; display: block; margin: auto; margin-bottom: 20px; margin-top: 20px; } .characteristics-icon { font-size: 60px; padding: 15px; border: 1px solid lightgrey; border-radius: 50%; height: 76px; width: 76px; margin: auto; } .characteristics-item:hover .characteristics-icon{ background-color: white; color: black; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -ms-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; } /**Animations**/ .left { -webkit-animation-name: left; -webkit-animation-duration: 1s; -moz-animation-name: left; -moz-animation-duration: 1s; -ms-animation-name: left; -ms-animation-duration: 1s; -o-animation-name: left; -o-animation-duration: 1s; animation-name: left; animation-duration: 1s; } .right { -webkit-animation-name: right; -webkit-animation-duration: 3s; -moz-animation-name: right; -moz-animation-duration: 3s; -ms-animation-name: rightt; -ms-animation-duration: 3s; -o-animation-name: right; -o-animation-duration: 3s; animation-name: right; animation-duration: 3s; } .scale { -webkit-animation-name: scale; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: scale; -ms-animation-duration: 2s; -o-animation-name: scale; -o-animation-duration: 2s; animation-name: scale; animation-duration: 2s; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: fade; -ms-animation-duration: 2s; -o-animation-name: fade; -o-animation-duration: 2s; animation-name: fade; animation-duration: 2s; } /**Animating from the left**/ @-webkit-keyframes left { from {left: -500px;} to {left: 0;} } @-moz-keyframes left { from {left: -500px;} to {left: 0;} } @-ms-keyframes left { from {left: -500px;} to {left: 0;} } @-o-keyframes left { from {left: -500px;} to {left: 0;} } @keyframes left { from {left: -500px;} to {left: 0;} } /**Animating from the right**/ @-webkit-keyframes right { from {right: -500px;} to {right: 0;} } @-moz-keyframes right { from {right: -500px;} to {right: 0;} } @-ms-keyframes right { from {right: -500px;} to {right: 0;} } @-o-keyframes right { from {right: -500px;} to {right: 0;} } @keyframes right { from {right: -500px;} to {right: 0;} } /**Animating scale**/ @-webkit-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-moz-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-ms-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-o-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } @keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } /**Fading animation**/ @-webkit-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-moz-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-ms-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-o-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @keyframes fade { from {opacity: 0;} to {opacity: 1;} } </style> </head> <body> <div class= "about"> <h1>Who we are?</h1> <div class= "about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan. Pellentesque commodo, enim nec faucibus tristique, risus nibh ullamcorper velit, sed egestas urna erat sit amet justo.</div> </div> <div class= "characteristics-wrapper"> <div class= "characteristics-quote"> <h1>Main characteristics of our services</h1> </div> <div class= "characteristics-container"> <div class= "characteristics-item-row1"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> <div class= "characteristics-item-row2"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item item2"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> </div> </div> <div style= "height: 700px"></div> </body> </html>
  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; padding: 0; color: white; background-color: black; overflow: auto; } .about { max-width: 100%; height: 200px; background-color: black; color: white; text-align: center; padding-left: 10%; padding-right: 10%; padding-top: 5px; margin: 0; } .characteristics-wrapper { max-width: 100%; padding: 10px; margin-bottom: 200px; border: 1px solid white; overflow: hidden; } .characteristics-quote { max-width: 40%; float: left; transform: translateX(-5%); position: fixed; color: white; } .characteristics-quote h1 { max-width: 70%; text-align: center; margin: auto; padding-top: 100px; } .characteristics-container { max-width: 60%; float: right; text-align: center; position: relative; } .characteristics-item-row1, .characteristics-item-row2 { max-width: 50%; } .characteristics-item-row1 { padding-top: 50px; } .characteristics-item-row2 { position: absolute; top:50px; right: 0; } .characteristics-item { max-width: 80%; display: block; margin: auto; margin-bottom: 20px; margin-top: 20px; } .characteristics-icon { font-size: 60px; padding: 15px; border: 1px solid lightgrey; border-radius: 50%; height: 76px; width: 76px; margin: auto; } .characteristics-item:hover .characteristics-icon{ background-color: white; color: black; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -ms-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; } /**Animations**/ .left { -webkit-animation-name: left; -webkit-animation-duration: 1s; -moz-animation-name: left; -moz-animation-duration: 1s; -ms-animation-name: left; -ms-animation-duration: 1s; -o-animation-name: left; -o-animation-duration: 1s; animation-name: left; animation-duration: 1s; } .right { -webkit-animation-name: right; -webkit-animation-duration: 3s; -moz-animation-name: right; -moz-animation-duration: 3s; -ms-animation-name: rightt; -ms-animation-duration: 3s; -o-animation-name: right; -o-animation-duration: 3s; animation-name: right; animation-duration: 3s; } .scale { -webkit-animation-name: scale; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: scale; -ms-animation-duration: 2s; -o-animation-name: scale; -o-animation-duration: 2s; animation-name: scale; animation-duration: 2s; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: fade; -ms-animation-duration: 2s; -o-animation-name: fade; -o-animation-duration: 2s; animation-name: fade; animation-duration: 2s; } /**Animating from the left**/ @-webkit-keyframes left { from {left: -500px;} to {left: 0;} } @-moz-keyframes left { from {left: -500px;} to {left: 0;} } @-ms-keyframes left { from {left: -500px;} to {left: 0;} } @-o-keyframes left { from {left: -500px;} to {left: 0;} } @keyframes left { from {left: -500px;} to {left: 0;} } /**Animating from the right**/ @-webkit-keyframes right { from {right: -500px;} to {right: 0;} } @-moz-keyframes right { from {right: -500px;} to {right: 0;} } @-ms-keyframes right { from {right: -500px;} to {right: 0;} } @-o-keyframes right { from {right: -500px;} to {right: 0;} } @keyframes right { from {right: -500px;} to {right: 0;} } /**Animating scale**/ @-webkit-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-moz-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-ms-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-o-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } @keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } /**Fading animation**/ @-webkit-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-moz-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-ms-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-o-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @keyframes fade { from {opacity: 0;} to {opacity: 1;} } </style> </head> <body> <div class= "about"> <h1>Who we are?</h1> <div class= "about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan. Pellentesque commodo, enim nec faucibus tristique, risus nibh ullamcorper velit, sed egestas urna erat sit amet justo.</div> </div> <div class= "characteristics-wrapper"> <div class= "characteristics-quote"> <h1>Main characteristics of our services</h1> </div> <div class= "characteristics-container"> <div class= "characteristics-item-row1"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> <div class= "characteristics-item-row2"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item item2"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> </div> </div> <div style= "height: 700px"></div> </body> </html>
  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 is meant to look like (doesn't use position: fixed;) but is not relative to the viewport, and for some reason, I cannot move it. The slideshow DIV is not a "child" DIV. Any ideas how to fix the position: fixed, and why the div won't move?
  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{ height: 10px; width: 10px; background-color: blue; margin-top: -16px; border: 3px solid black; border-radius: 100%; position: relative; margin-left: 10px;}.outerbox{ width: 400px; height: 400px; border: 2px solid black;}.innerbox{ width: 200px; height: 200px; border: 2px solid black; margin-left: 95px; margin-top: 20px;}</style><script>$(document).ready(function(){ var thing = $(".character"); var position = thing.position(); var thing2 = $( ".character2" ); var position2 = thing2.position(); if (position == position2){ $("#collision").text("Colliding!"); $('.character').animate({left:'+=30px'}, 200); } else{ $("#collision").text("Not colliding!"); } $(document).keydown(function(e){ if (e.keyCode == 37){ $('.character').animate({left:'-=30px'}, 200); } if (e.keyCode == 38){ $('.character').animate({top:'-=30px'}, 200); } if (e.keyCode == 39){ $('.character').animate({left:'+=30px'}, 200); } if (e.keyCode == 40){ $('.character').animate({top:'+=30px'}, 200); } if (e.keyCode == 65){ $('.character2').animate({left:'-=30px'}, 200); } if (e.keyCode == 87){ $('.character2').animate({top:'-=30px'}, 200); } if (e.keyCode == 83){ $('.character2').animate({left:'+=30px'}, 200); } if (e.keyCode == 90){ $('.character2').animate({top:'+=30px'}, 200); } if (position == position2){ $("#collision").text("Colliding!"); $('.character').animate({left:'+=30px'}, 200); } else{ $("#collision").text("Not colliding!"); } });});</script></head><body> <div class = "outerbox"> <div class = "character"></div> <div class = "character2"></div> <div class = "innerbox"> <p id = "thing">Hello</p> <p id = "other"></p> <p id = "other2"></p> <p id = "collision"></p> </div> </div></body></html> What I want to do is for something to happen when the positions of the two character divs are the same, but I am not quite sure how. Please help.
  16. 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?
  17. 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 { background: url("images/Home-Page-Banner.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0); color: #fff; font-size: 2em; font-weight: normal; padding: 0.35em 0.5em; position: absolute; right: 15%; text-indent: 0; top: 30%; z-index: 995; }
  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 without the need to scroll. 5. No change in the navbar-content-footer connection when zooming. 6. Keep the footer to the bottom, and keeping content from bleeding into the footer. Thanks for your time! HTML <!DOCTYPE html><html><head> <title>NAME</title> <link href="css/Style3.css" medio="screen" rel="stylesheet" type="text/css"/> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'> <!-- check if screen is no more than 480: if( screen.width <= 480 ) { location.href = '/mobile.html';}--> </style></head><style> body { background-color: blue; background-repeat: no-repeat; background-attachment: fixed; background-position: left; background-size: cover; } li#nameofmine a p{ border-bottom: 1px solid white; font-weight: 700;} li#nameofmine:hover > a p{ color: black; border-bottom: 1px solid black;}</style><body> <div id="wrap"> <div id="main"> <nav> <ul> <li id="nameofmine"><a href="#"><p>NAME</p></a></li> <li><a href="#"><p>Read</p></a></li> <li><a href="#"><p>Listen</p></a> <ul> <li><a href="#"><p>Videos</p></a></li> <li><a href="#"><p>Recordings</p></a></li> </ul></li> <li><a href="#"><p>Look</p></a></li> <li><a href="#"><p>Contact</p></a></li> </ul> </nav> <div id="flags"> <a href="index2.html"><div id="flag1"><h4 style="margin-top: 10%;">1</h4></div></a> <a href="index.html"><div id="flag2"><h4 style="margin-top: 10%;">2</h4></div></a> </div><div id="leftbar"> <div id="news"><h3>NEWS</h3><p>Website is under construction. More will follow. Soon.</p></div> </div> </div></div> <footer> <p>© Copyright 2014 NAME. All rights reserved.</p> </footer> </body></html> CSS html {height: 100%}body{ font-family: 'open sans', 'courier'; font-size: 16px; color: white; text-align: center; margin: 0; font-weight: 100; height: 100%;}body a{ color: white; text-decoration: none;}h1{ font-size: 5em; line-height: 0.2em; color: white;}h3{ font-size: 18px; font-weight: 100; color: white; text-align: center; text-decoration: underline;}h2{ font-size: 20px; font-weight: 100; color: white;}#wrap{ min-height: 100%;}#main{ overflow: auto; padding-bottom: 3em; }#flags{ height: 2em; width: 6em; position: absolute; right: 0%; top: 0%; font-size: 16px;}#flag1{ height: 2em; width: 49%; float: right; border-left: 1px solid white; background-size: cover; background-position: center; background-color: red;}#flag2{ height: 2em; width: 49%; float: left; background-size: cover; background-position: center; background-color: green;}#flag1:hover{ opacity: 0.5;}#flag2:hover{ opacity: 0.5;}nav ul { position: relative; width: 100%; margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; color: white; font-family: 'Open Sans'; font-size: 16; background-color: rgba(255, 255, 255, 0.3); }nav ul li{ text-align: center; display: inline-block; position: relative;}nav ul a{ display: inline-block; float: none; padding: 1em 3em; letter-spacing: 1px; color: #eaebed;}nav ul li:hover > a{ color: black;}li#nameofmine{ text-align: center; display: inline-block; }li#nameofmine a p{ display: inline-block; float: none; font-weight: 700; color: white;}li#nameofmine:hover > a p{ color: black;}*html nav ul li a:hover/* IE6 */{ color: #000;}nav ul li:hover > ul { display: block;}/* Sub-menu */nav ul ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index: 99;}nav ul ul li { float: none; margin: 0; display: block;}nav ul ul li:last-child { box-shadow: none;}nav ul ul a { padding: 0.2em 1em; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none;}*html nav ul ul a { /* IE6 */ height: 10px; width: 150px;}*:first-child+html nav ul ul a { /* IE7 */ height: 10px; width: 150px;}nav ul ul a:hover { }nav ul ul li:first-child a { }nav ul ul li:first-child a:after{ content: ''; position: absolute; left: 45%; top: -10px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid white;}nav ul ul li:first-child a:hover:after { border-bottom-color: black; }nav ul ul li:last-child a { }/* Clear floated elements */nav ul:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}* html #menu { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 */#leftbar{ float: left; left: 0; top: 0; width: 20%; height: 100%;}#news{ height: 100%; width: 98%; margin-left: 2%; border-left: 0px; border-top: 0px; border-right: 1px; border-bottom: 0px; border-color: white; border-style: solid; font-weight: 100; text-align: left; overflow: auto;}footer{ height: 3em; width: 100%; background-color: rgba(255, 255, 255, 0.3); text-align: center; clear: both; position: relative; margin-top: -4em;}
  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. 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 can view the website and its source here - http://www.aidanandrewdun.com/ I'd be grateful if you viewed the page source and let me know what I've been doing wrong.
  23. 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?
  24. 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 index.php, single.php, page.php and so on --><div class="leftside-content"><!-- the loop here --></div><!-- and this is in the footer.php file --></div><?php get_sidebar(); ?> <div id="footer"> <center>©<?php echo " "; bloginfo('name'); echo " "; echo date("Y"); ?><br/> <?php bloginfo('name'); ?>* is created, written by, and maintained by **********. It is built on <a href="http://www.wordpress.org" target="_blank">WordPress</a> and hosted by *******. </center> </div></div> And here is my CSS code: #page-wrap { width: 960px;margin: 20px auto;}.logo{width: 100%;position: absolute;z-index: 999;}.logo-inner{width: 1050px;margin: auto;}.logo-inner span{float: right;z-index: -999;}.content{margin-top: 90px;padding-top: 30px;margin-bottom: 10px;width: 960px;background: white;outline:rgba(0, 0, 0, 0.1) solid 6px;position: absolute;z-index: 8;}.leftside-content{width: 620px;margin-top: 10px;margin-left: 5px;float: left;z-index: -1;}#sidebar{margin-top: 110px;margin-right: -25px;padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;background: url('images/scribble_light.png');outline:rgba(0, 0, 0, 0.1) solid 6px;width: 280px;float: right;position: relative;z-index: 9;}#footer{background: url('images/footer_bg.png') repeat-x;width: 900px;height: 25px;top:100%;clear: both;position: absolute;z-index: 10;} I can't figure out how to make the footer to stay under the page-wrap div, on the bottom of the page.The clear property clear doesn't work, I also tried with overflow: auto in the page-wrap, positioning the footer, :after for the page-wrap and :before for the footer, I also put the footer div after the page-wrap div.Here is a picture of the design with the current code: Thanks in advance for your help!
  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...