Alignment of header with background image

I have problems trying to align my header with my background image image. I created a table with a width of 100%. The height of my image is 108px. I can't get the cell as 108px also.

I get the error message "the value you entered would make this table becomes lower than its minimum size.» It will be reduced to a size valed. »

So basically my background image starts a couple px before my image and therrfore dosent align correctly.

Any ideas?

Thank you so much Michael! I didn't know that a white in the cellular space, padding box does not mean 0. I put in zeros and problem solved!

Tags: Dreamweaver

Similar Questions

Menu Spry, problems with background images in Internet Explorer

Hello
Looking for help from someone more qualified than me with some menus spry. I have problems with background images don't show is not for some of my items menu in Internet Explorer. Safari and firefox seem to accept it's ok.
Here is a link to the menu: http://www.scottbrownwebdesign.com/beta/HTML/index.html
and here is a link to the spry .css: http://www.scottbrownwebdesign.com/beta/HTML/SpryAssets/SpryMenuBarHorizontal.CSS
I know that these are the elements that have the drop down or the side of the arrows. I can't have two background images that I can?
Thanks in advance,
-Scott

My first thought...
```
                     display: inline;          f\loat: left;          background: #FFF;

Try declaring the background-image here as well... where it says not to mess with unless you know what you are doing.

I'm just guessing though. If I had more time I'd look into it further but I do not.
```

Help with background image

I am one of those old creators shaped 'table' who decided to try the new way, CSS sites.
I tried to enter a background image to a page and put a table on the top. It did not work because when I added another table inside the main table it reproduces the background which was attached to the page image and not the table.
So I decided to do it in CSS and strange, this duplication thing happened here as well. When you hit the enter diplicates a band thin of the background of the page.
I have attached two screenshots. The first is what it looks like in DreamWeaver CS4 and the other in the browser.
The CSS looks like this:
body, p
{
margin-left: 0px;
margin-top: 0px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left top;
background-image: url(images/Agtergrond2S.jpg);
}
#container {}
}
{#headerarea}
padding: 10px;
height: 20px;
width: 800px;
left: 260px;
top: 141px;
position: absolute;
are-family: Arial, Helvetica, without serif.
are-size: 16px;
make-weight: bold;
color: #FFF;
}
{#leftarea}
padding: 10px;
height: 600px;
width: 250px;
position: absolute;
left: 0px;
top: 141px;
}
{#mainbodytext}
padding: 10px;
height: 100%;
width: 700px;
position: absolute;
left: 260px;
top: 220px;
are-family: Arial, Helvetica, without serif.
are-size: 12px;
make-style: normal;
color: #FFF;
text-align: left;
background-image: url(images/trans-test.png);
background-repeat: repeat;
}
#header {}
padding: 10px;
height: 20px;
width: 700px;
position: absolute;
left: 260px;
top: 170px;
are-family: Arial, Helvetica, without serif.
-font size: 24 PX.
make-weight: bold;
color: #FFF;
}
{#footerarea}
padding: 10px;
height: 30px;
width: 1280px.
position: absolute;
left: 0px;
top: 800px;
}
a,
a: visited,
a: link {}
color: #424242;
are-family: Arial, Helvetica;
are-size: 12px;
text-decoration: underline;
make-weight: bold;
}
a: hover {}
color: #666666;
are-family: Arial, Helvetica;
text-decoration: highlighted underscore;
are-size: 12px;
make-weight: bold;
}
a: {for more information
color: #oooooo;
do-family: Arial, Helvetica;
text-decoration: underline;
do-size: 12px;
make-weight: bold;
}
. {To header
are-family: Arial, Helvetica, without serif.
are-size: 18px;
make-style: normal;
make-weight: bold;
color: #cc0000;
}
. OPPORTUNITY {}
are-family: Arial, Helvetica, without serif.
-font size: 13px;
make-style: normal;
make-weight: normal;
are-variant: normal;
}
And the page itself looks like this
< html >
< head >
< title > < /title > African surveyors
< meta http-equiv = "Content-Type" content = text/html"; charset = iso-8859-1 ">"
< META name = "Description" content = "engineering and topographic surveyors, surveyors African," > ""
< META name = "Keywords" content = "surveyors, African, African, topographic surveyors in engineering, land surveyors" >
< META name = "robots" content = "ALL" >
< META name = "copyright" content = "" >
< META name = "rating" content = "Général" >
< META name = "revisit-after" content = "14" >
< META name = "language" content = "EN" >
< META name = 'distribution' content = 'Global' >
< meta http-equiv = "Content-Type" content = text/html"; charset = iso-8859-1 ">"
< link href = "style.css" rel = "stylesheet" type = "text/css" > "
< script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "
< link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" > "
< / head >
< body >
< div id = "container" >
< div id = "headerarea" >
< ul id = "MenuBar1" class = "MenuBarHorizontal" >
< li > < a href = "#" > about us < /a > < /li >
< li > < a href = "#" > contact us < /a > < /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > Services < /a >
< ul >
< li > < a href = "#" > rendering 3D < /a > < /li >
< li > < a href = "#" > example 3 < /a > < /li >
< /ul >
< /li >
< li > < a class = "MenuBarItemSubmenu" href = "#" > point 3 < /a >
< ul >
< li > < a class = "MenuBarItemSubmenu" href = "#" > point 3.1 < /a >
< ul >
< li > < a href = "#" > section 3.1.1 < /a > < /li >
< li > < a href = "#" > 3.1.2 < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" > point 3.2 < /a > < /li >
< li > < a href = "#" > point 3.3 < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" > point 4 < /a > < /li >
< /ul >
< / div >
< div id = "leftarea" >
< p > the left connect domain < /p >
< / div >
< div id = "mainbodytext" >
< class p 'Body_text' = > place the body of the text here < /p >
< class p = 'Body_text' > and several body text here < /p >
< class p = 'Body_text' > < / p >
< / div >
< div id = "footerarea" >
< p > < /p > footer area
< / div >
< / div >
< div id = "header" >
< h1 class = "Header" > African surveyors < / h1 >
< / div >
< script type = "text/javascript" >
<!--
var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})
->
< /script >
< / body >
< / html >

Hello:

You have a class css as follows:

body, p

{

left margin: 0px;

margin-top: 0px;

background-attachment: fixed;

background-repeat: no-repeat;

background-position: left top;

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

}

This applies to the body and p tag.

So when you enter, you generate one
tag and, therefore, this image is applied due to the class above as a backdrop.

I hope I am on the right track...

Thank you

Vinay

Problem with background Images and scrolling

I had to face for a while to get background pictures are working properly. Here's what I do:

VFM VerticalFieldManager = new VerticalFieldManager();

Card of bitmap = Bitmap.getBitmapResource ("MyImage.jpg");

Background bg = BackgroundFactory.createBitmapBackground (map);

vfm.setBackground (bg);

This works, but has entrapment. First of all, he painted only as much as you have fields too much room, so I have to add empty fields just to occupy vertical space. However, on a page with something like a listField, where the height is variable, this can lead to what the background image are starting to repeat and to allow scrolling.

What I want to do is to block all the scrolling and have the training exactly fill the screen with no scrolling or white empty places.

I'll just on this wrong? Would really love to help...

Hello

Hope this will help you.
```
class LoginScreen extends MainScreen {    //Manager        private VerticalFieldManager _manager;

    LoginScreen() {        //Set Background image            _manager = (VerticalFieldManager)getMainManager();            Background bg = BackgroundFactory.createBitmapBackground(Bitmap.getBitmapResource("back.png"));            _manager.setBackground(bg);

   }}
```
Add this manageron your screen don't add any component in this handler.

You add fields in the Manager of the other, and adds that the Manager on the screen.

Let me know if this solves your problem or not.

Text single line with background Image field

Hello

I have the following requirement for a small number of topics on BasicEditField, but I couldn't find answers to my requirement, so post to the same

My requirement

1 must be the only editor of line text field with a width and a predefined height.

2. If a background Image(For better look-rounded edge image like in Broswer)

3. If the number of characters exceeds the single line, it has scroll horizontally right and from characters to scroll left with the appropriate property of the ellipse.

4. in entering an Enter key (Center of select navigation Keys), it should call my method to perform an action.

Enjoy a quick help on this

Thanks in advance

Q1. BasicEditField.NO_NEWLINE will stop people pressing enter and get a new line.

Regarding your second question, I recommend that you check out the two videos on screens and area managers.

As a general rule, a field is laid out (i.e. tells his manager what size he needs and then this rectangle is placed), then painted. Exhibitor is managed by managers and put sublayout on the page for the fields. The more important than sublayout and put thing in page do is specify the scope (width and height) they need, which fiddles and managers to make using the measure.

Once all fields was laid out, then the visible parts of each field are painted using paint. I've never used subpaint.

I hope this helps.

Puzzle pieces filled with background image?

Hello community, there.
On exactly 0:21 of this video: https://www.YouTube.com/watch?v=HTT6aaoq-OS ; the guy selects the pieces of the puzzle and then proceeds to copy them into a new layer. But the new pieces of the puzzle are now filled with the image of the background. Could you recognize this specific effect/technique or direct me to the shortcuts he used? Any help is greatly appreciated, friends
PS. I think that it is a variant of the clipping mask - I tried with the clipping mask, but I can't get the search results

After selecting the pieces of the puzzle, he selects the bg layer and press ctrl/cmd-J.

Grid height of container to 100% with background image

Hello
I am a beginner with grids of fluid... I want to get whaY I always used to call a div wrapper - up to 100% with a background image, so I can put all my tests on top of it... and I can't get the grid container to stretch 100%...
I would like to use the container to contain the image, and then run the other diving on top (within) can it... someone please give me a leg upward?
Thank you

Try this:

Resizable background image full Page

Nancy O.

Please help: content still is not fixed with background image when I resize the browser window

I am designing a Web site and want my content appear in the same location relative to the background image, regardless of whether or not the browser window is resized. How can I do this? (the content always moves when I preview the page)

You can pin the object on the page so that it remains in the same position with any size of the screen.

Thank you

Sanjit

Border problems with background image

Hello
I have a problem with my background image. I have fillings of browser size the original value and activated scale option in the middle. The image has a resolution of 1920x1080px. But when I now change the size of my browser I get a white border on the left or on the right size.

Small to large size of Office Office:
https://DL.dropboxusercontent.com/u/84237067/kleinzugross.PNG
Large size of small office desktop:
https://DL.dropboxusercontent.com/u/84237067/grosszuklein.PNG
Hope you understand me, my English for this specific part is not perfect it.
Greetings
Marcel

I checked out the site but don't see any white space on the page with large screens, I think that you have already solved the problem?

Thank you

Sanjit

Using tracing image, and then replacing with background image

I am very new to Dreamweaver and am trying to put together a very simple site.
I use image tracing for the mode of disposal table - and it am followed exactly. However, when I put it off to test it in my browser,
nothing aligns how it shows in my work environment.
Am I missing something obvious 'very '? Thank you.

(1) never use the mode table layout. It's a terrible way to build web pages.

(2) no matter how hard you try, you can't make things stick to a large background image. It's like trying to nail Jell-o to a wall.

Have a look at the following tutorials. These will get on the right track.

Tables to CSS Web Design part 1-
http://www.Adobe.com/devnet/Dreamweaver/articles/table_to_css_pt1.html

Tables to CSS Web Design part 2-
http://www.Adobe.com/devnet/Dreamweaver/articles/table_to_css_pt2.html

Post back if you have problems.

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

Need help with background image a clickable link

Hi guys,.
I want to make the background of my site a background of advertising where the background image is clickable.
I tried a few tutorials, but none seems not to work
What I have, it's like my CSS...
```
#skin {position: absolute;
    width: 100%;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    left: 0px;
    z-index: -1;
    background-position: fixed;
}
```
.. .and this as my HTML code...
```
<div id="skin"><a href=""><img src="background.jpg" /></a></div>
```
It works soon, but the link is only a thin strip of hand and side of the screen for some reason any and don't extend to the background of the entire image.
Does anyone have any ideas as to where I'm wrong?
I thank you and hope to hear from you!
SM

Spindrift wrote:

Basically, what I want to do, is to have a skin of advertising that the background (maybe just a dummy container div to serve in the background) of my site, while he fills the area outside the container div of my sites and opens a link if clicked.

Anyone know how I can do this?

This can be done relatively easily, but it's not very pretty. You will need to use a full great for the background image, unless you plan to repeat, and then assign the clickable containing exactly this size. See code and screenshot below. Tested in FF, Chrome and IE9.

The Spry menu bar personalized with background Images

Hello
Is there a way to make a spry menu horizontal bar by using an image of different background of a different width for each item? In other words, the format individually each menu item. I'm doing a bar with drop down menus using custom images, that I created in Photoshop, but have only been able to use the same image for all the items in the menu. Thank you.

Each menu item will require that this is the style and the name of the class of its own.

Each class will have to be applied to each following anchor tag:
- Point 1
- Point 2
- Point 3
http://ALT-Web.com/demos/multi-colored-list-menu.shtml

Nancy O.

ALT-Web Design & Publishing

Web | Graphics | Print | Media specialists

http://ALT-Web.com/

Set the background image of a cluster? [LV 2013]

Hello-

Researcher, said, "why don" t you turn the image on the front panel and then decorate the image with the controls? See? Problem solved. "And the door closes.

So, I take the picture, scaling properly and voila! It is now the background image. Then add controls.

The horizontal and vertical scroll bars to move controls... but the background image is not followed. So if someone touches the scroll bars (they are required) then controls and image are aligned. Worse yet, their modified track manually is a pain in the eye-hand control.

I could put in a button titled "realign" and have it reset the position of the scroll bar. Or have the scrolling screen VI bar position (look at the FP zero spot) and some treatment to shift the image of the picture. What is its painful. Is there another way around the problem?

HM. A cluster? Clusters follow the scroll bars. But I can't seem to put a background image a cluster. The background color can be changed... but I don't see a way to paste a picture. I tried customizing the cluster control and attempted to use the same method to add an image as on the front panel (with the right button of the scroll bar, follow the instructions). This has changed the background of the typedef would control. Saved. Tried to use it. LabVIEW will > BEEP< and="" nothing="">

I really want to avoid building this complex picture of decorations. Especially when the image has chemical compounds in the boxes: how to index and the letters and numbers? That... and the image is one of these steps 'it's refinement... ».

Thank you for your time.

Mark

You don't give enough information on how this actually looks like and I don't have any experience with background images, but I would simply say, you drag the image file in the public Service and use the command menu in the toolbar to move backward (Ctrl + Shift + J) and then it must maintain position relative to other objects. You can then use the same menu to lock, so that it is not moved accidentally. You can also place an image control in the back and load the image in the code if it changes a lot, but this isn't a recipe for positioning the elements properly.

I also generally agree with Martins that scrolling is a flag. If you need to scroll, you look and see if there is a problem and other solutions.

a: link has the background image

I have a bkg img in my NAV to nav and the bottom (navBkg.jpg) these NAVs are style very specifically for the nav and low Nav in my css. However all a links show this backdrop, rather than just the nav and the low NAV. You can see in the lower area (snack of the week Club Eva prim) where it says "...". Read more. »
http://carriecoren.com/test/Sept9
Here's the css:
@charset "UTF-8";
#column3 img {}
margin-left: 10px;
}
@font-face
{
do-family: myFirstFont;
SRC: url (Gondola_SD.ttf);
}
*{
margin: 0;
padding: 0;
}
one, a: link, a: hover {}
background-image: url (.. / images/whtBkg.jpg);
}
{body
do-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
do-size: 14px;
color: #222;
line-height: 18px;
margin-right: auto;
left margin: auto;
text-align: left;
background-image: url (.. / images/blue_bg_vert.jpg);
background-repeat: repeat-x;
background-color: #000;
}
#container {}
Width: 960px;
margin-right: auto;
left margin: auto;
margin-top: 0px;
margin-bottom: 0px;
text-align: left;
background-color: #FFF;
background-image: url (.. / images/containerBkg.jpg);
background-repeat: repeat-y;
}
#content {}
Width: 920px;
padding-right: 20px;
padding-left: 20px;
}
#header {}
background-image: url (.. / images/header.jpg);
background-repeat: no-repeat;
padding: 0px;
height: 280px;
Width: 960px;
text-indent:-9999px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
left margin: 0px;
}
/ * column 1 * /.
{#column1}
Width: 590px;
top of the margin: 30px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 10px;
border: medium solid #888;
background-image: url (.. / images/column1art.jpg);
padding-bottom: 50px;
float: left;
}
#column1 p {}
do-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
do-size: 14px;
color: #222;
line-height: 22px;
padding-left: 253px;
padding-right: 10px;
padding-bottom: 10px;
}
#column1 h1 {}
Police-weight: normal
do-family: Gondola_SD.ttf;
do-family: 'gondola SD","Gondola SD - Swash";
padding-top: 20px;
padding-left: 240px;
padding-bottom: 10px;
font size: 20px;
Word-spacing: 95%;
text-transform: uppercase;
line-height: 30px;
text-align: center;
}
/ * column 2 * /.
{#column2}
background-color: #FFF;
padding: 0px;
Width: 250px;
margin-top: 30px;
right margin: 20px;
margin-bottom: 0px;
margin-left: 10px;
float: right;
padding: 0px;
}
#column2 li {}
list-style-type: none;
display: inline;
padding: 0px;
margin-top: 0px;
right margin: 8px;
margin-bottom: 0px;
left margin: 0px;
}
#column2 a, a: link {}
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
left margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
/ * column 3 * /.
{#column3}
Width: 550px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 10px;
border: medium solid #888;
padding: 20px;
float: left;
height: px;
background-color: #FFF;
}
#column3 p {}
do-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
do-size: 14px;
color: #222;
line-height: 22px;
}
#column3 h2 {}
Police-weight: normal
do-family: Gondola_SD.ttf;
do-family: 'gondola SD","Gondola SD - Swash";
padding-bottom: 10px;
do-size: 16px;
Word-spacing: 95%;
text-transform: uppercase;
line-height: 30px;
text-align: left;
}
#column3 a, a: link {}
color: # 33;
background-color: #FFF;
background-repeat: no-repeat;
}
#column3 a: hover {}
color: # 33;
make-weight: bold;
}
H1 {}
padding-bottom: 10px;
Police-weight: normal
do-family: Gondola_SD.ttf;
do-family: 'gondola SD","Gondola SD - Swash";
padding-top: 20px;
font size: 20px;
Word-spacing: 95%;
text-transform: uppercase;
line-height: 30px;
text-align: center;
}
/ * the main nav * /.
#nav {}
Width: 960px;
height: 35px;
margin-bottom: 10px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: center;
do-size: 14px;
line-height: 30px;
do-family: 'gondola SD","Gondola SD - Swash";
border-top-width: thin;
border-color: #000;
background-image: url (.. / images/navBkg.jpg);
background-repeat: repeat;
}
#nav ul {/ * this is the main nav list * /}
list-style: none;
margin-bottom: 0px;
Width: 100%;
margin-top: 0px;
}
#nav li {}
display: inline;
background-image: url (.. / images/navBkg.jpg);
background-repeat: repeat-x;
}
#nav li has, a: link {}
padding-right: 25px;
padding-left: 15px;
text-decoration: none;
background-image: url (.. / images/navBkg.jpg);
background-repeat: repeat-x;
vertical-align: bottom;
Width: 100%;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
}
#nav li a: hover {}
background-image: url (.. / images/navBkgHover.png);
background-repeat: repeat-x;
padding-top: 6px;
margin-top: 0px;
Width: 100%;
}
/ * nav down * /.
{#bottomNav}
Width: 960px;
background-color: #003399;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-top-width: 9px;
border-top-style: solid;
border-bottom-color: #000;
text-align: center;
background-image: url (.. / images/navBkg.jpg);
background-repeat: repeat-x;
float: left;
height: 25px;
}
#bottomNav ul {}
list-style: none;
make-weight: bold;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
#bottomNav li {}
margin-right: 0px;
position: relative;
padding-right: 10px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 0px;
display: inline;
}
#bottomNav a, a: link {}
margin-right: 0px;
padding-right: 10px;
padding-left: 10px;
padding-top: 7px;
padding-bottom: 7px;
display: inline;
margin-top: 10px;
margin-bottom: 0px;
color: #DDD;
}
#bottomNav a: hover {}
color: #DDD;
Background: #660000;
}
{#pinterest}
Width: 250px;
margin-right: 0px;
margin-bottom: 20px;
left margin: 0px;
}
#twitter {}
background-color: #FFF;
Width: 250px;
margin-right: 0px;
margin-bottom: 20px;
left margin: 0px;
height: 100%;
top of the margin: 15px;
}
{#social}
Width: 250px;
height: 58px;
background-color: #FFF;
}
#copyright {}
do-family: Arial, Helvetica, without serif.
do-size: 9px;
line-height: 20px;
color: #222;
text-align: center;
Width: 100%;
float: left;
}
{#contact}
margin: 0px;
height: 140px;
Width: 50px;
padding-right: 10px;
padding-left: 20px;
border: thin solid #222;
padding-top: 40px;
}
. Clear {}
Width: 900px;
color: #EEE;
top of the margin: 100px;
margin-right: 0px;
margin-bottom: 0px;
left margin: 0px;
Clear: both;
}
#container #content #clear {}
Width: 700px;
}

However all a links show this backdrop, rather than just the nav and the low NAV.

Perhaps, you will also need to change this code a little:
```
#nav li a, a:link {
```
TO:
```
#nav li a, #nav li a:link {
```
Your code is targeting all THE links on the page, while the second code which I gave is the targeting of specific links. Slight difference but big changes on the page.

Fixed background image wanted not

Hi all
I'm having a problem that left me speechless. I have a background image applied to a div, and although I haven't specified anywhere in the css for this image to be fixed position, it does not scroll with the rest of the text. I tried to apply css background-attachment scroll etc, but nothing moves.
Here is the page in question- http://www.sheffieldstudent.co.UK/test/studentstrology_may2011.html
CSS is here: http://www.sheffieldstudent.co.UK/test/_CSS/student.CSS
Any ideas? Thank you.
PS: Sorry for the DL slow speed but I have not compressed the images again.

You have the scrolling div positioned absolutely. It is this div that has the background image. Scroll its content, but because the div is positioned absolutely, the background does not scroll. That's the problem.

This whole layout will break anyway since you have frequently in the foreground text aligned with background images. Migrate one or two on display size for the text in the browser creates messy overlap...

You might consider using an iframe for this area of Central scroll rather than absolute positioning div...

Alignment of header with background image

Similar Questions

Maybe you are looking for