Archief - schaduw rond site, beste manier = ?

G

GregoryCo

Legacy Member

• 28 nov 2008

• #1

Ik heb al verschillende methoden gezien op het internet hoe je een schaduw kan zetten rond uw website (content incl header en footer), maar tot nu toe is het alleen maar knoeien met photoshop. Ik heb ook een manier gezien om het volledig met html en css te doen, maar dat oogde niet echt mooi en professioneel.
Bestaat er een of andere manier dat door alle browsers wordt ondersteund?
Ik had ook al gedacht om de header, footer en content apart te ontwerpen in photoshop, en het ontwerp van de content te laten y-repeaten in CSS.

Wat is volgens jullie de beste manier?

dbvb

l

legerguy

Legacy Member

• 29 nov 2008

• #2

Ik gebruik een ander effect (de shadow fade weg ) Ik zet met CSS men Background helemaal naar de achtergrond door middel van de code z-index: -999.

Das gewoon een DIV achter alle andere (wel ff klooien met de plaats tussen de bovenkant & de juiste plaats. Dat ius het moeilijkste.) De gemakkelijke weg is simpel in photoshop de shadow al zetten en zoals je zegt repeat-y voor de content

G

GregoryCo

Legacy Member

• 30 nov 2008

• #3

Kheb het zo gedaan
Imagine Life Energy
nu nog ff zoeken voor die content, want hij geeft problemen als de tekst verder gaat dan de afbeelding (footer verdwijnt voor een stuk en content wordt niet verlengt desondanks repeat-y)

e

exxhal

Legacy Member

• 1 dec 2008

• #4

Meestal gebruik ik drie delen.

Ik maak een background en deze deel ik in 3 stukken.
Dan maak ik drie divs met een foto boven het stuk dat ik repeat en een stuk eronder.
De repeat zet ik dan als background. Zo kan er tekst komen nat.

K

KoenDK

Legacy Member

• 2 dec 2008

• #5

de header en footer: schaduw meeslicen
het middenstuk: repeat-y van een schaduw van 1pixel hoog en 5pixels breed

G

GregoryCo

Legacy Member

• 2 dec 2008

• #6

Kheb het zo gedaan: (in photoshop gesliced en gezet adhv css in html

html

Code:

<div id="header"></div>
    
    <div id="content">
    <div id="inhoudtekst"></div>
    </div>
    
	<div id="footer"></div>

css

Code:

#header{
	background-image:url(afbeeldingen/header.jpg);
	margin:auto;
	background-repeat:no-repeat;
	width:900px;
	height:327px;
	}
#content{
	background-image:url(afbeeldingen/inhoud.gif);
	margin:auto;
	background-repeat:repeat-y;
	width:900px;
	height:267px;
	}
#inhoudtekst{
	width:648px;
	height:374px;
	float:right;
	margin-right:35px;
	margin-top:-110px;
	}
#footer{
	background-image:url(afbeeldingen/footer.jpg);
	margin:auto;
	position:static;
	background-repeat:no-repeat;
	width:900px;
	height:106px;
	}

Hij geeft dus nog enkel een fout als de #inhoudtekst verlengt wordt door tekst

j

j design

Legacy Member

• 2 dec 2008

• #7

Ik heb juist een gedacht

Je hebt de content div en die omsluit je door een ander div met een kleine padding 2à3px.
Dan geef je die een donkergrijze kleur en een opacity van 0,4 ofzo
De middenste div wit ofzo en dan denk ik dat je een css manier hebt voor een schaduw.

* heb het nog niet geprobeert

edit: voor je css min-height nemen ipv height

G

GregoryCo

Legacy Member

• 3 dec 2008

• #8

Dat met die min-height werkt precies niet content wil nog altijd niet mee
maar kblijf zoeken
bedankt

j

j design

Legacy Member

• 3 dec 2008

• #9

#inhoudtekst{
width:648px;
height:374px;
float:right;
margin-right:35px;
margin-top:-110px;
}

Klik om te vergroten...

Waarom een float?

En als je hier de height wegneemt en dan in #content ook, dat die automatisch aanpast.
Lukt het dan ook niet?

G

GregoryCo

Legacy Member

• 3 dec 2008

• #10

Kheb het zo op zijn plaats gekregen adhv die float. De tekst mag enkel in het witte gedeelte, aan de rechter kant dus, maar dat zal je ongetwijfeld wel geweten hebben

height wegnemen werkt ook niet