Can you provide some guidance on creating a webpage using DIV elements that are positioned differently? For instance, take a look at the following example:
Can you provide some guidance on creating a webpage using DIV elements that are positioned differently? For instance, take a look at the following example:
To achieve the desired layout, it appears that employing absolute positioning along with predefined width and height for individual elements would be necessary.
To achieve CSS absolute positioning, refer to the guide found here
In essence, your code would resemble the following:
#div1 {
position:absolute;
left:100px;
top:150px;
width:80px;
height:30px;
}
#div2 {
position:absolute;
left:120px;
top:200px;
width:100px;
height:30px;
}
And so forth...
Generate DIVs with an absolute positioning style and define the CSS parameters for top and left on each one.
To contain them, consider enclosing them within a div that has a relative positioning style.
Check it out: http://jsfiddle.net/Yz9e4/
Have you ever wondered how this technique operates? Find out more here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
The brilliance of my solution lies in the use of #boxContainer > div, eliminating the need to specify position: absolute for each individual box.
CSS:
#boxContainer {
width: 500px;
height: 500px;
background: #ccc;
border: 1px dashed #444;
position: relative
}
#boxContainer > div {
/* Add properties that apply to all absolutely positioned divs here */
position: absolute;
background: #999;
border: 2px dotted #444
}
#box1 {
top: 50px;
left: 50px;
width: 100px;
height: 75px
}
#box2 {
top: 200px;
left: 300px;
width: 180px;
height: 125px
}
HTML:
<div id="boxContainer">
<div id="box1"></div>
<div id="box2"></div>
</div>
Learn about HTML elements
<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div id="D"></div>
Discover some CSS styling
#A, #B, #C, #D {
position: absolute;
width: 50px;
height: 50px;
}
#A {
top: 20px;
left: 45px;
background-color: aqua;
}
#B {
top: 50px;
left: 100px;
background-color: blue;
}
#C {
top: 50px;
left: 200px;
background-color: red;
}
#D {
top: 200px;
left: 100px;
background-color: green;
}
Experience it yourself on this JSFiddle link.
<style>
#container{
background:#ff0000;
position:relative;
width:800px;
height:800px;
}
#inner{
background:#00ff00;
position:relative;
height:100px;
width:100px;
}
</style>
<body>
<div id="container">
<div id="inner" style="top:100px;left:100px;"></div>
<div id="inner" style="top:300px;left:100px;"></div>
<div id="inner" style="top:420px;left:170px;"></div>
<div id="inner" style="top:200px;left:400px;"></div>
</div>
</body>
I've been trying to figure out why the search button is still showing at the bottom left and creating an "l" shape even though I'm using style="overflow: hidden; padding-right: .5em;". Does anyone have any ideas as to what might be causing this i ...
I need help creating a flexible content area using only HTML/CSS. The width of this area should be able to vary from 0 to 50% within its container, which can itself vary from 0 to 100% of the window size. I have two items that need to be positioned next ...
How can I prevent my ul.SideNav_Main li a:focus class from losing focus when I click on the iframe or elsewhere on the page? Shouldn't it maintain focus until I click on another URL in the list? Is it possible to solve this issue with just CSS, or wo ...
Having an issue with my progress bar design... When viewed in Chrome, the value of the progress bar appears in red due to CSS styling I applied... But when opened in Mozilla, it shows up as a dull grey color. progress[value] { width: 250px; height ...
I've been experimenting with implementing the Bootstrap toggle button, but I'm having an issue where I can't 'tab' to them using the keyboard due to something in their js script. Interestingly, when I remove the js script, I'm ...
I have simplified this code as much as possible. I have a typeahead variable that is functioning correctly. However, I also need to pass two unrelated variables $php_var1 and $php_var2 along with the typeahead variable. These PHP variables are initialized ...
Trying to send back a JSON file to the Chrome extension for user display. The query is reaching the server without issues, and the fetched URL does return the JSON file when accessed directly. However, the Chrome extension displays an "undefined" message i ...
Similar Question: Javascript function to convert color names to hex codes Is there a way to determine the hexadecimal value of a named color that is currently being used by the browser? For example, I would like to achieve something similar ...
I am experiencing an issue with some code I wrote. Instead of displaying a random object from the array as intended, it is showing the random number used to try and display an object. <html> <body> <h1>HTML random objects< ...
Hello, I have been trying various methods but am struggling to figure out how to display the following JSON object as a tree HTML view with ul li items using JavaScript. Can anyone help me with this? [ { "CategoriesModelId": 7, "Name": "Parent ...
Hello everyone, thank you for taking the time to look at this. I'm attempting to execute a javascript function when I click on the update button. Here is the javascript code: var text2Array = function() { // This function takes the value from the t ...
Within my input element, I currently have the value set as "Go" and the id is #btnSearchBox. I am attempting to replace "Go" with a fontawesome icon. Interestingly, if I manually replace the value "Go" with (the code for search) and manually add th ...
Attempting to query a JSON file in order to adjust the position of an array. For instance, here is a snippet from the JSON file: { "result": [{ "summonerLevel": "0", "summonerID": "0", "summonerName": "", "summonerIcon": ...
Looking to modify the behavior of a button where, when clicked, it hides a specific div element, changes its text display, and toggles between classes using addClass/removeClass for subsequent click events. Unfortunately, the intended functionality is not ...
I recently wrote a piece of code to dynamically add or delete rows in an HTML table. The issue I'm facing is that while the addition of rows works perfectly fine, I'm unable to delete a specific row. Upon clicking the delete button, I encounter a ...
I have an example of a basic HTML page: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Document</title> </head> <body> <p id="demo">Nothing to see here</p> & ...
There seems to be some issues with transferring my website from a custom domain on Hover. When I try to import it to anthematics.github.io, only the HTML loads while images and CSS are missing. <link rel="stylesheet" href="theme.css" type="text/css"> ...
Currently, I am encountering an issue with the lightbox feature on my website. When trying to play a video, there seems to be a layer (div tag) blocking it, preventing me from playing or stopping the video. This problem occurs when clicking on an image fir ...
I have a scenario where I am using display:none to hide a div, and this div is supposed to be shown only when the user clicks on the + icon. However, I also want to ensure that if JavaScript is disabled, the div is shown by default. How can I achieve this? ...
I have Bootstrap v4 set up with its default CSS and JS. I'm attempting to use the classes hidden, hidden-XX-down, and hidden-XX-up on different divs, buttons, etc. However, it doesn't seem to be having any effect. All other classes are working fi ...