I am trying to edit a page to use the full width of the page. I am having problems setting out the div layout. There is a div there already
<div id="rightPanal" style="margin-top: 425px;">
but it has things too far to the right and it is a narrow column going down the middle of the page.
I deleting/editing/ a lot of div's already there and I end up with nothing and its all over the place on different broswers.
Can I go to the .css file and just write some css that would give me a box in the middle (where inside i can put in two columns) of the page that doesn't interfere with other div and layout on the screen - say start X and Y on the screen - 4 pictures of equal size and text underneath the four boxes - all square ?
Position: absolute
#rightPanal {
position: absolute;
top: 50%;
}
It sounds like you want absolute positioning:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
This code should get you close:
#rightPanal {
position: absolute;
top: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
box-sizing: border-box;
}
Related
I am currently building a website with weblflow but run into a problem that someone here might be able to help me with. The is an issue I have for multiple projects, so I would really appreciate someone's help.
Basically, if you have an image full screen size (set as background image, 100vw and 100vh), and then want to put headings/labels on top of that image pointing to specific sections in that image, how do I get these headings/labels always move with the image when someone would resize the browser?
As for now I used absolute positioning for the headings/labels and used % margins to position them where I want them to point to on the image. The image itself I have set to position relative. However, with that solution the headings/labels never exactly continue to point to the same spot on the image when resizing the browser.
I think the main issue is that when someone only changes the browser's width, the image gets (for example) smaller bc it keeps it's ratio. Vertically the headings/labels don't move bc the height was unchanged, it's just the browser's width that was changed. So horizontally it's still fine but vertically the headings are off now since the image got smaller due to resizing the browser's width. So I guess I do know why it's not working but I don't know how to fix this. If someone has a solution for this, please let me know.
As an example: if you open this page: http://nestin.bold-themes.com/classy/ and scroll down to the section ‘True value is always inside’, there is an image with 5 numbered labels, no matter how you resize the browser, these labels/numbers stay in the same spot of the image. I see this quite often on websites. How was this achieved?
Would appreciate any help!
You create a parent wrapper, put inside the image and all the divs.
the parent is relateive and the divs are absolute.
here's a small demo.
* {
box-sizing: border-box;
margin: 0;
}
img {
max-width: 100%;
display: block;
width: 100%;
}
.parent {
position: relative;
}
.parent .box {
position: absolute;
width: calc(1.6vw + 10px); height: calc(1.6vw + 10px);
border-radius: 50%;
background-color: #fff;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.parent .box.window {
top: 0;
left: 39%;
}
.parent .box.light {
top: 16%;
left: 46%;
}
.parent .box.pool {
top: 90%;
left: 50%;
}
.parent .box.plant {
top: 55%;
left: 3%;
}
<div class="parent">
<div class="box plant">1</div>
<div class="box window">2</div>
<div class="box light">3</div>
<div class="box pool">4</div><img src="https://images.pexels.com/photos/4075088/pexels-photo-4075088.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt=""/>
</div>
https://codepen.io/ShadiMouma/pen/BaKYyYX?editors=1100
You can achieve this with percentage positioning. For example,
In the parent div
position: relative;
In the child div
position: absolute;
top: 50%;
left: 30%;
Now the child div will always position itself 50% from the top and 30% from the left of the parent div. It does not matter what size the parent div is. I suggest you take a parent div and put the image and texts inside it.
Your example website also uses this technique.
check their code here
Another technique would be using HTML canvas. But for something simple like this, HTML canvas would be overkill.
I would like to align div inside parent div to center horizontally for div with unknown width and dynamic content (will wary from use case to use case.
I have read that margin: auto; usually is usually solution here, but it requires set of width which is unknown for me compile-time. text-align: center does't work for div inside parent div.
Fiddle example
Here is a Fiddle example.
My two questions
I would like the three circles to be aligned to the middle. Number of circles can vary from zero to many.
Another related questions is how I can make the progress bar have a minimum width (for instance when having only one, two or three steps) and strech to right and left when adding more steps? Here is (very bad) illustration in Paint.
As a note I would like this to work for IE 8 as well.
Do you want something like this? DEMO
.progressbar{
top: 0;
position: fixed;
background-color: #00bbee;
width: 100%;
height: 45px;
left: 0;
text-align:center // added this line for centering the content
}
.steps {
display: inline-block; // and this line for auto-aligning center your child elements
}
Your first question can be solved by applying
text-align: center to the top wrapper and changing the display of the steps wrapper to inline-block
Regarding the second question, I'm not sure that this is exactly what you meant - but it can be solved by moving the line out of the steps wrapper and positioning it at the vertical center of the whole bar using
position: absolute;
height: 2px;
margin-top: -1px;
top: 50%;
left: 0:
width: 100%;
background-color: black;
Example in this fiddle
note that I also changed your html because there was some unnecessary tags there
For IE8 support check out this question (the only problematic issue here is the use of inline-block
I'm currently having issues with some CSS/HTML code.
http://codepen.io/anon/pen/bgHGn
I've got the background of the page in a div (feature-bg) this is to fill the entire page. The content then scrolls up from the bottom but that's irrelevant.
I'm having issues trying to get the largeheader to be displayed in the middle of the page (regardless of resolution/window size) and stick to the background so that when the user scrolls, the content covers it?
I'm not sure if that makes any sense or is even possible.
Thanks!
you want to set the text-alignment property to center
.largeheader{
position: fixed;
margin: 0 auto;
font-size: 100px;
z-index:2;
text-align: center;
top: 50%;
left: 50%;
}
The core issue being this isn't exactly in the center of the page,so as #RCorrie put in his answer, you can make a set width and height to the div and then fix the margin with some simple math. Now if you wanted to jump into using javascript and jQuery thats a whole other ball game and you can definitely do this with minimal work and you wouldn't have to keep changing the div size and margin for each web page that is created.
See the CSS code for the solution:
http://codepen.io/anon/pen/GqeBa
.largeheader {
position: fixed;
top: 50%;
left: 50%;
height: 100px;
width: 250px;
margin: -50px 0 0 -112px;
font-size: 100px;
z-index: 2;
}
Fixed positioning allows the element to stay put while you scroll the page.
To get the large header horizontally centered you can use text-align: center; as #metsales suggested.
In order to vertically center the large header there are a few different options you can use. For this case, since you want the large header to stick in the center of the page, I would suggest using the "Absolute Positioning and Negative Margin" method in the linked article.
You'll end up with something like this:
.largeheader {
line-height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
left: 0px;
}
To put the header behind other content when the user scrolls you'll want to play with its z-index property. I can't suggest anything because I don't know the rest of your markup, but you'll probably want a negative value, and the MDN has a decent article on it.
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
I have an absolute positioned logo on the bottom left of my website... BUT the problem is that ive positioned it to stick to the right of the page but it leaves a invisible barrier to the left of it that spreads across the page. So lets say a link is placed in alignment with that footer element, I won't be able to click it, the absolute positioned layer is spreading over it (even though nothings in it)
Heres my CSS for the logos position:
#basemenu {
margin-right: auto;
position: fixed;
bottom:0px;
width: 100%;
height: 40px;
text-align:right;
right:1%;
}
It sounds like you have an img inside of a <div id='basemenu'></div>. Is that right?
We could really use a block of HTML if you wouldn't mind posting it.
What I don't understand is why you can't target the logo itself with a bit of CSS like this:
#basemenu img {
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
}
Use the following block property display : none; to hide the block