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.
Related
I want to make a website where if the user zooms out the content get smaller and he sees more of the page but the width of the page doesn't get stretched out to the sides.
Here is an example of a page: https://www.valhalladc.cz/ . I would like to use flexbox to obtain these results if possible.
I tried finding some tutorials but i feel like the problem is too specific and i have no idea how to solve it.
I need a full-width image with labeled sections to link to individual pages. Any suggestions how to make this happen? The web site is built on WordPress, so if a plug-in will accomplish this that will work too. Method needs to be responsive and not break apart as viewport is reduced.
For example, Section 1 needs to link to the Section 1 page, etc.
See image at
Well, if you want to have something like that and responsive, you should cut the image in as many pieces as items you need, create an element for each piece and set the image as background. There rest is mediaqueries, maybe you can do it with bootstrap.
Also, try to go to the design community, as this is more related to design than anything else, and I don't think a Wordpress plugin exists for this.
This is probably a really simple question. I have a link on the page tsawebmaster1.hhstsa.com/web_design.html that links to a div on the same page as the link itself using tsawebmaster1.hhstsa.com/web_design.html#seven_steps and it works just fine. The problem is that my fixed header is at the top of the page and thus overlaps the content by 100px, so when it takes you to that div, the user does not see the top of the div linked to. Is there a way I can link 100px less than a certain div.
I don't know if this will work but you should try this:
Our seven core steps to web design will teach you the simple steps on how a website is built. Before delving into any new topic, it is important to develop background knowledge of the whole picture. This way, when you start actually learning web design in depth, you'll be able to connect your under
Try put an empty paragraph between your logo and the contents.
You better use javascript to reach your goal. the window.scrollTo(x,y) function can make your page scroll to a specified amount of pixels on click (also it will look much more neat).
documentation: https://developer.mozilla.org/en-US/docs/Web/API/window.scrollTo
usage:
click to scroll down 100 pixels
There are lots of website themes that have a slideshow or image frame that is styled to look like it's a device such as a mobile screen or tablet screen or computer monitor. Please see below:
I have spent the last 4 hours looking for some code or an open source plugin that would enable me to show images this way. All I have found in 4 hours is yootheme and hostmoog that both charge for the plugin.
How does everyone else get these device style frames around images please? Do I need graphics software?
This question should help others too. I've spent ages searching under every conceivable combination.
Thanks in advance.
First, create your device "background". Then, divide the images into four pieces:
The part of the background that appears above the top of the screen image
The part that appears below the bottom of the screen image
The part that appears to the left of the image between the top and bottom
The part that appears to the right of the image between the top and bottom.
Then, create three <div>s. Place the top and bottom pieces in <div>s 1 and 3, and divide the 2nd into three smaller <div>s. Render the left and right pieces in the left and right sub-<div>, and finally, render your slideshow in the center piece.
I don't know if I understand your question perfectly, and I may be way off, but I'm going to try to answer it to it from what I think your asking. Responsive Design is what you're looking for. Displaying the page perfectly across all devices.
There is also a tool that I use to see my webpages in different resolutions, Resize my browser that lets me see how my page will look on different size browers, iphones, etc... If your code is correct this is a very useful site.
Hope I somewhat answered this question.
I'm designing a chat page for a radio station and i am working on a 1360X768 Res' on a 32Inch screen.
When i ask friends to check the page layout it gets messy for them or elements get smaller in screen and the page wont stay consistent.
If its possible i would like to know if there is a fixed settings i need to insert to "body" in CSS so things like that wont happen, and when i move an element in my screen it will stay like that with other resolutions/screens.
The web page in question
Warning: There is music on Auto play in the page.
Also, if its ok to ask 2 different things but related.
I want to add the scrolling stats on the bottom to the bottom player..right where it says "now playing".
But everything i try wont make it go on top of it..z-index wont help.
Any thoughts?
The first mistake you're making is you're designing on a particular
resolution.
The second mistake you're making is that the resolution
you're designing on is way above the most commonly used 1024x768.
Take a look at MediaQueries. They allow you to build a fluid website that changes drastically at given resolutions.