I'm trying to make a specific clickable location on my image. The image size adjusts dynamically to the size of the browser, so I need the clickable box to do that as well. I have created a box to contain my image (not sure if that is necessary) and thought that if I made a box (a.resume) within that container, it would adjust relative to the image. However, the box seem to be creating outside of the container, off-screen to the right.
Below is the CSS:
#banner {
width: 100%;
margin-bottom: auto;
margin-top: auto;
margin-left: auto;
margin-right: auto;
}
img.banner {
max-width: 100%;
height: auto;
width: auto;
}
a.resume {
top: 20%;
left: 35px;
width: 60%;
height: 28%;
position: relative;
background-color: black; /* to see where my box is */
display:block;
}
Below is the HTML:
<body>
<div id="banner">
<img src="banner.png" class="banner" />
<a href="banner1.png" class="resume" />
</div>
</body>
Also, I would appreciate it if you can let me know if I can simplify anything in my CSS or HTML. I'm new to this and I might be over complicating them.
You'll need to use the HTML map tag. You can learn about it here
Related
I'm trying to put two images on top of each other in the HTML of an email, but it fails. It displays fine in normal HTML, but when it comes to the email layout, it collapses.
code
<td className="icon">
<img class="block" src='./img/b.png' />
<img src='./img/a.png' />
</td>
<style>
.block {
margin-bottom: -15px;
margin-left: -40px;
}
</style>
margin isn't working totally.
Do you have any ideas in MAIL HTML?
ideal:
issue:
I am not sure, but I think your "td" with the icon class should have a bigger width in your layout. So the margin of -40px does not work right. I guess you can try hardcode the icon width, increase the negative margin value or position your images as absolute within your container.
I also leave this "logo" draw with CSS below. I hope it can help you a little. (You can change the width and height of the container for your needs).
HTML
<div class="circles-container">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
</div>
CSS
.circles-container{
position: relative;
display: flex;
width: 200px;
height: 100px;
background-color: transparent;
}
.circle{
position: absolute;
top:0;
width: 50%;
height: 100%;
border-radius: 50%;
transform: translateX(-50%);
}
.circle1{
left: 33%;
background-color: #3484b9;
}
.circle2{
left: 66%;
background-color: #ffd61e;
}
I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.
I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.
#container {
position: relative;
}
#divWithin {
position: relative;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
#imgWithin{
width: 100vw;
height: 100vh;
left: 0;
}
<div id="container">
<img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
<div id="divWithin">Testing</div>
</div>
Any help or ideas would be gladly appreciated
What I am trying to achieve is displayed in an image below:
With 1 being : The image that I want displayed across the screen width (fit screen width)
and with 2 being : The div that I would want to place upon the image
To make a image responsive You need to use a class like this:
.responsive {
width: 100%;
height: auto;
}
If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp
Try changing your css to this:
html, body {
width: 100%;
}
#container {
width: 100%;
position: relative;
}
#imgWithin {
width: 100%;
}
#divWithin {
position: absolute;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
This will make the image the full width of the browser window with the text overlaid on top.
You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further
Why don't you use background: url()?
so new html now is:
<div id="container">
<div id="divWithin">Testing</div>
</div>
and css:
#container {
background: url("Your image url") no-repeat center center;
background-size: cover;
}
learn more about background and background-size
what ever media query you use put every where
CSS:-
.container{
padding: unset;
width:auto;
}
i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me
I'm having a problem with a design I'm coding that I intend to make creative. Right now, I have a header that has 3 separate areas, one div in the middle with 30% width and two on either side with 35%. In these I contain my header elements. The middle one contains my logo, which scales just fine. When I re size the window it scales down and maintains it's positioning inside the div.
The problem arises when I try to add the navigation on either side. I have the navigation text inside the first div currently, and it doesn't behave how I intend it to. I have it relatively positioned and it doesn't maintain that positioning. When the browser is re-sized the text remains fixed, so at some point, as the divs grow smaller, the text is completely outside it's containing div. Also, at some point the text begins to stack instead of maintaining it's in-line style. I have a separate style sheet that has a few font size media queries to remedy this, they simply drop the font size at certain intervals, but this doesn't do anything. The text gets smaller, but still remains fixed on re-size and breaks out as well as begins to stack.
I simply cannot figure out why this is happening. The logo image remains perfectly in it's div and maintains it's position whilst the text doesn't move at all. I guess I'm just not understanding text properties as well as I need to I've included the HTML and CSS below, I left out the media queries as it's pretty self explanatory.
<div id=container>
<div id=header>
<div id=headerone>
<div id=leftnav>
<ul>
<li>Home</li>
<li>Services</li>
</ul>
</div>
</div>
<div id=headertwo>
<img src="images/title.png">
</div>
<div id=headerthree>
</div>
</div>
and the CSS
html, body {
width: 100%;
height: 100%;
margin:0;
font-size: 100%;
padding:0;
}
img {
max-width:100%;
width: 100%;
}
ul {
list-style: none;
}
ul li{
text-decoration: none;
color: white;
display: inline-block;
padding: 20px;
}
#container{
width: 100%;
height: 100%;
}
#header{
background-size: auto 100%;
width: 100%;
height: 19.1%;
background-image: url(images/headerbg2.jpg);
}
#header img{
width: 70%;
position: relative;
left: 15%;
top: 30%;
}
#headerone{
width: 35%;
height: 100%;
float: left;
background-color:black;
}
#leftnav{
word-break:keep-all;
font-size: 1.5em;
position: relative;
left:10%;
top: 40%;
font-family:Rockwell Extra Bold, Georgia, "Times New Roman", Times, serif
}
#headertwo{
width: 30%;
height: 100%;
float: left;
}
#headerthree{
width: 35%;
height: 100%;
float: left;
background-color:green;
}
I appreciate any help.
I'm trying to create a clickable box that sizes and positions relative to how the browser sizes, but I get an extra box when I decrease the width of the browser and increase the length. I'm not sure what is going on and how to get rid of it.
Here are screen captures of what is going on:
- Browser at full size: http://i.imgur.com/mbyMOyw.png
- Browser stretched as described above: http://i.imgur.com/kuX1tdN.png
CSS:
img.banner {
width: 100%;
z-index: 0
}
#banner {
width: 100%;
margin-top: 0px;
margin-bottom: auto;
margin-left: 0px;
margin-right: auto;
position: relative
}
a.rollover {
display: block;
position: absolute;
top: 15%;
left: 15%;
width: 17%;
height: 8%;
background-color: black;
}
HTML:
<body>
<div id="banner">
<img src="image.png" class="banner"/>
<a href="banner1.png" class="rollover">
</div>
</body>
Also, any other suggestions to improve my CSS and HTML is appreciated, since I'm new to this.
Thanks.
Simple though it seems, by not closing the anchor tag the browser is generating two anchors - one inside the div, and one outside it. These layout on top of each other until the browser is resized: then their positions deviate a bit and they 'split'. Fix by closing the anchor:
<body>
<div id="banner">
<img src="image.png" class="banner"/>
<--added closing tag here
</div>
</body>
You can check out the fiddle here. Can't believe it took me so long!
I have a div main that I have wrapped around my content and a sidebar. I have assigned the #main to have a background image and a min-height of 1200px.
In Google Chrome & Firefox, when I inspect the div doesn't have any properties when I inspect the source. Thus the div's background image and height don't work either.
<!--Main content layout -->
#main {
clear:both;
position: relative;
min-height: 1200px;
background-image:url(images/white.png);
background-repeat: repeat-x;
}
.sidebar1 {
float: right;
width: 20%;
padding-bottom: 10px;
margin-top: 20px;
}
.content {
padding: 10px 0;
width: 76%;
float: left;
margin-top: 20px;
}
The site address is: http://www.tibetskyvillage.org/
Would really appreciate someone elses eyes on this. I use this method all the time and for some reason this time it's failing.
The comment <!--Main content layout --> is not a valid CSS comment but an HTML comment instead causing a parse error.
See the screenshot, I have found some disturbances in your layout, to fix this or solution to your problem is
Don't give the image as background in CSS, give it as image in html like this
<img width="1360" height="675" src="images/bg0.jpg" class="wraper">
<div id="main">Your content</div>
Add styles to the image and main as
.wraper {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#main{
position: absolute;
min-height: 1200px;
width:100%;
}