I would like to understand why the img in the first div is moving a little to the left when deselecting "display:none" in the second div.
I am using chrome for my tests
<!doctype html>
<html>
<head>
</head>
<body>
<button onclick="let img=this.parentNode.querySelector('div:nth-of-type(2)>div>img');img.style.display=img.style.display?'':'none'">toggle</button>
<div style="width:100%">
<div class="width:1200px">
<img src="//static.aujardin.info/img/menu/logo-aujardin.png" width="260" height="120" style="margin:0 auto;display:block">
</div>
</div>
<div style="width:100%">
<div style="width:1200px">
<img style="display:none" src="https://static.aujardin.info/cache/th/adb/detox-eau-citron-menthe-600x450.jpg" width="600" height="450"/>
</div>
</div>
</body>
</html>
I am trying to find a solution to avoid this!
Does your browser add a vertical scrollbar when your second image is displayed?
That would be why if so. The first image is set to center itself in the available width, which the scrollbar takes a piece out of.
Thanks to LandarVargan I fixed this problem on my website by adding
body{overflow-y:scroll}
Then the vertical scrollbar is always displayed and so my logo is no more moving when a page is displayed.
Related
I'm creating a landing page, with an image with text over it.
I have the div that contains the text as a child div to the image div, and the image uses viewport height to fill the whole screen, however as soon as I insert text in the centered child div, for some reason the image gets resized in height, and there's uneeded scrolling space. I have tried different display types, and everything.
I've made an example, one with the div that shows the text and one without
With text and extra scrolling space: http://jsfiddle.net/g7ch1p0j/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
Without text and no scrolling space between the image and content below it: http://jsfiddle.net/sctcebmf/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
You'll see the text moving upwards a little bit (grab the scrollwheel and drag it down slowly) before you see the end of the image (black box) and that's because of the extra issue. This does not appear in the second example.
Got your fiddle working as expected by changing #lander_meta's position to absolute, adding width:100% and making its p tags text-align: center.
Working fiddle.
I received HTML & CSS layout that should be working fine. However, I'm experiencing some strange problems for which I'm not sure why do they occur.
At the bottom of the following this website there is slider that should display couple of photos with text and by clicking on arrows it should slide them. The problem is I can't position neither arrows, nor wrapper containing images.
As you can see arrows(CSS classes: .strelica-lijevo and .strelica-desno are currently behind the image wrapper (CSS class: .slike-wrapper) when they should be left (.strelica-lijevo) or right (.strelica-desno).
Code can be seen directly on the website. Any help would be appreciated.
There are some issues with the HTML and CSS - you should either try to contact whoever delivered this slider to get support for implementing it or you could try by yourself as follows (just checked the markup and CSS and maybe this helps):
Your current HTML:
<div class="w-clearfix main-content karta">
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
could be changed into:
<div class="w-clearfix main-content karta">
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
This would just change the order of the elements - 1st the left arrow, than the gallery, than the right arrow - so they're displayed next to each other. Guess this could be changed in another way, but this is the easiest approach withouth having to change too much in the CSS.
In the CSS
.featured-male-slike.karta
{
clear: right;
display: inline;
float: left;
margin-top: 30px;
overflow: hidden;
/* position: absolute; */ /* <--comment position abolute out */
}
comment "position: absolute;" out - you could also remove it, but it's better to keep it just so you can check with whomever created this slider for you, maybe there's some other way to fix the slider as you mentioned it should be working as it is. Because of this position:absolute the gallery would still be displayed above the left arrow, removing it has the purpose to keep the CSS-property float:left for all three elements - left arrow, gallery, right arrow, so they will be displayed next to each other.
Next is up to you - the images are displayed not positioned correctly because they have a different height, and the css for the img is height: auto, meaning that the height for each img depends on the actual calculated height (as both images are scaled down from bigger original images). You could either try to display images with the same size, or you can add css to set a fixed height for both images, e.g.
.slike-wrapper img
{
height:140px;
}
as the left image has a calculated height of 158px and the right image has 140px. As I only tested this directly in the browser's web developer tools, I can't guarantee that this approach would work for you, but you can give it a try.
Consider a document like this:
<DOCTYPE html>
<html><head><title>test</title></head>
<body>
<div>
<img src="..." alt="" style="clear:both" />
<p>Lorem ipsum...</p>
</body></html>
The image (in my case it's actually an embedded SVG generated ad-hoc) has a size that is not known beforehand. How is it possible that the enclosing div has a width that is just large enough to hold the image (i.e. such that the paragraph below breaks at the same width as the image above)?
This is a follow-up to this question. The code I am currently working on can be found here. The text above the board should have the same width as the board.
This can be accomplished using display:table and a set minimal width. I used width:1px in the sample below, but any minimal width would work.
HTML:
<div>
<img src="..." alt="" />
<p>Lorem ipsum...</p>
</div>
CSS:
div {
width: 1px;
display: table;
}
The result will look something like this:
JS Fiddle Example
you can use float to fit the container
<div style="float:left;background:yellow;">
<img ...>
<p>...</p>
</div>
or you can try (doesn't work with IE7... but you can probably fix it)
<div style="display:inline;display:inline-block;background:yellow;">
<img ...>
<p>...</p>
</div>
and newer mozilla and webkit browsers have
<div style="width:fit-content;margin:0 auto;background:yellow;">
<img ...>
<p>...</p>
</div>
I'm not sure what will happen with your SVG, but in the <svg> declaration you can specify the actual render size of the vectors AFAIK
hoping to be helpful..
I have two divs one is a picture and the other is text. I am putting these two divs inside a parent div and using as my header. My image is much taller than the text. What I want to do is put the image all the way on the left and the text on the right vertically aligned at the bottom to align with the images bottom. I am having a hard time doing this. Also, I can't use float because when I view the page on a mobile phone because of the width the text breaks to the next line which is fine but using float:right it goes to the right which is not what I want here is what I am trying.
<div id="header" style="overflow:auto"><div style="float:left;">
<img src="Images/crescentlogo.png" /></div>
<div><h4 class="gold">Daily <span class="DarkGreen">EXCEEDING</span> <span class="gold">our Customers'</span> <span class="DarkGreen">EXPECTATIONS</span></h4></div>
</div>
Any ideas?
Thanks,
Heres the code for it:
<!DOCTYPE html>
<html>
<head>
<style>
h4{
display: inline;
}
</style>
</head>
<body><div id="header">
<img src="Images/crescentlogo.png" id="img" />
<div id="text" style="display: inline;"><h4 class="gold">Daily <span
class="DarkGreen">EXCEEDING</span>
<span class="gold">our Customers'</span> <span class="DarkGreen">EXPECTATIONS</span></h4> </div>
</div>
</body>
</html>
Link for JSFiddle: http://jsfiddle.net/w5wCG/1/
Give float:left to img and also give float:left to div, it will place side by side
img div {
float:left; }
I have been working on a website for my self recently and ran into an odd problem. Whenever I would move a to the left the page would expand by the amount of pixels I had moved it left from the center. It doesn't hinder functionality but it's really annoying to have this 300-400 pixel space that you can scroll off to the side with. Maybe I'm doing something wrong but any help would be appreciated.
This is an example of what I am doing:
<html>
<body style="background-image: url('Background-Large.jpg'); text-align: center">
<div style="position:relative;top: -605px; left: 295px;"></div>
</body>
</html>
I'm not quite sure what you're trying to achieve here but if you put an 'overflow:hidden' on the body, it should allow you to position your div off the page without adding a scroll bar.
It's because your DIV is set:
left: 295px;
If you want a DIV to be in the center the first thing you should do is make a "main container":
<style type="text/css">
.wrapper {width:500px;margin:0 auto -1.5em;}
</style>
<div class="wrapper">
</div>
Then from there you can add elements inside that container thats now centered:
<div class="wrapper">
<div style="float:left;margin-left:-295px;">
</div>
</div>