Banner on sensitive site image

Hi all

Relatively new to Dreamweaver so forgive the basic question (I did the beginner tutorials and responsive Web site tutorial).

I'm looking to put a picture as a top of the banner of the page on my site (which is currently a change of Stargazer tutorial site). I want to have the following properties:

1 100% of the width of the site except on 800px wide when he stops growing. (I realized this through giving it a "banner" ID and setting the width to 100% and max-width 800px in the Style.CSS)

2. when the browser is developed over 800px wide, the image centers. (I seem to not be able to work out how to do this?)

3. once on 800px wide, I would like to the left and right borders to be the same color as the background of the banner image everything seems so seamless. (Once again I seem to not be able to work out how to do this?)

I would like to make the background color of the banner image is different from the background of the rest of the site image.

Here is the HTML (excerpt):

< body >

< div class = "container-fluid" >

"< img src =" images/battlefields_banner.png"alt =" "class ="banner"/ >

< nav class = "navbar, navbar-reverse" >

< div class = "container-fluid" >

<!-brand and toggle get grouped together for better mobile display->

< div class = "bar navigation-header" >

The CSS (excerpt) is as follows:

. Banner {}

Width: 100%;

Max-width: 750px;

background-color: #911319;

}

I apologize for wasting time on such a fundamental issue, but I'm going along in circles a bit here...

Thank you

What is a start page layout?  If so, he joined classes to help you with this.

CSS

. Center-block {float: none}

HTML:

http://lorempixel.com/800/275/nature/3"alt ="..." ">

Nancy O.

Tags: Dreamweaver

Similar Questions

  • Sensitive site image alternative text

    I don't know if this is possible, but I have an image that has a lot of names:

    2007_Underwriter.jpg

    I want to put it online. It works for most devices, but for smaller devices (phone), I went to the entry as text instead of an image because of data to download, possibly a table.

    1. is there a way to change the names of text to images once I go to the size of the iPad and more?

    2 - is the best way to go about this?

    3. is there a better way?

    Any help would be greatly appreciated.

    John

    Ask yourself this.  How relevant are all these names of modern mobile phone users?

    Don't you think they care about this content?  Is this a great tragedy if mobile users get a condensed version of the page without these names?

    Personally, I was hiding the image from devices xs and sm with a Bootstrap class.

  • DW CC sensitive site, Image problem, how can I get my image to stretch in the width 100% in the div container (wrapper)?

    I have a HomeHeader (upper Div) homebody (body div), 4 low box divs (not important). Im trying to get my homebody (body div) to stretch 100% width on the container as My HomeHeader (upper div) did. The two albums div and body divs are IMAGE backgrounds!

    Capture 1.PNG

    Now, I did something interesting that is, changed my homebody (body div) of the background color in the Red image background and it streched:

    Capture 2.PNG

    I don't want a solid color! I want the image that I designed in photoshop CC. I don't understand how I could get my div image to stretch, but not the image of the body. Help, please!

    PS. This is a copy of my CSS

    ICWOT:

    @media only screen and (min-width: 769px) {}

    {.gridContainer}

    Width: 100%;

    margin: 0;

    Clear: none;

    padding: 0;

    float: none;

    }

    {#HomeHeader}

    background-image: url (.. / WebDesign-assets/images/TopFooterH.jpg);

    height: 61px;

    }

    {#HomeBody}

    background-image: url (.. / WebDesign-assets/images/BodyH.jpg);

    height: 653px;

    }

    {#Home1AboutBlock}

    Width: 24.1758%;

    }

    {#Home2ProjectsBlock}

    Width: 24.1758%;

    margin left: 1.0989 per cent;

    Clear: none;

    }

    {#Home3StoreBlock3}

    margin left: 1.0989 per cent;

    Clear: none;

    Width: 24.1758%;

    height: auto;

    }

    {#Home4ContactBlock4}

    Width: 24.1758%;

    margin left: 1.0989 per cent;

    Clear: none;

    }

    {.zeroMargin_desktop}

    left margin: 0;

    }

    {.hide_desktop}

    display: none;

    }

    }

    Please help once again!

    You realize that will only look great on your screen, right?    Background images don't re - adapt to windows.  So for people on larger or smaller screens, it won't have the same experience.

    You could significantly reduce bandwidth by using a smaller picture with this method.

    Resizable background image full Page

    Nancy O.

  • Sensitive site &gt; mixed images on some devices?

    Hello

    I'm updating the design of our Web site by using the new features in Adobe Muse: sensitive site, breakpoints. I tested the site on the desktop (Windows) and Smartphones (iPhone and WindowsPhone). Everything seemed ok, until I got a hold of an iPad Mini, and when viewing the images on the site are all mixed with no logic whatsoever. The images are in different layers, each of which has its own name (nothing like image01.png or other). I can't test it on all kinds of devices, but I always try to make as many tests as possible and solve any problem seen on all devices. I encountered this problem on a mini iPad only, but maybe you can also see on other devices? Has anyone met a similar o same problem?

    Here are a few screenshots of the Ipad mini:

    In this one, you can see that the two images have been replaced by SocialMedia icons that are on the footer. BTW, which are replaced by other icons or images, and not those of these paragraphs.

    BadImages.jpg

    Here is the bottom of the page, the section of Contact icons are on the footer, images from other parts of the page are in the place of social media:

    FooterContactWrong.jpg

    Here is the temp URL for the site.

    Any thoughts?

    See you soon,.

    Marianela

    Try to reset your browser and clear the cache. Then cimpletely restart your iPad by pressing the button "On" so long, until the device restarts and displays the Apple logo. This "confusion of image" happen here as well.

  • sensitive site in muse

    Hello... I expose my problem: I'm doing a site in Adobe Muse and I use the sensitive function with breakpoints. I've included several break points and I hope that if I discovered the site of Apple devices (iPhone-Tablet PC laptop). The problem seems peripheral Samsug (Android and Crome browser). What is happening is that if I call the site just opened opens fine but if I rotate the phone from portrait to landscape page zoom and continues to zoom in on each rotation turning to display incorrectly. The page zoom continues at every turn until you have an enlargement of the part at the top left of the page. What could be the solution? can you tell me? .... Thank you to

    This looks like an Android-specific issue. Just to be sure, your site is not really sensitive, it is adaptive.

    I suggest you go through the tutorial to design sensitive create a sensitive site with Adobe Muse | Adobe Muse CC tutorials

  • Zoom in and out on a sensitive site

    Hi all

    I browsed a few sites and noticed some can be zoomed in and zoomed out, while read on mobile devices. Example, www.sonos.com and www.jamindustries.com. While other sensitive sites cannot zoom... example: www.braven.com & www.windcarrier.com.

    I created a sensitive site and I realized, that it can also zoom in/out. How can prevent that from happening?

    I created a sensitive site and I realized, that it can also zoom in/out. How can prevent that from happening?

    You do not have.  Many people need Zoom to be able to see the things on these small mobile device screens.   If you disable the Zoom & I can't read the page, I leave your site in anger & disgust and never come back. Don't mess with popular web devices.

    It's the correct one to use meta viewport tag.

    Nancy O.

  • Adobe Muse menu (CC 2015.1) accordion pushing objects down on sensitive site.

    I'm working on a sensitive site and the horizontal menu in my head is replaced by a hamburger icon after a certain breakpoint. When I preview the page in the browser, a table and a picture that all are two attached on the right side of the page jump down once the hamburger icon appears. I have deduced that this icon/menu has something to do with the question because when I hide it in the breakpoints and the preview, the objects are no longer jump down once I reached the breakpoint. I tried to play with the layers, but it did not seem to help. The hamburger is at the top right of the page, which I think also contributes to the items on the right side of my page to jump down.

    I found a solution. By setting the menu accordion 'None' in the menu resize problem has been resolved. I don't know how this happened, but I'm really happy that I found an answer to the problem.

  • Twitter feed widget disappears on sensitive site

    Hi, there seems to exist a few discussion threads on similar questions but nothing that comes up with a fix.

    I have a sensitive site of the Muse and have created a direct 300 pixels wide Twitter widget of Twitter. The code has been properly placed in the site. I put the widget, so when it gets to a point particular break Muse hides. However when you resize the window to its original size when previewing in the browser or when the site has been uploaded to the server, the widget does re - not appear. And before anyone asks I also created 600, 450 and 350 widgets wide just in case the wide version of 300 pixels pixel was the issue. Same result for all sizes.

    I tried to use the widget with both resize the value none and also get and sensitive width the same question. For most visitors to the site it will not be a problem as mobile tablet and small users have the hidden widget and everyone watching on a large desk / laptop screen go to him. But if for any reason no one resizes the window on their desktop, then dragged it réécrirait full size again, feeding does not appear re = who doesn't seem very professional.

    Someone at - it ideas?

    I use a MBP OSX 10.11.4 retina and all software and applications Adobe CC to day running.

    Thanks in advance.

    Simon

    Tried with a new empty site and the Twitter widget seems to work very well. Tried 30 times with the original site and also creates a lot of widgets more just in case, but was always the same questions. So ultimately I've recreated the original location of the zero and the working widget.

    Not sure what was causing the problem as used the same elements and set up as before. My guess is that there was a confrontation between either the simple email contact widget that was also on the page and / or the 3 buttons of photoshop in the foot 'sticky' at the bottom of the page.

    On the new site, I pasted in the Twitter widget first then added the widget contact then it may be an order of the item before issuing.

    Anyway for some reason any new site works now.

    Concerning

    Simon

  • Is there a way to hide certain content that I don't want on my mobile version of my sensitive site it will affect all other breakpoints?

    Hello world

    So I'm doing a sensitive site with muse. I do my mobile version look different than the rest of my break points because I don't want any crowded mobile version. I need to find a way to hide extra content, I've tried makes it opaque, moving out of the workspace visible and even put it on another layer but that affects still content on the other points of arrest or in the case of trying to get out of the workspace, I have just a really wide page and all this content is still visible. Any help would be appreciated.

    Hello

    Please try following the steps to achieve this.

    1. Select the breaking point where you try to hide certain content.

    2. Select the content you want to hide

    3 right-click > select hide the breakpoint

    This step will keep these elements hidden in the selected breakpoint, but they will be visible in other breakpoints.

    Kind regards

    Vivek

  • I have a site made with dreamweaver, but I want to change it to the sensitive site

    Hello

    I designed a Web site with Dreamweaver, but it's a non-reactive site. so I would change to a sensitive site. could someone help to change? Thank you

    Best wishes

    Mark

    Be reactive does not necessarily easy to mobile.  Mobile users interact differently with their devices.  Your new site should have tap & user-friendly menus by scanning, forms and other interactive elements to facilitate a mobile user good experience.  Then, there is a content mobile and considerations of bandwidth to be reckoned with.  Mobile users don't need to see a lot of content, or they like the heavy websites that feed on their use of data plans.  In short, there is no magic button for this.  It takes planning and execution.

    Some people like to jump start their mobile page layouts using a sensitive framework as Bootstrap or an add-on commercial magically generator presentation of the seven project.

    Responsive Web Design Extensions, applications, modules and Plugins for Dreamweaver

    Do your homework.  Study of some web sites mobile easy to see how they compare with yours.

    W3Schools - "bootstrap" tutorials

    http://www.w3schools.com/bootstrap/

    Tutorial of Republic - Bootstrap for beginners

    http://www.tutorialrepublic.com/Twitter-bootstrap-tutorial/

    Make your existing site adapted

    http://blogs.Adobe.com/Dreamweaver/2015/08/making-an-existing-site-responsive-with-new-CAP capacity-dreamweaver - cc.html

    Nancy O.

  • Sensitive site + white space to the right of the iOS device

    I recently downloaded the new version of Muse and started on a sensitive site for a client. Everything seems to be working and rather smooth through all the breakpoints for the most part, but when I visit the site on my iPhone 6 there is a white space of 30px along the right edge (screen included). When you rotate into landscape mode the problem disappears, but returns in portrait mode. In the browser on my desktop, everything behaves as expected because you expand and contract to the browser window. I also had a fried pull it upwards on their Android device and the page loaded as expected. Looks too good on an iPad in two directions.

    I have checked and checked the master page and the home page for additional items outside the edge of the page, including all the layers and breakpoints. It drives me crazy. Help, please. I've recreated a fake site to share this duplicates the question. www.anotherfinedesign.com/Responsive/

    Adobe Muse CC 2015

    Windows 7 Professional

    Chrome Version 48.0.2564.109 m

    iOS 9.2.1


    Sample file: www.anotherfinedesign.com/responsive/Example.muse

    IMG_0561.PNG

    grantjkidney content may not exceed the width of the browser to any item on the agenda of a breakpoint. If it does, and a device arrives at this width, the mobile browser will be first size (rightly) the width of the page on the device, and then zoom out to view the entire width of the content. When there is content outside the width of the browser that translates into the mobile browser zoom out leaving, for the most part, a blank space to the right.

    More generally, this is caused by a fixed width object sticking out beyond the width of the browser when the browser width approaches the width of the next breakpoint smaller. For example the empty part right of a large text block that contains a short sentence.

  • How to make an old site of muse in a sensitive site. Break bar is not displayed?

    How to make an old site of muse in a new sensitive site, breaking bar does not appear.

    The bar of breakpoint does not appear automatically when you open a Web site created with an older version of Muse.

    To show the United Nations bar this case, open the menu 'View' and then choose the corresponding command.

    For deeper information on this aspect of the topic here:

    Adobe help Muse | Migrate existing Adobe Muse Web sites to disposition

  • Old Muse site (with different layers for phone and Tablet) converted to a sensitive site of Muse

    Hello

    I am very happy to see that the new sensitive version came.

    How can I switch my muse old sites on sensitive new version?

    Thank you very much in advance for your help!

    The new version of Muse, released last night adds support for sensitive sites (a provision that changes based on the width of the browser). Muse continues to support adaptive websites (different layouts for phone, Tablet, desktop computer).

    Convert a large site of adaptive to sensitive will be a significant amount of work.

    Before you try to convert an existing site to adaptive answering, I would say only to discover the new sensitive device by looking at a few tutorials and creation of a new sensitive site from scratch in order to have a good idea what is possible. Then you can decide if you want to convert an existing site.

    Create a sensitive site with Adobe Muse | Adobe Muse CC tutorials

  • How to create a button "call" in sensitive site DW bootstrap?

    How to create a 'call now' (telephone) button in sensitive site DW bootstrap? I had such a button with jQuery a few years ago, but it doesn't seem to be compatible with the JS in a current model of DW. Thanks in advance.

    Ron Finley

    Use the such with phone number attribute.

    tel:12345678">Phone: 1-234-5678

    If you want a "bootstrap" button, add button classes.

    tel:12345678">Phone: 1-234-5678

    If the web device of the user does not have a phone app, it won't make any difference.

    Nancy O.

  • Hi there, is there someone who can help me with a safe way to turn my site into sensitive site?

    Hi, I'm new to BC and I have a site that is created on the platform of the BC, but unfortunately this is not admissible. Is there anyone who can help me with a safe way to turn my site into sensitive site?

    Of course. Send me the link and I can quote it. It could be days rather than hours to do it properly. There, some work involved to do this.

    [email protected]

Maybe you are looking for

  • How to replace the battery of the BIOS on Equium A210

    I have a Toshiba Satellite A210. I can boot the system after many powers and stop operations. When finally, starts the need to press F1, and I get a message like: replace the bios battery. How can I do?Thank you

  • I want to change the password I use to access MS Answers. How to do his?

    I want to change the password I use to access MS Answers. How to do his?

  • HP Office Jet 7310: 7310 HP Office Jet 0x886996ba error Code

    What does this code mean... 7310 HP Office Jet 0x886996ba error code...   It appears on the small screen on the printer itself. I tried uplugging and restart the printer, but nothing seems to work... Help... Anyone know what this could be? Thank you

  • Windows recovery error, does not start in windows 7

    Description of the problem: "Windows error recovery" appears during the implementation with 2 options- (1) starting repair (recommended) (2) start Windows normally I can't access my desktop. If I choose 'Launch Startup Repair', it goes to the screen

  • port channels

    I'm looking on the port channels configured on the FI. And that's all. port channel 21 is (eth 1/27-20) which is connected to the nexus 7000 so, what are the others? (nxos) # sh port-channel summary Flags: D - low P - Up in the port-channel (members)