In my site, the back to top button will follow the page, which is exactly what I want. However, if your resolution is above 1024x768 (which I'm pretty sure is the case for everyone) the button's position won't be inside the main content div.
I could use Javascript to detect the resolution, and then adjust the position from there, but if there's a cleaner solution, I'd prefer that! Also, I'm not a designer, so if anyone has any cosmetic input, it'd be appreciated!
I have a solution. Add a div to wrap the button.
<div id="button-wraper">
<div id="backToTop">
<a href="#top">
<img src="site_resources/upArrow.png" style="border: none;z-index: 100;" alt="Back to top">
</a>
</div>
</div>
CSS
#button-wraper {
width: 960px;
margin: 0 auto;
position: relative;
}
And remove position: fixed; from #backToTop.
Also make sure to put this code just above <div class="footer"> only.
Put
<div id="backToTop">
<a href="#top">
<img alt="Back to top" style="border: none;z-index: 100;" src="site_resources/upArrow.png">
</a>
</div>
Inside the content div. Remove the "left" positioning and keep the bottom one, it would sit on its natural left position, since you don't have anything defined.
Actually, though, I think it looks much better where it is now.
Edit**
Try this:
<div id="button-wrap">
<div id="backToTop">
<a href="#top">
<img src="site_resources/upArrow.png" style="border: none;z-index: 100;" alt="Back to top" />
</a>
</div>
</div>
CSS
#button-wrap {
position: fixed;
bottom: 0px;
left: 0px;
width:100%;
}
#backToTop {
position:relative;
width:1000px;
margin:0 auto;
z-index: 1000;
color: #C6C6C6;
opacity: 0.3;
}
Related
I've looked at other questions asking similar things, but the answers for them don't seem to work for my problem. I have a website that contains two divs on either side of a news slider, which is also in a div. The side divs are both floating to their respective sides. The problem is, when I make the window smaller, they (adLeft and adRight) overlap the center sliderDiv and go behind it. I've tried various things like making a min-width, overflow be hidden, or changing padding and margins, but I never see any difference. Any help would be greatly appreciated!
Here's the website: http://thehummingbirdplace.com/
Here's the relevant html:
<div id="adLeft">
<a href="http://www.amazon.com/Kathleen-Ball/e/B007QNUTC8/ref=ntt_athr_dp_pel_1/" target="_blank">
<img src="_images/advertisements/autumn.png" width="200" height="300" alt="Autumn's Hope" />
</a>
<br><br>
<a href="http://www.romancestorytime.com/" target="_blank">
<img src="_images/advertisements/loveCowboy.png" width="200" height="300" alt="For the Love of a Cowboy" />
</a>
</div>
<div class="clear">
</div>
<div id="adRight">
<a href="http://www.jeanjoachimbooks.com/" target="_blank">
<img src="_images/advertisements/lovesLastChance.png" width="200" height="300" alt="Love's Last Chance" />
</a>
<br><br>
<a href="http://www.jeanjoachimbooks.com/" target="_blank">
<img src="_images/advertisements/loversLiars.png" width="200" height="300" alt="Lovers and Liars" />
</a>
</div>
<div class="clear">
</div>
<div class="sliderDiv" id="slider">
<img src="_images/podcast/123013_slider.png" width="851" height="323" alt="Later in Life Romances" />
<img src="_images/podcast/122313_slider.png" width="851" height="323" alt="Christmas Contemporary Romances" />
<img src="_images/podcast/121613_slider.png" width="851" height="323" alt="Christmas Historicals" />
<img src="_images/podcast/120913_slider.png" width="851" height="323" alt="Christmas Novellas" />
<img src="_images/podcast/archive_slider.png" width="851" height="323" alt="Archive" />
</div>
And here is the css that applies to it:
#adLeft {
width: 200px;
margin-right: 50px;
float: left;
margin-left: 20px;
}
#adRight {
width: 200px;
margin-left: 50px;
float: right;
margin-right: 20px;
}
.clear {
float: clear;
}
.sliderDiv {
margin-right: auto;
margin-left: auto;
width: 851px;
position: relative;
z-index: 1;
margin-top: -48px;
}
I believe you were on the right track with using min-width, as you can use it on the body of the page to prevent it from scaling down to the point of overlap.
Adding:
body {
min-width: 1400px;
}
to your styles should do the trick. The min-width needs to be applied to body because that's the overall container which everything else is inheriting width from, and positioning against.
Alternatively, if you do not want your page to get cut off once the screen gets smaller than that minimum width, you can use media queries to hide or move the left and right side images so that they are no longer in a position to cause overlap.
A media query is used like so:
#media only screen
and (max-width: 1400px){
#adLeft, #adRight {
/* Some sort of styles here */
}
}
I hope that helps, let me know if you have any questions,
Cheers!
I'm stuck again with css positioning. I would like to create a page which shows one in the middle, surrounded by 10 other ones. Of course, it should look the same on every resolution (mobiles excluded).
But as i change the screensize, the site keeps on changing its look.
HTML
<div class="wrapper" id="wrapper">
<div class="element" id="element-1">Lorem1</div>
<div class="element" id="element-2">Ipsum2</div>
<div class="element" id="element-3">Lorem3</div>
<div class="element" id="element-4">Ipsum4</div>
<div class="element" id="element-5">Lorem5</div>
<span class="break"></span>
<div class="background" id="background"><span>Neologizmo</span></div>
<div class="element" id="element-8">Ipsum8</div>
<div class="element" id="element-9">Lorem9</div>
<span class="break"></span>
<div class="element" id="element-10">M10</div>
<div class="element" id="element-11">M11</div>
<div class="element" id="element-12">12</div>
</div>
CSS
http://nopaste.info/f6d200c414.html
Oups, already accepted an answer :$
Well anyway, since I was working on it, here is a generic solution. The idea is that you always have numberOfsquares/2 -1 squares at the top and bottom, and always one square on the left and one square on the right.
here is a fiddle: http://jsfiddle.net/PyU87/
It will display depending on the wrapper size which depends on the browser size. So this would also work on smartphones.
How does this work? You said you didn't want layouts to change as the screen changes size so I made it use fixed widths and be inside a wrapper so that can't happen.
DEMO
#wrapper {
width: 450px;
height: auto;
padding: 10px;
}
div {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
margin: 5px;
}
#background {
width: 212px;
padding: 0;
}
I have two divs with two images:
<div id="div1">
<div id="div2">
<img src="img1" />
</div>
<img src="img2" />
</div>
Second one is some smaller than first. How can I put second image on first image without using
#div2{
position: absolute;
}
I need to get similar result but without using position absolute property;
The main issue is that there are a lot of other elements, in parent div, not only div2.
Negative margins
You can do lots with negative margins. I've created an example with just two images without any divs.
img {
display: block;
}
.small {
margin: -202px 0 0 0;
border: 1px solid #fff;
}
.small.top {
position: relative;
margin: 0 0 -202px 0;
}
<img src="http://www.lorempixel.com/300/300">
<img class="small" src="http://www.lorempixel.com/200/200">
And some text
<img class="small top" src="http://www.lorempixel.com/200/200">
<img src="http://www.lorempixel.com/300/300">
And some more text
My question to you is why must you do this WITHOUT
#div2 {
position: absolute;
}
If the problem you are encountering is because it's absolute to the page and not the div then make sure #div1 has the following:
#div1 {
position:relative;
}
Its not a good approach to use negative margins. Especially when email templating, gmail reject negative margin and positions. So another way is
<div class='wrapDiv' style='width: 255px;'>
<div class='divToComeUp' style='
float: left;
margin-top: 149px; width:100%;'>This text comes above the .innerDiv
according to the amount of margin-top that you give</div>
<div class='innerDiv' style='width:100%; height:600px'>
Inner div Content
</div>
</div>
You could nest div2 inside div1:
<div id="div1">
<img src="\img1.png" />
<div id="div2">
<img src="\img1.png" />
</div>
</div>
in the image gallery i'm working on, I want a horizontal scroll (ie. the thumbnails are listed horizontal) and the area containing them should have a fixed width with scroll if there are to many to fit the area.
Below is the CSS code so far, but it doesn't seem to work as you can see on the snapshot below the code. What can I write to accomplish what I want?
Thanks in advance!
#thumbnailArea {
padding: 5px;
width: 600px;
height: 90px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid black;
}
The HTML code for the thumbnail area (generated with ASP.net webforms) is as follows:
<div id="thumbnailArea">
<a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>
<a id="ImageRepeater_ImageHyperLink_1" class="thumbnails" href="default.aspx?name=Autumn.jpg"><img id="ImageRepeater_Image1_1" class="thumbnail" src="Images/Thumbnails/Autumn.jpg" /></a>
and so on...
</div>
That's because the container fits to the width you've provided. To achieve the desired effect, you should use two nested divs: outer with given width and inner holding the images.
Example: http://jsfiddle.net/jTJFa/1/
Html:
<div class="box">
<div class="area">
<img/>
...
</div>
</div>
Css:
.box {
width: 500px;
overflow-x: scroll;
}
.area {
width: 1000px;
}
Although you've turned off vertical scrolling, the #thumbnailArea width is not affected (and as a result, forces wrap). This should do the trick:
#thumbnailArea {
white-space:nowrap;
}
For this to work you need a div inside the thumbnail div with a width so that all pictures fit inside:
<div id="thumbnailArea">
<div style="width: 1000px;">
<a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>
<a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>
and so on...
</div>
</div>
That should do the trick, alter the width so that you don't have a massive empty space at the end
When i have a div with position: absolute, and in it is another div with position: absolute the inner div will position in the frame given through the outer (wrapper) div.
Now i want to create a class (css) called error_message that positions itself exactly in the center middle of the site, indifferent from where the it is called, so i need it to break out of every div wrapped around the error_message div.. how do i do this?
i had a similar problem with positioning a hoover-text centered below a floated image button list.
for me the solution was using the "fixed" value for the "position" property
position: fixed
then you can position your error message from top left of the body again.
i use another wrapper div to position all hoover texts center center.
found the solution here:
CSS nested Div with position absolute?
the code is not the code from the picture you see, the picture is just for illustration.
stylesheet in less format (see http://lesscss.org/)
<style>
.button
{
float: left;
position: relative;
a
{
&:hover, &:focus
{
.titlePos
{
.title
{
display: block;
}
}
}
.titlePos
{
position: fixed;
top:50%;
left:50%;
width: 400px;
margin-left: -200px;
.title
{
position:relative;
display: none;
top: 130px;
text-align: center;
}
}
}
</style>
html:
<div id="wrapper">
<div id="content">
<ul>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text1</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text2</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text3</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text4</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
You should try using css's position:fixed property, instead of position:absolute, for the error div. position:fixed will position an element based on the browser window, with no regard for where it falls in the DOM. If you want it to be centered in the window, regardless of window size, you could make the fixed-position div cover the entire screen (left: 0, right: 0, etc). and then text-align the error message inside of it.
I'm not sure why would you want that div to break out of parent div. Maybe try working on a fresh html structure for those?
http://haslayout.net/css-tuts/Horizontal-Centering and http://haslayout.net/css-tuts/Vertical-Centering
These should help you out!
I think the only way to have a div break out of all parent divs is to have an absolute positioning on all of them, which will obviously create its own set of problems.
Why not simply have a pre-defined, hidden div as a direct child of the body, instead of wrapping it in the markup. You can then easily position it as you want, and insert the error messages in it with the help of jQuery. An obvious advantage to this method is that you would only have to write this div once, and dynamically insert the error message into it. I would even suggest having a look at jQuery UI which allows you to easily create dialogs, both normal and modal, besides tons of other features.
UPDATE
Since JS is not allowed, an easy way to do this would indeed be displaying the div only if there was an error. So the PHP code would be ...
if (isset($error)) {
echo '<div class="show_error">' . $error . '</div>';
}
... and the CSS class for it would be ...
.show_error {
width: 400px; // error element's width
height: 200px; // error element's height
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; // minus half the height
margin-left: -200px; // minus half the width
}
Of course, you can further style the error div as you wish, but these are needed to position it dead-center.
Hope this helps !
I have found a solid CSS solution here:
https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/
Let’s add another parent and move the position:relative one level up
(or, in your context, you could maybe simply use an existing upper
parent).
HTML
<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.grand-parent {
position: relative;
}
.parent {
/*position: relative;*/
overflow: hidden;
}
.child {
position: absolute;
top: -10px;
left: -5px;
}
Result: