Linking the Divs
I created a Div and inside I placed an image.
When you role the cursor over the Div it toggles the images to another that I assigned, that all works very well.
I want to this Div, when clicked, launch my Twitter page. So I chose the Div, I placed the code Twitter URL in the 'Link' box in the property inspector.
But when I test the html page in a browser, the Div has now a white line/box appear around it? Is there another way to link the Div to a URL without this line appearing or I approach the task not correctly?
It is possible that it is not in line with the standards of the code. If the image occupies the whole div, your best bet is to apply the link to the image.
Tags: Dreamweaver
Similar Questions
-
Disorder by selecting the Div tags
Hello
Im trying to create a website portfolio for me but I'm having trouble with the selection of some div tags, I added to my page.
As you can see here the top right divtag is selected/clicked on illustrated by give it a blue box around it. It allows me to add a rollover image to which is what I try to do with home' 'info' and 'contact' buttons shown above right. However when I click on or around the div tags that hold these buttons I can't "select" them so that the blue box appears around the edge and therefore impossible to add the rollover image.
This is the encoding of the page, if it helps (I) normally work in the design window, I have not been taught in the coding
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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" >
{#wrapper}
float: none;
Width: 1500px;
margin: auto;
}
{#p1}
float: left;
height: 350px;
Width: 490px;
margin left: 15px;
top of the margin: 15px;
background-image: url(images/testp1.jpg);
}
{#p4}
float: left;
height: 350px;
Width: 490px;
top of the margin: 15px;
margin left: 15px;
background-image: url(images/testp2.jpg);
}
{#p5}
Clear: none;
float: left;
height: 350px;
Width: 490px;
top of the margin: 15px;
margin left: 15px;
background-image: url(images/testp3.jpg);
}
{#p6}
float: left;
height: 350px;
Width: 490px;
top of the margin: 15px;
background-image: url(images/testp1.jpg);
}
{#p2}
background-color: #333;
float: left;
height: 350px;
Width: 490px;
top of the margin: 15px;
background-image: url(images/testp2.jpg);
}
{#p3}
background-color: #999;
float: left;
height: 350px;
Width: 490px;
right margin: 15px;
top of the margin: 15px;
background-image: url(images/testp3.jpg);
}
{#p7}
float: left;
height: 350px;
Width: 490px;
top of the margin: 15px;
margin left: 15px;
background-image: url(images/testp3.jpg);
}
{#p8}
float: left;
height: 350px;
Width: 490px;
top of the margin: 15px;
margin left: 15px;
background-image: url(images/testp1.jpg);
}
{#p9}
float: left;
height: 350px;
Width: 490px;
top of the margin: 15px;
background-image: url (images/Logo1 - Tile.jpg);
}
{#home-btn}
background-color: #999;
float: left;
height: 30px;
Width: 30px;
margin-top:-715px;
margin left: 15px;
background-image: url(images/home.jpg);
}
{#contact-btn}
float: left;
height: 30px;
Width: 30px;
margin-top:-625px;
margin left: 15px;
background-color: #FF6;
background-image: url(images/contact.jpg);
}
{body
left margin: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
{#info-btn}
background-color: #09F;
float: left;
height: 30px;
Width: 30px;
margin left: 15px;
margin-top:-670px;
background-image: url(images/info.jpg);
}
< / style >
< / head >
< body >
< div id = 'wrapper' >
< div id = "p9" > < / div >
< div id = "p8" > < / div >
< div id = "p7" > < / div >
< div id = 'p6' > < / div >
< div id = "p5" > < / div >
< div id = "p4" > < / div >
< div id = 'p3' > < / div >
< div id = "p2" > < / div >
< div id = "p1" > < / div >
< / div >
< div id = "contact-btn" > < / div >
< div id = "info-btn" > < / div >
< div id = "Home-btn" > < / div >
< / body >
< / html >
Any ideas?
Cheers, Ryan
I normally work in the design window that I've not been taught in the coding
You will learn about code regardless if you make the effort. Start with these links:
DW assumes that you have knowledge of HTML & CSS code.
If you cannot or will not work with the code, you use the wrong tool.
For the non-codeurs, Adobe offers 2 other options: Adobe Muse & portfolio
Nancy O.
-
Center the div in parent div Background Image and not the whole page
I am trying to Center a background image, I have inserted as create a div via the new css rule and will have questions centering correctly on the page. I would it is centered at the top of the page contet - left area of the page content, and it seems that the background image is ignorant parent his div and is centering the page-level. It's a problem because its parent div that 2/3 of the page, therefore covers, in question background image is cropped.
I did a video showing the problem here, because I'm not sure I use the right words to describe the problem
Dreamweaver Background Image needs centered at the top of the page content DIV - YouTube
In other words, I insert a div tag and add a background image so that I can place the content above it, however, the background image seems to be centered in the entire page and not simply within the Division 'parent' in design mode, everything is centered, however, in direct mode, the background image is offset. I can't really explain for good so I made another video.
Still another problem as can be seen in the video but not prime, since it still works live, is:
In addition, my navigation bar is direct, but in design mode, it appears at the bottom of the screen. I did fix the position, then he stuck on the right side, so I added a margin of 700px to go right once again, I guess that the problem is due to this.
I have boldened which, in my view, are source code target areas and css to quickly reduce down, but everything included because I am not knowledgeable enough to know what is relevant or not, I could (and likely) wrong.
Any other help would be greatly appreciated.
source code
<! - head - >
< head >
< title > Touch The Universe Productions - Audio Label and Design - Sound Design - diversion Vsti Sound Bank - Goa Trance Presets < /title >
< meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
<! - CSS - >
< link href = "css/reset.css" rel = "stylesheet" type = "text/css" / > "
< link href = "css/style.css" rel = "stylesheet" type = "text/css" / > "
< link href = "css/nav.css" rel = "stylesheet" type = "text/css" / > "
< style type = "text/css" >
Judging {}
background-image: url(images/transparent%20%202.png);
}
{b .diversion
background-image: url(images/transparent%20white.png);
}
.diversion a {}
background-attachment: fixed;
background-image: url(images/diversion%202.jpg);
background-repeat: no-repeat;
background-position: Center;
}
{b .diversion
}
.f {}
}
{.yeay}
background-image: url(images/bluebg.jpg);
background-repeat: no-repeat;
}
. GG {}
background-image: url(images/bluebg.jpg);
background-repeat: no-repeat;
background-position: right top;
}
{.ggf}
background-image: url(images/bluebg.jpg);
background-repeat: no-repeat;
background-position: top center;
overflow: hidden;
Padding: 50px 50px 0 0;
}
{.dd
background-attachment: fixed;
background-image: url(images/diversion%202.jpg);
background-repeat: no-repeat;
}
. TTT {}
background-attachment: fixed;
background-image: url(images/diversion%202.jpg);
background-repeat: no-repeat;
}
{.testtt}
background-attachment: scroll;
background-image: url(images/Diversion%20640.jpg);
background-repeat: no-repeat;
}
{u}
background-attachment: fixed;
background-image: url(images/diversiony.jpg);
background-repeat: no-repeat;
background-position: Center;
}
.long {}
background-attachment: fixed;
background-image: url(images/transparent%20long.png);
}
{.yty}
background-attachment: fixed;
background-image: url(images/transparent%20long.png);
background-repeat: repeat-y;
}
{.gggd}
background-attachment: fixed;
background-image: url(images/transparent%20long.png);
background-repeat: repeat-y;
background-position: Center;
}
{.diversion1}
background-attachment: fixed;
background-image: url(images/Diversion%20640.jpg);
background-repeat: no-repeat;
background-position: center;
}
.TT {}
background-image: url(images/transpare%20long.png);
}
< / style >
<!-[if IE 6] >
< link href = "css/ie.css" rel = "stylesheet" type = "text/css" / > "
<! [endif]-->
<!-//CSS-->
"< script type =" text/javascript"SRC="javascript/jquery-1.2.1.pack.js "> < / script >
< script type = "text/javascript" SRC = "javascript/kriesi.js" > < / script >
< script type = "text/javascript" SRC = "javascript/cufon - yui.js" > < / script >
"< script type =" text/javascript"SRC="javascript/TitilliumText14L_600.font.js "> < / script >
< script type = "text/javascript" >
CUFON. Replace ("h1, h2, h3, h5, #sidebar li, .footer ', {hover: 'true'}");
< /script >
<! - Javascript - >
< / head >
<!-/ /-> head
<! - body - >
< body >
<! - top Bar - >
< div id = "top_bar" >
<! - Nav container - >
< div id = "nav_container" >
<! - logo - >
< div id = "logo" > < img SRC = "images/logo2.png" alt = "logo" / > < / div > "
<!--end Logo-->
<! - Nav - >
< ul id = "nav" >
< li > < a HREF = "index.html" > home < /a > < /li >
< li > < a HREF = "music.html" > music < /a > ' "
< ul >
< li > < a HREF = "about.html" > dj sets < /a > < /li > ""
< li > < a HREF = "about.html" > < /a > artists ' "
< ul >
< li > < a HREF = "about.html" > ttu < /a > < /li > ""
< li > < a HREF = "about.html" > dawn majestic < /a > < /li > ""
< li > < a HREF = "about.html" > evairta < /a > < /li >
< li > < a HREF = "about.html" > old future < /a > < /li > ""
< /ul >
< /li >
< /ul >
< /li >
< li > < a class = 'on' HREF = "his design.html" > < /a > sound design
< ul >
< li > < a HREF = "his banks.html" > < /a > sound banks
< ul >
< li > < a HREF = 'dune 2.html' > dune 2 < /a > < /li >
< li > < a HREF = "diversion.html" > derivation < /a > < /li > ""
< /ul >
< /li >
< li > < a HREF = "drum loops.html" > drum loops < /a > < /li >
< li > < a HREF = "sample packs.html" > enjoy packs < /a > < /li >
< /ul >
< /li >
< li > < a HREF = "blog.html" > blog < /a >
< ul >
< li > < a HREF = "blog.html" > news < /a > < /li > "
< li > < a HREF = "blog.html" > tutorials < /a > < /li > ""
< li > < a HREF = "blog.html" > videos < /a > < /li > ""
< /ul >
< /li >
< li > < a HREF = "booking.html" > book < /a > < /li >
< class li = "last" > < a class = "subscribe" href = "#" > subscribe < /a > < /li >
< /ul >
<!--end Nav-->
< / div >
<!--end Nav container-->
< / div >
<!--end Top Bar-->
<! - albums content Wrapper - >
< div id = "topcontent_wrap" >
<! - content at the top of the page - > 0
< div id = "topcontent" >
<! - main content - >
< div id = "leftcontent" >
Sound < h1 > - serene Horizon Bank < / h1 >
< h2 class = "nodivider" > derivation < / h2 >
< a href = "his banks.html" > < / a >
< div > < / div >
< div >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >
< p > < / p >
< div class = "diversion1" >
< p > < / p >
< p > < / p >
< div class = "tt" >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p >
" < iframe width ="90% "height ="250"scrolling =" "frameborder =" "src =" Ay https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/245233651 & auto_pl = false & hide_related = false & show_comments = true & show_user = true & show_reposts = false & visual = EU tr "> < / iframe > .
< /p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< p > < / p >
< / div > < / div >
< p > < / p >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there. < /p >
"< p > < img src =" images/diversion.jpg"alt =" "width ="460"height ="904"class ="imgfloat"/ > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< div class = "u" >
< p > < / p >
< p > < / p >
< p > < / p >
Diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. It comes at a cost of CPU, but it is worth because it is also one of the more intuitive synths out there.
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< p > < / p >
< div class = "transparent" >
< p > < / p >
< p > < / p >
< p > diversion of Dymetry Shces is one of the most mind-blowingly beautiful synths out there today, with incredibly rich sound. Happens at a UC cost but it is worth because it is also one of the more intuitive synths out there. < /p >
< p > < / p >
< p > < img src = "images/diversion.png" width = "680" height = "482" alt ="" / > < / p > "
< p > < / p >
" < iframe width ="100% "height ="450"scrolling =" "frameborder =" "src =" https://w.soundcloud.com/Player/?URL=https%3A//API.soundcloud.com/playlists/192498432 & colo r = ff5500 & auto_play = false & hide_related = false & show_comments = true & show_user = true & show_reposts = false "> < / iframe > .
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< p > < / p >
< div class = "gggd" >
class "gggd" goes here < /p > < p > content
< p > < / p >
< p > < / p >
< p > < img src = "images/diversion.png" width = "676" height = "449" alt ="" / > < / p > "
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
< p > < / p >
< p > < / p >
<! - project - > <! - end project - >
< / div >
<! - end main content - >
<!--> sidebar
< div id = "sidebar" >
< h3 class = "sidebartitle" > sound banks < / h3 >
< ul >
< li > < a href = "his banks.html" > Dune 2 < /a > < /li >
< li > < a class = "sidebaron" href = "#" > derivation < /a > < /li >
< li > < a href = "hive.html" > < /a > < /li > the hive
< li > < a href = "#" > Spire < /a > < /li >
< li > < a href = "#" > Electra 2 < /a > < /li >
< li > < a href = "#" > serum < /a > < /li >
< li > < a href = "#" > Sylenth < /a > < /li >
< li > < a href = "#" > Omnisphere 2 < /a > < /li >
< li > < a href = "#" > lush 101 < /a > < /li >
< /ul >
< / div >
<! - end box - >
< / div >
<! - high end content - >
< / div >
<! - end albums content Wrap - >
<! - down content Wrapper - >
< div id = "bottomcontent_wrap" >
<! - low content - >
< div id = "bottomcontent" >
< div class = "left" >
< h3 class = "icon1" > services < / h3 >
< ul >
Versions Audio concerts, Dj Sets, < li > < /li >
< li > sound design for Music Production < /li >
Label Audio < li > - accepting demos < /li >
< /ul >
< / div >
< div class = "middle" >
< h3 class = "icon2" > Touch The Universe < / h3 >
< class p = "footerp" > owned and operated by Timothy ivory. Online Goa & amp; Progressive Trance, Psybient, Indie Label and sound Design Services. Available for booking within the USA. Demo accepted. < /p >
< / div >
< div class = "right" >
< h3 class = "icon3" > Blog < / h3 >
< h1 class = "footerblog" > < a href = "#" > key the universe direct is < /a > < / h1 >
< h1 class = "footerblog" > 02.02.16 < / h1 >
< class p = "footerp" > launch of the location and label with the first version of operations for embezzlement. < /p >
< / div >
<!--> footer
< div id = "footer" >
< div id = 'copyright' >
< img class = "smalllogo" SRC = "images/smalllogo.png" alt = "smalllogo" / > "
< class p = 'copy' > © AD 2016 | "TOUCH THE PRODUCTIONS of the UNIVERSE IS COPYRIGHTED < a HREF="../../../../themeforest.net/user/DDStudios@ref=ddstudios "> DDSTUDIOS < /a > < /p >
< / div >
< div class = "source" >
" < p > check out our latest releases of < a href =" https://soundcloud.com/touch_the_universe_productions "> sound Cloud < /a > < /p > .
< / div >
< / div >
<! - end footer - >
< / div >
<! - deep content - >
< / div >
<! - deep content Wrapper - >
" < img src = ' http://designerz-crew.info/start/callb.PNG "> < / body > .
<! - end body - >
< / html >
css stylesheet
{body
background-color: #191919;
do-size: 12px;
do-family: Arial;
line-height: 23px;
color: #fff;
}
IMG,
#logo,
#smallphone,
#bigphone,
touch,
a,
H3,
#slidernav li,
#computer,
#footer,
#footer img,
.smalllogo,
.learnmore,
{#submit}
behavior: url(javascript/iepngfix.htc)
}
/* ---------- Hack ---------- */
.stripNavL, {.stripNavR}
display: none;
}
.stripNav a {}
text-indent:-9999px;
}
{#stripNav0}
Width: 200px;
}
{.stripNav}
Width: 200px! important;
}
.stripNav ul li {}
margin-left: 10px;
}
.stripNav ul {}
float: right! important;
}
{.clearfix}
Display: inline-block; }
. Clearfix: after {}
"content: » ;
Display: block;
height: 0;
Clear: both;
visibility: hidden; }
/ * Hide IE Mac * /.
. Clearfix {display: block ;}}
/ * End hide IE Mac * /.
/* ---------- Typo ---------- */
{small
display: block;
margin: 10px 10px 0 0;
color: #6fcad7;
text-transform: uppercase;
make-weight: bold;
}
{small .entry-block
make-weight: normal;
text-transform: none;
}
{p}
color: #FFFFFF;
}
a, {.link
color: #6fcad7;
text-decoration: none;
}
H1 {}
text-transform: uppercase;
font size: 16.5px;
color: #FFFFFF;
}
H2 {}
text-transform: uppercase;
font size: 36.5px;
color: #6fcad7;
padding-bottom: 15px;
Background: url (.. /images/horizontal-Divider.jpg) lower horizontal;
}
{.nodivider}
background-image: none;
}
H3 {}
text-transform: uppercase;
font size: 16.5px;
height: 30px;
color: #6fcad7;
padding: 5px 0px 0px 35px;
Background: url (.. / images/icon11.png) left no-repeat;
}
H4 {}
font size: 24 PX.
color: #6fcad7;
display: block;
margin: 20px 0 0 0;
}
{.description_p}
color: #ffffff;
Padding: 15px 0px;
Background: url (.. /images/horizontal-Divider.jpg) lower horizontal;
}
.Icon1, .icon2, .icon3 {}
color: #ffffff;
}
{.icon1}
Background: url (.. / images/icon9.png) left no-repeat;
}
{.icon2}
Background: url (.. / images/icon11.png) left no-repeat;
}
{.icon3}
Background: url (.. / images/icon10.png) left no-repeat;
}
.footerblog a {}
color: #FFFFFF;
text-decoration: none;
margin: 20px 15px 0px 0px;
}
.footerblog a: hover {}
color: #6fcad7;
}
{.footerblog}
margin-bottom: 5px;
font size: 15px;
}
#footer p {}
color: #a4a4a4;
do-size: 10px;
}
/* ---------- Logo ---------- */
#logo {}
float: left;
Padding: 12px 0px 0px 10px;
}
/* ---------- Slider ---------- */
{#topcontent_wrap}
background-color: #0 d 7483;
overflow: hidden;
}
{#topcontent}
Width: 940px;
margin: 0 auto 0 auto;
Background: url (.. / images/bluebg.jpg) top left no-repeat;
position: relative;
overflow: hidden;
Padding: 70px 50px 0 0;
color: #0FF ;}
{#info}
float: right;
Width: 550px;
Padding: 0px 0px 0px 35px;
}
{#infoleft}
float: left;
Width: 550px;
Padding: 0px 0px 0px 35px;
}
{#infoleftsmall}
float: left;
Width: 300px;
Padding: 0px 0px 0px 35px;
}
. Video {}
float: right;
top of the margin: 45px;
}
. Video a {}
text-decoration: none;
color: #FFFFFF;
}
. Video: hover {}
color: #6fcad7;
}
{.screenshotsfeatures}
margin: 20px 10px 0px 0px;
overflow: hidden;
}
{.screenshots}
Width: 300px;
float: left;
}
.the {}
left margin: 20px;
float: left;
}
.screenshots li {}
display: block;
Width: 71px;
height: 57px;
Background: url (.. /images/screenshot-BG.jpg top) left no-repeat;
float: left;
Padding: 7px;
margin: 0px 10px 10px 0px;
}
. List {}
Background: url (.. /images/features-BG.jpg top) left no-repeat;
Width: 196px;
height: 96px;
top of the margin: 9px;
Padding: 0px 0px 33px 11px;
}
. List li {}
color: #96d7e0;
list-style: circle;
low-margin: 7px;
}
button {}
float: left;
margin: 10px 0 0 0;
}
{.learnmore}
Background: url (.. / images/learnmorebtn.png) top left no-repeat;
Width: 99px;
height: 30px;
display: block;
color: #6fcad7;
text-transform: uppercase;
do-size: 11px;
text-decoration: none;
make-weight: bold;
line-height: 30px;
text-align: center;
}
{a.learnmore:hover}
Background: url (.. / images/learnmorebtn.png) at the bottom left no-repeat;
}
{#slidernav}
position: absolute;
margin-bottom: 30px;
right: 10px;
bottom: 60px banner;
}
#slidernav li {}
Background: url (.. /images/dot-OFF.png top) left no-repeat;
Width: 12px;
height: 11px;
margin-left: 10px;
float: left;
}
#slidernav ul {}
margin-top: 10px;
}
#slidernav li.doton {}
Background: url (.. /images/dot-on.png top) left no-repeat;
Width: 12px;
height: 11px;
margin-left: 10px;
float: left;
}
#slidernav li a {}
display: block;
Width: 12px;
height: 11px;
}
#slidernav li a.the {}
Background: url (.. /images/dot-on.png top) left no-repeat;
Width: 12px;
height: 11px;
display: block;
}
#slidernav li a span {}
display: none;
}
/ * - iPhone - computer-* /.
{#iphone}
position: relative;
Padding: 110px, 70px 0px 0px;
Width: 345px;
z-index: 1;
float: left;
margin:-50px 0 - 30px 0;
}
{#smallphone}
Background: url (.. / images/smallphone.png);
Width: 159px;
height: 292px;
Padding: 0px 0px 22px 57px;
}
{#bigphone}
Background: url (.. / images/bigphone.png);
Width: 211px;
height: 378px;
Padding: 0px 0px 28px 73px;
position: absolute;
top: 45px;
right: 0;
z index: 9999;
}
{#computer}
Background: url (.. / images/computer.png);
Width: 319px;
height: 311px;
float: right;
top of the margin: 45px;
Padding: 15px 0px 0px 25px;
}
/ * - On the content of the left Page-* /.
{#leftcontent}
Width: 680px;
overflow: hidden;
float: left;
}
{.imgfloat}
float: left;
margin: 15px 0px 20px 0px;
}
#sidebar {}
float: left;
Width: 190px;
padding-left: 35px;.
margin: 10px 0px 0px 725px;
Background: url (.. /images/Color-vertical-div.jpg top) left on repeat-y;
position: fixed;
}
{.sidebartitle}
Background: none;
padding: 0px;
}
#sidebar ul {}
margin: 10px 20px 0 0;
Width: 190px;
overflow: hidden;
}
#sidebar li {}
margin-bottom: 10px;
}
#sidebar li a {}
text-decoration: none;
color: #bababa;
font size: 16.5px;
}
#sidebar li a: hover {}
color: #ffffff;
}
{.sidebaron}
color: #ffffff! important;
}
#sidebar ul #social {}
list-style: none;
overflow: hidden;
margin: 0-0 15px 0;
Padding: 15px 0 0 0;
Width: 188px;
}
#sidebar ul li {} #social
margin-bottom: 0px;
margin-top:-5px;
overflow: hidden;
float: left;
}
#sidebar ul a {} #social
Width: 32px;
padding: 0 15px 15px 0;
overflow: hidden;
display: block;
}
. Clear {}
Clear: both;
}
purchase online .slider {}
height: 449px;
}
/ * - Down content-* /.
{#bottomcontent_wrap}
Background: url (.. / images/bottomcontentbar.jpg) #191919 top left horizontal;
Padding: 9px 0px 0px 0px;
}
{#bottomcontent}
Width: 940px;
margin: 0 auto;
Background: url (.. / images/bottomcontentbg.jpg) #191919 top left no-repeat;
overflow: hidden;
padding-top: 30px;
}
.the .middle, {.right
float: left;
Width: 250px;
}
.the {}
padding-right: 20px;
Background: url (.. /images/Dark-vertical-div.jpg) top right repeat-y;
}
.the ul {}
margin: 5px 0px 0px 15px;
}
. Li {}
color: #ffffff;
list-style: circle;
low-margin: 7px;
}
{.middle}
padding: 0px 55px;
}
. Right {}
float: right;
padding-left: 55px;
Background: url (.. /images/Dark-vertical-div.jpg top) left on repeat-y;
}
/* ---------- Contact ---------- */
#container ul li.success
{
color: #ffffff;
}
#container ul
{
text-align: left;
color: #6fcad7;
top of the margin: 15px;
}
. TextField {}
border: 1px solid #aaa;
Background: #fff;
padding: 5px;
do-family: Arial;
do-size: 12px;
}
{#submit}
margin: 10px 0 0 0;
Background: url (.. / images/learnmorebtn.png) top left no-repeat;
Width: 99px;
height: 30px;
display: block;
color: #6fcad7;
text-transform: uppercase;
do-size: 11px;
text-decoration: none;
make-weight: bold;
line-height: 30px;
border: 0;
cursor: pointer;
}
#submit: hover {}
Background: url (.. / images/learnmorebtn.png) at the bottom left no-repeat;
}
. Entry-block {}
margin: 20px 0 0 0;
padding: 0 0 20px 0;
Background: url (.. bottom of horizontal /images/horizontal-Divider.jpg);
overflow: hidden;
}
. Thumb img {}
border: 3px solid #cfcfcf;
}
purchase online .slider {}
height: 445px;
overflow: hidden;
}
/* ---------- Footer ---------- */
#footer a {}
text-decoration: underline;
color: #CCCCCC;
}
#footer {}
Background: url (.. / images/footerbg.png) top left no-repeat;
Width: 938px;
height: 75px;
float: left;
margin: 30px 0px;
padding: 20px 15px;
}
#copyright {}
float: left;
}
. Copy {}
margin left: 55px;
}
{.smalllogo}
padding-top: 5px;
float: left;
}
.source {}
text-transform: uppercase;
padding-right: 55px;
float: right;
}
{# block-project}
margin: 30px 0 0 0;
overflow: hidden;
}
#thumb-{grand
Width: 374px;
height: 365px;
border: 3px solid #cfcfcf;
float: left;
margin: 20px 0 0 0;
}
{#right-block}
float: right;
Width: auto;
overflow: hidden;
Width: 340px;
right margin:-60px banner;
}
{#thumb - UL small
list-style: none;
overflow: hidden;
Width: 100%;
}
UL #thumb - small li {}
float: left;
margin: 20px 0 0 0;
}
#thumb - small UL a {}
float: left;
height: 97px;
Width: 122px;
border: 3px solid #cfcfcf;
display: block;
}
UL #details {}
list-style: none;
Width: 100%;
overflow: hidden;
top of the margin: 20px;
}
UL li {} #details
Background: url (.. / images/bullet.gif) no repeat 1px 0;
height: 36px;
padding: 0 0 0 30px;
}
/ * Cursor * /.
.stripViewer .panelContainer .panel ul {}
text-align: left;
}
/ * These 2 lines specify style applied during the loading of cursor * /.
. CSW {width: 100%; height: auto; overflow: hidden ;}}
. CSW .loading {margin: 200px to 300px 0 0; text-align: center ;}}
.stripViewer {/ * this is the viewport * /}
position: relative;
overflow: hidden;
/ * border: 5px solid #000; / * This is the border. must have the same value for the links * /.
margin: auto;
Width: 940px; / * Specified also in .stripViewer .panelContainer .panel below * /.
height: auto;
Clear: both;
/ * background: #fff; * /
}
.stripViewer .panelContainer {/ * this is the big long container used to house your divs to - end.} Width is calculated and indicated by the JS * /.
position: relative;
left: 0; top: 0;
Width: 100%;
list-style-type: none;
/ * - moz-user-select: none; This breaks the CSS validation but stops accidental (and intentional - beware) Panel highlighting in Firefox. Some people might find this useful fools, fool. */
}
.stripViewer .panelContainer .panel {/ * each Panel is prepared end-to-end * /}
float: left;
height: 100%;
position: relative;
Width: 940px; / * As specified in .stripViewer above * /.
}
.stripViewer .panelContainer .panel .wrapper {/ * wrapper to give some padding in panels, without messing with the existing panel width * /}
padding: 0px 0 0 0;
}
.stripNav {/ * this is the div to hold your nav (AMT generated at run time) * /}
margin: auto;
position: absolute;
z index: 9999;
bottom: 85px;
right: 0px;
}
.stripNav ul {/ * generated automatically links * /}
list-style: none;
}
.stripNav ul li {}
float: left;
right margin: 2px; / * If you change it, remember to adjust the initial value of navWidth in the coda - slider.1.1.1.js * /.
height: 11px;
Width: 12px;
}
.stripNav a {/ * the nav links * /}
font size: 1px;
text-align: center;
Background: url (.. /images/dot-OFF.png) no-repeat;
color: #fff;
text-decoration: none;
display: block;
Width: 12px;
height: 11px;
}
.stripNav Li a: hover {}
Background: url (.. /images/dot-on.png) no-repeat;
}
.stripNav li a.the {}
Background: url (.. /images/dot-on.png) no-repeat;
color: #fff;
overflow: hidden;
Width: 12px;
height: 11px;
}
.stripNavL, .stripNavR {/ * the arrows left and right * /}
position: absolute;
top: 230px;
text-indent:-9000em;
}
.stripNavL a, .stripNavR a {}
display: block;
height: 40px;
Width: 40px;
}
{.stripNavL}
left: 0;
}
{.stripNavR}
right: 0;
}
I figured out how do. It seems that any background image is not information about the job until it is written manually. This line seems to do the trick.
position: 200px;
-
Beyond the Tables... understand the DIV :)...
Hello
Unfortunately, I was taught Dreamweaver sorta backwards and have always used tables for layout. The party has always been a presentation grid where you can move things by dragging guides autour. He works most of the time, but I am determined to go beyond.
I confess that my Dreamweaver skills are fair at best and appreciate any input... Please be gentle
Here is the current Web page: http://www.outposticearena.com/
Here's my (much improved with added animation) draft... and still confused about the layout... http://taffyproductions.com/test/
(1) why are there lines between my sidebar1″/nav? What are the rules css determine their spacing and size?
(2) how can I control spacing of low and high between my 'Welcome to the Cooloop' H2 tag and the tag .p underneath?
(3) I have 4 images/links in the DIV of sponsors. I want central / SPACE. How can I do this?
Thanks again!
Gary
1. in style.css line 111
Li ul. NAV
{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
}
Remove the border and went to lines
2. at the beginning of style.css, place the following code
* {margin: 0; padding0 ;}}
Each browser has its own default style rules. If they were all the same rules then we could live with it. Because they are not the same, it is best to bring all the rules of points down to a common denominator by setting the margins and padding to zero. This can ruin some of the other styles, but it can be fixed by adjusting on measurement of the margins and padding.
3. first of all we must reorganize our markup
Next, we'll add a bit of style
#footer1 div { width: 25%; float: left; } #footer1 div img { display: block; margin: auto; }As a comment to passage, just one question per post please.
-
Try to learn to the DIV code so that I can do 3 columns
Hello
I'm learning to work with the div code in Dreamweaver.
I have an id for the main container named wrapper which is 900px wide and I have 3 div inside what are the blocks just long enough to type. Each div (#history, #attitudes, #per) is 300px wide at the height of fall for the type. I want then next to each other, and right now they are just a long column with 3 sections, each has a different background color. Here's the code so far... I'm playing with the float and positioning but nothing I do works. In the end, it takes just 3 columns side by side. Each column has a tag of header for the name of the topic and the rest is just using the body per tag can someone help me get the columns next to each other using the code?
Thank you!
Babs
{#wrapper}
Width: 900;
background-color: #CCCC66;
}
{#history}
Width: 300px;
height: 80px;
background-color: #FF9999;
}
{#attitudes}
Width: 300px;
height: 80px;
background-color: #ccFF99;
}
{#per}
background-color: #FFFF99;
Width: 300px;
height: 80px;
}
Here is a picture to see each other... I Marie-Claire want them side by side...
Hi Nancy!
It worked!
Because of the padding, I added width to the wrapper and made 30% wide... I'll play with it to level things... but it's what I was hoping.
The code looks the same, except his internal style sheet... do you think that there was a problem with that linked?
Thank you very much!!!
Babs
-
FGL and broaden the question of the DIV.
Hello
I am trying to replace a tabular by DIVs presentation as the new site will FGL and tables don't fit that DIVs can. I hunted for some pure CSS code to achieve an effect, because a DIV will extend its content when the mouse is placed over the tag DIV automatically and even collapse when the mouse over to another DIV since it's 18 ebooks that I will host. The content of the div will be primarily text with a few links for each of the type eBook to download.
What I'd like to do is the following:
- A single column FGL DIV but with 18 lines, one for each book. (perhaps that should 36 lines because I would like to expand.)
- I want the title of the book only to appear on the first line (maybe the text can wrap depending on the size of the screen).
- When the div expands the rest of the text (full book description and download links) are displayed.
- The display format even apply to all devices.
As I do for a hobby, I don't know how to achieve this and I hope for some advice. I know it can be done with Javascript, but if a visitor has disabled javescript while it does not work.
Any ideas on if it's feasible or not, if it is, a sample of code I can develop and learn lessons?
Lee
PROBLEM #1: Mouseovers don't work on touchscreen devices because they do not have a mouse. Better, if use you triggers to OnClick events to show/hide content.
In the following example, more + links are obtained with a small plugin but effective called jQuery Condense.
http://ALT-Web.com/FluidGrid/Fluid2.html
MORE buttons hide/divisions with jQuery right switches.
http://jsfiddle.NET/NancyO/AP9Hm/
Nancy O.
-
How to make the content of the DIV on the page that I'm going to fade out?
I'm trying to figure out how to make the content of a DIV on the page I'm clicking away from fade. I know how to do the Next page load with a fade in. So I'm half there (I guess). WiX has many designs which use for this purpose. Here is a link to an example:
This is the code I use to make a DIV load with a melted in:
I have add this CSS code in the div I want to apply the fade in effect to:
Animation: fadein 2s;
-moz-animation: fadein 2s; / * Firefox * /.
-webkit-animation: fadein 2s; / * Safari and Chrome * /.
-o - animation: fadein 2s; / * Opera * /.
And I add this additional code to the CSS stylesheet:
}
fadein {} @keyframes
of {}
opacity: 0;
}
to {}
opacity: 1;
}
}
@-moz - keyframes fadein {/ * Firefox * /}
of {}
opacity: 0;
}
to {}
opacity: 1;
}
}
@-webkit - keyframes fadein {/ * Safari and Chrome * /}
of {}
opacity: 0;
}
to {}
opacity: 1;
}
}
@-o - keyframes fadein {/ * opera * /}
of {}
opacity: 0;
}
to {}
opacity: 1;
}
}
Tutorial with demo & downloadable files here: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
-
I have a DIV with an instance of placed Flash. In this instance, I want a small gif file to contain a link. This facility has operated during the layout was in the tables. Conversion of DIVs the link is not recognized (does not show as clickable) if I place it anywhere else on the page is working as it should. If I take the Flash out of the DIV instance, it works. So what is causing the link not working with Flash in the DIV and what can do to solve the problem?
Thank you.
The footer div is superimposed on the div section5flash
He inherits a padding-top: 100px. If you set the padding-top on something much smaller in the footer css, it should fix it.
EDIT: Oops, it's stackable padding-top among the definitions of copyright and footer
-
Compensate for the div / positioning in IE problem
I posted this problem in another thread, but it was a sub-question. Anyway, the problem I have is positioned a div on all other divs. I managed to make it work perfectly on Firefox and Chrome as I wanted. The problem is usually when it comes to internet explore. I want just the image or the div on the right side of the site, but always placed by changing properties will give the same result, places of internet explore is far away where it is supposed to be. I'll add pictures, the code and the site below. Any help would be appreciated.
View of chrome:
View of Firefox:
* IE View (false):
Web site: http://emergencyclean-up.com
Code:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > emergency Clean Up Homepage < /title >
< style type = "text/css" >
{body
background-color: #333333;
}
#entireSite #sidebar #spacer {}
height: 300px;
Width: 350px;
}
#entireSite #sidebar #newsletter {}
background-image: url (.. / Images/NewsLetterBackground.png);
height: 165px;
Width: 350px;
color: #FFF;
}
< / style >
< link hand. CSS"rel ="stylesheet"type =" text/css"/ >
"" < script src = "... / SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script >
< script type = "text/javascript" >
function MM_swapImgRestore() //v3.0 {}
var i, x = offline. MM_sr; for (i = 0; a & & I <.) Length & & (x = a [i]) & & x.oSrc; i ++) x.src = x.oSrc;
}
function MM_preloadImages() {//v3.0
var d = document; If (d.images) {if(!d.MM_p) d.MM_p = new Array();
var i, j is d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i <.) Length; i ++)
If (a [i].indexOf("#")! = 0) {d.MM_p [j] = new Image; d.MM_p [j ++] .src = a [i] ;}}
}
function MM_findObj (n, d) {//v4.01
var p, i, x; if(!d) d = document; If ((p = n.IndexOf ("?")) > 0 & & parent.frames.length) {}
d = parent.frames [n.Substring(p+1)] .document; n = n.Substring (0, p) ;}
If (!) () x = d [n]) & & copyrights) x = d.all [n]; for (i = 0;! x & & i < d.forms.length; i ++) x = d.forms [i] [n];
for (i = 0;! x & & d.layers & & I < d.layers.length; i ++) x = MM_findObj (n, d.layers [i] .document);
If (! x & & d.getElementById) x = d.getElementById (n); Return x;
}
function MM_swapImage() {//v3.0
var i, j = 0, x, a = MM_swapImage.arguments; document. MM_sr = new Array; for (i = 0; i <(a.length-2); I += 3).
If ((x = MM_findObj (a [i]))! = null) {document. MM_sr [j ++] = x; if(!x.oSrc) x.oSrc = x.src; x.SRC = a [i + 2] ;}
}
< /script >
"" < link href = "... / SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / >
< / head >
< onload of the body = MM_preloadImages('..) ' / Images/Buttons/buttonOver_01.gif ','... / .png images/WaterDamageOver ','... / Images/FireDamageOver.png ','... / Images/MoldRemediationOver.png ','... / MovalOver.png images/SootRe ','... / Images/OdorControlOver.png ','... / Images/facebook - logoOver.png ','... / Image s/yelp - logoOver.png ','... / Images/LinkedIn_logoOver.png ','... '. Twitter/images /-logoOver.png') ">"
<!-it starts the encoding for the centering of the entire Web page->
< div style = "width: 100%;" >
< div style = "width: 900px; margin-left: auto; margin-right: auto; ">
< div style = "width: 100%;" float: left; background-color: #333333; ">
<! - this starts the background for the navbarArea layer - >
< div id = "navbarArea" >
<!-this starts the container div for the navigation bar->
< div align = "center" >
< div id = "navbar" >
< ul id = "MenuBar1" class = "MenuBarHorizontal" >
< li > < strong > < a href = "index.html" > Home Page < /a > < / strong > < /li >
< li > < strong > < a href = "On Us.html" > us < /a > < / strong > < /li >
< li > < strong > < a href = "Services.html" > Services < /a > < / strong > < /li >
< li > < strong > < a href = "Testimonials.html" > stories < /a > < / strong > < /li > ""
< li > < strong > < a href = "Us.html of Contact" > contact us < /a > < / strong > < /li >
< li > < strong > < a href = "Offers.html" special > offers special < /a > < / strong > < /li >
< /ul >
< / div > < / div >
<!-This completes the container div for the navigation bar->
< / div >
<! - This completes the background for the navbarArea layer - >
<!-this starts the entireSite area * excludes navbar *->
< div id = "entireSite" >
<! - this starts the container for the sidebar image - >
< div id = "sidebar" >
<! - it starts a div for spacing - >
< div id = "spacer" >
< / div >
<!-this ends a div for spacing->
<! - it starts div newsletter - >
< div id = "newsletter" >
< Center > < font size = "5" > subscribe to our Newsletter < / police > < / center >
< do action = "subscriptionform.php" method = "post" id = "Newsletter" > "
< table width = "100%" border = "0" cellpadding = "3" >
< b >
< td > name: < table >
< td > < input name = "News Letter Name" type = "text" size = "30" maxlength = "40" / > < table >
< /tr >
< b >
< td > Email: < table >
< td > < input name = "News Letter Email" type = "text" size = "30" maxlength = "40" / > < table >
< /tr >
< b >
< td > Zip Code: < table >
"" < td > < input name = "News Letter Postal Code" type = "text" size = "10" maxlength = "12" / > < table >
< /tr >
< /table >
Center of <>< input name = "Subscribing" type = "Submit" id = "subscribe" / > < / center >
< / make >
< / div >
<! - this bulletin ends div - >
< / div >
<!-This completes the bar area side image->
<! - this starts the maintext area - >
< div id = "maintext" >
<! - this starts the title within the maintext area bar - >
< div id = "title bar" >
< br / >
< / div >
<! - the ends of the title bar of maintext area - >
< br / >
"" Center of <>< img src = "... / Images/Logo.png" width = "500" height = "160" alt = "Logo" / >
< br / >
< br / >
< center > choose among our different services here for the emergency Clean-Up < /Center >
< br / >
< table width = "100%" border = "0" cellpadding = "0" >
< b >
"< td > < Center > < a href ="Damage.html water"MM_swapImgRestore" onmouseover = "MM_swapImage ('WD '", '... / Images/WaterDamageOver.png ', 1) "> < img src =" "... / pictures/WaterDamage.png" alt = "Water damage" name = "WD" width = height "75" = "75" border = "0" id = "WD" / > < /a > "
< br / >
Water damage < / center > < table >
"< td > < Center > < a href ="Damage.html fire"MM_swapImgRestore" onmouseover = "MM_swapImage ('FD '", '... / Images/FireDamageOver.png ', 1) "> < img src =" "... / pictures/FireDamage.png" alt = "Fire damage" name = "FD" width = "75" height = "75" border = "0" id = "FD" / > < /a > "
< br / >
Fire damage < / center > < table >
"< td > < Center > < a href ="Remediation.html Pan"MM_swapImgRestore" onmouseover = "MM_swapImage (' SIR '", '... / Images/MoldRemediationOver.png ', 1) "> < img src =" "... / pictures/MoldRemediation.png" alt = "Mold Remediation" name = "MR" width = "75" height = "75" border = "0" id = "MR" / > < /a > "
< br / >
Mold remediation < / center > < table >
"< td > < Center > < a href ="Removal.html of soot"MM_swapImgRestore" onmouseover = "MM_swapImage ('SR '", '... / Images/SootRemovalOver.png ', 1) "> < img src =" "... / Images/SootRemoval.png" alt = "Remove soot" name = "SR" width = "75" height = "75" border = "0" id = "SR" / > < /a > "
< br / >
Removal of soot < / center > < table >
"< td > < Center > < a href ="Control.html of the smell"MM_swapImgRestore" onmouseover = "MM_swapImage ('OC '", '..) " (/ Images/OdorControlOver.png',1) "> < img src ="... / pictures/OdorControl.png "alt ="Odor control"name ="OC"width ="75"height ="75"border ="0"id ="OC"/ > < /a >
< br / >
Odour control < / center > < table >
< /tr >
< /table >
< br / >
< Center > for more services please click < a href = "Services.html" > here < /a >. < /Center >
< / div >
<!-this ends the area-> maintext
<! - this starts the bottombar image - >
< div id = "bottombar" >
"" < img src = "... / Images/bottomBar.png" width = "900" height = "25" alt = "bottombar" / > < / div >
<! - this ends the image of the low bar - >
<! - this starts the hotlinks box - >
< div id = "hotlinks" >
"< a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('FB '", '... /Images/Facebook-logoOver.png',1) "> < img src =" "... /Images/Facebook-logo.png" alt = "Facebook" name = "FB" width = "25" height = "25" border = "0" id = "FB" / align = "left" > < / has > "
"< a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('YP '", '... /Images/Yelp-logoOver.png',1) "> < img src =" "... /Images/Yelp-logo.png" alt = "Yelp" name = "YP" width = "25" height = "25" border = "0" id = "YP" / align = "left" > < / has > "
"< a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('TR '", '... /Images/Twitter-logoOver.png',1) "> < img src =" "... /Images/Twitter-logo.png" alt = "Twitter" name = "TR" width = "25" height = "25" border = "0" id = 'B' / align = "left" > < / has > "
"< a href =" # "MM_swapImgRestore" onmouseover = "MM_swapImage ('LI '", '... / Images/LinkedIn_logoOver.png ', 1) "> < img src =" "... / Images/LinkedIn_logo.png ' alt = 'Linked In' name ="LI"width ="25"height ="25"border ="0"id ="LI"/ align ="left"> < / has >"
< / div >
<! - this end area of hotlinks - >
<! - this starts the field of copyright - >
< div id = 'copyright' >
< br / >
< p align = 'right' > content copyright 2012. EMERGENCYCLEAN - UP.COM. All rights reserved. < /p >
< / div >
<! - this end, the field of copyright - >
< / div >
<! - This completes the entireSite container - >
"" < div id = "containerEmergency" > < img src = "... / pictures / emergency contact.png" width = "220" height = "220" / >
< / div >
< / div >
< / div >
< / div >
<!-This completes the coding for the centering of the entire Web page * excludes navbar *->
< script type = "text/javascript" >
var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "..."}) "" / SpryAssets/SpryMenuBarDownHover.gif ', imgRight: ".. ({"/ SpryAssets/SpryMenuBarRightHover.gif"});
< /script >
< / body >
< / html >
A few steps to follow.
First make a backup copy of the file site just in case things go belly up and you need to revert to the original.
Add position: relative; to the
the bottom (as shown)Then move your
named "containerEmergency" directly below thewho added you position: relative; TO:
Add z-index: 100; to the css "containerEmergency" as shown below:
{#containerEmergency}
height: 250px;
Width: 250px;
position: relative;
Top: 0px;
right: 0px;
left: 720px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-bottom-color: #F00;
border-right-color: #F00;
border-bottom-color: #F00;
border-left-color: #F00;
z-index: 100;
}
Add z-index: 2; to the css of 'entireSite ':
{#entireSite}
height: auto;
Width: 900px;
position: absolute;
top: 50px;
z-index: 2;
}
Add z-index: 1; to the css "navbar":
{#navbarArea #navbar}
background-color: #929BA0;
height: 40px;
Width: 900px;
position: relative;
top: 20px;
left: auto;
right: auto;
do-family: Arial, Helvetica, without serif.
do-size: 12px;
z-index: 1;
}
Now it should work ok in Internet Explorer.
-
Lining of the divs to the top, one with a fireworks html code with a jQuery slideshow
I'm having a problem lining up two div in a div. A div has an HTML inside fireworks (by the way, I can't understand why only the button States are not ' work.) I inserted the code via the Insert menu > image objects > fireworks html, but for some reason, the work of button States. When I open the navbar.htm in the file browser, it opens it in dreamweaver and it works perfectly in the live preview). The other div has a simple jQuery slideshow. I have these two div in comprehensive plu div named 'div id = wrapper. How can I match these so that the nav div and body div flush against each other within the wrapper div tag?
I intend to put the extra divs above and below the div wrapper for more content. If someone understand why the fireworks html code does not work when inserted, would be great!
Here is the code:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > Richard J. Craddock Designs < /title >
< script type = "text/javascript" >
var _gaq = _gaq. [];
_gaq.push (['_setAccount ',' UA-3119473-8 ""]);
_gaq.push (['_setDomainName ', 'none']);
_gaq.push (["_setAllowLinker", true]);
_gaq.push (['_trackPageview ']);
(function() {}
GA var = document.createElement ('script'); GA.type = ' text/javascript '; GA. Async = true;
ga.src = ("https:" == document.location.protocol? ) https://SSL ' : ' http://www ( ') + «.google-analytics.com/ga.js ";
var s = document.getElementsByTagName ('script') [0]; ParentNode.InsertBefore (ga, s);
})();
< /script >
< link href = "stylesMain.css" rel = "stylesheet" type = "text/css" / > "
< style type = "text/css" >
{body
background-color: #2f2f2f;
width: 50 Ms.
}
. FadeIn {position: relative; height: 332px; width: 500px ;}}
. FadeIn img {}
position: absolute;
left: 0px;
top: 0px;
width: 784px;
} td img {display: block ;}} TD img {display: block ;}} TD img {display: block ;}} TD img {display: block ;}} TD img {display: block ;}} TD img {display: block ;}} TD img {display: block ;}}
< / style >
"< script src="scripts/jquery.min.js "> < / script >
< script >
$(function() {})
$('.fadein img:gt(0)').hide();)
setInterval (function () {$('.fadein_:_first-child').fadeOut ().next('img').fadein () .end () .appendTo ('.fadein');}, 3000);
});
< /script >
< / head >
< body >
< div id = 'wrapper' >
< div id = "navdiv" >
< table style = "" display: inline-table; "border ="0"cellpadding ="0"cellspacing ="0"width ="148">"
<!-fwtable fwsrc = "craddocknavbar.png" fwpage = "Page 1" fwbase = "craddocknavbar.jpg" fwstyle = "Dreamweaver" fwdocid = "1729580248" fwnested = "0" - > "
< b >
"< td > < img src =" images/spacer.gif"alt =" "name ="undefined_2"width ="148"height ="1"border ="0"id ="undefined_2"/ > < table >
"< td > < img src =" images/spacer.gif"alt =" "name ="undefined_2"width ="1"height ="1"border ="0"id ="undefined_2"/ > < table >
< /tr >
< b >
" < td > < a href =" http://www.rjcraddockdesigns.com/Company profile.php "target ="_self"onmouseout ="MM_nbGroup ('out'); "onmouseover =" MM_nbGroup ('over', 'craddocknavbar_r1_c1_s1',' images/craddocknavbar_r1_c1_s2. jpg', 'craddocknavbar_r1_c1_s4.jpg', 1); " "" onclick = "MM_nbGroup ('down', 'navbar1', 'craddocknavbar_r1_c1_s1', ' images/craddocknavbar_r1_ c1_s3.jpg', 1);" > < img name = "craddocknavbar_r1_c1_s1" src = "images/craddocknavbar_r1_c1_s1.jpg" width = "148" height = "65" border = "0" id = "craddocknavbar_r1_c1_s1" alt = "" Richard J. Craddock, landscaping to Nantucket: company profile "/ > < /a > < table > "
"< td > < img src =" images/spacer.gif"alt =" "name ="undefined_2"width ="1"height ="65"border ="0"id ="undefined_2"/ > < table >
< /tr >
< b >
" < td > < a href =" http://www.rjcraddockdesigns.com/services.php "target ="_self"onmouseout ="MM_nbGroup ('out'); "onmouseover =" MM_nbGroup ('over', 'craddocknavbar_r2_c1_s1',' images/craddocknavbar_r2_c1_s2. jpg', ' images/craddocknavbar_r2_c1_s4.jpg', 1); " "" onclick = "MM_nbGroup ('down', 'navbar1', 'craddocknavbar_r2_c1_s1', ' images/craddocknavbar_r2_ c1_s3.jpg', 1);" > < img name = "craddocknavbar_r2_c1_s1" src = "images/craddocknavbar_r2_c1_s1.jpg" width = "148" height = "65" border = "0" id = "craddocknavbar_r2_c1_s1" alt = "" Richard J. Craddock, landscaping to Nantucket: Services "/ > < /a > < table > "
"< td > < img src =" images/spacer.gif"alt =" "name ="undefined_2"width ="1"height ="65"border ="0"id ="undefined_2"/ > < table >
< /tr >
< b >
"< td > < img name ="craddocknavbar_r3_c1_s1"src ="images/craddocknavbar_r3_c1_s1.jpg"width ="148"height ="395"border ="0"id ="craddocknavbar_r3_c1_s1"alt =" "/ > < table >
"< td > < img src =" images/spacer.gif"alt =" "name ="undefined_2"width ="1"height ="395"border ="0"id ="undefined_2"/ > < table >
< /tr >
< /table >
< / div >
< div id = "bodydiv" >
< div class = "fadein" >
"< img src="images/slideshow/1jquery.jpg ">
"< img src="images/slideshow/2jquery.jpg ">
"< img src="images/slideshow/3jquery.jpg ">
"< img src="images/slideshow/4jquery.jpg ">
"< img src="images/slideshow/5jquery.jpg ">
"< img src="images/slideshow/6jquery.jpg ">
"< img src="images/slideshow/7jquery.jpg ">
"< img src="images/slideshow/8jquery.jpg ">
< / div >
< / div >
< / div >
< div id = "navigationlower" >
" < p > < a href =" http://www.rjcraddockdesigns.com/index.php "title =" Home Page models Richard J. Craddock "" > home < /a > - < a href = " " http://www.rjcraddockdesigns.com/company "" profile.php ' title 'Richard J. Craddock Designs' = > profile < /a > - < a href = " http://www.rjcraddockdesigns.com/services.php "title =" Richard J. Craddock Designs "> Services < /a > < /p > "
< strong > Richard J. Craddock Designs, 2011 < facilities > < / p >
" < p > < strong > < a href =" http://cwws.org "title = 'Web of common wealth Solutions' target ="_new"> Designed by CWWS < /a > < / strong > < / p > "
" < p > < a href =" https://www.Facebook.com/RJCLandscapeDesigns "> < img src ="facebook icon.png"width ="60"height ="60"/ > < /a > < /p > .
< / div >
< / body >
< / html >
Layout 2-column next looks a lot like what you're aiming for.
View source in the browser to see the CSS & HTML code.
http://ALT-Web.com/templates/2-Col-fixed-layout.shtml
Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
http://ALT-Web.com/
http://Twitter.com/ALTWEB -
How do you text opaque while the div is transparent?
I put my body to have a background image.
I inserted a div which has also a background image.
I want the div be transparent... but the text to be opaque, NOT transparent.
I tested it using the following css:
{#holder}
background-image: url (background2.jpg);
Width: 900px;
margin-right: auto;
left margin: auto;
height: 1000px;
filter: Alpha (Opacity = 60);
{body
background-attachment: fixed;
background-image: url(Lapel-Back%203.jpg);
}How can I maintain the transparency in the div and have even normal text looking for...
the following link is an example of transparency with the text works correctly
http://www.chipfoose.com/ws_display.asp?filter=home
Thank you
They use the best method to achieve the effect in my opinion, a semi-transparent background image. Just create the image in Photoshop/Fireworks and then export it as a 32-bit PNG.
-
I need help with the DIV tags :)
Hello.
I'm currently building a website for a server CoD: WaW Nazi Zombies I'm currently getting. The purpose of this one is just for me and my friends to play nazi zombies and test different mods of it. I'm putting the layout for the Web site using styles and DIV tags I want to have two div tags on the same line as the other. Some solutions I've seen include float, but when I try that it does not work so I turned on the Adobe Forums. Here is my code:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 "/ >"
<!-TemplateBeginEditable name = "doctitle"-->
jCodZombies < title > - < /title > model
<! - TemplateEndEditable - >
<!-TemplateBeginEditable name = "head"->
<! - TemplateEndEditable - >
< style type = "text/css" >
<!--
. Header {}
height: 310px;
Width: 1280px;
background-image: url (.. / jCodZombies/images/slices_01.gif);
}
. NAV {}
height: 461px;
Width: 481px;
}
. Happy {}
height: 461px;
Width: 799px;
background-image: url (.. / jCodZombies/images/slices_03.gif);
}
.footer {}
height: 253px;
Width: 1280px;
background-image: url (.. / jCodZombies/images/slices_04.gif);
}
->
< / style >
"" < script src = "... / Scripts/swfobject_modified.js" type = "text/javascript" > < / script >
< / head >
< body >
"" < div class = "header" > < img src = "... / jCodZombies/jCodZombies.gif" width = "1280" height = "300" / > < / div >
< div class = "nav" >
< object id = 'FlashID' classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width = "481" height = "461" > "
"" < param name = "movie" value = "... / jCodZombies/nav.swf" / >
< param name = "quality" value = "high" / >
< param name = "wmode" value = "opaque" / >
< param name = "swfversion' value ="6.0.65.0"/ >
<!-this param tag prompts users with Flash Player 6.0 r65 or later to download the latest version of Flash Player. Delete it if you do not want users to display the prompt. ->
"" < param name = "expressinstall" value = "... / Scripts/expressInstall.swf" / >
<!-next object tag is for non - IE browsers. Then he hide from IE using IECC. ->
<!-[if! IE] >->
"" < object type = "application/x-shockwave-flash" data = "... / jCodZombies/nav.swf" width = "481" height = "461" >
<!-<! [endif]-->
< param name = "quality" value = "high" / >
< param name = "wmode" value = "opaque" / >
< param name = "swfversion' value ="6.0.65.0"/ >
"" < param name = "expressinstall" value = "... / Scripts/expressInstall.swf" / >
<!-the browser displays the following alternative content for users of Flash Player 6.0 and higher. ->
< div >
< h4 > the content of this page requires a newer version of Adobe Flash Player. < / h4 >
" < p > < a href =" http://www.Adobe.com/go/getflashplayer_fr "> < img src = ' http://www.Adobe.com/images/shared/download_buttons/get_flash_player.gif "alt = 'Get Adobe Flash player' width = '112' height ="33"/ > < /a > < /p > "
< / div >
<!-[if! IE] >->
< / object >
<!-<! [endif]-->
< / object >
< / div >
< div class = "content" > < / div >
< div class = "footer" > < / div >
< script type = "text/javascript" >
<!--
swfobject.registerObject ("FlashID");
->
< /script >
< / body >
< / html >Also here is a link to my site that this code is for: http://www.jcodzombies.TK
It should work. In addition, he is a model for two pages on this Web site. He is not too complicated and have done it before, but can't get out so I would like some advice from you guys.
Thank you and I hope to see some answers soon.
If you have Dreamweaver, why don't you just try one of their file > new... home pages? Maybe try 2 columns with header and footer? Or fair value each of your divs a different background color and try to play with things. You should be able to simply float your div 'nav' on the left. It is usually a good idea to create a div 'container' and put all your other div inside. Then the div 'container' your maximum width and value margin: 0 auto;
-
I have a big div (used as container) and a few smaller that div. smaller divs have defined width, and width of the container is based on the sum of the small divs. Is it possible to define a div so it could automatically auto trimming to match the screen resolution (div is the width of 1381px), or I have to redefine the image used for the div?
Use static images not resized to the width of the screen. If they did, they would look deformed.
As a general rule, you choose a width of page is comfortably displayed by the majority of visitors to your site without having to use the horizontal scroll bar.
Fixed width (pixel-based), centered layouts are more comfortable to work with. I think this is why many designers of web sites, use them. The trick is to find the 'right' width for your target audience. For most desktop and laptop users, 900 to 1100px is a good range. For mobile devices, 320 to 480px.
Related link:
Google labs - the browser size
http://browsersize.googlelabs.com/
Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
http://ALT-Web.com/
http://Twitter.com/ALTWEB
http://ALT-Web.blogspot.com -
White space in FF at the top of the div
I am developing a site and when I look in firefox it is 3px of white space at the top of the left-hand navigation and leftspacer, but not in safari. The top menu is 38px and I put one - value of top margin of 38px in the #leftside and the #lefspacer to compensate for this. the site address is > http://www.elixir.biz/core/index.html.
Here is the code:
@import url("./whitespace-reset.css");
@charset "UTF-8";
{body
background: #c0b7b2 repeat;
margin: 0; / * It is advisable to zero, the margin and the filling of the body to hold element has a different default browser * /.
padding: 0;
text-align: center; / * This centers the container in IE 5 * browsers. The text is then set left aligned by default in the #container selector * /.
Color: #000000;
do-family: Verdana, Arial, Helvetica, without serif.
}
#container {}
Width: 761px; / * using the less than a width 20px full 800px allows for chrome browser and avoids a horizontal scroll bar * /.
background: #FFFFFF; / * margins (in conjunction with a width) auto Center the page * /.
border: 0;
text-align: left; / * This setting overrides the text-align: center on the body element. */
height: 871px;
margin: 0;
padding: 0;
}
#header {}
height: 148px;
Width: 761px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
{#leftside}
Width: 158px;
float: left;
margin-top:-38px;
padding: 0px 0px 0px 0px;
}
#leftside .menu img {}
display: block;
margin: 0;
}
#leftside ul.menu {}
padding: 0px 0px 0px 0px;
make-style: none;
margin: 0;
}
#leftside ul.menu li {}
display: inline;
float: left;
margin: 0;
padding: 0;
list-style: none;
}
{#leftspacer}
Width: 31px;
float: left;
height: 723px;
margin-top:-38px;
padding-right: 10px;
background-image: url(images/home_spacer_left.jpg);
background-repeat: no-repeat;
}
#top {}
margin-top: 0px;
height: 38px;
padding: 0px 0px 0px 0px;
}
#top ul.menu {}
margin-top: 0px;
margin left: 189px;
float: left;
padding: 0px 0px 0px 0px;
margin-right: 0px;
margin-bottom: 0px;
list-style: none;
}
#top ul.menu li {}
display: inline;
list-style: none;
float: left;
margin: 0;
padding: 0;
}
{#bottom}
height: 22px;
left: 468px;
}
#bottom ul.menu {}
top of the margin: 300px;
right margin:-23px;
float: left;
left margin:-61px;
list-style: none;
}
#bottom ul.menu li {}
display: inline;
list-style: none;
float: left;
}
#mainContent {}
margin: 0px 0px; / * left and right margins on this div element creates the two outside columns on the sides of the page. No matter the amount of content contain the sidebar divs, the space of the columns will remain. You can remove this line if you want the #mainContent div text to fill in the spaces of the sidebar when the content in each side bar ends. */
padding: 0 0 0 0;
}
{#facilitiesContent}
background: url(images/facilities_bg.jpg) repeat;
margin: 0px;
padding: 0;
height: 208px;
Width: 572px;
}
{div.facilities}
background: url(images/facilities_bg.jpg) repeat;
height: 208px;
Width: 572px;
}
#footer {}
padding: 0; / * This filling is the alignment to the left of the items in the div that appear above him. */
background: #c0b7b2;
height: 22px;
}
{#threepix}
margin left: 189px;
margin-right: 0px;
height: 114px;
}
{#col1}
position: relative;
}
#col1-a {}
position: absolute;
Width: 275px;
right: 0px;
Top: 0px;
}
{#col1-b}
position: absolute;
right: 0px;
Width: 275px;
Top: 0px;
}
{#pixcopyleft}
margin left: 189px;
do-size: 1em;
do-family: Arial, Helvetica, without serif.
margin-top: 10px;
}
{#pixcopyright}
do-size: 1em;
margin left: 189px;
do-family: Arial, Helvetica, without serif.
margin-top: 10px;
}
#footer ul.menu {}
margin left: 189px;
margin-right: 0px;
margin-top:-22px;
padding: 0px 0px 0px 0px;
float: left;
}
#footer ul.menu li {}
display: inline;
list-style: none;
padding: 0px 0px 0px 0px;
float: left;
}
#footer p {}
margin: 0; / * padding on that element will create space, just as it would the margin, free margin collapse question * /.
Padding: 0 10;
}
{img.imageleft}
float: left;
left margin: 0px;
padding: 5px 5px 5px 5px;
}
{img. ImageRight}
float: right;
padding: 5px 0px 5px 5px;
text-align: right;
}
{.imagecenter}
text-align: center;
}
.fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
float: right;
left margin: 0px;
padding: 5px 5px 5px 5px;
}
.fltlft {/ * this class can be used to float an element on your page to the left * /}
float: left;
right margin: 8px;
}
.clearfloat {/ * this class must be placed on an element div or break and should be the last item before closing a container should completely contain a float * /}
Clear: both;
height: 0px;
font size: 1px;
line-height: 0px;
}
H1 {}
do-family: Arial, Helvetica, without serif.
do-size: 1em;
make-weight: bold;
margin-bottom: 3px;
}< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > < /title > Pilates programs
< link href = "core.css" rel = "stylesheet" type = "text/css" / > "
< body bgcolor = "#c0b7b2" >
< script type = "text/javascript" >
<!--
function MM_swapImgRestore() //v3.0 {}
var i, x = offline. MM_sr; for (i = 0; a & & I <.) Length & & (x = a [i]) & & x.oSrc; i ++) x.src = x.oSrc;
}
function MM_preloadImages() {//v3.0
var d = document; If (d.images) {if(!d.MM_p) d.MM_p = new Array();
var i, j is d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i <.) Length; i ++)
If (a [i].indexOf("#")! = 0) {d.MM_p [j] = new Image; d.MM_p [j ++] .src = a [i] ;}}
}function MM_findObj (n, d) {//v4.01
var p, i, x; if(!d) d = document; If ((p = n.IndexOf ("?")) > 0 & & parent.frames.length) {}
d = parent.frames [n.Substring(p+1)] .document; n = n.Substring (0, p) ;}
If (!) () x = d [n]) & & copyrights) x = d.all [n]; for (i = 0;! x & & i < d.forms.length; i ++) x = d.forms [i] [n];
for (i = 0;! x & & d.layers & & I < d.layers.length; i ++) x = MM_findObj (n, d.layers [i] .document);
If (! x & & d.getElementById) x = d.getElementById (n); Return x;
}function MM_swapImage() {//v3.0
var i, j = 0, x, a = MM_swapImage.arguments; document. MM_sr = new Array; for (i = 0; i <(a.length-2); I += 3).
If ((x = MM_findObj (a [i]))! = null) {document. MM_sr [j ++] = x; if(!x.oSrc) x.oSrc = x.src; x.SRC = a [i + 2] ;}
}
->
< /script >
< name meta = "description" content = "Core Pilates Studio is a classic, equipped with pilates and Gyrotonic studio convenienly located near Vassar College of Poughkepsie, NY. We offer classic pilates, Gyrotonic and Gyrokinesis sessions private, semi-private and group. "/ >
< name meta = "keywords" content = "core studio pilates, pilates, core, gyrotonic, gryokinesis, Joseph pilates, pilates in poughkeepsie, New York pilates, pilates in new york" / > "
< / head >< body = onload "MM_preloadImages ("images/nav_main_home_roll.jpg','images/jpg','images/nav_main_schedule_roll.jpg','images/nav_main_rates_roll.jpg','images/nav_main _ourteam_roll.jpg','images/nav_main_contactus_roll.jpg','images/nav_main_rates_roll.jpg nav_main_thestudio_roll.")" > "
< div id = "container" >
< div id = "header" >
< img src = "images/home_header.jpg" align = "left" / > < a href = "index.html" > < img src="images/home_logo_core.jpg"/ > < /a >. "
<!-end #header--> < / div >< div id = "top" >
< ul class = "menu" >
< li > < a href = "pilates.html" > < img src="images/subnav_programs_pilates_up.jpg"/ > < /a > < /li > ""
< li > < a href = "gyrotonic.html" > < img src="images/subnav_programs_gyrotonic_up.jpg"/ > < /a > < /li > ""
< li > < a href = "why - core.html" > < img src="images/subnav_programs_whycore_up.jpg"/ > < /a > < /li >
< li > < a href = "schedule.html" > < img src="images/subnav_programs_schedule_up.jpg"/ > < /a > < /li > ""
< li > < img src="images/subnav_programs_back.jpg"/ > < /li >
< /ul >
<!-end #top--> < / div >
< div id = "company" >
< ul class = "menu" >
"< li > < a href ="index.html"MM_swapImgRestore" onmouseover ="MM_swapImage (" "self,", ' images/nav_main_home_roll.jpg', 1) "> < img src =" images/nav_main_home_up.jpg "name ="home"width ="158"height ="39"border ="0"id ="home"/ > < /a > < /li >
< li > < a href = "program" > < img src = "images/nav_main_programs_down.jpg" > < /a > < /li > ""
"< li > < a href ="studio.html"MM_swapImgRestore" onmouseover = "MM_swapImage ('the_studio',", ' images/nav_main_thestudio_roll.jpg', 1) "> < img src =" images/nav_main_thestudio_up.jpg"name ="the_studio"width ="158"height ="39"border ="0"id ="the_studio"/ > < /a > < /li >"
"< li > < a href ="schedule.html"MM_swapImgRestore" onmouseover ="MM_swapImage ('calendar',", ' images/nav_main_schedule_roll.jpg', 1) "> < img src =" images/nav_main_schedule_up.jpg "name ="schedule"width ="158"height ="39"border ="0"id ="schedule"/ > < /a > < /li >
"< li > < a href ="rates.html"MM_swapImgRestore" onmouseover ="MM_swapImage ('rates',", ' images/nav_main_rates_roll.jpg', 1) "> < img src =" images/nav_main_rates_up.jpg "name ="rate"width ="158"height ="39"border ="0"id ="rate"/ > < /a > < /li >
"< li > < a href ="our team.html"MM_swapImgRestore" onmouseover = "MM_swapImage ('our_team',", ' images/nav_main_ourteam_roll.jpg', 1) "> < img src =" images/nav_main_ourteam_up.jpg"name ="our_team"width ="158"height ="39"border ="0"id ="our_team"/ > < /a > < /li >"
"< li > < a href =" contact - us.html "MM_swapImgRestore" onmouseover = "MM_swapImage ('contact'", ' images/nav_main_contactus_roll.jpg', 1) "> < img src =" images/nav_main_contactus_up.jpg"name ="contact"width ="158"height ="39"border ="0"id ="contact"/ > < /a > < /li >"
< li > < img src = "images/nav_main_space_below.jpg" / > < /li > "
< li > < a href = "mailto: " [email protected] "> < img src = images/home_email.jpg" "/ > < / a > < /li >
< li > < img src = "images/home_address.jpg" / > < /li > "
< li > < a href = "special - program" > < img src = "images/home_logo_special.jpg" / > < / has > < /li > "
< /ul >
<!-end #leftside--> < / div >
< div id = "leftspacer" >
<!-end #leftspacer--> < / div >
< div id = "mainContent" >
"< p > < img src =" images/hcp48021.jpg"class ="imageleft"scr="images/nav_bottom_left_space.jpg"/ > < img src =" images/hcp48021.jpg "class ="imageleft"scr="images/nav_bottom_left_space.jpg"/ > < img src =" images/hcp48021.jpg' class = 'imageright"scr="images/nav_bottom_left_space.jpg"/ > < br / >"
Lorem ipsum dolor sit amet, adipiscing elit our. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Amongst ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean restore. Etiam leo queer, venenatis lectus tristique in, fitness at, odio. < /p >
< p align = "left" > Lorem ipsum dolor sit amet, adipiscing elit our. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Amongst ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean restore. Etiam leo queer, venenatis lectus tristique in, fitness at, odio. < /p >
<!-end #mainContent--> < / div >
<!-this element of compensation should immediately follow the #mainContent div in order to force the #container div to contain all the child floats--> < br class = 'clearfloat' / >
< div id = "footer" >
< ul class = "menu" >
< li > < img src="images/nav_bottom_left_space.jpg"/ > < /a > < /li >
< li > < a href = "home.html" > < img src="images/nav_bottom_home.jpg"/ > < /a > < /li > ""
< li > < a href = "program" > < img src="images/nav_bottom_program.jpg"/ > < /a > < /li > ""
< li > < a href = "studio.html" > < img src="images/nav_bottom_thestudio.jpg"/ > < /a > < /li >
< li > < a href = "schedule.html" > < img src = "images/nav_bottom_schedule.jpg" > < /a > < /li > ""
< li > < a href = "rates.html" > < img src="images/nav_bottom_rates.jpg"/ > < /a > < /li > ""
< li > < a href = "our - team.htm" > < img src="images/nav_bottom_ourteam.jpg"/ > < /a > < /li >
< li > < a href = "contact - us.html" > < img src="images/nav_bottom_contactus.jpg"/ > < /a > < /li >
< /ul >
<!-end #footer--> < / div >
<!-end #container--> < / div >< / body >
< / html >See if one of the two options I suggested in your other thread might work for you.
-
OK, so im trying to put 2 different divs side by side on a page. I divided the third page. The first third is 300px, which is reserved for the area links on the left. The other two-thirds is 600px and reserved for the main content area. The problem im having is not able to put the div of links and the div of the main content side by side. Maybe its easier to use an array instead of use of divs, I just want to kno if someone knows how to do with the divs.
Code:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > ERRATIC MANIFEST DESIGN GROUP < /title >
< meta name = "Keywords" content = "graphics, graphic designer, print design, logos, brochures, business cards, web design, paper for letterhead, envelopes, flash designer, design group, design" / >
< link href = "master.css" rel = "stylesheet" type = "text/css" / > "
< / head >< body >
< div id = "container" >< div id = "mainContentarea" >
< p align = "center" class = "headers" > < / p >
< p > < img src = "file:///My Stuff/users/leoneltorres/Desktop/image 6.png" alt = "logo" width = "477" height = "405" class = "logospacing" / > < / p >
< / div >
< / div > < / body >
< / html >CSS:
@charset "UTF-8";
{body
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: top center;
margin-top: 10px;
margin-bottom: 10px;
}
#container {}
height: 700px;
Width: 900px;
margin-right: auto;
left margin: auto;
}
{#links}
height: 700px;
Width: 300px;
}
/ * CSS document * /.{#mainContentarea}
Width: 600px;
height: 700px;
margin left: 300px;
background-color: #FFFFFF;
}
#copyright {}
height: 20px;
Width: 800px;
}
. Headers {}
font family: "Century Gothic".
do-size: 18px;
color: #B70725;
text-align: center;
top of the margin: 90px;
}
{.logospacing}
top of the margin: 30px;
margin left: 60px banner;
}If it doesn't work... awesome, I did put it in DW.
I will say that your use of the
alignment tags is not the way to go, you must use padding or margins for this. Also, you have all the divs with heights set, once again, something you want to get away from. You should leave the content determine the height. I venture a guess that if you remove all of the heights, you will see no difference.
Gary
Maybe you are looking for
-
I'm about to upgrade my macbook pro HDD to SSD. I wonder if I'll be able to re - download Mainstage after a reset of my macbook pro. Thank you.
-
Organization of the photo to Mac for the external hard drive
I recently had the Mac portable, Air and noticed that the iPhotos can organize my photos by location, date, etc. I really like it and would like to get all my pictures in a folder like this. I also really like the faces feature because I can attrib
-
Need driver for Optiarc DVD RW AD 7580 s drive for Windows Vista 64-bit
I just bought a new Lenovo Ideapad Y550's. Everything works well except the drive Optiarc DVD RW AD 7580 s. I checked the configuration of the pilot and found that a file system 32 called cdrom.sys driver has been installed. What is the correct drive
-
Why can't change my email address on my xbox
I tried to change my email on my xbox but it will not, except for her
-
My Canon pixma MG6320 must be connected to my computer does a 'download' a new driver?
My Canon pixma MG6320 must be connected to my computer does a 'download' a new driver?