Html Div Link covers an entire background row - html

I just made a div-link with an image src. Almost everything is ok nevertheless the image-link-div, although its positioned just where i want to it to be, covers (as a link) an entire row from left to right, like it is using an entire line. Any object I put near the code gets placed after (above) or before (bottom) of this invisible link row. Any help ?
**The image its just the Google homepage logo on every navigation:
white background
properties:
width - 70px
height - 38px (auto stretched on paint, saved as .jpg)
CSS:
.box4
{
margin-left: 0%;
margin-right: 80%;
display: block;
}
HTML:
<div class="box4" onclick="location.href='https://www.google.cl'" style="cursor:pointer;"> <img src="Imagenes/Google.jpg"> </div>

In short, the problem with your div-link :
<div> uses by default display: block, you don't need to define it for divs
all of your other "boxes" use float: left which reduces width of block to it's minimum if width is not specified and removes what you call "invisible link row"
learn more about display and float attributes, it's hard to create a layout if you don't know absolute basics of CSS

Related

HTML/CSS: How to make a <div> containing an <img> tag inside a <section> responsive?

I'm making a website using fullPage.js, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top.
Currently, I'm wrapping the image to be displayed in a div. I then scale the div fullscreen using,
.post-header {
background: #22BDA0;
max-width: 100%;
height: auto;
}
The img tag inside of the div has a class header-image which I style as,
.post-header .header-image {
max-width: 100%;
height: auto;
margin: 0;
}
However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code HERE. Just scroll down to second page, or click Personal Details on the homepage.
Thanks a lot for the help!
What if you just give height:100%; to .section2-container? Will it solve your issue?
Remove display: table-cell; from .fp-tableCell and the padding disappears. Does this need to have display set to table-cell?
fullPage.js has an option: verticalCentered that can be set to false. This seems like a good solution, since the alternative means always trying to ensure that the content of the containing element is always 100%.

Responsive Images - Differences with width: 100% / width:auto

Currently working on a landing screen where users choose a colour theme on the site. There are two coloured sides that 'grow' on hover giving the effect of colouring the website seen on a mockup infront. (Check out the Codepen below to get what i mean, it's kinda hard to explain fully)
Demo: http://codepen.io/BAWKdesign/pen/PPvRjz/
To 'color' the mockup two images are used placed over one other.
It needs to be responsive so I've given the back image width: 100%; height: auto; which is also used to dictate the size of the parent div.
The top image is set to width: auto; height: 100%; as using width 100% causes the image to stretch and not clip.
The problem is, the overlaid image appears larger in size as you can see in the link below giving a cut up image effect. Perhaps there are differences in how the size is calculated when you swap 100% and Auto around?
Hopefully this is just me having a brain fart and I've made a rookie mistake somewhere!
Images are by default inline elements meaning they naturally have some spacing around them. You are setting your other images to position: absolute which causes them to display similar to a block element - ie. no default spacing.
Simple solution is to add display: block to your image element:
.img {
display: block;
}
Updated CodePen

allow scroll of div set behind another div

I have a iPad frame and want to have a larger image behind it (the page content) that scrolls down as you scroll. My css is more complicated then the example in the fiddle here https://jsfiddle.net/vk0jk37v/ but I cant seem to get even this to work.
in my real webpage I want to scroll down normally until I get to this image, then I want the scroll to effect the "page content" in this image. After I want to allow the user to continue scrolling normally after the "page content" of the image ends.
Edit: I have updated the fiddle and it rough but essentially what I am looking for except when I set the iPad frame to be on top of the image I am unable to get the content to scroll. the reason I need it under is to keep the image together when resizing the window with out covering the "fixed nav" or black side lines. Any thoughts on this? and thank you Felk for the hint in the right direction
Edit2: the image attached is the context in which I am applying this.
example html
<div class="container">
<img class="frame" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
<div class="inner">
<img src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png" />
</div>
</div>
example css
.container {
width: 70%;
position: relative;
}
.frame {
/* position: absolute; */
width: 100%;
z-index: 100;
}
.inner {
height: 558px;
overflow: scroll;
position: absolute;
top: 14%;
left: 38px;
}
.inner img {
width: 92%;
z-index: -100;
}
Ok. I was trying to fix your fiddle but at the end I have changed too much.
I will explain thought what I would do if I wanted to do your project. (hopefully if I have understood your question well enough).
First at all I would position the image of the ipad at the background with position:fixed and negative z-index. Now we have the image NOT moving at all as the position is placed relative to the window and not to any element. And also we have the first part of your content over the image and scrolling nicely.
Then we focus on the right flow of the html elements when scrolling so basically there will be more content under the first (and later under the image). I have added another div with red background to illustrate better the problem.
The html would look something like this:
<div class="container">
<div class="outer">
<img class="" src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png"/>
</div>
<div class="frame">
<img class="ipad" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
</div>
<div class="moreContent"></div>
</div>
Now we focus just on separate the top content from the bottom content. To do this we just add a big margin-bottom to the first content. Now when scrolling once you reach the end of the first content the image at the background will show then after the margin is over the last content will start flowing over the image (which is what you don't want)
basically we have this: FIDDLE1
Now it's just time to do a very simple jquery (it's always simple if I can use it). We just need to give some orders to the browser so I have used this:
$(window).scroll(function () {
if ($(window).scrollTop() > 1127) {
$(".frame").addClass('relative');
$(".outer").addClass('no-margin');
}
else {
$(".frame").removeClass('relative');
$(".outer").removeClass('no-margin');
}
});
basically I'm telling the browser that when the scroll is higher than 1227px (height) to add a class to frame and another to outer and if you scroll back to remove the classes.
Then The class I add to outer will just remove the big margin between first and last divs while the class add to frame will just make the container of the image relative so the flow of the html is normal and the image will keep scrolling down with the rest of elements.
Of course the 1227px I choose is based on the jsfiddle images you provided but in your future projects it won't be too hard to find the real height of your first content justinpecting it with chrome or simillar. same with the big margin I added.
The rest of changes was to make the sizes correct and center all elements in the window with at 600px width.
Here you have the final FIDDLE

How to limit a content DIV height to its container height, with percentage?

I've the following part of HTML structure (closing tags omitted for simplicity, indentation represents nested tags):
...
- <div class="main-content-wrapper">
- <div class="item-image-wrapper">
- <img class="item-image fit">
- <div class="item-text">
- <h2 id="itemTitle">
- <p id="itemContent">
with the following CSS
.itemdetailpage section[role=main] article .main-content-wrapper {
display: -ms-grid;
-ms-grid-rows: auto auto;
width: 100%;
height: 100%;
}
.itemdetailpage section[role=main] article .item-image-wrapper {
-ms-grid-row: 1;
width: 100%;
height: 100%;
}
.itemdetailpage section[role=main] article .item-image {
margin-top: 0px;
margin-left: 0px;
}
.itemdetailpage section[role=main] article .item-image.fit {
/* Fit image to page size */
max-width: 100%;
max-height: 100%;
}
.itemdetailpage section[role=main] article .item-text {
-ms-grid-row: 2;
margin-right: 5px;
}
The goal is to have the IMG no taller (and no wider) than the main content allows, i.e. to fit the main content space if bigger than that, or to stay at its original size if smaller. The text can just flow below the image, and so can also go below the fold, no problem with that. This should happen with no JS code, CSS only.
When the item text is narrower than the image, it's all ok. The image wrapper is some pixels taller than the image, don't know why, but it looks ok.
The problem I see here is when, at the same time: the image is taller than the available height, and the item text is wider than the image (the item title, in particular). In this case the image wrapper gets taller than its container, and so follows the image. E.g. .main-content-wrapper receives a (correct) height of 900px, but item-image-wrapper is 1024px tall and image is 1024px tall (its natural height).
I know this 100% DIV height has come again and again, and I've looked for answers, but I was not able to find one suitable for this case.
EDIT:
I've found this SitePoint reference, the paragraph where it says "Percentage values refer to the height of ...": does anyone know anything about this rule?
One thing you can do to achieve this in certain situations is add width: 100% and height: 100% to every intervening element, and rely on the text extending out of its containing block if the image takes up all of the available space. This won't work in every situation because it's then very hard to get anything else on the page to make room for the extending text, but on a vanilla HTML page containing nothing else it works, and it might be possible to make it work in some other situations by putting a floated element at the end of the text content and putting a clearing element in any spot that needs to come after that text content, as in this jsFiddle: http://jsfiddle.net/t6LvY/2/
As the design accumulates complexity this could get nasty fast, however. You're probably better off just going with a bit of JavaScript to set the max-height of the image to the window height on window resize.
I think you should remove max-height from image class max-width:100% is enough to fit that image to parent container of image. I don't know this will help you or not.
My own proposed (sad) answer: if I want to keep percentage heights on the DIVs, and stick to pure CSS (i.e. no JS), then the goal cannot be accomplished.
The W3C specs says that the percentage in this case is basically ignored (look for text "The percentage is calculated with..."). And also Internet Explorer docs (the browser I'm working with) says basically the same (look for text "* If the height of the containing block...*").

CSS Image within div will not change sizes

I have two divs on my page, and between the two div's I have an image. Let me further explain...
Div 1 - This is the page's container.
Div 2 - Holds a few lines of text
Image - Just an ordinary jpeg image I want to format.
Div 2 takes up 40% of my page starting from the page's left border. It stretches very far down my page. So, this leaves around 60% of my page left to work with. I want for my image to be 200px wide, and 110px in height. For one reason or another, my image just appears on the bottom of my page in it's original (pre-format) width and height. I will show you the code that I am using.
HTML:
<div id="container">
<div id="div2">
<p> Hi SO, I hope someone can help me with this issue! </p>
</div>
<img id="image1" src="test.jpg" alt="" />
</div>
CSS:
#image1{
width:200px;
height:100px;
position:relative;
float:right;
}
To recap, I want the image 'image1' to be aligned between the left edge of 'div2' and the page's right border. So, I want it centered between the two but NOT centered on my page of course.
I don't think you want to be working with percentages to achieve what you describe.
This is basically what you want:
http://jsfiddle.net/fdXHs/2/
You can check my styles to see how I did it, if you need a more thourough explanation I will post it.
Also you describe that nothing happens to the image, this indicates that no styles are being applied, check your css markup if theres anything that might cause not being used.
AFTER WEBSITE EDIT
The column that needs to hold both elements (the image and the 40% width div) isn't wide enough to hold them both (combined width is 957px, container width is 845px). There isn't enough room for the image so it gets bumped under the first div...
replace prductsummary with:
#productsummary {
clear: both;
background: red;
margin: 0 220px 0 10px;
padding: 10px 0 0 0;
)
And the image:
#lol {
width: 200px;
float: right;
margin: 10px;
}
Try adding float:left; to #div2, like so. Basically, to float content to the right of something, that other content must also be floated. Even then, though, if the floated content doesn't fit the remaining space, it'll go onto the next line.
If you're still having trouble setting the image dimensions, check to make sure that you aren't overriding the css in the image tag itself (say, <img src="whathaveyou.jpg" width=500 height=500> or <img src="whathaveyou.jpg" style="width:500;height:500">)