vraag css/html voor weebly

Status
Niet open voor verdere reacties.

leekcss

Nieuwe gebruiker
Lid geworden
3 mei 2013
Berichten
1
Ik wil graag een aantal images toevoegen aan mijn stylesheet voor weebly (www.weebly.com), probleem is echter dat ik geen css kennis heb. Vandaar dat ik hieronder het voorbeeld heb weergegeven en de bijbehorende css/html. Welke puzzelaar kan mij helpen om onder het menu een plaatje in te voegen met dezelfde breedte als het menu uiteraard?

Eeuwige dank alvast!


VOORBEELD:

voorbeeld.jpg


CSS/HTML:


/* General Styling and Structure
--------------------------------------------------------------------------------*/

h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
text-decoration: none;
color: #d17b0c;
}

a:hover {
color: #f2a747;
}

a img {
border: 0;
}

body {
margin: 0 auto;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #878787;
}

h2 {
font-size: 24px;
margin: 0;
padding: .3em 0;
line-height: 1.2;
font-weight: normal;
font-family: "Glegoo", "Myriad Pro", Arial, Helvetica, sans-serif;
color: #6fb7cc;
-webkit-text-stroke-width: 0.3px;
}

p {
font-size: 1em;
line-height: 1.5;
margin: 0;
padding: .5em 0;
}

blockquote {
font-style:italic;
border-left:4px solid #6fb7cc;
margin:10px 0 10px 0;
padding-left:20px;
line-height:1.5;
color:#aaa;
}

hr {background:#ccc !important;}

#content p {
color: #878787;
}

#container {
margin: 0 auto;
width: 950px;
}

#header {
clear: both;
padding: 0 0 0 19px;
border-bottom: 8px solid #ededed;
margin-bottom: 20px;
}

.wsite-logo,
.wsite-logo a {
color: #6fb7cc;
margin: 0;
padding: 0;
text-decoration: none;
}

.wsite-logo,
.wsite-logo a:hover {
color: #6fb7cc;
}

#header .wsite-logo {
font-size: 36px;
color: #6fb7cc;
font-family: "Glegoo", Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
float: left;
-webkit-text-stroke-width: 0.3px;
}

#header-right a {
color: #d17b0c;
}

#header-right a:hover {
color: #f2a747;
}

/* Header Area
-------------------------------------------------------------*/

#header {
width: 100%;
height: 90px;
}

#header,
#header table {
border-collapse: collapse;
border-spacing: 0;
}

#header td {
vertical-align: middle;
text-align: left;
}

#logo {
padding: 25px 0 25px 22px;
}

#header-right {
padding: 0 0 0 10px;
}

#header-right table {
width: 1px;
}

#header-right table,
#header-right .search,
#header-right .wsite-search {
clear: right;
float: right;
}

#header-right td {
padding: 0;
}

/* TOP RIGHT: Phone Number
--------------------------------------------------------------------------------*/

#header-right .phone-number .wsite-text {
color: #878787;
font-size: 12px;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
display: block;
white-space: nowrap;
margin: 7px 0 5px 15px;
}

/* TOP RIGHT: Content Area
--------------------------------------------------------------------------------*/

#header-right .wsite-social {
vertical-align: middle;
margin: 5px 0 5px 10px;
}


.wsite-social-item {
width: 23px;
height: 23px;
margin: 0 0 0 3px;
background-image:url(social-lightgrey.png);
}

.wsite-social-facebook {background-position:0 0;}
.wsite-social-facebook:hover {background-position:0 -23px;}
.wsite-social-facebook:active {background-position:0 -46px;}
.wsite-social-pinterest {background-position:-23px 0;}
.wsite-social-pinterest:hover {background-position:-23px -23px;}
.wsite-social-pinterest:active {background-position:-23px -46px;}
.wsite-social-twitter {background-position:-46px 0;}
.wsite-social-twitter:hover {background-position:-46px -23px;}
.wsite-social-twitter:active {background-position:-46px -46px;}
.wsite-social-linkedin {background-position:-69px 0;}
.wsite-social-linkedin:hover {background-position:-69px -23px;}
.wsite-social-linkedin:active {background-position:-69px -46px;}
.wsite-social-mail {background-position:-92px 0;}
.wsite-social-mail:hover {background-position:-92px -23px;}
.wsite-social-mail:active {background-position:-92px -46px;}
.wsite-social-rss {background-position:-115px 0;}
.wsite-social-rss:hover {background-position:-115px -23px;}
.wsite-social-rss:active {background-position:-115px -46px;}
.wsite-social-flickr {background-position:-138px 0;}
.wsite-social-flickr:hover {background-position:-138px -23px;}
.wsite-social-flickr:active {background-position:-138px -46px;}
.wsite-social-plus {background-position:-161px 0;}
.wsite-social-plus:hover {background-position:-161px -23px;}
.wsite-social-plus:active {background-position:-161px -46px;}
.wsite-social-vimeo {background-position:-184px 0;}
.wsite-social-vimeo:hover {background-position:-184px -23px;}
.wsite-social-vimeo:active {background-position:-184px -46px;}
.wsite-social-yahoo {background-position:-207px 0;}
.wsite-social-yahoo:hover {background-position:-207px -23px;}
.wsite-social-yahoo:active {background-position:-207px -46px;}
.wsite-social-youtube {background-position:-230px 0;}
.wsite-social-youtube:hover {background-position:-230px -23px;}
.wsite-social-youtube:active {background-position:-230px -46px;}

/* TOP RIGHT: Search Box
--------------------------------------------------------------------------------*/

#header-right .search {
}

#header-right .wsite-search {
padding: 5px 0 5px 15px;
vertical-align: middle;
}

#header-right .wsite-search-input {
width: 168px;
height: 14px;
border: none;
padding: 8px 10px 8px 15px !important;
color: #878787;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
background: url(input-bg.png) no-repeat;
}

#header-right .wsite-search-button {
width: 28px;
height: 30px;
border: none;
margin: 0;
padding: 0;
background: url(submit-bg.png) no-repeat;
}

/* side-nav
--------------------------------------------------------------------------------*/

#avmenu {
clear: left;
float: left;
width: 200px;
margin: 0;
font-size: 17px;

}

#avmenu ul {
list-style: none;
width: 200px;
margin: 0;
padding: 0;
}

#avmenu li {
list-style: none;
padding: 0 0 4px;
}

#avmenu li a {
line-height: 1;
text-decoration: none;
color: #878787;
font-family: "Arial", "Myriad Pro", Arial, Helvetica, sans-serif;
font-size: 16px;
display: block;
padding: 10px 5px 12px 22px;
border: none;
}

#avmenu li#active a,
#avmenu a:hover {
color: #fff;
background: #6fb7cc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

/* Navigation Drop-Down Menu Customization
--------------------------------------------------------------------------------*/

#wsite-menus > .wsite-menu-wrap {
margin-left: -20px !important;
}

#wsite-menus .wsite-menu li a {
padding: 6px 15px 7px 15px;
background: #6fb7cc;
border: none;
border-bottom: 1px solid #92d1e3;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
color: #fff;
}

#wsite-menus .wsite-menu li a:hover {
color: #fff;
background: #3b8fa8;
}




/* main
--------------------------------------------------------------------------------*/

#main-wrap {
}

#main {
float: right;
width: 722px;
margin: 0;
}

#content {
margin: 0;
padding: 20px 0;
min-height: 400px;
overflow-x: visible !important;
overflow-x: hidden;
}

#banner {
position: relative;
}

#tl,
#tr,
#bl,
#br {
position: absolute;
width: 14px;
height: 14px;
}

#t,
#r,
#b,
#l {
position: absolute;
}

#t {
border-top: 1px solid #d6d6d6;
width: 97%;
background: #fff;
height: 3px;
left: 14px;
top: 0;
}

#r {
border-right: 1px solid #d6d6d6;
height: 94%;
background: #fff;
width: 3px;
top: 14px;
right: 0;
}

#b {
border-bottom: 1px solid #d6d6d6;
width: 97%;
background: #fff;
height: 3px;
left: 14px;
bottom: 0;
}

#l {
border-left: 1px solid #d6d6d6;
height: 94%;
background: #fff;
width: 3px;
top: 14px;
left: 0;
}

#tl {
background: url(tl.png) no-repeat;
left: 0;
top: 0;
}

#tr {
background: url(tr.png) no-repeat;
right: 0;
top: 0;
}

#bl {
background: url(bl.png) no-repeat;
left: 0;
bottom: 0;
}

#br {
background: url(br.png) no-repeat;
right: 0;
bottom: 0;
}

.tall-header-page .wsite-header {
width: 722px;
height: 245px;
background: url(banner-tall.jpg) no-repeat;
}

/* PAGE TYPE: banner-short
--------------------------------------------------------------------------------*/

.short-header-page .wsite-header {
width: 722px;
height: 145px;
background: url(banner-short.jpg) no-repeat;
}

.short-header-page #t {
width: 700px;
}

.short-header-page #r {
height: 120px;
}

.short-header-page #b {
width: 700px;
}

.short-header-page #l {
height: 120px;
}

/* TOP RIGHT: banner-landing
--------------------------------------------------------------------------------*/

.landing-page #banner {
}

#bannerleft {
clear: left;
float: left;
width: 412px;
position: relative;
}

.landing-page .wsite-header {
width: 412px;
height: 305px;
background: url(banner-landing.jpg) no-repeat;
}

#bannerright {
float: right;
width: 280px;
padding: 60px 0 0 30px;
}

#bannerright h2 {
color: #6fb7cc;
font-size: 24px;
font-weight: bold;
}

#bannerright p {
color: #878787;
padding: 7px 0 25px;
margin: 0;
}

#bannerright .wsite-button {
margin: 0;
}

/* TOP RIGHT: banner-short
--------------------------------------------------------------------------------*/

.tall-header-page .wsite-header {
width: 722px;
height: 245px;
background: url(banner-tall.jpg) no-repeat;
}

.tall-header-page #t {
width: 700px;
}

.tall-header-page #r {
height: 220px;
}

.tall-header-page #b {
width: 700px;
}

.tall-header-page #l {
height: 220px;
}

/* PAGE TYPE: nobanner
--------------------------------------------------------------------------------*/

.no-header-page #banner {
height: auto;
padding: 0;
display: none;
}

.no-header-page #content {
padding-top: 0;
}

/* PAGE TYPE: banner-splash
--------------------------------------------------------------------------------*/

.splash-page {
margin: 0 auto;
padding: 0;
background: #f4f4f4 url(splash-bodybg.jpg) top center repeat-y;
}

.splash-page #header {
width: 570px;
}

.splash-page #header-right {
float: right;
padding-right: 8px;
}

.splash-page #banner {
width: 560px;
height: 115px;
border: none;
padding: 5px 0 0 0;
}

.splash-page .wsite-header {
width: 560px;
height: 115px;
border: none;
background: url(banner-splash.jpg) no-repeat;
}

.splash-page #wrap {
width: 560px;
padding: 0 10px 0 10px;
}

.splash-page #content {
width: 538px;
}

.splash-page #footer {
width: 560px;
}

/* Footer
--------------------------------------------------------------------------------*/

#footer {
clear: both;
padding: 30px 0 35px 0;
color: #878787;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
border-top: 8px solid #ededed;
text-align: right;
}

#footer p {
color: #878787;
font-size: 12px;
}

#footer a {
color: #d17b0c;
}

#footer a:hover {
color: #f2a747;
}

#footer span {
vertical-align: middle;
}

#footer h2 {
font-size: 18px;
padding: .2em 0;
line-height: 1.5;
font-family: "Glegoo", "Myriad Pro", Arial, Helvetica, sans-serif;
color:#777;
border-bottom:1px solid #ddd;
}

.wsite-footer { /* make sure enough space between element footer and attribution */
margin-bottom: 15px;
}


/* Form Customization
--------------------------------------------------------------------------------*/

.wsite-form-label {
display: inline-block;
color: #878787;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
padding: 12px 0 5px 0;
}

.form-radio-container {
color: #878787;
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
}

.wsite-form-input, .wsite-search-element-input {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #878787;
background: #fff url(field.png) repeat-x !important;
border: 1px solid #dadada;
padding: 8px 4px 5px !important;
line-height: 1;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.form-select {
color: #878787;
border: 1px solid #dadada;
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
padding: 3px 4px;
width: 320px;
height: 27px;
line-height: 27px;
background: #fff url(field.png) repeat-x;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

/* Footer Form Customization
--------------------------------------------------------------------------------*/

.wsite-form-container {
margin-top:0px !important;
text-align:left;
}

.wsite-footer .wsite-form-label {
font-size: 1em;
padding: 5px 0 2px 0;
}

.wsite-footer .wsite-form-field {
width:300px !important;
}

.wsite-footer .form-radio-container {
font-size:1em;
}

.wsite-footer .wsite-form-input {
font-size: 1em;
width: 100% !important;

}

.wsite-footer .form-select {
width: 100%;
}

/* Buttons
--------------------------------------------------------------------------------*/


/* small */

.wsite-button {
color: #fff !important;
font-family: Arial, Helvetica, sans-serif;
height: 34px;
display: inline-block;
font-size: 12px;
border: none;
font-weight: normal;
font-size: 13px;
text-decoration: none;
padding: 0 15px 0 0;
background: url(button_blue.png) no-repeat 100% -105px;
text-shadow:0 -1px 1px rgba(0,0,0,0.5);
}

.wsite-button:hover {
background-position: 100% -140px;
}

.wsite-button:active {
background-position: 100% -175px;
}

.wsite-button-inner {
height: 34px;
line-height: 34px;
display: block;
font-size: 14px;
font-weight: normal;
border: none;
text-decoration: none;
padding: 0 10px 0 25px;
background: url(button_blue.png) no-repeat 0 0;
}

.wsite-button:hover .wsite-button-inner {
background-position: 0 -35px;
}

.wsite-button:active .wsite-button-inner {
background-position: 0 -70px;
}

/* large */

.wsite-button-large {
height: 41px;
background: url(button_large_blue.png) no-repeat 100% -126px;
padding: 0 15px 0 0;
}

.wsite-button-large:hover {
background-position: 100% -168px;
}

.wsite-button-large:active {
background-position: 100% -210px;
}

.wsite-button-large .wsite-button-inner {
height: 41px;
line-height: 41px;
padding: 0 10px 0 25px;
background: url(button_large_blue.png) no-repeat 0 0;
}

.wsite-button-large:hover .wsite-button-inner {
background-position: 0 -42px;
}

.wsite-button-large:active .wsite-button-inner {
background-position: 0 -84px;
}

/* highlight */

/*
Making the highlighted versions of the buttons is easy because we just need
to switch out the background images. This works because the different button
states (normal, :hover, :active) have their sprite coordinates in the same places.
*/

.wsite-button-large.wsite-button-highlight {
background-image: url(button_large_highlight_blue.png);
}

.wsite-button-large.wsite-button-highlight .wsite-button-inner {
background-image: url(button_large_highlight_blue.png);
}

.wsite-button-highlight {
background-image: url(button_highlight_blue.png);
}

.wsite-button-highlight .wsite-button-inner {
background-image: url(button_highlight_blue.png);
}
 
lol

Ik zie door de bomen het bos niet meer

je kan het beste al deze code plakken in <htaml> </htaml> tags die tijdens het schrijven afgebeeld worden
Met css regel je opmaak met htmp structuur

een <img tag moet je aanroepen in html
<img src="locatie/locatie"> </img>
http://www.w3schools.com/tags/tag_img.asp

Hier kun je heel veel informatie opdoen met betrekking op al je vragen

Veel succes ermee

Laat ons weten als je er niet uitkomt
 
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan