PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
M

Afbeelding als achtergrond waar je overheen kan schrijven

Door Madelon van de Ruit op 13-12-2014 14:07
3.486 views
Goedenmiddag, misschien is er iemand die mij kan helpen met de juiste code.

Ik ben een website aan het maken in Weebly (CMS)

Nou wil ik graag zoals de header waar de afbeelding in zit met de oranje rand deze ook beneden aan de pagina, alleen dan de oranje rand met witte binnenkant (afmeting 860px bij 200px), waarin ik dan mijn contactgegevens kan plaatsen. Dus niet onder de pagina. Zie voorbeeld


Nu heb ik via een div een afbeelding geplaatst, maar ik zou deze het liefst als achtergrond zien zodat ik er met de CMS ook overheen kan schrijven of afbeeldingen in plaatsen.


Alvast bedankt!!

Zo ziet de CSS van de pagina er uit:



/* Resets
--------------------------------------------------------------------------------*/

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
margin: 0;
padding: 0;
}

a img {
border: 0;
}

a {
color: #4D91D7;
text-decoration: none;
}

a:hover {
color: #85C20D;
}

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

body {
background: #EAE9E8;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
color: #4d4d4d;
margin: 0;
padding: 0;
}

#wrap {
background: #eae9e8 url(oranje3.png);
width: 100%;
position: relative;
}

#container {
width: 920px;
margin: 0 auto;
background: url(header-highlight.png) top center no-repeat;
padding: 0 0 38px;
}

.header-wrap {
background: #fff;
}

#logo,
#logo a {

font-family: "Satisfy", Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: normal;
text-decoration: none;
line-height: 1;
color: #fefefe;
-webkit-text-stroke-width: 0.5px;
}

#header-right a {
color: #6d97bf;
}

#header-right a:hover {
color: #90c1f0;
}

#page {
width: 954px;
margin: 0 auto;
top: -60px;
position: relative;
}



#main-wrap {
background: url(main-shadow.png) center top repeat-y;
padding: 0 43px;
}

#main {
padding: 0;
border-top: none;
}

#content {
padding: 20px 0;
min-height: 400px;
}

h2 {
font-size: 1.7em;
margin: 0;
padding: .4em 0;
line-height: 1.2;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
}

#content h2 {
color: #66a758;
}

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

#content p {
color: #797979;
}

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

#content blockquote {
font-size:14px;
color:#aaa;
border-left:none;
background: url(blockquote-bg.png) no-repeat 5px 0px;
padding:0px 15px 15px 60px;
border:none;
margin:20px 0px;
}
#content .paragraph li {
list-style:none !important;
background:url(bullet-Blue-Green.png) no-repeat center left !important;
margin:0px !important;
padding-left:20px !important;
}

#content abbr {
border-bottom: 1px dotted #8f8f8f;
}

#banner {
background: #faa133;
padding: 8px;
border: 1px solid #d2d2d2;
}

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

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

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

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

#logo {
padding: 10px 0 20px;
}

#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: #85c20d;
font-size: 20px;
font-weight: normal;
font-family: verdana;
text-decoration: none;
display: block;
white-space: nowrap;
margin: 60px 0px 5px 19px;
}

/* TOP RIGHT: Social Links
--------------------------------------------------------------------------------*/

#header-right .wsite-social {
vertical-align: middle;
margin: -80px 30px 20px 10px;
}


.wsite-social-item {
width: 24px;
height: 24px;
margin: 0 0 0 3px;
background-image:url(social-Purple-Blue1.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 {
margin: 5px 0 5px 15px;
}

#header-right .wsite-search {
}

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

#header-right .wsite-search-button {
position: relative;
width: 28px;
height: 31px;
color: #010101;
font-size: 12px;
border: none;
margin: 0;
padding: 0;
background: url(submit-bg-Blue-Green.png) no-repeat;
cursor: pointer;
}

/* PAGE TYPE: banner-landing
--------------------------------------------------------------------------------*/

.no-header-page #banner {
display: none;
}

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

.landing-page #banner {
background: none;
border: none;
padding: 0 0 6px;
background: url(banner-landing-bdr.png) left bottom repeat-x;
}

#bannerleft {
float: left;
width: 547px;
position: relative;
margin: 0;
}

#banner-inner {
border: 1px solid #d2d2d2;
padding: 8px;
}

#banner-bot {
background: url(banner-left-bot.png) center bottom no-repeat;
padding-bottom: 31px;
}

.landing-page .wsite-header {
width: 528px;
height: 308px;
background: url(banner-landing.jpg) no-repeat;
border: 1px solid #ccc;
}

.landing-banner-outer {
display: table;
#position: relative;
overflow: hidden;
}

.landing-banner-mid {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}

.landing-banner-inner {
#position: relative;
#top: -50%;
}

#bannerright {
margin: 0;
float: left;
width: 290px;
height: 328px;
padding: 0 0 0 20px;
}

#bannerright h2 {
color: #66a758;
font-size: 2em;
padding: 0px;
line-height: 100%;
}

#bannerright p {
color: #4d4d4d;
font-size: 1em;
padding: 20px 0px;
line-height: 140%;
}

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

/* PAGE TYPE: banner-tall
--------------------------------------------------------------------------------*/
div#afbeelding{
background: #A0DCF8 url(footer.jpg)no-repeat;
height: 200px;
width: 860px;

}
.tall-header-page #banner {
}

.tall-header-page .wsite-header {
width: 848px;
height: 248px;
margin: 0;
background: url(banner-tall.jpg) no-repeat;
border: 1px solid #ccc;
}

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

.short-header-page #banner {
}

.short-header-page .wsite-header {
width: 848px;
height: 168px;
background: url(banner-short.jpg) no-repeat;
border: 1px solid #ccc;
}

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

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

.splash-page #banner {
width: 527px;
height: 161px;
padding: 6px 4px 4px 6px;
background: url(banner-splash-bg.png) no-repeat;
}

.splash-page .wsite-header {
width: 515px;
height: 149px;
background: url(banner-splash.jpg) no-repeat;
}

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

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

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

/* Navigation
--------------------------------------------------------------------------------*/

#nav-wrap {
background: url(menu bot.png) no-repeat;
width: 862px;
margin: 0 auto 0 -96px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
padding: 0px 99px 0;
height: 30 px;
}

#topnav {
clear: both;
}

#topnav ul {
list-style: none;
float: right;
}

#topnav ul li {
list-style: none;
float: left;
background: url(nav-sep-Blue-Green.png) right 12px no-repeat;
padding-right: 30px;
}

#topnav a {
float: left;
display: block;
color: #4D91D7;
font-size: 1.2em;
text-decoration: none;
padding: 15px 0px 15px 0px;
border: 0;
outline: 0;
text-transform: uppercase;
}

#topnav ul > li:last-child,
#topnav ul > span:last-child li {
background: none;
padding-right: 0;
}

#topnav ul > li:first-child a,
#topnav ul > span:first-child li a {
padding-left: 0;
}

#topnav li#active a,
#topnav a:hover {
color: #85C20D;
border: 0;
}

/****************************** flyout menus ******************************/

.wsite-menu-wrap {
background: url(dropdown-bg-Blue-Green.png);
padding: 0;
}

#wsite-menus > .wsite-menu-wrap {
background: url(dropdown-box-Blue-Green.png) no-repeat !important;
padding: 0 0 0;
}

#wsite-menus > .wsite-menu-wrap > ul {
background: url(sub-menu-ul.png) repeat-x;
padding-top: 4px;
margin: 10px 0 0 0;
}

#wsite-menus .wsite-menu li {
width: 180px;
float: none;
margin: 0;
background: url(dropdown-bdr-Blue-Green.png) left bottom repeat-x;
}

#wsite-menus .wsite-menu > li:last-child {
background: none;
padding-bottom: 0;
}

#wsite-menus .wsite-menu li a {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 5px 4px;
color: #d8ecff;
background: none;
border: 0;
}

#wsite-menus .wsite-menu li a:hover {
color: #fff;
background: url(dropdown-active.png);
}



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


#footer-wrap {
background: #ffffff url(footer-wrap.png) repeat-x;
min-width: 920px;
top: -60px;
position: relative;
}

#footer {
background: url(main-bot-footer.png) no-repeat;
font-size: 12px;
color: #6f6f6f;
padding: 95px 42px 50px;
width: 870px;
margin: 0 auto;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
}

#footer p {
font-size: 13px;
}

#footer a {
color: #8ba0b4;
}

#footer a:hover {
color: #4f8ac3;
}

#footer .paragraph ul {
margin:0px !important;
padding:0px !important;
}


#footer .paragraph li {
list-style:none !important;
}

#footer span {
vertical-align: middle;
}

#footer h2 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #4d4d4d;
font-size: 1.2em;
padding: .5em 0;
margin-bottom:2px;
border-bottom:#bbb 1px solid;
}

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

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

.wsite-form-label {
display: inline-block;
color: #4d4d4d;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1em;
padding: 12px 0 5px 0;
}

.form-radio-container {
color: #4d4d4d;
font-size: 1em;
}

.wsite-form-input,.wsite-search-element-input {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1em;
background: #fff url(field.png) repeat-x;
color: #777777;
border: 1px solid #bcbbbb;
padding: 7px 4px 6px !important;
line-height: 1;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.form-select {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #777777;
font-size: 1em;
background: #fff url(field.png) repeat-x;
border: 1px solid #bcbbbb;
padding: 3px 4px;
width: 320px;
height: 27px;
line-height: 27px;
-moz-border-radius: 10px;
-webkit-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:326px !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
--------------------------------------------------------------------------------*/

/*
Buttons are styled with background image sprites. There are 4 unique image files:
- small & normal-colored (button_small_grey.png)
- large & normal-colored (button_large_grey.png)
- small & highlight-colored (button_small_orange.png)
- large & highlight-colored (button_large_orange.png)

Each of these 4 types of buttons must define a :hover state (when user's mouse is over)
as well as an :active state (when the user presses down).

Look at the CSS (especially the inner .wsite-button-inner wrapper), as well as the
image files to understand how the liquid-width nature of these buttons work.
*/

/* small */

.wsite-button {
color: #fff !important;
height: 34px;
font-size: 14px;
border: none;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
padding: 0 17px 0 0;
background: url(button-Blue-Green.png) no-repeat 100% -105px;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

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

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

.wsite-button-inner {
color: #fff !important;
height: 34px;
line-height: 34px;
display: block;
font-size: 14px;
font-weight: bold;
border: none;
text-decoration: none;
padding: 0 0 0 15px;
background: url(button-Blue-Green.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-Green.png) no-repeat 100% -126px;
padding: 0 18px 0 0;
}

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

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

.wsite-button-large .wsite-button-inner {
color: #fff !important;
height: 41px;
line-height: 41px;
padding: 0 0 0 15px;
background: url(button-large-Blue-Green.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-Green.png);
}

.wsite-button-large.wsite-button-highlight .wsite-button-inner {
color: #fff !important;
background-image: url(button-large-highlight-Blue-Green.png);
}

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

.wsite-button-highlight .wsite-button-inner {
color: #fff !important;
background-image: url(button-highlight-Blue-Green.png);
}
?
Onbekende gebruiker
13-12-2014 17:26
Hoi Madelon,

Wat je probeert is niet mogelijk. Je hebt een oranje rand als plaatje en wilt er nog een plaatje in hebben, css kan maar 1 achtergrond tegelijk inladen op een element.
Wel is het mogelijk wat je probeert te bereiken.

Het is handiger als je de div's boven en onder een oranje rand geeft door border: te gebruiken in je css.


div#afbeelding {
background: url('jouafbeeldinghier.jpg');
height: 200px;
width: 860px;
border: 8px solid #FFA500;


Dit zou je bij allebei je elementen moeten doen, header en footer.

Mocht je er niet uitkomen hoor ik het nog wel via het forum of PM.
Eddy E
13-12-2014 21:30 gewijzigd op 13-12-2014 22:00
Rickert: dit kan gewoon hoor:


img
 {
   background: url(http://assets.nydailynews.com/polopoly_fs/1.1754431.1397326292!/img/httpImage/image.jpg_gen/derivatives/article_970/microsoft-xp.jpg) center center no-repeat;
   padding: 50px;
   background-size: cover;
   height: 300px;
   border: 10px solid orange;
   box-shadow: 2px 2px 8px #888; 
   margin: 20px;
 }
<img src="transparante_png.png">


Online voorbeeld: http://codepen.io/anon/pen/ByKrwK
Ook voor ruimte-opvullende-achtergrond etc.

Toevoeging op 13/12/2014 21:57:22:

En voor een mooie oplossing voor tekst over afbeeldingen: http://css-tricks.com/design-considerations-text-images/
Vooral het laatste voorbeeld is erg mooi!
?
Onbekende gebruiker
14-12-2014 11:19
@eddy
Nice, werkt goed inderdaad. Alleen Madelon gebruikt geen img tags maar div's en wilt hier 2 afbeeldingen inladen.
Naar mijn weten is het een best practice om het los te doen en niet 2 afbeeldingen in te laden.

Jou voorbeeld werkt prima inderdaad, daar geen op of aanmerkingen over.
M
Madelon van de Ruit
14-12-2014 11:26
Goedendag allemaal,

Heel hartelijk bedankt voor het meedenken. Heb uiteindelijk een flexibele footer gevonden die ik boven de footer in de pagina heb geplaatst en zo werkt het CMS systeem van Weebly nog. Krijg niet helemaal een border er omheen (2 boven en 2 aan de zijkant die net niet aansluiten), maar goed.......

Fijne dag verder.
?
Onbekende gebruiker
14-12-2014 11:53
Niet opgelost is verder gaan toch? We willen je prima helpen erbij hoor.
Ik zie dat er nu een grijze border omheen staat van 1pixel.

border: 1px solid #CCC;

Wat ik sowieso in de broncode zie is dat een andere div helemaal gevuld wordt met een oranje kleur.
En daarin wordt een afbeelding geladen, het lijkt nu dus alsof er een border gebruikt wordt maar dit is schijnbedrog.


#banner {
background: #FAA133;
padding: 8px;
border: 1px solid #D2D2D2;
}

// Deze zitten in de #banner 
.tall-header-page .wsite-header {
width: 848px;
height: 248px;
margin: 0;
background: url(theme/banner-tall.jpg?1418475475) no-repeat;
border: 8px solid #CCC;
}
.wsite-header {
background-image: url(/uploads/4/3/3/4/43347785/header_images/1417967057.jpg) !important;
background-position: 0 0 !important;
}
M
Madelon van de Ruit
14-12-2014 12:46
Hallo Rickert,

Zal je even aan de hand van een voorbeeld laten zien hoe ik het nu met een flexibele footer heb geprobeerd.

http://testfamilydynamics.weebly.com/

Jammer is alleen dat er ruimte blijft tussen de horizontale en verticale oranje border, maar zo blijft wel het CMS systeem werken en kan ik een link toevoegen aan het email adres bijvoorbeeld en aan het icon ervaringen.

Toevoeging op 14/12/2014 13:14:37:

Hoi Rickert,

Ben zo blij......doordat jij het over border had bedacht ik mij ineens nu het mij gelukt is de flexibele footer onderaan de pagina te plaatsen, dat ik de flexibele footer natuurlijk ook een border kan geven. Hoef ik dat niet via afbeeldingen te doen.

Zo werkt het CMS ook prima, kan ik veranderen wat ik wil en zie je die verandering meteen op alle pagina's.
?
Onbekende gebruiker
14-12-2014 13:39
Kijk, helemaal goed! Dat is waar ik het voor doe. Blije gezichten :)

Volgende opdracht zelf maken met HTML en PHP? Dat is toch veel leuker dan een Weebly CMS, hihi.

Reageren

Inloggen om te reageren