The issue I'm having is that my when mobile users double tap to zoom in on content in my right container, the left container which I've set as fixed, jumps in front of the zoomed content. I'm at a loss how to correct this.
CSS
#left_container{
position: fixed;
float: left;
}
#right_container{
float: left;
color: white;
width: 75%;
max-width: 600px;
font-size: 1.5em;
margin-left: 210px;
}
HTML
<div id="left_container">
<div id="header">
<center><h2>Hello World</h2></center>
</div>
<div id="globe">
<img src="http://us.123rf.com/400wm/400/400/Kmitu/Kmitu0706/Kmitu070600073/1126687-globe-isolated-on-pure-white-background.jpg" width="200" height="200">
</div>
<div id="navigation_buttons">
<ul>
<li>HOME</li>
<li>PROJECTS*</li>
<li>BLOG*</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div id="right_container">
<h1>Content</h1>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
There are some things you need to learn about positioning an element to fixed..
First off, any element that is set to fixed or absolute will need a value for [ top andleft ] OR [ bottom and right ]. Note: float:left; won't affect a fixed element, you meant to use left:0;
Second, a fixed or absolute positioned element will overlay any static (default position) positioned element.
SO what's happening is, when the user zooms in, the window scope gets smaller, causing your fixed element to cross over more area of the screen.
What you need to do is, either make your design responsive using Javascript/jQuery, this way you can foresee the ocation of an user 'zooming' in.
The other way you can do this is by giving your fixed element a right of 0 and nesting it inside another element with and a position of relative... this will bind your fixed element and restrict it's bounds.
You might want to read up on the position property http://www.w3schools.com/cssref/pr_class_position.asp
Related
I'm designing a website and i'm trying to center elements vertically in a div following this tutorial https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_center-vertical.
The content technically does get centered. Problem is: the content div gets higher than the content itself, so in reality it's not completely centered, giving problems in mobile screens.
Unluckily have no idea how it happens or how resolve it.
Html section:
<div class="banner-item-content">
<img src="https://alto.7180.eu/modules/custombanners/views/img/uploads/b09df371daff098e783367d788f96a20731083b9.PNG" alt="Banner1" class="banner-img">
<div class="custom-html"> <!--div to center-->
<h1 style="text-align: left;"><span style="color: #ffffff;">Prodotto 1</span></h1>
<p style="text-align: left;"><span style="color: #ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span></p>
<p style="text-align: left;"><span><span>SHOP NOW</span></span></p> </div>
</div>
</div>
CSS that does the centering:
.banner-item-content div.custom-html{
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Here's the link to the website to check it directly: https://alto.7180.eu/it/. You can see the problem in the first banner that says "Prodotto 1" (skip the slider).
I would just like to understand which way i can avoid having this empty space included in the centered div, thanks!
Add display flex to banner item content , it will align center.
.banner-item-content {
display: flex;
}
I might just be really tired but I can't for the life of me figure out why display: inline-block isn't working to make the parent's width adjust to the size of it's contents. I've tried searching for other solutions but every resource I've found says adding inline-block to the parent should do the trick.
In the example below, I am trying to make the blue square only extend to the edge of the green square, and then ultimately center the contents via margin: 0 auto;:
#intro {
height: 400px;
background-color: red;
}
.slide-txt {
display: inline-block;
width: 30%;
background-color: lime;
}
.slide-box {
display: inline-block;
margin: 0 auto;
background-color: blue;
}
<section id="intro" class="image-slider">
<div class="container" id="intro-slide">
<div class="slide-box">
<img src="http://www.jkoffset.com/assets/images/Packaging1.jpg" alt="same-box-slide" width="150px">
<div class="slide-txt">
<h1 class="title">Headline <span>Goes Here</span></h1>
<div class="caption"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn" href="#">
Learn More
</a>
</div>
</div>
</div>
</div>
</section>
https://jsfiddle.net/eam0mk47/
Using width:30%; in the div child (.slide-txt) will make the parent div expand to fill the other 70%, so to avoid that and make it adjust according to content you need to use px instead of % in the div child.
In that red #intro is a div with the class .container ... this element has padding left and right via bootstrap.
Just remove that padding:
https://jsfiddle.net/eam0mk47/1/
#intro .container {
padding: 0px;
}
Or don't use that class there.
I have a simple page where the all the content (<h1>, <h2>, <p>, etc.) is contained within a <div>, in order to have the same width.
I like the way the body text looks and want to keep it that way, but I'd like to add a background image to the heading. It should start from the very top of the page (and window, in my case) and end at the baseline of the last line of the heading itself, while also extending in width from the left side of the window to its right. In the following image I illustrated the desired layout. Below it, I've drawn the html hierarchy that I've attempted.
In fact, I've already tried creating a child of <h1> with
width: 100vw;
position: relative;
left: 50%;
transform: translate(-50%);
but:
Since the page has z-index: -1;, for some weird bug I can't click on links with relative positioning
I'd prefer not to use vw unites because of browser support.
I still can't manage to extend the background to the top.
The font size of <h1> and its margins are defined in pixels, as you see, but the page still behaves dynamically because as I resize the window, the number of lines of <h1> increases.
HTML
<div class="page">
<h1>Heading</h1>
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
CSS
body {
height: 100%;
width: 100%;
margin:0px;
}
.page {
font-size: 20px;
width: 90%;
max-width: 70ch;
padding: 50px 5%;
margin: auto;
z-index: -1;
}
h1 {
font-size: 30px;
margin-top: 0;
margin-bottom: 10px;
}
h2 {
font-size: 22px;
margin-bottom: 26px;
}
p {margin-bottom: 24px;}
JS Fiddle
Two suggestions:
Separate the h1 and the rest of the body in two different divs. Apply the background to the first div.
<div class="background-here">
<div class="page">
<h1>Heading</h1>
</div>
</div>
<div class="page">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Or you could just apply the background to the body and use background-repeat: repeat-x or bakcground-size: cover. But it depends on how the image was designed.
I am trying to put an image as the background and would like it to align to the right, but not closely align to. Something like margin-right:10px. Is it possible to do that in pure css, without explicitly adding a margin to the image?
I had several attempts, but all failed...
http://jsfiddle.net/cA7Un/1/
Thanks in advance!
You could use a percentage, but this is only good if you know the width of the container will stay the same:
background-position: 95% center;
Otherwise, you could add 10 pixels of whitespace to the right of your image in an image editor like Photoshop.
To use the example you put on jsfiddle:
I declared the following extra style:
.rss
{
background-image: url('http://tipabsorb.com/index/wp-content/plugins/category-specific-rss-feed-menu/rss_small_icon.png');
background-repeat: no-repeat;
float: right;
width: 16px;
min-width: 16px;
max-width: 16px;
height: 16px;
min-height: 16px;
max-height: 16px;
margin: 10px;
}
This uses the same image, but adds an extra div to your your markup. This method gives you the image as a background image, and then with the margin you can position it as far from which ever side you want (by also changing the float if you want it on left hand side).
<div class='test' style='width: 300px; height: 100%'>
<div class="rss">
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
The positioning of the "rss" div before you normal markup is important as this affects the flow. Could also do it by positioning the div absolutely with a relative parent.
Finally I deleted the background from the ".test" class, as it has now been moved to the "rss" class.
I hope this helps.
I know there are a few questions about similar topics but they mostly amount to floating the div/image. I need to have the image (and div) positioned absolutely (off to the right) but I simply want the text flow around it. It works if I float the div but then I can't position it where I want. As it is the text just flows behind the picture.
<div class="post">
<div class="picture">
<a href="/user/1" title="View user profile.">
<img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp's picture" title="neatktp's picture" />
</a>
</div>
<span class='print-link'></span>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
</div>
Is an example of the HTML
With the CSS being:
.picture img {
background: #fff;
border: 1px #ddd solid;
padding: 2px;
float: right;
}
.post .picture {
display: block;
height: auto;
position: absolute;
right: -10px;
top: -10px;
width: auto;
}
.post {
border: 1px solid #FFF;
border-bottom: 1px solid #e8ebec;
padding: 37px 22px 11px;
position: relative;
z-index: 4;
}
It's a Drupal theme so none of this code is mine, it's just that it's not fully working when it comes to putting a picture there.
I know this is an older question but I came across it looking to do what I believe you were trying to. I've made a solution using the :before CSS selector, so it's not great with ie6-7 but everywhere else you should be good.
Basically, putting my image in a div I can then add a long thing float block before hand to bump it down and the text wraps merrily around it!
img {
float:right;
clear:both;
width: 50% ;
margin: 30px -50px 10px 10px ;
}
.rightimage:before {
content: '' ;
display:block;
float: right;
height: 200px;
}
You can check it out here:
http://codepen.io/atomworks/pen/algcz
Absolute positioning takes the element out of the normal document flow, and therefore it does not interact with the other elements. Perhaps you should revist how to position it using float instead, and ask about it here on Stack Overflow if you get stuck :)
As mentioned by #Kyle Sevenoaks, you are taking absolute positioned content out of the document flow.
As far as I can see, the only way to have the parent div wrap the absolute positioned contents, is to use javascript to set the width and height on each change.
When you position a div absolutely, you're effectively taking it out of the document flow, so the other elements will act as if it's not there.
To get around this, you can instead use margins:
.myDivparent
{
float: left;
background: #f00;
}
.myDivhascontent
{
margin-left: 10px; /*right, bottom, top, whichever you need*/
}
Hopefully that will do the trick :)
In my opinon, the "Absolute" trait is poorly named, because its position is actually relative to the first parent whos position is not static
<div class="floated">
<div style="position: relative;">
<div class="AbsoluteContent">
stuff
</div>
</div>
</div>
I think the best option is to add an additional div after the float content, but still inside the parent to clear previous styles.
<div class="clear"></div>
And CSS:
.clear
{clear:both;}
I needed a similar solution to float a pullout quote (not an image) which would have variable length text inside. The pullout quote needed to be inserted into the HTML at the top (outside the flow of the text) and float down into the content with text that wraps around it. Modifying Leonard's answer above, there is a really simple way to do this!
See Codepen for Working Example: https://codepen.io/chadwickmeyer/pen/gqqqNE
CSS
/* This creates a space to insert the pullout content into the flow of the text that follows */
.pulloutContainer:before {
content: '' ;
display:block;
float: right;
/* The height is essentially a "margin-top" to push the pullout Container down page */
height: 200px;
}
.pulloutContainer q {
float:left;
clear:both;
/* This can be a set width or percent, if you want a pullout that floats left or right or full full width */
width: 30%;
/* Add padding as you see fit */
padding: 50px 20px;
}
HTML
<div id="container">
<div class="pulloutContainer">
<!-- Pullout Container Automatically Adjusts Size -->
<q>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet.</q>
</div>
<div class="content">
<h1>Sed Aucteor Neque</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</
...INSERT MORE TEXT HERE...
</div>
</div>
Absolute positioning does not let you wrap text. You have to use float and position using margin or padding.
Here's a trick that might work for some:
if you have a container packed with a lot of objects, and you want that positioned object to appear up high in certain cases, and down lower in other cases (various screen sizes for example), then just intersperse copies of the object multiple times in your html, either inline(-block), or with float, and then display:none the items you dont want to see according to the conditions you need.
Here is a JSFiddle to show exactly what I mean: JSFiddle of right positioning high and low
Note: I added color only for effect. Except for the class names, the subject-1 and subject-2 divs are otherwise exact copies of each other.
There is an easy fix to this problem. It's using white-space: nowrap;
<div style="position:relative">
<div style="position: absolute;top: 100%; left:0;">
<div style="white-space:nowrap; width: 100%;">
stuff
</div>
</div>
</div>
For example I was making a dropdown menu for a navigation so the setup I was using is
<ul class="submenu" style="position:absolute; z-index:99;">
<li style="width:100%; display:block;">
Dropdown link here
</li>
<ul>
Image Examples
Without Nowrap enabled
With Nowrap enabled
Also if you still can't figure it out check out the dropdowns on bootstrap templates which you can google. Then find out how they work because they are using position absolute and getting the text to take up 100% width without wrapping the text.