How to insert a div tag full width?

Hello

I start to design a new website with Dreamweaver checkerboard to fluid.

At the top of the site, I'll have a background black full width with logo and nav (responsiv)

I try to set the div to 100% but it is white on the left and right.

How to do this?

I hope someone can help me?

Best regards

L G

Put your

outside of the div. of .gridContainer

CSS:

{body

Background: #222;

}

{to header

Width: 100%;

}

HTML:

Your sensitive content goes inside this container.

In the following example, I did the same thing except that I used a footer of 100%.

http://ALT-Web.com/FluidGrid/Fluid2.html

Nancy O.

Tags: Dreamweaver

Similar Questions

  • How to create a video header full width in Muse?

    I just wanted to know how I can get a video header full width in Muse.

    Somehow that you consider appropriate, but quite frankly beyond a few basic animated GIF people will hate because of the size of the file and the potential problems on mobile devices. It is not the best of ideas.

    Mylenium

  • How do you do < div > tags line up in Dreamweaver CS6?

    Y at - there no way to make the div tags dash so that the opening and closing tags are aligned vertically?  How apply the formatting Source, sometimes the final tag is at the end of a line of code instead of wrapped to the next line and link up with its start tag.  Are there any settings for this to happen or extensions for this?

    Go in Edition > Preferences > Code Format > Tag Libraries.   After setting your formatting preferences.  Record.

    Access the commands > apply Source format.

    Nancy O.

  • How to hide the div tags when the value inside is empty?

    I'm creating a tab bar using jQueryTabs.

    I want to hide a tab when the value inside is empty.

    It is perfectly feasible to hide the real on the ground when notting to show is, however, the tab is always in the tabs on top.

    Here is the code:

    as you can see in the tabs 4 and 5 I'm hidding values that are inside the field is it not there no. The tab is still there

     <script type="text/javascript">
    // BeginOAWidget_Instance_2140022: #jQueryTabs
    
    
    
    
              $(function() {
          $("#jQueryTabs").tabs({
                        event:"click",
                        collapsible: false,
                        selected:'0',
                        fx: { opacity: 'none', duration: 1 }
            }).tabs( "none" , 1 , false ); 
              });
    
    
    // EndOAWidget_Instance_2140022
           </script>
          <div id="jQueryTabs">
            <ul>
              <li><a href="#tabs-1">Description</a></li>
              <li><a href="#tabs-2">Specification</a></li>
              <li><a href="#tabs-3">Video</a></li>
              <li><a href="#tabs-4">Audio</a></li>
              <li><a href="#tabs-5">Downloads</a></li>
            </ul>
            <div id="tabs-1">
              <p><?php echo $row_Recordset1['Full_Description']; ?>
            </div>
            <div id="tabs-2">
              <p><?php echo $row_Recordset1['Specification']; ?></p>
            </div>
            <div id="tabs-3">
              <p><?php echo $row_Recordset1['Video']; ?></p>
            </div>
            <div id="tabs-4">
              <p><?php if (!is_null($row_Recordset1['Audio1'])) { ?><a href="<?php echo $file_wav.$row_Recordset1['Audio1']; ?>"><img src="files/Images/audio_image1.jpg" width="50" height="50" ></a><?php } ?></p>
            </div>
            <div id="tabs-5">
              <p><?php if (!is_null($row_Recordset1['Brochure'])) { ?>
              <a href="<?php echo $file_pdf.$row_Recordset1['Brochure']; ?>"><img src="files/Images/pdf_image1.jpg"></a>Brochure<?php } ?></p>
              <p><?php if (!is_null($row_Recordset1['User_Guide'])) { ?><a href="<?php echo $file_pdf.$row_Recordset1['User_Guide']; ?>"><img src="files/Images/pdf_image1.jpg"></a>User Guide<?php } ?></p>
            </div>
    
    

    RiaandSteve1 wrote:

    Thanks for your quick response,

    I tried this,

     

    ">

    I'm not able to click on the tab now, but he is always visible (in this case telling audio). I must be something to do with this code

  • Audio
  • above the actual div for the tab.  Do not know how to remove the tab

    Well Yes if you want to hide the tab too then you must surround the

  • tag in a similar way:

  • Audio
  • How to insert a meta tag in the head element in the topic htm files?

    (I use RoboHelp 9, but also tried to RoboHelp 11 with exactly the same results).

    Our application requires the WebBrowser control to run in IE9 compatibility mode. This means that when launching Help (chm), the Help Viewer will also use IE9 compatibility mode, as it runs in the same process. As Chm files are intended to be read in IE7 compatibility mode, this causes issues with the layout of the help topic.  We found that, to solve this problem, each topic needs the following meta tag in the head element:

    < meta http-equiv = "X-UA-Compatible" content = "IE = EmulateIE7" / >

    Our help system consists of thousands of files htm/subject, of course, we can not do it manually. In order to have it inserted automatically, so I need to edit the parent file that generates the theme files. I tried to find this file, but no luck. Does anyone know how to do this?

    Willam are not available right now, but I can offer another method. Find a tag that may be in all your subjects and use it as a find.

    Replace with your label followed

    First backup.

    See www.grainge.org for creating tips and RoboHelp

    @petergrainge

  • How to insert custom HTML tags?

    Hello

    I insert a large number of tags as < class p = "foo" > or say < span onmouseover = "action (this); ">.

    Is it possible in Dreamweaver CS5 to extend the list of insertable tags with my custom tags and love steps

    1. Select text (so-called "the text"),
    2. choose them a tag in the list (say < span onmouseover = "action (this);) (">.)

    "A fragment" < span onmouseover = "action (this);" > text </span > ' will be inserted in the file instead of selected "text".

    Thank you in advance.

    Have you used the Snippets folder to store fragments of reusable code?

    I often use my code snippets folder. Go to an insertion point in your document and double-click the code snippet.

    http://webdesign.about.com/cs/Dreamweaver/HT/htdwusesnip.htm

    Another option is to create and use the controls on the stages of history:

    http://help.Adobe.com/en_US/Dreamweaver/CS/using/WSc78c5058ca073340dcda9110b1f693f21-7780a .html

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

  • How to Center a div tag in Dreamweaver?

    Hello

    I actually asked this question on another web page, but for some reason any affecting the margins on 'automatic' on it it does not work.

    Help, please. Thank you.

    http://www.laurasummers.com/

    Start with the Google Search Engine Optimization link, that I gave you.  If you have any other questions, post a new topic.

    You can use a graphic image for siteName / owner name.  But you must also include this information within a

    tag for search engines, translators and screen readers to see.  What happens if the CSS is disabled?  Background images are not visible.  What happens if the images are disabled?  The name of the site is not visible.  You see the riddle?

    The most important content on the site

    sub-heading, 2nd largest

    sub-heading, 3rd largest

    and so on...

    Use text-indent -99999px on the #header h1.  It will be move it out of the screen display for humans, but still "visible" for robots (who do not use CSS).

    #heading h1

    text-indent:-99999px;

    }

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

  • Create full-width div

    Hello

    I just created using liquid a header full width by adding a picture as a background and repeat it to x...

    Then, I create a div and add a slider on the inside but how can I get there too full width?

    Can I use the background color and make full width?

    Thank you

    CSS:

    {to header

    Width: 100%;

    min-height: 200px;

    background: Red;

    }

    HTML:

    100% width header goes here...

    The rest of your divs go inside this Div. rack fluid

    Who help me?

    Nancy O.

  • Gallery full-width

    Hello. How to set the Gallery to full width, if you want the images to adapt automatically to the size of the page?

    Hello

    This video might be useful: create a 100% width slideshow in Adobe Muse | Adobe Muse CC tutorials

    Kind regards

    Akshay

  • SPAN or Div tags in ul OK?

    IM using a drop down menu like this:

    http://www.HtmlDog.com/articles/suckerfish/bones/

    I must apply 3 for the 2nd level ul background images. If they were normal div is then I would just add 2 spans more or divs around them to achieve. Is it OK to do this with links and lists or copy the following code is not valid?

    Thank you

    You will need two things to tie up your images, if you do not li and one of their coupling. I have a feeling that you will eventually break the menu if interpose you a div between the ul and li menu items. In fact, you can insert a div tag (without success), but the div will show no depth. If you do outside the submenu ul, it will show always; If you put the div only around items of li inside the ul tag, it will hide and show, but will still have no height for her. Thus, no background image.

    What about spacing your menu items such as you can use a background on the AMT for the left side, background, border and low (see instructions) and use the border of the right hand on the li elements. You would need to engineer the border so there no rough air, but you should be able to function.

    If you apply a style of menu, you can also use to do, using two images sliding doors.

    Make a picture that is a path that is wider than your typical menu item and which includes all three borders. Export the border of the right hand as an image on its own. Don't include the lower border.

    Use the first image as the background of the li element.

    Use the second image as the background of the element has . Background-position: right; Background-repeat: no-repeat;

    You want to make sure that the item has has display: block; applied. Also, be sure to make Background-color: transparent;

    The right border image will be actually on top of the background image and border left, but placed on the right side.

    Check if this isn't what you want.

    Beth

  • The &lt; div &gt; tag button missing?

    I'm quite crazy here, try to insert a < div > tag... I'm still a beginner, learn to work with CSS, etc. My tutorial now wants me to insert a div via either:

    * Insert Div tag button in the common category of the Insert panel/bar

    * or use Insert > layout objects > tag Div

    Now: If I'm going to INSERT at the top of the page, there is no OBJECT PAGE layout to choose...

    I finally found what I think is common the Insert panel and even the category, but there is no button "Insert a div tag" (only, insert image, insert the rollover image, insert a table to insert generator).

    Am I missing something? I'm in error 'view' somehow? Do I have to buy an add-on? What's wrong?

    Thanks for your replies!

    Pipo

    No wonder I've been confused :-)

    Dreamweaver 4 (technically, version 4) and Dreamweaver CS4 (technically version 10) are completely different (about 8 years apart) versions

    http://en.Wikipedia.org/wiki/Adobe_Dreamweaver#Version_history

    You need a tutorial for Dreamweaver 4 (old version), CS4 (the current version).

  • How can I insert images of full-width that reach until the edges of the browser window?

    I would like to insert pictures full-width that reach until the edges of the browser window. When I try to do and break the boundaries of the image to the absolute limits of the page in edit mode, you can push the image back to the borders of the body in preview mode.


    I can do rectangle normal blocks full-width, but no pictures.

    Who can help me?

    1. Create a box, and then click the '100% width' along the menu bar icon to define your area to scale to the width of the browser.
    2. Import an image in the box using the parameters shown in the second picture,

  • Banner rotation 2 - How do you add links to images with div tags?

    I have a banner rotating images and need to add links to each image. I used jQuery Simple of Jon Raasch slideshow, suggested here.

    When asked how to add links to each image, he wrote "a more robust solution is to wrap each image in a div and target the div instead of the images (or anchor points). This would allow you to add text, images, etc. »

    Here is my code. Can someone show me how to wrap the images in the div tags and add a placeholder url as "index.html?

    ------------------------------

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
    " < html xmlns =" http://www.w3.org/1999/xhtml ">
    < content meta = text/html"; charset = iso-8859-1 "http-equiv ="Content-Type"/ >"


    "< script type =" text/javascript"src ="... / jquery-simple-slideshow-example/jquery-1.2.6.min.js "> < / script >"

    < script type = "text/javascript" >


    function slideSwitch() {}
    var $active = $("#slideshow IMG.active");

    If ($active.length == 0) $active = $("#slideshow IMG:last");

    This allows to take images in their order of appearance in the tag
    var $next = $active.next () .length? $active.next)
    : $('#slideshow IMG:first');

    Uncomment the 3 lines below to shoot images in random order

    var $sibs = $active.siblings ();
    var rndNum = Math.floor (Math.random () * $sibs.length);
    var $next = $($sibs [rndNum]);


    $active.addClass('last-active');

    $next.css ({opacity: 0.0})
    .addClass ('active')
    . Animate ({opacity: 1.0}, 1000, function() {})
    $active.removeClass ('active last active');
    });
    }

    {$(function()}
    setInterval ("slideSwitch()", 5000);
    });

    < /script >

    < style type = "text/css" >

    / * the value width and height to match your images * /.

    {#slideshow}
    position: relative;
    height: 157px;
    Width: 220px;
    }

    #slideshow IMG {}
    position: absolute;
    top: 0;
    Left: 0;
    z index: 8;
    opacity: 0.0;
    }

    {IMG.active #slideshow
    z-index: 10;
    opacity: 1.0;
    }

    {IMG.last - active #slideshow
    z index: 9;
    }

    < / style >

    < / head >

    < style body = "" do-family: Arial, Sans-serif, without; ">"

    < h1 > < / h1 >

    <! - this will work with any number of images - >
    <!-set the current class about according to the image you want to appear as the default
    (if not, this will be the last image) - >

    < div id = "slideshow" >
    < img src = "donate.gif" alt = "Donate now" / > "
    < img src = "DVD.gif" alt = "Shop DVDs" / > "
    < img src = "legis3.jpg" alt = "Legislative coverage" align = "top" class = "active" / > < / div > "


    < / body >
    < / html >

    ----------------------------

    Each of the three lines img src should < div id = slideshow ">?"

    Thanks for any help.

    we210 wrote:

    No, it has not corrected the problem.

    Thanks again.

    Looking at the last code you have posted you have changed the url links to the two scripts jquery to dev/jquery.fancy.box-1.3.0.js etc.. It seems that the scripts don't maybe not in this folder 'dev '?


       

    The images do not turn has nothing to do with the block of css code or where it is inserted in thesection of the code, but has everything to do with getting links to the correct jquery scripts.

  • My shrunken veiwing window. How to make full width again?

    My shrunken window. How to make full width again?

    If you go in the upper left corner of the viewing window, by clicking on one of the 'points' will make the display window full-width, Alternatively, if you go into the lower right corner, you should be able to click make drag and make any size you want

    see you soon

    JB

  • How to insert an Animation of sensitive edge in a div?

    I have create a sensitive edge Animation and put it in a Web site.

    This works well. But the skaling is 100% of the entire window of the browser.

    How can I adapt it in a div with a width of 80%?

    Thank you very much!

    Best regards

    Gerhard

    Use an IFrame and specify what you want.

Maybe you are looking for