I have an HTML Document and a CSS Document and I'm trying to remove a large margin in between the image I've placed and the text below it. When I adjust the pixel margin on the top of the image it adjusts, but I've tried a few things on the bottom of the image and just can't seem to get it to work right. There is a huge gap and I just want it to look "normal". That is, having a smaller margin between the img and the text below it.
<div id="header" class="container">
<!--Home Logo -->
<a href="#">
<img src="http://www.satckoverflow.com/wp-content/uploads/2015/02/Stack-Overflow-Logo.png" style="position: relative; top: -150px;" alt="Platinum Imprints">
</a>
<p>Welcome! Here at Platinum Imprints we specialize in Custom Screen Printing. Use anywhere from one to many colors on a simple shirt.</p>
This is what I have for HTML.
You have inline styles on the img element that are setting relative positioning. Removing this will fix your problem.
Remove the inline style position: relative; top: -150px; in the img tag to remove the spacing.
Related
I'm trying to use an image of my logo on the webpage and put it into the top-left of my webpage but it seems to have a space on the top and left side of the image and I want it flush just like dropbox.com does it
Here's the html:
`
<body>
<nav>
<div class="logo">
<img src="img/pd3-1.jpg">
</div>
</nav>
</body>
`
I've tried many things such as remove padding/margin, change position, float, I'm new to coding so I can't seem to fix it or find an answer
Remove the default margin of the body element:
body {margin:0;}
using position relative and position absolute may be your answer.
we position the container relative, allowing our absolute positioning to be relative to this container.
I added a background so you can see the position of the logo better.
nav{width:100%;position:relative;}
.logo{position:absolute;top:0;left:0;width:150px;height:150px;background:#ededed;}
<body>
<nav>
<div class="logo">
<img src="img/pd3-1.jpg">
</div>
</nav>
</body>
Also make sure your css is being linked in the head of your index file as without this no styles will pass through to the page.
Final Result
After reviewing the issue with Jacob on jsfiddle we established that he was not including the css in the head. Adding the css to the head of the site fixed the issue and the custom styles are now styling the image correctly.
You should remove the space of the parent elements. Did you remove all of them?
for example:
body, body * {
margin: 0;
padding: 0;
}
I have a banner which I want to add to my simple website , here is what I have so far
HTML
<div class="col-lg-12 main-banner">
<a href="https://www.google.com">
<img src="images/Test_09-17.png"></a>
</div>
CSS
img{
width: 100%;
object-fit:contain;
}
I want the image to fit with the div, unfortunately right now i have little space left and right side.
Check the image:
Question
What is wrong with my code?
It looks like there is padding on your image. (Based on the green to the right and left of your image.). Did you check the computed padding on the image element in your browser?
Without being able to see the HTML and CSS for the page I cannot be certain though.
Solution:
There was default padding either from the browser or other code. Setting the padding to 0 resolved the issue.
I dont have any HTML or CSS experience, so pretty much coding illiterate.
The issue I am having is the Paypal logo that I have inserted on my Bigcommerce site, stays static in the same position as the Homepage. So if I am on a product page it creates a gap between the last line of the page and paypal logo.
http://www.mariamseddiq.com/ -> Paypal logo is in the correct position
http://www.mariamseddiq.com/bridal/ -> theres a big gap between the last line of this page and the botton of the page.
Heres the Footer code:
<div id="ContainerFooter">
<div class="Center">
<div id="FooterUpper">
<div class="Column">%%Panel.FooterCategoryList%%</div>
<div class="Column">%%Panel.SideShopByBrand%%</div>
<div class="Column">%%Panel.HomeRecentBlogs%%</div>
<div class="Column NewsletterColumn">
%%Panel.SideNewsletterBox%%
%%Panel.SocialLinks%%
</div>
</div>
<div id="Footer">
%%Panel.PagesMenu%%
<p>Copyright %%GLOBAL_Year%% %%GLOBAL_StoreName%% : %%SNIPPET_SitemapLink%%</p>
https://store-mc6v042j.mybigcommerce.com/product_images/uploaded_images/paypal-logo-transparent1.png "style="width: 150px; margin-left:750px;position:absolute; top:2100px;">
%%GLOBAL_AllPricesAreInCurrency%%
The problem is the combination of position:absolute; and top:2100px. The absolute attribute tells the browser that the item you are positioning will be positioned in a fixed position relative to it's parent. The top:2100px tells it to position it 2100 pixels from the top of the parent. Instead of positioning it this way try to position it within a box (such as a div) below the element where you want it to display.
Edit: Just by using the Chrome browser tools I disabled both of those css elements and the logo appears where it should. Try just removing position:absolute;top:2100px;
The issue is, you have 2 line break <br> and on image you have style position:absolute; top:2100px. Just remove these two line breaks, and also style position:absolute; top:2100px. and place margin-top to fix the position.
<br>
<br>
<img src=" https://store-mc6v042j.mybigcommerce.com/product_images/uploaded_images/paypal-logo-transparent1.png "
style="width: 150px; margin-left:750px;position:absolute; top:2100px;">
Change it to
<img src=" https://store-mc6v042j.mybigcommerce.com/product_images/uploaded_images/paypal-logo-transparent1.png "
style="width: 150px; margin-left:750px; margin-top: -50px;">
css changes :
position:relative; top:-90px;
try this , i meant in both the pages
Add position:relative to the footer div and set the top:2100px from the image to top:15px or what else you like.
I have two png's. One is the actual image, another is a mostly transparent image with a sticker price icon in the top right. I know I could combine these in photoshop and just create one image.
But I need these to be generated dynamically, for a bunch of different base images.
Is there some way to code the "actual image" and then use code to overlay the "transparent sticker image"?
Sure, the easiest way would be to absolutely position both images within their container:
<div style="position:relative">
<img src="main-image.jpg" style="position:absolute;"/>
<img src="overlay-image.png" style="position:absolute;"/>
</div>
The position:relative on the container is needed for absolute positioning of children to work. Of course, if the container is itself absolutely positioned already, then that's fine.
The position:absolute is not needed on the base image if both images are in the top-left corner, but having it allows you to tweak its placement if needed.
You could also use static position on the main image and relative position on the overlay image:
<div style="position:relative">
<img src="main-image.jpg" style="width:100px"/>
<img src="overlay-image.png" style="position:relative; left:-100px"/>
</div>
but for this to work you'd need to know the width of the base image.
Wrap the images in a <div> with the overlay image first and the actual image second, and can set the css of the div to position: relative.
The two images can then be given the css {position: absolute; top: 0; left: 0;}.
<div style="position:relative;">
<img src="overlay.png" style="position: absolute; top: 0; left: 0;">
<img src="actual.png" style="position: absolute; top: 0; left: 0;">
</div>`
If you really want to be safe, you can set the z-index of each image.
You will need to set the position attribute to relative or absolute, set the left and top attributes to the desired values, then set the z-index attribute to 1 (assuming that you don't have other z-index properties already set). Keep in mind that the place where the image is supposed to render without the changed top and left attributes, there will be a space where it should be.
I'm creating a site where I've encountered a huge IE lag when hovering over the menus.
I'm using Cufon in combination and it seems like it's causing a huge lag when I apply height, width, margins or paddings to the li:hover element.
So, I need to figure out a smart way of doing this otherwise.
The site is here, http://w3box.com/mat
You can clearly see the menu I guess.
So, what I want is to push the entire menu downwards so it's like 3 or 4 pixels above the bottom of the height line. So it matches about the same vertical position as the logo font to the left.
Then, I want the hover effect to be larger in height. Hard to explain, but when hovering over a menu item, imagine a box where the text is positioned at the very bottom of the box. Like this;
http://img710.imageshack.us/img710/2791/menuheader.jpg
Now, you may notice the arrow looking thingy sticking at the bottom. I don't really need that, but if you have any idea on how to do it, I'd appreciate the help! ;)
I have not tried, but I think this may be an option.
You have everything with in one div, why dont you try to put div with in divs?
this is your current code for header.
<div id="header">
<img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/>
<img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>
<ul class="menuwrapper">
<li><h4>Logg ut</h4></li>
<li><h4>Kontakt</h4></li>
<li><h4>Kontrollpanel</h4></li>
<li><h4>Oppskrifter</h4></li>
<li><h4>Hjem</h4></li>
</ul>
</div>
You can try something like this, so you have more control over the different objects.
<div id="header" style="float:left;vertical-align:bottom">
<div id="imgChef">
<img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/>
</div>
<div id="imgMat" style="float:left;vertical-align:bottom">
<img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>
</div
<div id="menu" style="float:right;vertical-align:bottom">
<ul class="menuwrapper">
<li><h4>Logg ut</h4></li> <li><h4>Kontakt</h4></li>
<li><h4>Kontrollpanel</h4></li>
<li><h4>Oppskrifter</h4></li>
<li><h4>Hjem</h4></li>
</ul>
</div>
</div>
I am not sure that may be the right combination, but I think with the three divs inside the div you will gain more control over the elements inside the header div.
Omit the h4 in the menu since i think it is not needed. Than set display:block on <a> and use line-height and padding-left , padding-right to make the anchor expand the right size. Also notice that li:hover is not supported in IE6/7 without some tweaks. To position the menu on same level as logo just set a margin-top on ul element.
There're too many rules for me, too many useless rules.
Don't have the time to correct all and test it on FF/IE, but this works ofr example :
.menuwrapper li {
float:right;
list-style: none;
padding: 30px 23px 3px 23px;
position: relative;
top: 7px;
}
What about vertical-align?