Background CSS in multiline positions

Hi all, I'm trying to get a background color behind the text of a title by CSS. Sometimes it's a single line of text, which works fine, but as soon as it wraps, the bottom is spreading around the container in which it is.

How can I get a block of color to sit behind the title only allowing a fill of 5px on the title of multi line.

Here is an example:

http://News.Discovery.com

Note on the image of the Middle it is a topic (currently the walking dead) did pretty well what I need, but here, I noticed that it is decomposed in a span by Word. Is it really how I do it, and if so, how do you think that they managed to break through every word in a span?

Thank you.

The float is the cause.

I have not tested yet, but you should be able to add a class called just .hppheader in your css and float that instead of on the nested internal defined in your class time .hppheader .

Tags: Dreamweaver

Similar Questions

  • Background CSS does not showing in IE 7

    My site has been live for over a year and has been very well. We have recently updated to IE 7 and now the background picture in my head is no longer present. Is there a setting in IE 7 to disable this option?

    I set the background in css, like this

    #header {}
    background-attachment: fixed;
    background-image: url(/foldername/images/bg-header.jpg);
    background-position: right;
    background-repeat: no-repeat;
    }

    and I have a div with a lot of content in there with id = header

    Any ideas? I am at a loss...

    > background-attachment: fixed;

    Delete this. Why is that?

    --
    Murray - ICQ 71997575
    Adobe Community Expert
    (If you * MUST * write me, don't don't LAUGH when you do!)
    ==================
    http://www.projectseven.com/go - DW FAQs, tutorials & resources
    http://www.dwfaq.com - DW FAQs, tutorials & resources
    ==================

    "DC_Eric2" wrote in message
    News:g7iegf$j7d$1@forums. Macromedia.com...
    > My site has been live for over a year and has been very well. We have recently
    > upgrade
    > IE 7 and now the background picture in my head is no longer present. Is there a
    > setting in IE 7 to disable this option?
    >
    > I set the background in css, like this
    >
    > #header {}
    > background-attachment: fixed;
    (> background-image: url(/foldername/images/bg-header.jpg).
    > background-position: right;
    > background-repeat: no-repeat;
    > }
    >
    > and I have a div with a lot of content in there with id = header
    >
    > Any ideas? I am at a loss...
    >

  • Background CSS question

    Well Yes...

    CSS & I are not agree between themselves for some reason any.

    Imagine this: 2 table column, left cell defined with a style sheet with a background of 400 x 400 image. The right cell has a 200 x 150 image. The right cell is static width 200, with the width of the left unspecified cell.

    Left tank: I have a table with 2 columns, each to contain an editable web content of nesting. The right cell: a nested table containing the text navigation links.

    The stylesheet for large bkg image does not work with the format of the rest of the page, because it seems to float. I have an absolute positioning in css, but I get varied results. Each time, the css moves cells in a table so that they appear curiously, or the bkg image shows nothing.

    Here is the code for the structure of the page and the css for the bkg sheet.

    Any input would be greatly appreciated.

    Well Yes...

    CSS & I are not agree between themselves for some reason any.

    Imagine this: 2 table column, left cell defined with a style sheet with a background of 400 x 400 image. The right cell has a 200 x 150 image. The right cell is static width 200, with the width of the left unspecified cell.

    Left tank: I have a table with 2 columns, each to contain an editable web content of nesting. The right cell: a nested table containing the text navigation links.

    The stylesheet for large bkg image does not work with the format of the rest of the page, because it seems to float. I have an absolute positioning in css, but I get varied results. Each time, the css moves cells in a table so that they appear curiously, or the bkg image shows nothing.

    Here is the code for the structure of the page and the css for the bkg sheet.

    Any input would be greatly appreciated.

  • Image background CSS refresh

    Hello

    I use Edge inspect on my mac and pushing it toward an ipad and iphone.

    I did a css change involving a background image.

    It seems that the image is not get changed in the update of edge on both mobile devices. The full name is not replaced a replacement on the server.

    It is similar to a cache problem when developing on a browser.

    Is there a way/setting to fix this?

    my best.

    Brian

    Have you tried using the button refresh all of the Chrome extension?

    We are doing everything we can do with UIWebView, but the API to force a refresh is quite limited. If it does not can you try to make a minor modification to the HTML file that includes the CSS to see if that helps? If this isn't the case, I'll check with the other devs to see if there is anything else, we can offer you.

    Mark

  • PVII mm2 - menu background css

    There is no forum on the project site seven to handle this, so I ask the DW forum for help - I hope that it is for the purpose of the forum. I use seven magic Project menu 2 on my web pages and can not find the good css control in the file p7PMMh07.css that is causing a gap in the background color of the menu boxes.  The css in Firefox toolbar points to a #p7PMM_1a3, which I cannot find in the style sheet, so I'm stuck

    Hello

    You would be probably better re-view too general to the dreamweaver forum section, as more people are likely to see your message (and hopefully help). This section is primarily for developing extensions and dreamweaver extension installation help.

    If you repost, please report it on this point, new threads link and close the debate.

    PZ

  • site will not scroll with image background css

    I'm starting a new Web site in dreamweaver cs3... the test site would not scroll when too large for the screen. I have reduced the image background and location, but it is a bit small. First of all, the optimum size for a site... So how to scroll...

    The background image is in the css code.

    {body
    color: #c3300;
    font-size: medium;
    do-family: Verdana, Arial, Helvetica, without serif.
    make-style: normal;
    make-weight: normal;

    background-color: #fff
    background-image: url(images/meadowcroftbkgrd1.jpg);
    background-repeat: no-repeat;

    );
    background-image: url(images/meadocroftbkgrd1.jpg);
    background-color: #FFFFFF;
    }
    a: link {color: #333333; text-decoration: none ;}}
    a: hover {color: #993300; text-decoration: none ;}}
    a: visited {color: #333333; text-decoration: none ;}}

    {p}
    TD {}
    href {color: #c3300; background-color: #fff}

    Here is the url of the site

    http://www.allthegills.com/meadowcroftweb/indextest.html

    If someone could help me that would be great... I've never had this problem before.

    I'm glad it works for you now... Might be good to mark this as answer so these people who are trying to help will not need to click on the thread more.

    --
    
    E. Michael Brandt
    
    www.divahtml.comwww.divahtml.com/products/scripts_dreamweaver_extensions.phpStandards-compliant scripts and Dreamweaver Extensions
    
    www.valleywebdesigns.com/vwd_Vdw.aspJustSo PictureWindowJustSo PhotoAlbum, et alia
    
    --
    
  • property of background CSS hover doesn't work only in Internet Explorer

    Here is the link to the page in question: http://Fibar.com/playgrounds/index2010-2.html

    When rolling more PRODUCTS in the menu at the top left, a menu drops down.

    When you move the list items in the drop-down menu, the bottom becomes orange (F60)

    This works fine in FireFox, but fails in Internet Explorer.

    Everything that CSS is embedded in the page.

    Help, please. Thank you.

    fix your HTML in the #ddMenu... you nested your

  • inside your fix it looks to below:

    In addition, you might also want to rethink your design. Construction of a navigation bar with absolute divs is a bad design and won't have problems. Such as... try placing the cursor on the menu products... link will open then without dragging the mouse in the menu to continue to move the mouse to the left or right (home or news & links) links, you'll see that your context menu will not close and will remain open. To close it, you will need to place the cursor in the pop-up window and soar on the back. Just not very friendly. There are so many other options for navigation and you should really look into your options. Good luck.

  • Rule to the CSS style question: positioning of block next to the image level

    Hello

    I have this site for example: http://www.ecstechnics.com/modules/page.phtml?dimensionid=18 & pageid = 24 and I had a previous question on this topic: http://forums.adobe.com/thread/427154?tstart=0. Here, I asked for a way to draw a line of fixed length under a header < h1 > (resolved) and a way to draw a line under a heading < h2 > where the line was shortened by an image inline (left or right header, as can be seen in the example of the ecstechnics.com site).

    The problem however is not yet solved for an image on the LEFT of the header. With the above solution and a fixed width line, this line is inspired right through the image to the left.

    I need a solution for a header that is positioned to the right of the image (which I'm floating on the left) and where I want the line to start under the first letter of the heading and extends to the border of the container.

    Thanks for the tips.

    Erik

    From time to time, this is the best approach (question to rephrase in a new thread). But give the existing question some time for people to see. A few hours on a weekend is not generally enough time.

    I did that cause confusion. My apologies, it won't happen.

    Cool. It was kind of fun playing Hunt the answers in the nets - this time only! ;-)

    I hope that this is the method of work (one that we it was).

    --
    Mark A. Boyd
    Keep-on-Learnine :-)

  • Container color does not "showing through" background CSS?

    Hi all -

    I know that this is perhaps a fundamental question of CSS, but as I'm just now to enter the make by hand, I look closer how things work (or are not) and do not find this one.

    Here is the example:

    http://www.turnerdesign.com/testsite/

    and the css:

    http://www.turnerdesign.com/testsite/test.CSS

    I have #container as a green color, but it does not show in the space to the right of the #rightColumn.

    I think it has something to do with the floats work... uh... or something

    Any help is appreciated!

    Thank you

    Andrew

    How Murray?  I've always used car and to date have not had any problems of cross browser...  (it is true that I don't have to use it that often :-)

    PS: after having a quick read of this: http://www.w3.org/TR/CSS21/visufx.html

    I guess that in some cases, the car can cause an overflow of the box?  Whereas it is 'hidden' will not...?

  • Simple matter of CSS on the positioning

    Hello!

    My navigation bar is a div wide 130px called #navi and it is located in the left side of my page. Inside this div, I inserted 6 images that work as my navigation buttons. The images stacked on each other well as I wanted to, but here's the question:

    I need to have some padding between the images so that they are not so close to the other. But where and how do I apply this padding to make it work?

    Yes - if the styles apply to all images within the navigation, I would go with something like:

    #navi img {}

    top of the margin: 6px;

    }

    .. .or padding, if that's what you use instead of the margin.

  • How to: button on the page to enable or disable CSS properties?

    I would like to get suggestions for a relative artistic experimental version of a simplistic CSS and absolute positioning learning project.

    I want to make this page interactive then clicking on each container swaps the CSS for just that container on or off. By clicking on each container - header, footer, column1, etc. - one both accumulates at this page (or something similar).  For example, click anywhere in the foot and at the foot of the pass of background-color: a background-image: url (animated.gif); Click again, it changes back.


    Is this possible with CSS? Hidden or invisible block level divs? Example of pls!

    I don't know if it will work on the sections behind the other sections, like the body or packaging without much technical/math stuff. It should be simple CSS a novice can understand. Also very minimal html, no javascript preference.

    Databases allow you to display content based on the choice of the user without sending the unwanted content & bandwidth.

    Hide stuff with CSS does not prevent the content from loading.  It's there, but what is not immediately visible.  Which may amount to a huge difference in bandwidth, especially for mobile users with limited data plans.

    Nancy O.

  • Center of impossible in DW CS4 page layout using css - using an automatic margin does not work

    Trying to center the page horizontally, here's the css I have for the wrapper:

    {#wrapper}

    Width: 990px;

    margin: auto;

    padding: 0px;

    background-color: #4d4d33;

    background-image: url (.. / images/full_bkg.jpg);

    height: 1100px;

    background-repeat: repeat;

    position: absolute;

    Delete: position: absolute;

  • Design view of Dreamweaver CS5 background is black, how can I stop this?

    Hey everybody! I have a problem with the mode of creation of Dreamweaver CS5 only show a black background. I can create a new html document as a stand-alone file or part of a site and it will show a black completely wheather it is saved or not. It is also a problem with the pages that I have already created and pages created with a pre installed Dreamweaver template. I don't see anything, if it's not black. It is not affected by the background colors, either actually background colors don't show up on everything I do. It's all black! The strange fact about this is that any given page will display fine in Live view or in any web browser. Thank you in advance, I really need help on this because I need to use design mode to position elements (which is much easier to do than to guess what would best look in code view).

    In my view, that it is a rendering of background CSS problem. Do a Ctrl + F (find) in your CSS for background: transparent.  Try to comment on all of these occurrences and see if that helps.

    Nancy O.

  • Different background image with each page?

    Hello Adobe community,

    I'm working on my portfolio and immerse myself in the CSS, I seems to have hit a bump in the evolution of the background image to each page.

    I watched a previous response and changed my style sheet to reflect the body classes that I did, but nothing seems to go right!

    http://dayandnightwebsolutions.com/

    Thank you

    Robert

    Edit, my images are locaed in '\public_html\img '.

    My CSS stylesheet is located in "\public_html\css".

    Then...

    Page needs to look inside...

    Body.index {background-image: url (.. /IMG/main-BG.jpeg);}

    Body.Services {background-image: url (.. /IMG/BG-Moon.jpeg);}

    Body.contact {background-image: url (.. /IMG/BG-Sun.jpeg);}

    ?

    Your file extension isn't actually .jpg and .jpeg. Change this in your CSS.

    Remove the prefix of body for all classes. Just use .index, .to & .contact in your CSS file. When using it in your HTML markup, include this class in any switch like body or div or any other thing.

    And above all, should any space between the url and (.)

    Change this:

    Body.index {background-image: url (.. /IMG/main-BG.jpeg);}

    to do this:

    .index {background: url (.. /IMG/main-BG.jpg);}

    Note that I deleted - image. This can be read by most modern browsers and is a short form. You can add properties of background much like repetition, position, etc. in the main tag 1.

    Trust that this assistance.

  • Difficulty in div background image

    Hello

    I did a lot of research on this subject and answers os tons were developed, yet, none has solved my problem so far.

    I'm doing the background image in a div that will be fixed when I scroll vertically.

    Have a model manufactured, in which the only editable div is the rightdiv. (in red, to be easier)

    Here is my code

    CSS

    {body
    margin-top: 0px;
    margin-bottom: 0px;
    background-position: Center;
    background-image: url (.. / Images/bgdr.jpg);
    background-repeat: no-repeat;
    }


    {#wrapper}
    height: 875px.
    Width: 1000px;
    margin-right: auto;
    left margin: auto;
    background-repeat: no-repeat;

    #header {}

    background-repeat: no-repeat;

    Clear: none;

    float: none;

    height: 214px;

    Width: 1000px;

    background-image: none;

    position: relative;

    padding-top: 10px;

    {#leftDiv}
    Clear: none;
    float: left;
    height: 500px;
    Width: 245px;
    position: relative;
    text-decoration: none;
    }

    {#rightDiv}
    Clear: none;
    float: right;
    height: 484px;
    Width: 755px;
    position: relative;
    overflow: auto;
    }

    #footer {}
    height: 100px;
    Width: 1000px;
    Clear: both;
    position: relative;
    padding-bottom: 20px;
    }

    And here is my HTML code

    <!-InstanceBeginEditable name = "RightDiv"->

    < div id = "rightDiv" style = "background-image: url(Images/informacao.png)" >

    < / div >

    <! - InstanceEndEditable - >

    Well, it's that on Internet Explorer 9, the background image repeats vertically when I scroll vertically. On Chrome it will stay fixed on parchment (and that's what I want).

    I tried to add style = "" background-attachment: fixed ", but that branding will match difficulty itself relatively to the entire page, not the div only." In addition, she repeats 4 times for oocupy the screen. I can solve that by "no-repeat", but it is always attached to the browser page, not of the div.

    I tried to solve this problem for days... Help would be very appreciated.

    Funny is that this only happens in IE9... Chrome works perfectly.

    After a little research, I found it's actually "mode of operation" in Internet Explorer, all versions. A fixed background image goes out the window of the browser for positioning.

    The work around is to place a div container around the div scrolling. Place the background image in this div without css positioning container or an attachment and turn off a background image or color in div scrolling.

    Something like that...

    your content here

Maybe you are looking for

  • find the backup option icloud now on the iphone 6

    Where can I find the icloud backup now option? It is no less "find my phone ' (settings > icloud) as the Apple tutorials indicates however on my iphone 6 it is only an 'Advanced' below the"find my phone"option.» When I type my legacy, it indicates th

  • All-in-One 6310 all lights flash when you scan multiple pages

    When I scan more than 8 pages, all the lights on the 6310 flash and the State a power reset is necessary.  I also have the same result when trying to send a fax from page 14 of the fax journal.  For me it seems to be running out of memory, but I thou

  • I purchased Money Plus Deluxe on Ebay without opening it,

    I entered the product key but cannot activate and get the following message: Activation of the money failed. Please confirm your product key and ensure that your computer is connected to the Internet. (Error 1020) do I have to get a replacement key?

  • What happened to my email address?

    I downloaded Windows Live and it shut down my email from Outlook to Windows Live Mail.  Everything works well, but does not transfer my old email addresses.  How can I recover them?

  • Cushion of missing numbers of blackBerry Smartphones

    It seems that when I check my voicemail, my block of numbers is incomplete.  I press the icon to display the digital keyboard and what I choose is #1 / #5 / and "*". "" I can't use touchpad to do anything like delete messages.  does anyone know how t