Dreamweaver CS5 Getting Started CSS Div tags
I FOLLOWED THE GETTING STARTED TUTORIAL AND GOT THE TOP BANNER DIV, THE MAIN IMAGE DIV AND THE 3 COLUMN DIVSDIVA BUT THEN I TRIED TO CREATE A FOOTER LIKE DIV FOR COPYRIGHT AND CONTACT INFO BUT IT GETS PLACED AT THE END OF THE RIGHT COLUMN DIV. IN OTHER WORDS IT REMAINS IN LINE WITH THE 3 COLUMN DIVSDIVA, IT DOESNTDOESN'T FALL BELOW THEM
First off, thanks for the help, that was it!
Second, sorry about the ALL CAPS, i wasnt yelling, but iPhone does that. It does the same on the apple.com devforums. It locks my keyboard on ALL CAPS and its a pain to be unlocking the caps everytime i type a character .
Here is my code. Now im having the problem that it wont flush the main container div to the left and top. Ive set the top and left margins of the page property's body tag to 0. And i dont have a left margin in the css for example. What am i missing?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Santiapps.com Customizes iPhone iPad apps for you</title>
<style type="text/css">
.MainPageCSS {
font-family: "Lucida Console", Monaco, monospace;
font-size: 12px;
color: #666;
#main_image {
background-image: url(assets/santimotionblurr800.jpg);
background-repeat: no-repeat;
position: relative;
height: 251px;
width: 800px;
</style>
<link href="styles/santiapps_cs5.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
</style>
</head>
<body>
<div id="container">
<div id="banner"><img src="assets/backclipmask.jpg" width="800" height="116" alt="Santiapps | Tailor Made iPhone iPad Apps" /></div>
<div id="main_image"></div>
<div id="left_column">
<p><img src="assets/iLuvMeAppColumn.jpg" alt="iLuvMe" width="260" height="160" border="1" /></p>
<p>iLuvMe. This app is the perfect romantic gift that will show just how much you care. Its a thoughtful way to wrap your relationship's best memories into a cute little app he or she can hold in the palm of their hand and relive with the tap of a finger.</p>
<p>Need to <a href="PersonalizeLoveMe.html">configure</a> your app?</p>
<p><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=347034231&mt=8"><img src="assets/App_Store_Badge_EN.jpg" alt="Apple Store Link" width="200" height="100" border="0" /></a></p>
</div>
<div id="center_column">
<p><img src="assets/iDashBoardColumn.jpg" alt="iDashBoardCenter" width="260" height="160" border="1" /></p>
<p>iDashBoardCenter. This is a business management app that will keep you up to date with the current sales figures or any other linearly plottable data that you need to stay on top of remotely.</p>
<p>Read <a href="PersonalizeiDash.html">more</a> on how to set up your app.</p>
<p><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=373194449&mt=8"><img src="assets/App_Store_Badge_EN.jpg" width="200" height="100" border="0" /></a></p>
</div>
<div id="right_column">
<p><img src="assets/genericiphoneColumn.jpg" alt="Santiapps.com" width="260" height="160" border="1" /></p>
<p>SantiApps. We will create, program and customize any app in order to fit your needs. Got an idea for an app, drop us a line, you'll be surprised at how quickly and inexpensively you can have your own apps created for your own business or venture.</p>
</div>
</div>
</body>
</html>
Similar Messages
-
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. -
I am a novice working on a website... all the help is needed...
I have a div layout for my website but want to create content with pictures, text, links inside the div tags... I know that there is many options to do it.
What is the best way?
Tables?
Incorporating HTML?
I guess if I can get past this obstacles I am well on my way.
Thank you.
GC02Tables are not required for modern web page layouts.
Basic 1-column CSS Layout (view source in browser to see the CSS and HTML code)
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.shtml
Basic 2-column CSS Layout
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Tutorial: Creating your first web site in DW CS5 -
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Hi folks,
I have a quick questions which
should be easily resolved. I have created sites using Div
tags, the usual 'masterhead' / 'navi' / 'content' / 'footer'. The
Divs margins are set to 0 for for top and bottom. My querie is, in
IE the Divs 'butt up' to each other however in FF/Safari/Mozilla
there is a gap - is there a way to get the pages to appear the
same? I have tried playing with the margins and had no joy. I have
even attempted to create another Div tag to include the
'navi/content' to see if that would 'squeeze up' the elements -
that didn't work in the desired browsers either - any ideas?
Many thanks in advance> Murray *ACE* you may not remember but you advised me to
get some CSS
> books,
> which I have read through (one from Sitepoint &
another by aPress) - I
> have you
> to thank in gaining extra knowledge in this. However
don't I wont be
> asking any
> Q's - I'll just try not to ask any 'basic' ones now! ;)
I'm glad I could push you in this direction. The flash of
enlightenment is
such a wonderful experience!
> why on earth cant all browsers have the same protocols
and viewing
> behaviours??
They are trying, thankfully. As opposed to how it was a few
short years
ago, I think they all now agree that the W3C's specifications
are the law.
The problem is that sometimes those specifications are
ambiguous, and when
that happens there is the possiblity of different
interpretations....
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
==================
"tommysauce" <[email protected]> wrote in
message
news:f8akm4$olo$[email protected]..
> Hi guys,
>
> I was persistent in trying to solve this problem and
worked it out !! Oh
> happy
> days! ;p
>
> Question, why on earth cant all browsers have the same
protocols and
> viewing
> behaviours?? Although I must admit there is a certain
amount of
> satisfaction
> gained when you work stuff out!
>
> Murray *ACE* you may not remember but you advised me to
get some CSS
> books,
> which I have read through (one from Sitepoint &
another by aPress) - I
> have you
> to thank in gaining extra knowledge in this. However
don't I wont be
> asking any
> Q's - I'll just try not to ask any 'basic' ones now! ;)
> -
CS5 Getting Started Guide - Stuck - Framework not found.
I am using Xcode 3.2.3.
I am on page 26 of the "Getting started with the Adobe Indesign CS5 Products SDK" guide. I follow the instructions up to point 7 on page 27.
Then, when I build the project I get the following error: (http://codepad.org/OcB0myiH)
Ld ../Release/SDK/InDan.sdk.InDesignPlugin/Versions/A/InDan.sdk normal i386
cd /SDK2/build/mac/prj
setenv MACOSX_DEPLOYMENT_TARGET 10.5
/Developer/usr/bin/g++-4.0 -arch i386 -dynamiclib -isysroot /Developer/SDKs/MacOSX10.5.sdk -L/SDK2/build/mac/prj/../Release/SDK -L/SDK2/build/mac/prj/../release/packagefolder/contents/macos/libs -L../../../build/mac/release/packagefolder/contents/macos/libs -L/SDK2/build/mac/prj/../debug/packagefolder/contents/macos/libs -L/SDK2/build/mac/prj/../release/packagefolder/contents/macos/libs -L/SDK2/build/mac/prj/libs -F/SDK2/build/mac/prj/../Release/SDK -F../../../build/mac/release/packagefolder/contents/macos -F../../../build/mac/release/packagefolder/contents/Frameworks -F/SDK2/build/mac/prj/../debug/packagefolder/contents/macos -F/SDK2/build/mac/prj/../release/packagefolder/contents/macos -filelist /SDK2/build/mac/prj/build/InDan.build/Default/Release.build/Objects-normal/i386/InDan.sdk .LinkFileList -install_name ./InDan.sdk.InDesignPlugin/Versions/A/InDan.sdk -mmacosx-version-min=10.5 -dead_strip -no_dead_strip_inits_and_terms -Wl,-executable_path -Wl,../../../build/mac/Release/packagefolder/contents/macos/ -framework Carbon -lPublicPlugIn -lPublicPlugIn -lPublicPlugIn -framework InDesignModel -framework InDesignModel -framework InDan.sdk -framework InDan.sdk -single_module -o /SDK2/build/mac/prj/../Release/SDK/InDan.sdk.InDesignPlugin/Versions/A/InDan.sdk
ld: framework not found InDan.sdk
collect2: ld returned 1 exit status
Command /Developer/usr/bin/g++-4.0 failed with exit code 1
I have been trying to solve it for 5 hours now. It can't be that difficult.
Can someone help me out please.
ThanksThat's an odd looking error to see when creating a new project.
Did you create the project with Dolly?
Dolly should have set this up correctly.
Look in your Xcode project.
In the Groups & Files section you should have a file:
????NoStrip.cpp
where the ???? is the short name that you provided in Dolly.
That contains the method DontDeadStrip() that the compiler is looking for.
If it's not in the project, check your source folder and drag the ????NoStrip.cpp
into your project. -
Selectively overide css div tag properties (CS3)
I have created a:link, a:visited, a:hover and a:active div
tags for three different navbars. They are functioning correctly,
with separately linked words appearing grey when linked, grey after
being visited, orange when hovered upon and orange when active. I
have been unable to figure out how I can override the grey linked
and visited tags and have selected words within the navbars appear
as a new color when I want them to, on a page by page basis.
I tried making a class tag of the new type color and applying
it to the selected word using the the style menu in the properties
pallette. The formatting appears in the coding (whether properly or
not I do not know) but does not appear as the new color in the
design view or when saved and previewed in a browser. It simply
doesn't override the color attributes of the a:link and a:visited
tags. How can I achieve this? The selected words will change from
page to page with innumerable permutations.
Please help if you can. Heartfelt thanks await you.Pseudo-classes and container styles are what you need - here
are some
tutorials.
http://www.thepattysite.com/linkstyles1.cfm
http://www.projectseven.com/tutorials/pseudoclasses/index.htm
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
==================
"zipson" <[email protected]> wrote in
message
news:fm3c2e$l2f$[email protected]..
>I have created a:link, a:visited, a:hover and a:active
div tags for three
> different navbars. They are functioning correctly, with
separately linked
> words
> appearing grey when linked, grey after being visited,
orange when hovered
> upon
> and orange when active. I have been unable to figure out
how I can
> override the
> grey linked and visited tags and have selected words
within the navbars
> appear
> as a new color when I want them to, on a page by page
basis.
>
> I tried making a class tag of the new type color and
applying it to the
> selected word using the the style menu in the properties
pallette. The
> formatting appears in the coding (whether properly or
not I do not know)
> but
> does not appear as the new color in the design view or
when saved and
> previewed
> in a browser. It simply doesn't override the color
attributes of the
> a:link and
> a:visited tags. How can I achieve this? The selected
words will change
> from
> page to page with innumerable permutations.
>
> Please help if you can. Heartfelt thanks await you.
> -
None of my Css div tag rules are applying to my source code!
I created my divs in Html and they seemed to form, but nothing in CSS is working when I try to alter them. I have changed the background colors, the widths are all the same, and nothing is floating left right. I haven't tried changing text yet, but I am sure that won't work either. Please help my project is due tonight!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>VENTURE</title>
<link href="Moffett1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">VENTURE<img src="../Pictures/header web page.jpg" width="1200px" height="200px" alt=""/>
</div><!--"header"-->
<div id="toolbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Travel Tips</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Culture Corner</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Deals</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!--"toolba"r-->
<div id="main_article"><h1>Notables</h1><h3>Nautical Nonsense!</h3>
<p>Whether you want to learn how to sail or rent a privately crewed yacht,<br> the British Virgin Islands offers endless opportunities for seafaring adventures.<br> Explore coral gardens on a daytrip, island-hop via water taxi,<br> or simply kick back on deck and sunbathe. There a lot of things to do on a boat. You can fish, sight see, and bask in some sunlight on its upper decks.
</p>
</div><!--mainarticle-->
<div id="pic_of_the_week"><h1>PICTURE OF THE WEEK!</h1><h3> HOW TO BOAT IN STYLE!</h3><img src="../Pictures/british island.jpg" width="100%" height="" alt=""/>
</div><!--pic of the week-->
<div id="culture_corner"><h1>Culture Corner</h1><h3>How to make Corned Beef and Hash.</h3>
<ul>
<li>2 to 2 1/2 pound Corned-Beef Brisket*, recipe follows</li>
<li>1 tablespoon coarsely ground black pepper</li>
<li>1 teaspoon ground allspice</li>
<li>2 bay leaves</li>
<li>2 teaspoons kosher salt</li>
<li>1/2 pound diced carrots, approximately 4 small</li>
<li>1/2 pound diced onions, approximately 2 small</li>
<li>1 pound potatoes, peeled and chopped, approximately 3 medium</li>
<li>1/4 pound diced celery, approximately 2 stalks</li>
<li>1 small head cabbage, chopped, approximately 2 pounds</li>
</ul>
</div><!--culture corner-->
<div id="social_media"><p>Follow us on Instagram, Facebook, and Twitter!</p>
<img src="../Pictures/logo-instagram.jpeg" width="100" height="100"alt=""/>
<img src="../Pictures/facebook link.jpg" width="100" height="100" alt=""/>
<img src="../Pictures/twitter.jpg" width="100" height="" alt="100"/>
</div><!--social media-->
</div><!--"containe"r-->
</body>
</html> -
Where is the "Start New Row" check box when adding a div tag?
Ever since I updated Dreamweaver, when i add a div tag i no longer see the "Start A New Row" check box. The only checkbox i see is "Insert as a Fluid Element". Has this option been removed or has it been moved to a new location?
Hi MichaelMuirhead,
We have updated Fluid grid in 12.2 release of DW as well as in CC release.
Unlike before, Now DW smartly recognizes when a Fluid page is open and Converts Structure category to Fluid layout category.
I.e. when any element is inserted from Structure category on to a fluid page it will be inserted with required CSS to make it fluid, Unless user advices otherwise.
The idea is to enhance the support for almost all the structural elements as fluid elements, rather than just supporting Div as a fluid element. Hence, Insert Fluid Grid Layout Div Tag has been removed.
Steps to Insert a fluid element:
Select Insert > Layout.
Select the element that you want to insert. (i.e Div or Header or footer etc) 3. In the dialog that appears, enter a new class name, or enter a value for the ID. The selected element is inserted on the layout.
4) To insert a normal/non fluid element uncheck 'Insert as fluid element' check box in previous dialog.
Now to answer second part of your concern " Regarding missing "Start A New Row" check box"
All the elements inserted on a fluid page, start in a New row by default. If user wants to place the element in previous row then in can be achieved by clicking "Move Up a row" button which comes up on FG element HUD, after inserting that element.
Please refer Screen shot for clearer understanding.
For more details on update navigate to: http://helpx.adobe.com/dreamweaver/using/fluid-grid-layout-dreamweaver .html
Here is the link to new Video on how to design a FG page using new FG in DW 12.2.
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Please note that "Layout" Category in 12.2 has been renamed to more appropriate sounding "Structure" Category in DW CC.
Hope it helps.
Kindly revert for any issues or concerns.
Thanks,
Puneet -
Removing Line between Div tags
Hi all. I am new to this forum - have just started using DIV Tags and am getting a bit messed up!! I have a simple web page that has 2 DIV statements - on loads a menu bar I have created in Fireworks and is rihgt justified, the other is a header that contains an image and is centred. I have specified a coloured page background. Trouble is, I have a line between my two div tags that shows the background colour! I just cant get rid of it - I have tried the "Display - Inline" but that doesn't work. I have tried "Float Left" and "Right" - no-good. I dont know what to do! It could be that I am using these commands in the wrong place? There seems to be quite a lot of stuff on the net about this issue but I cant get any of the solutions to work for me. Please can anyone help?
Here is an example of my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #C90;
.menu {
BACKGROUND: #000000;
.header {
BACKGROUND: #000000;
</style>
</head>
<body>
<DIV class=menu align="right" >
<P> </P>
<P> </P>
</DIV>
<DIV class=header align= "center">
<P> </P>
<P> </P>
<P> </P>
</DIV>
</body>
</html>This is invalid markup.
<DIV class=menu align="right" >
</DIV>
<DIV class=header align= "center">
</DIV>
CSS should look like this:
body {
margin:0;
padding:0;
background: #C90;
color: #000;
#wrapper {
width: 970px; /**some value in px, % or ems**/
margin: 0 auto; /**with width, this centers page**/
background: #FFF;
border: 2px solid #000;
#menu {
background: #000;
text-align:right;
margin:0;
padding:0;
#header {
background: #000;
width: 970px;
margin:0 auto;
padding:0;
Then add the relevant selector ID (or .class) to your markup like so.
<body>
<div id="wrapper>
<div id="menu">
your menu code here
</div>
<div id="header">
your header here
</div>
<p>your content goes here<p>
<!--end wrapper--> </div>
</body>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
I need an email link ( I'm using Dreamweaver CS5) when I use the
Email Link on the right insert panel in Dreamweaver, it changes to the
same as my navigational links. I need the email link to look different
than my navigational links. I have a jpeg image, which includes a
background and text, the text being my email address. At this point I
will just type my email address. I will need coding and/or java script
codes to convert the information to an email address link.
What is Property Inspector does this have anything to do with
email links, if so where is it and how do I use it?
Need answers as soon as possible.
ThanksSnakEyezO2
The email info was perfect.
One more question regarding Dreamweaver CS5?
I have created a table and in the table is text and PayPal buttons. The table is
in an AP Div.
Under the table, I have another AP Div and in it is animation.
Another AP Div, in it credit card logos.
The problem: Under the table is too much space and then the AP Div.
How do I narrow the space between the table and the div tag under the table?
It looks good in "Design View" in Dreamweaver, but on the internet it looks
terrible - the large space under the table and then the AP Div.
Also, when I close Dreamweaver and reopen, the AP Div tags are overlapping in
the table, each time I open the page
I have to move the Divs out of the table.
The animation is not the problem, because I deleted the animation and there's
still a large gap.
WHAT the heck is wrong?
I've worked on this problem for hours and it's still looks awful.
Can you S-T-O-P the Table/Div Nightmares!
Thanks, Judy Long -
Sorry for all the questions but if I finally understand then
I will stop asking. Here is the html code for my site so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>ivoog! - New & used electronics,
apparel, collectibles, sporting goods & more at low
prices.</title>
<style type="text/css">
#ivoog {
margin: 15px auto 0;
body{
width: 950px;
margin: 0px auto;
</style>
</head>
<body>
<div id="ivoog"
style="background-image:url(Top%20111.gif); width:950px;
height:99px"><img src="ivoog.gif" style="width:252px;
height:74px; margin-left:10px; margin-top:11px"></div>
<div id="Search"
style="background-image:url(Search%20Box.gif); width:950px;
height:46px"></div>
<center><p><img src="slogan.gif"
style="width:637px; height:44px;
margin-top:-19px"></p></center>
<div id="Categories" style="background-image:url(LCB.gif);
width:236px; height:621px; margin-top:-13px"></div>
<div id="Quick Help" style="background-image:url(BB.gif);
width:475px; height:140px; margin-top:3px"></div>
<div id="Start Shopping"
style="background-image:url(MSB.gif); width:432px; height:339px;
left: 457px; top: 216px;"></div>
</body>
</html>
I want my "Start Shopping" div tag to be 5px to the right of
the "Categories" div tag. I CANNOT use the position:relative or
margin-top:example or something like that because if you open the
page in IE, and change the width of your browser then the Start
Shopping div tag will stay in the same place while everything else
moves. How can I make it so the tag will be 5px to the right from
Categories? What is the code and where do I put it? Please explain
to me like you would to a person who does not know HTML. Thank you!
Please help! I am TIRED! THANKS!<div id="ivoog"
style="background-image:url(Top%20111.gif); width:950px;
height:99px"><img src="ivoog.gif" style="width:252px;
height:74px;
margin-left:10px; margin-top:11px"></div>
<div id="Search"
style="background-image:url(Search%20Box.gif);
width:950px; height:46px"></div>
<center><p><img src="slogan.gif"
style="width:637px; height:44px;
margin-top:-19px"></p></center>
<div id="Categories"
style="background-image:url(LCB.gif); width:236px;
height:621px; margin-top:-13px; float:left;border:1px solid
red;"></div>
<div id="Start Shopping"
style="background-image:url(MSB.gif); width:432px;
height:339px; left: 457px; top:
216px;margin-left:5px;border:1px solid
green;"></div>
<div id="Quick Help" style="background-image:url(BB.gif);
width:475px;
height:140px; margin-top:3px;clear:both;"></div>
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
==================
"hahahaadobeman" <[email protected]> wrote
in message
news:[email protected]...
> Sorry for all the questions but if I finally understand
then I will stop
> asking. Here is the html code for my site so far:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
> "
http://www.w3.org/TR/html4/loose.dtd">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
> <title>ivoog! - New & used electronics,
apparel, collectibles,
> sporting
> goods & more at low prices.</title>
> <style type="text/css">
> #ivoog {
> margin: 15px auto 0;
> }
> body{
> width: 950px;
> margin: 0px auto;
> }
> </style>
> </head>
>
> <body>
> <div id="ivoog"
style="background-image:url(Top%20111.gif); width:950px;
> height:99px"><img src="ivoog.gif"
style="width:252px; height:74px;
> margin-left:10px; margin-top:11px"></div>
> <div id="Search"
style="background-image:url(Search%20Box.gif);
> width:950px;
> height:46px"></div>
> <center><p><img src="slogan.gif"
style="width:637px; height:44px;
> margin-top:-19px"></p></center>
> <div id="Categories"
style="background-image:url(LCB.gif); width:236px;
> height:621px; margin-top:-13px"></div>
> <div id="Quick Help"
style="background-image:url(BB.gif); width:475px;
> height:140px; margin-top:3px"></div>
> <div id="Start Shopping"
style="background-image:url(MSB.gif);
> width:432px;
> height:339px; left: 457px; top: 216px;"></div>
> </body>
> </html>
>
> I want my "Start Shopping" div tag to be 5px to the
right of the
> "Categories"
> div tag. I CANNOT use the position:relative or
margin-top:example or
> something
> like that because if you open the page in IE, and change
the width of your
> browser then the Start Shopping div tag will stay in the
same place while
> everything else moves. How can I make it so the tag will
be 5px to the
> right
> from Categories? What is the code and where do I put it?
Please explain to
> me
> like you would to a person who does not know HTML. Thank
you! Please help!
> I am
> TIRED! THANKS!
>
>
> -
I am having trouble to get my 3rd <div> tag to properly align (id=flash). It is left aligning to the edge of the "#content" <div> tag. Basically left aligning to the edge of my centered layout. Below is my code, can anyone shed some insight on what I am missing? I am new to not using tables.
thanks
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page Title</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFF;
margin: 0px;
padding: 0px;
#container {
margin: 0 auto;
width: 999px;
#content {
width: 100%;
#flash {
position: absolute;
top: 134px;
left: 216px;
</style>
</head>
<body>
<div id="container">
<div id="content"><img src="images/background.jpg" width="997" height="2400" />
<div id="flash">
This is left aligning
</div>
</div>
</div>
</body>
</html>You are using an absolute positioned div, which is positioned based on the page, not the div around it.
My recommendation would be to use margins to center it within the other div. Should look something like this:
#flash {
margin:0px auto;
That will set a 0 pixel range above and below, and an automatic range to the left and right.
Nick -
Dreamweaver cs5.5 - div tags won't float next to eachother
I have being trying to get 2 div tags to float next to eachother for hours! I've been messing with the float and messing with margins, but what ever i do the div is always somewhat under my other div tag. I want them completely side by side. I have tried changing the top and bottom margins but that doesn't work either. how can i get them side by side? One is called 'textbox' and the other 'imagewrapper'. The code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />
<!--embedded styles for this page only-->
<style type="text/css">
body {
margin:0;
padding:0;
font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";
#wrapper {
width: 1064px;
margin: 0 auto; /**with width, this centers page on screen**/
background: #FFF;
text-align:center;
/**this styles image container**/
#thumbs p {
float:center;
width: 50px;
height: 75px;
/**this styles caption text**/
font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
color: #666;
text-align:center;
border: 1px solid silver;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 18px;
margin-left: 5px;
/**recommend using same size images**/
#thumbs img {
width: 50px; /**adjust width to photo**/
height: 75px; /**adjust height to photo**/
/**CSS3 drop shadows**/
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
-khtml-box-shadow: 5px 5px 5px #666;
box-shadow: 5px 5px 5px #666;
/**float clearing**/
#thumbs:after{
display:block;
visibility:hidden;
height:0;
font-size:0;
content: " ";
clear: left;
#wrapper #thumbs #imagewrapper {
height: 362px;
width: 280px;
float: right;
margin-right: 720px;
#wrapper #thumbs #imagewrapper img {
height: 362px;
width: 280px;
#wrapper #textbox {
float: right;
height: 300px;
width: 600px;
margin-right: 70px;
.clearing {
clear:left;
height:px;
width: 100%;
</style>
</head>
<body>
<div id="wrapper">
<img src="product and website photos/header.png" width="1064" height="116" alt="header" />
<!--begin menu -->
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#home.html">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Boutique</a><ul>
<li><a href="#" class="MenuBarItemSubmenu">Women</a><ul>
<li><a href="bwt.html">Tops</a></li>
<li><a href="bws.html">Skirts/Shorts</a></li>
<li><a href="bwl.html">Trousers/Leggings</a></li>
<li><a href="bwa.html">Accessories</a></li>
<li><a href="bwd.html">Dresses</a></li></ul></li>
<li><a href="#" class="MenuBarItemSubmenu">Men</a>
<ul>
<li><a href="#">Tops</a></li>
<li><a href="#">Bottoms</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">Semi-Unique</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">T-shirt Shop</a><ul>
<li><a href="t-shirt shop.html">Men</a></li>
<li><a href="t-shirt shop.html">Women</a></li>
<li><a href="t-shirt shop.html">Unique</a></li>
</ul></li>
<li><a href="clearance.html">Clearance</a></li>
<li><a href="#">About</a></li>
</ul>
<h2> </h2>
<div id="textbox"></div>
<div id="thumbs">
<div id="imagewrapper"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!--end wrapper --></div>
<hr align="center" size="10" noshade="noshade" class="clearing" color="#999999" />
<div align="left">© 2012 your footer text goes here</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>If you want to position 2 divs - one on left and other on right, the float for your left div should say float: left; and for the one on the right the CSS should say float:right;
In your code, I see you want imagewrapper to come on right and textbox to come on left. But your float for BOTH these say right. This is where the issue lies.
You can combine float:left and float:right to achieve side by side divs provided the overall width (container width+padding+margin) of both divs is less than or equal to the width of the wrapper div.
In the OP's example:
#wrapper = 1064+0+0 = 1064px
#textbox + #imagewrapper = 600+70+280+720 = 1670px = float drop -
What must i do to get Insert Fluid Grid Layout Div Tag on dreamweaver?
Why an i not able to get the Insert Fluid Grid Layout Div Tag on dreamweaver?
I am using Creative CloudHi Leroy, this post in the Adobe Dreamweaver Team Blog may assist you with the updates to Dreamweaver: http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Let me know if you still require assistance. -
DW Beginner - Tables, Div Tags and CSS Confusion
Hi,
I am a beginner to DW. The layout I am designing is as follows:
First I have an overall "container" on the outside of my layout which I called "wrapper" and I made it using a div tag.
Next I made a table within or right after this "wrapper" div tag, which I called my "navbar".
After this table I made another table named left and right column (r:1 cz:2).
And lastly, another table, called "footer".
Now, I made a CSS for the div tag, no problem. But, when I go to make CSS for the tables, that's where it gets confusing.
For example, I went into my "navbar" table, selected on the "trail" <td>, and then tried to create a CSS for this particular table.
Problem: Why when setting my font or background or any other setting, are the other 2 tables changing also if I only assigned this specific area for the CSS navbar table? Am I selecting the wrong "trail" or is it because it is still entrapped somehow in the "wrapper" div tag, so it won't allow my new CSS settings? I would appreciate any help. This can really get confusing fast, especially for us beginners trying to learn.
Thanks,
SSince you're new to DW, I'm assuming you're new to HTML and CSS, too. So start by learning code basics first and you'll have a much easier time understanding DW.
Begin here:
HTML & CSS Tutorials - http://w3schools.com/
CSS layouts are much more flexible than tables. Below are some example of CSS layouts (no tables needed)
http://alt-web.com/TEMPLATES/I-page-with-floats.html
http://alt-web.com/TEMPLATES/2-col-fixed-layout.shtml
http://www.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
From Tables to CSS Web Design Part 2 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html
Good luck,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com
How To get Help Quickly in DW Forums
http://forums.adobe.com/thread/470404
Maybe you are looking for
-
How to install SAP NETWEAVER XI 3.0 on UNIX operating system
Hi, we are migrating from AIX to HP SUPERDOME on UNIX operating system. Can anyone give details about how to do it i.e about the installation and neccessary steps that need to take in the above problem
-
It doesn't recognize any of these: 1 iPod Classic. 1 iPod touch. 1 iPhone 3G. It doesn't appear in the Desktop, or Disk Utility, or iTunes. I connect any of these and nothing happens in the iMac or in the iPhone/iPods. No beeps, no hard drive noise,
-
RFC function to return number of records in a table
Hello, I am looking for a RFC function to return just the number of records in a SAP table. I don't want to use RFC_READ_TABLE since it takes too long when I query a big table. Any advices?
-
How can I enlarge the firefox window where the theme is displayed?
I would like to enlarge the area where the persona/theme is displayed at the top of my screen.
-
How to save inputText under a af:forEach/af:Iterator loop?
e.g. 11g, the following code: <af:forEach value="#{salaryList}" var="salary"> <af:inputText value="#{salary}" > </af:forEach> <af:commandButton text="Save Changes" action="#{backingBean.doSave}"/> How to read the user input in the inputText from scre