I', new to dreamweaver and building websites period, but one thing that has got me baffled is positioning multiple images.
Example: I add an image to the website and position it using the position tool/code. It works out well. Then I go to add another image and when I go to position it the image I placed first will move with it, as if they are linked some how.
So the question is how can I position them separately so they don't move together when I use the position tool?
Sounds like you need to use FrontPage or something similar. Dreamweaver is in some respects what photoshop is for graphics. It is more for advanced users who will position images correctly using custom CSS and HTML.
If you have access to the source code I'd recommend getting to grips with CSS. Images require position, if this be adding the 'display' or 'position' attributes or even using 'floats'.
Visual editors like the one you're describing are normally pretty limited in the way you can position images like you require. I suppose you could always create the website using tables. Most visual editors such as Dreamweaver will give you full control over these and you can position them correctly into the correct table rows/cells.
Related
When developing a website I often use background images for banners. When this website is in a CMS, the images paths come from the database (user uploaded). So I ended up using a style="background-image:url(myImageFromDB.jpg)"
However, this becomes an issue when I want to replace this image with smaller versions of the same image.
A lot of tutorials/guides out there, assume that you already know the path to this image, so you can just use #media queries to easily replace them. But if the path is dynamic, then I can't use media queries (unless they are dynamically written in the head of the document).
So how are people dealing with this issue?
Not using background-images? (using instead?)
Dynamically writing media queries at the head of the document?
Using JS to dynamically load the correct images?
Resizing images dynamically on the server?
My downsides of each method:
1. Downside, can't use some good options such as background-size:cover
2. Need to write server side script figure out what image to load
3. Probably the best option, but need to wait for the JS to load first
4. I have tried this, but without much success.
one thing you can do..
You can assign its width using view port width like width:90vw;.
1 vw=1/100 of total view.
so you need not change the image for small screen.
you can just simply add this in your media query and default css also.
width:90vw;..
you can change width as your requirement.
so it will act dynamically.
not need to change the image.
hope it works.
I am facing a problem in css alignment.
The problem is, i have a single image which is like collage with multiple images in it.
I want to postion on particular image in that collage using css.
I need to set that in my div background.
I checked in internet, i am unable to find a proper solution.
Thanks,
Karthikeyan J
If you download a chrome addon called "SelectorGadget" you may be able to get the exact CSS selector for what you are trying to edit. Then just apply styling to this element. If you post your code, might be able to help more though.
I've got a tough one. I work for a company that uses a sharepoint that is 100% text based due to varying network performace issues accross the world. It provides the option to input HTML for styling but scrubs any javascript. I do not have access to code CSS and I'm assuming jquery is not available.
I would like to embed images into the sharepoint as a proof of concept by taking advantage of a floating div (or iframe) that displays with an href to display a png file stored on a server. I don't want the div (or the image) to load unless the user clicks a link or a button.
I'm pretty amature at anything other than basic HTML formating. I'm not even sure it's possible to do something like this with only html.
Thank you in advance to anyone willing to take a stab at this.
You could do it with this HTML, which is ugly and unmaintainable.
Use an iframe with scrolling="none". Use width and height attributes to give it dimensions.
Inside the iframe have your img elements with an id attribute. Ensure they're spaced with enough vertical space so they can't be seen by default, and appear isolated when viewed later.
Link your links to those id attributes, e.g. link
I'm attempting to rearrange elements on a Volusion store for my employer. The products page we currently have looks like This
I've been tasked with moving the details box
(containing "Nothing says "I'm ready to learn!"), up and to the right, to align with the price box.
The box is a table contained in a hierarchy of nested tables, at roughly the same "depth" in a different branch.
I don't have access to the HTML for the page, only a template html file that generates menus and footers along with the relevant CSS. Some JS exists on the site but since I lack experience with it, I'm hesitant to get into it.
Because of the table-and-div structure, and the fact that I cannot edit the HTML, I'm left with tweaking stylesheets and possibly some javascript. My issue is this: How, using only these tools, can I take an element in one container and reposition it relative to elements in another container? I've tried
Position:Relative;
left:some percentage;
top:some negative percentage;
Which, for a single page, I can get to look quite good, but if I allow others to load the page it falls apart completely, due mostly to the fact that the container for the element I'm moving is calculated based on screen width, and the container for the destination is calculated with the width minus a constant value(the image for the product).
My employer is willing to accept that the arrangement won't be perfect, they know Volusion is the devil complex. But it's important to them that their products display all relevant information "above-the-fold". Obviously I've not found any sort of answers on this. I don't find all that many people who have to edit a webpage without access to the raw code, because that's stupid. Worse still, moving an element to align with a completely different container is just bad policy as I gather, but its what I'm being asked to accomplish.
The only way to do this on Volusion is with javascript. You do not have access to the HTML for the product page and given that it is built with tables there is no way to move the product description area up with CSS.
You need to use javascript to detach and append the product description box below the product details area.
There is no way around it... You need access to the HTML files. You could do it with absolute positioning but that is not good practice.
Because you are working with a template; if you change the arrangement of that page then all of the other product pages will follow. So the reason you can't find the HTML is probably because you are looking for a .php containing html..
I suggest to spend time understanding the template or get a volution expert.
Can you explain to me, at a very high level, what I would need to build an image carousel for the web, please. You can use data structures and general computer science terminology - but nothing language specific.
E.g:
Store all the images in an array or linked list
When the carousel is loaded, resize the displayed images as X% window size
When the next button is pressed, imageA moves to a hidden html element.
Et cetera.
I hope that makes sense.
Thanks.
You don't want anything language specific but you want to know about carousels on the web and you've tagged this with 'html' and 'css' so I'm going to assume that I can talk about HTML and CSS but I'll try to keep it high level.
If we ignore Flash, then you're left with HTML + CSS + Javascript. The common way to do this is to arrange the images or their thumbnails (don't resize via HTML - its doesn't look good and can increase your page load time) in HTML elements that are themselves contained in one or more layers of wrapping elements. So the whole set of images strung together might be wider than the viewing window. CSS is used to manage their exact layout and to keep them from overflowing the viewing window. When I say window, I just mean the portion of the page in which you want the carousel to appear. Then Javascript is used to change the CSS properties of one of the HTML elements that is wrapping the images, causing it to scroll or shift position.
With HTML5, you have more options, but the above is the way things have usually been done until now.
Finally, if you are going to actually implement this, there are a number of scripts available that will probably meet your needs, but if not I highly recommend using a Javascript framework like JQuery - it will make things much, much easier.
If you want to build it by yourself, one straightforward way would be to have a master div and all the images in it, lined up horizontally. Have the overflow set to hidden on the master div. Then use javascript and set scrollLeft as the user clicks the next, previous buttons.