AP a Div inside a centered DIV
I've never got this understood. I have a Container DIV, set
to auto center. I'm using one of the presets that DW8 gives you. I
need put a small DIV in the upper right corner, that stays in the
exact spot even when browsers are widened...let me re-phrase. I
want the little DIV to be Absolutely Positioned, but using the XY
coordinates of my main, centered container.
I made a DIV, called it Absolute, moved it where I want it,
and of course it stays put when I widen the browser window. It is
using the whole browser window for the XY coordinates. That's fine,
and I understand it's supposed to work that way.
But, I also thought that if you put a DIV inside another, it
will use the XY of that div, not the whole page.
How do I do this?
This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"synterx" <[email protected]> wrote in
message
news:[email protected]...
> I've never got this understood. I have a Container DIV,
set to auto
> center. I'm
> using one of the presets that DW8 gives you. I need put
a small DIV in the
> upper right corner, that stays in the exact spot even
when browsers are
> widened...let me re-phrase. I want the little DIV to be
Absolutely
> Positioned,
> but using the XY coordinates of my main, centered
container.
>
> I made a DIV, called it Absolute, moved it where I want
it, and of course
> it
> stays put when I widen the browser window. It is using
the whole browser
> window
> for the XY coordinates. That's fine, and I understand
it's supposed to
> work
> that way.
>
> But, I also thought that if you put a DIV inside
another, it will use the
> XY
> of that div, not the whole page.
>
> How do I do this?
>
Similar Messages
-
Centering with CSS inside a div box
Am subbing on a job, would appreciate help:
I am trying to center the three columns inside the address
box at the bottom
of the page.
http://www.mariagrist.net/dev/motors/bodyshop.htm
It should look just like the box at the bottom of the main
page
http://www.mariagrist.net/dev/motors/default.html
but with content centered.
I copied the divs from the default.htm but am changing them
in order to try
to center the content. So far I have only made it worse
because now the
columns are all on top of each other.
ThanksThanks heaps, that's exactly what I wanted it to do.
Aren't these forums just magnificent.
"Osgood" <[email protected]> wrote in
message
news:[email protected]...
> Pixel Warrior wrote:
>
>> Am subbing on a job, would appreciate help:
>> I am trying to center the three columns inside the
address box at the
>> bottom of the page.
>>
>>
http://www.mariagrist.net/dev/motors/bodyshop.htm
>>
>> It should look just like the box at the bottom of
the main page
>>
http://www.mariagrist.net/dev/motors/default.html
but with content
>> centered.
>> I copied the divs from the default.htm but am
changing them in order to
>> try to center the content. So far I have only made
it worse because now
>> the columns are all on top of each other.
>> Thanks
> First off you need to change all thress <div
class="address_item_content
> divided"> to <div class="address_item_content">
Just drop the 'divided'
> part.
>
> Next you need to wrap the three newly nmed <divs>
'address_item_content'
> <divs> in another wrapper. See the code below
(scroll down) I've named it
> 'addressHolder'
>
> Find your .address_item_content css and make sure it
looks the same as
> this:
>
> .address_item_content {
> float: left;
> width: 115px;
> padding-left: 30px;
> margin-top: 16px;
> font-size: 11px;
> border-left: 1px solid #000;
> }
>
> add the addressHolder css to your stylesheet.
>
> #addressHolder {
> width: 438px;
> margin: 0 auto;
> }
>
>
>
> Heres the section of code starting and ending with the
> 'address_box_content' <div>
>
> Note to get rid of the 1px solid dividing line on the
left of the first
> 'address_item_content' <div> use some inline css
styling
> 'style="border-left: none;" plus <br style-"clear:
both;"> has been
> inserted after the 'addressHolder'<div> to pull
the 'address_box_content'
> <div> around the three addresses.
>
>
> CODE
>
> <div id="address_box_content">
> <div id="addressHolder">
> <div class="address_item_content" style="border-left:
none;">
> <div id="content_title">DERWENT PARK</div>
> 8c Lampton Ave<br>
> Ph: 03 6211 0660<br>
> </div>
>
> <div class="address_item_content">
> <div id="content_title">DEVONPORT</div>
> 6-8 Victoria Pde<br>
> Ph: 03 6420 4531<br>
> </div>
>
> <div class="address_item_content">
> <div id="content_title">BURNIE</div>
> 60-65 Marine Tce<br>
> Ph :03 6430 2440<br>
> </div>
> </div><!-- end addressHolder -->
> <br style="clear: both;">
> </div><!-- end address_box_content -->
> -
Help centering background video in fluid grid layout inside div
Hopefully this all makes sense. I am trying to center the background video (the animation on the website towards the bottom)... I have tried all sorts of things to try and center this. If it can't be done, it can't be done. The banner on top works as should. If all else fails I will just not use a fluid grid page and that will be that. I self taught myself Adobe After Effects to make that animation (took me a month and 1/2) and I have self taught myself Dreamweaver.. coming from Frontpage and Expression Web.
Here is the website (thank you in advance for your input):
http://a1customcomputers.com/Web%20Development/A1CC/Main.html
I just tested it and it's not playing how it should.. I'll figure that out later but where it says "Enter", that is what I need centered. Thanks
My html so far:
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet"/>
<link href="assets/style.css" rel="stylesheet"/>
<script src="respond.min.js"></script>
<script type="text/javascript" src="assets/jquery-1.5.1.js"></script>
<script type="text/javascript" src="jquery.videoBG.js"></script>
<script type="text/javascript" src="assets/script.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
<div align="center"><img src="A1_Banner.jpg" /></div>
</div>
<p> </p>
<p> </p>
<div id="div2" class="fluid"></div>
</div>
</body>
</html>
my style.css so far:
@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 90%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 15;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
.fluid {
clear: none;
width: 400px;
float: left;
display: block;
padding-left: auto;
padding-right: auto;
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
/* Mobile Layout: 480px and below. */
.gridContainer {
width: 100%;
clear: none;
float: none;
height: 100%;
margin-top: 20px;
padding-left: 0.7851px;
padding-right: .7851px;
#div1 {
width: 100%;
#div2 {
width: 400px;
height: 400px;
text-align: left;
margin-left: auto;
margin-right: auto;
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 100%;
padding-left: 0.7581%;
padding-right: 0.7581%;
clear: none;
float: none;
margin-top: 20px;
height: 100%;
#div1 {
width: 100%;
#div2 {
width: 400px;
height: 400px;
text-align: left;
margin-left: auto;
margin-right: auto;
.hide_tablet {
display: none;
.zeroMargin_tablet {
margin-left: 0;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 100%;
margin-top: 20px;
clear: none;
float: none;
padding-left: 0.7581%;
padding-right: 0.7581%;
height: 100%;
#div1 {
width: 100%;
margin-bottom: 13%;
#div2 {
width: 400px;
margin: 0 auto;
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;
/* DEMOS */
#div2 {
width: 400px;
margin: 0 auto;Not trying to argue with you and I know you are only trying to help and I know that you know ALOT more about this than I do.. you do... I don't know if background was the correct "place" to call it.. but nevertheless.. what I beleive it is, is in the background.. and maybe that is part of the problem. It is supposed to be called from a JQuery plugin, and where I have it now is in a "div [div2]" in the "gridcontainer". It was working and my latest attempts it was working great.. but wasn't centered. But I've changed a bunch of code around lately and so that is why it is not working right now... The "Enter" that you see on the link I provided is the "poster". When I get a chance I will work on it and get the animation working again.. or back to normal.. just not centered. At first I was thinking "centered vertically".. and so for like a week, maybe longer.. everthing that I was searching for and trying was for "vertically center a div".. then it hit me.. you jacka$$.. you want to horizontally center it... Haha! Again, thank you for your input.
-
Trouble centering an unordered list menu inside a div
Hello,
I have an unordered list menu that is giving me a fit. I can't seem to figure out how to center it in the div. Structure is like this:
<div id="first-nav">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
In my css I have:
#first-nav{width:100%; text-align:center;}
It's not moving the UL to the center of the div. Link Here http://skeeterz71.com/gothic/
I'm at a loss of what to do. Any help is appreciated.
ThanksI figured it out. I forgot to set mu UL to display: inline-block;
It is always something simple and this time in the morning, easy to overlook:) -
The option to add a hyperlink to text or an image in pages is greyed out. How do I fix this?
Peter is correct. However, one can clever up two overlayed, grouped Text Box and simulate a hyperlinked image that can be placed in the document body with text flowing around the image. Moving the image requires temporarily turning off the hyperlink in the Link inspector. Example was Pages ’09 v4.3 on OS X 10.8.4.
Steps:
From the Pages Toolbar, select Text Box twice. The Text Box will be slightly offset. Select and drag the offset one to just above the centered one.
Click inside the centered Text Box and back out the placeholder text. Now select this Text Box and choose the graphic inspector.
Choose Fill > Image Fill. Choose your image, and then Scale to Fit the entire Text Box.
From the Pages arrange menu, choose Make Background Objects Selectable, and Send Object to Background.
In the Wrap inspector, select Object Causes Wrap, and your choice there. My example was door #2.
Click inside your text-only Text Box. Change the placeholder text to three instances of the capital letter ‘O.’
Launch the Font panel (command+T).
Manually change the font size to 92 points. This just fits a default Text Box size without wrapping. I used Times New Roman Regular.
Select the text, and with the Link inspector, enable your choice of hyperlink, and also disable it (for now) with the “Make all hyperlinks inactive.”
With the text still selected, choose Font color from the Font panel. At the bottom of the Color tool, set the Opacity of your text to zero.
Drag the transparent text-only Text Box exactly over the top of your image Text Box. Use the blue guides.
From the Pages edit menu, Select All. From the Pages Arrange menu, choose Group.
Drag the Text Box group where you want it in your document body. Text will flow around it if you used my setting in the Wrap inspector.
Lastly, with the Text Box group selected, disable “Make all Hyperlinks inactive” in the Link Inspector. You now effectively have a text map overlaying your image and the mouse pointer changes to a hand. The link is now active. Exporting your Pages document to PDF preserves the hyperlinked image effect in both Preview and Acrobat Reader. -
Cant create smooth angled lines
im needing to create a fairly simple graphic of a plain rectangle with an arrow on one side. the rectangle looks fine, 1 pixel border, but the arrow looks badly jagged in all browsers.
ive tried 2 lines angled, the arrow shape and a triangle, slightly squashed but all have the same problem.
settings are 1-pixel soft border and edge: anti-alias
this must be possible to get the angled lines as sharp and clear as the rectangle appears...
how would i do it ?Is this a little better? If you're going for a triangle, the aliasing to the monitor pixel grid is really difficult to avoid. Here's what I did:
Imported your posted image and scaled up by 400%
Created a rectangle
For the triangular piece,
Added guidelines, where the distances between guidelines are divisible by four (othewise, the reduction won't alias properly)
Drew a triangle with the pen tool, using the intersections of the guide lines to get correct placement
Selected the triangle and rectangle and combined them with Modify>Combine Paths>Union
I duplicated this shape, setting the lower to fill, no stroke and the upper to stroke, no fillThe stroke is a 4-pixel Soft Line, with Stroke Options... set to Inside Path (centering the stroke on the path puts the math off by a few pixels)
Exported to a flattened .png
Imported the flattened .png and scaled down to 25%
When you're trying this scheme with geometric pieces, it's important to create the objects with dimensions that are integral multiples of the scaling factors you want to use and to place them at locations that are evenly divisible by the scaling factor . (In this case, 4.)
Fireworks .png file here: http://www.box.net/shared/8e58vtffdbxsn9gafa2g -
Photoshop button - fitting to frame?
Hello,
I imported my photoshop button and assigned a frame to the whole thing with 2 rounded corners. It looks great in design but in preview there is a transparent line surrounding the photos. I cannot right click on the picture in design mode to 'Fill frame proportionally' as I would do with a picture. How do I get rid of this line? I have played with the stroke being outside, inside and centered. Adjusted the frame size and even tried the cropping tool.
Thank you!Photoshop buttons are just like a rectangles with different layers set up as different states. So I would suggest you to click on the button select the state and then change the fitting accordingly and let me know if that helps.
- Abhishek Maurya -
I have a adjust my web page to any screen resolution. In my
first page I have an INCLUDE a header.asp, this header have a table
with one row x one col, 100% of width, but when I put a
Imageplaceholder inside table, centered, the image takes it's own
original width. Nevertheless I vary this to some widths, 900
pixels, 1000 pixels, etc, and the WEB page adjust for particular
resolutions, but not all.
How can I make to adjust my images, my headers and footers,
to any screen resolution? There are some method in HTML to make in
DreamWeaver, or there are some particular properties in the table
or ImagePlaceHolder to make this ajust?.
Thanks a lot to anybody.KKJacks, that is the exact solution. I was having same problem with 13" MBA connected to Apple Cinema Display. Brightness controls from Mac external keyboard would not work with adjusting the cinema display. In my case I have the MBA in clamshell mode but I only connect the power and thunderbolt cables. I don't usually connect the USB cable.
I attached the USB cable from the cinema display and voila, brightness controls now work from the keyboard.
Well done, totally fixed it for me. It's not necessarily intuitive to think that the USB cable would need to be attached to enable brightness controls from a wireless keyboard, so I'm glad I came across this! -
Correct "clip" for background with round border
Hi all. I'm having a problem with a round border and a round background. If you look at the code below you will see that I have a border specified with a radius of 5. If I run this, the background sticks outside of the border. If I also set the background to have a radius of 5, it still doesn't look correct as the outside of the border turns purple whereas I would expect it to be light red. If I change the background radius to 4 then the inside of the border doesn't quite match up to the background.
How do I set a border and just say the background should be "clipped" by it?
Thanks, Nick.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class RoundTest extends Application {
@Override
public void start(Stage stage) throws Exception {
FlowPane flowPane = new FlowPane();
Scene scene = new Scene(flowPane, 500, 500);
flowPane.setStyle("-fx-padding: 10;");
Label label = new Label("Hello");
label.setStyle("-fx-border-color: red; -fx-border-radius: 5; -fx-background-color: blue;");
// label.setStyle("-fx-border-color: red; -fx-border-radius: 5; -fx-background-color: blue; -fx-background-radius: 5;");
flowPane.getChildren().add(label);
stage.setScene(scene);
stage.show();
public static void main(String[] args) {
launch(args);
}This is actually a kind of tricky question to answer well.
The standard caspian.css stylesheet for JavaFX 2.2 makes almost no use of borders.
The standard caspian controls have things that look like borders or highlighted edges, but these are almost always implemented by layered backgrounds.
For instance a focus ring around a button is a blue background which is layered underneath the button background, making the ring look like a border, even though it's not.
I don't really know why the layered background approach was chosen over a border + background approach. Possible reasons are:
- it's easier.
- it performs better.
- it provides a better visual experience.
Maybe it is one or all of the above.
Regardless, I think there was likely some good reason why the layered background approach was chosen, so you'd probably best stick to it.
One advantage of using this approach is there are lots of similar examples in caspian.css that you can copy from and use.
A sample css style string for your sample app using layered borders, might be something like:
-fx-padding: 1; -fx-background-insets: 0, 1; -fx-background-radius: 5, 5; -fx-background-color: firebrick, forestgreen;By playing around with combinations of layered backgrounds, padding and background-insets you can achieve, borders around your controls which can be either entirely enclosed within your control's standard layout or outside of it (like the focus ring), so that when you add something like a focus ring around your control it doesn't shift the control's onscreen position - it really just surrounds the control.
An updated version of your sample app which uses this is below:
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class RoundTest extends Application {
@Override public void start(Stage stage) throws Exception {
// System.setProperty("prism.lcdtext", "false");
StackPane stackPane = new StackPane();
Scene scene = new Scene(stackPane, 500, 500, true);
stackPane.setStyle(
"-fx-background-color: cornsilk;"
+ " -fx-border-insets: 10;"
+ " -fx-border-color: rgba(128, 128, 128, 0.5)"
Label label = new Label("Hello");
label.setStyle(
// "-fx-padding: 5;"
// + " -fx-background-insets: 0, 5;"
// + " -fx-background-radius: 5, 5;"
"-fx-padding: 1;"
+ " -fx-background-insets: 0, 1;"
+ " -fx-background-radius: 5, 5;"
+ " -fx-background-color: firebrick, forestgreen;"
+ " -fx-text-fill: whitesmoke;"
// label.setScaleX(5);
// label.setScaleY(5);
stackPane.getChildren().add(new Group(label));
stage.setScene(scene);
scene.setCamera(new PerspectiveCamera());
stage.show();
public static void main(String[] args) { launch(args); }
}Now for some other questions you raise:
If I run this, the background sticks outside of the borderYeah the background radius and border radius properties are independent, so if you use a rounded border, you also need to use a rounded background or the background will overflow the border corners.
If I also set the background to have a radius of 5, it still doesn't look correct as the outside of the border turns purple whereas I would expect it to be light redJavaFX 2.2 uses anti-aliasing in pretty much all of it's rendering (and even another trick for lcd called sub-pixel rendering of text in some cases). Your border is only one pixel wide. If the border isn't sitting exactly on a pixel boundary, it's going to be blended with the background. Even if the straight sides of the border sit exactly on the pixel boundary, when the border turns the corners, the anti-aliasing algorithms will kick in blending the border corner and the background around the inside edge of the corner.
You chose a green background and a red border. When you mix those two colors, you get purple (which is what is happening).
I don't know of anyway to enable or disable anti-aliased rendering for JavaFX scene graph objects (perhaps something to do that might come along for the ride with the 3D scene graph support in Java 8).
Regardless, you probably want anti-aliasing engaged for your rendering anyway. So you should develop your app knowing that anti-aliasing will happen. To do this, choose colors which blend well when anti-aliased. Caspian does this by deriving a lot of the outer background colors from the inner background colors (i.e. just lightening or darkening the border). This works well because they have the same base rgb component mixture, just in different portions, so the anti-aliasing mixes them seamlessly. Choosing full colors at opposite ends of the rgb spectrum such as red and blue result in jarring mixtures like purple. Even if the anti-aliasing wasn't involved, your eyes can play tricks on you and have difficulty clearly seeing the border between these kind of colors due to the weird optics of the eyes.
Another strategy to alleviate nasty blending is to use more pixels, e.g. instead of a one pixel border, use a two pixel border - the anti-aliasing blending will be far less noticeable. Using the greater pixel strategy works very well in conjunction with newer higher resolution screens (so called retina displays), where the pixels themselves are so small that the human eye is unable to distinguish the pixels and the way they blend.
All that said - your original example with the rounded borders and background doesn't look too bad to me :-)
One other issue I came across when testing this is that there is a -fx-border-style css attribute which can have values of centered, inside and outside, and when I tried to set it I got messages like:
WARNING: com.sun.javafx.css.parser.CSSParser declaration CSS Error parsing in-line style '-fx-padding: 1; -fx-background-insets: 0, 1; -fx-background-radius: 5, 5; -fx-background-color: firebrick, forestgreen; -fx-border-style: inside; -fx-text-fill: whitesmoke;' from javafx.scene.Node$22@1bd5d8ab: Unsupported <border-style> 'inside' while parsing '-fx-border-style' at [1,138]
The css reference guide notes that the border functionality copies from the w3c backgrounds and border functionality, but there is no inside, outside, centered border style in the w3c css reference, so I guess there is some error in the JavaFX 2 css documentation there around what is supported and what is implemented from the w3c css reference. Note that I'm not really advocating that the JavaFX css processing should match the w3c css reference as I find the w3c system complicated and difficult to understand.
http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#region
http://www.w3.org/TR/css3-background/#border-style
Perhaps as borders in css don't seem to be used much in JavaFX, the documentation issue isn't such a big one. -
Positioning a swf inside a DIV
Hi everybody,
I am redoing a site for a friend, which was originally done using frames in GoLive. The site is very siimple but I can't figure out how to positoin the menu that I've placed inside the navbar DIV along the left side. I want it to stay positioned along the top, but it centers itself in the DIV and hangs too low. Here is the site www.matthewtomlet.com/ and I'm including the CSS code below.If anybody can help it would be appreciated, This the first site I've created using CSS, so the coding might not be ideal, but the site seems to be functioning well. Also, the home page just has one small image on it but the scroll bars show up, not sure why that is either.
Thanks again.
Kind regards,
Mark
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #000;
text-align: center;
margin: 0px;
padding: 0px;
p {
font-size: 1 em;
color: #FFF;
text-align: left;
a {
color: #FFF;
#wrapper {
height: 660px;
width: 870px;
margin-top: 35px;
margin-right: auto;
margin-left: auto;
#navbar {
width: 220px;
clear: left;
float: left;
#monoslideshow {
width: 650px;
clear: right;
float: right;
#maincontent {
width: 650px;
height: 300px;
margin-top: 150px;
clear: right;
float: right;
#maincontent p {
font-size: .9em;
color: #FFF;
text-align: center;
margin: auto;
padding-top: 20px;
#maincontent p a {
font-weight: bold;
color: #FFF;
#homepageimage {
height: 200px;
width: 477px;
margin-top: 175px;
margin-right: auto;
margin-left: auto;
#contact {
width: 650px;
height: 125px;
margin-top: 250px;
clear: right;
float: right;
#contact p {
text-align: center;
font-size: 0.9em;
#contact p span {
font-weight: bold;Do you understand the price you will pay for using a Flash element for navigation on the site? This will render the site unnavigable for both those with screen-assistive devices, and for search engine spiders. That means that the only page that will be spidered is the landing page after your splash, and unfortunately, there's no rankable content there. So, the whole site will be ranked based on this single title tag -
<title>Matthew Tomlet Paintings</title>
Bummer....
Nevertheless, if you browse directly to the menu.swf file here - http://www.matthewtomlet.com/_images/menu.swf - you will see that the space you are wanting to remove is actually part of the Flash file itself. You would need to edit that file with Flash to remove that space. -
Position Spry Menu Bar inside Header Div
Hi,
I have a horizontal menu bar that I am trying to position inside a header div at the top of my site. FYI, the layout of my site is that I have an outer wrapper div and the first div within the outer wrapper is the header div. I am following isntructions from a video tutorial I foudn that suggests that I set the ul.MenuBarHorizontal CSS rule to be "position - absolute" and "bottom - 0px". When I do this, it positions the menu bar at the bottom of the page, outside the margins of the header div. When I say bottom of the page, I don't mean at the bottom of the website page, but for some reason, at the bottom of the dreamweaver page, even outside of the outer wrapper div, depending on what I have the zoom set to. I hope the way I'm explaining this makes sense because it is completely baffling.
All I want to do is have the menu bar positioned at the bottom and horizontally centered inside the header div. Any suggestions?I've put up an example of what you're attempting to do here:
http://perrelink.com.au/forum/sky/menu-in-header.php
Instructions on the page :-)
Hope this helps.
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap -
Okay I'm tearing my hair out here!
I'm working on a Web design for a class. I'm trying to make a fixed header that is centered on the screen. The block containing the header is 950 pixels wide and should auto-center.
Here's a link:
http://pjutter.com/Sessions/AdvancedCSS/Lesson3/indexNew.html
This is working on Firefox and Google Chrome but not on Internet Explorer (where it is totally messed up and unreadable).
I cannot figure out how centering works. Supposedly margin: 0 auto should center a div, but that only occasionally works. I've used negative margins to center the 950-pixel div, and that works on everything except IE which is ALL messed up.
The CSS file for the header is the one called headernav. The others are part of the Blueprint framework which I'll be using on the grid underneath the header. So just ignore the others.
Can anyone help me with this?
Thanks, PhyllisCan't see your page. But static (unspecified) positioning is all that's required for 98% of page layouts. I very rarely use APDivs except for special situations like disjointed rollovers, lightbox windows or flyout menus. And then I wrap them inside a position:relative container.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
How do I center an image inside a CSS div tag using dreamweaver?
I know this may seem like a very silly queston to ask because it should seem so simple but how do I do that? I am having trouble being able to center an image inside of a div tag. Here is the code I have come up with so far. Thanks in advance for your help.
</style>
</head>
<body>
<div id="PageContainer">
<div id="PageHeader"> img.centered{display:block; margin-left:auto; margin-right:auto; }<img src="Untitled-5.jpg" alt="rowland" class="centered" /></div>
<div id="PageMenu">Content for id "PageHeader" Goes Here</div>
<div id="PageBody">Content for id "PageHeader" Goes Here</div>
<div id="PageFooter">Content for id "PageHeader" Goes Here</div>
</body>
</html>
Also you can ignore the other div tags after the first div id. The first div id that has my image link is the one I am trying to get to center my image. The image is in there just not centering.Centering Pages, Images and other elements with CSS:
http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html
Nancy O. -
Positioning off after put div inside a div
Hi,
Hope you're well.
As you'll see in the first
screenshot, I created a
spry menu bar that was
positioned 120 px from
the left and 250 px from
the top. It's position was
perfect.
I ultimately want to center
the website I am building on
the browser page so I am
putting all the elements inside
an outer div named "container"
which I have centered on the page.
However, as you'll see in the
2nd screenshot, when I made
that change, the spry menu bar
got larger, was moved to the
upper left of the container, and
the items are no longer
properly positioned within the
menu bar (they should be in
the upper left)
How can I fix this?
Thanks!Don't use position:absolute. You don't need it and it will cause you more pain than gain in primary layouts.
To jump start your projects, use the pre-built CSS layouts that come with DW.
File > New > blank > HTML > Layout > 2-col, fixed, left sidebar, header, footer.
Insert your SpryMenu into the left sidebar.
<div class="sidebar1">
<!--your spry menu HTML here...-->
</div>
Insert images and text into the content region.
<div class="content">
<!--your content goes here... -->
</div>
Nancy O. -
Stacking a Div ontop of another Div inside of a div?
ok so i am not a programmer, just a designer doing a family a favor building him a website. In using divs i am trying to get a div to overlap another div, while inside another div. confused? ok in simple: i have a div "wrapper" that holds the website center since the design is off center, inside this div i have another div which holds my body of the website "main", also inside the wrapper div i have a second div called "element" which is to sit top left and overlap the main div. The idea is to have an image cutting into the top left of the website, while keeping the rest of the site centered. I have attached a sample picture, and will post the code. if anyone can help please let me know thank you.
CODE:
<body>
<div id="wrapper">
<div id="element"><img src="images/Gears.gif" width="305" height="310" alt="gear image" /></div>
<div id="main">
<div id="header">
<h1><img src="" alt="" name="Picture" width="100" height="180" align="right" id="Picture" style="background-color: #00FF00" />Don Pike <span class="eng">B.Sc. P. Eng.</span></h1>
<h3>text</h3>
<h3> </h3>
<h3>phone </h3>
<h3>email</h3>
<h3> </h3>
<h3>address</h3>
<h3>city</h3>
</div>
<div id="content">
<h2>Lorem ipsum dolor sit amet,</h2>
<p> consectetur adipiscing elit. Suspendisse vitae pulvinar enim. Nunc eget ipsum diam, quis commodo nisi. Donec blandit mi mi, sit amet facilisis magna. Mauris eget diam est. Sed condimentum, nisi nec volutpat tincidunt, massa elit faucibus arcu, at dignissim purus tellus et velit. Integer at fringilla lacus. Nullam egestas leo vel mauris pretium gravida. </p>
</div>
<div id="footer">
<table width="432" align="center" cellspacing="15">
<tr>
<td width="144"><a href="resume.html"><img src="images/Gears_03.gif" width="144" height="144" alt="resume" /></a></td>
<td width="144"><img src="images/Gears_05.gif" width="144" height="144" alt="portfolio" /></td>
<td width="122"><img src="images/Gears_07.gif" width="144" height="144" alt="about me" /></td>
</tr>
</table>
<p> </p>
</div>
</div>
</div>
</body><head>
<style>
#page{
width:100%;
height:100%;
text-align:center;
#wrapper {
width: 860px;
position: relative;
float: none;
margin: 0px;
height: auto;
padding: 0px;
margin:0 auto;
#element {
top:0px;
left:0px;
padding: 0px;
height: 310px;
width: 305px;
position: absolute;
z-index: 100;
#main {
background-color: #333;
height: auto;
width: 550px;
border: 1px solid 333333;
position: absolute;
float: right;
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
left: 155px;
top: 125px;
#header {
padding: 0px;
height: 180px;
width: 360px;
float: none;
position: relative;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 170px;
#content {
color: 555555;
background-color: #FFF;
padding: 20px;
height: auto;
width: 470px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
#footer {
background-color: #FFF;
padding: 0px;
height: 180px;
width: 510px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
body {
background-color: #CCC;
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 25px;
color: #FFF;
margin: 0px;
padding: 0px;
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCC;
margin: 0px;
padding: 0px;
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #000;
padding: 0px;
margin: 0px;
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #333;
margin: 0px;
padding: 0px;
.eng {
font-size: 12px;
ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #333;
</style>
</head>
<body>
<div id = "page">
<div id="wrapper">
<div id="element"><img src="images/Gears.gif" width="305" height="310" alt="gear image" /></div>
<div id="main">
<div id="header">
<h1><img src="" alt="" name="Picture" width="100" height="180" align="right" id="Picture" style="background-color: #00FF00" />Don Pike <span class="eng">B.Sc. P. Eng.</span></h1>
<h3>text</h3>
<h3> </h3>
<h3>phone </h3>
<h3>email</h3>
<h3> </h3>
<h3>address</h3>
<h3>city</h3>
</div>
<div id="content">
<h2>Lorem ipsum dolor sit amet,</h2>
<p> consectetur adipiscing elit. Suspendisse vitae pulvinar enim. Nunc eget ipsum diam, quis commodo nisi. Donec blandit mi mi, sit amet facilisis magna. Mauris eget diam est. Sed condimentum, nisi nec volutpat tincidunt, massa elit faucibus arcu, at dignissim purus tellus et velit. Integer at fringilla lacus. Nullam egestas leo vel mauris pretium gravida. </p>
</div>
<div id="footer">
<table width="432" align="center" cellspacing="15">
<tr>
<td width="144"><a href="resume.html"><img src="images/Gears_03.gif" width="144" height="144" alt="resume" /></a></td>
<td width="144"><img src="images/Gears_05.gif" width="144" height="144" alt="portfolio" /></td>
<td width="122"><img src="images/Gears_07.gif" width="144" height="144" alt="about me" /></td>
</tr>
</table>
<p> </p>
</div>
</div>
</div>
</div>
</body>
SORTED?
Maybe you are looking for
-
Learning to create ebooks/kindle
Hi, I am still using CS5 (master suite) and want to learn how to create ebooks -- particularly kindle, from start to finished product ready to upload. I don't really know where to start. Is there a book or course that can be recommended? Can I do it
-
I am trying to figure out how to make this into a flash page. Since the thumb nails are seperate from the images I am wondering if I need to make two seperate .swf files or just one.
-
CMYK to RGB conversion with icc profile. Output is too dark
Similar question has been asked many times. But I didn't found the answer. It looks like this code cmykToRgb.filter(r, resultRaster) doesn't convert anything. But I presume each pixel from the raster "r" should be converted to RGB colorSpace and put
-
Date Converstion Function module
Hi, Is there any Function Module to convert Date. I want to convert YYYYMMDD to DD/MM/YYYY. ?? Thnak you hemanth
-
APDs with large internal tables
Hi Everyone! I have a problem with APDs where we use several ABAP routine within. When exploding the data to the lowest level we get 10 million lines and there is not enough space to transfer the data between the different ABAP routine. There isn't s