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.
Related
Thanks for the great answers last time, I had been working on that problem for days, and someone solved it in ten minutes. Amazing!! So now I have another question for this talented community!
I'm using Sitefinity for this project; long story short, I don't even know where to access the CSS file, and accessing it would probably break the site (as my boss tells me). So everything has to be done with inline styling.
Here's the setup: there's a bunch of text (in a ul), and an image. The text wraps around the image, which is small enough that the text is squished to the left at first, then continues in its full width underneath.
When the screen gets too small, the text starts wrapping around the image (which has been floated right) in weird ways; one long word can make the text stop and start again after the picture (I've already suggested adding word-break for this, but it's a no-go).
Here's what my boss wants: image floats to the right of the text on larger screens, then floats above and center on smaller screens. Again, no stylesheet, just inline styling.
Some attempted ideas:
Use asides: can't. That needs the stylesheet. (Unless someone who knows this knows a better way!)
Use padding on the image: tried. It messes up the formatting; what works to push everything underneath on mobile squishes everything to the side on desktop. (If someone knows a better way, let me know!)
Use JS: can't. Basically, everything has been styled somewhere deep within the code, so I've just got a tiny HTML text box to work with, no tag to work with at all.
Thank you for all suggestions! This is a talented community!!
You should us a CSS widget, add some classes to your then within the CSS widget write the appropriate media queries, if you need this to affect more than one page put the CSS widget on a template instead of an individual page.
So I've been tinkering with a REALLY simple web page (and this is why this is painful for me - it's a simple page) and I've been trying to make it responsive. I sort of had it looking right on a mobile screen, but the more I tweaked my code, the worse it got on other sizes.
So..I really hope that I'm not asking TOO much - but again the page is super simple, so this might be simple to answer..so I'll just jump in and ask a few questions :/
I want the page's big call to action image to disappear on a phone screen, and I'm trying to get the logo to center and the phone number to center right under it. I'm trying to get the bullet points images to center above the two lines of text..and the contact form to just fall in right below it (contact form was working just fine it seemed, so no big question there)
I'll link a live copy of the page as a reference - and a link to a page I've been mimicking in case it helps.
http://lab.blacksunresearch.com/ is my page
http://landing.trugreen.com/growth29 is the page im mimicking (sort of)
Again, I hope it doesnt sound like a TON of stuff, but the page is so simple, I'm probably only missing a few lines of code in my media queries
Thanks!
Edit: Moose, emoticon removed - also, I did ask a question - "How do I make this page more responsive?"
Open their CSS and look at parts with media-queries. There is what you want.
There are only 2 css which you should look through:
themeform.css
themeresponsive.css
You have to include some css to make it responsive ( Custom css , Jquery ,Jquery Mobile , Bootstrap etc) . Or you can simply put some Media Queries where you want your webpage to Act differently, ie responsive .
I'm building the landing page for our app, and i found some inconsistencies when opening up my page on google chrome. I designed the page to have the text be on the right side of the picture. However sometimes when i refresh the page, the text drops below the picture. This doesn't happen all the time, but if i keep pressing refresh, the text will eventually drop.
I'm assuming that it's because i might be putting my width of the div a little too narrow. but i dont understand why it works sometimes and not other times.
the site is on : https://www.thedashapp.com/about.html
(disclaimer: the site isn't supposed to be live yet, so the links aren't all properly hooked up yet, and the app still hasn't launched)
See pictures:
How it's supposed to look like:
What happens when i click refresh a couple times:
You'd be better off putting the text in a separate div, and perhaps the image too. Then apply float:left; to both the div containing the text and the image or div that contains the image. I'm pretty sure that'll fix 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.
First time overflowing the stack.
I'm making a website with several html pages that are identical except for the fact that they contain different images that are more or less identical in size - and thats how they are named, by the jpg that they feature.
The pictures look great with the website, but I have a 300 pixel header that pushes them downward > forcing you to scroll down to see the full image. This is built into the shared CSS for all these gallery pages.
I have simple text links below the images that are hard coded to point to the next image in the gallery. (I have a list of the 20 images im displaying). When someone clicks the image, it goes to that page and resets the scroll to the top, which makes the header push the image area down.
Can anyone tell me how to prevent the scroll reset behavior of the new link?
Without using something like jQuery, you could link the pages such that you have an anchor tag like <a name="gallery"></a> above the images on each page and when giving the link to the various pages, append a #gallery to the url such as Next Image. This is duplicated on each page however, and will not produce a robust webpage. You'll want to change things in the future and this will cause problems and further work, so I would consider a dynamic alternative.
Note this won't look as seamless as with jQuery and using AJAX to load in the images when needed. Or better yet, as most JS galleries work, load the images into the page invisible at first and then with JS have them show up on the link click. The benefit of this would be that you could generate the links in JS using the provided images. If the images are large enough that they may cause considerable lag on page load, consider making placeholder images of some sort. In any case, take a look at lightbox 2.
Also, I didn't get the feeling you were using any server side scripting to create this gallery. If the js solution doesn't suit you or you find the added benefit of generating part of the website automatically based on the content need at the time, take a look at using something like PHP, Python, Ruby, etc. If it's just a simple website you're after, a great solution might be Wordpress.
You could have one page and just replace the images?
http://www.quirksmode.org/dom/fir.html
Now of course you change the function to work on a "previous/next" button system, assuming you have a photo gallery of some sort.
Please post more details.
You want your link to look something like this:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
and you want to give your image an id="tips" in this case.
Check out this fiddle to see an example. The only difference is that your href will have the rest of the url in there like the code posted above.
http://jsfiddle.net/QgzsL/