I'm working on a html only webpage, and I am having some issues correctly formatting my social-media links. I have a fixed position div that is 48 x 190, and within it I'd like to put 4 different social media icons which link to their respective pages. I was able to set up the div correctly in css styling, and I was able to insert the images into the correct position just fine. However, as soon as I added the link tag to the image, it all broke. The formatting of the image seemed to change just by adding the link to it, and they now took up all this extra space around themselves, went outside the borders of the div, and refused to be properly centered. Why is adding a link to the image breaking the formatting in such a strange way, and how can I fix it so it remains formatted how I want even after the link is added?
Thanks!
have you set the border of your images to 0 ? When inside a link, browsers put a 1px border to images if this value is not set in the CSS.
If that is not the problem, posting your code (see jsFiddle for example) could help
I guess, the issue is related to the different size (in pixels) of icons, that cause to increase div and distrub the UI. I have also used Image-Links as following and it works fine. First ensure your icon size.
<a href="javascript: showPopup();" id="groupEdit" class="link">
<img src="/images/redPencil.png" title="Update">
</a>
Related
The html code on the actual webpage
Hello. I am having some problems with pictures not properly displaying on a website. I have added the picture and created a div.tag for it and also added it to the CSS but it simply will not show properly. http://mala.co.uk/projects-sw-adelphi.html is one of the new webpages that I have added. http://mala.co.uk/projects-cat-a-eastcheap.html is a webpage with a picture being displayed properly. It is really baffling me why the new pages I have added have the pictures being cut off while the older pages render the pictures perfectly. The Eastcheap picture is how the size should be (more square) but new pages are showing the images more rectangular. Any help would be massively appreciated. Kind Regards
You have set a specific height for the large-6 columns divs. Changing that height has an influence on the image, as it is relative to the parent div container.
I am not sure how that height is generated or if you have hard coded that. It might also depend on the text on the right col, which will change the height of the left col.
Edit: I have edit your code in the inspector. It looks like that.
<div class="large-6 columns panel-container" data-equalizer-watch="" style="height: 450px;">
I have an ASP.net 4 app with a bunch of pages, all using the Site.Master as the primary layout which is a colored background, border, menu at the top and a gif in the bottom right corner of the border.
I've positioned everything using position:absolute and just set all of the elements in the site.master and the individual elements that appear on each page by using style:"left:100px top 100px" etc
So when you launch the app in normal IE mode everything looks perfect, however if you go full screen or you minimize IE, everything goes completely out of shape and all over the place.
What do I need to do in order for it to be consistent no matter whether you're in normal IE/Full screen/Minimized? Do I need to change the way I have used style:position tags on all of the elements or is it something else that I need to do?
My solution to this was to put a
div style="position:relative;"
inside and at the start of the BodyContent of each page then use absolute positioning on each of the elements which keeps all of them within the BodyContent border and shifts them properly when the browser is minimized or full-screened. Is this a good approach? It seems to have solved the problem I had but I'm concerned it may cause more problems I'm not currently aware of?
Page is not holding your settings because the width off page changes when you change browser size.
To make things all the same no mater what is the size of browser window set this with off body element.
Something like this:
<body style="width:1024px">
I'm working on a very simple website that is pretty much just HTML and CSS. The mock up I've made works well in Firefox but when I put it into chrome it does something weird. The the text I've put in a div tag is displaying under the end.
Here's the code, if you take it into chrome you should be able to see what I'm talking about.
HTML of Site
CSS of Site
It displays correctly if you set a height on the fishtank image.
<img src="./graphics/fishtank.jpg" width="1090" height ="10" />
JSFiddle
Is the fishtank image a background image? If so, you can put it as a background image in the parent div's CSS.
I am trying to use a div to push the contents of a webpage down by 150px (the space will be used for a header image later that I don't yet have).
However because the div is blank or empty, browsers are in effect, ignoring it.
The html:
<body>
<div id="header_block"></div>
.... rest of document....
The CSS:
#header_block{width:100%;height:150px;min-height:150px}
The rest of the document works fine, but, even when I get the header graphic, its going to be applied as a background image.
Is there any way to stop the browser from ignoring this header_block because it thinks its empty?
What you want to do is give the main <div> a margin-top:150px ; that will push it 150px down from it's position in the flow then you should be good to go insofar as making your background image appear.
you can use trans.gif (a blank small image) using width and height according to your need. Then proper space will set.
Regards,
Arun Kumar
Try this:
#header_block{width:100%; border:1px solid;height:150px;min-height:150px}
So that you will get a look for header_block.
Divs don't hide if you've set their height explicitly via CSS. If it is hiding you've got other problems, likely due to a typo or incorrectly linking a stylesheet.
If you need a placeholder image, I use http://placehold.it/ which I find very convenient.
I have no affiliation with placehold.it
Something like https://placehold.it/300x100 gets you:
As the title states,
I am currently building a website, I am new to this and am trying to learn quickly. However this problem is quite frustrating as websites I have gone to do not help.
So at the moment I have an image that is of a high enough resolution that it should fill the screen easily. However when I load the HTML the image is zoomed in on the top right corner which is the only part visible. I have tried using "height" and "width" commands. I have also tried without them. I have attempted to use a <div> and <body>. However this problem still persists.
Another point is that when I use a <div> the whole screen is not filled, it still has a white border around what I believe is the <div>.
If you need to support older browsers, it's not as simple as just adding one or two properties.
Read this: http://css-tricks.com/3458-perfect-full-page-background-image/
Another point is that when I use a <div> the whole screen is not
filled, it still has a white border around what I believe is the
<div>.
You need this CSS to remove the default margin on body:
html, body {
margin: 0;
padding: 0;
}
OK, I would suggest you to make the width and height not in px but in % and secondly try setting the image using CSS
Read this Link, it will be more useful
http://css-tricks.com/3458-perfect-full-page-background-image/