Struggling to make the picture fill the screen

Hi, im new on Adobe Dreamweaver cs5 and learning by trial and error via 'google' and 'youtube' so apologies if my question may seem too obvious.

Im trying to build a Web site, but who struggle to make a picture to fill the width of the page / post. The image is positioned as a banner directly below the navigation toolbar.

I want to get an effect similar to this: Jaywing

Thanks in advance, really appreciate your time and your help (I've highlighted the section image in RED).

Please see below for my progress so far...

HTML CCS

<! DOCTYPE HTML >

< html >

< head >

< link href = "css/styles.css" rel = "stylesheet" type = "text/css" media = "screen" > "

< link href = "css/print.css" rel = "stylesheet" type = "text/css" media = "print" > "

< meta http-equiv = "content-type" content = text/html"; charset = FIU-8 "/ >"

< meta http-equiv = "content-type" content = "hidden" / >

< name meta = "robots" content = "INDEX, FOLLOW" / >

< name meta = "keywords" content = "Enter the words" / >

< name meta = "description" content = "Paragraph of the text to be assigned in the example search engine under the title on Google, which is developing products innovative solution services [...]" / >

< title > Web site: Daniel J Ng product development services-www.xxxxxxxxx.com < /title >

< / head >

< body >

< div id = 'company_logo' > < a href = "index.html" > < img src = "Images/logo/Innovative solution in WHT.png" width = "auto" height = "30" / > < / a > ""

< / div >

< div id = "top_navigation_menu" >

< ul >

< li > < a href = "index.html" > home < /a > < /li >

< li > < a href = "update.html" > update < /a > < /li >

< li > < a href = "approach.html" > approach < /a > < /li > ""

< li > < a href = "clients.html" > customers < /a > < /li > ""

< li > < a href = "portfolio.html" > portfolio < /a > < /li > ""

< li > < a href = "about.html" > on < /a > < /li >

< li > < a href = "contact.html" > Contact < /a > < /li > ""

" < li > < a href =" https://UK.LinkedIn.com/in/danieljng "> < img src =" images/icon/LinkedIn White.png"alt ="linkedin"width ="16"height ="16"align ="basic"/ > < /a > < /li > .

< /ul >

< / div >

< div id = "top_banner" >

< img src = "images/banner/evo x 900 300.png" width = "945px" >

< / div >

< div id = 'outside' >

< div id = 'wrapper' >

< div id = "content" >

Text of the header < h1 >... < / h1 >

... The text content < p > < /p >

"< img class ="image_frame"src="images/raw/original_148032_JcHlJKDsQt3CI_tOmYOaKp7CR.jpg "width ="280"height ="180"/ >

"< img class ="image_frame"src="images/raw/peugeot-rd-concept.jpg "width ="280"height ="180"/ >

< p > text fill... < /p >

< / div >

< div id = "right_side_feed" >

Update < h2 > < / h2 >

< class p = 'date' > 4 July 2016 (Date display) < /p >

Sample headlines < h3 > < / h3 >

< p > content text < /p >

< class p = 'date' > 13 may 2016 (Date display) < /p >

Sample headlines < h3 > < / h3 >

< p > content text < /p >

< class p = 'date' > 14 February 2016 (Date display) < /p >

Sample headlines < h3 > < / h3 >

< p > content text < /p >

< / div >

< div id = "footer" >

< class = "footer" p > Copyright 2016 - Daniel J Ng Product Development: registered and unregistered design rights are the property of the propertier and may NOT be republished without permission < /p >

< / div >

< / div >

< / div >

< / body >

< / html >

/ * Legend color * /.

/ * Reset * /.

/* http://meyerweb.com/Eric/tools/CSS/Reset/

v2.0 | 20110126

License: no (public domain)

*/

HTML, body, div, span, applet, object, iframe,

H1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, Center.

DL, dt, dd, ol, ul, li,

fieldset, form, label, legend,.

table, caption, tbody, tfoot, thead, tr, th, td,

Article, aside, canvas, details, embed,

Figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, {audio, video

margin: 0;

padding: 0;

border: 0;

do-size: 100%;

vertical-align: baseline;

do-family: "Gill without MT;"

}

/ * HTML5 view role discount for older browsers * /.

Article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, {section}

display: block;

}

{body

line-height: 1;

}

OL, ul {}

list-style: none;

}

BLOCKQUOTE, q {}

quotes: none;

}

BLOCKQUOTE: before, blockquote: after,.

q: before, q: after {}

content: ";

content: none;

}

table {}

border-collapse: collapse;

border-spacing: 0;

}

/ * Global * /.

HTML {}

}

{body

}

/ * Titles * /.

H1, h2, h3, h4, h5, h6 {}

make-weight: bold;

}

H1 {}

do-size: 36px;

color: #A80004;

padding-bottom: 15px;

margin-bottom: 15px;

}

H2 {}

font-size: 20px;

margin-bottom: 20px;

}

H3 {}

do-size: 16px;

margin-bottom: 5px;

}

H4 {}

do-size: 14px;

}

H5 {}

do-size: 14px;

}

H6 {}

do-size: 14px;

}

IMG h2, h3 img, img h4, h5 img, H1, h5 img {} img

margin: 0px;

}

/ * Elements of text * /.

{p}

Color: #000;

do-size: 12px;

line-height: 150%;

margin-bottom: 15px;

}

p {} .the

margin: 1.5em 1.5em 1.5em 0;

padding: 0;

}

{p.Right}

margin: 1.5en 1.5em 0 1.5em;

padding: 0;

}

a {}

}

a: link {}

Color: #00f;

}

a: visited {}

Color: #0f0;

}

a: active {}

Color: #000;

}

a: focus {}

color: #A80004;

}

a: hover {}

Color: #000;

}

/ * Images * /.

{.image_frame}

padding: 10px;

margin: 10px;

}

/ * List * /.

/ * Tables * /.

/ * Containers * /.

{#outer}

Width: auto;

margin: 0px auto;

background-color: #FFF;

}

{#wrapper}

Width: auto;

margin: 0px auto;

background-color: #FFF;

}

{#company_logo}

position: fixed;

margin: 15px 0px;

float: left;

z-index: 2;

}

{#top_navigation_menu}

position: fixed;

Width: 100%;

text-align: right;

/ * Adds shadow down the bar * /.

WebKit-box-shadow: 0px 0px 10px 0px #000000;

moz-box-shadow: 0px 0px 10px 0px #000000;

box-shadow: 0px 0px 10px 0px #000000;

/ * Add the transparent background * /.

background-color: rgba (1, 1, 1, 0.8);

color: rgba (1, 1, 1, 0.8);

z index: 1

}

#top_navigation_menu ul {}

margin: 10px 0px;

padding: 0px 10px;

}

#top_navigation_menu ul li {}

Display: inline;

}

#top_navigation_menu ul li a {}

padding: 0px 18px;

}

#top_navigation_menu a {}

do-size: 16px;

text-decoration: none;

}

#top_navigation_menu a: link {}

color: #FFF;

}

#top_navigation_menu a: visited {}

Color: #000;

}

#top_navigation_menu a: active {}

Color: #000;

}

#top_navigation_menu a: focus {}

color: #666;

}

#top_navigation_menu a: hover {}

color: #C10013;

}

{#top_banner}

}

#content {}

Width: 650px;

float: left;

}

{#content_fullwidth}

Width: 100%

}

{#right_side_feed}

Width: 220px;

float: right;

}

#footer {}

Clear: both;

margin: 20px 0px;

Padding: 0px 20px 0px 75px;

Width: 100%;

text-align: right;

z index: 4

/ * Adds shadow down the bar * /.

WebKit-box-shadow: 10px 0px 0px 0px #000000;

moz-box-shadow: 10px 0px 0px 0px #000000;

box-shadow: 10px 0px 0px 0px #000000;

/ * Add the transparent background * /.

background-color: rgba (1, 1, 1, 0.8);

color: rgba (1, 1, 1, 0.8);

}

/ * Various * /.

.date {}

make-weight: bold;

color: #C10013;

margin-bottom: 3px;

}

.footer {}

Width: 220px;

do-size: 10px;

make-style: italic;

color: #FFF;

text-align: left;

}

Change the width to 100% as in

Tags: Dreamweaver

Similar Questions

  • How can I make the screen keyboard on disappear?

    How can I make the screen keyboard on disappear?

    Press the key at the bottom far right (icon with an arrow to the bottom of the keyboard).

  • How to make the screen on my smaller screen I can see all this?

    I don't know how and don't can not find the answer on the web or on my computer. How can I change the size of my monitor screen so I can see everything and will be able to use the back button, minimize, max, buttons etc.?

    Hello

    Read and try changing screen resolution information in the link below

    If he does not correct get 1 graphics drivers before you change the resolution

    try to get your site in manufacturere graphics or computer cards and find the driver download section

    Search your computer or graphics card model number based on what you have and download and install the latest graphics drivers for vista

    THEN try to make the screen of solution of problems

    http://Windows.Microsoft.com/en-us/Windows-Vista/change-screen-resolution

  • How to make the screen saver full screen using windows 7?

    Windows 7

    What size are the pictures that you have questions

    If the pictures are taken in the portrait and not landscape they will never fill the entire screen.

    What is position of the image set to now? to fill the screen with a picture of portrait, you will need to use Stretch. photo will not look good at all / you need to culture and framework of rotation / turn into a landscape image.

    Pictures to fill the screen? compare and validate different pixel sizes.

  • After I have publish a movie in Movie maker, the screen turns into a wide screen that cut 40% of recorded original notice. How can I prevent this?

    I played with all the options in the drop-down menu that change the image format and size of the screen. None of this helps. I played with this for several days now. Help!

    Hello

    The imported video has the required proportions?

    Change the proportions and video format in Windows Movie Maker
    http://Windows.Microsoft.com/en-us/Windows-Vista/change-the-aspect-ratio-and-video-format-in-Windows-Movie-Maker

  • How can I make the screen bigger?

    I have the program installed on my laptop (with Windows 7 x 64) Gateway. I have another monitor 24 "connected to my laptop. I'm doing a work first on the big screen, but the program by default keeps the size of my computer screen. Is there a way I can make the biggest program?

    Thank you and DFTBA!

    Terrence

    What version of Premiere Elements you use on Windows 7 64 bit?

    For now, I will assume first of 12 elements.

    You cannot make the largest program, but you should be able to set up for two screens where you decide which monitor takes preference.

    With your two monitors connected to the laptop, you went into Control Panel/display and did these settings? If you have, please show a screenshot of these display settings or to describe what you have defined.

    Once the project has been established, will you Expert workspace, Menu of the window, dual monitor Workspace?

    See if something in the following applies to your situation

    http://www.atr935.blogspot.com/2013/04/pe11-dual-monitor-workflow-concerns.html

    Thank you.

    RTA

  • I have a dell inspiron 1525, the screen goes black every few minutes. I have to close the lid and open it to make the screen come back. any ideas?

    Screen goes black every few minutes. have to close and open cover return the screen.

    Hello

    1. on what application is the problem occur?
    2. the hard drive spin when your screen goes black?

    I suggest that you follow these steps and check if the problem persists.

    Step 1:

    I suggest that you update your display drivers and check if the problem persists.

    http://Windows.Microsoft.com/en-us/Windows-Vista/update-a-driver-for-hardware-that-isn ' t-work correctly

    Step 2:

     
    Step 3:
     
    If your computer works fine in safe mode, then there must be a third party software that is causing the problem to occur, this is why I suggest you put your computer in a clean boot state.
     
    How to troubleshoot a problem by performing a clean boot in Windows Vista or in Windows 7
    http://support.Microsoft.com/kb/929135

    Note: Put your computer in normal mode (step 7).

  • How can I make the screen easier to read?

    I increased the font size, but the police is very pale and I want to make it more "BOLD".

    Dear Pegsy4.

    I'm sorry that you have this problem.
    Here are a few solutions for you, to solve this problem for you.

    Solution 1: Press the key on your keyboard: CTRL + Scroll of your mouse up/down.

    Solution 2: Look in your Mozilla Firefox browser for: Extra.
    Then follow this procedure: Extra-> Options-> content-> advanced, there you can change it to a "BOLD" style.

    Hope this has helped.
    If you have more questions, feel free to ask us.

    Yoeri
    Volunteer for Mozilla Firefox

  • How can I make the screen display full screen under XP?

    I have an acer 23 inch led.  This isn't quite a real 23-inch screen im trying to get the full screen. I need help I forgot how my friend got the full 23-inch its really simple prob... Thank you

    Hi RyanRoeser,
     
    -Are you talking to display full-screen applications?
     
    You can click on the F11 key at the top of your keyboard to view the full-screen window:
     
    For more information, see the link below:
     

  • Make the wallpaper slightly larger than the screen

    Hello

    I work with the simulator of the storm. I know that the screen size is fixed (obviously; "I think it's 320 x 480), but I want to make a slightly larger background image and allow scrolling horizontally and vertically.

    In other words, I want to be able to make a pan larger than the image of the screen; An image that has limits.

    I say, "which has limits," because I tried this, but the image is tiled, instead of being a single. A TI seems constantly to the left and down. Any help please.

    USE_ALL_HEIGHT and USE_ALL_WIDTH are a problem, as I predicted. Since you give your MyScreen VERTICAL_SCROLL and HORIZONTAL_SCROLL, it gives her children a height and a width of Integer.MAX_VALUE > 1. USE_ALL_HEIGHT and USE_ALL_WIDTH do all that great width and height.

    In order to make the screen exactly the size you want to substitute sublayout and take a look at net.rim.device.api.ui.Manager setVirtualExtent and setExtent methods. Some of the best examples of the override of this method are found in the code of

    Implement advanced buttons, fields and managers

    This code can be considered a bible of the BlackBerry user interface programming (Finally, at least for non touchscreen devices).

  • Captivate 7 How have hit (right arrow) to make the simulation to move to the next screen

    I'm building a simulation and need some keystrokes to create the action to move to the next screen.  Example: The user is prompted to press the right arrow key to make the screen to move to the next screen.  I have to be able to set up failure messages when the user presses an invalid key.  I don't know what I should use.  I tried text boxes, but they need to be entered in the text.  Thanks in advance

    CTRL is a combination key... will not work as a shortcut key, even for ALT and SHIFT. System expects another key in combination with these keys.

  • iPhone 7 backlight of the screen does not

    I was playing around with my new 7 iPhone and after having tested the retina Flash (who makes the screen will Flash White gloss to simulate a flash for the front-facing camera), the screen is totally black. I think the problem is the backlight of the screen because the iphone still unresponsive to commands (with sounds and feedback from taptic) and I can even see whats happening on the screen using a super bright external light. Everyone knows a similar problem?

    I saw the backlight failure with other models. Usually a motherboard component failure.

    Try to do a reset, hold the home button and the power together for 30 seconds or until you see the Apple logo reappears. If this doesn't fix it, then try to restore it. If this doesn't fix it, then you will probably have a problem with the backlight on the motherboard circuit, in which case the phone replaced under warranty.

  • Tecra A2: Automatic change of the resolution of the screen

    I use a Tecra A2 with an external 17 '' TFT Phillips, connected via the Toshiba docking station.

    TFT works best with a resolution of 1280 x 1024 - 1024 x 768 only supports the computer screen. I spent a lot of time, try to configure the integrated Intel 82852/82855 GM/GME Graphics Controller to automatically select the external screen when connected, otherwise use the screen of the laptop. I can get both use the same resolution (1024 x 768), but makes the screen external look terrible!

    This feature was present in my Sat Pro 6000 - but now that I have moved upward at a Tecra, I seem to have lost it?

    Any help would be greatly appreciated.

    Hello

    AFAIK the Tecra A2 takes care of max 1024 x 768 resolutions and it s not possible to increase it. Well, you said that your screen looks terrible with 1024 px external.
    I guess that the display looks like fuzzy. It of normal because the standard resolution for this monitor is 1280 x 1024.
    Well, unfortunately you have to use this resolution if you want to have a clear display resolution.

  • How to keep the screen Apple Watch?

    When you use Stocard, sometimes I need to rotate my wrist backwards to scan the barcode, but it makes the screen saver off!  I can't find anything that actually stay on.  Very frustrating, because most supermarkets have flat scanners, so the watch must be upside down for the barcode to be scanned.  It is not a problem with Apple pay.

    Any ideas?

    Hello

    On your iPhone, in the application of the watch, go to: Watch My > General > screen Wake - under the tap, select 70 seconds.

    When you wake up your screensaver by pressing on it (rather than by increasing your wrist), this will keep the screen awake up to 70 seconds - or until you lower your wrist after pressing it (if earlier).

  • cannot adjust the brightness of the screen on T530

    I can't adjust the brightness of my screen using the power manager. Update to the latest version of the ThinkVantage Communications utility did not help the cause. I can't make the screen more bright or dimmer, and it's driving me crazy. Any advice would be great!

    Do you use a Lenovo provided Intel graphics driver or an Intel processor has provided a?

Maybe you are looking for

  • Kaspersky Pure 2 Password Manager does not work in Firefox 17?

    Upgrade to Firefox 17 and Kaspersky Pure 2 Password Manager is now invalid. I reinstalled the update Kaspersky offer and always invalid. Any suggestions to try here?

  • lost internet access after the connection to the server

    Have had this problem in the past and in the hope that a workaround is available. MAC OS X El Capitan worm 10.11.2 runs and loses the Internet when connected to a server/sharedrive(on Microsoft Windows environment).

  • HP Compaq nc6320: drivers

    Upgrade to the new installation of Windows 7 Need drivers for 3 items listed on my device - devices Manager HP ev2200 1xEV-DO broadband wireless module Mass storage controller PCI Simple communications controller Can anyone help? Thank you

  • Need new hard drive, but have not the disks in Windows 7 OS

    Recently, I had some problems with my PC and was able to restore the factory settings.  Now it seems that my hard drive is bad and needs to be replaced.  I have a HP G71-449WM model, produces WA606UA. Will it also find Windows 7 OS disks somewhere?  

  • Tags Sony Nfc NT1

    I have 4 Sony Nfc tags but unfortunately, I was with another Nfc tag application and by mistake one of the tag (tag car) has been removed and now it is not detected by Sony smart app. Is it possible to reprogram the default settings of Sony tag Nfc p