For a school assignment I was required to redesign a website for a buisness.
I had only ever mucked around with css/html before and this is the first time I had written it for a full website.
The issue I am facing is the positioning of 3 divs is correct in google chrome, but in IE and firefox the divs are incorrectly positioned.
http://letsmine.info/mnpctech/index.html they are the twitter, facebook and checkout symbols on the right of the menu bar.
As this is the first time I have written CSS and HTML I presume this is a silly mistake and I am hoping that you can guide me into the right direction.
Also on the store page I need to layout the products with a picture and name like they are here http://www.mnpctech.com/MnpctechBilletFanGrill.html . Should I create a table and just put the images and title in there? just looking for some advice.
You need to add the following properties to #checkout, #facebook and #twitter:
display: inline-block;
float: right;
and remove the following properties from each one:
position: relative;
left: 980px;
top: -49px;
The page should then display properly in all browsers.
Make sure that you use floats and know your way around the "display" property well for positioning, I always try to stay away from relative positioning as it's a bit unreliable.
Related
I'm editing an existing Wordpress theme (created child theme) and I'm having formatting issues. Both on mobile and desktop versions of the website.
My first issue is that the first post loads under the header-logo container sometimes depending on browser size, I notice this happens a lot in mobile devices. The "PROMO" post goes missing.
I've increased both the margin-top & padding-top properties but it doesn't seem to resolve the issue. Do I perhaps have to update the positioning of the container div? If so, what would be the appropriate way? Been reading a few articles and trying a lot of css edits but I feel like I'm just going in circles.
Affected site: http://posteshare.com
Mobile view: http://www.responsinator.com/?url=http%3A%2F%2Fposteshare.com%2F
The other problem I'm encountering is that media embedded on posts are floating on top of my "fixed" header instead of the other way around. I've modified the "position" property to absolute but it seems to break the formatting of the whole page? Been at this for a couple of hours and it's driving me nuts. Any new insight is appreciated. I've ran out of ideas to try.
]3
To make the header appear on top of the other comment, there is a z-index property, as said in the comments by #Milan. Basically, what you have to do is...
#header-container {
z-index: 999;
}
/*all the other elements on page except body*/ {
z-index: /*less than 999*/;
}
With this, the header should appear on top of every element on the page.
If your navigation is 110px height, maybe try adding height + about 20px margin offset to the container like so:
.container {
margin-top: 130px;
}
Add clear: both to .container on grid.css line 3
I don't stumble upon browser-related issues when I'm working with WordPress development very often, but I'm having trouble finding the reason for this strange, although simple bug with Firefox/Edge (working OK with Chrome; not tested in other browsers).
The website: http://stitchwear.com.br/
In the home page, we have several products showcased. In the last column, where 3 products should be aligned in the same row, the first product stays on the right side and the other two go down to a new row. Checking the code with developer tools from Chrome/Firefox, there's no different classes or styles added to these products that would be causing the issue. The error also only seems to happen in bigger screens, so not a responsive issue.
All products are aligned left using an unordered list in CSS, with a fixed width of 300px for each product and a fixed width of 900px for the ul tag. No margins or paddings for li elements.
As I don't find this kind of browser-related issue, I don't know where to look at. I didn't develop this website but I'm working on fixing this issue. It doesn't use Bootstrap either.
Hope you guys can give me some clues.
Thanks!
FWIW, i loaded the page in Chrome and FF, and FF definitely screws up the list and I don't know why. I tried to create an MCVE demonstrating it, but was unsuccessful.
However, a fix is: Instead of float:left for the list items, use display:inline-block, and change the width of the ul from 900px to 908px to accommodate the extra space created by the inline block.
Your product images are not of same size. That is making list items height different and layout is being messed up. Keep your images same sizes or you can apply this css.
.product-thumbnail {
overflow: hidden;
position: relative;
}
.product-thumbnail::before {
content: "";
display: block;
padding-top: 133.33%;
}
.product-thumbnail img {
position: absolute;
top: 0;
width: 100%;
}
I have a fixed image placed using this code:
The problem is that in bigger screens the image is placed in the middle of the screen instead of in the left bottom corner (it works fine in 15" screen)
How do I fix this using inline-css style= (attribute) code in HTML?
Okay, you say no CSS but you have inline CSS in your code.
Second, why are you using position: fixed with right: 865px?
The reason the image appears in the middle on larger screens is that you're specifying a direct pixel value. You'll want to either change
right: 865px;
to
left: 0;
Or change the link to float left instead, such as:
float: left;
Either way, why are you putting CSS inline? It is not the recommended or correct usage of CSS. CSS is designed to separate content from styling, so putting it inline defeats the purpose.
If you want it on the left corner of the screen you should be using left:0 instead of right:865px
If you provide a jsfiddle I can help you more.
Edit:
About mobile sites like you asked me, most mobile browser doesn't support it pretty well so we use JavaScript to do the job, here is a bunch of examples and much more info http://bradfrostweb.com/blog/mobile/fixed-position/
My page is displaying properly on desktop browsers, but not on mobile devices. The url is [removed after question solved]. The logo in the top left is absolutely positioned. The divs underneath the header are also absolutely positioned with left: 0. Currently div#page has position:relative, but I've tried putting the relative positioning on many wrapper divs with no success. I also have php output buffers in each individual php file (e.g. header.php, body.php).
The slideshow uses a WordPress plugin that calls the jQuery Cycle plugin, and also declares absolute and relative positioning, so it may be causing confusion as to what is relative and what is absolute. But I've tried attaching relative and absolute positioning to elements in seemingly every combination and still have had no luck.
p.s. I know the CSS is a mess, I plan on going through and refactoring after I figure out this positioning issue.
Looks like you have a media query in there that is adding the following css at a certain break point that would be affecting the mobile size.
#main #content {
margin: 0 7.6%;
width: auto;
}
If you could clarify exactly what you feel is wrong with the mobile version it would help us give a better answer. Are you looking for the description text to bump under the slider images?
Can you tell what I am doing wrong with the menu buttons? It works on IE8 and chrome but not in FF (9). I presume I've messed up something with positioning and z-index.
link to the site
Thanks.
Edit. It doesn't work on any FF and IE7.
Without downloading the site and playing with it myself, it's a bit tricky to work it out. But, I'd try adding position: relative; to div.content and then adjusting your img.menu(x) by setting left: NNNpx;.
Also, I don't understand why you use position:absolute; on the img tags when you're not using top or left attributes to set the position. Without a surrounding div with position:relative, the img tags will be referencing the absolute position of the entire window not the containing div.
Validate your html that list of errors. First thing noticed, id names must be unique to one element on a page. Also, make sure you are using FF or Chrome as your reference browser.