Center and floating divs?

I want a div to be centered at the top of the page with an
image for a header. (about 700 x 70) with a div on each side with a
tiled background image that will allow the image to flex in width
when the browser window changes.
I can do it with a table but I thought it would be a bit more
eligant with divs, but I'm fighting it.
Tutorials out there?

ylmichael wrote:
> I want a div to be centered at the top of the page with
an image for a header.
> (about 700 x 70) with a div on each side with a tiled
background image that
> will allow the image to flex in width when the browser
window changes.
>
> I can do it with a table but I thought it would be a bit
more eligant with
> divs, but I'm fighting it.
>
> Tutorials out there?
>
Presumably because you want a <div> either side of the
main image there
is a different repeat pattern on both side of the main image?
If so you need to set the construction up as below. The way
it works is
you create your two backgrounds for either side of the image.
Make them
around 600px x 70px.
The idea is that they don't repeat but sit concealed behind
the main
image, until the browsers viewport is widened.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#imageCenter {
width: 700px;
margin: 0 auto;
height: 70px;
background-color: #CC9933;
text-align: center;
#masthead1 {
height: 70px;
background-image: url(images/bg1.gif);
background-repeat: no-repeat;
#masthead2 {
height: 70px;
background-image: url(images/bg2.gif);
background-repeat: no-repeat;
background-position: top right;
</style>
</head>
<body>
<div id="masthead1">
<div id="masthead2">
<div id="imageCenter">Image Center</div>
</div>
</div>
</body>
</html>
IF the background is the same on either side of the main
image then just
drop one of the 'masthead' <divs> and let the image
repeat.

Similar Messages

Accordion and Floating Divs

Hi,
I have the following Accordion Panel Widget
http://kendallarneaud.com/ttlaptops/sample3.html
works great in FF but not in IE7....
any suggestions on working to solve this?

any way to force rendering without scrolls in Safari for
Windows 3.2?
i have the
quote:
useFixedPanelHeights:false

Set center and size

Hi,
How can I set the center and size of a map to view a group of points (like zoom to selection function).
Thank you
Ali

Hi,
you can use the concept of bounding themes. The following example uses the feature selection for theme1 and theme3 to define the center and size of your map.
<?xml version="1.0" standalone="yes"?>
<map_request
             title="tilsmq202:bounding themes"
             datasource = "tilsmenv"
             basemap="qa_map"
             width="400"
             height="400"
             bgcolor="#a6cae0"
             antialiase="false"
             mapfilename="tilsmq202"
             format="PNG_URL">
<bounding_themes border_margin="0.02">theme1, theme3</bounding_themes>
<themes>
    <theme name="theme1" min_scale="5.0E7" max_scale="0.0">
       <jdbc_query
         datasource="tilsmenv"
         jdbc_srid="8265"
         spatial_column="geom" label_column="STATE"
         render_style="myPattern" label_style="myText"
         >SELECT geom, state from states where state_abrv='IL'</jdbc_query>
     </theme>
    <theme name="theme3" min_scale="5.0E7" max_scale="0.0">
       <jdbc_query
         datasource="tilsmenv"
         jdbc_srid="8265"
         spatial_column="geom" label_column="STATE"
         render_style="myPattern" label_style="myText"
         >SELECT geom,state from states where state_abrv='IN'</jdbc_query>
     </theme>
</themes>
<styles>
    <style name="myPattern">
        <svg width="1in" height="1in">
        <desc></desc>
         <g class="area" style="stroke:#0000cc;fill:#3300ff;fill-opacity:128;line-style:L.DPH">
         </g>
       </svg>
   </style>
   <style name="myText">
       <svg width="1in" height="1in">
          <g class="text" float-width="3.0" style="font-style:bold;font-family:Serif;font-size:18pt;fill:#000000">
              Hello World!
          </g>
       </svg>
   </style>
</styles>
</map_request>Joao

How do I position my layer/table for my header in the center and up top?

I have designed a site before on my dreamweaver 4 site and
decided to design a new one. I just tried to insert my header into
the website and it worked fine. However, how to I align it directly
in the center and all the way to the top so their is no space from
the top of my site and header? My header is about 960 pixels wide
and was hoping to have it centered when viewed with a few inches of
background on each side. My last sight it just worked out when I
did but not this time.
Just so you know, I set a header layer down first, then put
in a single row and column table, then inserted my Gif header.
Header looks great but placement is wrong. Thanks

Good grief - DW3? It's not there. You will have to do it in
code view.
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
==================
"dontsettle22" <[email protected]> wrote in
message
news:fm1p83$pql$[email protected]..
> Darn it, this is what I was looking for, however, I am
on dreamweaver 3.
> I can't find an insert ....layout....div. Any other
ideas where I find
> div?

Floating divs of different heights

I have a layout that a client requires that is 3 columns wide
I am trying to set it up with floating divs and the divs have different heights.
What is the best way to lay this out and is it possible to use Edge Reflow to do this as when I lay out the divs at my starting resolution and then start to change it for media queries the divs move from their starting positions.
Hope it clear what I'm trying to achieve.
Would I be better using Dreamweaver to do this than edge reflow?

I think you are expeciencing someting similar to this user's post:
http://forums.adobe.com/message/5542351#5542351
We are looking at solutions, and it definitely helps us to understand how users experience the problem.

Why is the length of a floated div ignored by the outer wrapper?

I'm having a hard time understanding whether floated elements are relatively or absolutely positioned.
When I do a "float:right" on a narrow column, the text outside that column seems very aware of its existence. It won't appear under it - it will instead wrap around it. It will make room for it.
However, the outer wrapping div ignores the floated div completely. It will only take into account (and accomodate for) whatever amount of text is NOT in that inner floating div.
Example :
<div class="wrapper">
<div style="float:right">
Float right contents.
</div>
This is the content that isn't floating right.
</div>
If the right-floated contents are longer than the content that isn't floated right, the outer wrapper ignores it. It will only accomodate the text that isn't being floated. If the floated text exceeds the non-floating text, the floating text will bleed outside the outer wrapper.
How do I make the outer wrapper accomodate the right-floated div as well?

I'm having a hard time understanding whether floated elements are relatively or absolutely positioned
Neither. Floats are floats. The take content out of the normal flow. For this reason, you must clear floats after they are no longer needed. I typically use a br, p or hr tag with a clearing class like so:
CSS:
.clearFloat {clear:both; height 1px; visibility: hidden}
HTML:
<hr class="clearFloat" />
Floats and Margins Demo.
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Floating divs

Hey TLF team,
Do you have any immediate plans to implement floating blocks instead of just floating images? I am currently implementing a stop-gap measure that splits the input up into multiple blocks, renders each to a different textflow, then lays them out on the page, but obviously this isn't optimal and if you guys are on the verge of implementing floating divs then I'll hold off!
The reason I ask this is that I noticed that Jin Huang posted 'We are implementing border feature and backgroundColor of "block element" now', which suggests that you might be implementing other block features too...
To confirm I am talking about the kind of block floats that would allow layouts similar to:
http://www.maxdesign.com.au/articles/css-layouts/two-fixed/
to be created in a single text flow.

Thanks for your reply - in that case I shall continue with my original plan. It would be really cool if you guys could add this feature at some point as when you have a lot of floating divs as seperate TextFlows on the screen at once things can get slow and it would be nice if this was handled within a single TextFlow.
Congratulations on your work on TLF so far!

Floating divs made to have equal heights

Hi all
Is there a CSS way to get two divs (that will have different
lengths of
text) to have the same height. If not CSS what other
techniques are there to
achieve this - or is it not possible
Thanks
B
http://www.visit-the-coqui.com
If you are thinking of a vacation to Puerto Rico
http://www.thegadgettraveler.com
Travel gadget and other news here

Thanks Osgood - I did not think of the faux column option and
using it for
divs - I'll check that out - thanks
Thanks for the P7 link too
B
http://www.visit-the-coqui.com
If you are thinking of a vacation to Puerto Rico
http://www.thegadgettraveler.com
Travel gadget and other news here
"Osgood" <[email protected]> wrote in
message
news:gbg62d$14n$[email protected]..
>B wrote:
>> Hi all
>>
>> Is there a CSS way to get two divs (that will have
different lengths of
>> text) to have the same height. If not CSS what other
techniques are there
>> to achieve this - or is it not possible
>>
>> Thanks
>>
>
> You can use javascript, read this article about eqaul
height columns
>
>
>
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
>
>
> or you can wrap the two floated <divs> in another
<div> and use a
> repeating background image, google 'faux columns'

WMA Player Plug-in in Floating DIV

Here is a 'test' page that I've created:
http://www.justus.ca/test/vocab/professions.html
It has a 'floating' Windows Media Play plug-in within a
floating div at the
upper left of the screen. I can not get it to play, so I
copied the player
and pasted it into the first cell of the table as a 'test'.
That player
plays fine. It is an exact duplicate of the player in the
floating div
other than where it is located. Can anyone tell me how I can
get the
floating player to work? I want the player to stay fixed on
the screen
while people scroll the page to follow the audio being
played.

Try using this website
http://cit.ucsf.edu/embedmedia/
Note its easily to test an online media file then a local
media file I find.
For online files you can simply type the web address into the
media player script
for local file it has to be something like this src=file://
etc..
not just src=file.mp3
so try to upload you music or video file onto the internet
then
use the generator on the website
easy peasy
Bookmark it its the best around....
Daniel Lee
| CEO - Lead Developer
| Developer Trainer
|
http://www.onemegamarket.com

Having problems when aligning footer div and content div close together, in the browsers they are wi

My problem is when I paste text or paste anything in div tag. I have a container that contains everything. I have a content div that contains content. I also have a footer. When I align the footer at the end to content div which is in the container, it looks good until I look at it in a the different browsers, the content and footer are so wide apart. I've tried everything I could to make the browsers look as close as what I do in dreamweaver cs4. Is there a solution to this problem?
This is the link to page working on.
http://www.nlclv.org/truenewwebsite/html/doctrine.htm
The footer and content div are align very close in dreamweaver but very far apart in the browsers.
Also if you click on this link and click on calendar of events page you will see the samething.
Thanks for your help.

Absolutely positioned divisions are NOT a good primary layout method. Here's why:
http://www.apptools.com/examples/pagelayout101.php
You should use a CSS with default CSS positioning (which is no positioning at all). And then use margins, padding and floats to align elements on the page. Also, if you want the page height to flex to content (as it should), remove the height property from divisions containing text.
Something like this:
http://alt-web.com/TEMPLATES/2-col-fixed-flash-holder.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Dreamweaver and floating dialog

Dreamweaver and floating dialog. You see it on a lot of websites. I am not sure if this done in JavaScript or JQuery. I was wondering if someone can point me to a sample of doing this. I need to incorporated JavaScript and JQuery into my pages .

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
Also refer to the Documentation:
Dialog Widget | jQuery UI API Documentation
Nancy O.

Background div do not support floating divs

I've created quite simple construction, but it doesn't work in way I want to.
I have wrapper which do not wrap up the floating divs placed in it as it should -
it shrinks to base size (top and bottom corners) and stays like that while floating substances maintain previously defined positions - only without background...
Any suggestions how to fix this?
The construction looks round about like this:
<body>
<div> div tag with height: 5px; contains top corners for layout </div>
<div class= "opened div tag with backround attributes (color and borders)">
         <div>here comes the floating content (list with style set to: none;)
               I set it inside the div with background attributes to have floating content wrapped into background color and borders
        </div>
</div (here i close "background wrapper")>
<div> div tag with heightL 5px; contains bottom corners for layout </div>
</body>
Thanks.

This is a bit of a shot in the dark but try overflow: hidden; in the CSS rule for your wrapper?
It would be much easier to see the page.
Martin

Floating div pushes p content down

Hello,
I have created a floating div that a use to place pictures in
so that the text will flow around it. This all works fine.
However when i place the text within a <p></p>
tag, it forces the text below the picture and not flow around it.
Why might this be? Thanks

Impossible to say without seeing your code....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Si Fi" <[email protected]> wrote in message
news:eqil2v$d80$[email protected]..
> Hello,
>
> I have created a floating div that a use to place
pictures in so that the
> text
> will flow around it. This all works fine.
>
> However when i place the text within a
<p></p> tag, it forces the text
> below
> the picture and not flow around it.
>
> Why might this be? Thanks
>

Issues with floated DIV layout

Hi I am having problems with my floated DIV layout on the following site in I.E 6/7 but not 8.
I have tried display: inline thinking it may be a margin/padding issue?
http://www.sopasbeauty.co.uk
what am I doing wrong, should I be adding clearfloats to separate area's of the page??
Mark

First, open the page in DW and use FILE | Convert > XHTML 1.0 Transitional. Then try changing this -
<div class="boxes" id="box1">
<h1>Acrylic Nails</h1>

How do you get your old scores on your games when you transfer the games between devices ive signed into game center and my scores are there but when I open the games Im at 0 again

how do you get your old scores on your games when you transfer the games between devices ive signed into game center and my scores are there but when I open the games Im at 0 again

Did you do this?
iOS: Transferring information from your current iPhone, iPad, or iPod touch to a new device

Center and floating divs?

Similar Messages

Maybe you are looking for