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.
Related
My image div seems to be taking up the entire top section of the browser, I am not sure what I did wrong, but in order to make the text align within the image, I will have to add top:250px, that doesn't seem right to me. Here is my code: http://jsfiddle.net/Swathi56/zzbwkoLj/1/
I have attached the image for your reference.
<div>
<div class="hero-image-download col-xs-12">
<div class="overlay"></div>
<div class="hero-text-download text-center">
<h1>aspenONE Download Center</h1>
<h2> Download your UPGRADE now!</h2>
<p>Simply select software suite and you need to start using the latest version.
It’s fast and easy</p>
</div>
</div>
<div class="engineering-section">
<div class="engineering-section-title title-text">Engineering</div>
</div>
</div><!--end div-->
Remove top: 250px; from your text and set their parent DIV's (.hero-text-download) position to absolute and align it to the bottom of it's parent DIV (bottom: 0;).
.hero-image-download .hero-text-download {
position:absolute;
margin:auto;
bottom: 0;
}
http://jsfiddle.net/zzbwkoLj/2/
Remove
background-size:cover
height:500px
from the .hero-image-download class styling.
After this you do not need to add top:250px in the text containers.
I hope this will help
I received HTML & CSS layout that should be working fine. However, I'm experiencing some strange problems for which I'm not sure why do they occur.
At the bottom of the following this website there is slider that should display couple of photos with text and by clicking on arrows it should slide them. The problem is I can't position neither arrows, nor wrapper containing images.
As you can see arrows(CSS classes: .strelica-lijevo and .strelica-desno are currently behind the image wrapper (CSS class: .slike-wrapper) when they should be left (.strelica-lijevo) or right (.strelica-desno).
Code can be seen directly on the website. Any help would be appreciated.
There are some issues with the HTML and CSS - you should either try to contact whoever delivered this slider to get support for implementing it or you could try by yourself as follows (just checked the markup and CSS and maybe this helps):
Your current HTML:
<div class="w-clearfix main-content karta">
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
could be changed into:
<div class="w-clearfix main-content karta">
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
This would just change the order of the elements - 1st the left arrow, than the gallery, than the right arrow - so they're displayed next to each other. Guess this could be changed in another way, but this is the easiest approach withouth having to change too much in the CSS.
In the CSS
.featured-male-slike.karta
{
clear: right;
display: inline;
float: left;
margin-top: 30px;
overflow: hidden;
/* position: absolute; */ /* <--comment position abolute out */
}
comment "position: absolute;" out - you could also remove it, but it's better to keep it just so you can check with whomever created this slider for you, maybe there's some other way to fix the slider as you mentioned it should be working as it is. Because of this position:absolute the gallery would still be displayed above the left arrow, removing it has the purpose to keep the CSS-property float:left for all three elements - left arrow, gallery, right arrow, so they will be displayed next to each other.
Next is up to you - the images are displayed not positioned correctly because they have a different height, and the css for the img is height: auto, meaning that the height for each img depends on the actual calculated height (as both images are scaled down from bigger original images). You could either try to display images with the same size, or you can add css to set a fixed height for both images, e.g.
.slike-wrapper img
{
height:140px;
}
as the left image has a calculated height of 158px and the right image has 140px. As I only tested this directly in the browser's web developer tools, I can't guarantee that this approach would work for you, but you can give it a try.
I have a div on my homepage, not positioned, it holds the main image. On top of this main image I have a container which holds my search bar. I've positioned this container position:relative top:-500px; so that it appears over my main image.
I then have another 2 containers which come next, but if I do nothing positionally with them, they appear after a big vertical space, so I've had to position:relative and add a minus top to. I have to keep doing this top:-300px or whatever because if I don't a space appears beneath which I can't fill.
Now the next div down is the footer which I don't want to have to posiiton because it appears on every page. How can I get rid of the space between my featured properties and the footer?
Here's the code:
//no positioning
<div style="margin: 0 auto" class="slideshowWrap">
<div class="homeslideshow slide1">
</div>
<div class="homeslideshow slide2">
</div>
<div class="homeslideshow slide3">
</div>
</div>
//position:relative top:-500px
<div id="homecontainer">
</div>
//position:relative; top:-300px; margin-bottom:-100px;
<div id="homeBoxContainer">
</div>
<div style="clear:both"></div>
//position:relative; top:-300px;
<div id="homeFeaturedContainer">
</div>
You have a problem the way you designed your containers. When you moved everything up using position:relative and top:-300 it moves everything up, but the height from your #content is still saving the space and maintaining the height.
If you want your footer links up, add the following code
#footer {
top: -300px;
position: relative;
}
that doesn't solve your problem because you still have the big height created by your odd design. You need to go back to the drawing board and redesign your container. You don't need the position:relative and moving everything up.
I generally only set top and bottom values on absolutely-positioned elements. Try this instead:
#homeFeaturedContainer {
margin-top: -300px;
margin-bottom: -300px;
}
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
I am trying to make a shopping cart layout and am having a hard time getting the checkboxes to appear at the right spot. The code here:
http://jsfiddle.net/35Hkj/1/
renders wrong on jsfiddle itself and internet explorer/firefox... It looks right in expression web 4 and chromium. Should be a checkbox beside each color.
If I position one check box with absolute in a relative container it works on all browsers perfectly but loses the flow meaning it doesn't expand the div container dynamically.
Is there a way to position absolute (relative to the parent) without losing the flow??
I'm guessing slicing up the image with css and positioning a checkbox beside each sliced part wouldn't be correct or easy.
Position absolute will allways "lose the flow".
However, you can position the divs absolutely, if they are in the same container as the image. Just change the left value accordingly. The container will be strechted to image's height as the image will remain in the flow.
Wrap the texts beside checkboxes in a label. More semantic + container divs will have enough height to not lose the flow so that you can absolutely position the checkboxes within.
An element with position:absolute is always taken out of the regular flow of relative elements.
What you could do is use a sprite for the background image. Place your checkboxes and your image in float:left and float:right divs or float both of them left and keep a margin between them and modify the background position of the sprite. If you wanted to, you could also use images, though I feel that using a sprite would be faster. For eg.
<div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img1.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="skin" />skin
</div>
</div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img2.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="face" />face
</div>
</div>
</div>
.item{
float:left;
width:auto;
}
.image{
float:left;
width:auto;
}
.checkbox{
float:right;
width:auto;
}
If you wanted to use sprites, you could give each div an id and define a background position, depending on the image-checkbox pairing.