FAQ Database Discussion Community


Deciphering Websites Code

html,css,positioning
As part of my education, I am reading the code to the following website, and trying to figure out how it all fits together. http://p.w3layouts.com/demos/resume_pages/web/ My question; upon inspection of '.logo h1 a' (the word 'Resume' in the top left corner) I see that it is floated left, with 0...

How to position an SVG canvas

html,css,svg,positioning
I cannot figure out for the life of me how to position an SVG element on a page. I spent a good hour reading Sara Soueidan tutorial on positioning the inner contents of an SVG element inside the viewport of the SVG, but I cannot find anywhere how you would...

positioning the box down

html,css,positioning
Im trying to move the positioning of box8 more down but for some reason it's not moving. Instead its moving down container 4.. please help! Im trying to move the positioning of box8 more down but for some reason it's not moving. Instead its moving down container 4.. please help...

centre iframe absolute position in html page

html,iframe,positioning,absolute,clipping
I have an iframe which I have clipped at the top, but want to centre on the webpage and zoom on load. I can clip it, but cannot position it, even with a relative div container, so as to maintain the clipped area at the top. JSFiddle <div id="content"> <div...

CSS positioning without the use of float or margin adjustments

css,positioning
How can I move my UL element over the the right of the browser without using float, or 'guesstimating' that the element is flush to the right margin through the use of tools such as margin px/% etc? .nav li { display: inline; } .nav h1 { background-color: red; display:...

$(window).scroll function doesnt fire

jquery,scroll,window,positioning
I am trying to implement this tutorial technique into my current project: http://www.webgeekly.com/tutorials/jquery/a-simple-guide-to-making-a-div-static-as-you-scroll-past-it/ (specifically the relative/fix social media tool bar on the left side) doesnt start to be 'fixed' until a certain scroll value. stops being 'fixed' before the footer (as to not overlap it) I have been following along,...

Css button doesn't respond when hovered over

html,css,positioning,opacity,overlapping
So I had the button working until i added a new block div called 'dark-blueright' and positioned it under 'light-blue'. /* ▒█▀▀▀█ ▀▀█▀▀ ▒█░░▒█ ▒█░░░ ▒█▀▀▀   ▒█▀▀█ ▒█▀▀▀ ▒█▀▀▀█ ▒█▀▀▀ ▀▀█▀▀ ░▀▀▀▄▄ ░▒█░░ ▒█▄▄▄█ ▒█░░░ ▒█▀▀▀   ▒█▄▄▀ ▒█▀▀▀ ░▀▀▀▄▄ ▒█▀▀▀ ░▒█░░ ▒█▄▄▄█ ░▒█░░ ░░▒█░░ ▒█▄▄█...

Absolute positioning doesn't stick to bottom

html,css,positioning,absolute
I'm trying to create a 1-page scrolling layout: http://codepen.io/TimRos/pen/vOXVQM Every "page" is built like this: section { display: flex; min-height: 100vh; flex-direction: column; } Now I want to be able to scroll to the different sections by clicking an anchor point located at the bottom of the section. This works...

Headings in-line with image

html,css,positioning
I am trying to get the top of a website to look like this: But it looks like this: And here is the code: .navigationbar { width: 100%; height: 11%; background-color: #202020; padding-top: 0px; overflow: hidden; } .logo { margin-left: 20%; height: 85%; width: 19.3%; margin-top: 8px; display: inline-block; float:...

Repositioning a div in window if it overlaps

javascript,jquery,css,positioning
I'm creating div on my page dynamically with jQuery. If the the mouse click position is on the lower part of the screen, the div will display partly off the screen. Basically taking screen 680px, mouse clicked at 600px, div height 300, the lower 220px of the div would be...

Struggling with creating a navigation bar with angled divs that are stacking on top of each other

css,sass,positioning,compass,susy
I'm a visual designer struggling to code, to cut to the chase, below is the problem: What I'm trying to achieve: Goal 1 and Goal 2 screenshots, including my current dilemma, I've placed a link below (as I'm not allowed to include screenshots yet as I am a newbie: https://www.dropbox.com/s/libc4wp970xz3ms/Screenshot.png?dl=0...

Div positioning broken by input

html,css,input,positioning
I'm having a problem achieving the layout for a website I'm designing. There are three blue divs across the top of the page under which I have placed four red divs. Each of the red divs will take up just less than a quarter of the width of the page....

Aside and Article overlapping the header

php,css,html5,css3,positioning
I'm remaking a website for Old Treasures Furniture and Imports in HTML5. I have an issue with the positioning of the aside and article tags. They seem to like the header so much that they are on top of him. I have tried to set the position of the two...

How to stick an image to the bottom of the visible part of a scrollable div

html,css,image,positioning
I have a drop-down menu that has a lot of content. If this dropdown is used on a mobile device, the user will be required to scroll down inside the ul (the ul has overflow:scroll) to reveal the rest of the content. This is somewhat unusual, so I want a...

Bootstrap 3.3.4 navbar issue - positioning

html,css,twitter-bootstrap,positioning,navbar
Here is the MarkUp: <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> <a href="index.html" class="navbar-brand">Kellumonline</a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right">...

SKScene bounds and positioning

ios,positioning,skscene
I'm trying my best to use my "responsive" / "adaptive" knowledge to apply it to positioning in my SKScene. However, it would appear there's a problem. As the width / height of the scene aren't accurate. In this example, the view's anchor point is centerpoint i.e 0.5, 0.5. SKLabelNode *label...

Float right inside table not working

html,css,positioning
I wish to make the blue circles float left for odd numbers and right for even numbers. I've tried floating the elements but it doesn't seem to work. I've used table and table-cells to achieve the centered text and logos but cannot seem to get them to inverse unless i...

How to get rid of the bottom shadow in label of the css tabs

css,tabs,positioning,shadow,box-shadow
I'm making the css tabs with shadows. How can I get rid of the bottom shadow in label? Here's an example: http://codepen.io/ekscentrysytet/pen/QbNdEB I've tried z-index: -1; for label:after but shadow disappears....

How do I get the divs to float next to, and below each other

html,css,alignment,css-float,positioning
I have a lot of divs with text in it, and I want them to nicely align next to each other and below each other. (I've read somehwere that I should make a parent div for these, and give the parent a relative position and the child a absolute position,...

CSS: absolute position inside centered relative div issue

html,css,positioning
I have an issue with absolute and relative positioning. Im trying to center a relative DIV that contains all absolute div. The problem I have is when I try to center my relative DIV, my absolute div "#mainForm" get shrink (height issue). In the html below, if you remove the...

HTML CSS POSITIONING

html,css,positioning
.container {width: 100%;} .nav h1 {float: left;} .nav ul {float: right;} .nav li {display: inline-block;} <div class="nav"> <div class="container"> <h1>.nav h1 Resume</h1> <ul> <li>.nav ul .nav li Home ul li</li> <li>Portfolio ul li</li> <li>Skills ul li</li> <li>Experience ul li</li> <li>Contact ul li</li> </ul> </div> </div> <div class="slider"> <h2>div.slider h2...

jQuery ui selectmenu vertical position offset (relatively to buttons in this line)

javascript,jquery,jquery-ui,positioning,jquery-ui-selectmenu
In my form I place control elements in a line: button, select box, checkbox. It looks logically right. But since I've started using jQuery UI I see strange vertical of select box. Here's the example from jquery-ui site, a little bit shortened: https://jsfiddle.net/Tertium/z829pay7 $(function() { $( "#speed" ).selectmenu( { width:...

How to overlap some divs on another div with img in bootstrap?

html,css,twitter-bootstrap,positioning
I want to have image on jumbotron and on this image some buttons from bootstrap and some other divs of course with bootstrap(my calendar). I want to create page full responsive so after version for computers I'm going to create version for mobiles. I wan't it to be something like...

How can I centre each text element within each
both vertically and horizontally, so that the text is exactly in the middle

html,css,alignment,positioning
I am trying to create nine circles, with a picture of a person in each, with the name of the indidvidual directly in the middle of each picture. Below is my HTML and CSS file. I have tried using text-align: centre however it does not look accurate? Also, it only...

Positioning text inside a UL separate to the a:

html,css,class,positioning
Really simple question for CSS 101, but I have created a simple nav bar, and can only specify all CSS elements in one class. I want the container and text to be specified in two different classes. This is what i Have and cannot get the two separated, even when...

HTML/CSS Positioning confusion [closed]

html,css,positioning
I've been looking everywhere and I took a course on codecademy but I still cannot do it on my own work. The problem is I understand it when I'm reading about it etc but simply cannot use it or figure out how to do it when I'm doing my own...

Arrange an Image with Bootstrap

image,bootstrap,positioning
Is it possible to create such a design with Bootstrap: the image taking the top left and surrounded by text on wide devices and the image on top of the text on narrow devices? I am not sure how this positioning would be called and couldn't find a similar example....