This is my code
<a href="https://www.w3schools.com">
<div style="width:200px; border:1px solid black;">
Visit W3Schools.com!
</div>
</a>
My div width is 200PX. But my link is activated right side of the white space. How to activate link only within the div width, ie within 200px?
Depending on what you're trying to do:
<a style="display:inline-block;" href="https://www.w3schools.com"><div style="width:200px; border:1px solid black;">Visit W3Schools.com!</div></a>
Or
<a style="display:block; width:fit-content;" href="https://www.w3schools.com"><div style="width:200px; border:1px solid black;">Visit W3Schools.com!</div></a>
Instead of nesting the div in the a- element, make it its parent.
<div> <div style="width:200px; border:1px solid black;">
Visit W3Schools.com!
</div>
Have fun coding!
Try This:
<div style="width:200px; border:1px solid black;">
<a style="display:flex; width: 100%;" href="https://www.w3schools.com">
Visit W3Schools.com!
</a>
</div>
Related
I am attempting to center images located in my HTML code as they are currently all showing to the left side. This is within the program Infusionsoft, so not sure if it's just the system that won't let me center with everything I have tried, or if I'm just doing it incorrectly. Any push in the right direction would be helpful.
<div style="width:1000px; height:1000px; border:0px; padding:0px;">
<a href="ImageLocation1">
<img alt="single.png" src="ImageSource1" style="width:280px; height:614px; border:0px solid blue; float:left;" />
</a>
<a ImageLocation2">
<img alt="Corporate.png"src="ImageSource3" style="width:280px; height:614px; border:0px solid blue; float:left;" />
</a>
<a ImageLocation3">
<img alt="partner.png" src="ImageSource2" style="width:280px; height:614px; border:0px solid blue; float:left;" />
</a>
</div>
There are two different ways of centering your images, individually, or as a group.
Individual:
<div style="width:200px; height:200px; border:2px solid red; padding:0px;">
<a href="ImageLocation1">
<img alt="single.png" src="ImageSource1" style="width:48px; height:61px; border:0px solid blue; display:block; margin:0 auto;" />
</a>
<a href="ImageLocation2">
<img alt="Corporate.png" src="ImageSource3" style="width:48px; height:61px; border:0px solid blue; display:block; margin:0 auto;">
</a>
<a href="ImageLocation3">
<img alt="partner.png" src="ImageSource2" style="width:48px; height:61px; border:0px solid blue; display:block; margin:0 auto;"/>
</a>
</div>
Added display: block and margin: 0 auto to each image
Group:
<div style="width:200px; height:200px; border:2px solid red; padding:0px;text-align:center">
<a href="ImageLocation1">
<img alt="single.png" src="ImageSource1" style="width:48px; height:61px; border:0px solid blue;" />
</a>
<a href="ImageLocation2">
<img alt="Corporate.png" src="ImageSource3" style="width:48px; height:61px; border:0px solid blue;">
</a>
<a href="ImageLocation3">
<img alt="partner.png" src="ImageSource2" style="width:48px; height:61px; border:0px solid blue;" />
</a>
</div>
Added text-align: center to the wrapper
Fiddle: https://jsfiddle.net/4mnLLxz7/
I changed your height and widths to better present the fiddle, you only need to edit those back to what they were originally.
If you do not wish to use display: block then you can look into flex which is a great tool.
CSS | Flex
I am creating a small page using html which has a header and a body. The header is within a tag with blue background.
The problem I am facing is an image(android.png) which I want to be displayed in right end of the header seems getting placed below the header. How can I place the image in the right of the header.
I don't want to use CSS to align the image.
Click Run Code Snippet to view the current page layout
<html>
<body>
<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3"">
<img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div>
<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
</div>
<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,<br>
I am on vacation. I will respond after i come back</p>
<i><p>Sent from gmail</p></i>
</div>
</body>
</html>
I think this does what you're after. Your text div inside the header was filling out the rest of the width, pushing the second image to the next row:
<html>
<body>
<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3">
<img style="float:left; width:80px;height:50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<div style="font-size:20px;color:white; text-align:left; float:left">
<h3>Something</h3>
</div>
<img style="float:right; width:150px; heigh:50px; margin-top:5px; margin-right:5px" src="http://www.sona-systems.com/img/android.png">
</div>
<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,
<br>I am on vacation. I will respond after i come back</p>
<i><p>Sent from gmail</p></i>
</div>
</body>
</html>
jsBin demo
Learn to use <style>. Makes life easier and more time to drink coffee with friends.
Float your image to the right
But also since H3 is a block element by default float it left (to remove the width)
<p> should not be enclosed in <i> since Paragraphs are block level elements and i are inline
<style>
.float-left{ float:left;}
.float-right{float:right;}
#header{
width:400px;
height:60px;
border:1px solid blue;
background-color:#2196F3;
}
#header img{
height:50px;
}
#header h3{
font-size:20px;
color:white;
}
#content{
width:400px;
height:400px;
border:1px solid blue;
}
</style>
HTML
<div id="header">
<img class="float-left" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<h3 class="float-left">Something</h3>
<img class="float-right" src="http://www.sona-systems.com/img/android.png">
</div>
<div id="content">
<p>
Hey,<br>
I am on vacation. I will respond after i come back
</p>
<p><i>Sent from gmail</i></p>
</div>
Another solution would be to place your images right inside the H3 element
<h3><img> Some Text <img></h3>
but than you need to play with the H3's line-height and the image's vertical-align etc.
Since you want to avoid CSS, I'll assume this is for output to an HTML-handicapped email client such as Outlook.
You can do this without using CSS on your images by simply moving the second image before the first one within the HTML.
<html>
<body>
<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3"">
<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
<img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div>
</div>
<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,<br>
I am on vacation. I will respond after i come back</p>
<i><p>Sent from gmail</p></i>
</div>
</body>
</html>
I fixed this (it will still need some brushing up, but it works) by switching the position in the code where the <div> with "Something" in it and the messed up image are.
Instead of
<div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div>
<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
Do
<img align="right" width="150px" height="50px" src="http://www.sona-systems.com/img/android.png"> <!--added in quotes for the width and height-->
<div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div>
You also have some a wrong double quote in this line
I have a title with html code:
<div id="site-title">
<a rel="home" > book Journey</a>
</div>
No i want to insert a small pic infront of this book journey, how can i do it.
You can use <span> inline elements to work with text along with images
HTML
<div id="site-title">
<a rel="home" ><img src="imageurl"/><span>book Journey</span></a>
</div>
CSS
img,span{
vertical-align:middle;
}
Fiddle
Why don't you use an Image tag for the link.
<img src="/path_to_img"/><span>book journey</span>
Try this:
<div id="site-title">
<a rel="home" >
<img style="float:left;" src="path-of-your-image/image.jpg" />
book Journey
</a>
</div>
Here is the answer you asked for ,
http://jsfiddle.net/Manjuboyz/vJS4m/133/
<div id="first">
<div id="text"> Book Journey
</div>
<div id="img"><img src="~/Images/doctor-landing.png" style="height: 100%; width: 100%;" </div>
</div>
CSS for above
#first{
height:35px;
width:150px;
border:1px solid brown;
}
#text{
height:30px;
width:100px;
border:1px solid black;
float:left;
}
#img{
height:30px;
width:30px;
margin-left:110px;
border:1px solid teal;
}
NOTE:
Change the image to left or right as you needed
UPDATE
Responsive Screen
How can I make a div like this grow to the right instead of down? I want a constant height of my image list, and I want a scrollbar for horizontal scrolling as needed.
http://jsfiddle.net/8J2KM/
<div style="width:700px;height:130px;overflow-x:auto;">
<div style="height:130px;overflow:hidden;">
<a href="javascript:void();">
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
<img src="/cloudsign/web/images/layoutTemplate/8.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
<br />test1
</div>
</a>
<a href="javascript:void();">
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
<img src="/cloudsign/web/images/layoutTemplate/9.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
<br />test1
</div>
</a>
<a href="javascript:void();">
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
<img src="/cloudsign/web/images/layoutTemplate/10.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
<br />test1
</div>
</a>
<a href="javascript:void();">
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
<img src="/cloudsign/web/images/layoutTemplate/11.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
<br />
test1
</div>
</a>
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;border:solid 3px transparent;padding:3px;color:black;font-weight:bold;">
<img src="/cloudsign/web/images/layoutTemplate/13.png" alt="test1" style="border:solid 3px black;padding:3px;width:130px;height:73px;" />
<br />
test1
</div>
<a href="javascript:void();">
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
<img src="/cloudsign/web/images/layoutTemplate/14.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
<br />
test1
</div>
</a>
<a href="javascript:void();">
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
<img src="/cloudsign/web/images/layoutTemplate/15.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
<br />
test1
</div>
</a>
</div>
</div>
</div>
You can either increase the size of the wrapping div to like 300% or how much u need or just add white-space:nowrap to the wrapping div and specify overflow-x:scroll for the inner wrapping div. You don't need overflow:auto in the outermost div.
So the first two divs :
<div style="width:700px;height:135px;white-space:nowrap">
<div style="height:135px;overflow-x:scroll;">
JSFiddle : http://jsfiddle.net/LnApB/
Also modify the height of these two divs to fit the height of the image+caption.
Of course as others have already pointed out tidy up your html, put your styles to separate style sheet to improve readability and maintainability.
Ok, lets tidy this up a little!
HTML:
<div id="container">
<a href="javascript:void();"> <!-- Have as many as you want. Copy -> paste. -->
<div class="block">
<img src="/cloudsign/web/images/layoutTemplate/15.png" alt="test1" />
<br />test1
</div>
</a>
</div>
CSS:
#container {
width: 100%;
overflow: auto;
height: 150px;
white-space:nowrap;
}
.block {
width:auto;
height:100px;
display:inline-block;
margin-right:10px;
color:#888;
}
img {
border:solid 0px transparent;
padding:9px 0px;
width:130px;
height:73px;
}
DEMO HERE
This includes a fix, take a look and work out were you went wrong. Please try to NOT put your CSS in with HTML. It will just make life harder for yourself, use classes .testClass or id's #testID
Hope this helps you.
In order to keep the item divs 'growing right', you need to define the width of the parent container to the largest width it will be inclusive of its contents (i.e. the total width of all child items).
There are a number of possible approaches, look at this fiddle for options.
As an aside, separating out your styles so they aren't inline is recommended, aside from leading to a far increased ability to maintain and control your code, it is much more efficient.
<div style="width:300px;overflow:auto;">
</div>
put your code inside this div
i updated jsfiddle here check it.
http://jsfiddle.net/8J2KM/2/
Remove <br/> in your html then it will grow horizontally.i have changed the js fiddle.Have a look.
DEMO HERE
Take a look at this jsfiddle
I'm trying to make my div to the right use the entire width and height of the parent div.
Any idea what I'm doing wrong?
Here is the HTML
<div style="width:150px;padding:0;min-height:200px;">
<div style="width:100%;background-color:#99CD4E;">
<div style="width:35px;padding:5px;display:inline-block;border: solid 1px #ff0000;">
<img src="/photos/files/5/main/small_thumb.jpg" class="thumb_small "/>
</div>
<div style="height:100%;display:inline-block;border: solid 1px #ff0000;">user <strong>age</strong><br>town, state</div>
</div>
Instead of styling them with display:inline-block you could style the divs with display:table-cell and give that particular div a width of 100%.
jsFiddle example
<div style="width:150px;padding:0;min-height:200px;">
<div style="width:100%;background-color:#99CD4E;">
<div style="width:35px;padding:5px;display:table-cell;border: solid 1px #ff0000;">
<img src="/photos/files/5/main/small_thumb.jpg" class="thumb_small "/>
</div>
<div style="height:100%;width:100%;display:table-cell;border: solid 1px #ff0000;">user <strong>age</strong><br>town, state</div>
</div>