I'm designing an online shop and creating a menu bar from images. It's super simple, and I made the menu the correct width as my page. The only problem is, when I put in all the separate buttons (the menu is divided up into 11 sections), the last image gets pushed down into the next line, even though there is enough space for it to be inline.
Does anyone know how to help?
I should also mention I am a complete beginner to html/css so pretend you're talking to a 10 year old when explaining...
Related
http://codercarter.com
I am working on this site for a class, and I have an issue I cannot seem to find the problem for. The background image at the EXPERIENCE section doesn't reach the ends of the pages like the first two background images do, and Im not sure what is causing it. In addition to this on the old version of the site, the three contact buttons used to be side-by-side of each other, now when I see the new version there are two, and the github connection is below them and very wide?
The last image does not reach the edge because it is inside of the "portfolio" div, which has margins. For the button issue, you can assign something like "max-width: 30%;" to each of the 3 ".card" elements.
Ok, so I am making a website for my so far small Minecraft Build team MCBuild, unfortunately, My ribbon on the top with all the pages links, that are not active, will not centered it is embedded inside of another div, and put into a singular .html file and displayed through an iFrame. All of the code is on GitHub and also, the page can be viewed here. Any help would be great, I think I can't get it just because I am frustrated that I didn't get it the first time. Thanks!
Below are two simple HTML pages. You will notice that the header of the pages move when one browse from one page to the next. I can not seem to figure out why the header does not remain on the same place...
http://staging.serviceportal.com.au/service05/virgintest/landingPage.html
http://staging.serviceportal.com.au/service05/virgintest/thankyoupage1.html
Below is a screenshot of what I mean. One can notice the 5/10 pixel shift around the header region in both the pages.
I will like to know from where that shift is happening and how to fix this. Just to inform that these pages are responsive and built using Twitter BootStrap
I'd say the header moves because you have a scrollbar on the second screen, so the width of the screen is smaller, and the site moves accordingly.
I'm working on an very, very, very basic website, so basic it's pure HTML. I could easily add CSS, but for simplicities sake I'm trying to just do it in HTML. I have a banner I want to put at the top of the page, then I want it to drop a line and have the rest of the pictures there. I can get the pictures to easily popup in rows and have them resized, but some pictures still go onto the line which the banner is on. I don't want that. Would I need to somehow use a break? Again, trying to stay away from using CSS because I feel as though putting 5 lines of it on a website is a bit silly. However it's what you strongly suggest, I'm fine with doing it.
I'm fairly new to stylesheet so this maybe a very simple question. I noticed that Amazon's website has 2 really cool features that I would like to replicate.
At the middle of the page, there is a grid that lay out icons horizontally for their recommendations and other stuff. Depending on the width of the page, it shows either 4 or 5, or 6 up to 8 icons/items horizontally. They do this without refreshing the page. I tried to read the source, but it looks like a bunch of stylesheet trick that is making this happen.
The "Shop by Department" on the left is also very interesting. If your page is narrow, it disappears, but it shows up when you mouseover. If the page is wide, then it shows up.
If anyone can point me to the right direction or some sample code, it would be great. Thanks
Question 1:
It's not just css.
Use a table to store however many elements you want in every row, and then set a general width to the whole table.
Use a javascript/jquery to calculate the width for each element according to that table size.
Question 2:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
You might want to take a look at that. As far as I see on Amazon's site, the sidebar never dissappears.
Edit:
1.Say you have a page of 1000px width.
2.First 200 px from the left is set for the sidebar.
3.Use jQuery to check the current page width.
4.if pageWidth<1000px, sidebar{display:none;}
But really, these codes are everywhere on the net.