Image inside div disorts - html

I'm trying to make clickable image inside div and it's being placed under divs header. I want that this image would be in the same level as Header.
Thanks.
Html:
<div class="One"> <h1> One </h1>
<div <a href="One.html">
<img alt="One" src="One.jpg" width="200" height="200"> </a></div>
</div>
Css:
.One{
position:absolute;
top:10%;
left:10%;
height: 35%;
width: 50%;
border: 1px solid;
}
.One h1{
text-align: center;
}

You forgot to close one of the opening div tags.You also may need to use the whole URL in the hyperlink. Instead of using
<a href="One.html">
You might want to use
<a href="http://mywebsite.com/One.html">

Are you expecting the following output?
.One{
position:absolute;
top:10%;
left:10%;
height: 35%;
width: 50%;
border: 1px solid;
}
.One h1{
position:absolute;
left:35%;
}
.One a img {
width:100%;
height:100%;
}
<div class="One"> <h1> One </h1>
<a href="One.html">
<img alt="One" src="https://image.freepik.com/free-vector/prairie-house-with-fowers-and-sunrays-background_293-152.jpg" > </a></div>

Related

How to make two image button hyperlinks side-by-side take up full screen?

I want to have two images, left and right halves of the page, that when clicked, re-direct to a particular link.
When the user enters the webpage, I want them to see nothing but these two images (which are clickable), and I don't want it to be scrollable either, i.e. I just want it to fit on the single page.
Not very experienced with HTML - how to modify/rewrite the code below?
<a href="http://www.google.com">
<img src="left_image.png" alt="Go to Google!" >
</a>
<a href="http://www.facebook.com">
<img src="right_image.png" alt="Go to Facebook!" >
</a>
Looking something like this
html,body{
width:100%;
height:100%;
margin:0
}
div.container{
position:relative;
width:100%;
height:100%;
box-sizing:border-box;
}
.left, .right{
width:50%;
height:inherit;
float:left
}
a{
display:block;
width:100%;
height:inherit
}
.left{
background:url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
background-size:cover;
}
.right{
background:url(https://pixabay.com/static/uploads/photo/2016/03/28/12/35/cat-1285634_960_720.png);
background-size:cover;
}
<div class="container">
<div class="left">
<a href="www.google.com" ></a>
</div>
<div class="right">
</div>
</div>
The best method I think would be to use a flexbox with viewport units (vh and vw) and use a backround-image with background-size: cover - see demo below:
body{
margin:0;
display:flex;
}
*{
box-sizing:border-box;
}
a {
width:50vw;
height: 100vh;
border:1px solid red;
display:flex;
overflow: hidden;
background-size: cover;
background-position: center;
}
a.left{
background-image: url('http://placehold.it/500x500');
}
a.right{
background-image: url('http://placehold.it/600x600');
}
<a class="left" href="http://www.google.com"></a>
<a class="right" href="http://www.facebook.com"></a>
There is a lot of answers to this so just choose what you like. This is how to work with it in general no matter what goes in the div.
.holder {
width: 100vw;
height: 100vh;
display: flex;
overflow:hidden;
}
.one, .two {
width: 50%;
}
.one {
background: red;
}
.two {
background: green;
}
<div class="holder">
<div class="one"><a href="http://www.google.com">
<img src="left_image.png" alt="Go to Google!" >
</a>
</div>
<div class="two"><a href="http://www.facebook.com">
<img src="right_image.png" alt="Go to Facebook!" >
</a></div>
</div>

How to make this "img" element behave as if in the normal flow?

So this is my markup, it's basically an image gallery.
<div class="img">
<div class="cont"><img src="logo.jpg" alt="logo" /></div>
<div class="desc">This is the awesome logo</div>
</div>
<div class="img">
<div class="cont"><img src="logo.jpg" alt="logo" /></div>
<div class="desc">This is the awesome logo</div>
</div>
<div class="img">
<div class="cont"><img src="logo.jpg" alt="logo" /></div>
<div class="desc">This is the awesome logo</div>
</div>
<div class="img">
<div class="cont"><img src="logo.jpg" alt="logo" /></div>
<div class="desc">This is the awesome logo</div>
</div>
And here's my CSS
div.img {position:relative;
margin:5px;
border:1px solid #000;
padding:0;
width:300px;
height:300px;
float:left;
}
div.cont {
position:absolute;
left:50%;
margin-left:-125px;
}
div.img img {
margin-top:5px;
border:1px solid white;
padding:0;
width:250px;
height:250px;
}
div.desc {
text-align:center;
color:black;
}
div.img a:hover img {
border:1px solid #666;
}
Basically my problem is I want the "img" element to behave as if it's in the normal flow, so that my "desc" div can acknowledge it as a block-level element and position itself below the image (which is a logo, by the way) exactly the way I want it, I know that absolute-positioned elements are taken away from the normal document flow, that's why my "desc" div is behind the image because it behaves as if the "img" element isn't there at all, which is not what I want.
I know this can be solved by changing the "cont" div to position-relative, but I want answers for position-absolute only because I feel like it's really important to tackle this specific problem and the specific situation, thanks.
try it DEMO
div.img {position:relative; margin:5px; border:1px solid #000; padding:0; width:300px; height:300px; float:left; text-align:center; }
/*div.cont {position:absolute; left:50%; margin-left:-125px;}*/
div.img img {margin-top:5px; border:1px solid white; padding:0; width:250px; height:250px;}
div.desc {text-align:center; color:black;}
div.img a:hover img {border:1px solid #666;}
How about positioning the desc div by giving it bottom 0; position:absolute;
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/360/
CSS:
div.desc {
text-align:center;
color:black;
position:absolute;
bottom:10px; //Can be any value depending on your design.
}

Make a div containing img take full height

This question have been asked a lot on the web. But each try don't suceed
For a Website I need to make a header, I'm using django + boilerplate (I think that's boilerplate should be the cause, as copy paste of my code in js fiddle works, while it doesn't on local).
Here is the HTML I use:
<div id="topbar">
<div id="networking">
<div id="title">
EasyMusik
</div>
<div id="logo">
<img src="{% static "img/icons/myzik.svg" %}" />
</div>
</div>
</div>
And here is the CSS:
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
}
#tobbar div{
height: 100%;
display:inline-block;
}
#networking{
padding-left:25%;
}
#networking div{
display:inline-block;
}
#title{
position: relative;
height:100%;
font-size: 24px;
}
#logo img{
width:100%;
display:block;
float:left;
}
#logo{
position: relative;
height: 100%;
padding-left:15px;
background-color : #FF0000;
}
And I got this result
I want the Red area to fullfill the green one. Wich property should i add/remove to achieve that?
EDIT: Finally managed to get a fiddle:
Fiddle here
This did the worked for me. Though its not your CSS.
CSS:
.parent
{
width:100%;
background-color:Green;
height:50px;
text-align:center;
font-size:24px;
}
.sub
{
width:50px;
background-color:Red;
height:50px;
display: inline-block;
}
.img
{
vertical-align:middle;
padding-top:15px;
}
HTML:
<div class="parent">
Easy Muzik
<div class="sub">
<img alt="" class="img" src="style/img.png" />
</div>
</div>
Give #topbar a height. If you want your child container to be 100% height or width, your parent container has to have a height or width specified. Good luck!
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
height: 200px
}

how to set icon and text inline on header of in phonegap app?

____________________________________________________________
| logo_icon page_Tittle |
------------------------------------------------------------
I want to make a header of my phonegap app like this one. On the left of the header there should be a logo(img) and on center there should be page tittle(text). Now I have already try this one.
<div data-role="header" >
<div class="logo" > <img src="img/logo.png" /> </div>
<h1 id="tittle">Main Page</h1>
Exit
</div>
and the css its css is:
.logo {
vertical-align: left;
}
.tittle{
text-align: center;
display: inline-block;
vertical-align: middle;
}
Kindly help me how it will be work? I am new in css.
<div data-role="header" class="header" >
<div class="logo" > <img src="img/logo.png" /> </div>
<h1 id="tittle">Main Page</h1>
Exit
</div>
the css:
.header{display:inline-block;
padding:5px 15px;
text-align:center;
width:100%;
}
.logo{float:left;}
.header h1 {font-size:15px;
width:80%;
text-align:center;}
basically, by adding the text align property of the header div as center, and setting the float property of the logo element to left, should solve your problem
check out the js fiddle link :)
http://jsfiddle.net/Q2Hkj/
This should work for you:
.logo {
float:left;
}
.tittle{
text-align: center;
width:75%; margin:0 auto;
vertical-align: middle;
}
I recommend you to do that with max number of % size and position in your css and use a JavaScript function for center the elements depending of the window size.
Anyway I created a fiddle example for you, take a look and some ideas.
HTML:
<div id="top_bar">
<img id="logo_top_bar" src="../img/logo_top_bar.png">
<section id="title">App title</section>
</div>
CSS:
html,body{
position: relative;
padding: 0px;
margin: 0px;
width: 100%;
max-width: 100%;
height: 100%;
max-width: 100%;
overflow:hidden;
}
#top_bar{
position:relative;
float:left;
height: 60px;
width:100%;
left:0;
top:0;
overflow:hidden;
background-color:rgb(46, 42, 42);
}
#logo_top_bar{
position:absolute;
height:30px;
width:70px;
left:4%;
top:15px;
}
#title{
position:absolute;
left:45%;
top:16px;
font-size: 1.5em;
color:white;
}

Positioning vertical center

I want to center these 4 images. Horizontally it is working but vertically it won't work. Does anybody knows how to solve this problem? At the moment I've got a black header/footer section with 4 images centered horizontally. Everything is scalable but not the height of the images.
Am doing it right?
HTML:
<section>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
</section>
CSS:
body {
margin:0;
padding:0;
max-width: 100%;
max-height:100%;
}
section {
position:absolute;
top:5%;
bottom:5%;
left:0;
width:100%;
height:90%;
}
section img {
width:12.5%;
float:left;
margin-left:10%;
}
Assuming the width of the image equals the height of the image (like the code you gave has), you can just use margin-top of 50% - imageHeight. That would look like
section img {
width:12.5%;
margin-top:32.5%;
float:left;
margin-left:10%;
}
Demo
If they're not, you can use this pure CSS approach
I think its easier to wrap the images in a container and then center the container in the container's parent, in this case you could use an Article tag to wrap the images an then center that article in the section like this
HTML
<section>
<article>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
</article>
</section>
CSS
html, body {
height: 100%;
width: 100%;
}
section {
top: 5%;
left: 0%;
width: 100%;
height: 90%;
/* strech */
overflow: hidden;
}
article {
width:80%;
height:40%; /* change this to set height */
/* CSS absolute center begin */
border: 2px solid #0000ff;
margin: auto;
position: absolute;
display: inline-block;
top: 0;
bottom: 0;
left:0;
right:0;
/* CSS absolute center end*/
}
.pic {
position: relative;
float: left;
width: 12.5%;
height: 100%;
margin-left: 10%;
}
.pic img{
position: relative;
width:100%;
height:100%;
}
Hope it help you
You can give the section position:relative; and then do a trick with the images.
The sample below makes them centered of the section, if you want to have the images spread out, but vertically aligned, you need to do this trick on the containing element (like a dive around the images in the section:
section {
position:relative;
top:5%;
bottom:5%;
left:0;
width:100%;
height:90%;
}
section img {
/*width:12.5%;
float:left;
margin-left:10%;*/
position:absolute;
top:50%;
margin-top:-25%;/* should be half the height of the image */
left:50%;
margin-left:-25%;/* should be half the width of the image */
}