Need help finalizing first webpage...
hi - new dreamweaver , have managed figure out, not others.
i building website several pages want first page ready go before move on the others (as want use template them).
i have attached sample image of site like. pretty close.
issues having:
the menu bar across top of image isn't deplaying right. looks different in design view, live view, , preview. have tried 2 different ways (as coloumns , horizontal list) - isn't filling across width of page.
i'm having trouble getting 3 columns have same height - possibly becuase have padding on , not on others?
i'm not sure how show have - here screen capture zoomed out. (it looks small - because zoomed out whole thing).
also - there way rid of tiny gap above header: micahel gabriel?
and there way add shadow header , menu text?
thanks!
style.css
@charset "utf-8";
/* css document */
#container {
width: 785px;
background: #000;
background: rgba(0,0,0,0.3);
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
color: rgb(255,255,255);
}
#magenta_line_mg {
background-image: url(../../magentaline_under_mg.png);
float: left;
height: 7px;
width: 780px;
margin-bottom: 10px;
}
#magenta_line_banner {
background-image: url(../../magentaline_under_banner.png);
float: left;
height: 7px;
width: 780px;
margin-top: 10px;
margin-bottom: 10px;
}
#banner {
background-image: url(../strings_attached_image%20copy.png);
float: left;
height: 250px;
width: 780px;
}
#home, #strings_attached, #calendar, #store, #bio, #multimedia, #bookings, #press, #spreading_awareness, #lyrics, #contact {
width: auto;
float: left;
}
#home {
margin-left: 2px;
}
#strings_attached, #calendar, #store, #bio, #multimedia, #bookings, #press, #spreading_awareness, #lyrics, #contact {
margin-left: 5.4px;
}
h1 {
font-family: arial;
font-size: 60px;
font-weight: lighter;
margin: 0;
}
#home {
font-size: 13px;
font-weight: lighter;
font-variant: small-caps;
color: rgb(255,255,255);
text-decoration: none;
font-family: arial;
}
#strings_attached {
font-size: 13px;
font-weight: lighter;
font-variant: small-caps;
color: rgb(255,255,255);
text-decoration: none;
font-family: arial;
}
#calendar {
font-size: 13px;
font-weight: lighter;
font-variant: small-caps;
color: rgb(255,255,255);
text-decoration: none;
font-family: arial;
}
#store {
font-size: 13px;
font-weight: lighter;
font-variant: small-caps;
color: rgb(255,255,255);
text-decoration: none;
font-family: arial;
}
#bio {
font-size: 13px;
font-weight: lighter;
font-variant: small-caps;
color: rgb(255,255,255);
text-decoration: none;
font-family: arial;
}
#multimedia {
font-size: 13px;
font-weight: lighter;
font-variant: small-caps;
color: rgb(255,255,255);
text-decoration: none;
font-family: arial;
}
#bookings {
font-size: 13px;
font-weight: lighter;
font-variant: small-caps;
color: rgb(255,255,255);
text-decoration: none;
font-family: arial;
}
#press {
font-size: 13px;
font-weight: lighter;
font-variant: small-caps;
color: rgb(255,255,255);
text-decoration: none;
font-family: arial;
}
#spreading_awareness {
font-size: 13px;
font-weight: lighter;
font-variant: small-caps;
color: rgb(255,255,255);
text-decoration: none;
font-family: arial;
}
#lyrics {
font-size: 13px;
font-weight: lighter;
font-variant: small-caps;
color: rgb(255,255,255);
text-decoration: none;
font-family: arial;
}
#contact {
font-size: 13px;
font-weight: lighter;
font-variant: small-caps;
color: rgb(255,255,255);
text-decoration: none;
font-family: arial;
}
#website_links {
height: 20px;
width: 780px;
}
#menu_bar {
font-family: arial;
font-weight: lighter;
color: rgb(0,0,0);
list-style-type: none;
text-decoration: none;
}
#menu_bar {
font-family: arial;
font-size: 12px;
font-weight: lighter;
font-variant: small-caps;
color: rgb(255,255,255);
text-decoration: none;
text-align: center;
display: block;
width: auto;
}
#menu_bar ul li {
float: left;
}
#menu_bar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#header {
font-family: arial;
font-weight: lighter;
color: rgb(255,255,255);
}
#body {
font-family: arial;
color: rgb(255,255,255);
}
#column_left {
width: 531px;
float: left;
font-family: arial;
font-size: 17px;
font-weight: lighter;
color: rgb(255,255,255);
background-color: rgb(0,0,0);
background: rgba(0,0,0,0.3);
height: 924px;
padding: 12px;
}
#column_center {
float: left;
background-color: rgb(0,0,0);
background: rgba(0,0,0,0.3);
width: 15px;
}
#column_right {
width: 182px;
float: left;
background-color: rgb(0,0,0);
background: rgba(0,0,0,0.3);
height: 920px;
padding: 12px;
}
#column_center {
background: rgba(0,0,0,0.3);
background-image: url(../magentaline_page_divider.png);
background-repeat: no-repeat;
height: 948px;
width: 10px;
padding-right: 5px;
padding-left: 5px;
background-position: center center;
}
#buy {
font-family: arial;
font-size: 16px;
font-weight: lighter;
font-variant: small-caps;
color: rgb(255,255,255);
text-decoration: none;
text-align: center;
}
#wrapper {
width: 780px; /* adjust width suit */
margin: 0 auto;
}
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(../background_texture.jpg);
background-repeat: no-repeat;
background-position: center center;
}
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment