Participant

Answered

Many Questions About Dreamwaver

Forum|Forum|8 years ago
November 20, 2017
3 replies
588 views

I have been on dreamwaver for some months, about to complete my first website, here are my questions :

1. Is converting width pixel to percentage enough to make the site responsive? Or I have to make use of Media Query or Bootstrap.

2. If I set the height as auto instead of percentage or pixel, does it mean whatever content I add to the page will automatically find its space and the container will accommodate all the contents?

3. So by using auto height, I am finding it hard to add slider, please advise on how to add slider as I dont want to use amazing or wow slider. How do I add the script as part of the head and the slider html under the topnav. I don't mind a screenshot pls. How to get the code pls. Can we categorize slider as part of header or body?

4. I am trying to arrange 3 images with caption as paragraphs on my homepage and some other pages, i float them to left but it's not really giving the result i want, what am I not doing right?

Regards.

This topic has been closed for replies.

Correct answer B i r n o u

I'm not sur to fully get the bottom line of each question, so please don't hesitate :

1 - nope, in most case, you will have to define brekpoint and redistribute the content layout on the remaining space... as you say, MQ will help you to handle the difference in between display

set first on the CSS file all the common rules and description... then define the minimal break point range by range until the maximal one

2 - it depends on the final aim, and the way ou make the parent container layout...

3 - I'm not sure to get it clear... ???

confusion between slides and scripts???

4 - without seeing what you did and what you expect.. it is complex to send you feedback...

I figure out, that you want three cols containg images and text...

open the html body and then copy paste the line below

(div.3cols>img[src="https://placeimg.com/400/200/gray "]+p>lorem)*3

then hit TAB

add a style TAG on the document HEAD

and paste the code below

<style>

*{

margin:0;

padding:0;

// assume that all the block used remove any margin and padding

}

.3cols {

width:33.33333%;

float:left;

// makes each div a third of the width... and float aside each of them

}

img {

display: block;

width:100%;

max-width: :400px;

margin:0 auto;

// I don't know how you want your image... so making them block allows to resize them to the size of the parent container... but limiting them to their max size to avoid pixelisation

}

</style>

does that helps you to jump into dig ?

Nancy OShea

Community Expert

1. If you want to create a mobile friendly web site, start with a responsive layout like Bootstrap or one of the commercial CSS Layouts from Project Seven. http://www.projectseven.com/index.htm

Responsive Web Design Extensions, Apps, Add-ons and Plugins for Dreamweaver

2. No height values are required.

3. Image sliders vary. Which one are you attempting to use?

Nancy O'Shea— Product User & Community Expert

B i r n o uCorrect answer

Legend

I'm not sur to fully get the bottom line of each question, so please don't hesitate :

1 - nope, in most case, you will have to define brekpoint and redistribute the content layout on the remaining space... as you say, MQ will help you to handle the difference in between display

set first on the CSS file all the common rules and description... then define the minimal break point range by range until the maximal one

2 - it depends on the final aim, and the way ou make the parent container layout...

3 - I'm not sure to get it clear... ???

confusion between slides and scripts???

4 - without seeing what you did and what you expect.. it is complex to send you feedback...

I figure out, that you want three cols containg images and text...

open the html body and then copy paste the line below

(div.3cols>img[src="https://placeimg.com/400/200/gray "]+p>lorem)*3

then hit TAB

add a style TAG on the document HEAD

and paste the code below

<style>

*{

margin:0;

padding:0;

// assume that all the block used remove any margin and padding

}

.3cols {

width:33.33333%;

float:left;

// makes each div a third of the width... and float aside each of them

}

img {

display: block;

width:100%;

max-width: :400px;

margin:0 auto;

// I don't know how you want your image... so making them block allows to resize them to the size of the parent container... but limiting them to their max size to avoid pixelisation

}

</style>

does that helps you to jump into dig ?

O

olus9720536Author

Participant

1. Ok I will use MQ

2. Not using value i guess.

3. I thought there will be script and also html code for slider to function correctly.

4. Thank you for this.

B i r n o u

Legend

2 - I haven't the same point of view as Nancy, on this point. As I told you in my previous feedback, it depends on the final aim, and the way ou make the parent container layout...

as there are many context and goal, I can't enumerate all context and situation... but here below some where setting height can be necessary, or not, or auto...

- the header can have a limited height and defined as precise as the designer want and needs..; for such a case I often use the vw unit, which is proportionnal to the width of the display device height:0.4vw;

- a command tool bar can be set on a fixed way, and could have a pixel static value, but having a different static value depending on the device with... so here one can use a height:calc(vw * invert factor) or simply rely on a MQ forking on different fixed pixel value

- having a container containing floated element, need to set its own overflow:hidden; to allow its own height to be realistic,

- if you define a default height value for a certain type of element (say DIV), now you can use height:auto for a specific DIV.specific to get the height of the child(s) instead of the initial default value

and so on....

Jon Fritz

Community Expert

1. No. You need to keep in mind that mobile users interact with their device differently from a desktop. For example, instead of using a mouse, or even a somewhat precise stylus, they're typically using their finger, so you need to make your links finger-friendly on small screens which usually means a somewhat different approach than simple text links. Don't rely on your mobile users zooming in to get at a link, many people find that highly annoying on a mobile site.

2. Heights should almost never be set to anything. Allow the actual content determine the height of its parent elements. Height rarely needs to be set and will cause problems if it is set on items that can change size according to viewer settings (zoomed text for example).

3. We would need to be able to see your code to give you decent options for that. Please post a link to your work in progress on a server you control and share a link here. Image sliders are usually part of a <header> or sidebar content, but they can be placed anywhere they make sense to the content of the site.

4. You may be able to turn them into inline-block elements and center them using text-align settings for their parent, but again, the best way for contributors here to give you the answer that makes the most sense for your site, would be to be able to see it in our browsers. Sharing a link would help there as well.

O

olus9720536Author

Participant

1. Which other approach pls?

2. Ok

3. I'm using localhost and ampps server how can you get that?

4. Ok

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded